/* ==========================================================================
   Obsidian Telemetrics — capa de tema de la web (landing, legales y portal)
   Fuente del diseño: web/stitch_redise_o_de_aplicativo_web/obsidian_telemetrics/DESIGN.md
   Se carga DESPUES de style.css / dashboard.css y ANTES de tailwind.css.
   Solo afecta a la web: los tokens de la app (design-tokens/) no se tocan.
   Regla de contraste heredada: sobre naranja (#FF7A00) siempre texto oscuro (#050B14).
   ========================================================================== */

:root {
  /* Superficies (canvas -> paneles) */
  --color-navy-900: #050B14;
  --color-navy-800: #0B1524;
  --color-navy-700: #101E34;
  --color-navy-600: #162844;

  /* Acento y semaforos */
  --color-accent: #FF7A00;
  --color-accent-hover: #FF9433;
  --color-accent-light: #FFA043;
  --color-accent-dark: #050B14;
  --status-vencido: #FF1744;
  --status-urgente: #FF7A00;
  --status-proximo: #FFAB00;
  --status-aldia: #00E676;
  --color-green: #00E676;
  --color-green300: #69F0AE;
  --color-red: #FF1744;
  --color-amber: #FFAB00;
  --color-blue-600: #2979FF;
  --color-blue-700: #1F5FD8;
  --color-blue-300: #8AB4FF;

  /* Texto */
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dim: rgba(226, 232, 240, 0.6);
  --text-main: #E2E8F0;

  /* Paneles de vidrio + bordes de 1px frios */
  --surface-1: rgba(16, 30, 52, 0.55);
  --surface-2: rgba(16, 30, 52, 0.75);
  --surface-3: rgba(22, 40, 68, 0.9);
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.26);
  --card-bg: rgba(16, 30, 52, 0.6);
  --card-border: rgba(148, 163, 184, 0.14);
  --navy: var(--color-navy-800);
  --navy-dark: var(--color-navy-900);
  --blue-primary: var(--color-blue-600);
  --blue-light: var(--color-blue-300);

  /* Tipografia: Space Grotesk (titulos y cifras), Inter (texto), JetBrains Mono (metadatos, placas, fechas) */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --type-displayLg-size: 36px;
  --type-displayLg-weight: 700;
  --type-displayLg-tracking: -0.03em;
  --type-headlineMd-weight: 600;
  --type-headlineMd-tracking: -0.01em;

  /* Formas: instrumental, esquinas compactas */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 8px;
}

html { color-scheme: dark; }

body {
  background-color: #050B14;
  color: #E2E8F0;
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }
h1 { font-weight: 700; line-height: 1.05; }

::selection { background: #FF7A00; color: #050B14; }

/* Cifras y datos: siempre tabulares para que las columnas alineen */
.font-display-hero, .font-headline-lg, .font-headline-md, .font-label-tech, .font-data-mono { font-variant-numeric: tabular-nums; }
.font-label-tech { text-transform: uppercase; }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: #1C2D47 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #060D17; }
::-webkit-scrollbar-thumb { background: #1C2D47; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #FF7A00; }

/* Cabecera compartida */
#navbar {
  background-color: rgba(5, 11, 20, 0.82);
  border-bottom-color: rgba(148, 163, 184, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
#navbar.scrolled { background-color: rgba(5, 11, 20, 0.92); }
#navbar nav a:focus-visible,
#navbar nav button:focus-visible { outline: 2px solid #FF7A00; outline-offset: 3px; border-radius: 4px; }
.brand-lockup-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.brand-lockup-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #64748B; }

/* Panel de vidrio (nivel 2 del sistema): borde frio + brillo especular superior */
.glass-panel {
  background: linear-gradient(135deg, rgba(16, 30, 52, 0.78) 0%, rgba(11, 21, 36, 0.86) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Etiqueta de semaforo (Vigente / Por vencer / Vencido): punto luminoso + texto mono */
.sem-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 10px; border-radius: 9999px; border: 1px solid transparent;
}
.sem-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.sem-chip.aldia   { color: #00E676; background: rgba(0, 230, 118, .10); border-color: rgba(0, 230, 118, .22); }
.sem-chip.proximo { color: #FFAB00; background: rgba(255, 171, 0, .10);  border-color: rgba(255, 171, 0, .24); }
.sem-chip.urgente { color: #FF9433; background: rgba(255, 122, 0, .12);  border-color: rgba(255, 122, 0, .28); }
.sem-chip.vencido { color: #FF1744; background: rgba(255, 23, 68, .14);  border-color: rgba(255, 23, 68, .32); }
.sem-chip.sindata { color: #94A3B8; background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .18); }
.sem-chip.vencido::before { animation: sem-pulse 1.8s ease-in-out infinite; }
@keyframes sem-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sem-chip.vencido::before { animation: none; } }

/* Pie de pagina: enlaces en minuscula (las mayusculas tecnicas se reservan para datos) */
footer .font-label-tech { text-transform: none; letter-spacing: .01em; font-size: 13px; }