/* La app del conductor, «TKV Viajes» (/conductor, body.tc-app), y la tabla de conductores de la oficina
   (/deca/chofer/conductores, body.tc-body, encima de deca_viajes.css).

   Conductor — plan del móvil, bloque B (26-sep), «Hoja de ruta a pleno sol», pasado al sistema del portal (estudio Gmail,
   bloque C, 27-sep): los colores, la letra, los radios y el modo noche salen de tkv_base.css (--tkv-*), que se carga antes.
   Grafito de TKV arriba (en los dos modos), la acción en el azul de TKV y los colores de estado de su web. Una sola letra
   (la del sistema: Roboto en Android) en 4 tamaños (14 · 16 · 20 · 24) y 3 pesos (normal, medio y fuerte), como Gmail: lo
   que manda, grande y en negrita; lo demás, en gris y más pequeño. Guantes: 60 px lo principal, 48-56 lo demás. Una acción
   principal por pantalla, abajo, al alcance del pulgar (el dock); el resto, en el menú lateral (☰). Tres movimientos y nada
   más: la hoja que sube (150 ms), el menú que entra (200 ms) y el pulsado (70 ms); con «reducir movimiento», ninguno.
   Colores fijos (iguales en claro y en oscuro), solo los de la lista blanca de .tc-app: la placa de matrícula (una placa) y
   el fondo del QR (blanco siempre: así lo lee el lector del agente también en modo noche). No carga deca_viajes.css: todo lo
   suyo está aquí, con prefijo tc-. */

/* ─────────────────────────── conductor: lo propio (lo demás, en tkv_base.css) ─────────────────────────── */
.tc-app {
  --tc-cab: 56px; --tc-ancho: 40rem;
  /* lista blanca: la placa (blanca, tinta negra y franja azul UE) y el fondo del QR, en los dos modos; la capa de pulsado
     sobre la cabecera grafito (blanca: la cabecera es grafito en los dos modos) */
  --tc-placa: #ffffff; --tc-placa-tinta: #1b1f23; --tc-ue: #0039a6; --tc-qr-fondo: #ffffff; --tc-capa-barra: rgba(255, 255, 255, .12);
  /* el borde de las tarjetas: a pleno sol marca dónde acaba (en oscuro las separa el tono) */
  --tc-sombra: 0 0 0 1px var(--tkv-linea);
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--tkv-fondo); color: var(--tkv-texto);
  font: var(--tkv-p-normal) var(--tkv-t-16)/var(--tkv-l-16) var(--tkv-letra); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.tc-app *, .tc-app *::before, .tc-app *::after { box-sizing: border-box; }
/* :where() deja estas bases sin peso: cualquier clase (.tc-b-prim…) las cambia */
.tc-app :where(button, input, select, textarea) { font: inherit; color: inherit; }
.tc-app button, .tc-app a, .tc-app input, .tc-app select, .tc-app textarea, .tc-app summary, .tc-app label {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tc-app :where(button) { cursor: pointer; }
.tc-app [hidden] { display: none !important; }
.tc-app :focus-visible { outline: 2px solid var(--tkv-foco); outline-offset: 2px; }
.tc-app .tc-cab :focus-visible { outline-color: var(--tkv-sobre-barra); }
.tc-app :where(h1, h2, p) { margin: 0; }
.tc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tc-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ─────────────────────────── cabecera: ☰, logo, «Oficina» y sus iniciales; 56 px, fija, con los avisos pegados ─────────────────────────── */
/* (en oscuro la página es del mismo grafito: el filete marca dónde acaba la cabecera; en claro no se ve) */
.tc-cab { position: sticky; top: 0; z-index: 20; color: var(--tkv-sobre-barra); background: var(--tkv-barra); box-shadow: 0 1px 0 var(--tkv-linea);
  padding-top: env(safe-area-inset-top); }
.tc-cab-fila { display: flex; align-items: center; gap: 8px; height: var(--tc-cab); max-width: var(--tc-ancho); margin: 0 auto;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); }
.tc-cab-fila > * { flex: none; }
.tc-cab-fila > .tc-hueco { flex: 1 1 auto; }
.tc-menu { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--tkv-sobre-barra); background: transparent; border: 0;
  border-radius: var(--tkv-r-pildora); }
.tc-menu .tc-i { width: 24px; height: 24px; }
.tc-cab-logo { display: inline-flex; align-items: center; height: 48px; padding: 0 2px; border-radius: var(--tkv-r-8); }
.tc-cab-logo img { display: block; width: auto; height: 36px; }
.tc-cab-tel { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px 0 14px; color: var(--tkv-sobre-barra); font-size: var(--tkv-t-16);
  font-weight: var(--tkv-p-medio); text-decoration: none; background: transparent; border: 1px solid var(--tkv-sobre-barra-2); border-radius: var(--tkv-r-pildora); }
.tc-cab-tel .tc-i { width: 20px; height: 20px; }
.tc-yo { width: 48px; height: 48px; padding: 0; color: var(--tkv-sobre-accion-suave); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte);
  background: var(--tkv-accion-suave); border: 0; border-radius: 50%; }
@media (hover: hover) {
  .tc-menu:hover, .tc-cab-tel:hover { background-color: var(--tc-capa-barra); }
  .tc-yo:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); }
}
.tc-banda { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px max(var(--tkv-lado), env(safe-area-inset-right)) 6px max(var(--tkv-lado), env(safe-area-inset-left));
  color: var(--tkv-aviso-texto); font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-medio); background: var(--tkv-aviso-fondo);
  border-bottom: 1px solid var(--tkv-linea); }
.tc-banda p { flex: 1 1 auto; }
.tc-banda .tc-b { flex: none; min-height: 48px; padding: 0 14px; font-size: var(--tkv-t-16); }
.tc-banda-version { color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); }

/* ─────────────────────────── lo común: botones, campos, textos ─────────────────────────── */
.tc { max-width: var(--tc-ancho); margin: 0 auto; padding: 12px max(var(--tkv-lado), env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(var(--tkv-lado), env(safe-area-inset-left)); }
.tc-con-dock .tc { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.tc-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tkv-toque); padding: 0 18px; color: var(--tkv-texto);
  font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte); line-height: 1.2; text-align: center; text-decoration: none; background: transparent;
  border: 2px solid transparent; border-radius: var(--tkv-r-8);
  transition: transform var(--tkv-d-pulsar) var(--tkv-curva), background-color var(--tkv-d-pulsar) var(--tkv-curva); }
.tc-b:active { transform: scale(.98); }
.tc-b-prim { min-height: var(--tkv-principal); color: var(--tkv-sobre-accion); font-size: var(--tkv-t-20); background: var(--tkv-accion); border-color: var(--tkv-accion); }
.tc-b-prim:active { background: var(--tkv-accion-pulsado); border-color: var(--tkv-accion-pulsado); }
.tc-b-borde { color: var(--tkv-accion-texto); border-color: var(--tkv-accion-texto); }
.tc-b-borde:active, .tc-b-texto:active { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
.tc-b-texto { color: var(--tkv-accion-texto); font-weight: var(--tkv-p-medio); }
.tc-b-ancho { width: 100%; }
/* mientras falte algo (Iniciar): dice qué falta y no inicia (aria-disabled); gris con la tinta de siempre (legible al sol) */
.tc-b-prim[aria-disabled="true"], .tc-b-prim[aria-disabled="true"]:active { color: var(--tkv-texto); background: var(--tkv-superficie-2); border-color: var(--tkv-borde); transform: none; cursor: default; }
.tc-b:disabled { cursor: default; }
.tc-b[aria-busy="true"] { cursor: progress; }
@media (hover: hover) {
  .tc-b-prim:hover { background: var(--tkv-accion-hover); border-color: var(--tkv-accion-hover); }
  .tc-b-borde:hover, .tc-b-texto:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); }
  .tc-b-prim[aria-disabled="true"]:hover { background: var(--tkv-superficie-2); border-color: var(--tkv-borde); }
}
.tc-h1 { font-size: var(--tkv-t-24); line-height: var(--tkv-l-24); font-weight: var(--tkv-p-fuerte); }
.tc-sub { margin-top: 8px; color: var(--tkv-texto-2); text-wrap: pretty; }
.tc-etq, .tc-campo > label { font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte); }
.tc-in { width: 100%; min-height: 52px; padding: 0 14px; color: var(--tkv-texto); font-size: var(--tkv-t-20); background: var(--tkv-superficie);
  border: 2px solid var(--tkv-borde); border-radius: var(--tkv-r-8); -webkit-appearance: none; appearance: none; }
.tc-in::placeholder { color: var(--tkv-texto-3); opacity: 1; }
textarea.tc-in { min-height: 88px; padding: 12px 14px; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); resize: vertical; }
select.tc-in { padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--tkv-texto) 50%), linear-gradient(135deg, var(--tkv-texto) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.tc-in:focus { border-color: var(--tkv-accion); outline: 0; box-shadow: 0 0 0 3px var(--tkv-accion-suave); }
.tc-in[aria-invalid="true"] { border-color: var(--tkv-error-punto); }
.tc-in-grande { min-height: 56px; font-weight: var(--tkv-p-medio); }
.tc-error, .tc-msg { display: flex; gap: 8px; padding: 10px 12px; color: var(--tkv-error-texto); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-medio);
  background: var(--tkv-error-fondo); border-radius: var(--tkv-r-8); text-wrap: pretty; }
