/* tkv_base.css — tokens ÚNICOS del portal de transporte (oficina, conductor y entrada) y su modo noche.
   Especificación: estudio Gmail (ESPEC §1-§2, Anexo A) con las correcciones de la crítica (foco). Lo cargan las 4 páginas
   del portal ANTES de su hoja propia; tkv_tema.js va justo detrás (sin defer ni async).
   Modo: sin atributo = Automático (sigue al móvil/ordenador); <html data-tema="claro"> u "oscuro" = elegido a mano (lo pone
   tkv_tema.js antes de pintar). Los dos bloques oscuros son IGUALES y cada color del claro tiene su oscuro (test_tkv_tema).
   El esquema del navegador (barras de desplazamiento, calendario, autocompletar) NO se pone aquí: lo da
   <meta name="color-scheme" content="light dark">, que cada página añade ANTES de esta hoja cuando la suya ya pinta con
   estos tokens (así una página a medio pasar no sale con controles oscuros sobre fondo claro); tkv_tema.js lo ajusta.
   Foco: anillo de 2 px en --tkv-foco SEPARADO 2 px del control (outline-offset: 2px; en filas y celdas, -2px por dentro),
   de modo que el anillo siempre cae sobre el fondo de alrededor y nunca sobre el relleno del botón; dentro de la barra
   grafito, el anillo es --tkv-sobre-barra. */
