/* ====================================================================
   SAM — SECURITY ALERTS MONITORING · Ricart Labs
   Design System — Tactical Command (ClickHouse-dark heritage · acento monocromo)
   Dark Canvas · Glass · Monospaced Data · Acento Monocromo Blanco
   Hereda la filosofía GeoAlert/Kust0D; la firma de identidad de SAM
   es el cian táctico. El color semántico queda reservado a estados.
   Cargar después de Tailwind y antes de sam.css / cctv.css / vms.css.
   ==================================================================== */

/* === FUENTES LOCALES === */
@font-face {
  font-family: "Phosphor-Fill";
  src: url("/sam-engine/fonts/Phosphor-Fill.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* === DESIGN TOKENS (CSS Custom Properties) === */
:root {
  /* Tipografía — Inter (UI) + JetBrains Mono (datos) + Share Tech Mono (reloj/HUD) */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-console: 'Share Tech Mono', monospace;

  /* Surface — canvas táctico oscuro */
  --surface: #0a0a0a;
  --surface-dim: #0a0a0a;
  --surface-bright: #1a1a1a;
  --surface-container-lowest: #050505;
  --surface-container-low: #101010;
  --surface-container: #1a1a1a;
  --surface-container-high: #242424;
  --surface-container-highest: #2a2a2a;
  --on-surface: #ffffff;
  --on-surface-variant: #cccccc;
  --outline: #888888;
  --outline-variant: #2a2a2a;

  /* Primary — monocromo del sistema (componentes neutros) */
  --primary: #ffffff;
  --on-primary: #0a0a0a;
  --primary-container: #ffffff;
  --on-primary-container: #0a0a0a;
  --primary-fixed: #cccccc;

  /* Secondary */
  --secondary: #cccccc;
  --secondary-container: #2a2a2a;

  /* Firma SAM — acento monocromo blanco (sistema) */
  --color-accent: #ffffff;
  --color-accent-dim: #cccccc;
  --color-accent-bg: rgba(255, 255, 255, 0.06);
  --color-accent-glow: rgba(255, 255, 255, 0.28);
  --color-accent-border: rgba(255, 255, 255, 0.20);

  /* Estados — semántica operativa (idéntica al sistema) */
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --warning: #f59e0b;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  --color-orange: #f97316;
  --color-idle: #eab308;
  --color-teal: #14b8a6;
  --color-lila: #a855f7;
  --color-pending: #9ca3af;
  --color-done: #6b7280;
  --color-cancelled: #4b5563;

  /* Glass */
  --glass-bg: rgba(10, 10, 10, 0.60);
  --glass-border: rgba(255, 255, 255, 0.04);
  --glass-blur: 10px;
  --glass-saturate: 1.2;

  /* Sidebar / layout */
  --sidebar-bg: rgba(10, 10, 10, 0.85);
  --sidebar-width: 64px;
  --panel-right: 420px;
  --gutter: 16px;

  /* Mapa */
  --map-glass: rgba(10, 10, 10, 0.66);
  --map-border: rgba(255, 255, 255, 0.08);
  --map-btn-color: rgba(255, 255, 255, 0.4);
  --map-btn-hover: rgba(255, 255, 255, 0.8);
  --tactical-grid: rgba(0, 255, 65, 0.08);
  --tactical-grid-label: rgba(0, 255, 65, 0.35);

  /* Derivados */
  --color-base: #0a0a0a;
  --color-panel: #101010;
  --color-panel-alt: #1a1a1a;
  --color-border: #242424;
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-text: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-muted: #888888;
  --color-glass: rgba(10, 10, 10, 0.60);
  --color-glass-border: rgba(255, 255, 255, 0.04);
}

/* === LIGHT THEME OVERRIDES — inverso táctico === */
:root:not(.dark) {
  --surface: #fafafa;
  --surface-dim: #f0f0f0;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f5f5;
  --surface-container: #f0f0f0;
  --surface-container-high: #e8e8e8;
  --surface-container-highest: #e0e0e0;
  --on-surface: #0a0a0a;
  --on-surface-variant: #333333;
  --outline: #666666;
  --outline-variant: #d4d4d4;
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #000000;
  --on-primary-container: #ffffff;
  --primary-fixed: #333333;
  --secondary: #333333;
  --secondary-container: #e8e8e8;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --warning: #a16207;

  /* Firma SAM en claro — acento monocromo negro */
  --color-accent: #000000;
  --color-accent-dim: #555555;
  --color-accent-bg: rgba(0, 0, 0, 0.06);
  --color-accent-glow: rgba(0, 0, 0, 0.18);
  --color-accent-border: rgba(0, 0, 0, 0.30);

  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --color-orange: #ea580c;
  --color-idle: #ca8a04;
  --color-teal: #0d9488;
  --color-lila: #9333ea;
  --color-pending: #6b7280;
  --color-done: #4b5563;
  --color-cancelled: #374151;

  --glass-bg: rgba(255, 255, 255, 0.60);
  --glass-border: rgba(0, 0, 0, 0.06);
  --sidebar-bg: rgba(255, 255, 255, 0.88);

  --map-glass: rgba(245, 244, 240, 0.9);
  --map-border: rgba(0, 0, 0, 0.1);
  --map-btn-color: rgba(0, 0, 0, 0.5);
  --map-btn-hover: rgba(0, 0, 0, 0.8);
  --tactical-grid: rgba(0, 160, 45, 0.10);
  --tactical-grid-label: rgba(0, 130, 40, 0.45);

  --color-base: #fafafa;
  --color-panel: #f5f5f5;
  --color-panel-alt: #eeeeee;
  --color-border: #e0e0e0;
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-text: #0a0a0a;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-glass: rgba(255, 255, 255, 0.60);
  --color-glass-border: rgba(0, 0, 0, 0.06);
}

/* === BASE === */
:root { --theme-transition: 0.25s; }
html { transition: background var(--theme-transition) ease; }
body { font-family: var(--font-body); color: var(--color-text); }

::selection { background: var(--color-accent-glow); color: var(--on-surface); }

/* Scrollbar táctico */
.sam-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.sam-scroll::-webkit-scrollbar-track { background: transparent; }
.sam-scroll::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 4px; }
.sam-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* === UTILIDADES DE MARCA === */
.font-mono-sam { font-family: var(--font-mono); }
.font-console-sam { font-family: var(--font-console); }
.text-label-sam {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.glow-accent-sam { box-shadow: 0 0 15px var(--color-accent-glow); }
.glow-text-sam {
  color: var(--color-accent);
  text-shadow: 0 0 12px var(--color-accent-glow);
}

/* === COMPONENTES BASE === */
.sam-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: 4px;
}

.sam-input {
  background: var(--color-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-mono);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sam-input::placeholder { color: var(--color-text-muted); }
.sam-input:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}

.sam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sam-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sam-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.sam-btn-primary:hover:not(:disabled) { box-shadow: 0 0 15px var(--color-accent-glow); }
.sam-btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.sam-btn-secondary:hover:not(:disabled) {
  border-color: var(--color-accent-border);
  box-shadow: 0 0 10px var(--color-accent-glow);
}
.sam-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.sam-btn-ghost:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-accent-bg);
}
.sam-btn-accent {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  text-shadow: 0 0 8px var(--color-accent-glow);
}
.sam-btn-accent:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent);
  box-shadow: 0 0 15px var(--color-accent-glow);
}


.sam-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-accent-bg);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* LED de estado con pulso */
.sam-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sam-led.live { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); animation: sam-state-pulse 2s infinite; }
.sam-led.connecting { background: var(--color-text-muted); animation: sam-state-pulse 1.2s infinite; }
.sam-led.loss { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.sam-led.off { background: var(--color-danger); box-shadow: 0 0 8px var(--color-danger); animation: sam-state-pulse 1s infinite; }

/* === ANIMACIONES DEL SISTEMA === */
@keyframes sam-state-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes sam-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
@keyframes sam-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sam-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sam-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sam-anim-fade-in { animation: sam-fade-in 0.25s ease both; }
.sam-anim-slide-up { animation: sam-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sam-anim-slide-down { animation: sam-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .sam-led.live, .sam-led.connecting, .sam-led.off { animation: none; }
  .sam-anim-fade-in, .sam-anim-slide-up, .sam-anim-slide-down { animation: none; }
}