.tc-error:empty, .tc-msg:empty { display: none; }
.tc-msg.tc-info, .tc-error.tc-info { color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); }
.tc-msg.tc-prueba { color: var(--tkv-aviso-texto); background: var(--tkv-aviso-fondo); }
.tc-nota { padding: 10px 12px; color: var(--tkv-texto-2); font-size: var(--tkv-t-16); background: var(--tkv-superficie-2); border-radius: var(--tkv-r-8); text-wrap: pretty; }
.tc-prueba { margin-bottom: 12px; padding: 10px 12px; color: var(--tkv-aviso-texto); font-weight: var(--tkv-p-medio); background: var(--tkv-aviso-fondo); border-radius: var(--tkv-r-8); }
.tc-num { font-size: var(--tkv-t-16); font-weight: var(--tkv-p-medio); color: var(--tkv-texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─────────────────────────── entrar ─────────────────────────── */
.tc-entrar { padding-top: 12px; }
.tc-form { display: grid; gap: 8px; margin-top: 24px; }
.tc-form .tc-etq:not(:first-child) { margin-top: 8px; }
.tc-clave { position: relative; }
.tc-clave .tc-in { padding-right: 56px; }
.tc-ojo { position: absolute; top: 50%; right: 4px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; margin-top: -24px;
  color: var(--tkv-texto-2); background: transparent; border: 0; border-radius: var(--tkv-r-8); }
.tc-form .tc-error { margin-top: 4px; }
.tc-form .tc-b-prim { margin-top: 12px; }
.tc-ayuda { margin-top: 24px; color: var(--tkv-texto-2); font-size: var(--tkv-t-16); text-align: center; text-wrap: pretty; }
.tc-ayuda a { display: inline-block; padding: 12px 4px; color: var(--tkv-accion-texto); font-weight: var(--tkv-p-fuerte); text-decoration: none; }
/* (revisión, 1-oct) en el móvil no caben en una línea: cada teléfono en la suya, sin el «·» colgando al final de la primera */
@media (max-width: 599.98px) { .tc-ayuda a { display: block; } .tc-ayuda-sep { display: none; } }

/* ─────────────────────────── cargando: el esqueleto tiene el alto de «Ahora» (sin saltos) ─────────────────────────── */
.tc-carga { display: grid; gap: 12px; }
.tc-carga-t { color: var(--tkv-texto-2); font-weight: var(--tkv-p-medio); }
.tc-carga-copia:empty { display: none; }
.tc-entrar-copia:not(:empty) { margin-bottom: 16px; }   /* (revisión, 28-sep) el albarán guardado, encima de «Entra» */
.tc-esqueleto { display: grid; gap: 14px; height: 300px; padding: 16px; background: var(--tkv-superficie); border-radius: var(--tkv-r-16); box-shadow: var(--tc-sombra); align-content: start; }
.tc-esqueleto i { display: block; height: 18px; background: var(--tkv-linea); border-radius: var(--tkv-r-8); }
.tc-esqueleto i:nth-child(1) { width: 40%; height: 32px; border-radius: var(--tkv-r-pildora); }
.tc-esqueleto i:nth-child(2) { width: 80%; height: 28px; }
.tc-esqueleto i:nth-child(3) { width: 70%; height: 28px; }
.tc-esqueleto i:nth-child(4) { width: 45%; height: 34px; }

/* ─────────────────────────── hoy: saludo, días, «Tu viaje de ahora», filas ─────────────────────────── */
.tc-saludo { margin: 0 0 8px; color: var(--tkv-texto-2); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-normal); }
.tc-saludo b { color: var(--tkv-texto); font-weight: var(--tkv-p-fuerte); }
.tc-saludo b:not(:empty)::after { content: " · "; color: var(--tkv-texto-2); font-weight: var(--tkv-p-normal); }
/* Ayer · Hoy · Mañana: lo que se elige, en píldora (como «Modo noche»); el elegido, relleno suave y en negrita (no solo color) */
.tc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 56px; padding: 3px; margin-bottom: 12px; background: var(--tkv-superficie);
  border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-pildora); }
.tc-seg-b { padding: 0; color: var(--tkv-texto); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-medio); background: transparent; border: 0; border-radius: var(--tkv-r-pildora); }
.tc-seg-b[aria-selected="true"] { color: var(--tkv-sobre-accion-suave); font-weight: var(--tkv-p-fuerte); background: var(--tkv-accion-suave); }
@media (hover: hover) { .tc-seg-b:not([aria-selected="true"]):hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
/* (Iraitz, 11-oct) cuatro: Ayer, Hoy, Mañana y «Otro día» (abre el calendario), un poco más ancho por su icono. La misma
   altura que con tres: más alto taparía «Peso, bultos y más datos» con el dock a 360 × 640 (Director O2) */
.tc-seg4 { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
.tc-seg-otro { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; white-space: nowrap; }
.tc-seg-otro .tc-i { flex: none; width: 18px; height: 18px; }
/* (prueba en móviles, 11-oct) con la letra grande del sistema (zoom 130 %: ~277 px de ancho) «Otro día» no cabía con su
   icono: a menos de 340 px, sin icono y a 14 */
@media (max-width: 340px) { .tc-seg-b { font-size: var(--tkv-t-14); } .tc-seg-otro .tc-i { display: none; } }

/* (Iraitz, 11-oct) «Otro día»: el mes, como el calendario del móvil. Cada día, un botón entero de 56 px de alto (a 360,
   ~46 de ancho: con guantes); debajo del número, cuántos viajes (en color si queda alguno por hacer; sin viajes, nada).
   Hoy, con aro; el que se ve, relleno como la pestaña elegida */
.tc-cal-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tc-cal-fl { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--tkv-texto); background: transparent;
  border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-pildora); }
.tc-cal-ant .tc-i { transform: scaleX(-1); }
.tc-cal-fl:disabled { opacity: .3; }
.tc-cal-mes { flex: 1 1 auto; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); text-align: center; }
.tc-cal-sem, .tc-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tc-cal-sem span { padding: 4px 0; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-medio); text-align: center; }
.tc-cal-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 56px; padding: 4px 0;
  color: var(--tkv-texto); background: transparent; border: 0; border-radius: var(--tkv-r-12); }
.tc-cal-d b { font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-fuerte); font-variant-numeric: tabular-nums; }
.tc-cal-n { min-width: 24px; height: 20px; padding: 0 6px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: 20px; font-weight: var(--tkv-p-fuerte);
  font-variant-numeric: tabular-nums; background: var(--tkv-superficie-2); border-radius: var(--tkv-r-pildora); }
.tc-cal-n:empty { visibility: hidden; }
.tc-cal-n.tc-cal-pend { color: var(--tkv-sobre-accion); background: var(--tkv-accion); }
.tc-cal-hoy { box-shadow: inset 0 0 0 2px var(--tkv-accion); }
.tc-cal-d[aria-pressed="true"] { color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); }
.tc-cal-d[aria-disabled="true"] { opacity: .3; }
/* letra grande (menos de 340 px): el mes entero cabe y su nombre en una línea (si no, ‹ › se mueven al cambiar de mes) */
@media (max-width: 340px) { .tc-cal-d { height: 54px; } .tc-cal-fl { width: 44px; height: 44px; } .tc-cal-mes { font-size: var(--tkv-t-16); white-space: nowrap; } }

/* (Ibon, 11-oct) «Próximos días», debajo de Hoy: un día por fila, como las filas de viajes (pegadas, esquinas 16 fuera y
   4 dentro); arriba el día y cuántos viajes, debajo sus rutas (hasta 3) */
.tc-prox { display: grid; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
.tc-prox > li { background: var(--tkv-superficie); border-radius: var(--tkv-r-4); }
.tc-prox > li:first-child { border-top-left-radius: var(--tkv-r-16); border-top-right-radius: var(--tkv-r-16); }
.tc-prox > li:last-child { border-bottom-left-radius: var(--tkv-r-16); border-bottom-right-radius: var(--tkv-r-16); }
.tc-prox-d { display: grid; gap: 4px; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; color: var(--tkv-texto); text-align: left;
  background: transparent; border: 0; border-radius: inherit; }
.tc-prox-cab { display: flex; align-items: center; gap: 8px; }
.tc-prox-cab b { flex: 1 1 auto; min-width: 0; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); }
.tc-prox-n { flex: none; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }
.tc-prox-cab .tc-i { flex: none; color: var(--tkv-texto-2); }
.tc-prox-rutas { display: grid; gap: 2px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); overflow-wrap: anywhere; }
.tc-prox-mas { color: var(--tkv-accion-texto); font-weight: var(--tkv-p-medio); }
@media (hover: hover) { .tc-prox-d:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
@media (hover: hover) {
  .tc-cal-fl:not(:disabled):hover, .tc-cal-d:not([aria-pressed="true"]):not([aria-disabled="true"]):hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); }
}
/* (Ibon, 11-oct) lo que la oficina ha cambiado desde que lo vio (deca_avisos): en el color de «acción», con el antes →
   después y «Entendido» debajo, a todo lo ancho del texto */
.tc-avisof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; margin: 0 0 12px; padding: 12px 14px;
  color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); border-radius: var(--tkv-r-12); }
.tc-avisof > .tc-i { margin-top: 2px; }
.tc-avisof > div { display: grid; gap: 4px; min-width: 0; font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); overflow-wrap: anywhere; }
.tc-avisof > div > b { font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); }
.tc-avisof p { margin: 0; }
.tc-avisof > .tc-b { grid-column: 2; justify-self: start; min-height: 44px; }
.tc-fila-nuevo { padding: 0 6px; color: var(--tkv-sobre-accion-suave); font-weight: var(--tkv-p-fuerte); background: var(--tkv-accion-suave); border-radius: var(--tkv-r-pildora); }

