/* =====================================================================================================================
   PORTTI · TOKENS DEL SISTEMA DE DISEÑO
   Una sola fuente para color, tipografía, espacio, radios, sombras, controles, capas y movimiento. La cargan todas las
   interfaces (cargador, transportista, conductor, Manager y despachos) antes que cualquier otra hoja. Las secciones no
   inventan valores: usan estos. Decisiones y porqués: docs/diseno/plan-rediseno-2026-11.md (apartado 2; ola A, 03/11).
   Contrastes calculados con la fórmula de WCAG 2.2: texto ≥ 4,5:1, controles y estados ≥ 3:1.
   La copia de derecha a izquierda (css/rtl/tokens.css) se genera con `node herramientas/rtl/generar.js`.
   ===================================================================================================================== */
:root {
  /* ---------- Marca ---------- */
  --marca-amarillo: #ffcd00;          /* acción de marca y posición (pestaña activa, punto de ruta); nunca decoración */
  --marca-amarillo-suave: #fff7d9;    /* fondo de lo destacado (recomendado, seleccionado) */
  --marca-amarillo-borde: #f0dc8a;
  --marca-amarillo-hover: #f2c200;    /* amarillo al pasar el ratón o pulsar */
  --marca-amarillo-oscuro: #d4a600;   /* filete del amarillo sobre claro (estrella activa, trazo de oportunidad) */
  --marca-carbon: #24272a;            /* texto principal y acción principal neutra */
  --carbon-900: #1d1f22;              /* superficies oscuras (cabecera del transportista, Copilot, tablón) */
  --carbon-800: #26292d;
  --carbon-700: #2f3236;              /* filas y paneles sobre carbón */
  --negro: #000000;                   /* solo para sombras y velos (con color-mix) */
  --blanco: #ffffff;
  --sobre-carbon: #f4f1e8;            /* texto sobre carbón: 14,6:1 */
  --sobre-carbon-2: #b9b4a6;          /* texto secundario sobre carbón: 7,98:1 */
  --sobre-carbon-borde: #34383d;      /* filete sobre carbón */

  /* Acción y posición: alias para que la regla «un amarillo de acción por vista» se pueda buscar */
  --accion: var(--marca-amarillo);
  --accion-texto: var(--marca-carbon);
  --marcador: var(--marca-amarillo);

  /* ---------- Neutros ---------- */
  --fondo: #f6f5f2;                   /* fondo de la aplicación (cálido, de la marca) */
  --superficie: #ffffff;
  --superficie-2: #f6f5f2;            /* zonas hundidas dentro de una superficie */
  --superficie-hover: #faf9f6;
  --texto: #24272a;                   /* 15,0:1 sobre blanco */
  --texto-2: #565a5f;                 /* secundario: 6,95:1 sobre blanco · 6,37:1 sobre el fondo */
  --texto-3: #6d7176;                 /* meta: 4,91:1 sobre blanco · 4,51:1 sobre el fondo; nunca por debajo de 13 px */
  --borde: #dcd9d1;                   /* contorno de superficies (decorativo) */
  --separador: #ebe9e3;               /* filetes internos de tabla y lista (decorativo) */
  --borde-control: #949088;           /* contorno de campos y casillas: 3,18:1 (obligatorio) */
  --borde-fuerte: #cfccc4;

  /* ---------- Semánticos (texto · fondo · borde); solo para su significado ---------- */
  --ok: #166534;       --ok-fondo: #e9f6ee;     --ok-borde: #bfe3cb;
  --aviso: #8a5a00;    --aviso-fondo: #fff6e0;  --aviso-borde: #f0dc8a;
  --error: #a3341e;    --error-fondo: #fdf0ec;  --error-borde: #f3c3b7;
  --info: #1e4f8f;     --info-fondo: #eaf1fb;   --info-borde: #c9daf3;
  --compartida: #6d3fb0; --compartida-fondo: #f1ebfa; --compartida-borde: #d9c8f0;   /* rutas compartidas y packs */
  --aviso-fuerte: #b45309;            /* pendiente de asignar (torre de control): 5,0:1 sobre blanco */
  --aviso-alto: #e0703f; --aviso-alto-texto: #b4501f;   /* gravedad alta de las alertas del Manager (filete · texto) */
  --deshabilitado: #b4b1aa; --deshabilitado-fondo: #efeee9;
  /* Sobre carbón (tablón, panel de avisos, cabecera oscura, Copilot, tema noche) */
  --ok-sobre-carbon: #5fbf7f;         /* 7,27:1 */
  --aviso-sobre-carbon: #e39a2d;      /* 7,02:1 */
  --error-sobre-carbon: #ff7a5c;      /* 6,44:1 */
  --info-sobre-carbon: #4a8fd6;       /* 4,87:1 */
  /* Carriles de la vista de rutas (un color por camión; siempre con su nombre al lado) */
  --carril-0: #1f6fd1; --carril-1: #d9480f; --carril-2: #2b8a3e; --carril-3: #9c36b5; --carril-4: #0c8599; --carril-5: #b08900;
  /* Escala de datos (tramos de precio del Laboratorio y del histórico): siempre con su valor al lado */
  --escala-bajo: #f6e3a6; --escala-ok: #8fd0a4; --escala-alto: #a9bde8;
  /* Velos */
  --velo-modal: color-mix(in srgb, var(--carbon-900) 55%, transparent);

  /* ---------- Perfiles: color solo en el marco (cabecera, logotipo, icono de rol) ---------- */
  --perfil-despacho: #1f3a5f;         /* 11,5:1 sobre blanco */
  --perfil-despacho-fondo: #eaf0f7;
  --perfil-despacho-borde: #c3d1e3;

  /* ---------- Tipografía ---------- */
  --fuente: 'Klavika', var(--fuente-escritura, Arial), Arial, sans-serif; /* --fuente-escritura: la pone js/i18n.js para escrituras que Klavika no tiene */
  --fuente-senal: 'Overpass', var(--fuente);   /* solo señales: cartel de destino, códigos del panel de avisos, franja de cabina */
  --fuente-num: 'Klavika', var(--fuente-escritura, Arial), Arial, sans-serif; /* cifras con la fuente de la marca y números tabulares */
  --t-2xs: 11px;    /* solo versalitas: cabecera de tabla y códigos */
  --t-xs: 12px;     /* meta (hora, fuente, «hace 2 min»), ayudas bajo el campo */
  --t-sm: 13px;     /* tablas densas, texto de apoyo, chips, pestañas */
  --t-base: 14px;   /* texto de trabajo */
  --t-md: 16px;     /* campos en móvil, lectura larga */
  --t-lg: 18px;     /* títulos de bloque y de ventana */
  --t-xl: 22px;     /* cifras en banda; título de página en móvil */
  --t-h1: 24px;     /* título de página (uno por pantalla) */
  --t-cifra: 28px;  /* la cifra protagonista, una por vista */
  --t-2xl: var(--t-cifra);           /* alias antiguo */
  --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 700;   /* Klavika no tiene 600: prohibido */
  --il-texto: 1.5; --il-compacto: 1.3; --il-titulo: 1.15; --il-cifra: 1.05;
  --interlineado: var(--il-texto); --interlineado-compacto: var(--il-compacto);   /* alias antiguos */
  --espaciado-versalitas: 0.06em;

  /* ---------- Espacio (múltiplos de 4) y rejilla ---------- */
  --e-0-5: 2px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --e-12: 48px; --e-14: 56px; --e-16: 64px;
  --espacio-seccion: 32px;           /* entre secciones, con un filete de 1 px */
  --canal: 24px;                     /* canal lateral */
  --rejilla-hueco: 24px;
  --acento-ancho: 3px;               /* filete izquierdo de lo pendiente o de una decisión */

  /* ---------- Radios: cuatro valores con función ---------- */
  --r-xs: 2px;      /* códigos de categoría, marcadores de mapa, barras de progreso y de fase */
  --r-sm: 4px;      /* campos, botones, chips, etiquetas, casillas */
  --r-md: 6px;      /* superficies en reposo, desplegables */
  --r-lg: 8px;      /* solo lo que flota: modal, hoja, cajón, panel de avisos, menús */
  --r-full: 999px;  /* solo avatar, punto de estado e interruptor; nunca chips ni botones */

  /* ---------- Sombras: ninguna en reposo ---------- */
  --sombra-1: none;
  --sombra-2: 0 6px 22px color-mix(in srgb, var(--marca-carbon) 12%, transparent);   /* menús y paneles */
  --sombra-3: 0 20px 60px color-mix(in srgb, var(--marca-carbon) 28%, transparent);  /* modal y hoja */

  /* ---------- Controles y densidad ---------- */
  --control-h: 40px;       /* campos y botones en escritorio */
  --control-h-sm: 32px;    /* filtros, acciones de fila */
  --control-h-lg: 52px;    /* acción principal de una pantalla en móvil */
  --diana-min: 24px;       /* objetivo mínimo (WCAG 2.5.8) */
  --fila-h: 40px; --fila-h-densa: 32px; --fila-h-doble: 56px; --fila-h-movil: 64px; --th-h: 32px;
  --celda-pad-x: 12px; --celda-pad-y: 8px;

  /* ---------- Foco: anillo doble carbón sobre claro, amarillo sobre carbón (WCAG 1.4.11 y 2.4.7) ---------- */
  --foco-color: var(--marca-carbon);                                          /* 15:1 sobre claro */
  --foco-color-oscuro: var(--marca-amarillo);                                 /* 11:1 sobre carbón */
  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca-carbon);
  --foco-oscuro: 0 0 0 2px var(--carbon-900), 0 0 0 4px var(--marca-amarillo);

  /* ---------- Iconos «Portti Ruta» ---------- */
  --ico-trazo: 1.75px; --ico-acento: transparent;
  --ico-sm: 16px; --ico-md: 20px; --ico-lg: 24px; --ico-xl: 48px;

  /* ---------- Marco ---------- */
  --ancho-lectura: 68ch;
  --ancho-formulario: 920px;
  --ancho-contenido: 1440px;
  --cabecera-h: 56px; --menu-w: 240px; --detalle-w: 480px; --detalle-w-manager: 560px; --barra-inferior-h: 64px;

  /* ---------- Panel de control de avisos (P-44; los usa css/teletipo.css) ---------- */
  --tk-alto: 44px;
  --tk-fondo: var(--carbon-900);
  --tk-texto: var(--sobre-carbon);
  --tk-meta: var(--sobre-carbon-2);
  --tk-filete: color-mix(in srgb, var(--sobre-carbon) 16%, transparent);
  --tk-hover: color-mix(in srgb, var(--sobre-carbon) 10%, transparent);
  --tk-a-urgente: color-mix(in srgb, var(--error) 55%, #fff);
  --tk-a-entorno: var(--marca-amarillo);
  --tk-a-cuenta: color-mix(in srgb, var(--info) 40%, #fff);
  --tk-a-mercado: color-mix(in srgb, var(--compartida) 40%, #fff);

  /* ---------- Cabina del conductor (css/pantallas/conductor.css; fichas conductor-marco y conductor-hoy) ---------- */
  --t-dato: 20px; --t-hito: 15px; --t-marcha: 32px;
  --franja-h: 56px; --franja-fondo: var(--carbon-900); --franja-acento: 3px;

  /* ---------- Páginas públicas ---------- */
  --portada-fondo: var(--carbon-900);
  --portada-papel: var(--fondo);
  --portada-texto-2: var(--sobre-carbon-2);
  --portada-ok: var(--ok);
  --portada-r: var(--r-lg);

  /* ---------- Capas ---------- */
  /* contenido 0 · barras pegajosas internas 8 · desplegables del contenido 30-60 · cabecera (y su menú) 80 ·
     barra inferior 90 · modal 100 · paneles laterales 300-400 · banda de demo 1000 · avisos 1100 · guía 3000.
     Los mapas (Leaflet usa 400-1000 dentro) quedan encerrados en su capa: nunca tapan la cabecera ni el menú. */
  --z-pegajoso: 8; --z-desplegable: 50; --z-cabecera: 80; --z-barra-inferior: 90; --z-modal: 100; --z-menu: 300; --z-panel: 400; --z-toast: 1100;
  --z-marcha: 2000;   /* modo en marcha del conductor: por encima de todo salvo la guía */

  /* ---------- Movimiento ---------- */
  --t-rapido: 160ms; --t-medio: 260ms; --curva: cubic-bezier(.2, .8, .2, 1);
}
/* Móvil: campos y texto un punto más grandes (se usan con el pulgar y a pie de camión); nada de la tarea por debajo de 13 px */
@media (max-width: 640px) {
  :root {
    --t-2xs: 12px; --t-xs: 13px; --t-sm: 14px; --t-base: 16px; --t-xl: 20px; --t-h1: 22px; --t-cifra: 24px;
    --control-h: 48px; --control-h-sm: 44px; --diana-min: 44px;   /* táctil: nada por debajo de 44 px */
    --espacio-seccion: 24px; --canal: 16px; --rejilla-hueco: 16px;
  }
}

/* ---------- Cabina del conductor (auditoría del conductor del 03/11, S3): al sol, separadores que se ven y, en el
   móvil, letra y controles de cabina. Solo bajo su interfaz (body[data-interfaz="conductor"], 37-cabina.js). ---------- */
body[data-interfaz="conductor"] { --separador: #cfccc4; }
@media (max-width: 640px) {
  body[data-interfaz="conductor"] { --t-base: 17px; --control-h: 56px; --control-h-lg: 64px; }
}

/* ---------- Tema noche de la cabina (S4): entre el ocaso y el amanecer, o a mano en «Menú». Solo lo pone el conductor
   (html[data-tema="noche"], 37-cabina.js). Contrastes sobre --superficie (#1d1f22): texto 14,6:1 · texto-2 7,98:1 ·
   texto-3 5,8:1 · semánticos ≥ 4,8:1. El amarillo sigue siendo solo de acción. ---------- */
:root[data-tema="noche"] {
  color-scheme: dark;
  --fondo: #121315; --superficie: #1d1f22; --superficie-2: #17181b; --superficie-hover: #26292d;
  --texto: #f4f1e8; --texto-2: #b9b4a6; --texto-3: #9d988b;
  --borde: #3a3d42; --separador: #3a3d42; --borde-control: #7d7a72; --borde-fuerte: #4a4e54;
  --marca-amarillo-suave: #2e2a14; --marca-amarillo-borde: #6b5a14;
  --ok: var(--ok-sobre-carbon);       --ok-fondo: #16281d;    --ok-borde: #2f5a3d;
  --aviso: var(--aviso-sobre-carbon); --aviso-fondo: #2c2312; --aviso-borde: #6b4c17;
  --error: var(--error-sobre-carbon); --error-fondo: #301a15; --error-borde: #7a3628;
  --info: var(--info-sobre-carbon);   --info-fondo: #162538;  --info-borde: #2c4d78;
  --deshabilitado: #6b6f75; --deshabilitado-fondo: #2a2c30;
  --foco-color: var(--marca-amarillo);
  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca-amarillo);
}
:root[data-tema="noche"] body[data-interfaz="conductor"] { --separador: #3a3d42; }