:root {
  /* letra: una sola pila (la que ya pinta Roboto en Android); 6 tamaños y 3 pesos */
  --tkv-letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tkv-t-12: 12px; --tkv-l-12: 16px;   /* meta: nº, hora, contadores, insignias, pie */
  --tkv-t-13: 13px; --tkv-l-13: 18px;   /* 3.ª línea, chips, etiquetas de la barra de abajo */
  --tkv-t-14: 14px; --tkv-l-14: 20px;   /* cuerpo de la oficina: 1.ª y 2.ª línea, cajón, botones */
  --tkv-t-16: 16px; --tkv-l-16: 24px;   /* campos en el móvil (sin zoom), cuerpo del conductor, ruta de la tarjeta */
  --tkv-t-20: 20px; --tkv-l-20: 28px;   /* títulos de hoja/ventana, ruta de «Ahora» (conductor), «Iniciar sesión» */
  --tkv-t-24: 24px; --tkv-l-24: 32px;   /* título de pantalla («Viajes», «Buscar DeCA», «0 de 43») */
  --tkv-p-normal: 400; --tkv-p-medio: 500; --tkv-p-fuerte: 700;   /* «medio» con ratón: 600 (abajo) */
  /* forma */
  --tkv-r-4: 4px; --tkv-r-8: 8px; --tkv-r-12: 12px; --tkv-r-16: 16px; --tkv-r-pildora: 9999px;
  /* espacio (rejilla de 4) */
  --tkv-s-1: 4px; --tkv-s-2: 8px; --tkv-s-3: 12px; --tkv-s-4: 16px; --tkv-s-6: 24px; --tkv-s-8: 32px;
  --tkv-lado: 16px;                     /* margen lateral en el móvil (hoy 15 y 16) */
  /* alturas */
  --tkv-toque: 48px;                    /* botón/ítem táctil nuevo (mínimo absoluto: 44) */
  --tkv-control: 40px;                  /* botón/campo con ratón (hoy 38) */
  --tkv-chip: 32px;                     /* chip visible (su toque, 48) */
  --tkv-barra-alto: 64px;               /* barra de arriba en el móvil */
  --tkv-nav-alto: 64px;                 /* barra de abajo */
  --tkv-fila-alto: 76px;                /* fila «Compacta» en el móvil: 10 + 20 + 18 + 18 + 10 */
  --tkv-fab: 56px;
  --tkv-principal: 60px;                /* acción principal del conductor (guantes) */
  /* movimiento (nada pasa de 200 ms; con «reducir movimiento», 0) */
  --tkv-d-pulsar: 70ms; --tkv-d-cambio: 150ms; --tkv-d-cajon: 200ms;
  --tkv-curva: cubic-bezier(.2, 0, 0, 1);

  /* ── color, CLARO ── */
  --tkv-fondo: #eef1f4;          /* página, tras las filas y tarjetas */
  --tkv-superficie: #ffffff;     /* fila, tarjeta, cajón, campo, barra de abajo */
  --tkv-superficie-2: #f6f7f9;   /* pie de la tarjeta, zonas secundarias dentro de una superficie */
  --tkv-elevada: #ffffff;        /* hoja, ventana, menú, aviso flotante (en claro la eleva la sombra) */
  --tkv-barra: #343a40;          /* grafito de TKV: barra de arriba (igual en los dos modos) */
  --tkv-sobre-barra: #ffffff; --tkv-sobre-barra-2: #ced3d8;
  --tkv-pildora: #212529;        /* búsqueda dentro de la barra */
  --tkv-sobre-pildora: #ffffff; --tkv-sobre-pildora-2: #c3c8cd;
  --tkv-texto: #1b1f23;          /* 16,6:1 en superficie */
  --tkv-texto-2: #50575e;        /* 7,3:1 en superficie · 6,5 en fondo */
  --tkv-texto-3: #62696f;        /* 5,6:1: ayudas y marcadores; solo sobre superficie/elevada */
  --tkv-linea: #dde1e6;          /* separadores (adorno) */
  --tkv-borde: #7b838b;          /* borde de campo y chip: 3,9 en superficie · 3,4 en fondo (1.4.11) */
  --tkv-accion: #0056b3; --tkv-accion-hover: #004a99; --tkv-accion-pulsado: #003d80; --tkv-sobre-accion: #ffffff;
  --tkv-accion-texto: #0056b3;   /* enlaces y botones de texto: 7,0 en superficie */
  --tkv-accion-suave: #d7e6fb; --tkv-sobre-accion-suave: #003d80;   /* píldora activa, chip elegido, prioridad, botón flotante: 8,4:1 */
  --tkv-foco: #003d80;           /* ≥ 3,8:1 sobre todos los fondos, también la cabecera gris de «Validado» (#0056b3 daba 2,6) */
  --tkv-ptc: #ffc3c3; --tkv-pti: #ffe7a0; --tkv-ptf: #d6ecd6; --tkv-a: #9c9c9c;   /* los de su web (medidos el 24-sep) */
  --tkv-sobre-ptc: #1b1f23; --tkv-sobre-pti: #1b1f23; --tkv-sobre-ptf: #1b1f23; --tkv-sobre-a: #1b1f23;
  --tkv-aviso-fondo: #fff3cd; --tkv-aviso-texto: #7a5a00; --tkv-aviso-punto: #c26a00;
  --tkv-error-fondo: #fdecea; --tkv-error-texto: #b3261e; --tkv-error-punto: #d93025;
  --tkv-ok-fondo: #e6f4ea; --tkv-ok-texto: #1e6b34; --tkv-ok-punto: #2e8540; --tkv-neutro-punto: #8a9199;
  --tkv-insignia: #ffcf5c; --tkv-sobre-insignia: #3a2a00;
  --tkv-marca-busca: #ffe58f;
  /* capa de estado (M3): el color del texto con 8 % (ratón) y 12 % (pulsado) encima de cualquier fondo, con
     background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)) (no pisa el color de fondo) */
  --tkv-capa-hover: rgba(27, 31, 35, .08); --tkv-capa-pulsado: rgba(27, 31, 35, .12);
  --tkv-velo: rgba(0, 0, 0, .40);   /* detrás del cajón y de las hojas */
  /* elevación: en claro, sombra; en oscuro, tono (elevada) + sombra fuerte */
  --tkv-e1: 0 1px 2px rgba(16, 24, 40, .06);
  --tkv-e2: 0 1px 3px rgba(16, 24, 40, .10), 0 4px 12px rgba(16, 24, 40, .10);
  --tkv-e3: 0 8px 28px rgba(16, 24, 40, .22);
  --tkv-e-nav: 0 -1px 0 var(--tkv-linea), 0 -4px 12px rgba(16, 24, 40, .06);
}
/* ── OSCURO: automático (el móvil en oscuro y nadie ha elegido «Claro») ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tkv-fondo: #343a40; --tkv-superficie: #1c1f23; --tkv-superficie-2: #24282c; --tkv-elevada: #3d434a;
    --tkv-barra: #343a40; --tkv-sobre-barra: #ffffff; --tkv-sobre-barra-2: #ced3d8;
    --tkv-pildora: #1c1f23; --tkv-sobre-pildora: #ffffff; --tkv-sobre-pildora-2: #b9bfc5;
    --tkv-texto: #e8eaed; --tkv-texto-2: #b6bcc2; --tkv-texto-3: #aab1b8;
    --tkv-linea: #3a3f45; --tkv-borde: #8d959d;
    --tkv-accion: #90c2ff; --tkv-accion-hover: #a8cfff; --tkv-accion-pulsado: #bfdcff; --tkv-sobre-accion: #062a52;
    --tkv-accion-texto: #90c2ff;
    --tkv-accion-suave: #294770; --tkv-sobre-accion-suave: #d6e6ff;
    --tkv-foco: #ffffff;
    --tkv-ptc: #6e3236; --tkv-pti: #62501c; --tkv-ptf: #2f5536; --tkv-a: #555b61;
    --tkv-sobre-ptc: #ffe3e3; --tkv-sobre-pti: #fff0c7; --tkv-sobre-ptf: #ddf3dd; --tkv-sobre-a: #eef0f2;
    --tkv-aviso-fondo: #3f3413; --tkv-aviso-texto: #f5cf66; --tkv-aviso-punto: #f0a33a;
    --tkv-error-fondo: #4a2422; --tkv-error-texto: #ff9d91; --tkv-error-punto: #ff7a6b;
    --tkv-ok-fondo: #1f3a26; --tkv-ok-texto: #8fd9a0; --tkv-ok-punto: #5cc275; --tkv-neutro-punto: #8d959d;
    --tkv-insignia: #f2c75c; --tkv-sobre-insignia: #2b1f00;
    --tkv-marca-busca: #6b5a12;
    --tkv-capa-hover: rgba(232, 234, 237, .08); --tkv-capa-pulsado: rgba(232, 234, 237, .12);
    --tkv-velo: rgba(0, 0, 0, .60);
    --tkv-e1: none;
    --tkv-e2: 0 1px 3px rgba(0, 0, 0, .50), 0 4px 12px rgba(0, 0, 0, .40);
    --tkv-e3: 0 8px 28px rgba(0, 0, 0, .60);
    --tkv-e-nav: 0 -1px 0 var(--tkv-linea);
  }
}
/* ── OSCURO elegido a mano: el MISMO bloque ── */
:root[data-tema="oscuro"] {
  --tkv-fondo: #343a40; --tkv-superficie: #1c1f23; --tkv-superficie-2: #24282c; --tkv-elevada: #3d434a;
  --tkv-barra: #343a40; --tkv-sobre-barra: #ffffff; --tkv-sobre-barra-2: #ced3d8;
  --tkv-pildora: #1c1f23; --tkv-sobre-pildora: #ffffff; --tkv-sobre-pildora-2: #b9bfc5;
  --tkv-texto: #e8eaed; --tkv-texto-2: #b6bcc2; --tkv-texto-3: #aab1b8;
  --tkv-linea: #3a3f45; --tkv-borde: #8d959d;
  --tkv-accion: #90c2ff; --tkv-accion-hover: #a8cfff; --tkv-accion-pulsado: #bfdcff; --tkv-sobre-accion: #062a52;
  --tkv-accion-texto: #90c2ff;
  --tkv-accion-suave: #294770; --tkv-sobre-accion-suave: #d6e6ff;
  --tkv-foco: #ffffff;
  --tkv-ptc: #6e3236; --tkv-pti: #62501c; --tkv-ptf: #2f5536; --tkv-a: #555b61;
  --tkv-sobre-ptc: #ffe3e3; --tkv-sobre-pti: #fff0c7; --tkv-sobre-ptf: #ddf3dd; --tkv-sobre-a: #eef0f2;
  --tkv-aviso-fondo: #3f3413; --tkv-aviso-texto: #f5cf66; --tkv-aviso-punto: #f0a33a;
  --tkv-error-fondo: #4a2422; --tkv-error-texto: #ff9d91; --tkv-error-punto: #ff7a6b;
  --tkv-ok-fondo: #1f3a26; --tkv-ok-texto: #8fd9a0; --tkv-ok-punto: #5cc275; --tkv-neutro-punto: #8d959d;
  --tkv-insignia: #f2c75c; --tkv-sobre-insignia: #2b1f00;
  --tkv-marca-busca: #6b5a12;
  --tkv-capa-hover: rgba(232, 234, 237, .08); --tkv-capa-pulsado: rgba(232, 234, 237, .12);
  --tkv-velo: rgba(0, 0, 0, .60);
  --tkv-e1: none;
  --tkv-e2: 0 1px 3px rgba(0, 0, 0, .50), 0 4px 12px rgba(0, 0, 0, .40);
  --tkv-e3: 0 8px 28px rgba(0, 0, 0, .60);
  --tkv-e-nav: 0 -1px 0 var(--tkv-linea);
}
/* el peso «medio»: 500 con el dedo (Roboto Medium, Android) y 600 con ratón (Segoe UI no tiene 500: lo pinta como 400;
   su 600 es Semibold). Tres pesos por equipo */