/* (Iraitz, 11-oct) un día fuera de ayer a mañana: solo mirar (sin Iniciar, Albarán ni fotos) */
.tc-solover { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 0 12px; padding: 0 12px 0 10px; color: var(--tkv-texto-2);
  font-size: var(--tkv-t-14); font-weight: var(--tkv-p-fuerte); background: var(--tkv-superficie-2); border-radius: var(--tkv-r-pildora); }
.tc-solover .tc-i { width: 18px; height: 18px; }
.tc-solover + .tc-sub-t { margin-top: 4px; }
.tc-hoja-f > .tc-solover { margin: 0; align-self: center; }
.tc-panel[aria-busy="true"] { opacity: .55; }

/* el estado: en píldora arriba de «Ahora» y de la ficha; en las filas, el círculo de 40 (como la inicial de Gmail) con su
   icono. Los colores de su web, con la tinta que toca encima (en oscuro, los mismos tonos apagados) */
.tc-pil { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; font-size: var(--tkv-t-14); line-height: var(--tkv-l-14);
  font-weight: var(--tkv-p-fuerte); white-space: nowrap; border-radius: var(--tkv-r-pildora); }
.tc-pil .tc-i { width: 18px; height: 18px; }
.tc-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.tc-av .tc-i { width: 20px; height: 20px; }
.tc-pil.PTC, .tc-av.PTC { color: var(--tkv-sobre-ptc); background: var(--tkv-ptc); }
.tc-pil.PTI, .tc-av.PTI { color: var(--tkv-sobre-pti); background: var(--tkv-pti); }
.tc-pil.PTF, .tc-av.PTF { color: var(--tkv-sobre-ptf); background: var(--tkv-ptf); }
.tc-pil.A, .tc-av.A { color: var(--tkv-sobre-a); background: var(--tkv-a); }

/* los títulos de cada parte («Después · 2», «Terminados»), como «Recibidos» de Gmail: pequeños y en gris. «Tu viaje de ahora»,
   solo para el lector (director O2: con él y el aire de antes, «Peso, bultos y más datos» quedaba bajo el dock a 360 × 640) */
.tc-sub-t { margin: 24px 4px 8px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-medio); }
#tc-ahora > .tc-sub-t:first-child { margin-top: 0; }
.tc-ahora { overflow: hidden; background: var(--tkv-superficie); border-radius: var(--tkv-r-16); box-shadow: var(--tc-sombra); }
.tc-ahora-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 0; }
.tc-ruta { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 8px 16px 4px; }
.tc-ruta i { display: block; width: 12px; height: 12px; margin: 5px 5px 0; border: 3px solid var(--tkv-texto); border-radius: 50%; }
.tc-ruta i.tc-fin { background: var(--tkv-texto); }
.tc-ruta s { display: block; width: 3px; min-height: 16px; margin: 2px auto; text-decoration: none;
  background: repeating-linear-gradient(var(--tkv-texto-2) 0 5px, transparent 5px 9px); }
.tc-ruta small { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
.tc-ruta b { display: block; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-meta { padding: 4px 16px 0 48px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
.tc-placas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px; }
.tc-placa-par { display: inline-flex; align-items: center; gap: 8px; }
.tc-placa-etq { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }
/* la placa: blanca con la franja azul UE, en los dos modos (es una placa) */
.tc-placa { display: inline-flex; align-items: stretch; height: 34px; overflow: hidden; color: var(--tc-placa-tinta); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte);
  font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--tc-placa); border: 2px solid var(--tc-placa-tinta); border-radius: var(--tkv-r-4); }
.tc-placa::before { content: ""; width: 12px; background: var(--tc-ue); }
.tc-placa span { display: grid; place-items: center; padding: 0 9px; }
.tc-falta { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 10px 12px; color: var(--tkv-aviso-texto); font-size: var(--tkv-t-16);
  font-weight: var(--tkv-p-medio); background: var(--tkv-aviso-fondo); border-radius: var(--tkv-r-8); }
.tc-obs { margin: 0 16px 12px; padding: 10px 12px; font-size: var(--tkv-t-16); white-space: pre-line; background: var(--tkv-superficie-2); border-radius: var(--tkv-r-8); overflow-wrap: anywhere; }
.tc-obs b { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); font-weight: var(--tkv-p-medio); }
.tc-alb-mini { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); min-height: 76px; margin: 0 16px 12px; padding: 8px 12px 8px 8px;
  color: var(--tkv-sobre-accion-suave); text-align: left; background: var(--tkv-accion-suave); border: 0; border-radius: var(--tkv-r-12); }
.tc-alb-mini img { width: 60px; height: 60px; padding: 3px; background: var(--tc-qr-fondo); border-radius: var(--tkv-r-4); image-rendering: pixelated; }
.tc-alb-mini b { display: block; font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte); }
.tc-alb-mini span { font-size: var(--tkv-t-14); }
.tc-alb-mini > .tc-i { margin-left: auto; }
.tc-ahora > .tc-b { width: calc(100% - 32px); margin: 0 16px 12px; }
.tc-fila-datos { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 16px; color: var(--tkv-accion-texto);
  font-weight: var(--tkv-p-medio); text-align: left; background: transparent; border: 0; border-top: 1px solid var(--tkv-linea); }
.tc-vacio { display: grid; gap: 12px; padding: 20px 16px; text-align: center; background: var(--tkv-superficie); border-radius: var(--tkv-r-16); box-shadow: var(--tc-sombra); }
.tc-vacio b { display: block; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); }
.tc-vacio p { color: var(--tkv-texto-2); }
.tc-vacio .tc-i-grande { width: 40px; height: 40px; margin: 0 auto; color: var(--tkv-ok-texto); }

/* el resto del día, como la lista de Gmail: filas juntas (2 px entre ellas, esquinas 16 fuera y 4 dentro), el círculo del
   estado a la izquierda y tres líneas: la ruta en negrita (lo que manda), el estado y el nº, y el material en gris. El color,
   solo en el círculo y en lo que pide algo («falta el camión»). A la derecha de cada fila, «Albarán» a un toque (la
   policía): su propio botón, de todo el alto de la fila, separado por un filete */
.tc-filas { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tc-filas > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--tkv-superficie); border-radius: var(--tkv-r-4); }
.tc-filas > li:first-child { border-top-left-radius: var(--tkv-r-16); border-top-right-radius: var(--tkv-r-16); }
.tc-filas > li:last-child { border-bottom-left-radius: var(--tkv-r-16); border-bottom-right-radius: var(--tkv-r-16); }
.tc-fila { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; width: 100%; min-height: 76px;
  padding: 12px 12px 12px 12px; text-align: left; background: transparent; border: 0; border-radius: var(--tkv-r-4); }
.tc-filas > li:first-child > :first-child { border-top-left-radius: var(--tkv-r-16); }
.tc-filas > li:first-child > :last-child { border-top-right-radius: var(--tkv-r-16); }
.tc-filas > li:last-child > :first-child { border-bottom-left-radius: var(--tkv-r-16); }
.tc-filas > li:last-child > :last-child { border-bottom-right-radius: var(--tkv-r-16); }
.tc-fila > .tc-av { grid-row: 1 / span 3; }
.tc-fila-r { grid-column: 2; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-fila-m { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 2px; color: var(--tkv-texto-2);
  font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
/* el «·» al final de lo que va delante (director, 27-sep): con la columna del Albarán la línea salta más, y delante se
   quedaba solo al principio de la línea siguiente */
.tc-fila-m > :not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--tkv-texto-2); font-weight: var(--tkv-p-normal); }
.tc-fila-m > .tc-num { font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
.tc-fila-x { grid-column: 2; margin-top: 2px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tc-fila-falta { color: var(--tkv-aviso-texto); font-weight: var(--tkv-p-fuerte); }
/* (Ane, 15-oct) las observaciones de la oficina, a la vista en la fila: dos líneas como mucho (enteras, en la ficha) */
.tc-fila-obs { grid-column: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin-top: 4px; color: var(--tkv-texto); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); overflow-wrap: anywhere; }
.tc-fila-obs b { font-weight: var(--tkv-p-medio); color: var(--tkv-texto-2); }
.tc-fila-alb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 68px; min-height: 76px; padding: 8px 2px;
  color: var(--tkv-accion-texto); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-fuerte); background: transparent; border: 0;
  border-left: 1px solid var(--tkv-linea); border-radius: var(--tkv-r-4); }
