:root {
  /* Marca (manual de marca de SM Electronic's) */
  --azul: #00608B;
  --azul-oscuro: #004B6E;
  --amarillo: #FBBB22;
  --amarillo-hover: #E9A90F;

  /* Superficies y texto */
  --fondo: #FFFFFF;
  --fondo-suave: #F6F8F9;
  --texto: #16242C;
  --texto-suave: #64757F;
  --titulo: #0B3A52;
  --borde: #E3E8EC;
  --borde-control: #7D8C95;
  --seleccion: #EEF6FA;
  --foco: #00608B;

  /* Estados: fondo y texto */
  --agendada-bg: #E3F0F6;
  --agendada-texto: #00507A;
  --curso-bg: #FFF3D1;
  --curso-texto: #7A5600;
  --ok: #1D6B3A;
  --ok-bg: #E2F4E8;
  --ok-texto: #1D6B3A;
  --urgente: #B3261E;
  --urgente-bg: #FDE7E4;
  --urgente-texto: #B3261E;

  /* Nombres que usa el panel lateral */
  --superficie: var(--fondo);
  --superficie-2: var(--fondo-suave);

  /* Medidas */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --dur-micro: 0.15s;
  --dur-fast: 0.25s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sombra: 0 1px 2px rgba(22, 36, 44, 0.05), 0 4px 16px rgba(22, 36, 44, 0.06);
  --lateral: 232px;

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: "Quicksand", "Inter", system-ui, sans-serif;

  /* ── Sistema de diseño del panel (prototipo aprobado el 2026-10-07,
     docs/diseno/prototipo-panel.html). Tema "claro suave": nada es blanco
     puro; la página es gris azulada y las tarjetas, casi blancas con borde. ── */
  --azul-tinte: #E2EEF4;
  --azul-tinte-2: #D3E5EF;
  --azul-borde: #5F8CA4;
  --sobre-amarillo: #16242C;
  --pagina: #E8EDF1;
  --barra-bg: rgba(232, 237, 241, 0.92);
  --tarjeta: #FAFBFC;
  --tarjeta-2: #F1F4F7;
  --borde-suave: #E3E8EC;
  --pista: #DDE4E9;
  --texto-2: #51626B;

  /* Menú lateral oscuro */
  --lat-bg: #004B6E;
  --lat-texto: #E3EEF4;
  --lat-suave: #A9CBDD;
  --lat-hover: rgba(255, 255, 255, 0.08);
  --lat-activo: rgba(255, 255, 255, 0.15);
  --lat-borde: rgba(255, 255, 255, 0.12);
  --contador-bg: #DCEBF3;
  --contador-texto: #004B6E;

  /* Estados: iguales en todas las pantallas */
  --aviso: #7A5600;
  --aviso-bg: #FCEFC7;
  --peligro: #B3261E;
  --peligro-bg: #FADFDB;
  --peligro-borde: #E9A9A2;
  --info: #00507A;
  --info-bg: #DDECF4;

  /* El color de cada grupo del menú: tono (texto e íconos), tinte (fondos),
     borde y tono sobre el menú oscuro. */
  --hoy: #00608B; --hoy-t: #E2EEF4; --hoy-b: #A7C7D8; --hoy-m: #FFFFFF;
  --serv: #1F5FA8; --serv-t: #E3EDF8; --serv-b: #A9C4E6; --serv-m: #9CC8F5;
  --cli: #0E6F68; --cli-t: #DCF1EE; --cli-b: #9BD3CC; --cli-m: #7FDCCF;
  --din: #1D6E40; --din-t: #E0F2E7; --din-b: #A3D4B5; --din-m: #9BE0B4; --din-suave: #9CCDB0;
  --sale: #8A5A00; --sale-t: #FBEFD6; --sale-graf: #D49A2A;
  --tie: #A2461F; --tie-t: #FAE7DE; --tie-b: #E8B8A2; --tie-m: #F5B79A;
  --inf: #6243A8; --inf-t: #ECE6F8; --inf-b: #C5B5EA; --inf-m: #C9B6F5;

  --r-sm: 10px;
  --r-md: 10px;
  --r-lg: 14px;
  --sombra-alta: 0 4px 12px rgba(22, 36, 44, 0.08), 0 16px 40px rgba(22, 36, 44, 0.12);
  --anillo: 0 0 0 3px rgba(0, 96, 139, 0.3);

  /* ── Panel guiado (prototipo aprobado el 2026-10-10,
     docs/diseno/prototipo-panel-guiado.html): lo que faltaba. Mismos colores;
     más aire y una sola forma de marcar el foco. ── */
  --texto-3: #56666F;
  /* El texto sobre el azul (un chip elegido): blanco en claro, azul noche en oscuro. */
  --sobre-azul: #FFFFFF;
  --velo: rgba(10, 22, 30, 0.38);
  --sombra-media: 0 2px 4px rgba(20, 34, 42, 0.05), 0 8px 24px rgba(20, 34, 42, 0.08);
  /* Sólido (3:1 o más en los dos temas): un filete del color de la tarjeta y el
     azul del tema por fuera; var(--azul) se resuelve con el tema de :root. */
  --anillo-foco: 0 0 0 2px var(--tarjeta), 0 0 0 4px var(--azul);
  --r: 14px;
  /* La escala de espacios: nada se separa con otra medida. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
}

/* El panel (y la app del técnico) usan el sistema nuevo: los nombres de
   antes apuntan a las fichas nuevas, así cada pantalla que ya existe lo toma
   sin cambiar su HTML. Las páginas públicas no llevan la clase y siguen
   como estaban. */
:root.diseno {
  --fondo: var(--tarjeta);
  --fondo-suave: var(--tarjeta-2);
  --texto-suave: var(--texto-2);
  --seleccion: var(--azul-tinte);
  --borde: #D3DBE1;
  /* El borde de los campos: 3:1 también sobre la página gris (WCAG 1.4.11). */
  --borde-control: #74838C;
  --agendada-bg: var(--info-bg);
  --agendada-texto: var(--info);
  --curso-bg: var(--aviso-bg);
  --curso-texto: var(--aviso);
  --ok-bg: #DDF1E4;
  --ok-texto: var(--ok);
  --urgente: var(--peligro);
  --urgente-bg: var(--peligro-bg);
  --urgente-texto: var(--peligro);
  --radius-sm: var(--r-sm);
  --sombra: 0 1px 2px rgba(22, 36, 44, 0.06), 0 2px 8px rgba(22, 36, 44, 0.05);
  /* ── Panel v4 (prototipo aprobado el 2026-10-10, docs/diseno/v4/estilos.css):
     el sistema de diseño de todo el panel. Los nombres de antes (arriba)
     apuntan a estos, así las pantallas de legado lo toman sin cambiar. ── */
  --azul-hover: #004E72; --azul-tinte: #E4EFF5; --azul-tinte-2: #D3E5EF; --sobre-azul: #FFFFFF;
  --amarillo-hover: #EEAC10; --amarillo-tinte: #FFF4D6; --sobre-amarillo: #1F1600;
  --pagina: #EDF1F4; --tarjeta: #FFFFFF; --tarjeta-2: #F4F7F9; --hundido: #E9EEF2; --hover: #EEF3F6; --sel: #E1EDF4;
  --borde: #DCE3E8; --borde-fuerte: #C4CED5; --borde-control: #74838C; --pista: #E1E7EC;
  --texto: #14222A; --texto-2: #4D5E67; --texto-3: #56676F; --titulo: #0B3A52;
  --lat-bg: #004B6E; --lat-bg-2: #00405F; --lat-texto: #E6F0F5; --lat-suave: #A9CBDD; --lat-hover: rgba(255, 255, 255, 0.08); --lat-activo: rgba(255, 255, 255, 0.16);
  --ajx: #4D5E67; --ajx-t: #E9EEF2;
  --ok: #1D6B3A; --ok-bg: #DDF1E4; --ok-fuerte: #2E8B57;
  --aviso: #6E4D00; --aviso-bg: #FCEFC7; --aviso-fuerte: #E0A100;
  --peligro: #B3261E; --peligro-bg: #FADFDB; --peligro-fuerte: #D2463B;
  --insignia: var(--peligro); --sobre-insignia: #FFFFFF;
  --info: #00507A; --info-bg: #DDECF4;
  --gris: #51626B; --gris-bg: #EBEFF2;
  --serie: #00608B; --serie-2: #A9BCC8; --serie-gb: #C46A1F; --serie-sm: #00608B; --serie-neg: #C2412F;
  --sombra-1: 0 1px 2px rgba(20, 34, 42, 0.06), 0 1px 3px rgba(20, 34, 42, 0.04);
  --sombra-2: 0 2px 4px rgba(20, 34, 42, 0.05), 0 8px 24px rgba(20, 34, 42, 0.08);
  --sombra-3: 0 8px 20px rgba(20, 34, 42, 0.10), 0 24px 60px rgba(20, 34, 42, 0.20);
  --anillo: 0 0 0 3px rgba(0, 96, 139, 0.40);
  --velo: rgba(8, 20, 28, 0.42);
  --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 22px;
  /* Escala de espacio (px): 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 (las --e-… de arriba). */
  color-scheme: light;
}

/* Tema oscuro, para todo el día. Todo texto pasa AA (4,5:1) sobre su fondo. */
:root.diseno[data-theme="oscuro"] {
  --azul: #7CC0E4; --azul-oscuro: #A9D6EE; --azul-tinte: #17344A; --azul-tinte-2: #1D3F57; --azul-borde: #4C7A96;
  --pagina: #0E171D; --barra-bg: rgba(14, 23, 29, 0.92);
  --tarjeta: #15212A; --tarjeta-2: #1B2A34;
  --borde: #2B3C48; --borde-suave: #22323D; --borde-control: #6A8292; --pista: #24343F;
  --texto: #E4ECF0; --texto-2: #9FB0BA; --titulo: #EAF2F6;
  --lat-bg: #0B2534; --lat-borde: rgba(255, 255, 255, 0.08);
  --contador-bg: #A9D6EE; --contador-texto: #0B2534;
  --ok: #7FD19F; --ok-bg: #15301F;
  --aviso: #E8C25A; --aviso-bg: #33280F;
  --peligro: #F2958C; --peligro-bg: #3A1B19; --peligro-borde: #7A3A33;
  --info: #8CC3E6; --info-bg: #13283A;
  --hoy: #7CC0E4; --hoy-t: #13283A; --hoy-b: #2E5470;
  --serv: #8DB9EE; --serv-t: #1A2D42; --serv-b: #34506F;
  --cli: #6FD1C4; --cli-t: #12312F; --cli-b: #2B5852;
  --din: #7FD19F; --din-t: #15301F; --din-b: #2E5A3D; --din-suave: #3F7A55;
  --sale: #E8B45A; --sale-t: #33280F; --sale-graf: #C9973E;
  --tie: #F0A585; --tie-t: #3A2219; --tie-b: #6A3F2D;
  --inf: #BBA6F2; --inf-t: #282041; --inf-b: #4A3D75;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-alta: 0 8px 28px rgba(0, 0, 0, 0.45);
  --anillo: 0 0 0 3px rgba(124, 192, 228, 0.45);
  --texto-3: #93A4AE;
  --sobre-azul: #06202E;
  --velo: rgba(0, 0, 0, 0.55);
  --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.35);
  /* Panel v4, tema oscuro. */
  --azul-hover: #A2D3EE; --azul-tinte: #15303F; --amarillo-tinte: #3A2F12;
  --pagina: #0D161C; --tarjeta: #15202A; --tarjeta-2: #1A2731; --hundido: #111B22; --hover: #1C2A34; --sel: #1B3343;
  --borde: #26353F; --borde-fuerte: #34464F; --borde-control: #6F8796; --pista: #26363F;
  --texto: #E7EEF2; --texto-2: #A8B8C1; --texto-3: #91A2AC;
  --lat-bg-2: #08202D;
  --ajx: #A8B8C1; --ajx-t: #1E2B34;
  --ok-fuerte: #4FB57A; --aviso: #F0CB66; --aviso-fuerte: #E0A100; --peligro-fuerte: #E5675C;
  --insignia: var(--peligro-fuerte); --sobre-insignia: #0D161C;
  --gris: #A8B8C1; --gris-bg: #1E2B34;
  --serie: #7CC0E4; --serie-2: #3E5463; --serie-gb: #F0A060; --serie-sm: #7CC0E4; --serie-neg: #F2958C;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35); --sombra-2: 0 4px 16px rgba(0, 0, 0, 0.35); --sombra-3: 0 12px 40px rgba(0, 0, 0, 0.6);
  --anillo: 0 0 0 3px rgba(124, 192, 228, 0.55);
  color-scheme: dark;
}