@media (pointer: fine) { :root { --tkv-p-medio: 600; } }
@media (prefers-reduced-motion: reduce) { :root { --tkv-d-pulsar: 0ms; --tkv-d-cambio: 0ms; --tkv-d-cajon: 0ms; } }

/* ── «Modo noche»: Automático · Claro · Oscuro (lo crea tkvTema.control(); lo meten los menús de la oficina y del
   conductor). Radios de verdad dentro de un fieldset con su nombre; cada opción ocupa todo el alto del control (toque
   ≥ 44: --tkv-modo-alto 48 menos el borde). La elegida: relleno suave y negrita (no solo color). ── */
.tkv-modo { margin: 0; padding: 0; border: 0; min-width: 0; font-family: var(--tkv-letra); }
.tkv-modo-t { float: left; width: 100%; padding: 0; margin: 0 0 var(--tkv-s-2);
  font-size: var(--tkv-t-12); line-height: var(--tkv-l-12); font-weight: var(--tkv-p-medio); color: var(--tkv-texto-2); }
.tkv-modo-ops { clear: both; display: flex; min-height: var(--tkv-modo-alto, var(--tkv-toque)); padding: 0 1px;
  border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-pildora); background: var(--tkv-superficie); }
.tkv-modo-op { position: relative; flex: 1 1 0; min-width: 0; display: flex; padding: 3px 2px; }
.tkv-modo-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tkv-modo-cara { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 var(--tkv-s-2); border-radius: var(--tkv-r-pildora); color: var(--tkv-texto); white-space: nowrap;
  font-size: var(--tkv-t-13); line-height: var(--tkv-l-13); font-weight: var(--tkv-p-medio);
  transition: background-color var(--tkv-d-cambio) var(--tkv-curva); }
.tkv-modo-cara svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.tkv-modo-cara svg .tkv-relleno { fill: currentColor; stroke: none; }
.tkv-modo-in:checked + .tkv-modo-cara { background-color: var(--tkv-accion-suave); color: var(--tkv-sobre-accion-suave);
  font-weight: var(--tkv-p-fuerte); }
.tkv-modo-in:focus-visible + .tkv-modo-cara,
.tkv-teclado .tkv-modo-in:focus + .tkv-modo-cara { outline: 2px solid var(--tkv-foco); outline-offset: 1px; }
@media (hover: hover) {
  .tkv-modo-in:not(:checked):hover + .tkv-modo-cara { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); }
}
.tkv-modo-in:not(:checked):active + .tkv-modo-cara { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
@media (forced-colors: active) { .tkv-modo-in:checked + .tkv-modo-cara { outline: 2px solid Highlight; outline-offset: -2px; } }