.tc-fila-alb .tc-i { width: 24px; height: 24px; }
.tc-fila:focus-visible, .tc-fila-alb:focus-visible { outline-offset: -2px; }
.tc-fila:active, .tc-fila-alb:active { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
@media (hover: hover) { .tc-fila:hover, .tc-fila-alb:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
/* trabajando más de 1 s (sacar el albarán): el icono gira (con «reducir movimiento», solo se atenúa) */
@keyframes tc-gira { to { transform: rotate(360deg); } }
.tc-app .tv-lento { opacity: .7; }
.tc-app .tv-lento > .tc-i { animation: tc-gira 1s linear infinite; }

/* (Ane, 1-oct) viajes combinados: el aviso (el camión y el texto, nunca solo color) en el azul suave; los del grupo, seguidos
   y unidos por la barra azul de la izquierda; debajo de «Ahora», pegados a su tarjeta */
.tc-juntos { display: flex; align-items: flex-start; gap: 10px; margin: 4px 16px 12px; padding: 10px 12px; color: var(--tkv-sobre-accion-suave);
  font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); background: var(--tkv-accion-suave); border-radius: var(--tkv-r-8); overflow-wrap: anywhere; }
.tc-juntos > .tc-i { flex: none; width: 24px; height: 24px; }
.tc-juntos b, .tc-juntos-v { display: block; }
.tc-filas > li.tc-j-av { display: block; background: var(--tkv-accion-suave); box-shadow: inset 4px 0 0 var(--tkv-accion); }
.tc-filas > li.tc-j-av > .tc-juntos { margin: 0; padding-left: 16px; background: transparent; }
.tc-filas > li.tc-j { box-shadow: inset 4px 0 0 var(--tkv-accion); }
.tc-ahora.tc-ahora-j { border-bottom-left-radius: var(--tkv-r-4); border-bottom-right-radius: var(--tkv-r-4); box-shadow: var(--tc-sombra), inset 4px 0 0 var(--tkv-accion); }
.tc-j-ahora { margin-top: 2px; }
.tc-j-ahora > li:first-child, .tc-j-ahora > li:first-child > :first-child, .tc-j-ahora > li:first-child > :last-child { border-top-left-radius: var(--tkv-r-4); border-top-right-radius: var(--tkv-r-4); }
/* «Iniciar también …» / «Finalizar también …» en la hoja, y «enséñalo también» en el albarán */
.tc-tambien { display: grid; gap: 10px; justify-self: stretch; margin-top: 4px; padding: 12px; text-align: left; color: var(--tkv-sobre-accion-suave);
  background: var(--tkv-accion-suave); border-radius: var(--tkv-r-12); overflow-wrap: anywhere; }
.tc-tambien .tc-b { min-height: 52px; }
.tc-hoja-col > #tc-ini-si { order: -1; }                    /* con «Iniciar también» el Albarán va en borde: sigue el primero */
.tc-alb-juntos { display: grid; gap: 10px; align-self: stretch; margin-top: 16px; }
.tc-alb-junto { display: grid; gap: 8px; padding: 12px; color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); border-radius: var(--tkv-r-12); }
.tc-alb-junto p { display: flex; align-items: flex-start; gap: 8px; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-alb-junto p .tc-i { flex: none; width: 24px; height: 24px; }
.tc-alb-junto .tc-b { min-height: 52px; background: var(--tkv-superficie); }
@media (forced-colors: active) { .tc-juntos, .tc-tambien, .tc-alb-junto, .tc-filas > li.tc-j { border-left: 4px solid CanvasText; } }

/* (Ane, 28-sep) «¿Eres …?» con el conductor de su usuario, arriba, hasta que conteste */
.tc-quien { display: grid; gap: 12px; padding: 16px; background: var(--tkv-superficie); border-radius: var(--tkv-r-16); box-shadow: var(--tc-sombra); }
.tc-quien h2 { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-quien p { color: var(--tkv-texto-2); text-wrap: pretty; }
.tc-quien-b { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-quien-b > .tc-b { flex: 1 1 8rem; }
.tc-vacio .tc-b-borde { min-height: 52px; }
.tc-plegable { margin-top: 16px; }
.tc-plegable > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: var(--tkv-texto-2);
  font-weight: var(--tkv-p-medio); list-style: none; cursor: pointer; border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-pildora); }
.tc-plegable > summary::-webkit-details-marker { display: none; }
.tc-plegable > summary .tc-i { transform: rotate(90deg); transition: transform var(--tkv-d-cambio) var(--tkv-curva); }
.tc-plegable[open] > summary .tc-i { transform: rotate(-90deg); }
@media (hover: hover) { .tc-plegable > summary:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
.tc-plegable > .tc-filas { margin-top: 8px; }
.tc-crear { min-height: 56px; margin-top: 16px; }
.tc-fresco { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: 16px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }
.tc-fresco .tc-b { min-height: 48px; padding: 0 10px; font-size: var(--tkv-t-16); }
.tc-ins-enlace { margin-top: 4px; }

/* ─────────────────────────── el dock: la acción que toca, abajo ─────────────────────────── */
.tc-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 15; display: flex; gap: 10px; background: var(--tkv-superficie); box-shadow: var(--tkv-e-nav);
  padding: 12px max(var(--tkv-lado), calc((100% - var(--tc-ancho)) / 2 + var(--tkv-lado))) calc(12px + env(safe-area-inset-bottom)); }
.tc-dock .tc-b-prim { flex: 1 1 auto; }
.tc-b-vert { flex: none; flex-direction: column; gap: 2px; width: 84px; min-height: var(--tkv-principal); padding: 0; font-size: var(--tkv-t-14); }
.tc-b-vert .tc-i { width: 24px; height: 24px; }

/* ─────────────────────────── aviso breve (al revés que la página: oscuro en claro y claro en oscuro) ─────────────────────────── */
.tc-toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 30; max-width: 30rem; margin: 0 auto;
  padding: 12px 16px; color: var(--tkv-superficie); font-weight: var(--tkv-p-medio); background: var(--tkv-texto); border-radius: var(--tkv-r-12); box-shadow: var(--tkv-e2);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--tkv-d-cambio) var(--tkv-curva), transform var(--tkv-d-cambio) var(--tkv-curva); }
.tc-toast:empty { display: none; }
.tc-toast.tc-ver { opacity: 1; transform: none; }
.tc-toast.tc-mal { background: var(--tkv-error-texto); }
.tc-con-dock .tc-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ─────────────────────────── el menú lateral (☰): <dialog> modal que entra por la izquierda, como el de Gmail ─────────────────────────── */
/* Pequeño y con letra grande: sus días (con los viajes que le quedan a la derecha, como «Recibidos 87»), su albarán, el
   modo noche y, abajo, instalar, llamar y salir. Ítems de 56 (guantes): icono de 24 en x = 24 y el texto en x = 72; el de
   ahora, en píldora. (::backdrop, con respaldo: los navegadores de antes no le pasan las variables de :root) */
.tc-cajon { position: fixed; inset: 0 auto 0 0; width: min(304px, calc(100vw - 56px)); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  color: var(--tkv-texto); background: var(--tkv-superficie); border: 0; border-radius: 0 var(--tkv-r-16) var(--tkv-r-16) 0; box-shadow: var(--tkv-e3);
  overflow-y: auto; overscroll-behavior: contain; }
.tc-cajon[open] { display: block; animation: tc-entra var(--tkv-d-cajon) var(--tkv-curva); }
.tc-cajon::backdrop { background: var(--tkv-velo, rgba(0, 0, 0, .4)); }
@keyframes tc-entra { from { transform: translateX(-100%); } }
.tc-cajon-c { min-height: 100%; padding: env(safe-area-inset-top) 0 calc(16px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.tc-cajon-h { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px 12px 12px 24px; }
.tc-cajon-h img { flex: none; width: auto; height: 28px; }
.tc-cajon-yo { min-width: 0; }
.tc-cajon-yo b { display: block; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-cajon-yo span { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
.tc-cajon-sep { height: 0; margin: 8px 0; border: 0; border-top: 1px solid var(--tkv-linea); }
.tc-cajon-g { padding: 12px 24px 4px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-medio); }
.tc-cajon-l { margin: 0; padding: 0; list-style: none; }
.tc-cajon-i { display: flex; align-items: center; gap: 24px; width: calc(100% - 16px); min-height: 56px; margin: 0 8px; padding: 0 16px; color: var(--tkv-texto);
  font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-medio); text-align: left; text-decoration: none; background: transparent;
  border: 0; border-radius: var(--tkv-r-pildora); }
.tc-cajon-i > .tc-i { width: 24px; height: 24px; color: var(--tkv-texto-2); }
.tc-cajon-i > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.tc-cajon-2 small { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-normal);
  font-variant-numeric: tabular-nums; }
.tc-cajon-n { flex: none; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); font-weight: var(--tkv-p-medio); font-variant-numeric: tabular-nums; }
.tc-cajon-i[aria-current] { color: var(--tkv-sobre-accion-suave); font-weight: var(--tkv-p-fuerte); background: var(--tkv-accion-suave); }
.tc-cajon-i[aria-current] > .tc-i, .tc-cajon-i[aria-current] .tc-cajon-n { color: var(--tkv-sobre-accion-suave); }
.tc-cajon-i:active { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
@media (hover: hover) { .tc-cajon-i:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
.tc-cajon-modo { padding: 8px 24px 8px; }
.tc-cajon .tkv-modo-t { font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }

/* ─────────────────────────── hojas (bottom sheets): <dialog> modal ─────────────────────────── */
.tc-hoja { position: fixed; inset: auto 0 0 0; width: 100%; max-width: var(--tc-ancho); height: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: 0 auto; padding: 0; color: var(--tkv-texto); background: var(--tkv-elevada); border: 0; border-radius: var(--tkv-r-16) var(--tkv-r-16) 0 0;
  box-shadow: var(--tkv-e3); overflow: hidden; }
.tc-hoja[open] { display: flex; flex-direction: column; animation: tc-sube var(--tkv-d-cambio) var(--tkv-curva); }
.tc-hoja::backdrop { background: var(--tkv-velo, rgba(0, 0, 0, .4)); }
@keyframes tc-sube { from { opacity: 0; transform: translateY(32px); } }
.tc-hoja-llena { inset: 0; height: 100%; max-height: 100%; border-radius: 0; }
/* (prueba en móviles, 11-oct: con el teclado abierto, en las listas con buscador lo encontrado quedaba debajo del teclado
   y no se podía subir) las hojas miden lo que se ve: en Android lo hace la meta interactive-widget=resizes-content (el
   100 % ya es sin teclado); en iPhone, --tc-vvh, el alto visible (deca_chofer.js) */
.tc-hoja { max-height: calc(var(--tc-vvh, 100dvh) - 24px); }
.tc-hoja-llena { height: var(--tc-vvh, 100%); max-height: var(--tc-vvh, 100%); }
.tc-hoja-c { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tc-hoja-h { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px 16px; }
.tc-hoja-llena .tc-hoja-h { padding-top: calc(8px + env(safe-area-inset-top)); border-bottom: 1px solid var(--tkv-linea); padding-bottom: 8px; }
.tc-hoja-h h2 { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); }
.tc-hoja-b { display: grid; flex: 1 1 auto; align-content: start; gap: 12px; min-height: 0; padding: 4px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.tc-hoja-llena .tc-hoja-b { padding-top: 12px; }
.tc-hoja-f { display: flex; flex: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--tkv-elevada); border-top: 1px solid var(--tkv-linea); }
.tc-hoja-f:empty { display: none; }
.tc-hoja-f2 { display: flex; gap: 10px; }
.tc-hoja-f2 > .tc-b { flex: 1 1 0; }
.tc-hoja-f2 > .tc-b-prim { flex-grow: 1.6; }
.tc-hoja-col { flex-direction: column; }
.tc-hoja-col > .tc-b { width: 100%; flex: none; }
.tc-hoja-col > .tc-b-prim { order: -1; }
.tc-hoja-col > .tc-b-borde, .tc-hoja-col > .tc-b-texto { min-height: 52px; }
.tc-x { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--tkv-texto); background: var(--tkv-superficie-2); border: 0;
  border-radius: var(--tkv-r-pildora); }
.tc-x .tc-i { width: 24px; height: 24px; }
.tc-resumen { color: var(--tkv-texto-2); font-size: var(--tkv-t-16); overflow-wrap: anywhere; }
.tc-pregunta { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); text-wrap: pretty; }

