/* ==========================================================================
   AutoAlerta: tema claro y oscuro (2026-11-09)
   - Los colores de Tailwind (white, navy-deep, navy-surface, on-surface, status-*) leen estas variables
     en canales RGB, así que las mismas clases sirven para los dos temas.
   - Oscuro por defecto (portal). Las páginas públicas fijan <html data-theme="light|dark"> antes de pintar
     (preferencia guardada o la del sistema) y el botón del encabezado la cambia.
   - Se carga DESPUÉS de obsidian.css para poder corregir sus colores fijos en el tema claro.
   ========================================================================== */

:root {
  /* Marca Techsspty (07 Marketing/marca.md, variables --ts-*) */
  --ts-navy: #091326; --ts-card: #121b2f; --ts-card-2: #161f33;
  --ts-accent: #E45405; --ts-accent-dark: #FB923C;
  --ts-text-dark: #d9e2fd; --ts-muted-dark: #94a3b8; --ts-heading: #0f172a; --ts-body: #475569;
  --aa-ink: 255 255 255;        /* "text-white": tinta principal */
  --aa-bg: 9 19 38;             /* --ts-navy */
  --aa-panel: 18 27 47;         /* --ts-card */
  --aa-on: 217 226 253;         /* --ts-text-dark */
  --aa-muted: 148 163 184;      /* --ts-muted-dark */
  --aa-secondary: 187 199 223;
  --aa-orange: 251 146 60;      /* --ts-accent-dark: acento sobre oscuro */
  --aa-green: 52 211 153;
  --aa-red: 255 107 107;
  --aa-amber: 251 191 36;
}

:root[data-theme="light"] {
  color-scheme: light;
  --aa-ink: 15 23 42;           /* --ts-heading */
  --aa-bg: 244 246 250;
  --aa-panel: 255 255 255;
  --aa-on: 30 41 59;
  --aa-muted: 71 85 105;        /* --ts-body, 7.4:1 sobre blanco */
  --aa-secondary: 51 65 85;
  --aa-orange: 228 84 5;        /* --ts-accent: acento sobre claro */
  --aa-green: 21 128 61;
  --aa-red: 185 28 28;          /* --ts-error */
  --aa-amber: 180 83 9;
}