#tc-ini-pedir, #tc-ini-campos { display: grid; gap: 14px; }
/* Iniciar: opciones con la placa (radios de verdad, 56 px) y «Otra matrícula» */
.tc-grupo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tc-grupo legend { padding: 0; margin-bottom: 8px; font-size: var(--tkv-t-16); font-weight: var(--tkv-p-fuerte); }
.tc-grupo legend small { margin-left: 6px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); font-weight: var(--tkv-p-normal); }
.tc-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-opcion { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px 0 10px; background: transparent;
  border: 2px solid var(--tkv-borde); border-radius: var(--tkv-r-12); cursor: pointer; }
.tc-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tc-marca { display: grid; flex: none; place-items: center; width: 26px; height: 26px; color: var(--tkv-sobre-accion); border: 2px solid var(--tkv-borde); border-radius: 50%; }
.tc-marca .tc-i { width: 16px; height: 16px; stroke-width: 3; visibility: hidden; }
.tc-opcion.tc-si { background: var(--tkv-accion-suave); border-color: var(--tkv-accion); }
.tc-opcion.tc-si .tc-marca { background: var(--tkv-accion); border-color: var(--tkv-accion); }
.tc-opcion.tc-si .tc-marca .tc-i { visibility: visible; }
.tc-opcion:has(input:focus-visible) { outline: 2px solid var(--tkv-foco); outline-offset: 2px; }
.tc-opcion .tc-placa { height: 32px; }
.tc-otra { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; color: var(--tkv-accion-texto); font-weight: var(--tkv-p-medio);
  text-align: left; background: transparent; border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-12); }
.tc-grupo .tc-err { margin: 0; }
.tc-err { color: var(--tkv-error-texto); font-size: var(--tkv-t-16); font-weight: var(--tkv-p-medio); }
.tc-err:empty { display: none; }
.tc-pista { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }

/* hecho: «Viaje iniciado» con el QR (sobre blanco en los dos modos) */
.tc-hecho { display: grid; justify-items: center; gap: 10px; padding: 8px 0; text-align: center; }
.tc-hecho > .tc-i { width: 48px; height: 48px; padding: 10px; color: var(--tkv-superficie); background: var(--tkv-ok-texto); border-radius: 50%; stroke-width: 3; }
.tc-hecho-t b { display: block; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); }
.tc-hecho img { width: 160px; height: 160px; padding: 6px; background: var(--tc-qr-fondo); border: 1px solid var(--tkv-linea); border-radius: var(--tkv-r-8); image-rendering: pixelated; }
.tc-hecho .tc-pista { max-width: 22rem; }

/* ficha del viaje */
.tc-ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-ficha .tc-ruta, .tc-hoja .tc-ruta { padding: 0; }
.tc-hoja .tc-placas { padding: 0; }
.tc-hoja .tc-falta, .tc-hoja .tc-obs, .tc-hoja .tc-juntos { margin: 0; }
.tc-hoja .tc-obs { background: var(--tkv-superficie-2); }
.tc-datos { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: var(--tkv-t-16); }
.tc-datos dt { color: var(--tkv-texto-2); }
.tc-datos dd { margin: 0; font-weight: var(--tkv-p-medio); overflow-wrap: anywhere; white-space: pre-line; }

/* formularios largos (datos, nuevo viaje) */
.tc-campos { display: grid; gap: 16px; }
.tc-campo { display: grid; gap: 6px; }
.tc-elegir { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.tc-elegir span { min-width: 0; overflow-wrap: anywhere; }   /* (Ane, 2-oct) entero, en dos renglones si hace falta */
.tc-elegir .tc-i { color: var(--tkv-accion-texto); }
.tc-elegir.tc-vacio-v span { color: var(--tkv-texto-2); font-weight: var(--tkv-p-normal); }
.tc-radio-filas { display: grid; gap: 8px; }
.tc-radio-fila { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; font-size: var(--tkv-t-16); background: transparent;
  border: 2px solid var(--tkv-borde); border-radius: var(--tkv-r-12); cursor: pointer; }
.tc-radio-fila input { width: 24px; height: 24px; margin: 0; accent-color: var(--tkv-accion); }
.tc-radio-fila.tc-si { background: var(--tkv-accion-suave); border-color: var(--tkv-accion); }
.tc-habitual { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
/* «Datos del viaje»: «Para tu albarán falta:» con un botón a cada campo; completo, en verde (con su texto) */
/* (6 px arriba y abajo: con 10, a 360 × 640 los bultos y el nº de albarán quedaban 14 px bajo el pie de la hoja) */
.tc-hoja .tc-falta-det { flex-wrap: wrap; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.tc-falta-bs { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-falta-b { min-height: 44px; padding: 0 16px; color: var(--tkv-aviso-texto); font-weight: var(--tkv-p-fuerte); background: transparent;
  border: 2px solid var(--tkv-aviso-texto); border-radius: var(--tkv-r-pildora); }
.tc-falta-b:active { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
.tc-falta-det.tc-falta-ok { color: var(--tkv-ok-texto); background: var(--tkv-ok-fondo); }
/* bultos y nº de albarán en una fila (desde 340 px): las etiquetas, de dos líneas, para que las cajas queden a la par */
.tc-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tc-par > .tc-campo > label { display: flex; align-items: flex-end; min-height: calc(2 * var(--tkv-l-16)); }
.tc-aviso-campo { color: var(--tkv-aviso-texto); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-medio); }
.tc-aviso-campo:empty { display: none; }
/* (7-oct) el peso, ayudado: debajo, en toneladas; el aviso en su caja: ámbar avisa (con sus dos botones), rojo para, azul propone */
/* (7-oct) las observaciones que ya tiene el viaje, encima de la nota del conductor: se leen, no se tocan */
.tc-obs-ya { white-space: pre-line; overflow-wrap: anywhere; }
.tc-obs-ya b { display: block; font-size: var(--tkv-t-14); font-weight: var(--tkv-p-medio); }
.tc-ton { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); font-variant-numeric: tabular-nums; }
.tc-ton:empty { display: none; }
.tc-ton.tc-ton-mal { color: var(--tkv-error-texto); font-weight: var(--tkv-p-medio); }
.tc-avp { display: grid; gap: 10px; margin-top: 4px; padding: 12px; font-size: var(--tkv-t-16); border-radius: var(--tkv-r-12); text-wrap: pretty; }
.tc-avp-t { display: flex; gap: 10px; align-items: flex-start; }
.tc-avp-raro { color: var(--tkv-aviso-texto); background: var(--tkv-aviso-fondo); border: 1px solid var(--tkv-aviso-punto); }
.tc-avp-raro .tc-i { color: var(--tkv-aviso-punto); }
.tc-avp-imposible { color: var(--tkv-error-texto); background: var(--tkv-error-fondo); }
.tc-avp-decimal { color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); }
.tc-avp-bs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tc-avp-bs > .tc-b { min-height: 48px; padding: 0 10px; }
.tc-avp-bs > .tc-b:not(.tc-b-prim) { background: var(--tkv-superficie); }
.tc-avp-bs > .tc-b:only-child { grid-column: 1 / -1; }
.tc-avp-sib { color: var(--tkv-aviso-texto); border-color: var(--tkv-aviso-punto); }
.tc-avp.tc-avp-si { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; font-size: var(--tkv-t-14);
  font-weight: var(--tkv-p-medio); border: 0; }
.tc-avp-l { flex: none; min-height: 44px; padding: 0 10px; color: var(--tkv-accion-texto); font: inherit; text-decoration: underline; background: transparent; border: 0; }
.tc-mas > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; color: var(--tkv-accion-texto);
  font-weight: var(--tkv-p-medio); list-style: none; cursor: pointer; border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-12); }
.tc-mas > summary::-webkit-details-marker { display: none; }
.tc-mas > summary .tc-i { transform: rotate(90deg); transition: transform var(--tkv-d-cambio) var(--tkv-curva); }
.tc-mas[open] > summary .tc-i { transform: rotate(-90deg); }
.tc-mas > .tc-campos { margin-top: 16px; }
@media (hover: hover) { .tc-mas > summary:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }
/* «Nuevo viaje»: el servicio en una fila de tres y «(opcional)» en gris */
.tc-seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; height: 54px; padding: 3px; background: var(--tkv-superficie);
  border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-12); }
.tc-seg3-b { position: relative; display: grid; place-items: center; min-width: 0; padding: 0 4px; font-weight: var(--tkv-p-medio); text-align: center;
  border-radius: var(--tkv-r-8); cursor: pointer; }
.tc-seg3-b input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tc-seg3-b.tc-si { color: var(--tkv-sobre-accion-suave); font-weight: var(--tkv-p-fuerte); background: var(--tkv-accion-suave); }
.tc-seg3-b:has(input:focus-visible) { outline: 2px solid var(--tkv-foco); outline-offset: 2px; }
.tc-opc { color: var(--tkv-texto-2); font-weight: var(--tkv-p-normal); }

/* la lista: el buscador arriba, filas grandes */
.tc-lis-q { position: relative; flex: none; padding: 12px 16px 8px; }
.tc-lis-q .tc-i { position: absolute; top: 50%; left: 30px; margin-top: 2px; transform: translateY(-50%); color: var(--tkv-texto-2); pointer-events: none; }
.tc-lis-q .tc-in { padding-left: 46px; }
.tc-lis-msg { color: var(--tkv-texto-2); font-size: var(--tkv-t-16); text-wrap: pretty; }
.tc-lis-msg:empty { display: none; }
.tc-lis-filas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tkv-linea); }
/* (prueba en móviles, 11-oct: en «Tipo de camión» la última fila acababa justo en el borde y nada decía que había más)
   sombra arriba y abajo mientras quede lista por ver (las capas «local» la tapan al llegar al final) */
#tc-lis .tc-hoja-b {
  background: linear-gradient(var(--tkv-elevada) 30%, transparent) center top / 100% 40px no-repeat local,
              linear-gradient(transparent, var(--tkv-elevada) 70%) center bottom / 100% 40px no-repeat local,
              radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--tkv-texto) 22%, transparent), transparent) center top / 100% 14px no-repeat scroll,
              radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--tkv-texto) 22%, transparent), transparent) center bottom / 100% 14px no-repeat scroll;
  background-color: var(--tkv-elevada); }
.tc-lis-f { display: grid; width: 100%; min-height: 56px; padding: 8px 6px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--tkv-linea); }
.tc-lis-f b { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-lis-f span { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }
.tc-lis-f.tc-actual { background: var(--tkv-accion-suave); }
.tc-lis-f.tc-libre b { color: var(--tkv-accion-texto); }
.tc-lis-f:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .tc-lis-f:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); } }

/* cuenta */
.tc-cuenta-yo b { display: block; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); }
.tc-cuenta-yo span { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }
.tc-fila-enlace { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; color: var(--tkv-texto); font-size: var(--tkv-t-16); text-align: left;
  text-decoration: none; background: transparent; border: 1px solid var(--tkv-borde); border-radius: var(--tkv-r-12); }
.tc-fila-enlace > .tc-i { color: var(--tkv-accion-texto); }
.tc-fila-enlace b { white-space: nowrap; }
.tc-fila-accion { margin-left: auto; color: var(--tkv-accion-texto); font-weight: var(--tkv-p-fuerte); }
.tc-salir-conf { display: grid; gap: 12px; padding: 14px; background: var(--tkv-superficie-2); border-radius: var(--tkv-r-12); }
.tc-version-t { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); font-variant-numeric: tabular-nums; }

/* instalar */
.tc-ins-app { display: flex; align-items: center; gap: 14px; padding-top: 16px; }
.tc-ins-app img { flex: none; width: 60px; height: 60px; border-radius: var(--tkv-r-12); }
.tc-ins-app h2 { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); }
.tc-ins-app p { margin-top: 4px; color: var(--tkv-texto-2); font-size: var(--tkv-t-16); text-wrap: pretty; }
.tc-pasos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tc-paso { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; font-size: var(--tkv-t-16);
  background: var(--tkv-superficie-2); border-radius: var(--tkv-r-12); counter-increment: paso; }
.tc-paso::before { content: counter(paso); display: grid; place-items: center; width: 28px; height: 28px; color: var(--tkv-superficie); font-size: var(--tkv-t-14);
  font-weight: var(--tkv-p-fuerte); background: var(--tkv-texto); border-radius: 50%; }
.tc-paso-i { display: grid; place-items: center; width: 44px; height: 44px; color: var(--tkv-accion-texto); background: var(--tkv-superficie); border-radius: var(--tkv-r-8);
  box-shadow: 0 0 0 1px var(--tkv-linea); }

/* «Tu albarán» a pantalla completa, para el agente: el QR grande y SIEMPRE sobre blanco (también en modo noche: lo lee su
   lector), y los datos debajo */
.tc-alb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; color: var(--tkv-texto);
  background: var(--tkv-superficie); border: 0; }
.tc-alb[open] { display: block; overflow-y: auto; animation: tc-sube var(--tkv-d-cambio) var(--tkv-curva); }
.tc-alb::backdrop { background: var(--tkv-superficie, rgba(0, 0, 0, .6)); }
.tc-alb-c { display: flex; flex-direction: column; align-items: center; min-height: 100%; max-width: 32rem; margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.tc-alb-h { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.tc-alb-h h2 { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); }
.tc-alb-qr { width: min(84vw, 52vh, 26rem); height: min(84vw, 52vh, 26rem); margin: 16px 0 8px; padding: 8px; background: var(--tc-qr-fondo); border-radius: var(--tkv-r-12);
  image-rendering: pixelated; }
.tc-alb-mal { align-self: stretch; margin-top: 16px; }
.tc-alb-nota { align-self: stretch; margin-top: 12px; font-size: var(--tkv-t-16); }
.tc-alb-doc { font-size: var(--tkv-t-24); line-height: var(--tkv-l-24); font-weight: var(--tkv-p-fuerte); font-variant-numeric: tabular-nums; }
.tc-alb-tabla { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 10px; align-self: stretch; margin: 12px 0 0; font-size: var(--tkv-t-16); }
.tc-alb-tabla dt { color: var(--tkv-texto-2); }
.tc-alb-tabla dd { margin: 0; font-weight: var(--tkv-p-fuerte); overflow-wrap: anywhere; }
.tc-alb-guardado { display: flex; align-items: center; gap: 8px; align-self: stretch; margin-top: 16px; padding: 10px 12px; color: var(--tkv-ok-texto); font-size: var(--tkv-t-16);
  font-weight: var(--tkv-p-medio); background: var(--tkv-ok-fondo); border-radius: var(--tkv-r-8); }
.tc-alb-c > .tc-b { margin-top: 12px; min-height: 52px; }

/* ─────────────────────────── Tickets de la báscula (Ane, 28-sep; Ibon, 29-sep: «que no se borre bajo ningún concepto») ───────────────────────────
   Tres piezas con los tokens de siempre (ningún color nuevo): la FILA «Tickets» del viaje (en «Ahora» y en la ficha), la
   HOJA «Tickets del viaje» y la VISTA GRANDE sobre el grafito de TKV (igual en claro y en noche: una foto se juzga mejor
   sobre oscuro; sin filtros: es una prueba). Y el MOMENTO, en la hoja de Finalizar. Nada de borrar: lo equivocado se ve
   atenuado y tachado en pequeño y nítido en grande, con su banda. El estado nunca solo por color: cada sello lleva icono y
   texto (y borde con colores forzados). Toques de 48 o más; lo principal, 60. */
/* el <input type=file> va dentro de su <label>: no se ve, pero se enfoca (el anillo, en el label) */
.tc-tk-in { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0; }
.tc-tk-vacio, .tc-tk-foto, label.tc-b { position: relative; cursor: pointer; }
.tc-tk-vacio:has(> .tc-tk-in:focus-visible), .tc-tk-foto:has(> .tc-tk-in:focus-visible), label.tc-b:has(> .tc-tk-in:focus-visible) {
  outline: 2px solid var(--tkv-foco); outline-offset: 2px; }
/* sin fotos: un botón a todo el ancho, con borde a trazos */
.tc-tk-vacio { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); min-height: 56px; margin: 0 16px 12px; padding: 8px 14px;
  color: var(--tkv-texto); border: 2px dashed var(--tkv-borde); border-radius: var(--tkv-r-12); }
.tc-tk-vacio > .tc-i { width: 26px; height: 26px; color: var(--tkv-accion-texto); }
.tc-tk-vacio .tc-tk-txt b { color: var(--tkv-accion-texto); }
.tc-hoja .tc-tk-vacio { width: 100%; margin: 0; }
/* con fotos: partida como las filas con «Albarán» (lo que abre, a la izquierda; «Foto», a la derecha, tras un filete) */
.tc-tk { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--tkv-linea); }
/* (revisión, 29-sep) clip y no hidden: en la ficha, con poco alto (360 × 640), overflow: hidden deja su alto mínimo en 0 y la
   rejilla del cuerpo la aplastaba en una raya de 2 px (ni «Tickets» ni «Foto» se podían tocar). clip recorta igual las esquinas */