/* ---------- Correcciones del tema claro sobre obsidian.css ---------- */
[data-theme="light"] body { background-color: rgb(var(--aa-bg)); color: rgb(var(--aa-on)); }
::selection { background: rgb(var(--aa-orange)); color: #091326; }
body { background-color: rgb(var(--aa-bg)); color: rgb(var(--aa-on)); font-family: "Inter", system-ui, sans-serif; }

/* El naranja como TEXTO necesita ser más oscuro sobre fondo claro (5.6:1) */
[data-theme="light"] .text-status-orange,
[data-theme="light"] .hover\:text-status-orange:hover { color: #C24604; }

[data-theme="light"] #navbar { background-color: rgba(255, 255, 255, 0.86); border-bottom-color: rgba(11, 21, 36, 0.08); }
[data-theme="light"] #navbar.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 12px rgba(11, 21, 36, 0.06); }
[data-theme="light"] .brand-lockup-sub { color: #64748B; }

[data-theme="light"] .glass-panel {
  background: #FFFFFF;
  border: 1px solid rgba(11, 21, 36, 0.09);
  box-shadow: 0 1px 2px rgba(11, 21, 36, 0.04), 0 8px 24px -12px rgba(11, 21, 36, 0.12);
}

[data-theme="light"] .sem-chip::before { box-shadow: none; }
[data-theme="light"] .sem-chip.aldia   { color: #15803D; background: rgba(21, 128, 61, .08);  border-color: rgba(21, 128, 61, .22); }
[data-theme="light"] .sem-chip.proximo { color: #B45309; background: rgba(180, 83, 9, .08);   border-color: rgba(180, 83, 9, .22); }
[data-theme="light"] .sem-chip.urgente { color: #C24604; background: rgba(228, 84, 5, .09); border-color: rgba(228, 84, 5, .26); }
[data-theme="light"] .sem-chip.vencido { color: #B91C1C; background: rgba(200, 30, 50, .08);  border-color: rgba(200, 30, 50, .24); }
[data-theme="light"] .sem-chip.sindata { color: #475569; background: rgba(71, 85, 105, .06);  border-color: rgba(71, 85, 105, .18); }

[data-theme="light"] * { scrollbar-color: #CBD5E1 transparent; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #EEF1F5; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CBD5E1; }

/* Resplandores naranjas pensados para fondo oscuro: en claro se vuelven sombras suaves */
[data-theme="light"] [class*="shadow-[0_0"] { box-shadow: 0 6px 18px -8px rgba(228, 84, 5, 0.40) !important; }

/* ---------- Logo (SVG en línea): la tinta sigue al tema ---------- */
.aa-logo { color: rgb(var(--aa-ink)); flex-shrink: 0; }
.aa-logo .aa-logo-acento { color: rgb(var(--aa-orange)); }

/* ---------- Botón de tema ---------- */
.aa-tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: rgb(var(--aa-muted)); background: transparent;
  border: 1px solid rgb(var(--aa-ink) / 0.12);
  transition: color .15s, background-color .15s, border-color .15s;
}
.aa-tema-btn:hover { color: rgb(var(--aa-ink)); background: rgb(var(--aa-ink) / 0.06); }
.aa-tema-btn:focus-visible { outline: 2px solid rgb(var(--aa-orange)); outline-offset: 3px; }
.aa-tema-btn svg { width: 20px; height: 20px; }
.aa-tema-btn .ico-sol { display: none; }
[data-theme="dark"] .aa-tema-btn .ico-sol { display: block; }
[data-theme="dark"] .aa-tema-btn .ico-luna { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.aa-tema-anim, html.aa-tema-anim * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }
}

/* ---------- Tarjetas y capturas de la portada en el tema claro ---------- */
[data-theme="light"] .glass-card {
  background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -16px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="light"] .tech-border { border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .portal-shot { border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.35); }
[data-theme="light"] .scroll-progress-bar { box-shadow: none; }
.scroll-progress-bar, .skip-link { background: rgb(var(--aa-orange)) !important; }

/* ---------- Respaldo de marca: "una app de Techsspty" ---------- */
.aa-respaldo { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: rgb(var(--aa-muted)); }
.aa-respaldo img { width: 14px; height: 14px; }
.aa-respaldo b { font-weight: 700; color: rgb(var(--aa-ink)); letter-spacing: -0.01em; }

/* ==========================================================================
   Portal (dashboard.html): colores con variables --d-* (2026-11-09).
   dashboard.css ya no tiene colores fijos fuera de @media print.
   ========================================================================== */
:root {
  --d-fondo: #050B14;
  --d-ink: #F8FAFC; --d-ink2: #E2E8F0; --d-soft: #CBD5E1; --d-muted: #94A3B8; --d-dim: #64748B;
  --d-orange: #FB923C; --d-amber: #FBBF24; --d-red: #FF6B81; --d-red-b: #E5484D; --d-green: #34D399; --d-blue: #7EA8FF;
  --d-thead: #070F1C; --d-avatar: #162844;
  --d-tint: 255 255 255;   /* superposiciones claras sobre fondo oscuro */
  --d-hondo: 3 8 15;       /* fondos hundidos (buscador, telón de modales) */
  --d-zebra: 16 30 52;     /* filas pares de la tabla */
}
:root[data-theme="light"] {
  --d-fondo: #F4F6FA;
  --d-ink: #0F172A; --d-ink2: #1E293B; --d-soft: #334155; --d-muted: #475569; --d-dim: #64748B;
  --d-orange: #C24604; --d-amber: #B45309; --d-red: #B91C1C; --d-red-b: #DC2626; --d-green: #15803D; --d-blue: #1D4ED8;
  --d-thead: #F1F4F9; --d-avatar: #E2E8F0;
  --d-tint: 15 23 42;
  --d-hondo: 255 255 255;
  --d-zebra: 241 244 249;
  /* tokens de style.css que usa el portal */
  --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #64748B; --text-dim: rgba(15, 23, 42, .6);
  --surface-1: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #F1F5F9;
  --border: rgba(15, 23, 42, .10); --border-strong: rgba(15, 23, 42, .18);
  --orange-accent: #E45405; --blue-light: #93B4E8; --text-main: #1E293B;
  --card-bg: #FFFFFF; --card-border: rgba(15, 23, 42, .10);
}
[data-theme="light"] .chofer-avatar { color: #FFFFFF; }
[data-theme="light"] .chofer-card:hover { box-shadow: 0 8px 24px -10px rgba(15, 23, 42, .2); }
[data-theme="light"] .tabla-flota thead th { border-bottom: 1px solid rgba(15, 23, 42, .08); }
[data-theme="light"] .alerta-item { background: #FFFFFF; border-top: 1px solid rgba(15, 23, 42, .08); border-right: 1px solid rgba(15, 23, 42, .08); border-bottom: 1px solid rgba(15, 23, 42, .08); }
[data-theme="light"] .alerta-item:hover { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .18); }
[data-theme="light"] .kpi-tile, [data-theme="light"] .promo { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .14); }
[data-theme="light"] .banner { background: #FFF5F5; border-color: rgba(185, 28, 28, .25); }
[data-theme="light"] .banner.banner-urgente { background: #FFF7ED; border-color: rgba(194, 70, 4, .25); }
[data-theme="light"] .banner.banner-ok { background: #F0FDF4; border-color: rgba(21, 128, 61, .25); }
[data-theme="light"] #particles-canvas { display: none; }
[data-theme="light"] .login-overlay { background: rgba(244, 246, 250, .92); }

/* En el teléfono el encabezado del portal es más alto: que no tape la línea de Drive */
@media (max-width: 767px) { body[data-page="dashboard"] #main { padding-top: 7.25rem; } }

/* Campos del formulario de acceso anticipado */
.aa-campo { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; font: 400 15px/1.4 "Inter", system-ui, sans-serif;
  color: rgb(var(--aa-ink)); background: rgb(var(--aa-bg)); border: 1px solid rgb(var(--aa-muted) / .35); transition: border-color .2s, box-shadow .2s; }
.aa-campo::placeholder { color: rgb(var(--aa-muted)); }
.aa-campo:focus { outline: none; border-color: rgb(var(--aa-orange)); box-shadow: 0 0 0 3px rgb(var(--aa-orange) / .2); }
select.aa-campo { appearance: auto; }