.tc-hoja .tc-tk { border: 1px solid var(--tkv-linea); border-radius: var(--tkv-r-12); overflow: clip; }
.tc-tk-abrir { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 6px 8px 6px 16px; color: var(--tkv-texto);
  text-align: left; background: transparent; border: 0; }
.tc-tk-abrir > .tc-i { width: 20px; height: 20px; color: var(--tkv-accion-texto); }
.tc-tk-txt { flex: 1 1 auto; min-width: 0; }
.tc-tk-txt b { display: block; font-weight: var(--tkv-p-fuerte); }
.tc-tk-txt > span { display: flex; align-items: center; gap: 4px; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); }
.tc-tk-txt .tc-tk-t-pend { color: var(--tkv-aviso-texto); font-weight: var(--tkv-p-fuerte); }
.tc-tk-txt .tc-i { width: 16px; height: 16px; }
.tc-tk-minis { display: flex; flex: none; gap: 4px; }
.tc-tk-mini { display: block; width: 36px; height: 36px; overflow: hidden; background: var(--tkv-superficie-2); border-radius: var(--tkv-r-4);
  box-shadow: 0 0 0 1px var(--tkv-linea); }
.tc-tk-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-tk-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; min-height: 56px; padding: 6px 2px;
  color: var(--tkv-accion-texto); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-fuerte); border-left: 1px solid var(--tkv-linea); }
.tc-tk-foto .tc-i { width: 24px; height: 24px; }
a.tc-tk-foto { text-decoration: none; }   /* con 10 fotos, «Llamar» a la oficina en su sitio (revisión, 29-sep) */
.tc-tk-abrir:focus-visible { outline-offset: -2px; }
.tc-tk-foto:has(> .tc-tk-in:focus-visible) { outline-offset: -2px; }
.tc-tk-abrir:active, .tc-tk-foto:active, .tc-tk-vacio:active { background-image: linear-gradient(var(--tkv-capa-pulsado), var(--tkv-capa-pulsado)); }
@media (hover: hover) {
  .tc-tk-abrir:hover, .tc-tk-foto:hover, .tc-tk-vacio:hover { background-image: linear-gradient(var(--tkv-capa-hover), var(--tkv-capa-hover)); }
}

/* las fotos en grande (la hoja): el cuadro, su sello (icono + texto) y debajo cuál es, quién y cuándo */
.tc-tk-nota { display: flex; align-items: flex-start; gap: 8px; }
.tc-tk-nota .tc-i { flex: none; margin-top: 2px; color: var(--tkv-ok-texto); }
.tc-tk-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tc-tk-nada { grid-column: 1 / -1; color: var(--tkv-texto-2); }
.tc-tk-ficha { display: grid; gap: 6px; width: 100%; padding: 0; color: var(--tkv-texto); text-align: left; background: transparent; border: 0; border-radius: var(--tkv-r-12); }
.tc-tk-cuadro { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--tkv-superficie-2); border-radius: var(--tkv-r-12);
  box-shadow: 0 0 0 1px var(--tkv-linea); }
.tc-tk-cuadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-tk-cuadro.tc-tk-c-pend { box-shadow: 0 0 0 2px var(--tkv-aviso-punto); }
.tc-tk-cuadro.tc-tk-c-mal { box-shadow: 0 0 0 2px var(--tkv-error-punto); }
.tc-tk-cuadro.tc-tk-sube img { opacity: .7; }
.tc-tk-pie b { display: block; font-size: var(--tkv-t-16); line-height: var(--tkv-l-16); font-weight: var(--tkv-p-fuerte); }
.tc-tk-pie span { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); overflow-wrap: anywhere; }
.tc-tk-sello { position: absolute; z-index: 1; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); height: 28px;
  padding: 0 10px 0 8px; font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); font-weight: var(--tkv-p-fuerte); white-space: nowrap;
  border-radius: var(--tkv-r-pildora); }
.tc-tk-sello .tc-i { width: 16px; height: 16px; }
/* «Enviada»: píldora grafito con el ✓ blanco (el ✓ verde sobre gris daba 2,49:1) */
.tc-tk-s-ok { color: var(--tkv-sobre-barra); background: var(--tkv-barra); }
.tc-tk-s-pend { color: var(--tkv-aviso-texto); background: var(--tkv-aviso-fondo); }
.tc-tk-s-mal { color: var(--tkv-error-texto); background: var(--tkv-error-fondo); }
.tc-tk-s-sube { color: var(--tkv-sobre-accion-suave); background: var(--tkv-accion-suave); font-variant-numeric: tabular-nums; }
.tc-tk-s-eq { color: var(--tkv-texto); background: var(--tkv-superficie); box-shadow: 0 0 0 1px var(--tkv-borde); }
/* equivocada, en pequeño: al 40 % y cruzada por una raya de 2 px (sigue ahí: se ve, se abre y se desmarca) */
.tc-tk-tachada img { opacity: .4; }
.tc-tk-tachada::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--tkv-texto-2) calc(50% - 1px), var(--tkv-texto-2) calc(50% + 1px), transparent calc(50% + 1px)); }
/* enviando: la barra de abajo (solo transform) */
.tc-tk-barra { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 6px; background: var(--tkv-accion-suave); }
.tc-tk-barra i { display: block; height: 100%; background: var(--tkv-accion); transform: scaleX(0); transform-origin: left;
  transition: transform var(--tkv-d-cambio) var(--tkv-curva); }

/* el momento (Finalizar): «Viaje finalizado.», la pregunta y, hecha la foto, la tarjeta con su estado al lado */
#tc-fin-pedir, .tc-fin-tk { display: grid; gap: 12px; }
.tc-tk-hecho { display: flex; align-items: center; gap: 12px; }
.tc-tk-hecho > .tc-i { flex: none; width: 36px; height: 36px; padding: 7px; color: var(--tkv-superficie); background: var(--tkv-ok-punto); border-radius: 50%; stroke-width: 3; }
.tc-tk-hecho b { display: block; font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); }
.tc-tk-hecho span { display: block; color: var(--tkv-texto-2); font-size: var(--tkv-t-14); line-height: var(--tkv-l-14); overflow-wrap: anywhere; }
.tc-tk-pide { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--tkv-linea); }
.tc-tk-pide .tc-pista { font-size: var(--tkv-t-16); }
.tc-tk-nueva { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; background: var(--tkv-superficie);
  border-radius: var(--tkv-r-12); box-shadow: 0 0 0 1px var(--tkv-linea); }
.tc-tk-nueva .tc-tk-cuadro { aspect-ratio: 3 / 4; }
.tc-tk-est { display: flex; align-items: flex-start; gap: 6px; font-weight: var(--tkv-p-medio); text-wrap: pretty; }
.tc-tk-est .tc-i { flex: none; margin-top: 2px; }
.tc-tk-e-ok { color: var(--tkv-ok-texto); }
.tc-tk-e-sube { color: var(--tkv-texto-2); font-variant-numeric: tabular-nums; }
.tc-tk-e-pend { color: var(--tkv-aviso-texto); }
.tc-tk-e-mal { color: var(--tkv-error-texto); }

/* la vista grande, a pantalla completa sobre el grafito (display solo con [open]: cerrada no se ve) */
.tc-visor { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; color: var(--tkv-sobre-barra);
  background: var(--tkv-barra); border: 0; }
.tc-visor[open] { display: flex; flex-direction: column; animation: tc-sube var(--tkv-d-cambio) var(--tkv-curva); }
.tc-visor::backdrop { background: var(--tkv-velo, rgba(0, 0, 0, .4)); }
.tc-visor :focus-visible { outline-color: var(--tkv-sobre-barra); }
.tc-visor-h { display: flex; flex: none; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px 8px; }
.tc-visor-h h2 { font-size: var(--tkv-t-20); line-height: var(--tkv-l-20); font-weight: var(--tkv-p-fuerte); font-variant-numeric: tabular-nums; }
.tc-visor .tc-x { color: var(--tkv-sobre-barra); background: var(--tc-capa-barra); }
.tc-visor-banda { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; color: var(--tkv-aviso-texto);
  font-weight: var(--tkv-p-medio); background: var(--tkv-aviso-fondo); }
.tc-visor-banda > .tc-i { flex: none; }
.tc-visor-banda p { flex: 1 1 14rem; min-width: 0; text-wrap: pretty; }
.tc-visor-banda .tc-b { flex: none; min-height: 48px; color: currentColor; border-color: currentColor; }
.tc-visor-foto { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.tc-visor-foto img { position: absolute; inset: 0; display: block; max-width: calc(100% - 16px); max-height: 100%; margin: auto; border-radius: var(--tkv-r-4); }
.tc-visor-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; color: var(--tkv-sobre-barra);
  background: var(--tkv-velo); border: 0; border-radius: 50%; }
.tc-visor-nav .tc-i { width: 24px; height: 24px; }
.tc-visor-nav.tc-ant { left: 8px; }
.tc-visor-nav.tc-ant .tc-i { transform: rotate(180deg); }
.tc-visor-nav.tc-sig { right: 8px; }
.tc-visor-pie { display: grid; flex: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.tc-visor-meta { color: var(--tkv-sobre-barra-2); }
.tc-visor-meta b { color: var(--tkv-sobre-barra); font-weight: var(--tkv-p-fuerte); }
.tc-visor-guardada { display: flex; align-items: center; gap: 8px; font-weight: var(--tkv-p-medio); }
.tc-visor-pie > .tc-b-borde { color: var(--tkv-sobre-barra); border-color: var(--tkv-sobre-barra-2); }
.tc-visor-pie > .tc-b-borde:active { background-color: var(--tc-capa-barra); }
.tc-visor-conf { display: grid; gap: 10px; padding: 14px; color: var(--tkv-texto); background: var(--tkv-elevada); border-radius: var(--tkv-r-12); }
.tc-visor-conf p:not(.tc-pregunta) { color: var(--tkv-texto-2); text-wrap: pretty; }
@media (forced-colors: active) { .tc-tk-sello, .tc-visor-nav, .tc-tk-mini { border: 1px solid currentColor; } }

/* teléfono estrecho (320 px, o 360 px con el zoom al 115 %): la etiqueta encima de su dato; «Oficina» solo con el icono; el
   botón del dock y los de las hojas, a 16 y más ceñidos, para que «Finalizar viaje», «No, volver» y «Sí, finalizar» quepan en
   una línea */
@media (max-width: 359.98px) {
  .tc-datos, .tc-alb-tabla { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tc-fila-alb { width: 60px; }
  .tc-datos dd, .tc-alb-tabla dd { margin-bottom: 6px; }
  .tc-cab-tel { width: 48px; padding: 0; justify-content: center; font-size: 0; }
  .tc-cab-tel .tc-i { width: 22px; height: 22px; }
  .tc-dock .tc-b-prim { gap: 6px; padding: 0 10px; font-size: var(--tkv-t-16); }
  .tc-hoja-f2 > .tc-b { padding: 0 8px; }
  .tc-hoja-f2 > .tc-b-prim { flex-grow: 1; font-size: var(--tkv-t-16); }
  .tc-b-vert { width: 72px; }
}
/* bultos y nº de albarán, uno debajo del otro por debajo de 340 px */
@media (max-width: 339.98px) {
  .tc-par { grid-template-columns: minmax(0, 1fr); }
  .tc-par > .tc-campo > label { min-height: 0; }
}
/* 360 px con el zoom al 130 % (277 px): sin el icono del botón del dock (lo dice el texto) ni los del modo noche */
@media (max-width: 299.98px) {
  .tc-dock .tc-b-prim .tc-i { display: none; }
  .tc-cajon .tkv-modo-cara svg { display: none; }
}

/* reducir movimiento: sin la hoja que sube, sin el menú que entra, sin pulsado y sin el aviso que aparece (el estado final
   se queda) */
@media (prefers-reduced-motion: reduce) {
  .tc-app *, .tc-app *::before, .tc-app *::after { animation: none !important; transition: none !important; }
  .tc-b:active { transform: none; }
}

/* ─────────────────────────── oficina: usuario → conductor (/deca/chofer/conductores, con deca_viajes.css) ─────────────────────────── */
.tc-body { background: var(--tv-fondo-2); }
.tc-nav { position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; gap: .5rem; padding-top: calc(.5rem + env(safe-area-inset-top)); }
.tc-nav .tv-hueco { flex: 1 1 auto; flex-basis: auto; height: auto; }
.tc-nav .tv-tel { gap: .35rem; min-height: 44px; }
/* (revisión, 1-oct) en el móvil, sin el logo (lleva a Viajes, como el enlace de la derecha): así caben los dos teléfonos con
   su nombre sin partirse */
@media (max-width: 479.98px) { .tc-nav .tv-marca { display: none; } }
.tc-body .tc-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tc-body .tc-sub { margin: 0 0 1rem; color: var(--tv-texto-2); text-wrap: pretty; }
.tc-ofi .tc-sub { max-width: 60rem; }
/* (revisión, 28-sep) la caja es la referencia del «Guardar» oculto de la cabecera (.tc-oculto, absolute): sin ella se salía
   y la página bailaba de lado a 360 px (447 de ancho). En el móvil, cada usuario en su tarjeta: usuario y nombre arriba;
   conductor, nota y Guardar a lo ancho (a 360 el Guardar quedaba fuera de la pantalla) */
.tc-tabla-caja { overflow-x: auto; position: relative; }
.tc-tabla { width: 100%; border-collapse: collapse; background: var(--tkv-superficie); }   /* (director O1) del token: en oscuro, oscura */
.tc-tabla th, .tc-tabla td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tv-linea); }
.tc-tabla th { font-size: .875rem; color: var(--tv-texto-2); background: var(--tv-fondo-3); }
.tc-tabla td:first-child { font-weight: 600; white-space: nowrap; }
.tc-sel { width: 100%; min-width: 14rem; border-radius: var(--tv-r-control); }
.tc-ofi-nota { display: block; margin-top: .375rem; font-size: .875rem; color: var(--tv-texto-3); }
/* (Ane, 28-sep) los tres grupos: Enlazados · Por revisar · Sin usuario (con cuántos) */
.tc-ofi-h { margin: 1.75rem 0 .5rem; font-size: 1.125rem; font-weight: 600; }
.tc-ofi-n { color: var(--tv-texto-2); font-weight: 400; }
.tc-ofi-n:not(:empty)::before { content: "· "; }
.tc-sin { columns: 16rem; margin: 0; padding: 0; list-style: none; }
.tc-sin li { padding: .25rem 0; break-inside: avoid; }
.tc-fila-msg { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--tv-gris); }
.tc-fila-msg.tv-error { color: var(--tv-rojo); }
.tc-rol { display: block; font-size: .8125rem; color: var(--tv-texto-3); }
@media (pointer: coarse) { .tc-tabla .tv-btn, .tc-sel { min-height: 44px; } }
@media (max-width: 480px) {
  .tc-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tc-tabla, .tc-tabla tbody, .tc-tabla tr, .tc-tabla td { display: block; }
  .tc-tabla tr { padding: .5rem 0; border-bottom: 1px solid var(--tv-linea); }
  .tc-tabla td { padding: .25rem .75rem; border-bottom: 0; }
  .tc-sel { min-width: 0; }
  .tc-tabla .tv-btn { width: 100%; }
}

/* (Ibon, 6-oct) «¿A qué hora saliste?» al finalizar: las horas en dos columnas (cada una de 56 px de alto, como las de Iniciar) */
.tc-fin-salida { margin-top: 16px; }
.tc-fin-salida .tc-opciones { display: grid; grid-template-columns: 1fr 1fr; }
.tc-salida-t { display: grid; line-height: 1.2; }
.tc-fin-hora { display: flex; align-items: center; gap: 12px; font-weight: var(--tkv-p-fuerte); }
.tc-fin-hora input { min-height: 52px; padding: 0 12px; font: inherit; font-size: var(--tkv-t-18, 18px); border: 2px solid var(--tkv-borde); border-radius: var(--tkv-r-12); background: var(--tkv-superficie); color: var(--tkv-texto); }
.tc-salida-t b { font-size: var(--tkv-t-18, 18px); font-variant-numeric: tabular-nums; }
.tc-salida-t small { color: var(--tkv-texto-2); font-size: var(--tkv-t-14); }

/* (Ane, 15-oct) el documento entero, como imagen, en la hoja del albarán (sin lector de PDF) */
.tc-alb-hojas { display: grid; gap: 8px; width: 100%; }
.tc-alb-hojas img { display: block; width: 100%; height: auto; border: 1px solid var(--tkv-linea); border-radius: var(--tkv-r-4); }

/* ══ (Ane-B, DECA_CHOFER_CORREGIR) «¿Quién conduce hoy?» del usuario compartido: un nombre por botón, uno debajo de otro
   (con guantes y el teclado encima, nada de lado a lado); el pie «Eres …» al final de la lista. En la oficina, quién
   usa cada usuario ══ */
.tc-qh-b { display: grid; gap: 10px; }
.tc-quien-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--tkv-texto-2); text-wrap: pretty; }
.tc-ofi-varios { margin-top: .5rem; }
.tc-ofi-varios summary { cursor: pointer; font-size: .875rem; min-height: 2rem; display: flex; align-items: center; }
.tc-ofi-varios label { display: block; margin: .25rem 0; font-size: .875rem; }
.tc-ofi-varios .tv-input { width: 100%; max-width: 22rem; margin-bottom: .375rem; }
/* (Ane-B §E) tras crear: «Viaje … creado» con «¿Algo mal? Corregir» y «Crear otro igual» (botones de 48 px, a lo ancho en
   el móvil), hasta que la cierra con la ✕ */
.tc-creado { position: relative; display: grid; gap: 10px; margin-bottom: 12px; padding: 12px 52px 12px 14px; background: var(--tkv-ok-fondo, var(--tkv-superficie));
  border-radius: var(--tkv-r-16); box-shadow: var(--tc-sombra); }
.tc-creado-t { display: flex; align-items: center; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.tc-creado-t .tc-i { flex: none; }
.tc-creado-b { display: flex; flex-wrap: wrap; gap: 10px; margin-right: -38px; }
.tc-creado-b > .tc-b { flex: 1 1 10rem; min-height: 48px; }
.tc-creado > .tc-x { position: absolute; top: 4px; right: 4px; }

/* (Ane-B §C) «Corregir o borrar»: borrar, en rojo y aparte (preguntando antes) */
.tc-b-rojo { color: var(--tkv-sobre-accion); background: var(--tkv-error-texto); border-color: var(--tkv-error-texto); }
.tc-corr-borrar { margin-top: 16px; color: var(--tkv-error-texto); }