/* app.rutaok.cl/assets/css/app.css
   Sistema visual RutaOk — v9.

   Direccion: el marino profundo y el verde de "aprobado" del icono, llevados
   a un dashboard con presencia real. Sobre la base v3-v8 se agregan tres
   cosas y se ordena todo lo demas:

     1. Una luz ambiental que sigue al cursor por detras de la interfaz, y un
        reflejo local que recorre tarjetas y botones. Es la firma visual.
     2. Un sistema de botones con capas: base, brillo que sigue al cursor y
        un destello que barre en diagonal al pasar el mouse.
     3. Responsive revisado de punta a punta: 1280 / 1024 / 860 / 720 / 620 /
        480 / 380, areas seguras del notch, y sin zoom involuntario en iOS.

   Dos temas via [data-theme="claro" | "oscuro"] en <html>. Claro es el tema
   por defecto. Preferencia guardada en localStorage ("rok-theme").

   Requiere assets/js/luz.js para la luz del cursor. Sin ese archivo todo
   funciona igual, solo que la luz queda quieta al centro.

   Indice
   ------
   00  Tokens
   01  Reset y base
   02  Luz del cursor            <- firma
   03  Tipografia
   04  Utilidades
   05  Estructura
   06  Barra superior
   07  Selector de tema
   08  Cinta de aviso
   09  Pie de marca
   10  Tarjetas y metricas
   11  Avisos
   12  Formularios
   13  Botones                   <- pieza principal
   14  Registro, planes y resumen
   15  Placa patente
   16  Encabezado, filtros, chips, insignias
   17  Rejilla de vehiculos
   18  Estado vacio
   19  Ficha, pestanas, datos
   20  Galeria
   21  Documentos
   22  Medidores
   23  Visor de archivos
   24  Cuotas
   25  Responsive
   26  Movimiento reducido e impresion
   30  Conductores: la vuelta, la ficha y las llaves
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* =============================================================================
   00  TOKENS
   ============================================================================= */

:root,
:root[data-theme="claro"] {
    --marino-950:    #071633;
    --marino-900:    #0a1f3d;
    --marino-800:    #0e2f5c;
    --marino-700:    #143f78;
    --marino-600:    #1c52a0;

    --verde-600:     #0ea052;
    --verde-500:     #17b95e;
    --verde-400:     #22c55e;
    --verde-glow:    rgba(34, 197, 94, .45);
    --verde-claro:   #e2f9ec;

    --fondo:         #f4f7fb;
    --fondo-alt:     #eaf0f8;
    --superficie:    #ffffff;
    --superficie-2:  #f3f6fa;
    --borde:         #dfe6ef;
    --borde-suave:   #ecf0f6;

    --texto:         #0c1a2e;
    --texto-suave:   #566072;
    --texto-tenue:   #8994a6;

    --rojo:          #d33a3a;
    --rojo-claro:    #fdeaea;
    --ambar:         #a15b06;
    --ambar-claro:   #fdf1dc;

    /* La escala del estanque. Cuatro colores y no los dos de --rojo/--ambar
       porque abajo del cuarto pasan tres cosas distintas y el que maneja las
       distingue: en reserva se busca bomba en el camino, vacio se para. */
    --nivel-vacio:   #d33a3a;
    --nivel-reserva: #e3a008;
    --nivel-cuarto:  #8b5a2b;
    --nivel-lleno:   #17b95e;

    --sombra:        0 1px 2px rgba(10, 31, 61, .05), 0 20px 40px -20px rgba(10, 31, 61, .18);
    --sombra-chica:  0 1px 3px rgba(10, 31, 61, .07);
    --sombra-alta:   0 2px 4px rgba(10, 31, 61, .06), 0 28px 56px -24px rgba(10, 31, 61, .28);
    --anillo:        0 0 0 4px rgba(34, 197, 94, .22);
    --glow-verde:    0 0 0 1px rgba(34, 197, 94, .18), 0 18px 40px -14px rgba(14, 160, 82, .45);

    --radio:        18px;
    --radio-chico:  12px;
    --radio-grande: 26px;

    /* Capas de luz. En claro la luz tine, no ilumina: si aclara sobre blanco
       no se ve nada, asi que se trabaja con saturacion baja y area grande. */
    --luz-a:        rgba(34, 197, 94, .16);
    --luz-b:        rgba(28, 82, 160, .12);
    --luz-mezcla:   normal;
    --luz-opacidad: .9;

    /* Reflejo interno de superficies (el borde superior "encendido"). */
    --filo:         inset 0 1px 0 rgba(255, 255, 255, .9);
    --filo-boton:   inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .1);
    --destello:     rgba(255, 255, 255, .55);
    --pulido:       rgba(255, 255, 255, .35);

    color-scheme: light;
}

:root[data-theme="oscuro"] {
    --marino-950:    #030a18;
    --marino-900:    #061b33;
    --marino-800:    #0a2647;
    --marino-700:    #0f3460;
    --marino-600:    #16487f;

    --verde-600:     #16a34a;
    --verde-500:     #22c55e;
    --verde-400:     #4ade80;
    --verde-glow:    rgba(74, 222, 128, .55);
    --verde-claro:   rgba(74, 222, 128, .14);

    --fondo:         #050e1e;
    --fondo-alt:     #081527;
    --superficie:    #0b1d33;
    --superficie-2:  #0f2440;
    --borde:         #1c3454;
    --borde-suave:   #13253f;

    --texto:         #eef4fb;
    --texto-suave:   #a9b8cd;
    --texto-tenue:   #71829c;

    --rojo:          #ff8a8a;
    --rojo-claro:    #34161c;
    --ambar:         #f3c583;
    --ambar-claro:   #372611;

    /* Los mismos cuatro, subidos de luz: un cafe #8b5a2b sobre el marino de
       fondo se ve como una mancha sin color. */
    --nivel-vacio:   #ff8a8a;
    --nivel-reserva: #f7c948;
    --nivel-cuarto:  #c0895e;
    --nivel-lleno:   #22c55e;

    --sombra:        0 1px 2px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .65);
    --sombra-chica:  0 1px 3px rgba(0, 0, 0, .4);
    --sombra-alta:   0 2px 6px rgba(0, 0, 0, .5), 0 34px 64px -24px rgba(0, 0, 0, .8);
    --anillo:        0 0 0 4px rgba(74, 222, 128, .3);
    --glow-verde:    0 0 0 1px rgba(74, 222, 128, .25), 0 22px 48px -14px rgba(34, 197, 94, .55);

    /* En oscuro la luz si ilumina: mas intensa y en modo aditivo. */
    --luz-a:        rgba(34, 197, 94, .30);
    --luz-b:        rgba(22, 72, 127, .40);
    --luz-mezcla:   screen;
    --luz-opacidad: 1;

    --filo:         inset 0 1px 0 rgba(255, 255, 255, .06);
    --filo-boton:   inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .28);
    --destello:     rgba(255, 255, 255, .38);
    --pulido:       rgba(255, 255, 255, .16);

    color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   LOS NOMBRES DE ARRIBA SON LOS UNICOS QUE EXISTEN
   -----------------------------------------------------------------------------
   Un var(--algo) que no este definido arriba NO da error: CSS usa en silencio
   el valor de respaldo que venga despues de la coma. Y ese respaldo se escribe
   siempre mirando el tema en el que uno esta trabajando, asi que la regla se ve
   perfecta en claro y el texto desaparece en oscuro.

   Ya paso: habia reglas pidiendo --tinta-1, --tinta-3, --texto-sutil, --verde,
   --fondo-tenue, --fondo-leido, --fondo-dudoso y --fondo-tarjeta. Ninguna
   existia. La linea "Quedarias con 15 vehiculos" de los extras se pintaba
   #1c1f24 sobre fondo #0b1d33.

   Los que hay, y para que:

     TEXTO      --texto        lo que se lee de verdad
                --texto-suave  secundario, pero legible (.sutil)
                --texto-tenue  rotulos en versalitas y cosas apagadas a proposito
     VERDE      --verde-600    texto verde        --verde-500  bordes y foco
                --verde-400    degradados         --verde-claro fondos suaves
     FONDOS     --fondo, --fondo-alt, --superficie, --superficie-2
     ESTADO     --rojo / --rojo-claro, --ambar / --ambar-claro
     ESTANQUE   --nivel-vacio, --nivel-reserva, --nivel-cuarto, --nivel-lleno
                la escala del combustible: rojo, amarillo, cafe, y verde de la
                mitad para arriba. Ver rok_combustible_color() y el bloque 29.

   Los unicos var() con respaldo legitimo son los que ESCRIBE el PHP inline:
   --carrusel-alto (core/vistas/piezas.php), --celda
   (core/lib/tablero_alertas.lib.php) y los cinco del estanque -que tambien
   salen de piezas.php-: --aguja-base, --color-base, --alto y --tinte, mas
   --aguja-sel y --color-sel, que los pone el :has() del bloque 29. Ninguno se
   declara aca a proposito: son el dato de una fila, no un color del sistema.

   Para revisar que no se colo ninguno nuevo, en la raiz del proyecto:

     grep -oE 'var\(--[a-z0-9-]+' assets/css/app.css | sort -u

   y comparar contra las declaraciones de este bloque.
   ----------------------------------------------------------------------------- */

/* Tokens que no cambian entre temas: tiempos, curvas y posicion del cursor.
   Separados a proposito para poder afinar el "tacto" de toda la app desde
   cuatro lineas. */
:root {
    --vel-flash:  .12s;
    --vel-rapida: .18s;
    --vel:        .3s;
    --vel-lenta:  .55s;

    /* Salida rapida, llegada larga: se siente responsivo sin verse brusco. */
    --curva:       cubic-bezier(.2, .8, .25, 1);
    --curva-firme: cubic-bezier(.4, 0, .2, 1);
    --curva-rebote: cubic-bezier(.34, 1.4, .64, 1);

    /* Los escribe luz.js. Los valores por defecto dejan la luz al centro
       superior, que es donde estaba el degradado original del body. */
    --luz-x: 50vw;
    --luz-y: 12vh;
    --luz-on: 0;

    /* Coordenadas locales del cursor dentro de la pieza bajo el mouse. */
    --x: 50%;
    --y: 50%;
}

/* =============================================================================
   01  RESET Y BASE
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

/* -----------------------------------------------------------------------------
   El delay de los 300ms
   -----------------------------------------------------------------------------
   Sin esto el navegador movil espera despues de cada toque por si viene un
   segundo, para decidir si era doble-tap-zoom. Ese silencio de 300ms es la
   causa fisica de buena parte de los dobles envios: la pantalla no reacciona,
   la persona vuelve a tocar, y el segundo toque llega igual.
   manipulation deja el scroll y el pinch, y apaga el zoom por doble tap. */
button,
a,
label,
summary,
[role="button"] { touch-action: manipulation; }

html {
    scroll-behavior: smooth;
    /* Ancla el scroll bajo la barra pegajosa al saltar a un #id. */
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--vel) ease, color var(--vel) ease;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Ninguna palabra larga (patentes, correos, URLs) puede romper el ancho. */
    overflow-wrap: break-word;
    /* Aisla el contexto de apilado para que la luz nunca tape el contenido. */
    isolation: isolate;
}

img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

::selection {
    background: color-mix(in srgb, var(--verde-500) 28%, transparent);
    color: var(--texto);
}

/* Barra de scroll discreta, con la paleta del tema. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--borde) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--borde);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: content-box; }

/* Anillo de foco unico para todo lo que se navega con teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--verde-500);
    outline-offset: 2px;
    border-radius: var(--radio-chico);
}

/* =============================================================================
   02  LUZ DEL CURSOR                                                  [firma]
   -----------------------------------------------------------------------------
   Dos capas fijas detras de todo. La primera es una mancha grande de verde
   que sigue al mouse con retraso; la segunda es un halo marino mas amplio y
   mas lento, que da profundidad y evita que el verde se lea como un puntero.

   Van en ::before y ::after del body para no tocar ni una linea de HTML.
   Con position:fixed salen del flujo, asi que no afectan el layout flex.
   ============================================================================= */

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: var(--luz-mezcla);
    transition: opacity var(--vel-lenta) var(--curva);
    /* La GPU la trata como capa propia: mover el degradado no repinta la app. */
    will-change: transform;
}

/* Capa 1: el nucleo verde. */
body::before {
    background: radial-gradient(
        520px circle at var(--luz-x) var(--luz-y),
        var(--luz-a),
        transparent 68%
    );
    opacity: calc(var(--luz-opacidad) * (.35 + .65 * var(--luz-on)));
}

/* Capa 2: el halo marino, mas ancho. Se combina con el degradado de esquina
   que ya traia el diseno original, ahora fijo para que no se despegue al
   hacer scroll. */
body::after {
    background:
        radial-gradient(
            900px circle at var(--luz-x) var(--luz-y),
            var(--luz-b),
            transparent 72%
        ),
        radial-gradient(1100px 480px at 12% -8%, color-mix(in srgb, var(--verde-400) 7%, transparent), transparent 60%);
    opacity: calc(var(--luz-opacidad) * (.5 + .5 * var(--luz-on)));
}

/* En pantallas tactiles no hay cursor: se deja solo el ambiente estatico. */
@media (hover: none), (pointer: coarse) {
    body::before { opacity: 0; }
    body::after  { opacity: .55; }
}

/* Utilidad para pintar una seccion sobre la luz cuando haga falta. */
.sobre-luz { position: relative; z-index: 1; }

/* =============================================================================
   03  TIPOGRAFIA
   ============================================================================= */

h1, h2, h3, h4 {
    font-family: "Space Grotesk", "Inter", sans-serif;
    letter-spacing: -.02em;
    line-height: 1.22;
    text-wrap: balance;
}
h1 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.15rem); font-weight: 700; margin: 0 0 .4rem; }
h2 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.25rem); font-weight: 700; margin: 0 0 .65rem; }
h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .5rem; }

p { text-wrap: pretty; }

a {
    color: var(--verde-600);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--vel-rapida) ease;
}
a:hover { color: var(--verde-500); }

strong, b { font-weight: 700; }
small { font-size: .86em; }

code, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--superficie-2);
    border: 1px solid var(--borde-suave);
    border-radius: 6px;
    padding: .1em .35em;
}

/* Titulo con el degradado de marca. Se usa con criterio: uno por pantalla. */
.titulo-degradado {
    background: linear-gradient(115deg, var(--texto) 20%, var(--verde-600) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* =============================================================================
   04  UTILIDADES
   ============================================================================= */

.oculto { display: none !important; }
.centrado { text-align: center; }
.sutil { color: var(--texto-suave); font-size: .95rem; }
.numerico { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nowrap { white-space: nowrap; }

/* Visible solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Entrada escalonada. En el HTML: <div class="aparece" style="--i:2">.
   Sin JS, sin librerias, y el orden lo decide el marcado. */
.aparece {
    animation: aparecer var(--vel-lenta) var(--curva) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* =============================================================================
   05  ESTRUCTURA
   ============================================================================= */

.contenido {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem clamp(1rem, .5rem + 2vw, 1.25rem) 4rem;
    flex: 1;
    position: relative;
    z-index: 1;
}
.contenido--centrado { max-width: 560px; padding-top: 2.75rem; }
.contenido--ancho { max-width: 1240px; }

/* =============================================================================
   06  BARRA SUPERIOR
   ============================================================================= */

.barra {
    background: color-mix(in srgb, var(--superficie) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--borde-suave);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .8rem 1.5rem;
    padding-left:  max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 30;
    transition: box-shadow var(--vel) ease, background-color var(--vel) ease;
}
/* luz.js agrega .es-desplazada al bajar: la barra se separa del contenido. */
.barra.es-desplazada {
    box-shadow: 0 1px 0 var(--borde-suave), 0 14px 34px -22px rgba(10, 31, 61, .5);
}

/* Hilo verde que cruza el borde inferior. Detalle chico, marca fuerte. */
.barra::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--verde-500) 55%, transparent) 30%,
        color-mix(in srgb, var(--verde-400) 75%, transparent) 50%,
        color-mix(in srgb, var(--verde-500) 55%, transparent) 70%,
        transparent);
    opacity: .5;
    pointer-events: none;
}

.barra__marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--texto);
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.barra__marca img {
    height: 34px;
    width: auto;
    display: block;
    border-radius: 9px;
    transition: transform var(--vel) var(--curva-rebote), box-shadow var(--vel) ease;
}
.barra__marca:hover img {
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 8px 20px -8px var(--verde-glow);
}
.barra__marca-texto {
    background: linear-gradient(120deg, var(--marino-900), var(--verde-600) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:root[data-theme="oscuro"] .barra__marca-texto {
    background: linear-gradient(120deg, #ffffff, var(--verde-400) 140%);
    -webkit-background-clip: text;
    background-clip: text;
}

.barra__nav { display: flex; gap: .25rem; flex: 1; min-width: 0; }
.barra__nav a {
    position: relative;
    text-decoration: none;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: .93rem;
    padding: .55rem .8rem;
    border-radius: var(--radio-chico);
    white-space: nowrap;
    transition: color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
/* Subrayado que crece desde el centro. Reemplaza el fondo gris plano. */
.barra__nav a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: .28rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--verde-500), var(--verde-400));
    transition: left var(--vel) var(--curva), right var(--vel) var(--curva);
}
.barra__nav a:hover { color: var(--texto); background: color-mix(in srgb, var(--superficie-2) 70%, transparent); }
.barra__nav a:hover::after,
.barra__nav a.es-activo::after { left: .8rem; right: .8rem; }
.barra__nav a.es-activo { color: var(--texto); }

.barra__usuario { display: flex; align-items: center; gap: .9rem; font-size: .9rem; flex: 0 0 auto; }
.barra__nombre { color: var(--texto-suave); font-weight: 600; }
.barra__salir {
    text-decoration: none;
    color: var(--texto-suave);
    font-weight: 600;
    padding: .5rem .85rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    transition: border-color var(--vel-rapida) ease, color var(--vel-rapida) ease,
                background-color var(--vel-rapida) ease, transform var(--vel-rapida) var(--curva);
}
.barra__salir:hover {
    color: var(--rojo);
    border-color: color-mix(in srgb, var(--rojo) 50%, transparent);
    background: var(--rojo-claro);
    transform: translateY(-1px);
}
.barra__salir:active { transform: translateY(0); }

/* =============================================================================
   07  SELECTOR DE TEMA
   -----------------------------------------------------------------------------
   La pastilla activa se desliza en vez de aparecer: el cambio de tema se lee
   como un movimiento, no como un parpadeo.
   ============================================================================= */

.selector-tema {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    box-shadow: var(--filo);
}
.selector-tema button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-tenue);
    cursor: pointer;
    isolation: isolate;
    transition: color var(--vel-rapida) ease, transform var(--vel-rapida) var(--curva-rebote);
}
.selector-tema button svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.selector-tema button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--verde-500), var(--verde-600));
    box-shadow: 0 6px 16px -6px var(--verde-glow), var(--filo-boton);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--vel) var(--curva), transform var(--vel) var(--curva-rebote);
    z-index: 0;
}
.selector-tema button:hover { color: var(--texto); transform: translateY(-1px); }
.selector-tema button.es-activo { color: #ffffff; }
.selector-tema button.es-activo::before { opacity: 1; transform: scale(1); }
.selector-tema button.es-activo:hover { transform: none; }
/* El icono gira un cuarto de vuelta al activarse. */
.selector-tema button.es-activo svg { animation: girar-icono var(--vel-lenta) var(--curva); }
@keyframes girar-icono {
    from { transform: rotate(-90deg) scale(.5); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* =============================================================================
   08  CINTA DE AVISO
   ============================================================================= */

.cinta {
    position: relative;
    background: linear-gradient(90deg, var(--ambar-claro), color-mix(in srgb, var(--ambar-claro) 55%, transparent));
    color: var(--ambar);
    padding: .7rem 1.5rem;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}
/* Barrido lento y muy tenue: la cinta se nota sin gritar. */
.cinta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ambar) 12%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: barrido-cinta 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes barrido-cinta {
    0%, 55% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}
.cinta > * { position: relative; z-index: 1; }
.cinta a { color: var(--ambar); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   09  PIE DE MARCA
   -----------------------------------------------------------------------------
   Cierra la pagina en marino. La aurora se mueve muy lento (28s) para que se
   perciba como atmosfera y no como animacion.
   ============================================================================= */

.pie {
    position: relative;
    margin-top: 2rem;
    background: linear-gradient(180deg, var(--marino-900), var(--marino-950));
    color: #c7d3e6;
    padding: 2.75rem 1.5rem 2rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    overflow: hidden;
    z-index: 1;
}
.pie::before {
    content: "";
    position: absolute;
    inset: -40% -10%;
    background:
        radial-gradient(420px 220px at 85% 20%, color-mix(in srgb, var(--verde-500) 30%, transparent), transparent 65%),
        radial-gradient(380px 200px at 20% 80%, color-mix(in srgb, var(--marino-600) 55%, transparent), transparent 65%);
    animation: aurora 28s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes aurora {
    from { transform: translate3d(-4%, -2%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
.pie > * { position: relative; z-index: 1; }

.pie__interior {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.pie__marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #ffffff;
}
.pie__marca .punto {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--verde-400);
    box-shadow: 0 0 14px 2px var(--verde-glow);
    animation: latido 3.2s ease-in-out infinite;
}
@keyframes latido {
    0%, 100% { box-shadow: 0 0 14px 2px var(--verde-glow); }
    50%      { box-shadow: 0 0 22px 5px var(--verde-glow); }
}
.pie__tag { color: #93a4c2; font-size: .88rem; margin-top: .4rem; max-width: 320px; }
.pie__enlaces { display: flex; gap: 1.75rem; flex-wrap: wrap; font-size: .9rem; }
.pie__enlaces a {
    position: relative;
    color: #c7d3e6;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--vel-rapida) ease;
}
.pie__enlaces a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: var(--verde-400);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--vel) var(--curva);
}
.pie__enlaces a:hover { color: var(--verde-400); }
.pie__enlaces a:hover::after { transform: scaleX(1); transform-origin: left; }
.pie__base {
    max-width: 1040px;
    margin: 1.75rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
    color: #7688a8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Compat: si un layout aun no usa .pie__interior, que igual se vea ordenado */
.pie > span:first-child:not(.pie__marca) { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #fff; }
.pie a:not(.pie__enlaces a) { color: #c7d3e6; }

/* =============================================================================
   10  TARJETAS Y METRICAS
   -----------------------------------------------------------------------------
   Cada tarjeta tiene un reflejo propio que sigue al cursor (--x / --y los
   escribe luz.js). Es el mismo lenguaje de la luz de fondo, pero local: al
   pasar por encima, la superficie responde.
   ============================================================================= */

.tarjeta {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: clamp(1.15rem, .9rem + 1vw, 1.6rem);
    margin-bottom: 1.25rem;
    box-shadow: var(--sombra-chica), var(--filo);
    isolation: isolate;
    transition: box-shadow var(--vel) var(--curva),
                border-color var(--vel) ease,
                transform var(--vel) var(--curva);
}
.tarjeta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--x) var(--y),
        color-mix(in srgb, var(--verde-400) 12%, transparent),
        transparent 62%);
    opacity: 0;
    transition: opacity var(--vel) ease;
    pointer-events: none;
    z-index: -1;
}
.tarjeta:hover {
    box-shadow: var(--glow-verde);
    border-color: color-mix(in srgb, var(--verde-500) 35%, var(--borde-suave));
    transform: translateY(-3px);
}
.tarjeta:hover::before { opacity: 1; }
.tarjeta--ancha { max-width: 720px; margin-left: auto; margin-right: auto; }
.tarjeta--plana { box-shadow: none; }
.tarjeta--plana:hover { transform: none; }

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 1.1rem;
    margin-bottom: 1.35rem;
}
.tarjeta--metrica {
    padding: 1.25rem 1.35rem;
    margin: 0;
    overflow: hidden;
}
/* La barra lateral se ensancha y se enciende al pasar el mouse. */
.tarjeta--metrica::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--verde-400), var(--verde-600));
    transition: width var(--vel) var(--curva), box-shadow var(--vel) ease;
    z-index: 1;
}
.tarjeta--metrica:hover::after { width: 6px; box-shadow: 0 0 18px 0 var(--verde-glow); }

.metrica__titulo {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.metrica__valor {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.7rem, 1.5rem + .8vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-top: .35rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.metrica__valor small { font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 500; color: var(--texto-tenue); }

.barra-uso {
    background: var(--borde-suave);
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
    margin-top: .75rem;
}
.barra-uso span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--verde-400), var(--verde-600));
    box-shadow: 0 0 10px 0 var(--verde-glow);
    transition: width var(--vel-lenta) var(--curva);
}

/* =============================================================================
   11  AVISOS
   -----------------------------------------------------------------------------
   Barra de color a la izquierda: el estado se lee antes que el texto.
   ============================================================================= */

.aviso {
    position: relative;
    border-radius: var(--radio-chico);
    padding: .95rem 1.15rem .95rem 1.3rem;
    margin-bottom: 1rem;
    font-size: .95rem;
    font-weight: 500;
    border: 1px solid transparent;
    overflow: hidden;
    animation: aparecer var(--vel) var(--curva);
}
.aviso::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: currentColor;
    opacity: .8;
}
.aviso--error { background: var(--rojo-claro); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 25%, transparent); }
.aviso--exito { background: var(--verde-claro); color: var(--verde-600); border-color: color-mix(in srgb, var(--verde-500) 30%, transparent); }
.aviso--aviso { background: var(--ambar-claro); color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 25%, transparent); }

/* =============================================================================
   12  FORMULARIOS
   ============================================================================= */

.campo { display: block; margin-bottom: 1.15rem; border: 0; padding: 0; min-width: 0; }
.campo > span { display: block; font-weight: 700; margin-bottom: .4rem; font-size: .96rem; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
/* `datetime-local` entro con las rutas, que se programan con fecha Y hora en un
   solo campo. Faltaba en esta lista, y un input que no entra aca no hereda
   NADA: sale con el ancho automatico del navegador, sin borde, sin relleno y
   con la tipografia del sistema, al lado de campos que si tienen todo eso.
   `month` y `week` van de acompanantes para que el proximo no repita el viaje. */
.campo input[type="datetime-local"],
.campo input[type="month"],
.campo input[type="week"],
.campo input[type="tel"],
.campo input[type="search"],
.campo input[type="url"],
.campo input[type="time"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .85rem .95rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    /* 16px exactos: menos que eso y iOS hace zoom al enfocar. */
    font-size: 16px;
    font-family: inherit;
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.campo select {
    /* Flecha propia: la nativa no respeta el tema oscuro. */
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-tenue) 50%),
                      linear-gradient(135deg, var(--texto-tenue) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
    cursor: pointer;
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--texto-tenue); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: var(--anillo);
    background: var(--superficie);
}
.campo textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.campo small { display: block; margin-top: .35rem; color: var(--texto-tenue); font-size: .84rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); opacity: .8; }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
    background: var(--superficie-2);
    color: var(--texto-tenue);
    cursor: not-allowed;
}

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--rojo); }
.campo--error input:focus,
.campo--error select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rojo) 20%, transparent); }
.campo__error {
    display: block;
    margin-top: .35rem;
    color: var(--rojo);
    font-size: .86rem;
    font-weight: 600;
    animation: sacudir .3s var(--curva-firme);
}
@keyframes sacudir {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.campo input[type="file"] {
    width: 100%;
    padding: .7rem;
    border: 1px dashed var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .92rem;
    cursor: pointer;
    transition: border-color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.campo input[type="file"]:hover { border-color: var(--verde-500); background: var(--verde-claro); }
.campo input[type="file"]:focus { outline: none; border-color: var(--verde-500); box-shadow: var(--anillo); }
.campo input[type="file"]::file-selector-button {
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-weight: 700;
    font-size: .88rem;
    padding: .4rem .8rem;
    border-radius: 8px;
    margin-right: .75rem;
    cursor: pointer;
}

.radio { display: block; margin: .4rem 0; font-size: .95rem; }
.radio input { margin-right: .4rem; }

/* Controles nativos en verde de marca, en ambos temas. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress { accent-color: var(--verde-500); }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.rejilla-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0 1.1rem;
}

.separador { text-align: center; margin: 1.6rem 0 1rem; border-top: 1px solid var(--borde-suave); }
.separador span {
    position: relative;
    top: -.75rem;
    background: var(--superficie);
    padding: 0 .75rem;
    color: var(--texto-tenue);
    font-size: .85rem;
}

/* =============================================================================
   13  BOTONES                                                 [pieza principal]
   -----------------------------------------------------------------------------
   Un boton de RutaOk esta hecho de capas, como una pieza mecanizada:

     fondo        el color o el degradado
     ::before     brillo radial que sigue al cursor dentro del boton
     ::after      destello diagonal que barre una vez al entrar el mouse
     filo         linea clara arriba y sombra abajo, por dentro (--filo-boton)
     elevacion    sube 2px al hover, se hunde 1px al presionar

   El resultado se siente fisico: responde donde esta el dedo, no en bloque.
   La transicion de "presionado" es de 120ms a proposito, para que el clic se
   confirme antes de que el navegador navegue.
   ============================================================================= */

.boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    /* Nunca por debajo de 44px de alto: es el minimo tactil comodo. */
    min-height: 44px;
    padding: .85rem 1.25rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    color: var(--texto);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-top: .5rem;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--sombra-chica), var(--filo);
    transition: transform var(--vel-flash) var(--curva),
                box-shadow var(--vel) var(--curva),
                border-color var(--vel-rapida) ease,
                background-color var(--vel-rapida) ease,
                color var(--vel-rapida) ease;
}

/* Capa de brillo que persigue al cursor. */
.boton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px circle at var(--x) var(--y), var(--pulido), transparent 60%);
    opacity: 0;
    transition: opacity var(--vel) ease;
    pointer-events: none;
    z-index: -1;
}
.boton:hover::before { opacity: 1; }

/* Destello diagonal. Sale del borde izquierdo y cruza en 600ms. */
.boton::after {
    content: "";
    position: absolute;
    top: -50%; bottom: -50%;
    left: -80%;
    width: 45%;
    background: linear-gradient(100deg, transparent, var(--destello), transparent);
    transform: skewX(-22deg) translateX(0);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.boton:hover::after { animation: destello .6s var(--curva-firme); }
@keyframes destello {
    0%   { opacity: 0;  transform: skewX(-22deg) translateX(0); }
    18%  { opacity: 1; }
    100% { opacity: 0;  transform: skewX(-22deg) translateX(420%); }
}

.boton:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta), var(--filo);
    border-color: var(--texto-tenue);
}
.boton:active {
    transform: translateY(1px) scale(.99);
    box-shadow: var(--sombra-chica), inset 0 2px 6px rgba(10, 31, 61, .14);
    transition-duration: var(--vel-flash);
}
.boton:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 3px; }

/* --- Enviando -------------------------------------------------------------
   Lo pone assets/js/enviar.js al mandar el formulario. El problema que
   resuelve no es que la persona toque dos veces por torpeza: es que subir tres
   fotos por 4G deja la pantalla identica ocho segundos, y desde donde ella
   esta parada eso significa que no paso nada.

   El anillo girando es la mitad que importa. El pointer-events y el disabled
   son el candado, pero un candado silencioso igual deja a la persona sin
   saber si su check-in salio. */
.boton.es-enviando {
    opacity: .72;
    cursor: progress;
    pointer-events: none;
    transform: none;
}

/* Se apagan los adornos: el brillo y el destello persiguen al cursor y aca no
   hay nada que perseguir, el boton esta esperando al servidor. */
.boton.es-enviando::before,
.boton.es-enviando::after { animation: none; opacity: 0; }

.hilando {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    /* El cuarto transparente es lo que hace que se vea girar: un anillo
       completo rotando se ve quieto. */
    border-top-color: transparent;
    border-radius: 50%;
    animation: hilando .7s linear infinite;
}

@keyframes hilando {
    to { transform: rotate(360deg); }
}

/* Quien pidio menos movimiento no necesita un anillo girando para entender que
   se esta esperando: el texto del boton ya lo dice. */
@media (prefers-reduced-motion: reduce) {
    .hilando { animation: none; opacity: .5; }
}

/* --- Principal: la accion que el usuario vino a hacer ---------------------
   Degradado de tres paradas y un halo verde que crece al hover. Es el unico
   elemento de la pantalla con derecho a brillar asi. */
.boton--principal {
    background: linear-gradient(135deg, var(--verde-400) 0%, var(--verde-500) 45%, var(--verde-600) 100%);
    background-size: 160% 160%;
    background-position: 0% 50%;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(10, 31, 61, .12),
                0 12px 28px -12px var(--verde-glow),
                var(--filo-boton);
    transition: transform var(--vel-flash) var(--curva),
                box-shadow var(--vel) var(--curva),
                background-position var(--vel-lenta) var(--curva);
}
.boton--principal:hover {
    background-position: 100% 50%;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(10, 31, 61, .12),
                0 20px 42px -14px var(--verde-glow),
                0 0 0 1px color-mix(in srgb, var(--verde-400) 55%, transparent),
                var(--filo-boton);
}
.boton--principal:active {
    box-shadow: 0 1px 2px rgba(10, 31, 61, .2), inset 0 2px 8px rgba(0, 0, 0, .22);
}

/* --- Marino: confirmar, guardar, avanzar. Autoridad sin estridencia. ------ */
.boton--marino {
    background: linear-gradient(135deg, var(--marino-700) 0%, var(--marino-900) 100%);
    background-size: 160% 160%;
    background-position: 0% 50%;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(7, 22, 51, .2),
                0 12px 28px -14px rgba(10, 31, 61, .8),
                var(--filo-boton);
    transition: transform var(--vel-flash) var(--curva),
                box-shadow var(--vel) var(--curva),
                background-position var(--vel-lenta) var(--curva);
}
.boton--marino:hover {
    background-position: 100% 50%;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(7, 22, 51, .2),
                0 20px 42px -14px rgba(10, 31, 61, .9),
                0 0 0 1px color-mix(in srgb, var(--verde-400) 40%, transparent),
                var(--filo-boton);
}

/* --- Secundario: el neutro por defecto ------------------------------------ */
.boton--secundario { background: var(--superficie); color: var(--texto); }
.boton--secundario:hover { border-color: color-mix(in srgb, var(--verde-500) 45%, var(--borde)); }

/* --- Fantasma: acciones terciarias, no compiten con nada ------------------ */
.boton--fantasma {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--texto-suave);
}
.boton--fantasma:hover {
    background: var(--superficie-2);
    border-color: var(--borde);
    color: var(--texto);
    box-shadow: var(--sombra-chica);
}

/* --- Contorno: presencia verde sin llenar de color ------------------------ */
.boton--contorno {
    background: transparent;
    color: var(--verde-600);
    border-color: color-mix(in srgb, var(--verde-500) 45%, transparent);
    box-shadow: none;
}
.boton--contorno:hover {
    background: var(--verde-claro);
    border-color: var(--verde-500);
    color: var(--verde-600);
    box-shadow: 0 12px 28px -16px var(--verde-glow);
}

/* --- Peligro: eliminar, dar de baja --------------------------------------- */
.boton--peligro {
    border-color: color-mix(in srgb, var(--rojo) 40%, transparent);
    color: var(--rojo);
}
.boton--peligro:hover {
    background: var(--rojo-claro);
    border-color: var(--rojo);
    color: var(--rojo);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--rojo) 70%, transparent), var(--filo);
}

/* --- Tamanos y anchos ------------------------------------------------------ */
.boton--auto  { width: auto; }
.boton--chico { padding: .55rem .95rem; font-size: .9rem; width: auto; min-height: 38px; border-radius: 10px; gap: .35rem; }
.boton--mini  { padding: .35rem .7rem; font-size: .82rem; width: auto; min-height: 32px; border-radius: 8px; margin-top: 0; }
.boton--grande { padding: 1.05rem 1.6rem; font-size: 1.06rem; min-height: 52px; border-radius: 14px; }
.boton--bloque { width: 100%; }

/* Boton solo de icono: cuadrado perfecto. */
.boton--icono { width: 44px; min-width: 44px; padding: 0; }
.boton--icono.boton--chico { width: 38px; min-width: 38px; }
.boton svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* --- Estados -------------------------------------------------------------- */
.boton[disabled],
.boton.es-inactivo {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* Estado de envio. Agregar .es-cargando desde JS al hacer submit: el texto se
   apaga (sin cambiar el ancho del boton) y aparece la rueda. */
.boton.es-cargando {
    color: transparent;
    pointer-events: none;
}
.boton.es-cargando::before { opacity: 0; }
.boton.es-cargando::after {
    content: "";
    position: absolute;
    inset: auto;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--texto-suave);
    border-top-color: transparent;
    border-radius: 50%;
    background: none;
    opacity: 1;
    animation: rueda .7s linear infinite;
    z-index: 2;
}
.boton--principal.es-cargando::after,
.boton--marino.es-cargando::after { border-color: rgba(255, 255, 255, .9); border-top-color: transparent; }
@keyframes rueda {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.acciones { display: flex; gap: .75rem; }
.acciones .boton { margin-top: 0; }

.fila-acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.fila-acciones form { margin: 0; }
.fila-acciones .boton { margin-top: 0; }

/* =============================================================================
   14  REGISTRO, PLANES Y RESUMEN
   ============================================================================= */

.pasos { display: flex; gap: .5rem; margin-bottom: 1.5rem; font-size: .8rem; flex-wrap: wrap; }
.pasos__item {
    position: relative;
    color: var(--texto-tenue);
    font-weight: 600;
    border-bottom: 2px solid var(--borde-suave);
    padding-bottom: .3rem;
    flex: 1;
    min-width: 90px;
    transition: color var(--vel) ease;
}
/* El borde activo se dibuja de izquierda a derecha al avanzar de paso. */
.pasos__item::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--verde-500), var(--verde-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--vel-lenta) var(--curva);
}
.pasos__item.es-activo { color: var(--verde-600); }
.pasos__item.es-activo::after { transform: scaleX(1); }
.pasos__item.es-listo { color: var(--texto-suave); }
.pasos__item.es-listo::after { transform: scaleX(1); opacity: .45; }

.ciclo { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.etiqueta {
    display: inline-block;
    background: var(--verde-claro);
    color: var(--verde-600);
    border-radius: 99px;
    padding: .15rem .65rem;
    font-size: .75rem;
    font-weight: 700;
}

.planes { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }

.plan {
    position: relative;
    display: block;
    border: 2px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: 1.15rem;
    cursor: pointer;
    background: var(--superficie);
    isolation: isolate;
    overflow: hidden;
    transition: border-color var(--vel) ease, box-shadow var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.plan::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(280px circle at var(--x) var(--y),
        color-mix(in srgb, var(--verde-400) 14%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity var(--vel) ease;
    pointer-events: none;
    z-index: -1;
}
.plan:hover { border-color: var(--verde-500); box-shadow: var(--glow-verde); transform: translateY(-3px); }
.plan:hover::before { opacity: 1; }
/* El plan elegido queda marcado sin depender del radio nativo. */
.plan:has(input:checked) {
    border-color: var(--verde-500);
    box-shadow: var(--glow-verde);
    background: color-mix(in srgb, var(--verde-claro) 45%, var(--superficie));
}
.plan:has(input:focus-visible) { outline: 2px solid var(--verde-500); outline-offset: 2px; }
.plan input { margin-bottom: .5rem; }
.plan__nombre { display: block; font-weight: 700; font-family: "Space Grotesk", sans-serif; }
.plan__precio {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.35rem, 1.2rem + .6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--verde-600);
    font-variant-numeric: tabular-nums;
}
.plan__precio small { font-family: "Inter", sans-serif; font-size: .85rem; font-weight: 500; color: var(--texto-suave); }
.plan__desc { display: block; font-size: .85rem; color: var(--texto-suave); margin: .35rem 0; }
.plan__lista { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--texto-suave); }
.plan__lista li { margin-bottom: .2rem; }
.plan__lista li::marker { color: var(--verde-500); }
.plan__trial { display: block; margin-top: .5rem; font-size: .8rem; color: var(--verde-600); font-weight: 700; }

.extras { margin-bottom: 1rem; }
.extra {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--borde-suave);
    flex-wrap: wrap;
}
.extra:last-child { border-bottom: 0; }
.extra__info { flex: 1; min-width: 180px; }
.extra__info strong { display: block; }
.extra__precio { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.extra__precio small { font-weight: 400; color: var(--texto-suave); }
.extra__control input[type="number"] {
    width: 76px;
    padding: .5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-size: 16px;
    background: var(--superficie);
    color: var(--texto);
    text-align: center;
}
.interruptor { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .9rem; }

.resumen {
    background: var(--verde-claro);
    border: 1px solid color-mix(in srgb, var(--verde-500) 22%, transparent);
    border-radius: var(--radio);
    padding: 1.15rem;
    margin-bottom: 1.5rem;
}
.resumen__linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .2rem 0; color: var(--texto); }
.resumen__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 1px solid color-mix(in srgb, var(--verde-500) 25%, transparent);
    margin-top: .5rem;
    padding-top: .5rem;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   15  PLACA PATENTE
   -----------------------------------------------------------------------------
   La pieza con identidad del producto. Fondo blanco y letras negras incluso
   en tema oscuro, porque asi son en la calle. Verde para electricos e
   hibridos, como el formato que anuncio el MTT.
   ============================================================================= */

.placa {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28em;
    /* Nunca se encoge. Adentro de una fila flex -que es donde vive en todos los
       listados- sin esto la placa cede ancho antes que el texto de al lado, y
       con overflow:hidden eso no se ve como apretado: se ve como cortado. */
    flex: 0 0 auto;
    /* -------------------------------------------------------------------------
       EL TAMANO Y LA TINTA SALEN POR VARIABLE
       -------------------------------------------------------------------------
       La placa entra en pantallas que traen sus propias reglas, y algunas le
       ganan por especificidad. El caso vivo es `.datos-lista div span`: pinta el
       rotulo de esa rejilla y, por ser un selector de descendencia, agarra
       tambien la placa, que ES un <span>. Ahi hay que devolverle el tamano y el
       color a mano, y eso se hace mas abajo.

       Con las variables, devolverlos se escribe `font-size: var(--placa-tamano)`
       y no como una copia del clamp. Una copia se queda vieja el dia que alguien
       cambie el original, y se queda vieja en silencio: la placa se ve bien en
       veinte pantallas y distinta en una. */
    --placa-tinta:  #10151c;
    --placa-tamano: clamp(.95rem, .88rem + .25vw, 1.05rem);
    background: #ffffff;
    color: var(--placa-tinta);
    border: 2px solid #10151c;
    border-radius: 7px;
    padding: .3em .55em;
    /* -------------------------------------------------------------------------
       TODAS LAS PATENTES MIDEN LO MISMO, Y ESO INCLUYE LAS MOTOS
       -------------------------------------------------------------------------
       Los cinco formatos chilenos vivos tienen 5 o 6 caracteres: una moto
       BCD-12 es casi un em mas angosta que un auto BCDF-12. Apiladas en la
       columna de un listado, eso se lee como un borde que baila.

       El numero salio de medir los cinco formatos en las DOS situaciones que
       existen -con Space Grotesk cargada y con la sans-serif del sistema, que
       es lo que se ve mientras la fuente viaja- y tomar el mas ancho de los
       diez. Con la fuente el maximo es AB-1000 (6.67em); sin ella es BCDFG-1
       (7.09em). Por eso 7.2em y no 6.7em.

       Con min-width + justify-content:center, los cinco formatos salen
       exactamente del mismo ancho en los dos casos. Si algun dia aparece un
       formato mas largo, la placa crece sola: min-width no recorta. */
    min-width: 7.2em;
    font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--placa-tamano);
    letter-spacing: .11em;
    /* Los digitos se comparan de un vistazo entre filas. Con ancho variable,
       el 1 es mas angosto que el 4 y dos patentes no quedan alineadas. */
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 31, 61, .22);
    white-space: nowrap;
    overflow: hidden;
    transition: transform var(--vel) var(--curva), box-shadow var(--vel) ease;
}
/* letter-spacing mete el espacio DESPUES de cada caracter, incluido el ultimo:
   sin compensarlo el contenido queda .11em corrido hacia la izquierda dentro de
   su propia caja, y con la caja ya centrada eso se nota. */
.placa > span:last-child { margin-right: -.11em; }
/* Reflejo de metal: una franja clara cruza la placa al pasar el mouse. */
.placa::after {
    content: "";
    position: absolute;
    top: -60%; bottom: -60%;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}
.placa:hover::after { animation: destello .7s var(--curva-firme); }
.placa__sep {
    width: .42em;
    height: .42em;
    border-radius: 50%;
    background: #10151c;
    flex: 0 0 auto;
    opacity: .82;
}
.placa--verde        { background: #0f7a3d; --placa-tinta: #ffffff; border-color: #08351b; }
.placa--verde .placa__sep { background: #ffffff; }
.placa--grande       { --placa-tamano: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); padding: .34em .6em; border-width: 3px; border-radius: 10px; min-width: 7.25em; }
.placa--chica        { --placa-tamano: .8rem; padding: .28em .45em; border-width: 1.5px; min-width: 6.9em; }
.placa--baja         { opacity: .55; filter: grayscale(1); }
/* Registrado sin la patente a mano (SINPAT001): placa en blanco, borde
   punteado y letra chica, para que no se lea como una patente de verdad. */
.placa--sin          { border-style: dashed; --placa-tinta: #5b6472; letter-spacing: .04em; font-size: calc(var(--placa-tamano) * .78); }

/* La placa entera como enlace: se envuelve en <a class="placa-enlace">. Sin
   subrayado ni color de enlace, porque la placa ya se lee como un objeto y
   pintarla encima la rompe. El realce al apuntar es el mismo levantar de las
   tarjetas, no un cambio de color.

   Vive aca, al lado de la placa, y no en la seccion de etiquetas donde nacio:
   la usan la tira de flota de /vehiculos/etiquetas.php y la ficha de una ruta,
   y el dia que la use una tercera pantalla el sitio donde buscarla es este. */
.placa-enlace {
    display: inline-flex;
    text-decoration: none;
    border-radius: 8px;
    transition: transform var(--vel-rapida) var(--curva);
}
.placa-enlace:hover { transform: translateY(-2px); }
.placa-enlace:focus-visible { outline: none; box-shadow: var(--anillo); }

/* -----------------------------------------------------------------------------
   LA PLACA ADENTRO DE .datos-lista
   -----------------------------------------------------------------------------
   `.datos-lista div span` pinta el rotulo de esa rejilla -"VEHICULO", "DESDE"-
   y es un selector de DESCENDENCIA, asi que agarra tambien la placa y los dos
   <span> que lleva adentro. Le gana a `.placa` por especificidad, y con
   display:block la placa salia de ancho completo, en versalitas tenues y con
   las letras arriba y los numeros abajo. De placa no le quedaba nada.

   Se repara aca y no cambiandole el alcance al rotulo, que es el mismo trato
   que ya recibio el medidor de combustible en la seccion 46: `.datos-lista` la
   usan veinte pantallas y ese selector hoy funciona en todas ellas.

   El margen se devuelve solo por abajo -y no con un `margin: 0`- para no pisar
   la compensacion de letter-spacing de `.placa > span:last-child`, que tiene la
   misma especificidad que la regla de aqui abajo y perderia el desempate por
   orden de aparicion. */
.datos-lista .placa {
    display: inline-flex;
    vertical-align: middle;
    font-size: var(--placa-tamano);
    letter-spacing: .11em;
    color: var(--placa-tinta);
    margin-bottom: 0;
}
.datos-lista .placa > span {
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin-bottom: 0;
}

/* =============================================================================
   16  ENCABEZADO, FILTROS, CHIPS E INSIGNIAS
   ============================================================================= */

.encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.encabezado h1 { margin-bottom: .15rem; }
.encabezado__acciones { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.encabezado__acciones .boton { margin-top: 0; }

.filtros {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.35rem;
}
.filtros__buscar { flex: 1 1 200px; min-width: 0; position: relative; }
.filtros__buscar input {
    width: 100%;
    padding: .68rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    /* 16px para que iOS no haga zoom al enfocar el buscador. */
    font-size: 16px;
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.filtros__buscar input:hover { border-color: var(--texto-tenue); }
.filtros__buscar input:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: var(--anillo);
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--vel-rapida) ease, color var(--vel-rapida) ease,
                background-color var(--vel-rapida) ease, transform var(--vel-rapida) var(--curva);
}
/* Relleno que sube desde abajo al pasar el mouse. */
.chip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--superficie-2);
    transform: translateY(100%);
    transition: transform var(--vel) var(--curva);
    z-index: -1;
}
.chip:hover { color: var(--texto); border-color: var(--texto-tenue); transform: translateY(-1px); }
.chip:hover::before { transform: translateY(0); }
.chip:active { transform: translateY(0); }
.chip.es-activo {
    background: var(--verde-claro);
    border-color: color-mix(in srgb, var(--verde-500) 45%, transparent);
    color: var(--verde-600);
    box-shadow: 0 6px 18px -10px var(--verde-glow);
}
.chip.es-activo::before { background: color-mix(in srgb, var(--verde-500) 12%, transparent); }
.chip__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-tenue); flex: 0 0 auto; }

.insignia {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: var(--superficie-2);
    color: var(--texto-suave);
    border: 1px solid var(--borde-suave);
    white-space: nowrap;
}
.insignia--empresa  { background: color-mix(in srgb, var(--marino-600) 12%, transparent); color: var(--marino-600); border-color: transparent; }
.insignia--vendido  { background: var(--ambar-claro); color: var(--ambar); border-color: transparent; }
.insignia--baja     { background: var(--rojo-claro); color: var(--rojo); border-color: transparent; }
.insignia--eliminado{ background: var(--rojo-claro); color: var(--rojo); border-color: transparent; }
.insignia--ok       { background: var(--verde-claro); color: var(--verde-600); border-color: transparent; }

/* =============================================================================
   17  REJILLA DE VEHICULOS
   ============================================================================= */

.rejilla {
    display: grid;
    /* El min() evita que la tarjeta desborde bajo los 260px de ancho. */
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.1rem;
}

.vehiculo {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-chica), var(--filo);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: box-shadow var(--vel) var(--curva), border-color var(--vel) ease, transform var(--vel) var(--curva);
}
.vehiculo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--x) var(--y),
        color-mix(in srgb, var(--verde-400) 13%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity var(--vel) ease;
    pointer-events: none;
    z-index: 1;
}
.vehiculo:hover {
    box-shadow: var(--glow-verde);
    border-color: color-mix(in srgb, var(--verde-500) 35%, var(--borde-suave));
    transform: translateY(-4px);
}
.vehiculo:hover::before { opacity: 1; }
.vehiculo:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; }

.vehiculo__foto {
    aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, var(--superficie-2), var(--fondo-alt));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.vehiculo__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--vel-lenta) var(--curva), filter var(--vel-lenta) ease;
}
/* Acercamiento leve y saturacion: la foto cobra vida sin distorsionarse. */
.vehiculo:hover .vehiculo__foto img { transform: scale(1.05); filter: saturate(1.1); }
.vehiculo__foto .placa { transform: rotate(-2deg); }
.vehiculo:hover .vehiculo__foto .placa { transform: rotate(-2deg) scale(1.03); }
.vehiculo__cinta { position: absolute; top: .7rem; right: .7rem; display: flex; gap: .35rem; z-index: 2; }

.vehiculo__cuerpo {
    position: relative;
    z-index: 2;
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}
.vehiculo__titulo {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.vehiculo__detalle { color: var(--texto-suave); font-size: .89rem; }
.vehiculo__pie {
    margin-top: auto;
    padding-top: .7rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.vehiculo__grupo { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--texto-tenue); font-weight: 600; }
.vehiculo__grupo i { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-tenue); display: inline-block; }

/* =============================================================================
   18  ESTADO VACIO
   -----------------------------------------------------------------------------
   Una pantalla vacia es una invitacion, no un cartel de error.
   ============================================================================= */

.vacio {
    text-align: center;
    padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) 1.5rem;
    border: 1px dashed var(--borde);
    border-radius: var(--radio-grande);
    background: color-mix(in srgb, var(--superficie) 60%, transparent);
    transition: border-color var(--vel) ease, background-color var(--vel) ease;
}
.vacio:hover { border-color: color-mix(in srgb, var(--verde-500) 40%, var(--borde)); }
.vacio h2 { margin-bottom: .4rem; }
.vacio p { color: var(--texto-suave); max-width: 400px; margin: 0 auto 1.4rem; }
.vacio .placa { margin-bottom: 1.2rem; opacity: .45; }
.vacio .boton { width: auto; }

/* =============================================================================
   19  FICHA, PESTANAS Y DATOS
   ============================================================================= */

.ficha__cabecera {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: clamp(1.1rem, .9rem + 1vw, 1.4rem) clamp(1.1rem, .9rem + 1vw, 1.5rem);
    box-shadow: var(--sombra-chica), var(--filo);
    margin-bottom: 1.25rem;
}
.ficha__retrato {
    width: 132px;
    height: 96px;
    border-radius: var(--radio-chico);
    object-fit: cover;
    background: var(--superficie-2);
    flex: 0 0 auto;
}
.ficha__datos { flex: 1 1 240px; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ficha__titulo { font-family: "Space Grotesk", sans-serif; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }

.pestanas {
    position: relative;
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--borde-suave);
    margin-bottom: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Difumina el borde derecho para avisar que hay mas pestanas. */
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
    position: relative;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: .93rem;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color var(--vel-rapida) ease;
}
.pestanas a::after {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--verde-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--vel) var(--curva);
}
.pestanas a:hover { color: var(--texto); }
.pestanas a:hover::after { transform: scaleX(.6); }
.pestanas a.es-activo { color: var(--verde-600); }
.pestanas a.es-activo::after { transform: scaleX(1); box-shadow: 0 0 12px 0 var(--verde-glow); }

.datos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 1.15rem;
}
.datos-lista div span {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-tenue);
    font-weight: 700;
    margin-bottom: .15rem;
}
.datos-lista div strong { font-weight: 600; font-size: 1rem; }

/* Bloque avanzado plegable: lo importante arriba, el resto a un clic. */
.plegable {
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
    margin-bottom: 1.25rem;
    background: var(--superficie-2);
    transition: border-color var(--vel) ease, box-shadow var(--vel) ease;
}
.plegable[open] { border-color: var(--borde); box-shadow: var(--sombra-chica); }
.plegable > summary {
    cursor: pointer;
    padding: .9rem 1.1rem;
    font-weight: 700;
    font-size: .96rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-radius: var(--radio-chico);
    transition: color var(--vel-rapida) ease;
}
.plegable > summary:hover { color: var(--verde-600); }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after {
    content: "+";
    font-size: 1.25rem;
    color: var(--texto-tenue);
    line-height: 1;
    transition: transform var(--vel) var(--curva-rebote), color var(--vel-rapida) ease;
}
.plegable[open] > summary::after { content: "\2212"; transform: rotate(180deg); color: var(--verde-600); }
.plegable > summary:focus-visible { outline: 2px solid var(--verde-500); outline-offset: -2px; border-radius: var(--radio-chico); }
.plegable__cuerpo { padding: .25rem 1.1rem 1rem; animation: desplegar var(--vel) var(--curva); }
@keyframes desplegar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Sugerencia del registro maestro -------------------------------------- */
.sugerencia {
    border: 1px solid color-mix(in srgb, var(--verde-500) 35%, transparent);
    background: var(--verde-claro);
    border-radius: var(--radio-chico);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: .93rem;
    animation: aparecer var(--vel) var(--curva);
}
.sugerencia strong { display: block; margin-bottom: .2rem; }
.sugerencia--tenue { background: var(--superficie-2); border-color: var(--borde); color: var(--texto-suave); }

/* --- Aviso de limite alcanzado -------------------------------------------- */
.limite { border-color: color-mix(in srgb, var(--ambar) 30%, transparent); background: var(--ambar-claro); }
.limite h2 { color: var(--ambar); }
.limite__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: .9rem;
    margin-top: 1.1rem;
}
.limite__opcion {
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: transform var(--vel) var(--curva), box-shadow var(--vel) var(--curva), border-color var(--vel) ease;
}
.limite__opcion:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--verde-500) 40%, transparent);
    box-shadow: var(--sombra-chica);
}
.limite__precio { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Confirmacion destructiva --------------------------------------------- */
.peligro { border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.peligro h2 { color: var(--rojo); }
.peligro:hover { border-color: color-mix(in srgb, var(--rojo) 55%, transparent); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--rojo) 60%, transparent); }
.peligro:hover::before { display: none; }

/* =============================================================================
   20  GALERIA
   ============================================================================= */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: .9rem;
}
.foto {
    position: relative;
    border-radius: var(--radio-chico);
    overflow: hidden;
    border: 1px solid var(--borde-suave);
    background: var(--superficie-2);
    transition: border-color var(--vel) ease, box-shadow var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.foto:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--borde); }
.foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--vel-lenta) var(--curva);
}
.foto:hover img { transform: scale(1.04); }
.foto__barra { display: flex; gap: .3rem; padding: .45rem; justify-content: space-between; align-items: center; }
.foto__barra button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    color: var(--texto-suave);
    padding: .3rem .45rem;
    border-radius: 6px;
    transition: background-color var(--vel-rapida) ease, color var(--vel-rapida) ease;
}
.foto__barra button:hover { background: var(--superficie); color: var(--texto); }
.foto__barra .es-peligro:hover { color: var(--rojo); background: var(--rojo-claro); }
.foto.es-portada { border-color: var(--verde-500); box-shadow: 0 0 0 1px var(--verde-500), 0 10px 26px -14px var(--verde-glow); }

.zona-subida {
    border: 1px dashed var(--borde);
    border-radius: var(--radio-chico);
    padding: 1.2rem;
    text-align: center;
    background: var(--superficie-2);
    margin-bottom: 1.2rem;
    transition: border-color var(--vel) ease, background-color var(--vel) ease;
}
.zona-subida:hover,
.zona-subida.es-encima {
    border-color: var(--verde-500);
    background: var(--verde-claro);
}
.zona-subida input[type="file"] { margin-bottom: .8rem; }

/* =============================================================================
   21  DOCUMENTOS
   ============================================================================= */

.documento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--borde-suave);
    flex-wrap: wrap;
    transition: background-color var(--vel-rapida) ease;
}
.documento:last-child { border-bottom: 0; padding-bottom: 0; }
.documento:first-child { padding-top: 0; }

.documento__izq { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 240px; }
.documento__izq strong { display: block; font-weight: 700; font-size: .98rem; }
.documento__izq .sutil { display: block; font-size: .86rem; }

.documento__der { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.documento__der .boton { margin-top: 0; }

/* El archivado se ve, pero se ve archivado. */
.documento.es-reemplazado { opacity: .55; }
.documento.es-reemplazado strong { font-weight: 600; }

/* Semaforo a la izquierda de la fila: se lee antes que el texto. */
.documento--vencido    { border-left: 3px solid var(--rojo);  padding-left: .8rem; }
.documento--por_vencer { border-left: 3px solid var(--ambar); padding-left: .8rem; }
/* El vencido pulsa una sola vez al cargar: llama la atencion y se calla. */
.documento--vencido { animation: alerta-una-vez 1.6s var(--curva) 1; }
@keyframes alerta-una-vez {
    0%, 100% { background: transparent; }
    30%      { background: color-mix(in srgb, var(--rojo) 8%, transparent); }
}

/* --- Mantencion cerrada ---------------------------------------------------
   El historial se ve, pero se ve pasado. */
.documento.es-cerrada { opacity: .55; }
.documento.es-cerrada strong { font-weight: 600; }

/* --- Recurrencia ----------------------------------------------------------
   Marca discreta para las que se repiten solas. */
.repite {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--verde-600);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Vista general agrupada por vehiculo ----------------------------------
   Es como estan guardados en la realidad: en la carpeta de cada auto. */
.grupo-vehiculo {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--borde-suave);
}
.grupo-vehiculo__nombre { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.05rem; }
.grupo-vehiculo__resto { margin-left: auto; display: flex; gap: .35rem; align-items: center; }

/* Tira de puntos de estado: se lee de un vistazo cuantos rojos hay. */
.puntos { display: inline-flex; gap: .22rem; align-items: center; }
.puntos i {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--verde-500);
    transition: transform var(--vel-rapida) var(--curva-rebote);
}
.puntos:hover i { transform: scale(1.35); }
.puntos i.es-amarillo { background: var(--ambar); }
.puntos i.es-rojo     { background: var(--rojo); box-shadow: 0 0 8px 0 color-mix(in srgb, var(--rojo) 60%, transparent); }
.puntos i.es-gris     { background: var(--texto-tenue); opacity: .45; }

/* =============================================================================
   22  MEDIDORES
   -----------------------------------------------------------------------------
   En voz baja a proposito: informan, no presionan. Solo se ponen ambar cuando
   de verdad queda poco.
   ============================================================================= */

.medidor { margin-bottom: 1rem; }
.medidor:last-of-type { margin-bottom: 0; }

.medidor__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .4rem;
    font-size: .92rem;
}
.medidor__cabecera span { color: var(--texto-suave); }
.medidor__cabecera strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.medidor__pista {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--superficie-2);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(10, 31, 61, .08);
}
.medidor__relleno {
    position: relative;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-500), var(--verde-400));
    transition: width var(--vel-lenta) var(--curva), background var(--vel) ease;
    min-width: 2px;
}
/* Brillo que recorre la barra: sugiere que el dato esta vivo. */
.medidor__relleno::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-100%);
    animation: recorrer 3.5s ease-in-out infinite;
}
@keyframes recorrer {
    0%, 60% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}
.medidor__relleno.es-lleno { background: linear-gradient(90deg, var(--ambar), color-mix(in srgb, var(--ambar) 70%, #fff)); }

/* =============================================================================
   23  VISOR DE ARCHIVOS
   -----------------------------------------------------------------------------
   Ocupa la pantalla completa, incluida el area segura del notch. Fondo oscuro
   siempre, sin importar el tema: una foto se mira mejor contra negro.
   ============================================================================= */

body.sin-scroll { overflow: hidden; }

.visor {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: rgba(8, 12, 18, .94);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.visor.es-visible { display: block; animation: abrir-visor var(--vel) var(--curva); }
@keyframes abrir-visor {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; }
}

.visor__barra {
    position: absolute;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .8rem;
    padding-left:  max(.8rem, env(safe-area-inset-left));
    padding-right: max(.8rem, env(safe-area-inset-right));
    color: #f2f5f8;
    z-index: 2;
    background: linear-gradient(180deg, rgba(8, 12, 18, .75), transparent);
}
.visor__titulo {
    font-size: .92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .9;
    min-width: 0;
}
.visor__acciones { display: flex; gap: .35rem; flex: 0 0 auto; }

.visor__boton {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #f2f5f8;
    border-radius: 10px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color var(--vel-rapida) ease, transform var(--vel-rapida) var(--curva-rebote), border-color var(--vel-rapida) ease;
}
.visor__boton:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); transform: translateY(-1px); }
.visor__boton:active { transform: translateY(0) scale(.95); }
.visor__boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor__boton:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.visor__boton[hidden] { display: none; }

.visor__lienzo {
    position: absolute;
    inset: 56px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.visor__imagen,
.visor__marco { display: none; }
.visor__imagen.es-visible { display: block; animation: aparecer-foto var(--vel) var(--curva); }
.visor__marco.es-visible  { display: block; }
@keyframes aparecer-foto {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

.visor__imagen {
    max-width: 96vw;
    max-width: 96dvw;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    object-fit: contain;
    transform-origin: center center;
    transition: transform var(--vel-rapida) ease-out;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}
.visor__imagen.es-ampliada    { cursor: grab; transition: none; }
.visor__imagen.es-arrastrando { cursor: grabbing; transition: none; }

/* El PDF lo dibuja el visor del navegador, que ya trae su propio zoom,
   busqueda e impresion. Reimplementar eso seria peor en todos los sentidos. */
.visor__marco { width: 100%; height: 100%; border: 0; background: #fff; }

.visor__paso {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color var(--vel-rapida) ease, transform var(--vel-rapida) var(--curva);
}
.visor__paso:hover { background: rgba(255, 255, 255, .26); }
.visor__paso--antes   { left: .6rem; }
.visor__paso--despues { right: .6rem; }
.visor__paso--antes:hover   { transform: translateY(-50%) translateX(-3px); }
.visor__paso--despues:hover { transform: translateY(-50%) translateX(3px); }
.visor__paso:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor__paso[hidden] { display: none; }

/* La miniatura avisa que se puede abrir. */
.foto a[data-visor] { display: block; cursor: zoom-in; }

/* =============================================================================
   24  CUOTAS DE PAGO
   ============================================================================= */

.cuota {
    display: grid;
    grid-template-columns: 28px 1fr 1fr auto;
    align-items: end;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borde-suave);
}
.cuota:last-child { border-bottom: 0; }
.cuota[hidden] { display: none; }
.cuota .campo { margin-bottom: 0; }

.cuota__numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
    flex: 0 0 auto;
}
.cuota__pagada {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
    margin-bottom: .85rem;
    cursor: pointer;
}
.cuota:has(input[type="checkbox"]:checked) .cuota__numero {
    background: var(--verde-claro);
    color: var(--verde-600);
}

/* --- Cuota pendiente colgando de su documento -----------------------------
   Indentada bajo el documento al que pertenece: no es un documento mas, es
   un pago que le falta a ese. */
.cuota-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-left: 1.1rem;
    padding: .6rem .9rem;
    border-left: 2px solid var(--borde);
    background: var(--superficie-2);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
    font-size: .89rem;
    color: var(--texto-suave);
    margin-bottom: .5rem;
    transition: border-left-color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.cuota-linea:hover { background: color-mix(in srgb, var(--superficie-2) 60%, var(--superficie)); border-left-color: var(--texto-tenue); }
.cuota-linea.es-vencida { border-left-color: var(--rojo); }
.cuota-linea form { margin: 0; }
.cuota-linea .boton { margin-top: 0; }

/* =============================================================================
   25  RESPONSIVE
   -----------------------------------------------------------------------------
   Los tamanos de arriba ya son fluidos (clamp + auto-fit con min()). Aca van
   solo los cambios de estructura, de mayor a menor.
   ============================================================================= */

/* --- Pantallas anchas: mas aire, no mas ancho ----------------------------- */
@media (min-width: 1280px) {
    .contenido { padding-top: 2.25rem; }
}

/* --- Escritorio angosto y tablet horizontal ------------------------------- */
@media (max-width: 1024px) {
    .barra { gap: 1rem; padding-inline: 1.15rem; }
    .barra__nav a { padding: .55rem .65rem; }
}

/* --- Planes en tres columnas solo cuando caben ---------------------------- */
@media (min-width: 700px) {
    .planes { grid-template-columns: repeat(3, 1fr); }
}

/* --- Tablet vertical ------------------------------------------------------- */
@media (max-width: 860px) {
    .ficha__cabecera { gap: 1rem; }
    .pie__enlaces { gap: 1.15rem; }
    .rejilla { gap: .9rem; }
    .tarjetas { gap: .9rem; }
}

/* --- Celular grande y tablet chica ---------------------------------------- */
@media (max-width: 720px) {
    .contenido { padding: 1.25rem 1rem 3rem; }
    .contenido--centrado { padding-top: 1.75rem; }

    .barra { padding: .7rem 1rem; gap: .75rem; }
    /* El menu pasa a una tira que se desliza: no se apila ni se corta. */
    .barra__nav {
        order: 3;
        flex-basis: 100%;
        gap: .15rem;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        margin: 0 -1rem;
        padding: 0 1rem;
        mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
    }
    .barra__nav::-webkit-scrollbar { display: none; }
    .barra__nav a { scroll-snap-align: start; }
    .barra__usuario { margin-left: auto; }

    .pie { padding: 2.25rem 1.25rem 1.75rem; }
    .pie__interior { flex-direction: column; gap: 1.5rem; }
    .pie__base { flex-direction: column; }
    .pie__tag { max-width: none; }

    .ficha__cabecera { flex-direction: column; align-items: stretch; }
    .datos-lista { gap: .9rem; }
    .cinta { padding: .65rem 1rem; font-size: .86rem; }
}

/* --- Celular -------------------------------------------------------------- */
@media (max-width: 620px) {
    .encabezado { align-items: flex-start; }
    .encabezado__acciones { width: 100%; }
    .encabezado__acciones .boton { width: 100%; }
    .encabezado__acciones .boton--chico,
    .encabezado__acciones .boton--mini { width: auto; }

    .ficha__retrato { width: 100%; height: 160px; }

    /* Las cuotas pasan a dos filas: numero fijo y campos apilados. */
    .cuota { grid-template-columns: 28px 1fr; row-gap: .2rem; }
    .cuota__pagada { grid-column: 2; margin-bottom: .4rem; }
    .cuota-linea { margin-left: .5rem; }
    .cuota-linea .fila-acciones { width: 100%; justify-content: space-between; }

    .visor__paso { width: 40px; height: 40px; font-size: 1.3rem; }
    .visor__titulo { max-width: 45vw; }

    .galeria { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: .6rem; }
    .grupo-vehiculo__resto { margin-left: 0; width: 100%; }
    .filtros { gap: .45rem; }
    .chip { padding: .45rem .8rem; font-size: .86rem; }
}

/* --- Celular chico -------------------------------------------------------- */
@media (max-width: 560px) {
    .documento__der { width: 100%; }
    .documento__der .boton { flex: 1; }
    .acciones { flex-direction: column; }
    .acciones .boton { width: 100%; }
}

@media (max-width: 480px) {
    .contenido { padding-inline: .85rem; }
    .barra__nombre { display: none; }
    .barra__usuario { gap: .6rem; }
    .barra__marca { font-size: 1.08rem; }
    .barra__marca img { height: 30px; }

    .tarjetas { grid-template-columns: 1fr; }
    .rejilla { grid-template-columns: 1fr; }
    .limite__opciones { grid-template-columns: 1fr; }

    .extra { gap: .6rem; }
    .extra__info { min-width: 140px; }

    .pasos { font-size: .74rem; gap: .35rem; }
    .pasos__item { min-width: 70px; }

    .plan { padding: 1rem; }
    .resumen { padding: 1rem; }
}

/* --- Muy chico (iPhone SE y similares) ------------------------------------ */
@media (max-width: 380px) {
    .contenido { padding-inline: .7rem; }
    .barra { padding-inline: .75rem; }
    .fila-acciones { gap: .4rem; }
    .fila-acciones .boton { flex: 1 1 100%; }
    .fila-acciones .boton--mini { flex: 0 0 auto; }
    .galeria { grid-template-columns: repeat(2, 1fr); }
    .placa--grande { --placa-tamano: 1.25rem; }
}

/* --- Pantallas bajas: la barra deja de ser pegajosa ------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
    .barra { position: static; }
}

/* =============================================================================
   26  MOVIMIENTO REDUCIDO E IMPRESION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    /* Ademas de detener el tiempo, se quitan los desplazamientos. */
    .tarjeta:hover,
    .vehiculo:hover,
    .plan:hover,
    .boton:hover,
    .chip:hover,
    .foto:hover,
    .limite__opcion:hover { transform: none; }
    .vehiculo:hover .vehiculo__foto img,
    .foto:hover img { transform: none; }
    body::before, body::after { opacity: .45; }
}

/* En papel no hay temas, ni luz, ni hover: solo el dato. */
@media print {
    body { background: #fff; color: #000; display: block; }
    body::before, body::after { display: none; }
    .barra, .pie, .cinta, .selector-tema, .visor, .filtros,
    .encabezado__acciones, .fila-acciones, .acciones, .boton { display: none !important; }
    .contenido { max-width: none; padding: 0; }
    .tarjeta, .vehiculo, .ficha__cabecera {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    a { color: #000; text-decoration: underline; }
    .placa { border-color: #000; box-shadow: none; }
}



/* --- Metricas con color ---------------------------------------------------
   El dashboard pintaba estas tarjetas con style="border-color:var(--rojo)".
   Eso movia el borde pero dejaba la barra lateral verde y el numero del color
   del texto. Con un token por tarjeta, las tres cosas van juntas. */
.tarjeta--metrica {
    --acento-a: var(--verde-400);
    --acento-b: var(--verde-600);
    --acento-texto: var(--texto);
    --acento-glow: var(--verde-glow);
}
.tarjeta--metrica::after { background: linear-gradient(180deg, var(--acento-a), var(--acento-b)); }
.tarjeta--metrica .metrica__valor { color: var(--acento-texto); }
.tarjeta--metrica:hover::after { box-shadow: 0 0 18px 0 var(--acento-glow); }
 
.tarjeta--metrica.es-critica {
    --acento-a: var(--rojo);
    --acento-b: var(--rojo);
    --acento-texto: var(--rojo);
    --acento-glow: color-mix(in srgb, var(--rojo) 55%, transparent);
    border-color: color-mix(in srgb, var(--rojo) 32%, var(--borde-suave));
}
.tarjeta--metrica.es-atenta {
    --acento-a: var(--ambar);
    --acento-b: var(--ambar);
    --acento-texto: var(--ambar);
    --acento-glow: color-mix(in srgb, var(--ambar) 55%, transparent);
    border-color: color-mix(in srgb, var(--ambar) 32%, var(--borde-suave));
}
/* El halo del hover tambien tiene que respetar el color de la tarjeta: una
   tarjeta roja que se ilumina en verde al pasar el mouse dice lo contrario
   de lo que dice el numero. */
.tarjeta--metrica.es-critica:hover,
.tarjeta--metrica.es-atenta:hover {
    border-color: var(--acento-a);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento-a) 25%, transparent),
                0 18px 40px -14px var(--acento-glow);
}
.tarjeta--metrica.es-critica::before,
.tarjeta--metrica.es-atenta::before {
    background: radial-gradient(340px circle at var(--x) var(--y),
        color-mix(in srgb, var(--acento-a) 10%, transparent), transparent 62%);
}
 
/* =============================================================================
   Carrusel de fotos
   -----------------------------------------------------------------------------
   Tematiza Swiper con la paleta de RutaOk. La navegacion y el contador son
   marcado propio (.carrusel__paso, .carrusel__contador), no los elementos por
   defecto de Swiper: asi los botones hablan el mismo idioma que .boton.
 
   Sin JS, .carrusel se queda sin .es-lista y cae a una tira con scroll y snap.
   Se ve distinto, pero se usa igual.
   ============================================================================= */
 
.carrusel { margin-bottom: 1.2rem; }
 
.carrusel__marco {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    background: linear-gradient(150deg, var(--superficie-2), var(--fondo-alt));
    border: 1px solid var(--borde-suave);
    box-shadow: var(--sombra-chica), var(--filo);
    aspect-ratio: var(--carrusel-alto, 16 / 10);
}
 
.carrusel__slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--superficie-2);
}
.carrusel__slide a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.carrusel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* La foto entra apenas mas grande y se asienta: da sensacion de
       profundidad sin mover nada de sitio. */
    transform: scale(1.03);
    transition: transform var(--vel-lenta) var(--curva), filter var(--vel) ease;
}
.carrusel__marco:hover .swiper-slide-active img { transform: scale(1); filter: saturate(1.06); }
 
/* Las fotos que no estan al centro se apagan un poco: el ojo sabe cual es la
   que esta mirando. */
.carrusel__slide:not(.swiper-slide-active) img { filter: brightness(.82) saturate(.9); }
 
.carrusel__marca {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--verde-500), var(--verde-600));
    box-shadow: 0 6px 16px -6px var(--verde-glow);
}
 
/* --- Botones de paso -------------------------------------------------------
   Aparecen al acercar el mouse y se quedan visibles en tactil, donde no hay
   hover que los invoque. */
.carrusel__paso {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(12, 26, 46, .42);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    transition: opacity var(--vel) ease, background-color var(--vel-rapida) ease,
                transform var(--vel-rapida) var(--curva), border-color var(--vel-rapida) ease;
}
.carrusel__paso svg { width: 20px; height: 20px; }
.carrusel__paso--antes   { left: .7rem; }
.carrusel__paso--despues { right: .7rem; }
.carrusel__marco:hover .carrusel__paso,
.carrusel__paso:focus-visible { opacity: 1; }
.carrusel__paso:hover { background: rgba(12, 26, 46, .62); border-color: rgba(255, 255, 255, .4); }
.carrusel__paso--antes:hover   { transform: translateX(-3px); }
.carrusel__paso--despues:hover { transform: translateX(3px); }
.carrusel__paso:active { transform: scale(.92); }
.carrusel__paso:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Swiper agrega esta clase al llegar al extremo cuando no hay bucle. */
.carrusel__paso.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }
 
@media (hover: none), (pointer: coarse) {
    .carrusel__paso { opacity: .85; }
}
 
/* --- Contador --------------------------------------------------------------
   Reemplaza los puntitos de paginacion: con 12 fotos los puntos no se pueden
   contar, un numero si. */
.carrusel__contador {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    z-index: 3;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #eaf1fa;
    background: rgba(12, 26, 46, .5);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}
.carrusel__contador b { color: #fff; font-weight: 700; }
 
/* --- Miniaturas ------------------------------------------------------------ */
.carrusel__miniaturas { margin-top: .55rem; overflow: hidden; }
.carrusel__mini {
    width: 88px;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--borde-suave);
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease,
                transform var(--vel-rapida) var(--curva), opacity var(--vel-rapida) ease;
    opacity: .62;
}
.carrusel__mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carrusel__mini:hover { opacity: .9; transform: translateY(-2px); }
/* Swiper marca la miniatura de la foto que se esta viendo. */
.carrusel__mini.swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--verde-500);
    box-shadow: 0 0 0 1px var(--verde-500), 0 8px 20px -10px var(--verde-glow);
}
 
@media (max-width: 620px) {
    .carrusel__mini { width: 68px; }
    .carrusel__paso { width: 36px; height: 36px; margin-top: -18px; }
    .carrusel__paso svg { width: 17px; height: 17px; }
}
 
/* --- Respaldo sin JS -------------------------------------------------------
   Mientras no corre carrusel.js (o si Swiper no cargo), .es-lista no existe y
   el carrusel se comporta como una tira con scroll y snap. Es el mismo gesto
   que hara despues, sin la libreria. */
.carrusel:not(.es-lista) .carrusel__marco { aspect-ratio: auto; }
.carrusel:not(.es-lista) .swiper-wrapper {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carrusel:not(.es-lista) .swiper-wrapper::-webkit-scrollbar { display: none; }
.carrusel:not(.es-lista) .carrusel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: var(--carrusel-alto, 16 / 10);
}
.carrusel:not(.es-lista) .carrusel__slide img { transform: none; filter: none; }
.carrusel:not(.es-lista) .carrusel__mini { flex: 0 0 auto; opacity: 1; }
.carrusel:not(.es-lista) .carrusel__paso,
.carrusel:not(.es-lista) .carrusel__contador { display: none; }
 
@media (prefers-reduced-motion: reduce) {
    .carrusel__slide img,
    .carrusel__marco:hover .swiper-slide-active img { transform: none; }
    .carrusel__mini:hover { transform: none; }
}
 


 
/* Plan al que no se puede bajar desde esta pantalla. No se esconde: si el plan
   Conductor desapareciera de la lista, alguien que esta en Flota no entenderia
   por que dejo de existir. Se muestra apagado y con el motivo al lado. */
.plan--bloqueado {
    opacity: .55;
    cursor: default;
}
.plan--bloqueado:hover {
    border-color: var(--borde);
    transform: none;
    box-shadow: none;
}
.plan--bloqueado .plan__precio {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.plan--bloqueado a {
    pointer-events: auto;
}
 



/* -----------------------------------------------------------------------------
   Contador de cantidad de los extras
   -------------------------------------------------------------------------- */
/* El campo numerico sigue ahi y sigue siendo el que viaja en el POST. Los
   botones solo lo escriben. Asi el teclado sigue sirviendo para quien prefiere
   escribir 12, y en el telefono no hace falta abrir el teclado numerico para
   pasar de 2 a 3. */
.paso {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fondo-campo, transparent);
}
 
.paso__boton {
    width: 38px;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.paso__boton:hover:not(:disabled) {
    background: color-mix(in srgb, var(--verde-500) 14%, transparent);
}
.paso__boton:disabled {
    opacity: .3;
    cursor: default;
}
 
.paso__campo {
    width: 52px;
    border: 0;
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    border-radius: 0;
    text-align: center;
    background: transparent;
    padding: .5rem 0;
    font-variant-numeric: tabular-nums;
}
.paso__campo:focus {
    outline: 2px solid var(--verde-500);
    outline-offset: -2px;
}
 
/* Las flechitas del navegador sobran: ya hay dos botones al lado. */
.paso__campo::-webkit-outer-spin-button,
.paso__campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.paso__campo[type=number] {
    -moz-appearance: textfield;
}
 
/* Subtotal de la linea. Apagado mientras la cantidad sea cero: un $0 repetido
   en cada fila es ruido, y lo que importa es que salte lo que si esta elegido. */
.extra__subtotal {
    display: block;
    margin-top: .4rem;
    font-size: .95rem;
    color: var(--texto-tenue);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.extra__subtotal.es-activo {
    color: var(--texto);
    font-weight: 600;
}
 
.extra__precio .sutil {
    display: block;
    font-size: .78rem;
}
 
@media (max-width: 640px) {
    .extra__subtotal {
        text-align: left;
    }
}
 




/* Plan recomendado. La diferencia tiene que notarse de reojo, antes de leer:
   quien llega al registro esta decidiendo en segundos, no comparando tablas. */
.plan--destacado {
    border-color: var(--verde-500);
    box-shadow: 0 0 0 1px var(--verde-500), 0 10px 30px -18px var(--verde-500);
}
.plan--destacado .etiqueta {
    background: var(--verde-600);
    color: #fff;
}
 
/* La linea del trial cierra la tarjeta: es la respuesta a "y si no me sirve".
   Separada del resto para que no se lea como una viñeta mas de la lista. */
.plan__trial {
    display: block;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--borde);
    font-size: .85rem;
    color: var(--verde-600);
    font-weight: 600;
}
 
/* Los pasos del registro. Sin esto los tres se ven iguales y no se sabe
   cuantos faltan, que es la primera pregunta de cualquiera en un formulario. */
.pasos {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.pasos__item {
    flex: 1 1 0;
    min-width: 90px;
    padding: .5rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--borde) 35%, transparent);
    color: var(--texto-suave);
    font-size: .85rem;
    text-align: center;
    white-space: nowrap;
}
.pasos__item.es-activo {
    background: color-mix(in srgb, var(--verde-500) 16%, transparent);
    color: var(--verde-600);
    font-weight: 600;
}
 
/* El bloque de empresa aparece y desaparece con el tipo de cuenta. */
.oculto {
    display: none;
}
 
.centrado {
    text-align: center;
}
 
@media (max-width: 640px) {
    .pasos__item {
        font-size: .78rem;
        padding: .45rem .5rem;
    }
}
 
/* -----------------------------------------------------------------------------
   Precios que no se parten
   -------------------------------------------------------------------------- */
/* En la captura "$4.490/mes" salia como "$4.490/m" y "es" en la linea de abajo.
   Algo aguas arriba corta palabras (word-break / overflow-wrap), y en un precio
   eso no es un detalle: un numero partido se lee como un error de la app justo
   en el momento de decidir. Se blinda el precio entero. */
.plan__precio,
.plan__precio span,
.plan__precio small,
.extra__precio,
.extra__precio span,
.extra__precio small,
.plan--simple__precio {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
 
/* -----------------------------------------------------------------------------
   Solo los planes de pago van en tarjetas
   -------------------------------------------------------------------------- */
/* Con tres columnas ninguna alcanzaba a explicarse. Con dos hay espacio para el
   precio, la lista y el trial sin que nada se parta. */
.planes--pago {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
 
@media (max-width: 560px) {
    .planes--pago {
        grid-template-columns: 1fr;
    }
}
 
/* -----------------------------------------------------------------------------
   El plan Gratis, en una linea
   -------------------------------------------------------------------------- */
/* Gratis no compite con los otros dos: es el piso, no una tercera opcion. En
   una fila propia se elige igual de facil, y deja de robarle aire a los planes
   que si hay que comparar. */
.plan--simple {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    margin-top: 1rem;
    border: 1px solid var(--borde);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.plan--simple:hover {
    border-color: var(--verde-500);
}
.plan--simple:has(input:checked) {
    border-color: var(--verde-500);
    background: color-mix(in srgb, var(--verde-500) 8%, transparent);
}
 
.plan--simple__texto {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
}
.plan--simple__texto .sutil {
    font-size: .85rem;
}
 
.plan--simple__precio {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--texto);
}
.plan--simple__precio small {
    font-size: .75rem;
    font-weight: 400;
    color: var(--texto-suave);
}
 
/* La fila simple no lleva la lista de limites de una tarjeta: si esas reglas
   existen en app.css, aca no aplican. */
.plan--simple .plan__lista,
.plan--simple .plan__desc {
    display: none;
}
 
@media (max-width: 480px) {
    .plan--simple {
        align-items: flex-start;
    }
    .plan--simple__precio {
        align-self: center;
    }
}
 



/* -----------------------------------------------------------------------------
   Menu de cuenta en la barra
   -------------------------------------------------------------------------- */
/* Es un <details>, asi que abre y cierra sin JavaScript. El unico JS que hay es
   para cerrarlo al hacer clic afuera, y si falla el menu sigue funcionando: se
   vuelve a apretar y se cierra. */
 
.menu-cuenta {
    position: relative;
}
 
/* El triangulito que Chrome y Safari ponen por defecto sobra: ya hay chevron. */
.menu-cuenta > summary {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s ease;
}
.menu-cuenta > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary::marker { content: ''; }
 
.menu-cuenta > summary:hover {
    background: color-mix(in srgb, var(--borde) 45%, transparent);
}
.menu-cuenta > summary:focus-visible {
    outline: 2px solid var(--verde-500);
    outline-offset: 2px;
}
 
.menu-cuenta > summary svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    opacity: .6;
    transition: transform .15s ease;
}
.menu-cuenta[open] > summary svg {
    transform: rotate(180deg);
}
 
.menu-cuenta__panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 60;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    padding: .45rem;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--superficie);
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .65);
}
 
.menu-cuenta__titulo {
    padding: .5rem .7rem .35rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    /* Un nombre de empresa largo no debe estirar el panel a media pantalla. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.menu-cuenta__panel a {
    padding: .55rem .7rem;
    border-radius: 9px;
    color: var(--texto);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
    transition: background .12s ease;
}
.menu-cuenta__panel a:hover,
.menu-cuenta__panel a:focus-visible {
    background: color-mix(in srgb, var(--verde-500) 14%, transparent);
}
 
.menu-cuenta__sep {
    height: 1px;
    margin: .35rem .5rem;
    background: var(--borde);
}
 
.menu-cuenta__salir {
    color: var(--texto-suave) !important;
}
.menu-cuenta__salir:hover {
    background: color-mix(in srgb, var(--rojo, #c0392b) 14%, transparent) !important;
    color: var(--rojo, #c0392b) !important;
}
 
/* En el telefono el nombre se esconde y queda solo el chevron: la barra ya va
   apretada y el nombre propio no aporta nada a quien esta usando su celular. */
@media (max-width: 560px) {
    .menu-cuenta > summary .barra__nombre {
        display: none;
    }
    .menu-cuenta__panel {
        min-width: 210px;
    }
}
 
/* La regla vieja de .barra__salir queda sin uso: el enlace se movio al menu.
   Si quedaron restos en app.css, no molestan. */
 



   
/* -----------------------------------------------------------------------------
   Documentos legales
   -------------------------------------------------------------------------- */
/* Un texto legal que no se puede leer es lo mismo que no tenerlo. Lo unico que
   necesita es medida de linea corta, aire entre parrafos y jerarquia clara. */
 
.legal {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
 
.legal h2 {
    margin: 2.4rem 0 .8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--borde);
    font-size: 1.15rem;
}
.legal h2:first-of-type {
    border-top: 0;
}
 
.legal h3 {
    margin: 1.6rem 0 .6rem;
    font-size: 1rem;
    color: var(--texto-suave);
}
 
.legal p {
    margin: 0 0 1rem;
}
 
.legal ul {
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}
.legal li {
    margin-bottom: .55rem;
}
 
.legal code {
    padding: .1rem .35rem;
    border-radius: 5px;
    background: color-mix(in srgb, var(--borde) 50%, transparent);
    font-size: .88em;
}
 
/* La tabla de datos tratados. En el telefono se convierte en tarjetas: una
   tabla de tres columnas en 360px es ilegible, y esta es justamente la parte
   que mas conviene que se lea. */
.tabla-legal {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4rem;
    font-size: .93rem;
}
.tabla-legal th {
    text-align: left;
    padding: .6rem .5rem;
    border-bottom: 2px solid var(--borde);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
}
.tabla-legal td {
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}
 
@media (max-width: 640px) {
    .tabla-legal thead {
        display: none;
    }
    .tabla-legal tr {
        display: block;
        padding: .8rem 0;
        border-bottom: 1px solid var(--borde);
    }
    .tabla-legal td {
        display: block;
        border: 0;
        padding: .15rem 0;
    }
    .tabla-legal td:first-child {
        font-weight: 600;
    }
    .tabla-legal td:nth-child(2)::before { content: 'Para: '; color: var(--texto-suave); }
    .tabla-legal td:nth-child(3)::before { content: 'Base: '; color: var(--texto-suave); }
}
 
/* Al imprimir, que no se lleve la barra ni el pie. */
@media print {
    .barra, .pie, .cinta, .fila-acciones { display: none; }
    .legal { max-width: none; }
}




/* El ancla del aviso ("Ver el extra marcado"). Sin esto la barra superior
   queda encima del titulo de la tarjeta al saltar. */
#extras {
    scroll-margin-top: 5rem;
}
 
/* La tarjeta de extras crecio a cuatro lineas por fila: nombre, descripcion,
   "cada uno suma X" y el resultado en vivo. Se declara la columna para que no
   dependa de que el .extra__info ya fuera flex. */
.extra__info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
 
/* "Quedarias con 15 vehiculos. Agregas 1." Apagado mientras no hay cambio, y
   marcado en cuanto la cantidad se mueve de lo contratado: es el unico feedback
   de que el numero del campo es un total y no un "cuantos agrego". */
.extra__resultado {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--texto-suave);
}
 
.extra__resultado.es-activo {
    color: var(--texto);
    font-weight: 600;
}
 
/* Bajar la cantidad no devuelve plata. El aviso aparece solo cuando el campo
   queda por debajo de lo contratado. */
.extra__baja {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--ambar, #b4690e);
    border-left: 2px solid var(--ambar, #b4690e);
    padding-left: .55rem;
    margin-top: .15rem;
}
 
.extra__baja[hidden] {
    display: none;
}
 
/* El extra al que apunta el ?extra= de un aviso de limite. Tiene que saltar a
   la vista despues del scroll: si no, la persona llega a la tarjeta y sigue sin
   saber cual de los cuatro le resuelve el problema. */
.extra.es-destacado {
    position: relative;
    border-color: var(--ambar, #b4690e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ambar, #b4690e) 22%, transparent);
    border-radius: var(--radio, 12px);
}
 
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .extra.es-destacado {
        box-shadow: 0 0 0 2px rgba(180, 105, 14, .22);
    }
}
 
/* Un pulso corto al entrar, no una animacion permanente: llama la atencion una
   vez y despues se queda quieto. */
@media (prefers-reduced-motion: no-preference) {
    .extra.es-destacado {
        animation: extraDestacado 1.6s ease-out 1;
    }
}
 
@keyframes extraDestacado {
    0%   { box-shadow: 0 0 0 0 rgba(180, 105, 14, .55); }
    100% { box-shadow: 0 0 0 2px rgba(180, 105, 14, .22); }
}
 
/* El aviso que explica a que viniste. Va arriba de todo y con acciones dentro,
   asi que necesita un poco mas de aire que un aviso de una linea. */
.aviso--extra .acciones {
    margin-top: .7rem;
}




.lector .rejilla-campos { margin-bottom: .4rem; }
 
/* --- Estado de la lectura ------------------------------------------------- */
.lector__estado {
    margin-top: .8rem;
    font-size: .9rem;
    line-height: 1.45;
}
.lector__estado:empty { margin-top: 0; }
 
.lector__estado--trabajando { color: var(--texto-suave); }
.lector__estado--exito      { color: var(--verde-600); }
.lector__estado--aviso      { color: var(--ambar, #b45309); }
.lector__estado--error      { color: var(--rojo, #dc2626); }
 
/* Un punto que late mientras se lee. El boton deshabilitado solo no alcanza:
   la lectura tarda entre tres y ocho segundos, y sin senal de vida la gente
   aprieta de nuevo. */
.lector__estado--trabajando::before {
    content: "";
    display: inline-block;
    width: .5rem; height: .5rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: currentColor;
    animation: lector-latido 1s ease-in-out infinite;
}
 
@keyframes lector-latido {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}
 
@media (prefers-reduced-motion: reduce) {
    .lector__estado--trabajando::before { animation: none; opacity: .7; }
}
 
/* --- Avisos concretos (patente cruzada, km que retrocede) ----------------- */
.lector__aviso {
    margin-top: .6rem;
    padding: .55rem .75rem;
    border-left: 3px solid var(--ambar);
    background: var(--ambar-claro);
    border-radius: 0 .35rem .35rem 0;
    font-size: .88rem;
    line-height: 1.45;
}
 
/* --- Campos que lleno la lectura ------------------------------------------ */
/* Resaltado que se va solo al tocarlo: mientras esta, dice "esto no lo
   escribiste tu, miralo". Una vez que la persona lo edita o lo enfoca, ya lo
   miro y el resaltado deja de tener trabajo que hacer. */
.campo--leido > input,
.campo--leido > select,
.campo--leido > textarea {
    background: var(--verde-claro);
    border-color: var(--verde-500);
    transition: background .35s ease, border-color .35s ease;
}
 
.campo--leido > input:focus,
.campo--leido > select:focus,
.campo--leido > textarea:focus {
    background: inherit;
}
 
.campo--leido > span::after {
    content: " leido del documento";
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--verde-600);
    margin-left: .4rem;
}
 
/* Dudoso pisa a leido: es mas importante que la persona mire este que sepa que
   el otro salio bien. */
.campo--dudoso > input,
.campo--dudoso > select,
.campo--dudoso > textarea {
    background: var(--ambar-claro);
    border-color: var(--ambar);
}
 
.campo--dudoso > span::after {
    content: " revisa este";
    color: var(--ambar, #b45309);
}
 
/* --- Bloqueado por plan --------------------------------------------------- */
.lector--bloqueado { display: block; }
.lector--bloqueado strong { display: block; margin-bottom: .25rem; }
 
/* --- Boton apagado hasta que haya archivo --------------------------------- */
.lector .boton.es-inactivo {
    opacity: .5;
    pointer-events: none;
}
 



/* ---------------------------------------------------------------------------
   MODO CONDUCCION
   ---------------------------------------------------------------------------
   Verde y no marino: el marino es la app de administrar, y la idea es que a un
   metro de distancia se vea que esta pantalla es otra cosa.

   Los botones crecen porque se aprietan de pie, con una mano, a veces con
   guantes y casi siempre con sol encima. 3rem de alto es el minimo que se
   acierta sin mirar.
   --------------------------------------------------------------------------- */
/* La barra de este modo se rehizo entera como HUD y vive en el bloque 28, al
   final de este archivo. Aca no queda nada: los hijos .barra--conducir__* ya no
   existen en el marcado (core/vistas/layout.php los reemplazo por .hud__*). */

/* --- La pantalla del chofer --- */
.modo-conducir .contenido { max-width: 40rem; }

/* El alto y el tamano de los botones del modo los pone ahora el bloque 28
   (body.modo-conducir .boton), que ademas alcanza a los secundarios. Esta regla
   y la clase .conducir-accion que la acompanaba quedaron sin uso. */

.conducir-saludo {
    font-size: 1.5rem;
    margin: 0 0 .2rem;
}

/* El consejo de transito. Tenue a proposito: esta ahi, no interrumpe. */
.consejo-transito {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: var(--superficie-2);
    border-left: 3px solid #22c55e;
    border-radius: .5rem;
    padding: .7rem .9rem;
    margin: 1.2rem 0 0;
    font-size: .92rem;
    line-height: 1.45;
}
.consejo-transito strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }

/* --- Checklist --- */
.checklist-item {
    padding: .7rem 0;
    border-bottom: 1px solid var(--borde, #e2e8f0);
}
.checklist-item:last-child { border-bottom: 0; }
.checklist-item__titulo { font-weight: 600; }
.checklist-item__ayuda { font-size: .85rem; opacity: .7; display: block; margin-top: .1rem; }

/* Tres botones que ocupan el ancho: se aciertan sin apuntar. */
.checklist-opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin-top: .5rem;
}
.checklist-opciones label {
    display: block;
    text-align: center;
    padding: .55rem .3rem;
    border: 1.5px solid var(--borde, #e2e8f0);
    border-radius: .5rem;
    font-size: .88rem;
    cursor: pointer;
    user-select: none;
}
.checklist-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.checklist-opciones input:checked + span { font-weight: 700; }
.checklist-opciones label:has(input[value="ok"]:checked)          { border-color: #22c55e; background: rgba(34, 197, 94, .12); }
.checklist-opciones label:has(input[value="observacion"]:checked) { border-color: #ef4444; background: rgba(239, 68, 68, .12); }
.checklist-opciones label:has(input[value="no_aplica"]:checked)   { border-color: #94a3b8; background: rgba(148, 163, 184, .15); }

/* La nota aparece sola al marcar observacion. Sin :has (navegador viejo) queda
   siempre visible, que es peor pero no roto. */
.checklist-item__nota { margin-top: .5rem; display: none; }
.checklist-item:has(input[value="observacion"]:checked) .checklist-item__nota { display: block; }

.categoria-titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6;
    margin: 1.1rem 0 .2rem;
}





.papeles{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:680px){.papeles{gap:.75rem;grid-template-columns:1fr 1fr}}
 
.papel{
    display:flex;align-items:center;gap:.85rem;
    padding:.95rem 1rem;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-left:5px solid var(--borde);
    border-radius:var(--radio);
    box-shadow:var(--sombra-chica);
    color:inherit;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform var(--vel-rapida) var(--curva), box-shadow var(--vel-rapida) var(--curva);
}
@media (min-width:420px){.papel{gap:1rem;padding:1.05rem 1.15rem;border-left-width:6px}}
 
/* El hover se queda pegado despues de tocar en un telefono: la tarjeta se ve
   levantada sin que nadie la este apuntando. Solo para mouse. */
@media (hover:hover) and (pointer:fine){
    a.papel:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
}
a.papel:active{transform:scale(.985)}
a.papel:focus-visible{outline:none;box-shadow:var(--anillo)}
 
.papel--vigente{border-left-color:var(--verde-600)}
.papel--por_vencer{border-left-color:var(--ambar)}
.papel--vencido{border-left-color:var(--rojo);background:var(--rojo-claro)}
.papel--sin_vencimiento{border-left-color:var(--borde)}
.papel--falta{border-style:dashed;background:transparent;box-shadow:none;opacity:.8}

/* No es un papel que falte: es uno que al vehiculo todavia no le toca. La
   revision tecnica de un auto nuevo, cubierta por su homologacion. Verde como
   los vigentes -porque el vehiculo esta en regla- y sin la linea cortada de
   papel--falta, que a un metro de distancia es lo unico que se lee. */
.papel--cubierto{border-left-color:var(--verde-600);background:var(--verde-claro);
                 box-shadow:none}
 
.papel__cuerpo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.papel__tipo{font-size:1.02rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
 
/* La fecha es lo unico que se mira a un metro de distancia. */
.papel__vence{font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);font-weight:800;line-height:1.15;
              letter-spacing:.01em;font-variant-numeric:tabular-nums}
.papel--vencido .papel__vence{color:var(--rojo)}
 
.papel__linea{font-size:.86rem;color:var(--texto-suave);overflow-wrap:anywhere;
              display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.papel__nota{font-size:.82rem;color:var(--texto-tenue);overflow-wrap:anywhere}
 
.papel__flecha{flex:0 0 auto;color:var(--texto-tenue);display:flex}
.papel__flecha svg{width:20px;height:20px}
@media (min-width:420px){.papel__flecha svg{width:22px;height:22px}}
 
.papel .boton{flex:0 0 auto;align-self:center;white-space:nowrap}
 
.control-seccion{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
                 color:var(--texto-tenue);margin:1.2rem 0 .7rem}



                 /* =============================================================================
   27  MODO RUTA  —  la pantalla del chofer cuando hay una ruta abierta
   =============================================================================
   Pegar TAL CUAL al final de assets/css/app.css y subir la version del <link>
   en layout.php (?v=10 -> ?v=11).

   -----------------------------------------------------------------------------
   POR QUE SE APAGA LA PANTALLA
   -----------------------------------------------------------------------------
   El chofer no mira esta pantalla: la ojea, de pie, con el telefono en una mano.
   La unica pregunta que tiene que contestarse en medio segundo es "tengo algo
   abierto o no". Un borde verde de cuatro pixeles no contesta eso; un cambio de
   toda la pantalla si.

   Se hace cambiando SOLO los tokens, no las reglas. Tarjetas, botones, papeles,
   insignias y avisos siguen siendo los mismos de siempre y se re-tinan solos.
   Eso significa que cualquier cosa que agregues manana a la pantalla del chofer
   queda bien en modo ruta sin que la toques.

   Y se aplica sobre [data-ruta="abierta"], no sobre .modo-conducir: la pantalla
   del chofer SIN ruta abierta se ve como siempre. El negro no es "la seccion del
   chofer", es "estas andando". Si estuviera siempre, dejaria de significar algo.
   ============================================================================= */

body[data-ruta="abierta"] {
    --fondo:         #05090b;
    --fondo-alt:     #0a1013;
    --superficie:    #0f1619;
    --superficie-2:  #151e22;
    --borde:         #222e34;
    --borde-suave:   #1a2429;

    --texto:         #f3f8f5;
    --texto-suave:   #a6b4ae;
    --texto-tenue:   #6d7b76;

    --verde-600:     #16a34a;
    --verde-500:     #22c55e;
    --verde-400:     #4ade80;
    --verde-glow:    rgba(74, 222, 128, .55);
    --verde-claro:   rgba(74, 222, 128, .12);

    --rojo:          #ff8a8a;
    --rojo-claro:    rgba(255, 138, 138, .12);
    --ambar:         #f3c583;
    --ambar-claro:   rgba(243, 197, 131, .12);

    --sombra:        0 1px 2px rgba(0, 0, 0, .55), 0 24px 48px -22px rgba(0, 0, 0, .9);
    --sombra-chica:  0 1px 3px rgba(0, 0, 0, .5);
    --sombra-alta:   0 2px 4px rgba(0, 0, 0, .5), 0 32px 64px -26px rgba(0, 0, 0, .95);
    --anillo:        0 0 0 4px rgba(74, 222, 128, .28);
    --filo:          inset 0 1px 0 rgba(255, 255, 255, .05);
    --filo-boton:    inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .3);
    --destello:      rgba(255, 255, 255, .18);
    --pulido:        rgba(255, 255, 255, .1);

    /* La luz ambiental deja de ser decorativa y pasa a ser el resplandor verde
       del estado. Baja y al centro, como el brillo de un tablero encendido. */
    --luz-a:         rgba(34, 197, 94, .13);
    --luz-b:         rgba(34, 197, 94, .05);
    --luz-opacidad:  1;

    color-scheme: dark;
}

/* La barra de arriba tambien se apaga: el degradado verde brillante encima de
   una pantalla negra la convertia en lo mas luminoso de todo, justo el lugar
   donde no hay ninguna accion. */
/* El HUD en modo ruta tambien se apaga. Ver el bloque 28 al final. */

/* El pie de marca no pinta nada aca abajo: el chofer no va a leer los terminos
   con el motor andando, y en negro se lee como si la pagina siguiera. */
body[data-ruta="abierta"] .pie { opacity: .35; }


/* -----------------------------------------------------------------------------
   LA TARJETA VIVA
   -----------------------------------------------------------------------------
   Ocupa la primera pantalla completa y no comparte el espacio con nada. Es la
   respuesta a la unica pregunta que trae el chofer.
   ----------------------------------------------------------------------------- */
.ruta-viva {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(34, 197, 94, .18) 0%, transparent 62%),
        var(--superficie);
    border: 1px solid rgba(74, 222, 128, .3);
    border-radius: var(--radio-grande, 26px);
    padding: 1.5rem 1.35rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, .07), 0 30px 60px -30px rgba(0, 0, 0, .95);
}

/* Filo encendido arriba: la linea que respira. Es lo unico que se mueve en toda
   la pantalla, y por eso se ve. */
.ruta-viva::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--verde-400), transparent);
    animation: rok-ruta-respira 3.4s ease-in-out infinite;
}

@keyframes rok-ruta-respira {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

.ruta-viva__estado {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--verde-400);
}

.ruta-viva__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--verde-400);
    box-shadow: 0 0 0 0 var(--verde-glow);
    animation: rok-ruta-latido 2.4s ease-out infinite;
    flex: 0 0 auto;
}

@keyframes rok-ruta-latido {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* El reloj. Es el numero mas grande de la aplicacion entera, a proposito: es
   el dato que hace que el chofer se acuerde de cerrar. */
.ruta-viva__reloj {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(2.9rem, 2rem + 4.5vw, 4.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    margin: .7rem 0 .2rem;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}
.ruta-viva__reloj small {
    font-size: .34em;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--texto-suave);
    margin-left: .18em;
}

.ruta-viva__desde {
    color: var(--texto-suave);
    font-size: .95rem;
    margin: 0 0 1.15rem;
}

/* Cada respuesta de la tarjeta va en su propio bloque, separada por una linea.
   El orden es el del trabajo -a donde vas, que te falta, con que saliste- y la
   linea es lo que hace que se lean como pasos y no como una lista de datos.

   La linea vive aca y ya no en cada elemento: antes la traia .ruta-viva__vehiculo
   y por eso el vehiculo tenia que ir siempre en el mismo lugar. */
.ruta-viva__bloque {
    margin: 1.15rem 0 0;
    padding-top: 1.05rem;
    border-top: 1px solid var(--borde-suave);
}

/* El titulito de cada bloque. En mayusculas y chico: nombra el bloque sin
   competir con lo que hay adentro, que es lo que el chofer viene a leer. */
.ruta-viva__titulo {
    display: block;
    margin: 0 0 .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

/* A DONDE VAS. Es lo segundo mas grande de la tarjeta despues del reloj, y esa
   es toda la idea: el chofer viene de contar como salio y lo que necesita ahora
   es la calle, no el boton de cerrar. Se lee de pie, con el telefono en una mano
   y el sol encima. */
.ruta-viva__donde {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--texto);
}
.ruta-viva__comuna {
    margin: .2rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texto-suave);
}
/* La referencia -"entrar por porton 3"- y el horario en que reciben. Chico,
   porque se lee una vez antes de bajarse, pero legible: es lo que evita el
   viaje perdido. */
.ruta-viva__ref {
    margin: .45rem 0 0;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--texto-suave);
}

.ruta-viva__vehiculo {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.ruta-viva__alias { font-weight: 700; }

.ruta-viva__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: .7rem 0 0;
    color: var(--texto-suave);
    font-size: .92rem;
}
.ruta-viva__datos strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Las paradas de la ruta que se esta haciendo, adentro de la tarjeta negra.

   Antes el chofer andando veia el reloj, la patente y un solo boton: "Terminar
   ruta". Para saber cuantas entregas le quedaban tenia que bajar, buscar su
   trabajo en la lista de abajo y leer una barra de 6px.

   Ahora la cuenta esta arriba y el boton que sigue el trabajo -marcar- va antes
   que el que lo cierra. Ofrecerle primero "Terminar" al que lleva 3 de 12 es
   ofrecerle cerrar antes de tiempo. */
.ruta-viva__paradas .c-mini-avance { margin: 0; }
.ruta-viva__paradas .c-mini-avance__barra { height: 8px; background: rgba(255,255,255,.12); }
.ruta-viva__paradas .c-mini-avance__txt { font-size: 1rem; color: var(--texto); }
.ruta-viva__paradas .ruta-viva__accion { margin-top: .9rem; }

/* El mapa adentro de la tarjeta negra. Es la misma barra de avance de arriba
   pero puesta sobre la ciudad, que es como el chofer piensa lo que le queda: no
   en "3 de 12" sino en "me falta todo el sector norte".

   El borde claro lo despega del negro: sin el, los cuadraditos del mapa -que
   siempre son claros- flotan como un recorte pegado encima. */
.ruta-viva__mapa { margin: .95rem 0 0; }
.ruta-viva__mapa .geo-mapa {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
}

/* El boton grande de la tarjeta viva: ancho completo, alto de pulgar. Hoy el
   unico que queda adentro es el de marcar las paradas; el de cerrar se fue al
   final de la pagina (ver .ruta-cierre). */
.ruta-viva__accion {
    display: block;
    width: 100%;
    margin: 1.3rem 0 0;
    min-height: 3.6rem;
    font-size: 1.1rem;
    text-align: center;
}


/* -----------------------------------------------------------------------------
   AL TERMINAR
   -----------------------------------------------------------------------------
   ABAJO DEL TODO DE LA PAGINA, no adentro de la tarjeta viva. Es el ultimo
   bloque que el chofer encuentra bajando, y ahi es donde cierra el circulo con
   la barra pegada al borde: mientras baja lo acompana la barra, y cuando llega
   hasta aca la barra se apaga sola -ruta.js observa el boton de este bloque- y
   en su lugar queda esto, que ademas explica.

   La regla que ordena todo esto es simple: mientras quede pantalla por delante,
   cerrar no es una opcion que haya que ofrecer.
   ----------------------------------------------------------------------------- */
.ruta-cierre {
    margin: 1.6rem 0 0;
    padding: 1.15rem 1.25rem 1.3rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--c-radio, 18px);
}

/* CON TODAS LAS PARADAS MARCADAS SE ENCIENDE. Es el unico momento en que la
   pantalla empuja a cerrar, y tiene que verse desde el asiento: hasta ahi el
   chofer estaba trabajando y cerrar era una salida de emergencia; desde ahi es
   lo unico que le falta hacer. */
.ruta-cierre--listo {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(34, 197, 94, .16) 0%, transparent 70%),
        var(--superficie);
    border-color: rgba(74, 222, 128, .34);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, .08);
}

.ruta-cierre__titulo {
    display: block;
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.ruta-cierre--listo .ruta-cierre__titulo { color: var(--verde-400); }

.ruta-cierre__que {
    margin: 0;
    color: var(--texto-suave);
    font-size: .95rem;
    line-height: 1.45;
}
.ruta-cierre--listo .ruta-cierre__que { color: var(--texto); }

.ruta-cierre__accion {
    display: block;
    width: 100%;
    margin: .9rem 0 0;
    min-height: 3.6rem;
    font-size: 1.1rem;
    text-align: center;
}

/* Descartar es texto, no boton. Se puede hacer, no se ofrece. */
.ruta-cierre__descartar {
    display: block;
    width: 100%;
    margin: .85rem 0 0;
    padding: .45rem;
    background: none;
    border: 0;
    color: var(--texto-tenue);
    font: inherit;
    font-size: .88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ruta-cierre__descartar:hover { color: var(--texto-suave); }

.ruta-cierre__nota {
    display: block;
    margin: .9rem 0 0;
    color: var(--texto-tenue);
    font-size: .82rem;
    line-height: 1.5;
}


/* -----------------------------------------------------------------------------
   LA BARRA DE ABAJO
   -----------------------------------------------------------------------------
   Aparece SOLO cuando el boton de terminar ya se fue de la pantalla. Mientras
   se ve el de la tarjeta, dos botones iguales serian ruido; cuando el chofer
   bajo a mirar sus papeles, es lo unico que lo devuelve.

   La agrega ruta.js con .es-visible; sin JavaScript no aparece nunca y la
   pantalla sigue funcionando con el boton de la tarjeta.
   ----------------------------------------------------------------------------- */
.ruta-pie {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 1.5rem -1rem -1rem;
    padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--fondo) 55%, transparent);
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
.ruta-pie.es-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ruta-pie .boton {
    width: 100%;
    min-height: 3.4rem;
    font-size: 1.05rem;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9);
}
.ruta-pie__reloj {
    font-variant-numeric: tabular-nums;
    opacity: .85;
    font-weight: 600;
}


/* -----------------------------------------------------------------------------
   LAS TARJETAS DE VEHICULO, CON RUTA ABIERTA
   -----------------------------------------------------------------------------
   El vehiculo con el que anda queda marcado y su boton grande desaparece: ya
   hay uno arriba y no hacen falta dos "terminar ruta" en la misma pantalla.
   Los otros vehiculos siguen ofreciendo "iniciar", porque cambiar de camion a
   media jornada es normal y no hay que pedirle permiso a nadie.
   ----------------------------------------------------------------------------- */
.conducir-vehiculo--activo {
    border-color: rgba(74, 222, 128, .32);
    box-shadow: var(--sombra-chica), 0 0 0 1px rgba(74, 222, 128, .12);
}

.conducir-vehiculo__cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 .35rem;
}
.conducir-vehiculo__titulo { margin: 0; font-size: 1.15rem; }

.conducir-vigencia {
    color: var(--texto-tenue);
    font-size: .88rem;
    margin: 0 0 .9rem;
}

.conducir-seccion {
    display: block;
    margin: 1.35rem 0 .7rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

/* .conducir-acciones la reemplazo .c-acciones en el bloque 28: misma idea, pero
   con una sola accion principal ancha en vez de dos al lado, que era la forma
   mas rapida de que el chofer apretara la equivocada. */


/* -----------------------------------------------------------------------------
   AJUSTES GENERALES DE LA PANTALLA DEL CHOFER
   ----------------------------------------------------------------------------- */
.conducir-saludo { letter-spacing: -.02em; }

/* El consejo, en negro, no puede tener fondo gris claro. */
body[data-ruta="abierta"] .consejo-transito {
    background: var(--superficie-2);
    border-left-color: var(--verde-500);
    color: var(--texto-suave);
}

/* Menos movimiento: se apaga todo lo que late. El estado se sigue entendiendo
   por el color y por el reloj, que son los que llevan la informacion. */
@media (prefers-reduced-motion: reduce) {
    .ruta-viva::before,
    .ruta-viva__punto { animation: none; }
    .ruta-pie { transition: none; }
}









/* -----------------------------------------------------------------------------
   EL BLOQUE
   ----------------------------------------------------------------------------- */
.bloque { margin: 0 0 2rem; }
 
.bloque__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin: 0 0 .85rem;
}
 
.bloque__titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -.01em;
}
 
/* La linea que dice para que sirve la seccion. No es relleno: es lo unico que
   hace que alguien que entra por segunda vez en tres meses entienda que esta
   mirando sin tener que deducirlo del contenido.
 
   Se limita a 62 caracteres de ancho porque una explicacion que cruza toda la
   pantalla de un monitor de 27 pulgadas no se lee: se saltea. */
.bloque__ayuda {
    margin: .3rem 0 0;
    max-width: 62ch;
    color: var(--texto-tenue);
    font-size: .89rem;
    line-height: 1.5;
}
 
/* El contador pegado al titulo. Dice cuantos hay sin que haya que contarlos, y
   en critico avisa que ademas esperan algo. */
.bloque__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1px solid var(--borde-suave);
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.bloque__contador--critico {
    background: var(--rojo-claro);
    border-color: color-mix(in srgb, var(--rojo) 30%, transparent);
    color: var(--rojo);
}
 
/* El punto que late, para "esta pasando ahora". Mismo gesto que la barra del
   chofer: si en un lado significa "en vivo", en el otro no puede significar
   otra cosa. */
.punto-vivo {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--verde-500);
    flex: 0 0 auto;
    animation: rok-ruta-latido 2.4s ease-out infinite;
}
 
 
/* -----------------------------------------------------------------------------
   LA FILA
   -----------------------------------------------------------------------------
   Reemplaza a `.documento` cuando lo que se lista no es un documento. Comparte
   su idea (izquierda / derecha) pero agrega la columna de hora y una tercera
   linea para la cita textual, que es lo que dijo una persona y no puede
   quedar con el mismo peso que un dato del sistema.
   ----------------------------------------------------------------------------- */
.fila {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--borde-suave);
}
.fila:last-child { border-bottom: 0; padding-bottom: 0; }
.fila:first-child { padding-top: 0; }
 
.fila__hora {
    flex: 0 0 auto;
    min-width: 3.1rem;
    padding-top: .1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .92rem;
    color: var(--texto-suave);
}
 
.fila__cuerpo { flex: 1 1 auto; min-width: 0; }
 
.fila__titulo {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}
.fila__titulo a { color: inherit; text-decoration: none; }
.fila__titulo a:hover { text-decoration: underline; }
 
.fila__detalle {
    display: block;
    margin-top: .12rem;
    color: var(--texto-tenue);
    font-size: .87rem;
    line-height: 1.45;
}
 
/* Lo que escribio una persona, en cursiva y con comillas. Se distingue del
   detalle a proposito: "la luz derecha no prende" es un testimonio, y leerlo
   con el mismo gris que "3 fotos" le quita todo el peso que tiene. */
.fila__cita {
    display: block;
    margin-top: .25rem;
    color: var(--texto-suave);
    font-size: .89rem;
    font-style: italic;
    line-height: 1.45;
}
 
.fila__der {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
    padding-top: .05rem;
}
 
/* Salio / Volvio. Dos palabras que hacen que la lista se lea de un vistazo sin
   tener que mirar la hora de cada linea. */
.fila__verbo {
    display: inline-block;
    margin-right: .35rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: .08em;
}
.fila__verbo--salida  { color: var(--verde-600); }
.fila__verbo--llegada { color: var(--texto-tenue); }
 
/* --- Variantes --- */
 
/* Esta pasando ahora. */
.fila--viva {
    border-left: 3px solid var(--verde-500);
    padding-left: .8rem;
    margin-left: -.8rem;
}
 
/* Espera una respuesta. */
.fila--pide {
    border-left: 3px solid var(--rojo);
    padding-left: .8rem;
    margin-left: -.8rem;
}
 
/* Sigue estando, pero ya no participa. */
.fila--apagada { opacity: .55; }
 
 
/* -----------------------------------------------------------------------------
   SEPARADOR DE DIA
   -----------------------------------------------------------------------------
   "Hoy", "Ayer", o la fecha. Es lo que hace que una lista ordenada por fecha
   se lea como una linea de tiempo y no como veinte filas seguidas.
   ----------------------------------------------------------------------------- */
.dia-sep {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.3rem 0 .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.dia-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde-suave);
}
.dia-sep:first-child { margin-top: 0; }
.dia-sep a { color: inherit; text-decoration: none; }
.dia-sep a:hover { color: var(--texto-suave); text-decoration: underline; }
 
 
/* -----------------------------------------------------------------------------
   METRICAS CLICKEABLES Y APAGADAS
   -----------------------------------------------------------------------------
   Un contador que no lleva a ninguna parte obliga a buscar a mano lo que acaba
   de anunciar, asi que ahora son enlaces.
 
   Y el cero se apaga: cuatro tarjetas encendidas donde tres dicen cero le
   quitan toda la fuerza a la que dice tres. Un cero es una buena noticia y las
   buenas noticias no necesitan color.
   ----------------------------------------------------------------------------- */
a.tarjeta--metrica {
    display: block;
    color: inherit;
    text-decoration: none;
}
a.tarjeta--metrica:focus-visible { outline: none; box-shadow: var(--anillo); }
 
.tarjeta--metrica.es-apagada {
    --acento-a: var(--borde);
    --acento-b: var(--borde);
    --acento-texto: var(--texto-tenue);
    --acento-glow: transparent;
}
.tarjeta--metrica.es-apagada .metrica__titulo { color: var(--texto-tenue); }
 
 
/* -----------------------------------------------------------------------------
   RESPONSIVE
   -----------------------------------------------------------------------------
   Bajo 620px la fila se apila: la columna de la derecha pasa abajo y la hora
   se mete en la primera linea. Mantener tres columnas en un telefono deja el
   nombre en dos caracteres por linea.
   ----------------------------------------------------------------------------- */
@media (max-width: 620px) {
    .fila {
        flex-wrap: wrap;
        gap: .5rem .7rem;
    }
    .fila__hora {
        min-width: 0;
        order: -1;
    }
    .fila__cuerpo { flex: 1 1 60%; }
    .fila__der {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: .2rem;
    }
    .bloque__cabecera { align-items: flex-start; }
    .bloque__cabecera .filtros { width: 100%; }
}
 
@media (prefers-reduced-motion: reduce) {
    .punto-vivo { animation: none; }
}
 




 
/* La insignia de la cabecera, junto a la patente. Es un enlace al bloque de
   abajo, asi que no puede parecer texto muerto ni cambiar de color al pasar el
   mouse: la insignia ya lleva su propio color de estado. */
.ficha__luz {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ficha__luz:hover { opacity: .82; }
.ficha__luz:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 999px; }
 
 
/* La tarjeta contenedora. Ambar y no roja: aunque la luz sea de las graves, el
   vehiculo esta andando y el owner esta leyendo esto sentado. El rojo se
   reserva para las filas de adentro que de verdad no aguantan. */
.tarjeta--luz {
    border-color: color-mix(in srgb, var(--ambar) 35%, var(--borde-suave));
    box-shadow: var(--sombra-chica), 0 0 0 1px color-mix(in srgb, var(--ambar) 12%, transparent);
}
 
 
/* --- Cada luz --- */
.luz-item {
    padding: 1rem 0 .2rem;
    border-top: 1px solid var(--borde-suave);
    margin-top: .9rem;
}
.luz-item:first-of-type {
    border-top: 0;
    margin-top: .4rem;
    padding-top: .4rem;
}
 
/* La barra roja al costado solo para las que no conviene postergar
   (temperatura, presion de aceite, frenos, bateria). Es la unica diferencia
   visual entre severidades dentro del bloque, y alcanza. */
.luz-item--critica {
    border-left: 3px solid var(--rojo);
    padding-left: .85rem;
    margin-left: -.85rem;
}
 
.luz-item__cabecera {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}
 
.luz-item__nombre {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
 
/* Que significa la luz. Es el texto que mas se va a leer de todo el bloque, asi
   que va con el color del cuerpo y no en gris tenue: no es un pie de pagina. */
.luz-item__que {
    margin: 0 0 .5rem;
    color: var(--texto-suave);
    font-size: .94rem;
    line-height: 1.55;
    max-width: 68ch;
}
 
/* De donde salio el aviso: quien subio la foto, cuando, cuantas veces. Esto SI
   es secundario -es la trazabilidad, no la noticia- y va tenue. */
.luz-item__origen {
    margin: 0;
    color: var(--texto-tenue);
    font-size: .87rem;
    line-height: 1.5;
}
.luz-item__origen strong { color: var(--texto-suave); font-weight: 600; }
 
/* La linea del gasto. Separada del resto con un filete tenue porque contesta
   una pregunta distinta a la de la luz: no es "que le pasa al auto" sino "y
   esto cuanto me va a costar anotar". */
.luz-item__gasto {
    margin: .8rem 0 .2rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--borde-suave);
    color: var(--texto-tenue);
    font-size: .87rem;
    line-height: 1.5;
}
 
 
/* En movil los botones se apilan a ancho completo: cuatro botones chicos en
   una fila de 380px quedan de dos caracteres cada uno. */
@media (max-width: 520px) {
    .luz-item .fila-acciones {
        flex-direction: column;
        align-items: stretch;
    }
    .luz-item .fila-acciones .boton,
    .luz-item .fila-acciones form {
        width: 100%;
    }
    .luz-item .fila-acciones form .boton {
        width: 100%;
    }
}





.luz-icono {
    width: 1em;
    height: 1em;
    display: block;
}
 
 
/* -----------------------------------------------------------------------------
   EN LA TARJETA DEL LISTADO
   -----------------------------------------------------------------------------
   Va en la cinta de la foto, junto a "En ruta". Con fondo propio y no suelto
   sobre la imagen: una portada clara dejaria el icono ambar invisible, y la
   mitad de los vehiculos tienen foto.
   ----------------------------------------------------------------------------- */
.vehiculo__luz {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 19px;
    background: var(--superficie);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
 
/* Ambar para "revisar", rojo para "no conviene esperar". Son los mismos dos
   niveles de todo el modulo: si aca significaran otra cosa, el owner tendria
   que aprender dos escalas. */
.vehiculo__luz--atencion { color: var(--ambar); }
.vehiculo__luz--critica  { color: var(--rojo); }
 
/* El contador cuando hay mas de una luz prendida en el mismo vehiculo. */
.vehiculo__luz-mas {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--superficie);
}
 
 
/* -----------------------------------------------------------------------------
   EN EL BLOQUE DE LA FICHA
   ----------------------------------------------------------------------------- */
.luz-item__icono {
    display: inline-flex;
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}
.luz-item__icono--atencion { color: var(--ambar); }
.luz-item__icono--critica  { color: var(--rojo); }
 
 
/* -----------------------------------------------------------------------------
   LA LINEA DE TIEMPO DEL KILOMETRAJE
   -----------------------------------------------------------------------------
   Reemplaza a `.resumen__linea`, que era una fila de dos columnas: fecha a la
   izquierda, numero a la derecha. Servia mientras solo hubiera lecturas; ahora
   cada fila tiene ademas de donde salio, cuando se anoto y, si es una luz, su
   icono.
   ----------------------------------------------------------------------------- */
.hito {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--borde-suave);
}
.hito:last-of-type { border-bottom: 0; }
 
.hito__cuerpo { flex: 1 1 auto; min-width: 0; }
 
.hito__titulo {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}
 
.hito__detalle {
    display: block;
    margin-top: .1rem;
    color: var(--texto-tenue);
    font-size: .85rem;
    line-height: 1.45;
}
 
.hito__km {
    flex: 0 0 auto;
    font-size: 1.02rem;
    white-space: nowrap;
}
 
/* El kilometraje que leyo la IA y nadie confirmo. Va en tenue y con ~ delante:
   no puede tener la misma cara que una lectura que alguien escribio o aprobo,
   porque no vale lo mismo. */
.hito__km--leido {
    color: var(--texto-tenue);
    font-weight: 600;
    cursor: help;
}
 
/* La fila de una luz. El icono cuadrado a la izquierda es lo que hace que se
   distinga de una lectura de un vistazo, sin leer el texto. */
.hito__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 18px;
    background: var(--superficie-2);
}
.hito__icono--atencion { color: var(--ambar); }
.hito__icono--critica  { color: var(--rojo); }
 
.hito--luz .hito__titulo { color: var(--texto); }
 
/* Ya revisada: sigue en el historial -es justo lo que le da valor- pero
   apagada, porque no pide nada. */
.hito--luz-cerrada { opacity: .6; }
.hito--luz-cerrada .hito__icono { color: var(--texto-tenue); }
 
 
@media (max-width: 520px) {
    .hito { gap: .6rem; }
    .hito__km { font-size: .95rem; }
}
 




.luz-icono {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: middle;
 
    /* ?v=: la hoja crecio de 7 a 16 celdas el 6-oct-2026 y el navegador tenia
       la vieja cacheada para siempre. */
    background-image: url("../img/iconos-tablero.png?v=16");
    background-repeat: no-repeat;

    /* 16 celdas de ancho, 1 de alto. */
    background-size: 1600% 100%;

    /* Celda 0 -> 0%, celda 15 -> 100%. Se reparte entre los 15 saltos que hay
       entre las 16 celdas, por eso el divisor es 15 y no 16. */
    background-position: calc(var(--celda, 0) * (100% / 15)) center;
}

/* Las otras dos hojas, mismo mecanismo (core/lib/fuera_servicio.lib.php):
   el estado del vehiculo (choco, taller, grua...) y lo que reporta el GPS.
   9 celdas cada una. */
.estado-icono,
.gps-icono {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 900% 100%;
    background-position: calc(var(--celda, 0) * (100% / 8)) center;
}
.estado-icono { background-image: url("../img/iconos-estado.png?v=1"); }
.gps-icono    { background-image: url("../img/iconos-gps.png?v=1"); }
 
 
/* -----------------------------------------------------------------------------
   LOS CUATRO CONTENEDORES
   -----------------------------------------------------------------------------
   Cada pantalla necesita el icono a un tamano distinto, y como .luz-icono mide
   1em, basta con que el contenedor fije su font-size. Ninguno repite la url ni
   la posicion.
   ----------------------------------------------------------------------------- */
 
/* --- Tarjeta del listado de vehiculos --- */
/* Con fondo propio y no suelto sobre la foto: media flota tiene portada clara y
   ahi el amarillo del check engine desaparece. */
.vehiculo__luz {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 22px;
    background: var(--superficie);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
 
/* -----------------------------------------------------------------------------
   LA TIRA DE ICONOS
   -----------------------------------------------------------------------------
   Hasta siete, uno por problema abierto. Antes se mostraba solo el peor con un
   "+2" al lado, y eso obligaba a entrar a la ficha para saber cuales eran los
   otros dos: el punto de un icono es justamente ahorrar ese viaje.
 
   wrap-reverse y direccion inversa: si no caben en una linea, los que se van a
   la segunda son los MENOS graves, porque el orden viene con las criticas
   primero y la fila de arriba es la que se lee.
   ----------------------------------------------------------------------------- */
.vehiculo__luces,
.ficha__luces {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    max-width: 100%;
}
 
/* Sobre la foto de la ficha, arriba a la derecha. */
.ficha__retrato-caja {
    position: relative;
    display: block;
    flex: 0 0 auto;
}
.ficha__luces {
    position: absolute;
    top: .6rem;
    right: .6rem;
    max-width: calc(100% - 1.2rem);
}
.ficha__luces .vehiculo__luz { text-decoration: none; }
.ficha__luces .vehiculo__luz:hover { transform: translateY(-1px); }
 
/* El contador viejo: se conserva la regla por si algun marcado lo sigue
   escribiendo, pero ya no se usa en ninguna pantalla. */
.vehiculo__luz-mas {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--superficie);
}
 
/* --- Bloque de la ficha del vehiculo --- */
.luz-item__icono {
    display: inline-flex;
    align-items: center;
    font-size: 1.7rem;
    line-height: 1;
    flex: 0 0 auto;
}
 
/* --- Dashboard --- */
/* Mas chico: aca compite con filas de vencimientos y no tiene que gritar mas
   fuerte que un documento vencido, solo distinguirse de el. */
.dash-luz {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: .1rem;
    border-radius: 8px;
    font-size: 20px;
    background: var(--superficie-2);
}
 
/* --- Historial de kilometraje --- */
.hito__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 21px;
    background: var(--superficie-2);
}
 
/* Las clases de severidad se conservan porque el marcado ya las escribe, pero
   ahora solo tinen el FONDO, nunca el simbolo. Muy leve: el color del icono ya
   dice la urgencia, y un fondo saturado detras de un simbolo saturado no deja
   leer ninguno de los dos. */
.vehiculo__luz--critica,
.dash-luz--critica,
.hito__icono--critica  { background: color-mix(in srgb, var(--rojo) 12%, var(--superficie)); }
.vehiculo__luz--atencion,
.dash-luz--atencion,
.hito__icono--atencion { background: color-mix(in srgb, var(--ambar) 14%, var(--superficie)); }
 
 
/* -----------------------------------------------------------------------------
   EL BLOQUE DE LA FICHA
   ----------------------------------------------------------------------------- */
 
/* La insignia de la cabecera, junto a la patente. Es un enlace al bloque de
   abajo, asi que no puede parecer texto muerto. */
.ficha__luz {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ficha__luz:hover { opacity: .82; }
.ficha__luz:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 999px; }
 
/* Ambar y no roja aunque la luz sea grave: el vehiculo esta andando y el owner
   esta leyendo esto sentado. El rojo se reserva para las filas de adentro que
   de verdad no aguantan. */
.tarjeta--luz {
    border-color: color-mix(in srgb, var(--ambar) 35%, var(--borde-suave));
    box-shadow: var(--sombra-chica), 0 0 0 1px color-mix(in srgb, var(--ambar) 12%, transparent);
}
 
.luz-item {
    padding: 1rem 0 .2rem;
    border-top: 1px solid var(--borde-suave);
    margin-top: .9rem;
}
.luz-item:first-of-type {
    border-top: 0;
    margin-top: .4rem;
    padding-top: .4rem;
}
 
.luz-item--critica {
    border-left: 3px solid var(--rojo);
    padding-left: .85rem;
    margin-left: -.85rem;
}
 
.luz-item__cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}
 
.luz-item__nombre {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
 
/* Que significa la luz. Es el texto que mas se va a leer del bloque, asi que va
   con el color del cuerpo y no en gris tenue: no es un pie de pagina. */
.luz-item__que {
    margin: 0 0 .5rem;
    color: var(--texto-suave);
    font-size: .94rem;
    line-height: 1.55;
    max-width: 68ch;
}
 
/* De donde salio el aviso. Esto SI es secundario -es la trazabilidad, no la
   noticia- y va tenue. */
.luz-item__origen {
    margin: 0;
    color: var(--texto-tenue);
    font-size: .87rem;
    line-height: 1.5;
}
.luz-item__origen strong { color: var(--texto-suave); font-weight: 600; }
 
/* La linea del gasto. Separada con un filete porque contesta otra pregunta: no
   "que le pasa al auto" sino "y esto cuanto me va a costar anotar". */
.luz-item__gasto {
    margin: .8rem 0 .2rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--borde-suave);
    color: var(--texto-tenue);
    font-size: .87rem;
    line-height: 1.5;
}
 
 
/* -----------------------------------------------------------------------------
   LA LINEA DE TIEMPO DEL KILOMETRAJE
   -----------------------------------------------------------------------------
   Reemplaza a `.resumen__linea`, que era una fila de dos columnas: fecha a la
   izquierda, numero a la derecha. Servia mientras solo hubiera lecturas; ahora
   cada fila tiene ademas de donde salio, cuando se anoto y, si es una luz, su
   simbolo.
   ----------------------------------------------------------------------------- */
.hito {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--borde-suave);
}
.hito:last-of-type { border-bottom: 0; }
 
.hito__cuerpo { flex: 1 1 auto; min-width: 0; }
 
.hito__titulo {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}
 
.hito__detalle {
    display: block;
    margin-top: .1rem;
    color: var(--texto-tenue);
    font-size: .85rem;
    line-height: 1.45;
}
 
.hito__km {
    flex: 0 0 auto;
    font-size: 1.02rem;
    white-space: nowrap;
}
 
/* El kilometraje que leyo la IA y nadie confirmo. Tenue y con ~ delante: no
   puede tener la misma cara que una lectura que alguien escribio o aprobo,
   porque no vale lo mismo. */
.hito__km--leido {
    color: var(--texto-tenue);
    font-weight: 600;
    cursor: help;
}
 
/* Ya revisada: sigue en el historial -es justo lo que le da valor- pero
   apagada, porque no pide nada. El icono en gris dice "esto ya paso" sin
   sacarlo de la lista. */
.hito--luz-cerrada { opacity: .55; }
.hito--luz-cerrada .luz-icono { filter: grayscale(1); }
 
 
/* -----------------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------------- */
@media (max-width: 520px) {
    .hito { gap: .6rem; }
    .hito__km { font-size: .95rem; }
 
    /* Cuatro botones chicos en una fila de 380px quedan de dos caracteres cada
       uno. Se apilan a ancho completo. */
    .luz-item .fila-acciones {
        flex-direction: column;
        align-items: stretch;
    }
    .luz-item .fila-acciones .boton,
    .luz-item .fila-acciones form,
    .luz-item .fila-acciones form .boton {
        width: 100%;
    }
}
 
 
/* -----------------------------------------------------------------------------
   LA LISTA DE REPORTES DEL CHECK-IN
   -----------------------------------------------------------------------------
   El chofer la toca de pie, con una mano y a veces con guantes. Cada opcion es
   un bloque completo clickeable de 3rem de alto, no una casilla de 16px con la
   etiqueta al lado.
   ----------------------------------------------------------------------------- */
.reportes {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
    margin-top: .3rem;
}
@media (min-width: 560px) {
    .reportes { grid-template-columns: 1fr 1fr; }
}
 
.reporte {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3rem;
    padding: .6rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico, 12px);
    cursor: pointer;
    transition: border-color var(--vel) ease, background-color var(--vel) ease;
}
.reporte:hover { border-color: var(--texto-tenue); }
 
/* La casilla se esconde pero NO con display:none: asi sigue existiendo para el
   teclado y para los lectores de pantalla. El estado se ve en el borde. */
.reporte input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
 
.reporte__icono {
    display: inline-flex;
    align-items: center;
    font-size: 1.55rem;
    line-height: 1;
    flex: 0 0 auto;
}
 
.reporte__texto { display: flex; flex-direction: column; min-width: 0; }
.reporte__texto strong { font-size: .95rem; line-height: 1.25; }
.reporte__texto small {
    color: var(--texto-tenue);
    font-size: .8rem;
    line-height: 1.35;
    margin-top: .1rem;
}
 
/* Marcado. El ambar y el rojo son los mismos dos niveles de todo el modulo. */
.reporte:has(input:checked) {
    border-color: var(--ambar);
    background: color-mix(in srgb, var(--ambar) 10%, var(--superficie));
}
.reporte--critico:has(input:checked) {
    border-color: var(--rojo);
    background: color-mix(in srgb, var(--rojo) 10%, var(--superficie));
}
.reporte:has(input:focus-visible) { box-shadow: var(--anillo); }
 
/* Respaldo para navegadores sin :has() -Firefox viejo-. Sin esto la opcion
   marcada no se distingue, y el chofer no sabe si quedo marcada o no. */
@supports not selector(:has(*)) {
    .reporte input { position: static; opacity: 1; width: 1.1rem; height: 1.1rem; }
}
 
 
/* La nota de quien reporto el problema, en el bloque de la ficha. Cursiva y con
   comillas: es lo que dijo una persona, no un dato del sistema. */
.luz-item__nota {
    margin: 0 0 .5rem;
    color: var(--texto);
    font-size: .95rem;
    font-style: italic;
    line-height: 1.5;
}
 
/* Lo mismo en la linea de tiempo del kilometraje. */
.hito__cita {
    display: block;
    margin-top: .15rem;
    color: var(--texto-suave);
    font-size: .87rem;
    font-style: italic;
    line-height: 1.45;
}





.expediente {
    background: #fff;
    color: #16202e;
    border: 1px solid #d9e0ea;
    border-radius: var(--radio, 14px);
    padding: 1.8rem 1.9rem;
    margin-bottom: 2rem;
    font-size: .93rem;
    line-height: 1.5;
}
 
.expediente a { color: #16202e; }
 
.expediente__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid #16202e;
}
 
.expediente__titulo {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #16202e;
}
 
.expediente__meta {
    margin: 0 0 .6rem;
    font-size: .85rem;
    color: #5b6879;
}
 
.expediente__seccion { margin-bottom: 1.8rem; }
.expediente__seccion:last-of-type { margin-bottom: .8rem; }
 
.expediente__seccion h3 {
    margin: 0 0 .6rem;
    font-size: 1rem;
    color: #16202e;
    border-bottom: 1px solid #d9e0ea;
    padding-bottom: .35rem;
}
 
.expediente__seccion .sutil { color: #5b6879; }
 
/* Tabla apretada y con scroll horizontal en el telefono: siete columnas no
   caben en 380px y partirlas en dos lineas las vuelve ilegibles. Al imprimir el
   scroll no existe y la regla de abajo la deja fluir completa. */
.expediente__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
 
.expediente__tabla th,
.expediente__tabla td {
    padding: .42rem .7rem .42rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eceff4;
}
 
.expediente__tabla th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5b6879;
    border-bottom: 1px solid #c3ccd8;
}
 
.expediente__tabla tbody tr:last-child td { border-bottom: none; }
 
.expediente__pie {
    margin: 1.4rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid #d9e0ea;
    font-size: .78rem;
    color: #5b6879;
}
 
@media (max-width: 620px) {
    .expediente { padding: 1.1rem 1.1rem; }
    .expediente__tabla { font-size: .8rem; }
}
 
 
/* -----------------------------------------------------------------------------
   IMPRESION
   -----------------------------------------------------------------------------
   Se guarda como PDF desde el dialogo de imprimir del navegador, que existe en
   todos ellos incluido el del telefono. No hace falta ninguna libreria de PDF
   en el servidor y no hay nada que mantener.
   ----------------------------------------------------------------------------- */
@media print {
 
    /* Fondo blanco y tinta negra pase lo que pase con el tema elegido. */
    html, body {
        background: #fff !important;
        color: #000 !important;
    }
 
    /* Todo lo que es aplicacion y no documento. .no-imprimir es la llave
       generica: cualquier bloque nuevo que no deba salir en papel solo tiene
       que llevar esa clase. */
    .barra,
    .pie,
    .no-imprimir,
    .menu-cuenta,
    .selector-tema,
    .visor,
    .pestanas,
    .filtros,
    .boton,
    .chip,
    .lector {
        display: none !important;
    }
 
    .contenido,
    .contenido--ancho,
    .contenido--centrado {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
 
    .expediente {
        border: none;
        padding: 0;
        margin: 0;
        font-size: 10.5pt;
    }
 
    /* Sin scroll horizontal en papel: la tabla vuelve a ser tabla y el texto
       largo puede cortarse en varias lineas. */
    .expediente__tabla {
        display: table;
        overflow: visible;
        white-space: normal;
        page-break-inside: auto;
    }
 
    .expediente__tabla tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
 
    .expediente__tabla thead { display: table-header-group; }
 
    /* Una seccion no se parte a la mitad si cabe entera en la hoja siguiente. */
    .expediente__seccion { page-break-inside: avoid; }
    .expediente__seccion h3 { page-break-after: avoid; }
 
    /* Las sombras y los degradados de la interfaz no aportan nada en papel y en
       algunas impresoras salen como manchas grises. */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
 
    a[href]::after { content: ""; }
 
    @page {
        margin: 1.6cm 1.4cm;
    }
}
 

/* =============================================================================
   27  CENTRO DE PLANES (cuenta/plan.php, bajar.php, cancelar.php)
   -----------------------------------------------------------------------------
   La pantalla de venta. Lo que se agrega acá es lo que hace que el plan se
   VEA (el sello al lado del titulo), que personas y empresas se distingan de
   reojo, que dos planes se puedan enfrentar, y que las decisiones de irse
   tengan una conversacion antes del boton.
   ============================================================================= */

/* --- El sello del plan, al lado del titulo -------------------------------- */
.encabezado__titulo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.encabezado__titulo h1 { margin-bottom: 0; }

.plan-sello {
    display: inline-flex;
    flex-direction: column;
    gap: .05rem;
    padding: .45rem 1rem .5rem;
    border-radius: 14px;
    background: var(--superficie);
    border: 2px solid var(--verde-500);
    box-shadow: var(--glow-verde);
    line-height: 1.15;
}
.plan-sello__nombre {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--verde-600);
}
.plan-sello__meta { font-size: .78rem; color: var(--texto-suave); font-weight: 600; }
.plan-sello--base { border-color: var(--borde); box-shadow: none; }
.plan-sello--base .plan-sello__nombre { color: var(--texto); }
.plan-sello--elite { border-color: var(--marino-600); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marino-600) 25%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--marino-600) 45%, transparent); }
.plan-sello--elite .plan-sello__nombre { color: var(--marino-600); }
.plan-sello--trial { border-style: dashed; }

/* --- El cambio recien pagado ----------------------------------------------- */
.cambio { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cambio__de, .cambio__a {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: .15rem .6rem;
    border-radius: 10px;
    background: var(--superficie);
}
.cambio__de { text-decoration: line-through; opacity: .7; }
.cambio__a { border: 2px solid var(--verde-500); }
.cambio__flecha { font-size: 1.3rem; color: var(--verde-600); }
.cambio .sutil { flex-basis: 100%; }

/* --- Personas o empresas ---------------------------------------------------- */
.segmentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: .9rem;
    margin-bottom: 1.25rem;
}
.segmento {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--borde-suave);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
    transition: border-color var(--vel) ease, box-shadow var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.segmento:hover { border-color: color-mix(in srgb, var(--verde-500) 50%, var(--borde)); transform: translateY(-2px); box-shadow: var(--sombra-chica); }
.segmento.es-activo { border-color: var(--verde-500); background: color-mix(in srgb, var(--verde-claro) 45%, var(--superficie)); box-shadow: var(--glow-verde); }
.segmento__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.segmento__titulo { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; }
.segmento__familia { background: color-mix(in srgb, var(--marino-600) 12%, transparent); color: var(--marino-600); }
.segmento.es-activo .segmento__familia { background: var(--verde-claro); color: var(--verde-600); }
.segmento__resumen { font-weight: 600; font-size: .92rem; }
.segmento__detalle { font-size: .86rem; color: var(--texto-suave); }
.segmento__pie { margin-top: .35rem; font-size: .82rem; color: var(--texto-suave); }
.segmento__pie strong { color: var(--verde-600); }

/* --- Tarjetas de plan: cabecera, actual, baja, comparar --------------------- */
.plan__cabeza { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .15rem; }
.plan__cabeza .plan__nombre { display: inline; font-size: 1.15rem; }
.etiqueta--actual { background: var(--verde-600); color: #fff; }
.plan--actual { border-color: color-mix(in srgb, var(--verde-500) 55%, var(--borde)); }
.plan--actual::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--verde-500), var(--verde-400));
}
.plan__baja {
    display: block;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--ambar);
    border-left: 2px solid var(--ambar);
    padding-left: .55rem;
    line-height: 1.4;
}
.plan__comparar { display: block; margin-top: .7rem; }
.plan__comparar .boton { margin-top: 0; }
.plan__lista li.es-falta { list-style: "\2013  "; }
.plan__lista--pierde li::marker { color: var(--ambar); }

/* --- Comparador -------------------------------------------------------------- */
.comparador__selectores {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .5rem 0 1rem;
}
.comparador__lado { flex: 1 1 180px; }
.comparador__select {
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    color: var(--texto);
    font-size: 16px;
    font-weight: 600;
}
.comparador__select:focus { outline: none; border-color: var(--verde-500); box-shadow: var(--anillo); }
.comparador__vs { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue); font-weight: 700; }
.comparador__titular {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-radius: var(--radio-chico);
    background: var(--verde-claro);
    border: 1px solid color-mix(in srgb, var(--verde-500) 25%, transparent);
}
.comp-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}
.comp-lista {
    padding: .85rem 1rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde-suave);
    background: var(--superficie-2);
    font-size: .9rem;
}
.comp-lista strong { display: block; margin-bottom: .35rem; font-size: .84rem; }
.comp-lista ul { margin: 0; padding-left: 1.1rem; }
.comp-lista li { margin-bottom: .15rem; }
.comp-lista--gana li::marker { color: var(--verde-500); }
.comp-lista--pierde li::marker { color: var(--ambar); }

.comp-tabla__marco { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comp-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 420px; }
.comp-tabla th, .comp-tabla td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.comp-tabla thead th { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .98rem; }
.comp-tabla thead th small { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: .78rem; color: var(--texto-suave); }
.comp-tabla td:first-child { color: var(--texto-suave); width: 38%; }
.comp-tabla td:not(:first-child) { font-variant-numeric: tabular-nums; font-weight: 600; }
.comp-grupo th {
    padding-top: .9rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-tenue);
    border-bottom: 0;
}
.comp-tabla tr.es-distinta td { background: color-mix(in srgb, var(--ambar-claro) 45%, transparent); }
.comp-tabla td.comp-gana { color: var(--verde-600); font-weight: 700; }
.comp-tabla td.comp-falta { color: var(--texto-tenue); font-weight: 500; }

/* --- La comparacion honesta de los extras ----------------------------------- */
.sugerencia--plan { border-color: color-mix(in srgb, var(--ambar) 40%, transparent); background: var(--ambar-claro); }
.sugerencia--plan strong { color: var(--ambar); }
.sugerencia--plan > span { display: block; margin-top: .2rem; }
.sugerencia--plan .acciones { flex-wrap: wrap; }
.sugerencia--plan[hidden] { display: none; }
.extra__detalle { display: block; font-size: .8rem; line-height: 1.4; margin-top: .15rem; }

/* --- Como pagar: dos modos, de primera clase los dos ------------------------ */
.pago-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: .9rem;
    margin-top: 1rem;
}
.pago-modo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.1rem 1rem 2.6rem;
    border: 2px solid var(--borde-suave);
    border-radius: var(--radio);
    background: var(--superficie);
    cursor: pointer;
    transition: border-color var(--vel) ease, box-shadow var(--vel) var(--curva);
}
.pago-modo input { position: absolute; left: 1rem; top: 1.2rem; margin: 0; }
.pago-modo:hover { border-color: color-mix(in srgb, var(--verde-500) 50%, var(--borde)); }
.pago-modo:has(input:checked) { border-color: var(--verde-500); box-shadow: var(--glow-verde); background: color-mix(in srgb, var(--verde-claro) 40%, var(--superficie)); }
.pago-modo__titulo { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.05rem; }
.pago-modo__bajada { font-size: .9rem; }
.pago-modo__medios { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.chip-medio {
    font-size: .74rem;
    font-weight: 600;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1px solid var(--borde-suave);
    color: var(--texto);
    white-space: nowrap;
}
.chip-medio--dudoso { border-style: dashed; color: var(--texto-suave); white-space: normal; }
.pago-modo__pie { font-size: .8rem; margin-top: .2rem; }
.pago-tabla { min-width: 520px; }
.pago-tabla td:first-child { width: 24%; }

/* --- Resumen: el cambio y la baja ------------------------------------------ */
.resumen__cambio { font-weight: 700; }
.resumen__cambio span:last-child { color: var(--verde-600); }
.resumen__baja { border-left: 2px solid var(--ambar); padding-left: .6rem; }
.resumen__baja[hidden] { display: none; }
.resumen #resNota[hidden] { display: none; }

/* --- El asesor --------------------------------------------------------------- */
.asesor__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 .9rem; }
.asesor__hilo {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-height: 420px;
    overflow-y: auto;
    padding: .25rem 0;
}
.asesor__hilo:empty { display: none; }
.burbuja {
    max-width: 88%;
    padding: .7rem .95rem;
    border-radius: 16px;
    font-size: .93rem;
    line-height: 1.5;
    white-space: pre-wrap;
    animation: aparecer var(--vel) var(--curva);
}
.burbuja--yo { align-self: flex-end; background: var(--verde-600); color: #fff; border-bottom-right-radius: 4px; }
.burbuja--ia { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borde-suave); border-bottom-left-radius: 4px; }
.burbuja--error { border-color: color-mix(in srgb, var(--rojo) 35%, transparent); color: var(--rojo); }
.burbuja--pensando { color: var(--texto-tenue); font-style: italic; }
.asesor__form { display: flex; gap: .5rem; margin-top: .9rem; align-items: stretch; }
.asesor__form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: .65rem .95rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 16px;
}
.asesor__form input[type="text"]:focus { outline: none; border-color: var(--verde-500); box-shadow: var(--anillo); }
.asesor__form input:disabled { opacity: .6; }
.asesor__form .boton { margin-top: 0; }
.asesor__nota { margin: .8rem 0 0; font-size: .84rem; }

/* --- Otras opciones: plegado y sin dramatismo ------------------------------- */
.plegable--otras { margin-top: .5rem; }
.plegable--otras > summary { font-weight: 600; color: var(--texto-suave); }

/* --- Bajar y cancelar: motivos y oferta ------------------------------------ */
.motivos { display: grid; gap: .5rem; }
.motivo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1rem;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    cursor: pointer;
    font-size: .95rem;
    transition: border-color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.motivo:hover { border-color: var(--texto-tenue); }
.motivo:has(input:checked) { border-color: var(--verde-500); background: color-mix(in srgb, var(--verde-claro) 45%, var(--superficie)); }
.motivo input { margin: 0; }

.oferta { border-color: var(--verde-500); box-shadow: var(--glow-verde); }
.oferta .etiqueta { margin-bottom: .4rem; }
.oferta__titulo { color: var(--verde-600); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.oferta__detalle { font-size: 1rem; line-height: 1.55; }
.oferta__acciones { flex-wrap: wrap; }

@media (max-width: 620px) {
    .encabezado__titulo { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .comparador__vs { flex-basis: 100%; text-align: center; }
    .pago-modo { padding-left: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .segmento:hover { transform: none; }
    .burbuja { animation: none; }
}


/* =============================================================================
   28  ORGANIZAR LA FLOTA (vehiculos/index.php, etiquetas.php, lote.php)
   =============================================================================
   Cuatro filas de chips, el resumen de lo aplicado, y el modo seleccion.

   Nada de esto inventa colores: los chips, .etiqueta y .vehiculo ya existian y
   se reusan tal cual. Lo que se agrega son las variantes que faltaban y las
   piezas que no tenian equivalente.
   ============================================================================= */

/* Cada eje en su propia fila y con menos aire abajo: cuatro filas con el margen
   de 1.35rem de .filtros dejarian la rejilla debajo del pliegue en un celular.
   El aire de cierre lo ponen .plegable--filtros y .filtros-resumen, que vienen
   despues. */
.filtros--chips { margin-bottom: .45rem; }

/* Los tres valores de tenencia que se abren bajo "Externos". Sangrados para que
   se lean como lo que son: un detalle del chip de arriba, no un cuarto eje. */
.filtros--sub { margin: 0 0 .8rem 1.2rem; }

.filtros__titulo {
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .2rem;
}

.chip--chico { padding: .35rem .7rem; min-height: 30px; font-size: .82rem; }

/* "Sin grupo" y "Sin etiqueta": son filtros de ausencia y se ven distinto de los
   que nombran algo. Borde cortado, que es la convencion de "esto esta vacio". */
.chip--hueco { border-style: dashed; color: var(--texto-tenue); }

.chip--etiqueta { font-weight: 600; }

/* El chip del resumen, con la x. El hover se pone rojo porque lo que hace es
   sacar algo, y ese es el unico chip de la pantalla que quita en vez de agregar. */
.chip--quitar { background: var(--fondo-alt); }
.chip--quitar:hover { color: var(--rojo); border-color: var(--rojo); }

.plegable--filtros { margin-bottom: .8rem; }
.plegable--filtros > summary { font-size: .88rem; }
.plegable--filtros .filtros { margin-bottom: .5rem; }

/* --- El resumen de lo aplicado ------------------------------------------- */
.filtros-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .7rem 0 1rem;
    border-top: 1px solid var(--borde-suave);
    margin-bottom: .4rem;
}
.filtros-resumen__conteo { font-size: .9rem; color: var(--texto-suave); }
.filtros-resumen__conteo strong { color: var(--texto); }

/* --- Los select sueltos de esta zona --------------------------------------
   El de ordenar y el de la barra del lote son <select> sin .campo alrededor:
   sin esto salen con el control nativo del sistema, que en el tema oscuro se ve
   como un parche blanco y al lado de los chips parece de otra aplicacion.

   Es el mismo tratamiento de .campo select -incluida la flecha dibujada a mano,
   porque la nativa no respeta el tema-, pero en pastilla y en tamano de chip,
   para que la fila se lea como una sola cosa. */
.filtros-resumen__orden select,
.lote-barra select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 38px;
    padding: .5rem 2.2rem .5rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background-color: var(--superficie);
    color: var(--texto);
    /* 16px para que iOS no haga zoom al desplegarlo, igual que el buscador. */
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-tenue) 50%),
                      linear-gradient(135deg, var(--texto-tenue) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease;
}
.filtros-resumen__orden select:hover,
.lote-barra select:hover { border-color: var(--texto-tenue); }
.filtros-resumen__orden select:focus,
.lote-barra select:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: var(--anillo);
}
/* Las opciones del desplegable las pinta el sistema, no la pagina. Fijar los dos
   colores es lo unico que evita texto blanco sobre blanco en el tema oscuro de
   Windows. */
.filtros-resumen__orden select option,
.lote-barra select option { background: var(--superficie); color: var(--texto); }

.filtros-resumen__orden label { font-size: .9rem; }

/* El orden y "Limpiar" empujados a la derecha: no son filtros, son lo que se
   hace con el resultado. */
.filtros-resumen__orden {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.filtros-resumen__orden select { min-width: 9rem; }


/* =============================================================================
   28b  LA MISMA PANTALLA EN UN CELULAR
   =============================================================================
   Todo lo de aca abajo es SOLO para celular y no cambia un pixel en escritorio.
   Las tres piezas llevan nombre generico y se piden con una clase: /documentos,
   /clientes, /rutas y media docena mas tienen exactamente los mismos dos
   problemas, y cuando les toque se resuelven poniendo la clase, no copiando
   reglas.

   EL PROBLEMA, MEDIDO

   En /vehiculos, en un telefono de 393px, antes de ver UN SOLO vehiculo habia
   ~910px de controles:

       titulo + "2 de 50"                ~100px
       siete botones apilados            ~410px   <- .encabezado__acciones
       buscador                           ~68px
       cuatro filas de chips             ~180px   <- .filtros tiene flex-wrap
       "Mas filtros"                      ~61px
       conteo + ordenar + aplicar         ~90px

   Con 740px de alto util, la primera tarjeta empezaba fuera de pantalla. Y las
   filas de chips no son cuatro fijas: crecen con los datos. Una cuenta con doce
   grupos y ocho etiquetas tiene ocho o nueve filas, no cuatro.

   LA IDEA, UNA SOLA

   Lo que sobra no es informacion, es la DIRECCION en que se apila. Nada se
   esconde detras de un menu: lo mismo que habia sigue estando, pero puesto a lo
   ancho -que es la medida que sobra en un telefono- en vez de a lo largo.
   ============================================================================= */

/* --- 1. El encabezado ------------------------------------------------------
   En escritorio esta pieza no existe: los dos contenedores son display:contents,
   o sea que desaparecen de la caja y sus botones siguen siendo hijos directos
   del flex de .encabezado__acciones. Misma fila, mismo orden, mismos pixeles.
   Por eso el HTML conserva el orden de siempre y el reordenamiento de celular se
   hace con `order` aca abajo: asi el escritorio no se entera de nada. */
.acciones-jefe__tira,
.acciones-jefe__principal { display: contents; }

/* --- 2. El eje de filtro que se desliza ------------------------------------
   Se pide con .filtros--tira sobre una fila que ya sea .filtros--chips. Opt-in
   fila por fila: las otras pantallas que usan .filtros--chips no cambian hasta
   que alguien les ponga la clase. Toda la regla esta en el @media. */

/* --- 3. El rotulo del eje --------------------------------------------------
   En escritorio no se pinta: ahi las filas se leen enteras de una pasada y un
   titulo por fila seria ruido. En celular es lo que faltaba hace rato, porque
   las tres primeras filas de chips no dicen que son y "Todas / Propios /
   Externos" sin nada encima no significa nada para quien recien llega. */
.filtros__titulo--movil { display: none; }

/* --- 4. Dos ejes en una sola fila -------------------------------------------
   /documentos tiene los cuatro chips de estado y los dos de vista metidos en la
   MISMA fila, separados por una rayita. En escritorio se lee bien; en celular la
   fila se parte donde alcanza y "Al dia" termina pegado a "Por vehiculo", que
   son cosas distintas.

   Se pide con .filtros--ejes en la fila y .filtros--tira en cada eje de adentro.
   En escritorio los ejes son display:contents y la fila queda exactamente como
   estaba, rayita incluida. */
.filtros--ejes > .filtros--tira { display: contents; }

/* --- 5. Una fila de metricas -----------------------------------------------
   Se pide con .tarjetas--metricas. Bajo 480px, .tarjetas pasa a una sola columna
   y tres numeros de una linea ocupan 300px de alto: en /documentos empujaban el
   listado entero fuera de la pantalla para decir "2, 3, 9". Tres numeros cortos
   caben perfectamente en tres columnas; es texto largo lo que no cabe, y estas
   tarjetas no lo tienen. */

/* --- 6. Las metricas que NO caben en tres columnas -------------------------
   Se pide con .tarjetas--anchas, y es la hermana de .tarjetas--metricas: las dos
   arreglan lo mismo -tres tarjetas apiladas a lo ancho bajo 480px- y la
   diferencia es que cabe adentro.

     .tarjetas--metricas  numeros de un digito (/documentos: 2, 3, 9).
                          Tres columnas, y listo.
     .tarjetas--anchas    montos en pesos con una linea de detalle debajo
                          (/rutas, /rutas/cobros, /rutas/facturacion:
                          "$1.234.567 / 3 sin pagar, IVA incluido, $1.037.031
                          neto"). En un tercio de pantalla no se leen, asi que
                          la tarjeta se queda del ancho completo y lo que se
                          acuesta es su CONTENIDO: el rotulo y la cifra dejan de
                          ir uno debajo del otro y se reparten la primera linea,
                          el detalle queda en la segunda. De tres lineas a dos,
                          sin encoger el numero ni un punto.

   Donde mas se nota es en /rutas/facturacion: ese bloque de cuatro tarjetas se
   repite POR EMPRESA. Con cinco razones sociales eran veinte tarjetas apiladas.
*/

@media (max-width: 620px) {

    /* --- 1. El encabezado --------------------------------------------------
       La pila de siete botones a lo ancho -410px, mas de media pantalla- se
       parte en dos: el boton verde solo arriba, y los otros seis en una tira de
       pastillas de 38px que se desliza. De 410px a ~100px. */
    /* nowrap va explicito: .encabezado__acciones trae flex-wrap:wrap de la regla
       base, y un contenedor en columna QUE ADEMAS envuelve reparte sus hijos en
       varias columnas, cada una del ancho de su contenido. La tira -que en
       max-content mide 611px- se llevaba a los dos y el listado entero terminaba
       con scroll horizontal. */
    .acciones-jefe {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .6rem;
    }

    /* Arriba y solo: es a lo que se entra a esta pantalla. Sigue siendo el mismo
       boton de ancho completo que ya era. */
    .acciones-jefe__principal { display: block; order: 1; }

    /* El margen negativo saca la tira hasta el canto del telefono y el padding
       se lo devuelve por dentro. Es lo que hace que, cuando sobran pastillas, la
       ultima quede CORTADA por el borde de la pantalla en vez de terminar
       ordenadita antes del margen: esa pastilla partida es todo el aviso de que
       hay mas hacia el lado. Es el mismo recurso que ya usa .barra__nav.

       Sin degradado de desvanecido encima, a diferencia de .barra__nav: aca la
       tira a veces cabe entera, y un degradado sobre algo que cabe se ve como un
       error de pintado, no como una pista. */
    .acciones-jefe__tira {
        display: flex;
        order: 2;
        flex-wrap: nowrap;
        gap: .4rem;
        overflow-x: auto;
        /* Que arrastrar la tira no arrastre la pagina, ni dispare el gesto de
           "volver atras" del navegador al llegar al extremo. */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--sangria-pantalla));
        padding-inline: var(--sangria-pantalla);
        /* Sitio para el anillo de foco, que si no se corta contra el overflow. */
        padding-block: 3px;
    }
    .acciones-jefe__tira::-webkit-scrollbar { display: none; }

    /* Tres clases de especificidad para ganarle a la regla global de mas arriba
       -.encabezado__acciones .boton { width: 100% }- sin tener que tocarla: esa
       regla la usan otras ocho pantallas tal como esta. */
    .acciones-jefe .acciones-jefe__tira .boton {
        width: auto;
        flex: 0 0 auto;
        min-height: 38px;
        padding: .45rem .95rem;
        border-radius: 999px;
        font-size: .87rem;
        font-weight: 600;
    }

    /* Al final de la tira y no al principio: "Eliminados" es la vista que menos
       se abre y la unica que habla de algo que ya no esta. */
    .acciones-jefe__ultimo { order: 9; }

    /* --- 2. Los ejes de filtro ---------------------------------------------
       Cada eje pasa a ser UNA linea que se desliza, y mide lo mismo con dos
       grupos que con cuarenta. Ese es el punto: el problema no era que ocuparan
       cuatro filas, era que crecian sin techo. */
    .filtros--tira {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .35rem;
        margin: 0 calc(-1 * var(--sangria-pantalla)) .35rem;
        padding: 3px var(--sangria-pantalla);
    }
    .filtros--tira::-webkit-scrollbar { display: none; }
    /* Sin esto los chips se encogen para caber, que es justo lo contrario de lo
       que hace una tira. */
    .filtros--tira > * { flex: 0 0 auto; }

    /* NO lleva scroll-snap, y no es un olvido. Con scroll-snap-type en la tira y
       scroll-snap-align en los chips, el navegador alinea el primer chip contra
       el borde del scrollport apenas la fila desborda: la tira nace corrida y el
       primer chip queda DEBAJO del rotulo pegajoso. Se leia "AMBITOTodos" en el
       mismo pixel. El enganche no aportaba nada -son pastillas, no laminas de un
       carrusel- y quitarlo es el arreglo. */

    /* El detalle de "Externos" ya no puede sangrarse con margen izquierdo -la
       tira llega al borde de la pantalla-, asi que la sangria la pone el
       padding, sumada a la de la pantalla. */
    .filtros--tira.filtros--sub {
        margin-left: calc(-1 * var(--sangria-pantalla));
        padding-left: calc(var(--sangria-pantalla) + 1.1rem);
        margin-bottom: .7rem;
    }

    /* --- 3. El rotulo -------------------------------------------------------
       Los cuatro ejes de arriba estrenan rotulo en celular. Los dos de "Mas
       filtros" ya tenian el suyo -y en escritorio tambien-, asi que la parte de
       quedarse pegada al canto se le pone al rotulo de CUALQUIER tira: los seis
       ejes se comportan igual. */
    .filtros__titulo--movil { display: inline-block; }

    /* Si el rotulo se fuera con el scroll, a la segunda pastilla ya no se sabria
       de que eje es la fila. El degradado es para que el chip que pasa por
       detras no choque de golpe contra la letra. */
    .filtros--tira .filtros__titulo {
        position: sticky;
        z-index: 1;
        margin-right: 0;
        /* Los tres valores del canto izquierdo van juntos y se anulan entre si:
           el margen negativo estira la caja pintada hasta el borde de la
           pantalla, el padding le devuelve el ancho -asi los chips que siguen no
           se corren ni un pixel- y el left le dice al sticky que se pegue a ese
           mismo borde. Sin esto quedaba una franja de 11px sin tapar entre el
           canto y el rotulo, y por ahi asomaba un pedazo del chip que iba
           saliendo: se leia como una letra suelta. */
        margin-left: calc(-1 * var(--sangria-pantalla));
        padding-left: var(--sangria-pantalla);
        left: calc(-1 * var(--sangria-pantalla));
        /* Todos los rotulos del mismo ancho, aunque "Grupo" necesite bastante
           menos que "Tenencia": asi los chips de las seis filas arrancan en la
           misma vertical y la zona se lee como una tabla con su columna de
           titulos, no como cuatro filas corridas cada una un poco distinto.
           5.2rem es lo que mide el mas largo; la sangria se suma aparte porque
           el padding izquierdo entra en el ancho (box-sizing: border-box). */
        min-width: calc(5.2rem + var(--sangria-pantalla));
        /* El fondo tapa opaco TODO el rotulo y recien se desvanece en los
           ultimos 9px, que son padding puro. Con el degradado empezando antes
           -a un 72% del ancho- el chip que pasaba por detras se leia encima de
           la letra: quedaba "GRUPOrupo 3". La letra no puede compartir pixel con
           nada; el desvanecido es solo para que el chip no aparezca de golpe. */
        padding-right: .85rem;
        background: linear-gradient(90deg,
                    var(--fondo) 0,
                    var(--fondo) calc(100% - .55rem),
                    transparent 100%);
    }

    /* --- El pie de los filtros ---------------------------------------------
       Se pide con .filtros-resumen--compacto. Una linea en vez de tres, y el
       arreglo son dos numeros:

         - el desplegable tenia 9rem de ancho minimo, que en 343px utiles no
           dejaba sitio para "Aplicar";
         - y "Aplicar", al bajar a su propia linea, heredaba el width:100% de
           .boton y ocupaba la fila entera.

       Entre las dos cosas, decir "2 vehiculos" y ofrecer un orden costaba 138px
       de alto. Ahora son 62px, con el conteo a la izquierda y el orden a la
       derecha, que es exactamente el reparto que ya tiene en escritorio. */
    .filtros-resumen--compacto { padding: .6rem 0 .8rem; gap: .45rem; }
    /* El desplegable se lleva lo que sobre y NO al reves: su ancho natural es
       el de la opcion mas larga -en /clientes, "Agregados hace poco" pide
       222px de los 343 que hay- y con eso "Aplicar" se caia a una tercera
       linea. Ahora encoge; el boton, que no puede encoger sin quedar
       ilegible, es el que manda. */
    .filtros-resumen--compacto select { flex: 1 1 5rem; min-width: 0; }
    .filtros-resumen--compacto .fila-acciones { gap: .4rem; }
    .filtros-resumen--compacto .fila-acciones .boton { width: auto; flex: 0 0 auto; }
    .filtros-resumen--compacto label { font-size: .82rem; }

    /* --- 4. Dos ejes que se separan ----------------------------------------
       Cada eje pasa a su propia tira, con su rotulo, y la rayita que los
       separaba sobra: la separacion ya la hace el salto de linea. */
    .filtros--ejes { display: block; margin-bottom: .35rem; }
    .filtros--ejes > .filtros--tira { display: flex; }
    .filtros--ejes > .separador { display: none; }

    /* --- 5. Las metricas, en fila ------------------------------------------
       Tres columnas y no una. El padding baja de 1.25rem a lo justo, y el
       rotulo con el: "POR VENCER" tiene que partirse en dos lineas sin tocar
       los bordes. La barrita verde del canto izquierdo se queda, que es lo que
       las hace reconocibles. */
    .tarjetas--metricas {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        margin-bottom: 1rem;
    }
    .tarjetas--metricas .tarjeta--metrica { padding: .8rem .55rem .8rem .8rem; }
    .tarjetas--metricas .metrica__titulo { font-size: .66rem; letter-spacing: .03em; }
    .tarjetas--metricas .metrica__valor { font-size: 1.6rem; margin-top: .15rem; }

    /* --- 6. Las metricas anchas, acostadas ---------------------------------
       Dos columnas y dos filas: el rotulo a la izquierda, la cifra a la derecha
       en la MISMA linea, y el detalle abajo. La rejilla se define en la tarjeta
       y no se toca el HTML, que en estas cinco pantallas viene de dos formas
       distintas: en /rutas el detalle es un <span class="sutil"> hermano, y en
       cobros y facturacion es un <small> que vive DENTRO de la cifra. La primera
       se coloca sola en la fila 2; la segunda se vuelve bloque y queda bajo su
       numero, alineada con el. Las dos terminan en dos lineas. */
    .tarjetas--anchas { gap: .55rem; margin-bottom: 1rem; }
    .tarjetas--anchas .tarjeta--metrica {
        display: grid;
        /* minmax(0,1fr) y no 1fr: sin el minimo en cero, un rotulo largo -"De
           eso, falta cobrar"- se niega a partirse y empuja la cifra fuera. */
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: .75rem;
        padding: .7rem .95rem .75rem 1rem;
    }
    .tarjetas--anchas .metrica__titulo { grid-column: 1; grid-row: 1; }
    .tarjetas--anchas .metrica__valor {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        margin-top: 0;
        font-size: 1.45rem;
    }
    /* El detalle que vive dentro de la cifra pasa a linea propia. */
    .tarjetas--anchas .metrica__valor small { display: block; margin-top: .1rem; }
    /* Y el que es hermano se estira bajo las dos columnas. */
    .tarjetas--anchas .tarjeta--metrica > .sutil {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: .8rem;
        margin-top: .1rem;
    }
}

/* --- La sangria lateral de la pantalla -------------------------------------
   Las dos tiras se salen hasta el borde con un margen negativo, y ese margen
   tiene que valer EXACTAMENTE lo que .contenido tiene de padding lateral en cada
   tamano; si no calzan, la tira queda corrida o deja una franja. Con una
   variable son tres lineas en vez de repetir los margenes en cada regla, y el
   dia que cambie el padding de .contenido cambia en un solo lugar.

   Los tres valores salen de .contenido: 1rem bajo 720px, .85rem bajo 480px y
   .7rem bajo 380px. Las tiras solo existen bajo 620px, asi que el tramo de
   arriba no hace falta. */
:root { --sangria-pantalla: 1rem; }
@media (max-width: 480px) { :root { --sangria-pantalla: .85rem; } }
@media (max-width: 380px) { :root { --sangria-pantalla: .7rem; } }

/* --- Etiquetas ------------------------------------------------------------ */
.etiquetas-tira { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

/* Las casillas del formulario del vehiculo. Cada opcion es una pastilla
   completa clicable y no un checkbox con texto al lado: el area de toque en
   celular es la pastilla entera. */
.etiquetas-elegir { display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquetas-elegir__opcion {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.etiquetas-elegir__opcion:hover { border-color: var(--texto-tenue); }
.etiquetas-elegir__opcion:has(input:checked) {
    border-color: var(--verde-500);
    background: color-mix(in srgb, var(--verde-claro) 55%, var(--superficie));
    color: var(--verde-600);
    font-weight: 600;
}
.etiquetas-elegir__opcion input { margin: 0; }

/* La fila de la pantalla de etiquetas. Son dos lineas: arriba el nombre
   editable a la izquierda y el contador con el borrar a la derecha; abajo las
   patentes que la usan. */
.etiqueta-fila {
    padding: .75rem 0;
    border-bottom: 1px solid var(--borde-suave);
}
.etiqueta-fila:last-child { border-bottom: 0; }
.etiqueta-fila__linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Las patentes que usan la etiqueta -----------------------------------
   La respuesta a "cuales", debajo del "cuantos". Sangradas hasta donde empieza
   el nombre -el ancho del `#` mas su gap- para que se lean como algo que cuelga
   de esa etiqueta y no como una fila mas de la tarjeta. */
.etiqueta-fila__flota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .55rem 0 0 1.1rem;
}

/* La placa como enlace a la ficha se dibuja con `.placa-enlace`, que vive en la
   seccion 15 junto a la placa. Aca nacio -se llamaba .etiqueta-fila__auto- y de
   aca se fue el dia que la ficha de una ruta necesito lo mismo. */

/* Un vehiculo sin patente legible no tiene placa que dibujar, asi que va por su
   nombre. Mismo alto que .placa--chica para que la tira no se escalone. */
.etiqueta-fila__sinplaca {
    display: inline-flex;
    align-items: center;
    padding: .28em .55em;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 600;
}
/* El `min-width: 0` no es decorativo. El formulario es a la vez item flex de la
   linea y contenedor flex del input, y sin el se queda con `min-width: auto`,
   que vale su ancho de contenido minimo. Ese minimo incluye el ancho intrinseco
   del input -20 caracteres, que es lo que mide un <input> sin `size`-, porque el
   `min-width: 0` del input lo deja encogerse pero NO baja lo que aporta al
   minimo de su padre. Resultado en un telefono de 375px: la fila media 355px
   dentro de una tarjeta de 314 y el boton "Guardar" se salia por el borde
   redondeado, cortado. */
.etiqueta-fila__editar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 260px;
    min-width: 0;
}

/* El nombre se edita en la fila misma, asi que el input va suelto y NO dentro
   de un .campo: un rotulo "Nombre" repetido veinte veces sobre veinte filas que
   ya se explican solas es ruido. Pero suelto no hereda nada -ver la nota de
   .campo input[type="datetime-local"]-, y hasta hoy salia con el borde
   cuadrado, la tipografia y el alto que le pone el navegador, al lado del campo
   de "Nueva etiqueta" que si esta acabado. Se repiten las propiedades aca, igual
   que en .datos-extra__fila.
   El alto y el radio son los de .boton--chico a proposito: el input y su
   "Guardar" son una sola pieza y tienen que medir lo mismo. */
.etiqueta-fila__editar input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: .5rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    /* 16px exactos: menos que eso y iOS hace zoom al enfocar. */
    font-size: 16px;
    font-family: inherit;
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease,
                background-color var(--vel-rapida) ease;
}
.etiqueta-fila__editar input[type="text"]:hover { border-color: var(--texto-tenue); }
.etiqueta-fila__editar input[type="text"]:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: var(--anillo);
}

/* --- El separador de grupo, con orden = grupo ----------------------------
   Ocupa la fila completa de la rejilla: sin esto seria una celda mas y quedaria
   al lado de una tarjeta. Es la pieza que hace que ordenar por grupo se vea como
   la jerarquia que reemplaza a los subgrupos. */
.rejilla__separador {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0 0;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--borde-suave);
    font-size: 1rem;
    color: var(--texto-suave);
}
.rejilla__separador:first-child { margin-top: 0; }

/* --- Modo seleccion ------------------------------------------------------- */
.vehiculo-celda { position: relative; display: flex; }
.vehiculo-celda > .vehiculo { flex: 1 1 auto; }

/* La casilla flotando sobre la esquina de la tarjeta. Grande a proposito: en
   celular se toca la tarjeta completa, pero en escritorio con el mouse la
   casilla tiene que ser un blanco real. */
.vehiculo__marca {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 3;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--verde-600);
    box-shadow: 0 0 0 3px var(--superficie);
    border-radius: 4px;
}

/* En modo seleccion la tarjeta es un <label>, no un <a>: el cursor lo dice. */
body.en-lote .vehiculo { cursor: pointer; }
body.en-lote .vehiculo:hover { transform: none; }

.vehiculo-celda.es-marcada > .vehiculo {
    border-color: var(--verde-500);
    box-shadow: var(--glow-verde);
}

/* --- La barra del lote ---------------------------------------------------- */
.lote-barra {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    /* El padding de abajo respeta la barra del sistema en iPhone. */
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra-alta);
}
.lote-barra__conteo { font-size: .9rem; color: var(--texto-suave); }
.lote-barra__conteo strong { color: var(--texto); font-size: 1.05rem; }
.lote-barra select { flex: 1 1 12rem; min-width: 0; }

/* -----------------------------------------------------------------------------
   EL ATRIBUTO hidden CONTRA EL display DE ESTAS DOS PIEZAS
   -----------------------------------------------------------------------------
   `[hidden]` esconde por la hoja del navegador, y CUALQUIER regla de autor con
   `display` le gana. .lote-barra trae display:flex y .boton trae
   display:inline-flex, asi que sin estas dos lineas el atributo `hidden` que
   ponen el servidor y lote.js no hace absolutamente nada:

     - la barra del lote se ve pegada abajo desde que carga la pagina, sin que
       nadie haya seleccionado nada
     - el boton "Seleccionar" aparece aunque lote.js no haya cargado, que es
       justo lo que ese hidden venia a evitar: un control que promete algo que
       no puede hacer

   No es un caso nuevo: en esta misma hoja hay otras reglas iguales para el
   visor, las cuotas, el resumen de planes, la barra de seleccion del listado de
   rutas y el panel del dia del calendario. Es la trampa clasica de mezclar el
   atributo hidden con un display propio, y se vuelve a caer en ella cada vez
   que alguien escribe una pieza nueva que nace escondida. */
.lote-barra[hidden] { display: none; }
.boton[hidden] { display: none; }

@media (max-width: 620px) {
    .filtros-resumen__orden { margin-left: 0; width: 100%; }
    .lote-barra { gap: .5rem; padding: .7rem .8rem; }
    .lote-barra select { flex: 1 1 100%; }
}

/* Lo que solo tiene que leer un lector de pantalla. La x de los chips del
   resumen es un caracter decorativo; el texto de lo que hace va aca. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   OTROS DATOS DEL DOCUMENTO
   =========================================================================
   Filas etiqueta / valor para lo que un papel trae y no tiene columna propia.
   Las pinta rok_datos_extra_caja() en core/vistas/piezas.php y las mueve
   assets/js/datos-extra.js.

   Los inputs van sueltos y no dentro de un .campo, asi que las propiedades del
   input se repiten aca. Es a proposito: un .campo por celda apilaria rotulo,
   input y ayuda en cada una de las veinte filas y el bloque quedaria de tres
   pantallas de alto. Aca el rotulo es el propio placeholder. */

.datos-extra {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.datos-extra__fila {
    display: grid;
    /* La etiqueta es un nombre corto y el valor puede ser largo: 2 a 3.
       El boton de quitar es cuadrado y no se estira. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    gap: .5rem;
    align-items: center;
}

.datos-extra__fila input[type="text"] {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    /* 16px exactos, igual que en .campo: menos que eso y iOS hace zoom al
       enfocar, y en un bloque de veinte filas eso es insoportable. */
    font-size: 16px;
    font-family: inherit;
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease,
                background-color var(--vel-rapida) ease;
}

.datos-extra__fila input[type="text"]:hover { border-color: var(--texto-tenue); }

.datos-extra__fila input[type="text"]:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: var(--anillo);
}

.datos-extra__fila input::placeholder { color: var(--texto-tenue); opacity: .8; }

/* La etiqueta se ve como rotulo y no como dato: es el nombre de la columna. */
.datos-extra__etiqueta { font-weight: 600; }

/* --- Lo que escribio la lectura con IA -----------------------------------
   Mismo verde que .campo--leido, para que el bloque hable el mismo idioma que
   el resto del formulario cuando alguien aprieta "Leer y rellenar". La marca
   se saca en cuanto la persona toca la fila (ver datos-extra.js): un dato
   corregido a mano ya no es un dato leido. */

.datos-extra__fila.es-leida input[type="text"] {
    background: var(--verde-claro);
    border-color: var(--verde-500);
    transition: background .35s ease, border-color .35s ease;
}

.datos-extra__fila.es-leida input[type="text"]:focus { background: var(--superficie); }

/* --- Quitar --------------------------------------------------------------
   Sin fondo hasta que se apunta: veinte botones rojos en columna gritan mucho
   mas fuerte que lo que hacen. */

.datos-extra__quitar {
    border: 1px solid transparent;
    background: transparent;
    color: var(--texto-tenue);
    font-size: 1.35rem;
    line-height: 1;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radio-chico);
    cursor: pointer;
    transition: color var(--vel-rapida) ease, background-color var(--vel-rapida) ease,
                border-color var(--vel-rapida) ease;
}

.datos-extra__quitar:hover,
.datos-extra__quitar:focus-visible {
    color: var(--rojo);
    background: var(--superficie-2);
    border-color: var(--borde);
    outline: none;
}

/* --- El bloque de solo lectura ------------------------------------------- */

.datos-lista--extra { margin-top: 1.15rem; }

.datos-extra__marca {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .3rem;
    border-radius: 4px;
    background: var(--verde-claro);
    color: var(--verde-600);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* Un tipo de documento dado de baja en documentos/tipos.php. La tarjeta sigue
   entera y legible -hay que poder leerla para decidir reactivarla- pero se
   apaga para que no compita con las que estan en uso. */
.tarjeta.es-apagada { opacity: .72; }
.tarjeta.es-apagada:hover { opacity: 1; }

/* En pantalla angosta las tres columnas no caben: la etiqueta arriba, el valor
   abajo y el boton de quitar al lado del valor, que es donde la persona ya
   tiene el pulgar. */
@media (max-width: 560px) {
    .datos-extra__fila {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .datos-extra__etiqueta { grid-column: 1 / -1; }
    .datos-extra__fila { padding-bottom: .55rem; border-bottom: 1px solid var(--borde-suave); }
    .datos-extra__fila:last-child { border-bottom: 0; }
}




/* =============================================================================
   28  MODO CONDUCTOR  —  la app del chofer, de punta a punta
   =============================================================================
   Reemplaza y amplia lo que antes vivia disperso en los bloques 26 y 27. Va al
   final del archivo a proposito: todo lo de aca abajo gana por cascada, asi que
   ninguna regla anterior hay que ir a buscarla y borrarla.

   -----------------------------------------------------------------------------
   PARA QUIEN ES ESTA PANTALLA
   -----------------------------------------------------------------------------
   Para alguien de pie, con una mano, a contraluz, a veces con guantes y muchas
   veces con mas de cincuenta anos. Eso no es un detalle de accesibilidad: es el
   usuario promedio del modulo, y define TODAS las decisiones de este bloque.

     1. Todo mas grande. 17px de base y ningun texto util bajo 15px. La letra
        fina y chica es lo primero que hace que alguien deje de usar una app y
        vuelva a la libreta.
     2. Cualquier cosa que se toque mide 3.5rem de alto. Es lo que se acierta sin
        mirar y sin sacarse el guante.
     3. Una accion principal por tarjeta, y que se vea cual es. Dos botones del
        mismo peso al lado es la forma mas rapida de que aprieten el equivocado.
     4. Los estados se distinguen por FORMA, no por una palabra. Una parada
        entregada y una pendiente tienen que verse distintas de reojo, sin leer.

   -----------------------------------------------------------------------------
   POR QUE EL NEGRO
   -----------------------------------------------------------------------------
   Negro = estas andando. No es "la seccion del chofer": si estuviera siempre,
   dejaria de significar algo. Se enciende con [data-ruta="abierta"] y se apaga
   al cerrar la ruta, y ahora lo hace en las TRES pantallas del modulo.

   Se hace reescribiendo solo los tokens, no las reglas. Cualquier cosa que se
   agregue manana queda bien en los dos modos sin que haya que tocarla.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   28.1  TOKENS DEL MODO
   ----------------------------------------------------------------------------- */
body.modo-conducir {
    /* La escala. Un escalon completo por encima de la app de administrar. */
    --c-fs:      1.0625rem;   /* 17px  texto corriente */
    --c-fs-sm:   .97rem;      /* 15.5px  lo secundario. No baja de aca. */
    --c-fs-md:   1.15rem;
    --c-fs-lg:   1.35rem;     /* la direccion, el nombre del cliente */
    --c-fs-xl:   1.62rem;

    /* Alto de cualquier cosa que se toque. No se negocia por falta de espacio:
       si no cabe, se apila. */
    --c-tap:     3.5rem;
    --c-tap-sm:  2.9rem;

    --c-radio:    18px;
    --c-radio-sm: 12px;

    font-size: var(--c-fs);
    line-height: 1.5;
}

/* La app del chofer es una columna, no un tablero. Nada de rejillas de tres
   columnas en una pantalla que se lee con el telefono en una mano. */
body.modo-conducir .contenido {
    max-width: 34rem;
    padding-top: 1.1rem;
    padding-bottom: 5rem;
}

/* -----------------------------------------------------------------------------
   28.2  TIPOGRAFIA: TODO UN ESCALON MAS GRANDE
   -----------------------------------------------------------------------------
   .sutil es la clase que usa toda la app para lo secundario, y en el resto del
   sistema mide .88rem. Aca no puede: lo secundario de esta pantalla es el
   telefono del contacto y la hora en que recibe el cliente, o sea justo lo que
   hay que poder leer al sol. Sube a 15.5px y sube tambien su contraste.
   ----------------------------------------------------------------------------- */
body.modo-conducir .sutil,
body.modo-conducir small {
    font-size: var(--c-fs-sm);
    color: var(--texto-suave);
    line-height: 1.5;
}

body.modo-conducir h1 { font-size: var(--c-fs-xl); letter-spacing: -.02em; }
body.modo-conducir h2 { font-size: var(--c-fs-lg); letter-spacing: -.015em; }
body.modo-conducir p  { font-size: var(--c-fs); }

/* Los formularios. 17px de etiqueta y 17px de valor: el chofer que escribe el
   numero de la guia con el sol encima no puede estar adivinando. El input se
   queda en 16px exactos como en toda la app -menos que eso y iOS hace zoom al
   enfocar- pero sube el alto y el aire. */
body.modo-conducir .campo > span { font-size: var(--c-fs); margin-bottom: .5rem; }
body.modo-conducir .campo input[type="text"],
body.modo-conducir .campo input[type="number"],
body.modo-conducir .campo input[type="tel"],
body.modo-conducir .campo input[type="search"],
body.modo-conducir .campo select,
body.modo-conducir .campo textarea {
    padding: 1rem;
    min-height: var(--c-tap-sm);
    border-radius: var(--c-radio-sm);
    font-size: 16px;
}
body.modo-conducir .campo input[type="file"] {
    font-size: var(--c-fs-sm);
    padding: .9rem;
    min-height: var(--c-tap-sm);
}
body.modo-conducir .campo { margin-bottom: 1.3rem; }

/* Los botones. Grandes por defecto, sin que cada vista tenga que pedirlo. */
body.modo-conducir .boton {
    min-height: var(--c-tap);
    font-size: var(--c-fs-md);
    font-weight: 700;
    border-radius: var(--c-radio-sm);
}
body.modo-conducir .boton--chico {
    min-height: var(--c-tap-sm);
    font-size: var(--c-fs-sm);
    padding: .7rem 1.05rem;
}

/* Las insignias de estado tambien crecen: son la respuesta corta de cada
   tarjeta y se leen antes que el texto. */
body.modo-conducir .insignia {
    font-size: .84rem;
    padding: .4rem .7rem;
    letter-spacing: .02em;
}

/* Los plegables: el resumen es un boton en la practica, asi que mide como uno.
   
   El reparto interno importa mas de lo que parece. El summary base es un flex con
   space-between, y con tres hijos -el titulo, la aclaracion y el signo mas- en
   una pantalla de 320px el titulo se partia al medio: "El / trabajo". El titulo
   se queda entero y lo que se recorta es la aclaracion, que es lo prescindible. */
body.modo-conducir .plegable > summary {
    min-height: var(--c-tap-sm);
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--c-fs);
    padding-top: .8rem;
    padding-bottom: .8rem;
}
body.modo-conducir .plegable > summary > strong { flex: 1 1 auto; min-width: 0; }
body.modo-conducir .plegable > summary > .sutil {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.modo-conducir .plegable > summary::after { flex: 0 0 auto; }
body.modo-conducir .plegable__cuerpo { padding-bottom: 1.1rem; }

body.modo-conducir .tarjeta {
    border-radius: var(--c-radio);
    padding: 1.15rem;
}

/* El pie de marca no pinta nada en la calle: se queda por los enlaces legales,
   pero mas chico.

   NO se le baja la opacidad con la pantalla clara. El pie es un degradado marino
   oscuro con texto claro encima; apagarlo sobre un fondo blanco no lo apaga, lo
   destine -queda gris lavado, como si se hubiera roto algo-. Apagado solo tiene
   sentido en modo ruta, donde TODA la pantalla esta apagada y el pie tiene que
   dejar de competir con lo unico que importa. */
body.modo-conducir .pie { font-size: .9rem; }
body.modo-conducir[data-ruta="abierta"] .pie { opacity: .35; }


/* -----------------------------------------------------------------------------
   28.3  EL HUD
   -----------------------------------------------------------------------------
   La barra de arriba dejo de ser un titulo y paso a ser un tablero. Lleva las
   cuatro cosas que el chofer mira sin leer: que esta pasando, cuanto lleva, en
   que trabajo y cuanto le falta. Es la misma idea de la franja superior de las
   apps de reparto, y es lo que hace que las tres pantallas del modulo se sientan
   una sola aplicacion y no tres formularios sueltos.

   Es sticky: se queda arriba mientras el chofer baja por doce direcciones.
   ----------------------------------------------------------------------------- */
.barra--conducir {
    position: sticky;
    top: 0;
    z-index: 40;
    display: block;
    /* Las areas seguras del notch se respetan una por una: .barra las pone como
       longhands y aca hace falta el shorthand para el alto, asi que se vuelven a
       declarar despues o se pierden en apaisado con muesca. */
    padding: calc(.6rem + env(safe-area-inset-top)) 1rem .55rem;
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    /* EL VERDE ES MAS OSCURO DE LO QUE PARECE NECESARIO, y es a proposito.
       Terminaba en #16a34a, que con texto blanco da 3.30:1 de contraste: por
       debajo del 4.5:1 que pide WCAG AA para texto normal. En una oficina se
       lee igual; en un telefono al sol y de pie -que es donde se usa esta
       barra- se pierde. Los dos extremos de este degradado quedan sobre 5:1. */
    background: linear-gradient(160deg, #0f6a37 0%, #15803d 100%);
    color: #fff;
    border-bottom: 0;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
    /* El HUD es opaco: el desenfoque de .barra sobre un degradado solido no
       aporta nada y en un Android de gama baja cuesta cuadros. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* luz.js le agrega .es-desplazada a cualquier .barra al bajar. Con el HUD ya
   separado por su propia sombra, esa segunda sombra azulada no pinta nada. */
.barra--conducir.es-desplazada { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }

/* EL SEGURO DEL FONDO. Se repite a proposito y con mas peso.

   Esta barra es lo unico que le queda al chofer para salir de una pantalla -el
   modo conductor no tiene menu-, y su texto es BLANCO. Cualquier regla de otro
   archivo que le aclare el fondo la borra entera: no se ve el boton de volver,
   ni el reloj, ni la patente, y el chofer se queda encerrado.

   Ya paso una vez. nivel.css tiene `body[data-nivel="pro"] .barra { background:
   ...superficie... }`, que pesa mas que `.barra--conducir` Y ademas se carga
   despues: en toda cuenta Pro o Elite el HUD salia blanco sobre blanco. En una
   cuenta base se veia bien, y por eso nadie lo noto.

   Con estos tres selectores encadenados (0,3,1) ninguna regla de una clase mas
   un atributo lo alcanza, cargue el archivo que cargue y en el orden que sea.
   Si algun dia hay que pintar esta barra de otro color, se cambia ACA. */
body.modo-conducir .barra.barra--conducir {
    background: linear-gradient(160deg, #0f6a37 0%, #15803d 100%);
    color: #fff;
}
body.modo-conducir[data-ruta="abierta"] .barra.barra--conducir {
    background:
        radial-gradient(120% 180% at 50% -60%, rgba(34, 197, 94, .22), transparent 70%),
        linear-gradient(180deg, #0a1a12 0%, #071310 100%);
}

.hud__fila {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.4rem;
}

/* La flecha de volver vive aca y no suelta arriba del contenido: suelta se
   pierde entre las tarjetas, aca esta siempre en el mismo pixel. Mide 44px
   reales aunque el icono sea chico. */
/* VOLVER AL INICIO: casita Y palabra, no un chevron pelado.
   El chofer es el que menos conoce esta aplicacion de todos los que la usan, y
   el modo conductor no tiene menu a proposito: si no reconoce este boton, se
   queda encerrado en la pantalla donde este. Un icono solo no alcanza para eso.
   El alto sigue siendo 44px, que es el minimo para un pulgar en movimiento. */
.hud__volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0 .6rem 0 .45rem;
    margin-left: -.5rem;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}
.hud__volver svg { width: 21px; height: 21px; flex: 0 0 auto; }
.hud__volver:active { background: rgba(255, 255, 255, .16); }

/* En una pantalla muy angosta la palabra se va y queda la casa sola, que es
   bastante mas reconocible que la flecha que habia antes. El corte es 340px:
   por debajo de eso conviven el boton, el reloj y "Salir" y algo tiene que
   ceder. */
@media (max-width: 340px) {
    .hud__volver span { display: none; }
    .hud__volver { padding: 0 .35rem; }
}

/* DE QUIEN ES ESTA APLICACION, en el aterrizaje.
   Ocupa el hueco que deja el boton de volver donde no hace falta -ya se esta en
   el principio- y contesta la pregunta del que abrio un enlace de WhatsApp y no
   sabe donde cayo. Dice el nombre de SU empresa, que es lo que a el le sirve.
   Se corta con puntos suspensivos: "Transportes y Distribucion del Maipo Ltda."
   no puede empujar el reloj fuera de la pantalla. */
.hud__marca {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 42%;
    padding-right: .2rem;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .92;
}

.hud__estado {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* El punto que late. Es lo unico que se mueve en toda la barra y por eso se ve.
   Con ruta abierta late; sin ruta abierta se queda quieto, porque no hay nada
   corriendo que valga la pena mirar. */
.hud__punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
}
body[data-ruta="abierta"] .hud__punto {
    background: var(--verde-400);
    animation: rok-hud-latido 2.4s ease-out infinite;
}
@keyframes rok-hud-latido {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
    70%  { box-shadow: 0 0 0 11px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hud__que {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .92;
    /* Se corta antes que pasar por debajo de la patente. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LA FILA LLENA: empresa, estado, patente y Salir en la misma linea. En un
   telefono no caben y "Modo conductor" quedaba debajo de la patente. Cede el
   rotulo, que es lo unico de la fila que no dice nada propio: la empresa dice
   de quien es, la patente con que sale, y el punto sigue diciendo si esta en
   ruta. "En ruta" no se esconde: con el reloj al lado es la respuesta. */
@media (max-width: 480px) {
    body:not([data-ruta="abierta"]) .hud__fila--llena .hud__que { display: none; }
    .hud__fila--llena .hud__marca { max-width: 55%; }
}

/* Y en el aterrizaje el que se achica es el nombre de la empresa, no el estado:
   con ruta abierta "En ruta" y el reloj son lo que el chofer vino a mirar, y
   antes quedaban en "EN..." al lado de "Transportes P...". */
.hud__marca + .hud__estado { flex-shrink: 0; }

/* El reloj de la barra. Tabular para que no baile al cambiar de minuto. */
.hud__reloj {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.06rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: .15rem;
}

/* Salir es un boton de verdad -se aprieta con el pulgar- pero en voz baja: no
   es la accion de esta pantalla, es la salida. */
.hud__salir {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0 .9rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    flex: 0 0 auto;
    white-space: nowrap;
}
.hud__salir:active { background: rgba(255, 255, 255, .16); }

.hud__fila--sub {
    min-height: 0;
    margin-top: .1rem;
    gap: .5rem;
}

/* De que trabajo se trata. Se corta con puntos suspensivos en vez de empujar la
   patente fuera de la pantalla: el nombre completo del cliente ya esta abajo, en
   grande, y aca solo sirve para no perderse entre dos viajes del mismo dia. */
.hud__trabajo {
    font-size: var(--c-fs-sm);
    font-weight: 700;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .95;
}

.hud__patente {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .2);
    padding: .18rem .55rem;
    border-radius: 7px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* --- La barra de avance ---------------------------------------------------
   La unica gamificacion del modulo, y la que funciona: la linea crece con cada
   parada marcada y el chofer la ve crecer sin tener que contar nada. Sin
   puntaje, sin medallas y sin ranking entre choferes: esto es trabajo, y
   comparar choferes es una decision del owner, no algo que RutaOk deba
   imponerle a su gente. */
.hud__avance {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .5rem;
}

.hud__barra {
    position: relative;
    flex: 1 1 auto;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    overflow: hidden;
}
.hud__barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .55);
    transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.hud__barra.es-completa > span {
    background: linear-gradient(90deg, #bbf7d0, #ffffff);
}

.hud__cuenta {
    font-size: .88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .95;
}


/* -----------------------------------------------------------------------------
   28.4  LA PALETA APAGADA, AFINADA
   -----------------------------------------------------------------------------
   Sobre los tokens que ya definia el bloque 27. Lo que cambia: mas contraste en
   el texto secundario -era lo que peor se leia al sol-, el negro un punto menos
   plano y el verde de estado mas encendido, para que se lea como un tablero y no
   como una pagina en modo noche.
   ----------------------------------------------------------------------------- */
body[data-ruta="abierta"] {
    --fondo:        #04080a;
    --fondo-alt:    #080f12;
    --superficie:   #101a1e;
    --superficie-2: #16232a;
    --borde:        #24343c;
    --borde-suave:  #1b272d;

    --texto:        #f4faf7;
    /* Sube de #a6b4ae a #b9c7c1: es el color de TODO lo secundario de la
       pantalla -el telefono, la hora, la referencia del porton- y al sol el
       anterior desaparecia. */
    --texto-suave:  #b9c7c1;
    --texto-tenue:  #8a9a94;

    --luz-a:        rgba(34, 197, 94, .16);
    --luz-b:        rgba(34, 197, 94, .05);
}

/* El HUD en modo ruta se apaga: el degradado verde brillante sobre una pantalla
   negra la convertia en lo mas luminoso de todo, justo donde no hay ninguna
   accion. Queda como el filo encendido de un tablero. */
body[data-ruta="abierta"] .barra--conducir {
    background:
        radial-gradient(120% 180% at 50% -60%, rgba(34, 197, 94, .22), transparent 70%),
        linear-gradient(180deg, #0a1a12 0%, #071310 100%);
    border-bottom: 1px solid rgba(74, 222, 128, .26);
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 1);
}
body[data-ruta="abierta"] .hud__que     { color: var(--verde-400); opacity: 1; }
body[data-ruta="abierta"] .hud__reloj   { color: #fff; }
body[data-ruta="abierta"] .hud__patente { background: rgba(74, 222, 128, .16); color: #d8f5e4; }
body[data-ruta="abierta"] .hud__salir {
    border-color: rgba(255, 255, 255, .3);
    color: var(--texto-suave);
}
body[data-ruta="abierta"] .hud__barra { background: rgba(255, 255, 255, .1); }
body[data-ruta="abierta"] .hud__barra > span {
    background: linear-gradient(90deg, var(--verde-500), var(--verde-400));
    box-shadow: 0 0 14px rgba(74, 222, 128, .6);
}


/* -----------------------------------------------------------------------------
   28.5  BLOQUES Y SEPARADORES
   ----------------------------------------------------------------------------- */

/* El titulito de seccion. Es lo que separa "lo que falta" de "lo que ya esta",
   que es la division que el chofer necesita para no leer la lista entera. */
.c-seccion {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.6rem 0 .75rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.c-seccion::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--borde-suave);
}
.c-seccion__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .85rem;
    letter-spacing: 0;
}

/* El saludo del aterrizaje. */
.conducir-saludo {
    font-size: var(--c-fs-xl);
    letter-spacing: -.025em;
    margin: 0 0 .15rem;
}


/* -----------------------------------------------------------------------------
   28.6  LA TARJETA DEL TRABAJO  (aterrizaje)
   -----------------------------------------------------------------------------
   Un trabajo del dia. Antes eran filas separadas por una linea gris dentro de
   una misma tarjeta: cuatro filas iguales donde no se distinguia lo que ya
   empezo de lo que no. Ahora cada trabajo es su propia tarjeta con su propio
   boton grande, que es como se ve un pedido en cualquier app de reparto.
   ----------------------------------------------------------------------------- */
.c-tarea {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--c-radio);
    padding: 1.15rem;
    margin: 0 0 .85rem;
    box-shadow: var(--sombra-chica);
}

/* El que ya esta andando se enciende. Es el unico que tiene algo abierto y
   tiene que encontrarse sin leer. */
.c-tarea--andando {
    border-color: rgba(74, 222, 128, .4);
    box-shadow: var(--sombra-chica), 0 0 0 1px rgba(74, 222, 128, .16);
    background:
        radial-gradient(130% 90% at 50% -20%, rgba(34, 197, 94, .1), transparent 60%),
        var(--superficie);
}

.c-tarea__alto {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    margin: 0 0 .5rem;
}

.c-tarea__cliente {
    margin: 0;
    font-size: var(--c-fs-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* La hora, el servicio y la patente como fichas y no como una frase con puntos
   medios: tres datos sueltos se leen de una ojeada, una frase hay que leerla. */
.c-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .15rem 0 0;
}
.c-ficha {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 8px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.c-ficha--hora {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}

.c-tarea__dato {
    margin: .55rem 0 0;
    font-size: var(--c-fs);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.c-tarea__dato strong { font-weight: 700; }

/* El avance de un trabajo dentro del aterrizaje. Mismo lenguaje que el HUD para
   que se lean como lo mismo. */
.c-mini-avance {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .85rem 0 0;
}
.c-mini-avance__barra {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--superficie-2);
    overflow: hidden;
}
.c-mini-avance__barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--verde-500);
    transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.c-mini-avance__txt {
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
    white-space: nowrap;
}

/* La botonera de una tarjeta. UNA accion principal ancha, y debajo las
   secundarias repartidas. Nunca dos principales al lado. */
.c-acciones {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 0;
}
.c-acciones .boton { width: 100%; }
.c-acciones--par { grid-template-columns: 1fr 1fr; }


/* -----------------------------------------------------------------------------
   28.7  LAS PARADAS
   -----------------------------------------------------------------------------
   El corazon del modulo, y lo que peor estaba: doce tarjetas identicas, del
   mismo alto, con el mismo boton verde grande abajo, donde lo unico que cambiaba
   entre una entregada y una pendiente era el texto del boton. A las tres de la
   tarde eso es un muro.

   Ahora hay TRES FORMAS distintas y se distinguen de reojo:

     .c-parada             pendiente. Tarjeta completa con su boton grande.
     .c-parada--proxima    la primera pendiente. Encendida y con etiqueta.
     .c-parada--hecha      entregada. UNA LINEA, plegada, con su check verde.
     .c-parada--falla      no se pudo. Una linea, en ambar.

   La consecuencia buscada es que la lista SE ACHICA a medida que el chofer
   trabaja. Eso es lo que hace que dar la vuelta se sienta como avanzar y no como
   estar siempre en el mismo lugar.
   ----------------------------------------------------------------------------- */
.c-parada {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--c-radio);
    padding: 1.15rem;
    margin: 0 0 .8rem;
    box-shadow: var(--sombra-chica);
}

/* --- La siguiente ---------------------------------------------------------
   Es la que el chofer esta yendo a hacer AHORA. Se enciende, se separa del
   resto y lleva su etiqueta arriba. Es el equivalente del pedido activo en una
   app de reparto: hay una sola y no se puede confundir con las que vienen. */
.c-parada--proxima {
    border-color: rgba(74, 222, 128, .45);
    background:
        radial-gradient(120% 80% at 50% -15%, rgba(34, 197, 94, .13), transparent 62%),
        var(--superficie);
    box-shadow: var(--sombra), 0 0 0 1px rgba(74, 222, 128, .14);
    margin-bottom: 1.4rem;
}

/* El filo que respira. Lo unico que se mueve en la pantalla, por eso se ve. */
.c-parada--proxima::before {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--verde-400), transparent);
    animation: rok-respira 3.4s ease-in-out infinite;
}
@keyframes rok-respira {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1; }
}

.c-parada__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .65rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--verde-600);
}
body[data-ruta="abierta"] .c-parada__etiqueta { color: var(--verde-400); }

/* --- La cabecera de una parada ------------------------------------------- */
.c-parada__alto {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* El numero de orden. Es como el chofer las nombra entre el y la oficina
   ("me falta la 7"), asi que va grande y a la izquierda, no escondido adentro
   del titulo. */
.c-parada__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}
.c-parada--proxima .c-parada__n {
    background: var(--verde-500);
    border-color: transparent;
    color: #04140a;
}

.c-parada__cuerpo { min-width: 0; flex: 1 1 auto; }

/* La direccion es el dato mas importante de toda la pantalla. */
.c-parada__dir {
    margin: 0;
    font-size: var(--c-fs-lg);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.c-parada--proxima .c-parada__dir { font-size: 1.5rem; }

.c-parada__comuna {
    margin: .2rem 0 0;
    font-size: var(--c-fs);
    color: var(--texto-suave);
}

/* Lo que hay que saber antes de bajarse: la referencia del porton y la ventana
   horaria. Se leen antes de llegar, no despues. */
.c-parada__nota {
    margin: .7rem 0 0;
    padding: .7rem .85rem;
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    font-size: var(--c-fs);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.c-parada__hora {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .7rem 0 0;
    padding: .35rem .7rem;
    border-radius: 8px;
    background: var(--ambar-claro);
    color: var(--ambar);
    font-size: .92rem;
    font-weight: 700;
}

/* --- El orden de la hoja -------------------------------------------------
   Dos flechas para subir y bajar una parada. La oficina teclea las direcciones
   en el orden en que le llegaron, que casi nunca es un orden de manejo; el
   chofer conoce el sector y sabe cual le queda de paso.

   VAN EN VOZ BAJA Y A LA DERECHA. Compiten con "Entregado", que es lo que el
   chofer viene a hacer, y ordenar la hoja pasa una vez al empezar la vuelta.
   Pero el area de toque es de 44px igual: se aprietan de pie y en movimiento,
   y un boton chico ahi es un toque perdido en la parada equivocada. */
.c-orden {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin: .7rem 0 0;
}
.c-orden form { margin: 0; }
.c-orden__boton {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    padding: 0 .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.c-orden__boton:hover { color: var(--texto); }
body[data-ruta="abierta"] .c-orden__boton {
    background: transparent;
    border-color: rgba(255,255,255,.16);
}

/* --- Lo que ya quedo anotado --------------------------------------------- */
.c-marca {
    margin: .8rem 0 0;
    padding: .75rem .85rem;
    border-left: 3px solid var(--verde-500);
    border-radius: 0 var(--c-radio-sm) var(--c-radio-sm) 0;
    background: var(--verde-claro);
    font-size: var(--c-fs-sm);
    line-height: 1.55;
}
.c-marca strong { font-weight: 800; }
.c-marca__linea { display: block; }
body[data-ruta="abierta"] .c-marca {
    background: rgba(74, 222, 128, .09);
    color: var(--texto-suave);
}

/* Donde se marco. Va con su enlace al mapa: cuatro numeros no son un respaldo
   hasta que alguien los puede mirar. */
.c-geo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto-tenue);
    text-decoration: none;
}
.c-geo:hover { color: var(--verde-600); }
.c-geo svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* La misma ubicacion en las pantallas de la oficina -jornada, bitacora, ficha
   del conductor y la ruta-.

   Deliberadamente mas chica y mas apagada que .c-geo: alla es la confirmacion
   de lo que el chofer acaba de hacer, aca es un dato mas de una fila que ya
   tiene hora, kilometraje y combustible. Hereda el tamano de letra de donde
   este metida, que casi siempre es un .sutil, para que no rompa la linea.

   El punteado de abajo es lo unico que dice que se puede tocar: subrayarlo
   entero lo convertiria en el elemento mas llamativo de una fila donde no es
   el que importa. */
.geo-oficina {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--texto-suave);
    text-decoration: none;
    border-bottom: 1px dotted var(--borde);
    white-space: nowrap;
}
.geo-oficina:hover,
.geo-oficina:focus-visible {
    color: var(--verde-600);
    border-bottom-color: currentColor;
}
.geo-oficina svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    opacity: .75;
}


/* -----------------------------------------------------------------------------
   EL MAPA DE LAS PARADAS (solo rutas/ver.php)
   -----------------------------------------------------------------------------
   Contesta una pregunta que una lista de direcciones no contesta nunca: este
   orden tiene sentido? La parada 2 al otro lado de la ciudad se ve de una
   mirada; leyendo doce calles en una lista, no.

   Vive en la oficina y NO en el telefono del chofer, y eso es una decision: el
   que arma la hoja esta sentado y sin apuro, el chofer con el motor andando
   quiere una direccion y el boton "Como llegar" que ya tiene. */
.geo-caja { margin: 0 0 1rem; }

.geo-mapa {
    height: 340px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    overflow: hidden;
}

/* El mapa chico de la tarjeta del chofer. Solo para mirar: no se arrastra, no
   hace zoom y no reordena.

   Es la respuesta a la primera pregunta de la manana, que no es "cuantas paradas
   tengo" sino POR DONDE VOY A ANDAR HOY. Cinco calles en una lista hay que
   leerlas y ubicarlas de memoria; cinco pines se entienden de una mirada.

   El cursor es el de siempre a proposito: nada aca invita a tocar, porque tocar
   no hace nada. Para trabajar esta la hoja de ruta, a un boton de distancia. */
.c-mapa { margin: .9rem 0 0; }
.c-mapa__nota { margin: .45rem 0 0; font-size: .85rem; }

.geo-mapa--chico { border-radius: var(--c-radio-sm, 10px); }
.geo-mapa--chico .leaflet-container { cursor: default; }

/* El texto que se ve mientras Leaflet carga -y el que se queda para siempre si
   no carga nunca-. Que diga algo es lo que evita que un rectangulo gris de 340px
   se lea como una pantalla rota. */
.geo-mapa__espera {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
}

/* El pin numerado. El numero es como el chofer y la oficina nombran una parada
   entre ellos ("me falta la 7"), asi que el mapa habla el mismo idioma que la
   lista de al lado y que la hoja de ruta del telefono. Un globito sin numero
   obligaria a contar pines para saber cual es cual. */
/* LOS COLORES DE LOS PINES VAN FIJOS Y NO EN VARIABLES DEL TEMA.

   Esto no es una preferencia de estilo: es un bug que ya ocurrio. Estaban en
   `var(--texto)` sobre `var(--fondo)`, y en modo ruta -cuando el chofer esta
   andando y la aplicacion entera se pone negra- esas dos variables se dan vuelta:
   --texto pasa a ser casi blanco. El pin pendiente quedaba BLANCO con borde
   blanco sobre los cuadraditos claros del mapa, o sea invisible, justo en la
   pantalla donde mas importa saber que falta. El rojo corria la misma suerte:
   en modo ruta --rojo es un rosado palido que sobre un mapa claro no se lee.

   El mapa siempre es claro, encienda la aplicacion la luz que encienda. Asi que
   los pines se pintan contra el mapa y no contra la pagina. */
.geo-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1f2d3d;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* Los mismos tres estados que las insignias de la lista y que las tarjetas de la
   hoja de ruta. Si el mapa dijera una cosa y la lista otra, habria que mirar las
   dos para creerle a alguna.

   Oscuro = te falta. Verde = entregada. Rojo = no se pudo. */
.geo-pin--ok    { background: #15803d; color: #fff; }
.geo-pin--falla { background: #c02626; color: #fff; }

/* LA SIGUIENTE. Es el mismo "Tu siguiente parada" de la hoja de ruta, dicho en
   el mapa: la primera que le falta, con un anillo para encontrarla entre doce
   sin contar pines. Sin esto, doce circulos oscuros iguales obligan a leer los
   numeros uno por uno con el telefono en una mano. */
.geo-pin--proxima {
    background: #0b1220;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .9), 0 2px 6px rgba(0, 0, 0, .45);
    transform: scale(1.12);
}

/* EL PIN RAYADO ES EL AVISO MAS IMPORTANTE DEL MAPA.
   Cuando el numero de la calle no existe en los datos, el geocodificador
   devuelve la CALLE y contesta que si. Ese pin se ve igual que uno bueno y puede
   estar a kilometros: "Av. Americo Vespucio 1737" sin numero cae en un anillo de
   mas de cuarenta kilometros que cruza media ciudad.
   El borde discontinuo lo dice sin texto, que es como se lee un mapa. */
.geo-pin--aprox {
    border-style: dashed;
    border-color: var(--ambar);
    opacity: .85;
}

/* El pin del mapa chico. Mismo diseno, menos tamano: en 170 pixeles de alto,
   cinco pines de 28px se pisan entre ellos y no se lee ninguno. */
.geo-pin--chico {
    width: 22px;
    height: 22px;
    border-width: 1.5px;
    font-size: .7rem;
}

/* --- Que significa cada color -------------------------------------------
   Una linea debajo del mapa, con los mismos circulos que estan arriba. Se arma
   con los estados que de verdad aparecen (ver rok_geocod_leyenda()): antes de
   salir esta todo pendiente, y explicar ahi el verde y el rojo seria describir
   dos cosas que no estan en pantalla.

   El anillo de "la que sigue" es el que mas necesita la linea: un circulo con
   borde verde no significa nada por si mismo, y es justo el que hay que
   encontrar primero. */
.geo-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: .55rem 0 0;
    font-size: .82rem;
    color: var(--texto-suave);
}
.geo-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.geo-leyenda__pin {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #1f2d3d;
    border: 1.5px solid #fff;
    flex: 0 0 auto;
}

/* LOS TRES COLORES SE REPITEN ACA CON MAS PESO, Y NO ES REDUNDANCIA.
   `.geo-leyenda__pin` y `.geo-pin--ok` pesan lo mismo -una clase cada una- y
   esta viene despues en el archivo, asi que el fondo gris ganaba: la leyenda
   salia con cuatro circulos identicos explicando cuatro colores distintos. Se
   vio recien al pintarla; leyendo el CSS no se nota. */
.geo-leyenda .geo-pin--ok    { background: #15803d; }
.geo-leyenda .geo-pin--falla { background: #c02626; }
.geo-leyenda .geo-pin--proxima {
    background: #0b1220;
    /* El anillo se achica con el pin: en 13px, los 3px del mapa lo tapan. */
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .95);
    transform: none;
}

/* La barra de guardar el orden nuevo. Nace escondida: aparece recien cuando hay
   un orden distinto que guardar. Un boton "Guardar" siempre visible invita a
   apretarlo sin haber cambiado nada. */
.geo-guardar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .7rem 0 0;
}
/* Sin esto el display:flex de arriba le gana al atributo hidden y "Guardar este
   orden" se veia siempre, antes de tocar un solo pin. mapa.js lo muestra recien
   cuando se arma un orden nuevo. */
.geo-guardar[hidden] { display: none; }

/* Las flechas de la lista. Chicas y al lado de la insignia: mover una parada de
   puesto pasa una vez al armar la hoja, no todo el rato. Pero son el camino que
   funciona SIEMPRE -sin mapa, sin coordenadas y sin JavaScript- asi que no
   pueden faltar por muy secundarias que sean. */
.geo-mover {
    display: inline-flex;
    gap: .2rem;
    margin-right: .4rem;
    vertical-align: middle;
}
.geo-mover form { display: inline; margin: 0; }
.geo-mover button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: .35rem;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
.geo-mover button:hover { color: var(--texto); border-color: var(--texto-tenue); }

/* Leaflet pinta su propio texto con su tipografia; sin esto el pie de
   atribucion y los globos entran con serif y se ven de otra aplicacion. */
.leaflet-container { font: inherit; }

/* --- La fila de ir y llamar ----------------------------------------------
   Las dos cosas que el chofer hace ANTES de bajarse. Van juntas, arriba del
   boton de marcar, porque en el tiempo ocurren antes. */
.c-ir {
    display: flex;
    gap: .5rem;
    margin: .95rem 0 0;
}
.c-ir__mapa {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--c-tap-sm);
    padding: 0 1rem;
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    color: var(--texto);
    font-size: var(--c-fs);
    font-weight: 700;
    text-decoration: none;
}
.c-ir__mapa:active { background: var(--borde-suave); }
.c-ir__mapa svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--verde-600); }
body[data-ruta="abierta"] .c-ir__mapa svg { color: var(--verde-400); }

.c-ir__tel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--c-tap-sm);
    min-height: var(--c-tap-sm);
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    color: var(--texto);
}
.c-ir__tel svg { width: 20px; height: 20px; }

/* Waze como enlace chico debajo. En Chile es lo que la mayoria tiene abierto
   todo el dia, y mandarlos siempre a Google Maps es obligarlos a copiar y
   pegar. Va en voz baja para no competir con el boton. */
.c-ir__alt {
    display: inline-block;
    margin: .5rem 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-tenue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- El boton de marcar --------------------------------------------------- */
.c-marcar {
    display: block;
    width: 100%;
    margin: 1rem 0 0;
    min-height: 3.9rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .01em;
}

/* --- Las que ya estan ----------------------------------------------------
   Una linea. Se abre al tocar y adentro esta todo lo de siempre, incluido lo
   que hay que apretar para corregirse. Plegada por defecto porque una parada
   entregada ya no es trabajo: es historia, y la historia no puede ocupar el
   mismo espacio que lo que falta. */
.c-parada--hecha,
.c-parada--falla {
    padding: 0;
    margin-bottom: .5rem;
    box-shadow: none;
    background: transparent;
}
.c-parada--hecha { border-color: var(--borde-suave); }
.c-parada--falla { border-color: color-mix(in srgb, var(--ambar) 35%, transparent); }

.c-parada--hecha > summary,
.c-parada--falla > summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: var(--c-tap);
    padding: .55rem .9rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--c-radio);
}
.c-parada--hecha > summary::-webkit-details-marker,
.c-parada--falla > summary::-webkit-details-marker { display: none; }
.c-parada--hecha > summary:focus-visible,
.c-parada--falla > summary:focus-visible {
    outline: 2px solid var(--verde-500);
    outline-offset: -2px;
}

/* El check. Es el premio de la parada y es lo primero que se ve de la fila. */
.c-tic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--verde-500);
    color: #04140a;
}
.c-tic svg { width: 15px; height: 15px; }
.c-tic--falla { background: var(--ambar); }

.c-linea { min-width: 0; flex: 1 1 auto; }
.c-linea__dir {
    display: block;
    font-size: var(--c-fs);
    font-weight: 600;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.c-linea__meta {
    display: block;
    margin-top: .1rem;
    font-size: .87rem;
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
}

/* La flecha que dice que esto se abre. Gira al abrirse. */
.c-linea__abrir {
    flex: 0 0 auto;
    color: var(--texto-tenue);
    transition: transform .2s ease;
}
.c-linea__abrir svg { width: 20px; height: 20px; display: block; }
.c-parada[open] .c-linea__abrir { transform: rotate(180deg); }

.c-parada__detalle { padding: .2rem .9rem 1rem; }

/* Deshacer: se puede, no se ofrece. Texto y no boton, y adentro del plegable
   -que es donde vive todo lo de una parada ya marcada- para que no compita con
   ninguna accion real. */
.c-deshacer {
    display: block;
    width: 100%;
    margin: .9rem 0 0;
    padding: .6rem;
    background: none;
    border: 0;
    color: var(--texto-tenue);
    font: inherit;
    font-size: var(--c-fs-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.c-deshacer:hover { color: var(--texto-suave); }

/* --- Las miniaturas del respaldo ----------------------------------------- */
.c-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .8rem 0 0;
}
.c-fotos img,
.c-fotos video {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--c-radio-sm);
    border: 1px solid var(--borde);
    display: block;
    background: var(--superficie-2);
}
.c-fotos video { width: 150px; }

/* La cruz de borrar, sobre la esquina de cada miniatura.
   -------------------------------------------------------------------------
   La foto se saca de pie y a contraluz: sale movida, sale el piso, o sale la
   guia del cliente anterior. Sin esta cruz eso queda pegado a la entrega para
   siempre, y una pantalla donde equivocarse no tiene arreglo es una pantalla
   donde la gente deja de mandar fotos.

   32px y no los 44 de todo lo que se toca en este modo, a proposito y por dos
   motivos: sobre una miniatura de 96 una cruz de 44 tapa media foto -y la foto
   es lo que el chofer vino a mirar-, y esto es lo unico de la pantalla que
   destruye algo. Se puede acertar; no se acierta sin querer. El freno de
   verdad es el confirm(), no el tamano. */
.c-fotos__una {
    position: relative;
    display: block;
    line-height: 0;
}
.c-fotos__borrar {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    line-height: 0;
}
.c-fotos__borrar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    /* Casi negro y no rojo: el rojo de esta app es "no se pudo entregar", y una
       fila de fotos con cuatro puntos rojos encima se lee como cuatro entregas
       falladas. */
    background: rgba(10, 14, 12, .74);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.c-fotos__borrar button:hover { background: var(--rojo); border-color: var(--rojo); }
.c-fotos__borrar button:focus-visible { box-shadow: var(--anillo); }

/* El video trae sus propios controles abajo; la cruz arriba no los tapa. */
.c-fotos__una video { display: block; }


/* --- El respaldo que se guarda solo ---------------------------------------
   La foto que el chofer acaba de sacar aparece en pantalla ANTES de subir, con
   el archivo del telefono, y le cae el tic cuando quedo guardada. Es la regla
   de todo el modulo: el chofer no lee, tiene que VER que la guia quedo. Un
   renglon que dice "guardado" no es lo mismo que la foto con su tic.

   Los tres estados son los tres que existen de verdad:
     esta-subiendo    va en camino. Apagada y latiendo.
     esta-guardada    quedo en el servidor. Tic verde.
     esta-en-espera   no salio. Anillo ambar: no se perdio, viaja con el boton.
   ------------------------------------------------------------------------- */
.c-respaldo__fotos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -.2rem 0 .9rem;
}
.c-respaldo__foto {
    position: relative;
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--c-radio-sm);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--superficie-2);
}
.c-respaldo__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.c-respaldo__foto-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-suave);
}

.c-respaldo__tic {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--verde-500);
    color: #04140a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, 1.3, .4, 1);
}

/* La cruz de borrar, arriba, y el tic abajo: no se pisan y cada uno dice lo
   suyo. La pone ruta.js cuando el servidor contesta con el id -antes no hay
   nada que borrar-, asi que en el HTML no existe y en una pantalla sin
   JavaScript tampoco aparece. Ahi la foto se saca despues de recargar, con la
   cruz que pinta PHP sobre las miniaturas ya guardadas. */
.c-respaldo__borrar {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(10, 14, 12, .74);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.c-respaldo__borrar:hover { background: var(--rojo); border-color: var(--rojo); }
.c-respaldo__borrar:focus-visible { box-shadow: var(--anillo); }
.c-respaldo__borrar[disabled] { opacity: .5; cursor: default; }

/* Mientras se esta borrando la celda late igual que cuando subia, y la cruz se
   queda quieta encima: es la misma espera y se dice de la misma forma. */
.c-respaldo__foto.esta-subiendo    { opacity: .5; animation: rok-respaldo-late 1.1s ease-in-out infinite; }
.c-respaldo__foto.esta-guardada    { border-color: rgba(74, 222, 128, .55); }
.c-respaldo__foto.esta-guardada .c-respaldo__tic { opacity: 1; transform: none; }
.c-respaldo__foto.esta-en-espera   { border-color: var(--ambar); opacity: .78; }

@keyframes rok-respaldo-late {
    0%, 100% { opacity: .45; }
    50%      { opacity: .75; }
}

/* El renglon de estado. Sale escondido: sin JavaScript no dice nada, porque sin
   JavaScript no se guarda solo y anunciarlo seria mentir. */
.c-respaldo__estado {
    margin: -.3rem 0 .2rem;
    font-size: var(--c-fs-sm);
    color: var(--texto-tenue);
    line-height: 1.4;
}
.c-respaldo__estado.es-listo  { color: var(--verde-400); font-weight: 700; }
.c-respaldo__estado.es-espera { color: var(--ambar); }

@media (prefers-reduced-motion: reduce) {
    .c-respaldo__foto.esta-subiendo { animation: none; }
    .c-respaldo__tic { transition: none; }
}


/* -----------------------------------------------------------------------------
   28.8  EL PERMISO DE UBICACION
   -----------------------------------------------------------------------------
   Se pregunta UNA vez, en la app y antes que el navegador. El dialogo del
   sistema es una linea sin contexto -"rutaok.cl quiere saber tu ubicacion"- y a
   esa pregunta la mitad de la gente contesta que no por reflejo, y despues no
   hay como volver atras sin entrar a la configuracion del telefono.

   Preguntar antes, con las palabras del chofer y diciendo que gana EL, es la
   diferencia entre que lo acepte o que lo bloquee para siempre.
   ----------------------------------------------------------------------------- */
.c-permiso {
    border: 1px solid rgba(74, 222, 128, .3);
    border-radius: var(--c-radio);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(34, 197, 94, .1), transparent 60%),
        var(--superficie);
    padding: 1.15rem;
    margin: 0 0 1rem;
}
.c-permiso__titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .5rem;
    font-size: var(--c-fs-md);
    font-weight: 800;
}
.c-permiso__titulo svg { width: 22px; height: 22px; color: var(--verde-600); flex: 0 0 auto; }
body[data-ruta="abierta"] .c-permiso__titulo svg { color: var(--verde-400); }
.c-permiso p { margin: 0 0 .35rem; font-size: var(--c-fs); line-height: 1.5; }
.c-permiso__acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-top: 1rem;
}
.c-permiso__acciones .boton { width: 100%; }

/* El estado, cuando ya contesto. Una linea al pie de la pantalla y no una
   tarjeta: ya no es una pregunta, es un ajuste. */
.c-geo-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 0;
    padding: .85rem 1rem;
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    font-size: var(--c-fs-sm);
    color: var(--texto-suave);
}
.c-geo-estado form { margin: 0; }
.c-geo-estado button {
    background: none;
    border: 0;
    padding: .3rem 0;
    color: var(--verde-600);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
body[data-ruta="abierta"] .c-geo-estado button { color: var(--verde-400); }


/* -----------------------------------------------------------------------------
   28.9  EL CIERRE
   -----------------------------------------------------------------------------
   Cuando la ultima parada queda marcada, la pantalla lo dice. Antes no pasaba
   nada: el chofer marcaba la doceava igual que la primera y se quedaba mirando
   una lista de doce lineas verdes sin saber si tenia que hacer algo mas.

   Ese momento es el unico "premio" del modulo, y es suficiente. No hacen falta
   medallas: el chofer quiere terminar, no coleccionar.
   ----------------------------------------------------------------------------- */
.c-cierre {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 1.9rem 1.25rem 1.5rem;
    border-radius: var(--c-radio);
    border: 1px solid rgba(74, 222, 128, .35);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(34, 197, 94, .18), transparent 65%),
        var(--superficie);
    margin: 0 0 1rem;
}
/* Desde que el cierre bajo al final de la hoja de ruta, el aire va arriba y no
   abajo: lo que sigue es la barra pegada al borde, no otra tarjeta. */
.c-cierre--final { margin: 1.6rem 0 0; }
.c-cierre__tic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--verde-500);
    color: #04140a;
    margin: 0 0 .85rem;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, .12);
}
.c-cierre__tic svg { width: 30px; height: 30px; }
.c-cierre h2 { margin: 0 0 .3rem; font-size: var(--c-fs-xl); }
.c-cierre p  { margin: 0; color: var(--texto-suave); }
.c-cierre .boton { margin-top: 1.2rem; }

/* El resumen, al terminar. Los numeros de la vuelta en grande: es lo que el
   chofer mira una vez, al final, y lo que le hace sentir que el dia cundio. */
.c-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin: 1.2rem 0 0;
}
.c-resumen__dato {
    padding: .8rem .5rem;
    border-radius: var(--c-radio-sm);
    background: var(--superficie-2);
    text-align: center;
}
.c-resumen__n {
    display: block;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--texto);
}
.c-resumen__q {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--texto-tenue);
    letter-spacing: .02em;
}


/* -----------------------------------------------------------------------------
   28.10  LA TARJETA VIVA Y LA BARRA DE ABAJO
   -----------------------------------------------------------------------------
   Ajustes sobre el bloque 27: los mismos elementos, en la escala del modo.
   ----------------------------------------------------------------------------- */
.ruta-viva { border-radius: var(--c-radio); }
.ruta-viva__desde  { font-size: var(--c-fs); }
.ruta-viva__datos  { font-size: var(--c-fs-sm); }
.ruta-viva__accion { min-height: 3.9rem; font-size: 1.2rem; font-weight: 800; }

/* La direccion en la escala del modo: --c-fs-lg es el tamano que este bloque
   reserva justo para eso, "la direccion, el nombre del cliente". */
.ruta-viva__donde  { font-size: var(--c-fs-lg); }
.ruta-viva__comuna { font-size: var(--c-fs); }
.ruta-viva__ref    { font-size: var(--c-fs-sm); }

/* El bloque de cerrar, al final de la pagina. */
.ruta-cierre__accion    { min-height: 3.9rem; font-size: 1.2rem; font-weight: 800; }
.ruta-cierre__que       { font-size: var(--c-fs-sm); }
.ruta-cierre__descartar { font-size: var(--c-fs-sm); }
.ruta-cierre__nota      { font-size: .89rem; line-height: 1.55; }

.ruta-pie .boton { min-height: 3.7rem; font-size: 1.12rem; }


/* -----------------------------------------------------------------------------
   28.11  RESPONSIVE
   -----------------------------------------------------------------------------
   El telefono es el caso principal y no el excepcional: todo lo de arriba ya
   esta escrito para una columna angosta. Aca solo se arregla lo que se rompe en
   los dos extremos.
   ----------------------------------------------------------------------------- */

/* Pantallas muy angostas -un Android de trabajo de 360px- o con la letra del
   sistema agrandada, que es justo lo que tiene configurado quien mas necesita
   esto. Lo que se hace es apilar, nunca encoger. */
@media (max-width: 400px) {
    body.modo-conducir { --c-fs: 1.03rem; }

    .c-parada { padding: 1rem .9rem; }
    .c-parada--proxima .c-parada__dir { font-size: 1.35rem; }

    /* La patente se va a su propia linea antes que empujar el nombre del
       trabajo fuera de la pantalla. */
    .hud__fila--sub { flex-wrap: wrap; }

    /* Dos botones de 3.5rem no caben al lado en 360px. */
    .c-acciones--par,
    .c-permiso__acciones { grid-template-columns: 1fr; }

    /* El resumen se queda en TRES columnas incluso aca. En dos, el tercer dato
       cae solo a una segunda fila y deja de leerse como un resumen: pasa a
       parecer un dato aparte. Lo que se achica es la etiqueta, no la grilla. */
    .c-resumen { gap: .4rem; }
    .c-resumen__dato { padding: .75rem .3rem; }
    .c-resumen__n { font-size: 1.32rem; }
    .c-resumen__q { font-size: .74rem; letter-spacing: 0; }

    .c-fotos img { width: 84px; height: 84px; }
}

/* En tablet y escritorio la columna no se estira: una linea de 90 caracteres no
   se lee mejor por ser mas ancha, y esta pantalla se disena para el telefono
   aunque a veces se abra en otra cosa. Lo que si se hace es dar mas aire y
   subir un punto la escala. */
@media (min-width: 600px) {
    body.modo-conducir { --c-fs: 1.09rem; }
    .c-parada,
    .c-tarea,
    body.modo-conducir .tarjeta { padding: 1.4rem; }
}

/* Pantalla ancha: el HUD centra su contenido sobre la misma columna que el
   contenido, para que no queden el estado y el boton de salir en dos esquinas
   separadas por medio metro de vacio. */
@media (min-width: 720px) {
    .barra--conducir > * {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Apaisado en un telefono: el HUD se comeria un tercio del alto util. Se
   comprime sin perder ninguna de las tres filas. */
@media (max-height: 460px) and (orientation: landscape) {
    .barra--conducir {
        padding-top: calc(.35rem + env(safe-area-inset-top));
        padding-bottom: .35rem;
    }
    .hud__fila   { min-height: 2rem; }
    .hud__avance { margin-top: .3rem; }
    .c-parada--proxima .c-parada__dir { font-size: 1.3rem; }
}


/* -----------------------------------------------------------------------------
   28.12  MENOS MOVIMIENTO
   -----------------------------------------------------------------------------
   Se apaga todo lo que late. El estado se sigue entendiendo por el color, por la
   forma de la tarjeta y por el reloj, que son los que llevan la informacion; lo
   que se mueve solo la subraya.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hud__punto,
    body[data-ruta="abierta"] .hud__punto,
    .c-parada--proxima::before { animation: none; }

    .hud__barra > span,
    .c-mini-avance__barra > span,
    .c-linea__abrir { transition: none; }
}


/* -----------------------------------------------------------------------------
   28.13  EL CAMBIO DE MODO NO GOLPEA
   -----------------------------------------------------------------------------
   Terminar la ruta lleva de una pantalla negra a una blanca, y entremedio hay una
   navegacion completa: son dos documentos distintos, asi que no hay ninguna
   transicion CSS que pueda cruzarlos. El resultado era un flash blanco de golpe,
   que ademas es lo peor que le puedes hacer a alguien que viene mirando una
   pantalla oscura en la cabina.

   La solucion es una capa que entra pintada del color de la pantalla ANTERIOR y
   se desvanece encima de la nueva. Como es la pantalla vieja la que se va, se ve
   como un fundido entre las dos.

   Tres detalles que la hacen invisible cuando funciona bien:

     - La clase la pone un script en el <head>, ANTES del primer pintado. Si se
       pusiera al cargar el body ya se habria visto el flash que queremos evitar.
     - pointer-events: none. Nunca puede tragarse un toque, ni siquiera si algo
       sale mal y se queda puesta.
     - El color viene en --rok-fundido-desde, que escribe ese mismo script
       leyendo lo que dejo la pantalla anterior en sessionStorage.

   Sin JavaScript no pasa nada de esto y el cambio es el de siempre: brusco, pero
   funcionando. Es adorno, no estructura.
   ----------------------------------------------------------------------------- */
html.rok-fundido::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--rok-fundido-desde, #04080a);
    animation: rok-fundido .4s ease-out forwards;
}
@keyframes rok-fundido {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Quien pidio menos movimiento igual gana algo: el corte se suaviza, pero en la
   mitad del tiempo y sin que se note como una animacion. */
@media (prefers-reduced-motion: reduce) {
    html.rok-fundido::after { animation-duration: .15s; }
}


/* -----------------------------------------------------------------------------
   28.14  LO QUE QUEDO GUARDADO EN EL TELEFONO
   -----------------------------------------------------------------------------
   El chofer marco una entrega sin senal. La marca esta a salvo -en IndexedDB- y
   se va a mandar sola, pero el servidor todavia no sabe nada. Estas reglas son lo
   unico que se lo dice.

   La regla de tono: NO es un error. Es "listo, esto ya quedo". Por eso es verde
   apagado y no ambar: el chofer hizo bien su trabajo y no tiene que hacer nada
   mas. El ambar es para lo que le pide algo.

   Todo esto lo pinta assets/js/cola.js. Sin ese archivo, ninguna de estas clases
   aparece nunca.
   ----------------------------------------------------------------------------- */

/* La pastilla del HUD: cuantas van esperando. */
.hud__cola {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}
.hud__cola::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
    animation: rok-espera 1.8s ease-in-out infinite;
}

/* Con la pastilla puesta y una pantalla angosta no caben el rotulo, el reloj y
   la pastilla en la misma linea: se pisaban. El que sobra es el rotulo, porque
   el punto que late y el reloj ya dicen que hay una ruta andando.

   La clase la pone assets/js/cola.js cuando hay algo esperando, y la saca
   cuando la cola queda vacia. */
@media (max-width: 480px) {
    .barra--conducir.tiene-cola .hud__que { display: none; }
}
@keyframes rok-espera {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

/* La tarjeta de una parada que ya se marco pero todavia no salio del telefono.
   Se apaga un poco: sigue siendo legible -hay que poder leer la direccion- pero
   deja de estar entre las que faltan. */
.c-parada.es-encolada {
    opacity: .78;
    border-color: color-mix(in srgb, var(--verde-500) 40%, var(--borde));
}

.c-encola {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .9rem 0 0;
    padding: .75rem .9rem;
    border-radius: var(--c-radio-sm);
    background: var(--verde-claro);
    color: var(--verde-600);
    font-size: var(--c-fs-sm);
    font-weight: 600;
    line-height: 1.45;
}
.c-encola::before {
    content: "\2713";
    font-weight: 800;
    flex: 0 0 auto;
}
body[data-ruta="abierta"] .c-encola {
    background: rgba(74, 222, 128, .1);
    color: var(--verde-400);
}

/* El aviso que aparece justo despues de apretar el boton sin senal. Arriba del
   contenido, grande, y se va solo a los seis segundos: el chofer ya lo leyo y no
   tiene que cerrarlo con el pulgar. */
.c-aviso-cola {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--c-radio);
    border: 1px solid rgba(74, 222, 128, .35);
    background: var(--verde-claro);
    color: var(--verde-600);
    font-size: var(--c-fs);
    font-weight: 700;
    line-height: 1.45;
    animation: rok-entra-aviso .28s var(--curva, ease-out);
}
body[data-ruta="abierta"] .c-aviso-cola {
    background: rgba(74, 222, 128, .12);
    color: #d8f5e4;
}
@keyframes rok-entra-aviso {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hud__cola::before { animation: none; opacity: .8; }
    .c-aviso-cola { animation: none; }
}


/* -----------------------------------------------------------------------------
   28.15  EL SELLO: LO QUE SE VE CUANDO UN ENVIO QUEDO
   -----------------------------------------------------------------------------
   Apretar "Entregado" terminaba en una rueda que gira y en una recarga entera
   de la pagina. La tarjeta se iba, si, pero se iba ENTRE dos pantallas: el
   chofer veia un boton gris, despues nada, despues otra pagina con un cartel
   verde arriba. Eso se lee como "se recargo", no como "lo logre"; y el cartel
   es texto, en una pantalla que ademas se movio sola al tope.

   Ahora lo que paso se cuenta ENCIMA de la tarjeta que el dedo acaba de tocar
   y ANTES de navegar, en tres actos que dirige assets/js/ruta.js:

     1. El toque.   Vibra, y la tarjeta se hunde apenas (.es-enviando).
     2. El sello.   Un barrido de color sube desde el boton y cubre la tarjeta
                    entera; encima se dibuja un check del ancho de la mano.
                    Verde si quedo entregada, ambar si no se pudo, gris si
                    vuelve a pendiente, amarillo si quedo en el telefono.
     3. La posta.   La tarjeta se desinfla, la que sigue se enciende con su
                    etiqueta, y el numero de "Te faltan" gira al siguiente.

   Recien ahi se navega. La recarga deja de ser el evento y pasa a ser el
   tramite de despues; y al volver, el recibo (.es-recien) pulsa una vez sobre
   la fila donde quedo guardada, para que el ojo vea A DONDE fue.

   Los formularios chicos -guardar una foto, anotar la direccion, un reporte-
   no sellan la tarjeta: su boton se pone verde y dice "Listo" (.es-listo), y al
   volver pulsa la parada a la que pertenecen.

   Todo esto es adorno sobre algo que ya funciona: sin JavaScript, o si ruta.js
   no carga, el envio sale igual y la pagina se recarga como siempre.
   ----------------------------------------------------------------------------- */

/* --- 1. El toque ---------------------------------------------------------- */
.c-marcar:active,
.c-orden__boton:active { transform: scale(.975); }

/* La tarjeta que acaba de mandar algo se hunde un poco mientras espera. Es la
   diferencia entre "apretaste" y "no paso nada". Lo saca el sello o, si el
   envio termino en otra cosa, la recarga. */
.c-parada.es-enviando {
    transform: scale(.985);
    transition: transform .18s var(--curva-firme);
}

/* Y la pagina entera entra con un fundido corto en cada carga. Es lo que hace
   que la recarga se sienta como una transicion y no como un parpadeo. Solo
   opacidad: es lo unico que un Android de gama baja pinta gratis. */
body.modo-conducir .contenido { animation: rok-llega .3s ease-out; }
@keyframes rok-llega {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* El detalle de una parada ya marcada se despliega igual que un plegable. */
.c-parada__detalle { animation: desplegar var(--vel) var(--curva); }

/* --- 2. El sello ---------------------------------------------------------- */
.tiene-sello {
    position: relative;
    overflow: hidden;
}
.sello {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: inherit;
    color: #fff;
    /* Los mismos verdes del HUD: sobre 5:1 con texto blanco, al sol. */
    background: linear-gradient(160deg, #16a34a 0%, #0f6a37 100%);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .26s var(--curva-firme), opacity .3s ease;
    pointer-events: none;
}
.sello.es-visible  { transform: scaleY(1); }
.sello.se-esconde  { opacity: 0; }

.sello--fallido   { background: linear-gradient(160deg, #d97706 0%, #92400e 100%); }
.sello--pendiente { background: linear-gradient(160deg, #475569 0%, #1e293b 100%); }
.sello--cola      { background: linear-gradient(160deg, #ca8a04 0%, #854d0e 100%); }

/* Lo de adentro no se estira con el barrido: aparece cuando el barrido llego. */
.sello__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease .16s;
}
.sello.es-visible .sello__cuerpo { opacity: 1; }

/* El check. Del ancho de la mano, y se dibuja solo: el aro primero, el trazo
   despues. Es el "resultado" para el que no va a leer nada. */
.sello__icono {
    width: 5.2rem;
    height: 5.2rem;
    transform: scale(.55);
    transition: transform .45s var(--curva-rebote) .14s;
}
.sello.es-visible .sello__icono { transform: scale(1); }
.sello__icono svg { display: block; width: 100%; height: 100%; }

.sello__aro {
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    transition: stroke-dashoffset .5s ease-out .12s;
}
.sello__trazo {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset .3s ease-out .42s;
}
.sello.es-visible .sello__aro,
.sello.es-visible .sello__trazo { stroke-dashoffset: 0; }

.sello__titulo {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}
/* La direccion, para el que si lee: dice CUAL quedo. */
.sello__sub {
    max-width: 100%;
    font-size: var(--c-fs-sm);
    font-weight: 600;
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En una caja baja -la tarjeta del boton del check-in- todo un escalon menos. */
.sello--chico .sello__icono  { width: 3.4rem; height: 3.4rem; }
.sello--chico .sello__titulo { font-size: 1.25rem; }

/* --- 3. La posta ---------------------------------------------------------- */

/* La tarjeta se desinfla hacia arriba. El alto de partida lo pone ruta.js en
   linea -CSS no puede animar desde `auto`- y aca se lleva a cero junto con
   todo lo que ocupa espacio alrededor. */
.c-parada.se-va {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    opacity: 0;
    transition: height .34s var(--curva-firme), padding .34s var(--curva-firme),
                margin .34s var(--curva-firme), border-width .34s var(--curva-firme),
                opacity .22s ease;
}

/* La que sigue se enciende: un anillo verde que se abre y se asienta en el
   filo de siempre. Es lo que dice "ahora esta", sin leer la etiqueta. */
.c-parada--se-enciende { animation: rok-enciende .75s ease-out; }
.c-parada--se-enciende .c-parada__etiqueta { animation: rok-llega-desde-arriba .4s ease-out .15s both; }
.c-parada--se-enciende .c-parada__dir { transition: font-size .3s var(--curva); }
.c-parada--se-enciende .c-parada__n   { transition: background-color .3s ease, color .3s ease; }
@keyframes rok-enciende {
    0%   { box-shadow: var(--sombra), 0 0 0 0 rgba(74, 222, 128, 0); }
    35%  { box-shadow: var(--sombra), 0 0 0 6px rgba(74, 222, 128, .35); }
    100% { box-shadow: var(--sombra), 0 0 0 1px rgba(74, 222, 128, .14); }
}
@keyframes rok-llega-desde-arriba {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Los numeros de las secciones giran: el viejo sale por arriba y el nuevo
   entra por abajo, como un cuentakilometros. */
.c-seccion__n { position: relative; overflow: hidden; }
.c-seccion__n .n-sale {
    display: inline-block;
    animation: rok-n-sale .3s var(--curva-firme) forwards;
}
.c-seccion__n .n-entra {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    animation: rok-n-entra .3s var(--curva-firme) forwards;
}
@keyframes rok-n-sale  { to   { transform: translateY(-120%); opacity: 0; } }
@keyframes rok-n-entra { from { transform: translateY(120%);  opacity: 0; } }

/* Subir y bajar: las dos tarjetas se cruzan antes de que la pagina se vaya.
   Aunque la recarga la corte a medio camino, ya se vio para donde fue. */
.c-parada.se-mueve {
    position: relative;
    z-index: 2;
    transition: transform .28s var(--curva-firme);
}

/* --- El boton chico: "Listo" ---------------------------------------------- */
.boton.es-listo {
    background: var(--verde-400);
    color: #04140a;
    border-color: transparent;
    pointer-events: none;
    animation: rok-pop .4s var(--curva-rebote);
}
.boton.es-listo svg {
    width: 1.3em;
    height: 1.3em;
    margin-right: .35em;
    vertical-align: -.28em;
}
@keyframes rok-pop {
    0%   { transform: scale(.92); }
    60%  { transform: scale(1.05); }
    100% { transform: none; }
}

/* --- El recibo: al volver, donde quedo ------------------------------------ */

/* Una capa verde que se apaga sobre la fila o la tarjeta recien tocada. Capa y
   no background-color: las tarjetas tienen su propio fondo con degradado y
   animarselo las hacia saltar al terminar. */
.es-recien { position: relative; }
.es-recien::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: rgba(34, 197, 94, .3);
    pointer-events: none;
    animation: rok-recien-capa 1.4s ease-out forwards;
}
.es-recien.c-parada--falla::after { background: rgba(245, 158, 11, .28); }
.es-recien .c-tic { animation: rok-pop .55s var(--curva-rebote) .1s both; }
@keyframes rok-recien-capa {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* La pantalla de cierre entra como un premio: el check grande salta y el
   texto llega detras. Es la ultima parada del dia y se lo merece. */
.c-cierre--recien .c-cierre__tic { animation: rok-pop-grande .7s var(--curva-rebote) .1s both; }
.c-cierre--recien h2         { animation: rok-llega-desde-arriba .45s ease-out .35s both; }
.c-cierre--recien p          { animation: rok-llega-desde-arriba .45s ease-out .45s both; }
.c-cierre--recien .c-resumen { animation: rok-llega-desde-arriba .45s ease-out .55s both; }
@keyframes rok-pop-grande {
    0%   { transform: scale(0);    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70%  { transform: scale(1.12); }
    100% { transform: none;        box-shadow: 0 0 0 8px rgba(34, 197, 94, .12); }
}

/* Despues de un check-in, un brillo cruza el HUD una vez: el estado de arriba
   cambio, y eso es lo que hay que mirar. El nodo lo pone y lo saca ruta.js. */
.barra--conducir.hud--recien { overflow: hidden; }
.hud__barrido {
    position: absolute;
    top: 0; bottom: 0;
    left: -45%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    pointer-events: none;
    animation: rok-hud-barrido .9s ease-out .15s both;
}
@keyframes rok-hud-barrido { to { left: 110%; } }

/* --- Menos movimiento ----------------------------------------------------- */
/* El sello se sigue viendo -es informacion, no adorno- pero aparece de una
   vez en lugar de barrer, y nada mas se mueve. */
@media (prefers-reduced-motion: reduce) {
    .sello,
    .sello__cuerpo,
    .sello__icono,
    .sello__aro,
    .sello__trazo,
    .c-parada.se-va,
    .c-parada.se-mueve,
    .c-parada.es-enviando,
    .c-parada--se-enciende .c-parada__dir,
    .c-parada--se-enciende .c-parada__n { transition: none; }

    body.modo-conducir .contenido,
    .c-parada__detalle,
    .c-parada--se-enciende,
    .c-parada--se-enciende .c-parada__etiqueta,
    .es-recien .c-tic,
    .c-cierre--recien .c-cierre__tic,
    .c-cierre--recien h2,
    .c-cierre--recien p,
    .c-cierre--recien .c-resumen,
    .hud__barrido,
    .boton.es-listo,
    .c-seccion__n .n-sale,
    .c-seccion__n .n-entra { animation: none; }

    .es-recien::after { display: none; }
    .c-seccion__n .n-sale  { display: none; }
    .c-seccion__n .n-entra { position: static; }
}


/* =============================================================================
   AGENDA, HISTORIAL Y CALENDARIO
   -----------------------------------------------------------------------------
   Todo lo que hizo falta para partir /rutas/ en pestanas y para que las mismas
   filas se puedan mirar como mes. Nada de esto pisa una clase que ya existiera:
   son nombres nuevos y viven al final a proposito.
   ============================================================================= */

/* --- Pestanas -------------------------------------------------------------
   Son enlaces, no botones: se abren en otra ventana, se guardan y el "atras"
   del navegador hace lo que se espera. Por eso llevan su propio foco visible y
   no heredan el de .boton. */
.pestanas {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    align-items: flex-end;
    border-bottom: 1px solid var(--borde);
    margin: 0 0 .2rem;
    padding: 0;
}
.pestana {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .95rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radio-chico) var(--radio-chico) 0 0;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    line-height: 1.2;
    /* El borde de abajo se dibuja por encima del de .pestanas: asi la activa se
       "abre" hacia el contenido en vez de quedar como una caja aparte. */
    margin-bottom: -1px;
    transition: color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.pestana:hover { color: var(--texto); background: var(--superficie-2); }
.pestana.es-activa {
    background: var(--superficie);
    border-color: var(--borde);
    border-bottom: 1px solid var(--superficie);
    color: var(--texto);
}
/* La cifra al lado del nombre. Es la que revela que el historial existe: una
   pestana sin numero no promete nada. */
.pestana__n {
    display: inline-block;
    min-width: 1.5em;
    padding: .1rem .38rem;
    border-radius: 999px;
    background: var(--fondo-alt);
    color: var(--texto-suave);
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pestana.es-activa .pestana__n {
    background: color-mix(in srgb, var(--verde-500) 16%, transparent);
    color: var(--verde-600);
}
.pestanas__ayuda { margin: .55rem 0 1.1rem; }

/* El mismo numero, dentro de un chip de filtro. */
.chip__n {
    margin-left: .1rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.chip.es-activo .chip__n { opacity: .85; }

/* --- Lo que se paso de fecha ----------------------------------------------
   Fuera de la lista y arriba de todo. Es lo unico de la pantalla que pide hacer
   algo hoy, y adentro de la agenda envejecia sin que nadie lo viera.

   Ambar y no rojo: no es un error, es trabajo pendiente. El rojo de esta app
   esta reservado para la plata que ya se paso de fecha. */
.franja-atraso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
    padding: .85rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
    border-left: 4px solid var(--ambar);
    border-radius: var(--radio-chico);
    background: var(--ambar-claro);
    color: var(--ambar);
}
.franja-atraso strong { display: block; font-size: .98rem; }
.franja-atraso .sutil { display: block; font-size: .85rem; color: inherit; opacity: .8; }
.franja-atraso .boton { flex: 0 0 auto; }

/* --- Encabezado de grupo dentro de una lista ------------------------------
   Cincuenta filas seguidas con la fecha metida en la linea gris no se leen. El
   encabezado hace ese trabajo una vez. Es pegajoso: al hacer scroll, saber en
   que dia se esta mirando vale mas que el pixel que ocupa. */
.grupo-lista {
    position: sticky;
    /* 5rem y no 0: la barra de arriba es sticky en top:0 con z-index 30, asi que
       un encabezado pegado a 0 se queda DEBAJO de ella y no se ve. El numero es
       el mismo `scroll-padding-top` que el proyecto ya declara en :root, o sea
       lo que la propia app considera que mide su barra. */
    top: 5rem;
    z-index: 2;
    margin: 1.3rem 0 .5rem;
    padding: .35rem 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde-suave);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.grupo-lista:first-child { margin-top: 0; }
.grupo-lista.es-hoy { color: var(--verde-600); }

/* --- Seleccion multiple ---------------------------------------------------
   La casilla va dentro de .documento__izq, que es flex: sin el flex:0 0 auto se
   encoge antes que el texto y queda un rectangulo de dos pixeles. */
.sel-casilla {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* Area de toque de 44px sin agrandar el dibujo de la casilla: el margen
       negativo devuelve el espacio que el padding le robo a la fila. */
    padding: .6rem;
    margin: -.6rem -.35rem -.6rem -.6rem;
    cursor: pointer;
}
.sel-casilla input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--verde-600); }

/* La barra flotante. Va pegada abajo porque la seleccion se arma mirando la
   lista, no mirando la barra: si estuviera arriba habria que volver a subir
   para actuar sobre lo que se acaba de marcar al final. */
.barra-seleccion {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    padding: .8rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    box-shadow: var(--sombra-alta);
}
/* SIN ESTA LINEA LA BARRA SE VE DESDE QUE CARGA LA PAGINA, sin que nadie haya
   marcado nada. `[hidden]` esconde por la hoja del navegador y cualquier regla
   de autor con `display` le gana: aca arriba hay un display:flex. Es la misma
   trampa que ya documenta el bloque de .lote-barra mas abajo, y el `hidden` que
   pone el servidor -y que el script apaga y prende- no hacia nada sin esto. */
.barra-seleccion[hidden] { display: none; }

.barra-seleccion__n { font-size: .92rem; }
.barra-seleccion__n strong { font-variant-numeric: tabular-nums; }
.barra-seleccion .boton[disabled] { opacity: .45; cursor: not-allowed; }
.barra-seleccion .boton[disabled]:hover { transform: none; }

/* Facturar / registrar pago en tanda: un panel chico que se abre hacia arriba
   desde la barra, que va pegada al pie de la pantalla. */
.barra-seleccion__mas { position: relative; display: inline-block; }
.barra-seleccion__mas > summary { list-style: none; }
.barra-seleccion__mas > summary::-webkit-details-marker { display: none; }
.barra-seleccion__panel {
    position: absolute;
    bottom: calc(100% + .5rem);
    right: 0;
    z-index: 6;
    display: grid;
    gap: .6rem;
    width: min(18rem, 86vw);
    padding: .9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie, var(--fondo));
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.barra-seleccion__panel label { display: grid; gap: .25rem; font-size: .88rem; }

/* --- Paginador ------------------------------------------------------------ */
.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 0;
}

/* =============================================================================
   CALENDARIO
   -----------------------------------------------------------------------------
   DOS DIBUJOS Y UN SOLO ORIGEN DE DATOS. El PHP pinta las dos formas y aca se
   esconde la que no toca:

     .cal--grilla   la cuadricula por semanas, con barras que cruzan dias
     .cal--lista    la lista por dia del telefono

   No es una sola forma que se encoge. Una barra de cinco columnas en un
   telefono de 375px son cinco casillas de 45px que no dicen nada; en la lista
   por dia esa misma barra aparece los cinco dias diciendo "dia 2 de 5", que es
   lo que alguien necesita saber mirando el telefono.

   -----------------------------------------------------------------------------
   COMO SE APILAN LAS BARRAS
   -----------------------------------------------------------------------------
   Cada semana es un grid de 7 columnas. Las celdas del dia van en
   `grid-row: 1 / -1`, o sea ocupan la fila entera: son el FONDO. Las barras se
   colocan encima con grid-column (que dia y cuantos) y grid-row (que carril),
   y esos numeros los calcula rok_agenda_carriles() en PHP.

   La fila 1 esta reservada para los numeros del dia. Por eso el carril 0 se
   dibuja en grid-row 2: si empezara en 1, la primera barra taparia la fecha.
   ============================================================================= */

/* --- Navegacion del mes --------------------------------------------------- */
.cal__barraMes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.cal__mover { display: flex; align-items: center; gap: .7rem; }
.cal__mes {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    /* El ancho minimo evita que las flechas salten de lugar entre "Mayo 2026" y
       "Septiembre 2026", que es lo que hace fallar el clic repetido. */
    min-width: 9.5em;
    text-align: center;
}

.cal {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra-chica);
    overflow: hidden;
}
/* Por omision manda la cuadricula; la lista aparece en el corte de telefono. */
.cal--lista { display: none; }

.cal__cabecera {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borde);
}
.cal__cabecera span {
    padding: .55rem .4rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

/* --- Una semana ------------------------------------------------------------
   grid-template-rows lo escribe el PHP: la primera fila es la de los numeros y
   las demas son los carriles que de verdad se usaron esa semana. Asi una semana
   con una sola barra no ocupa el mismo alto que una con cuatro. */
.cal__semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 2px;
    /* El minimo deja la semana vacia con forma de semana. Sin esto, una fila sin
       nada se colapsa a la altura de los numeros y el mes pierde la cuadricula. */
    min-height: 6.4rem;
    /* Y con align-content:start el sobrante de ese minimo queda ABAJO en vez de
       repartirse entre las filas. Sin esto, una semana con dos barras las pinta
       de 34px de alto para llenar el hueco, y las semanas cargadas -que si usan
       el espacio- quedan con barras mas flacas que las vacias. */
    align-content: start;
    padding-bottom: .3rem;
}

/* --- El fondo del dia ------------------------------------------------------
   Ocupa la fila entera de la semana (lo pone el PHP con grid-row:1/-1) y por eso
   es el fondo: las barras se dibujan encima sin pelearse por el espacio. */
.cal__dia {
    border-right: 1px solid var(--borde-suave);
    border-bottom: 1px solid var(--borde-suave);
    /* min-width:0 en una celda de grid no es opcional: sin el, un nombre largo
       ensancha su columna y descuadra las siete. */
    min-width: 0;
    padding: .3rem .35rem;
    position: relative;
}
.cal__dia:nth-child(7n) { border-right: 0; }
.cal__dia.es-otro-mes { background: var(--superficie-2); }
.cal__dia.es-otro-mes .cal__num { color: var(--texto-tenue); }
.cal__dia.es-hoy { background: color-mix(in srgb, var(--verde-500) 7%, transparent); }

/* --- El dia marcado ---------------------------------------------------------
   Franja a la izquierda y el fondo apenas tenido: pintar la celda entera del
   color elegido tapa las barras, que es lo que la persona vino a mirar.

   LA FRANJA ES UN PSEUDO-ELEMENTO Y NO UN border-left, y esa es toda la razon
   por la que existen degradados: `border-left: solid` solo acepta un color, y
   `color-mix()` tampoco sabe que hacer con un linear-gradient. Un background si.

   Por eso el color viaja en DOS variables: --dia-tira para la franja, que puede
   ser un degradado, y --dia-tinte para el lavado del fondo, que tiene que ser un
   color solido. Ver rok_agenda_colores(). */
.cal__dia.es-pintado,
.cal__diaLista.es-pintado {
    background: color-mix(in srgb, var(--dia-tinte, transparent) 8%, transparent);
}
.cal__dia.es-pintado::before,
.cal__diaLista.es-pintado::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dia-tira, var(--texto-tenue));
    /* Sigue el redondeo de la tarjeta en la lista del telefono; en la cuadricula
       la celda es cuadrada y hereda cero. */
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    pointer-events: none;
}
.cal__dia.es-pintado.es-hoy,
.cal__diaLista.es-pintado.es-hoy {
    background: color-mix(in srgb, var(--dia-tinte, transparent) 14%, transparent);
}

.cal__fecha { display: flex; align-items: center; gap: .35rem; min-height: 1.25rem; }
.cal__num {
    font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--texto);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
a.cal__num:hover { color: var(--verde-600); text-decoration: underline; }
.cal__dia.es-hoy .cal__num,
.cal__diaLista.es-hoy .cal__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.7em;
    border-radius: 999px;
    background: var(--verde-600);
    color: #fff;
}

/* El "+" de programar. Apagado hasta que el mouse entra en el dia: cuarenta y
   dos cruces siempre visibles compiten con lo que de verdad hay que leer. En
   pantallas tactiles no hay hover, asi que ahi se muestra siempre. */
.cal__agregar {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--texto-tenue);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.cal__dia:hover .cal__agregar,
.cal__diaLista:hover .cal__agregar,
.cal__agregar:focus { opacity: 1; }
.cal__agregar:hover {
    background: var(--verde-600);
    border-color: var(--verde-600);
    color: #fff;
    text-decoration: none;
}
@media (hover: none), (pointer: coarse) {
    .cal__agregar { opacity: .55; }
}

/* El nombre del dia solo existe para el telefono: en la cuadricula lo dice la
   fila de encabezados, y repetirlo en cada celda es ruido treinta veces. */
.cal__dow { display: none; }

/* La nota del dia. Es un item de la grilla y no un hijo de la celda: la celda
   ocupa la fila entera y hace de fondo, asi que una nota escrita adentro
   arrancaba justo donde el carril 0 pone la primera barra y se pisaban. Aca la
   nota vive en su propia fila y las barras empiezan en la siguiente. Cual es esa
   fila lo decide el PHP y no esta escrito aca: cuando la semana trae ademas
   algun vencimiento, esa fila se pone arriba de la nota y todo baja uno. Ver
   $filaVenc / $filaNota / $filaBase en rutas/agenda.php.

   Dos renglones como maximo: es la etiqueta del dia, no un documento, y lo que
   no cabe se lee entero en el title. */
.cal__nota {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 .35rem .1rem;
    padding: .1rem .3rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--texto) 5%, transparent);
    font-size: .7rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--texto-suave);
    /* Encima de las celdas de fondo, que van sin z-index. */
    position: relative;
    z-index: 1;
    min-width: 0;
}
/* En la lista del telefono la nota SI es hija del dia y fluye normal. */
.cal__diaLista .cal__nota { margin: 0; background: transparent; padding: 0; font-size: .8rem; }

/* --- La barra --------------------------------------------------------------
   Una sola pieza para la cuadricula y para la lista. En la cuadricula el PHP le
   pone grid-column y grid-row; en la lista no lleva estilo y fluye. */
.cal__barra {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    margin: 0 1px;
    padding: .18rem .4rem;
    border-radius: 5px;
    border-left: 3px solid var(--texto-tenue);
    background: var(--fondo-alt);
    color: var(--texto);
    font-size: .74rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    /* z-index sobre las celdas de fondo, que van sin z-index. */
    position: relative;
    z-index: 1;
    transition: filter var(--vel-rapida) ease;
}
.cal__barra:hover { filter: brightness(.94); text-decoration: none; }

.cal__barra__cabeza { font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cal__barra__quien {
    /* Encoge pero NO crece. Con flex-grow, en una barra que cruza cinco columnas
       el nombre se queda con todo el centro y empuja "5 dias" y la patente
       contra el borde derecho, a diez centimetros de lo que describen. Asi el
       contenido queda junto a la izquierda -como una reserva de hotel- y en una
       barra angosta el nombre sigue siendo el primero en recortarse. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal__barra__extra,
.cal__barra__tramo { flex: 0 0 auto; font-size: .68rem; opacity: .7; }
/* La fecha y el signo peso solo existen en una de las dos formas. */
.cal__barra__fecha { display: none; }
.cal__barra__signo { flex: 0 0 auto; font-weight: 700; opacity: .8; }

/* Los estados. Mismo lenguaje de color que las insignias del listado. */
.cal__barra--neutro  { border-left-color: var(--texto-tenue); }
.cal__barra--empresa { border-left-color: var(--marino-600); background: color-mix(in srgb, var(--marino-600) 10%, transparent); }
.cal__barra--ok      { border-left-color: var(--verde-600);  background: var(--verde-claro); }
.cal__barra--vencido { border-left-color: var(--rojo);       background: var(--rojo-claro); color: var(--rojo); }
.cal__barra--baja    { border-left-color: var(--texto-tenue); opacity: .5; text-decoration: line-through; }

/* --- Lo que dura varios dias -----------------------------------------------
   La barra larga se lee como una reserva: fondo mas solido y el nombre en
   negrita. No es decoracion, es la diferencia entre "cinco cosas sueltas" y
   "una cosa de cinco dias". */
.cal__barra--larga {
    font-weight: 600;
    border-left-width: 4px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 8%, transparent);
}
.cal__barra--larga .cal__barra__quien { font-weight: 700; }

/* Los cortes de semana. El lado cortado va recto y con una muesca: es lo que se
   lee como "esto viene de antes" o "esto sigue el lunes". */
.cal__barra.es-sigue-antes {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-style: dotted;
    margin-left: 0;
}
.cal__barra.es-sigue-despues {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    /* La flecha del borde derecho: dice que la barra no termina aca. */
    -webkit-clip-path: polygon(0 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, 0 100%);
    padding-right: .7rem;
}

/* --- El cobro, en el modo mezclado -----------------------------------------
   NO es otro color: es otro DIBUJO. Un color mas se confunde con un estado mas,
   y el modo mezclado ya usa los cuatro colores del estado. El borde cortado y el
   signo peso dicen "esto es plata" sin gastar ningun color. */
.cal__barra--cobro {
    border-left-style: dashed;
    border-top: 1px dashed color-mix(in srgb, var(--texto) 22%, transparent);
    border-bottom: 1px dashed color-mix(in srgb, var(--texto) 22%, transparent);
    border-right: 1px dashed color-mix(in srgb, var(--texto) 22%, transparent);
    background: transparent;
}
.cal__barra--cobro.cal__barra--ok      { background: color-mix(in srgb, var(--verde-500) 8%, transparent); }
.cal__barra--cobro.cal__barra--vencido { background: color-mix(in srgb, var(--rojo) 8%, transparent); }

/* Las que no entraron en los carriles visibles. En la cuadricula se esconden y
   se resumen en el "+N mas"; en la lista del telefono se ven todas. */
.cal__barra.es-sobrante { display: none; }

.cal__mas {
    align-self: start;
    margin: 0 .3rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--texto-suave);
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.cal__mas:hover { color: var(--verde-600); text-decoration: underline; }

/* --- El pie y la leyenda --------------------------------------------------- */
.cal__pie {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    padding: .85rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    font-size: .92rem;
}

.cal__leyenda {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    align-items: center;
    margin: .9rem 0 0;
    font-size: .8rem;
    color: var(--texto-suave);
}
.cal__leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.cal__leyenda__ayuda { margin-left: auto; font-style: italic; opacity: .8; }
.cal__punto { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.cal__punto--neutro  { background: var(--texto-tenue); }
.cal__punto--empresa { background: var(--marino-600); }
.cal__punto--ok      { background: var(--verde-600); }
.cal__punto--vencido { background: var(--rojo); }
.cal__punto--baja    { background: var(--texto-tenue); opacity: .45; }
.cal__punto--cobro   { background: transparent; border: 1px dashed var(--texto-suave); }

/* --- La lista por dia (telefono) ------------------------------------------- */
.cal__diaLista {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    /* Ancla de la franja de color, que va en ::before absoluto. */
    position: relative;
    padding: .7rem .8rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.cal__diaLista.es-otro-mes { opacity: .8; }
.cal__diaLista.es-hoy { border-color: var(--verde-600); box-shadow: var(--anillo); }
.cal__diaLista .cal__fecha {
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--borde-suave);
}
.cal__diaLista .cal__dow {
    display: inline;
    font-size: .82rem;
    font-weight: 600;
    color: var(--texto-suave);
}
.cal__diaLista .cal__num { font-size: 1.1rem; }
.cal__diaLista .cal__barra {
    margin: 0;
    padding: .45rem .55rem;
    font-size: .85rem;
    white-space: normal;
    border-radius: 6px;
    /* La flecha del corte de semana no tiene sentido aca: en la lista cada dia
       es su propia tarjeta y no hay ninguna semana que cortar. */
    clip-path: none;
    -webkit-clip-path: none;
    /* Envuelve. Sin esto el nombre se parte en dos lineas mientras "Dia 4 de 8"
       y la patente ocupan media barra a su lado; envolviendo, el nombre se queda
       con el renglon completo y lo demas baja al siguiente. */
    flex-wrap: wrap;
}
.cal__diaLista .cal__barra__quien { flex: 1 1 auto; }
.cal__diaLista .cal__barra__extra { margin-left: auto; }

/* --- El panel del dia ------------------------------------------------------
   Centrado y con velo. Se penso como globo pegado a la celda y se descarto: un
   globo cerca del borde derecho de la pantalla se sale, y hay que escribir
   codigo de reposicionamiento que en el telefono termina centrandolo igual. */
.cal__panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--marino-950) 45%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
/* Lo mismo que .barra-seleccion: sin esto el panel aparece ABIERTO al cargar la
   pantalla, encima del calendario, porque el display:flex de arriba le gana al
   atributo `hidden` con que nace en el HTML. */
.cal__panel[hidden] { display: none; }

.cal__panel__caja {
    width: min(28rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.1rem 1.2rem 1.3rem;
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra-alta);
}
.cal__panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
/* Sin capitalize: mayusculiza CADA palabra y deja "18 De Septiembre De 2026".
   El texto ya llega bien escrito desde el script. */
.cal__panel__cabeza strong { font-size: 1.05rem; }
.cal__panel__cerrar {
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .3rem;
}
.cal__panel__cerrar:hover { color: var(--texto); }
.cal__panel__nota { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--borde-suave); }
.cal__panel__nota textarea { width: 100%; resize: vertical; }

.cal__panel__colores { border: 0; padding: 0; margin: .8rem 0; }
.cal__panel__colores legend { padding: 0; margin-bottom: .4rem; }
/* Dos filas: los solidos arriba y los degradados abajo. Ver la nota del
   selector en agenda.php: no se eligen por lo mismo. */
.cal__colores__fila {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .6rem;
}
/* Las pastillas envuelven adentro de su propia caja. Si envolvieran en la fila,
   la segunda linea arrancaria debajo del rotulo en vez de alinearse. */
.cal__colores__pastillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    flex: 1 1 0;
    min-width: 0;
}
.cal__colores__fila:last-child { margin-bottom: 0; }
/* El ancho fijo alinea las dos filas de circulos: sin el, "Degradados" es mas
   largo que "Colores" y las dos filas arrancan en columnas distintas. */
.cal__colores__nombre {
    flex: 0 0 5.4rem;
    padding-top: .35rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.cal__color { display: inline-block; cursor: pointer; }
.cal__color input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal__color__muestra {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--borde);
    /* El "sin color" no puede ser un circulo vacio a secas: se confunde con una
       opcion rota. La diagonal dice que es la ausencia elegida. */
    background-image: linear-gradient(45deg, transparent 45%, var(--texto-tenue) 45%,
                      var(--texto-tenue) 55%, transparent 55%);
}
.cal__color input:checked + .cal__color__muestra {
    border-color: var(--texto);
    box-shadow: var(--anillo);
}
.cal__color input:focus-visible + .cal__color__muestra { box-shadow: var(--anillo); }
/* Los que si tienen color traen su propio background inline y tapan la diagonal.
   Vale igual para un color y para un degradado: los dos son `background`. */
.cal__color__muestra[style*="background"] { background-image: none; }

/* --- El color propio -------------------------------------------------------
   El circulo lo ELIGE y el cuadrito nativo dice CUAL. El cuadrito se deja chico
   y pegado al circulo para que se lean como un solo control. */
.cal__color__propio { display: inline-flex; align-items: center; gap: .25rem; }
.cal__color__propio input[type="color"] {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
/* Sin esto Chrome deja un marco gris grueso alrededor de la muestra. */
.cal__color__propio input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cal__color__propio input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }

/* --- Los vencimientos -----------------------------------------------------
   LA PIEZA TIENE QUE NO PARECERSE A UNA BARRA, Y ESO ES EL REQUISITO

   El calendario ya gasto sus cuatro colores en los cuatro estados de una ruta, y
   ya establecio la regla al meter los cobros: lo que es OTRA COSA se distingue
   por DIBUJO -el cobro tiene borde cortado y signo peso-, nunca por un quinto
   color. Un quinto color se leeria como un quinto estado de una ruta.

   Asi que la pastilla de vencimiento no comparte NADA con la barra:

     la barra          rectangulo con radio chico, barra de color a la IZQUIERDA
                       nada mas, sin icono, el color dice el ESTADO
     el vencimiento    pildora con radio completo, borde de los CUATRO lados,
                       icono adelante, el color dice la URGENCIA

   Y va en fila propia arriba de todo. A un metro de la pantalla ya se ve que esa
   fila es de otra cosa, que es justamente el punto.

   El color sale de los pares de token que se invierten solos -rojo/rojo-claro y
   ambar/ambar-claro-, asi que no hay ni una regla [data-theme] aca abajo. */
.cal__venc {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 0 1px;
    /* Encima de las celdas de fondo, que van sin z-index, igual que la nota y
       la barra. */
    position: relative;
    z-index: 1;
}

.cal__venc__item {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    padding: .1rem .38rem;
    /* La pildora. Es la diferencia de forma que se lee antes que el color. */
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .69rem;
    line-height: 1.25;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: filter var(--vel-rapida) ease;
}
.cal__venc__item:hover { filter: brightness(.95); text-decoration: none; }

/* El icono hereda currentColor, o sea el color del semaforo. Por eso es SVG del
   catalogo y no un emoji: un emoji lo pinta la fuente del sistema, ignora el
   color y en la hoja impresa en blanco y negro no se distingue. */
.cal__venc__ico {
    width: .82rem;
    height: .82rem;
    flex: 0 0 auto;
    opacity: .85;
}

/* El concepto encoge pero no crece; el duenio cede primero. Con las dos
   creciendo, "Revision tecnica" y "Camion 3" se reparten el ancho y ninguna de
   las dos se termina de leer. */
.cal__venc__que { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* --- DE QUIEN ES NO SE PINTA EN LA CUADRICULA ------------------------------
   Se probo con las dos y no cabian. Una celda de calendario mide unos 100px, y
   ahi "Revision tecnica" + "Camion 3" salen como

       Revision t... Cami...

   o sea DOS textos cortados y ninguno legible. Un solo texto cortado -"Revision
   tecni..."- se entiende; dos no se entiende ninguno, y encima el segundo es el
   menos util de los dos: saber que vence una revision tecnica ya te dice que
   hacer, saber que es de un vehiculo cuyo nombre no se lee no te dice nada.

   Asi que en la cuadricula gana el concepto y se lleva todo el ancho. De quien
   es sigue estando en tres lugares donde SI cabe: el title de la pastilla, el
   panel del dia -que es adonde lleva el "+N"- y la lista del telefono, donde la
   pastilla es un renglon completo. */
.cal__venc__quien { display: none; }
.cal__venc__cuando { flex: 0 0 auto; margin-left: auto; opacity: .8; font-weight: 600; }

/* --- El semaforo ----------------------------------------------------------
   Los mismos tres colores que ya usan .papel--vencido y .documento--vencido para
   esto mismo, para que un papel vencido se vea igual en las tres pantallas.

   Se usa la forma OPACA de color-mix -sobre var(--superficie) y no sobre
   transparent- porque estas pildoras se dibujan encima de la celda del dia, que
   puede venir tenida por el color de una nota o por el verde de "hoy". Con la
   forma transparente los dos tintes se suman y el rojo deja de ser rojo. */
.cal__venc__item--vencido {
    background: color-mix(in srgb, var(--rojo) 14%, var(--superficie));
    border-color: color-mix(in srgb, var(--rojo) 45%, transparent);
    color: var(--rojo);
}

/* Hoy es rojo tambien -se vencio o se vence, da igual para quien tiene que
   salir a la calle- pero con el borde entero marcado: es el unico que todavia
   se puede resolver a tiempo. */
.cal__venc__item--hoy {
    background: color-mix(in srgb, var(--rojo) 14%, var(--superficie));
    border-color: var(--rojo);
    color: var(--rojo);
}

.cal__venc__item--pronto {
    background: color-mix(in srgb, var(--ambar) 16%, var(--superficie));
    border-color: color-mix(in srgb, var(--ambar) 45%, transparent);
    color: var(--ambar);
}

/* Lo que vence en tres meses no es una alerta: es un dato. Gris, y que no le
   quite atencion a la fila de arriba. */
.cal__venc__item--lejos {
    background: var(--superficie-2);
    border-color: var(--borde);
    color: var(--texto-suave);
}

/* El "+N". No es un enlace porque no hay url que muestre "los vencimientos del
   dia 15": abre el panel del dia, que los lista completos. */
.cal__venc__mas {
    align-self: flex-start;
    margin: 0 0 0 .2rem;
    padding: 0 .3rem;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .66rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.cal__venc__mas:hover { color: var(--rojo); text-decoration: underline; }

/* En pantalla el sobrante no se ve: para eso esta el "+N", que abre el panel.
   En papel si -ver el @media print del final del bloque-. */
.cal__venc__item.es-sobrante { display: none; }

/* En la lista del telefono la pastilla es un renglon completo: cabe el plazo, y
   el nombre puede partirse en dos lineas sin romper nada. Van TODOS, sin "+N":
   una lista vertical crece hacia abajo sin desalinear a nadie. */
.cal__venc--lista { gap: .25rem; padding: 0; margin: 0 0 .2rem; }
.cal__diaLista .cal__venc__item {
    white-space: normal;
    flex-wrap: wrap;
    border-radius: var(--radio-chico);
    padding: .28rem .5rem;
    font-size: .78rem;
}
.cal__diaLista .cal__venc__ico { width: 1rem; height: 1rem; }
.cal__diaLista .cal__venc__quien {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    opacity: .75;
    font-weight: 500;
}

/* --- El interruptor de la barra del mes ----------------------------------- */
.cal__barraMes__der { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.cal__vencSwitch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--vel-rapida) ease, color var(--vel-rapida) ease;
}
.cal__vencSwitch:hover { border-color: var(--texto-tenue); color: var(--texto); text-decoration: none; }

/* Encendido se marca con el color del tema y no con el rojo: el interruptor dice
   "la capa esta puesta", no "hay algo vencido". El rojo es de las pastillas. */
.cal__vencSwitch.es-activo {
    border-color: color-mix(in srgb, var(--verde-600) 45%, transparent);
    background: var(--verde-claro);
    color: var(--verde-600);
}
.cal__vencSwitch__ico { width: 1rem; height: 1rem; flex: 0 0 auto; }
.cal__vencSwitch__n {
    padding: 0 .32rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--verde-600) 18%, transparent);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

/* Con un filtro de cliente o de empresa puesto: se ve, dice que no aplica y no
   se puede apretar. Esconderlo dejaria a la persona buscando el interruptor que
   estaba ahi hace un segundo. */
.cal__vencSwitch--mudo { opacity: .6; cursor: not-allowed; }
.cal__vencSwitch--mudo .sutil { font-size: .72rem; font-weight: 500; }

/* --- La franja de lo ya vencido ------------------------------------------
   Misma caja que .franja-atraso pero en ROJO, al revés de las otras dos. La
   regla que dejo escrita la agenda -"ambar y no rojo: no es un error, es trabajo
   pendiente"- vale para una ruta que nadie cerro: se arregla marcandola. Un
   papel vencido no es trabajo pendiente, es un camion que no puede salir y una
   multa que ya se puede cursar. */
.franja-atraso--vencido {
    border-color: color-mix(in srgb, var(--rojo) 35%, transparent);
    border-left-color: var(--rojo);
    background: var(--rojo-claro);
    color: var(--rojo);
}

/* --- La leyenda ---------------------------------------------------------- */
/* Los puntos de la capa van REDONDOS y los de las rutas cuadrados, que es la
   misma distincion de forma que separa la pastilla de la barra en la cuadricula.
   Hacia falta: en el modo cobro conviven dos marcas rojas con significados
   distintos -"cobro que se paso de fecha" y "papel vencido"-, y dos cuadrados
   iguales con dos textos distintos se leen como una repeticion, no como dos
   cosas. */
.cal__punto--venc { border-radius: 999px; }
.cal__punto--venc-vencido { background: var(--rojo); }
.cal__punto--venc-pronto  { background: var(--ambar); }
/* El tercero faltaba, y en cualquier mes futuro es el UNICO que aparece: todo
   lo que vence en mas de 30 dias es gris. */
.cal__punto--venc-lejos   { background: var(--texto-suave); }
.cal__leyenda__venc { display: inline-flex; align-items: center; gap: .3rem; opacity: .75; }
.cal__leyenda__venc .cal__venc__ico { width: .9rem; height: .9rem; }

/* --- Los vencimientos dentro del panel del dia --------------------------- */
.cal__panel__venc {
    margin: .9rem 0 0;
    padding: .7rem 0 0;
    border-top: 1px solid var(--borde-suave);
}
.cal__panel__venc__titulo { display: block; margin: 0 0 .4rem; font-size: .9rem; }
.cal__panel__venc__fila {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
    margin: 0 0 .3rem;
    padding: .4rem .6rem;
    border-radius: var(--radio-chico);
    border-left: 3px solid var(--borde);
    background: var(--superficie-2);
    color: var(--texto);
    font-size: .85rem;
    text-decoration: none;
}
.cal__panel__venc__fila:hover { background: var(--fondo-alt); text-decoration: none; }
.cal__panel__venc__fila--vencido,
.cal__panel__venc__fila--hoy    { border-left-color: var(--rojo); }
.cal__panel__venc__fila--pronto { border-left-color: var(--ambar); }
.cal__panel__venc__cuando { margin-left: auto; font-weight: 600; font-size: .78rem; opacity: .8; }

/* --- Domingos y feriados --------------------------------------------------
   LA MARCA VA EN EL NUMERO, NO EN EL FONDO

   El fondo de la celda ya esta repartido entre tres cosas: el verde de .es-hoy,
   el gris de .es-otro-mes y el color que la cuenta le puso al dia con una nota
   (.es-pintado, que trae franja y tinte). Un cuarto tinte encima se suma a los
   otros con color-mix y da un color que no es ninguno de los cuatro.

   El numero esta libre, y ademas es donde lo busca la gente: en cualquier
   calendario de pared el feriado es el numero en rojo. Por eso todo lo de aca
   abajo pinta .cal__num y la esquina, y nunca el fondo. */

/* El domingo, apenas: un tono mas calido en el numero y en su columna de la
   cabecera. Es la marca mas suave de las dos a proposito -hay cuatro o cinco por
   mes y no son noticia-, y con --rojo al 70% se lee como "dia no laboral" sin
   competir con el feriado, que si es noticia. */
.cal__dia.es-domingo:not(.es-hoy) .cal__num,
.cal__diaLista.es-domingo:not(.es-hoy) .cal__num {
    color: color-mix(in srgb, var(--rojo) 70%, var(--texto-suave));
}
.cal__cabecera span.es-domingo {
    color: color-mix(in srgb, var(--rojo) 70%, var(--texto-suave));
}

/* El feriado: el numero en rojo y con peso. Gana sobre el domingo cuando caen
   juntos -un 18 de septiembre en domingo es feriado antes que domingo- y lo
   consigue por orden en el archivo, sin !important. */
.cal__dia.es-feriado:not(.es-hoy) .cal__num,
.cal__diaLista.es-feriado:not(.es-hoy) .cal__num {
    color: var(--rojo);
    font-weight: 800;
}

/* -------------------------------------------------------------------------
   EL :not(.es-hoy) NO ES DEFENSIVO, ARREGLA UN CHOQUE CONCRETO
   -------------------------------------------------------------------------
   La regla de .es-hoy (unas 700 lineas mas ARRIBA en este archivo) convierte el
   numero en un circulo verde relleno con el texto blanco. Estas dos reglas viven
   mas abajo y tienen la misma especificidad, asi que sin el :not() le ganaban y
   pintaban el numero ROJO SOBRE EL CIRCULO VERDE. Ilegible, y aparece solo unos
   pocos dias al ano -los domingos y los feriados que caen hoy-, o sea justo la
   clase de cosa que no se ve al probar y se ve en produccion.

   Que gane "hoy" es lo correcto ademas de lo legible: para orientarse en la
   cuadricula, saber donde esta hoy importa mas que el color del dia. Y la
   informacion no se pierde: la estrella de la esquina se pinta igual, porque es
   un elemento hermano del numero y no la toca ninguna de estas reglas. Un 18 de
   septiembre que sea hoy se ve como circulo verde CON estrella roja, que es
   exactamente lo que hay que entender de ese dia. */

/* --- La marca de la esquina --------------------------------------------- */
.cal__feriado {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--rojo);
    line-height: 1;
}
.cal__feriado__ico { width: .78rem; height: .78rem; }

/* El punto del irrenunciable: un segundo dato en el mismo pixel. No dice "es
   feriado" -eso ya lo dijo la estrella- dice "no sale nadie". Es un ::after y no
   otro icono porque dos iconos de 12px pegados se leen como uno solo mal
   dibujado. */
.cal__feriado--duro::after {
    content: "";
    width: .3rem;
    height: .3rem;
    margin-left: .12rem;
    border-radius: 999px;
    background: var(--rojo);
    flex: 0 0 auto;
}

/* --- En la lista del telefono el nombre se escribe ----------------------
   Ahi no hay mouse con que descubrir un title, y "feriado" a secas no dice si es
   el 21 de mayo o una eleccion. */
.cal__feriadoNombre {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 700;
    color: var(--rojo);
}
.cal__feriadoNombre em {
    font-style: normal;
    font-weight: 600;
    opacity: .8;
    font-size: .68rem;
}
.cal__feriadoNombre--duro { text-decoration: underline dotted; text-underline-offset: 2px; }

/* --- La leyenda --------------------------------------------------------- */
.cal__punto--feriado { background: var(--rojo); border-radius: 999px; }
/* El irrenunciable se distingue por un anillo, que es la version en punto de la
   misma idea que el ::after de la esquina. */
.cal__punto--feriado-duro {
    box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--rojo);
}

/* --- En papel ----------------------------------------------------------- */
/* El rojo del numero no sobrevive a una impresora en blanco y negro, y la hoja
   del taller es justo donde saber que el 18 es feriado importa. Se refuerza con
   negrita y con un subrayado, que si salen. */
@media print {
    .cal__dia.es-feriado .cal__num {
        color: #000 !important;
        font-weight: 900;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .cal__dia.es-domingo .cal__num { color: #444 !important; }
    .cal__feriado { color: #000 !important; }
    .cal__feriado--duro::after { background: #000 !important; }
}

/* --- Tablet: la cuadricula sigue, con menos aire --------------------------- */
@media (max-width: 1024px) {
    .cal__semana { min-height: 5.4rem; }
    .cal__barra { font-size: .7rem; padding: .15rem .3rem; }
    .cal__barra__extra { display: none; }

    /* El concepto ya se lleva todo el ancho en cualquier cuadricula -ver la
       nota de .cal__venc__quien-, asi que aca solo se aprieta el tamano. */
    .cal__venc__item { font-size: .66rem; padding: .08rem .3rem; }
}

/* --- Telefono: se cambia de dibujo -----------------------------------------
   El corte es 720px y no 480: en 600px ya hay siete columnas de 80px, que es
   igual de ilegible aunque quepa. */
@media (max-width: 720px) {
    .cal--grilla { display: none; }

    .cal--lista {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    /* Aca la barra es un renglon completo: cabe la fecha, y el nombre puede
       partirse en dos lineas sin romper nada. */
    .cal__barra__fecha {
        display: inline-block;
        flex: 0 0 auto;
        min-width: 3.2em;
        font-weight: 700;
        font-size: .78rem;
        color: var(--texto-suave);
    }
    .cal__barra__extra { display: inline; }

    .cal__mes { font-size: 1.1rem; min-width: 0; }
    .cal__pie { gap: .6rem; flex-direction: column; align-items: flex-start; }
    .cal__leyenda__ayuda { margin-left: 0; }

    /* En la lista van todos, asi que el sobrante tiene que volver a verse: el
       display:none de arriba es de la cuadricula, que a este ancho ya no existe.
       Sin esto, el telefono esconderia justo los que la celda no pudo mostrar. */
    .cal__venc__item.es-sobrante { display: flex; }

    /* El interruptor y "volver a hoy" en su propia linea, alineados a la
       izquierda como el resto de la barra del mes. */
    .cal__barraMes__der { width: 100%; }
}

/* --- Impresion -------------------------------------------------------------
   El calendario se imprime: es la hoja que alguien pega en la pared del taller.
   Se imprime la CUADRICULA -es la que tiene forma de mes- y con todas las
   barras: en papel no hay adonde ir a buscar el resto. */
@media print {
    .pestanas, .cal__barraMes .boton, .cal__agregar, .cal__panel,
    .barra-seleccion, .paginador, .sel-casilla,
    .franja-atraso .boton, .cal__mas,
    /* El "+N" abre un panel: en papel no abre nada. Y el interruptor tampoco
       tiene sentido impreso -la hoja ya salio con la capa puesta o sin ella-. */
    .cal__venc__mas, .cal__vencSwitch { display: none !important; }

    .cal--grilla { display: block; border: 1px solid #999; box-shadow: none; }
    .cal--lista  { display: none; }

    .cal__semana { break-inside: avoid; page-break-inside: avoid; }
    .cal__barra.es-sobrante { display: flex; }

    /* --- Los vencimientos en papel -------------------------------------------
       Van TODOS, incluidos los que la celda escondio: en papel no hay adonde ir
       a buscar el resto, que es la misma razon por la que vuelven las barras
       sobrantes de la linea de arriba.

       Y el semaforo NO puede depender del color: la mayoria de las impresoras de
       una oficina chica imprimen en negro, y muchas descartan los fondos. Con
       solo el color, un papel vencido y uno que vence en tres meses salen
       identicos en la hoja pegada en la pared del taller, que es exactamente
       donde la diferencia importa. Asi que la urgencia se dice con el TRAZO:
       doble lo vencido, entero lo que se viene, punteado lo lejano. */
    .cal__venc__item.es-sobrante { display: flex; }
    .cal__venc__item {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        /* En papel deja de ser pildora: con el texto en dos renglones, el radio
           completo desperdicia las esquinas y el borde se ve torcido. */
        border-radius: 4px;

        /* -----------------------------------------------------------------
           EN PAPEL EL TEXTO NO SE RECORTA, Y ES LO QUE HACE UTIL LA HOJA
           -----------------------------------------------------------------
           En pantalla la pastilla es nowrap + overflow:hidden y de quien es no
           se pinta, porque en una celda de 100px no cabe. Eso se sostiene
           gracias a tres respaldos: el title al pasar el mouse, el panel del
           dia y la lista del telefono.

           En papel NO existe ninguno de los tres -no hay mouse, .cal__panel y
           .cal--lista estan en display:none de este mismo bloque-, asi que la
           hoja pegada en la pared del taller decia "Revision te..." cinco veces
           y no decia de que vehiculo era ninguna. Que es exactamente el mismo
           argumento por el que unas lineas mas arriba vuelven los sobrantes: en
           papel no hay adonde ir a buscar el resto.

           Alto hay de sobra: la semana ya lleva break-inside:avoid, asi que una
           pastilla de dos o tres renglones no parte la fila. */
        white-space: normal;
        overflow: visible;
    }
    .cal__venc__que,
    .cal__venc__quien { overflow: visible; text-overflow: clip; }
    .cal__venc__quien { display: inline; }
    .cal__venc__item--vencido,
    .cal__venc__item--hoy    { border-width: 3px !important; border-style: double !important; font-weight: 700; }
    .cal__venc__item--pronto { border-style: solid !important; }
    .cal__venc__item--lejos  { border-style: dotted !important; color: #444 !important; }

    /* La franja de lo vencido se imprime: es parte de lo que hay que saber
       mirando la hoja, aunque no tenga dia en la cuadricula. */
    .franja-atraso--vencido {
        background: transparent !important;
        color: #000 !important;
        border: 2px solid #000 !important;
    }
    .cal__barra {
        border: 1px solid #ccc;
        background: transparent;
        /* La flecha del corte no sobrevive a la impresion en todos los motores y
           deja la barra recortada a la mitad. En papel va entera. */
        clip-path: none;
        -webkit-clip-path: none;
    }
    .grupo-lista { position: static; }
}


/* --- El selector de servicios del estado de cuenta -------------------------
   Una lista larga de casillas donde lo que importa es ver DE UN VISTAZO que
   quedo marcado: en treinta filas, un tilde de 18px no alcanza, asi que la fila
   entera cambia de fondo. La clase la pone el script y tambien PHP en la carga,
   para que al llegar desde el listado con la seleccion puesta ya se vea. */
.elegir-lista {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.elegir-fila {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borde-suave);
    cursor: pointer;
    font-weight: 400;
    transition: background-color var(--vel-rapida) ease;
}
.elegir-fila:last-child { border-bottom: 0; }
.elegir-fila:hover { background: var(--superficie-2); }
.elegir-fila.es-marcada { background: color-mix(in srgb, var(--verde-500) 8%, transparent); }
.elegir-fila input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--verde-600); cursor: pointer; }

.elegir-fila__cuerpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.elegir-fila__titulo { font-weight: 600; font-size: .94rem; }
.elegir-fila__cuerpo .sutil { font-size: .82rem; }
.elegir-fila__der { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 560px) {
    .elegir-fila { flex-wrap: wrap; }
    .elegir-fila__der { width: 100%; justify-content: flex-start; padding-left: 2.4rem; }
}


/* =============================================================================
   29  EL ESTANQUE  (vehiculos/ficha.php)
   =============================================================================
   El nivel de combustible dibujado como el medidor del tablero: arco con
   rayitas de cuarto, zona roja en el vacio, aguja que apunta, y debajo las seis
   posiciones apretables.

   -----------------------------------------------------------------------------
   POR QUE NO ES UNA IMAGEN
   -----------------------------------------------------------------------------
   Un jpg de un tablero real seria mas rapido de hacer y peor en las cuatro
   cosas que importan aca: hay dos temas y el negro del tablero no va sobre el
   fondo claro, la aguja tiene que moverse igual, se ve borroso al agrandar, y
   un dibujo no se puede apretar ni leer con lector de pantalla. Todo esto son
   dos paths y seis radios. Lo unico que sale de un archivo es la bomba, que es
   la celda que ya vive en el sprite de las luces de tablero.

   -----------------------------------------------------------------------------
   LAS DOS VARIABLES
   -----------------------------------------------------------------------------
   --aguja-base y --color-base los pone PHP en el style del bloque: son el dato
   GUARDADO, y son lo unico que hace falta para el medidor de solo lectura.

   --aguja-sel y --color-sel los pone el :has() de mas abajo cuando hay una
   rayita apretada, y ganan por ser variables distintas -no por especificidad-.
   Ese es el truco entero: un style inline le gana a cualquier selector, asi que
   si el angulo guardado y el elegido compartieran nombre, la aguja no se
   moveria nunca. Con dos nombres y un var(elegido, guardado) el orden queda
   bien puesto y sin una linea de javascript, que ademas aca seria un problema:
   enviar.js bloquea los formularios y este se manda a mano.
   ============================================================================= */

.estanque { max-width: 21rem; margin: 0 auto; }

/* --- El medidor de una linea dentro de .datos-lista -------------------------
   El rotulo de esa rejilla se pinta con `.datos-lista div span`, que es un
   selector de DESCENDENCIA: tambien agarra los <span> de adentro del <strong>,
   o sea los del medidor. El nivel salia en versalitas, tenue y en tres lineas
   -"3/4", "- HACE 2 H", "- AJUSTADO A MANO"- una debajo de la otra.

   Se arregla aca y no tocando el selector de arriba: `.datos-lista` la usan
   veinte pantallas y cambiarle el alcance al rotulo por esto seria mover algo
   que hoy funciona en todas ellas. Las cajas del medidor traen su display en el
   style, que le gana a esto, asi que la barra no se entera. */
.datos-lista .medidor-linea,
.datos-lista .medidor-linea span {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.datos-lista .medidor-linea span { display: inline; }
.datos-lista .medidor-linea .sutil { color: var(--texto-suave); }

/* --- El reloj -------------------------------------------------------------- */
.estanque__reloj { width: 100%; max-width: 16rem; margin: 0 auto; }
.estanque__reloj svg { display: block; width: 100%; height: auto; }

.estanque__pista { fill: none; stroke: var(--borde); stroke-width: 9; stroke-linecap: round; }
.estanque__zona  { fill: none; stroke: var(--nivel-vacio); stroke-width: 9; stroke-linecap: round; opacity: .8; }
.estanque__rayas { stroke: currentColor; opacity: .3; stroke-linecap: round; }
.estanque__eje   { fill: var(--texto); }

/* transform-box: view-box hace que el origen se lea en unidades del viewBox, o
   sea el eje de la aguja tal como esta dibujado. Sin eso rota alrededor de la
   caja del path y se va de la pantalla. */
.estanque__aguja {
    fill: var(--color-sel, var(--color-base, var(--texto-tenue)));
    transform-box: view-box;
    transform-origin: 100px 100px;
    transform: rotate(var(--aguja-sel, var(--aguja-base, -90deg)));
    transition: transform var(--vel-lenta) var(--curva), fill var(--vel) ease;
}

/* --- Las seis posiciones --------------------------------------------------- */
/* row-reverse: en el html van de Lleno a Vacio y en pantalla salen al reves,
   con el vacio a la izquierda igual que en el tablero. Esa vuelta es la que
   deja funcionar el "~" de mas abajo. */
.estanque__rayitas {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: .2rem;
    margin-top: .55rem;
}
.estanque__rayitas input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.estanque__rayita {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .3rem .1rem .25rem;
    border-radius: var(--radio-chico);
    cursor: pointer;
    transition: background-color var(--vel-rapida) ease;
}
.estanque__rayita:hover { background: var(--superficie-2); }

.estanque__barra {
    width: 100%;
    max-width: 1.6rem;
    height: var(--alto, 1rem);
    border-radius: 3px;
    background: var(--borde);
    transition: background-color var(--vel) ease;
}
/* Las dos de abajo llevan tinte aunque esten apagadas: en el medidor de verdad
   esa franja esta pintada siempre, no solo cuando la aguja llega. El --tinte lo
   pone PHP y es el color de ESA rayita -rojo el vacio, amarillo la reserva- y
   no un rojo para las dos: lo que insinuan apagadas es lo mismo que van a decir
   cuando se llenen. */
.estanque__rayita--zona .estanque__barra {
    background: color-mix(in srgb, var(--tinte, var(--nivel-vacio)) 32%, var(--borde));
}

.estanque__nombre {
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--texto-tenue);
}

/* El llenado. Como en el html las de mas nivel van ANTES, el hermano-posterior
   cae sobre la apretada y todas las de menos nivel: el estanque se pinta lleno
   hasta donde uno aprieta, que es como se llena de verdad. */
.estanque__rayitas input:checked ~ label .estanque__barra {
    background: var(--color-sel, var(--color-base));
}
.estanque__rayitas input:checked + label .estanque__nombre { color: var(--texto); }
.estanque__rayitas input:focus-visible + label { box-shadow: var(--anillo); }

/* Los angulos son los de rok_combustible_niveles() y los colores los de
   rok_combustible_color(), rayita por rayita. Se escriben dos veces -en PHP
   para lo guardado, aca para lo que se esta eligiendo- porque son dos momentos
   distintos y el css no sabe leer la funcion; si algun dia se agrega un nivel,
   se agrega en los dos lados. Mientras tanto no pasa nada grave: sin su regla
   la aguja se queda en lo guardado, que es justo lo que muestra el medidor de
   solo lectura. */
.estanque:has(input[value="0"]:checked)   { --aguja-sel: -90deg; --color-sel: var(--nivel-vacio); }
.estanque:has(input[value="10"]:checked)  { --aguja-sel: -72deg; --color-sel: var(--nivel-reserva); }
.estanque:has(input[value="25"]:checked)  { --aguja-sel: -45deg; --color-sel: var(--nivel-cuarto); }
.estanque:has(input[value="50"]:checked)  { --aguja-sel:   0deg; --color-sel: var(--nivel-lleno); }
.estanque:has(input[value="75"]:checked)  { --aguja-sel:  45deg; --color-sel: var(--nivel-lleno); }
.estanque:has(input[value="100"]:checked) { --aguja-sel:  90deg; --color-sel: var(--nivel-lleno); }

/* --- La lectura guardada y el boton ---------------------------------------- */
.estanque__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .85rem;
}
.estanque__lectura {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
}
.estanque__lectura .sutil { font-weight: 400; }

/* La bomba toma el color del nivel, igual que la aguja. No es la del sprite de
   las luces: esa es ambar fija porque en el tablero el ambar avisa que queda
   poco, y al lado de "3/4" avisaba de algo que no estaba pasando. */
.estanque__bomba {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    color: var(--color-sel, var(--color-base, var(--texto-tenue)));
    transition: color var(--vel) ease;
}

/* El rotulo va en su propia linea sobre el valor, no pegado a el: "Lo ultimo
   informado 1/2" de corrido se lee como una frase, y lo que hay que entender es
   que son dos cosas distintas -el rotulo y el dato-. */
.estanque__dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.estanque__rotulo {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-tenue);
}

/* El boton se enciende solo cuando lo elegido NO es lo guardado. Guardar de
   nuevo el mismo nivel es valido y sirve -actualiza la fecha, o sea "lo mire
   hoy y sigue igual"- asi que nunca se apaga ni se deshabilita: solo deja de
   llamar la atencion. */
.estanque:has(input:checked:not(.es-guardado)) .estanque__guardar {
    box-shadow: var(--anillo);
}

@media (max-width: 420px) {
    .estanque__nombre { font-size: .62rem; }
    .estanque__pie { align-items: stretch; }
}

/* --- La salida del campo opcional ------------------------------------------
   Un radio no se desmarca. Donde informar el nivel es opcional -el check-in-
   hace falta una septima opcion que no diga nada, o un toque sin querer deja a
   la persona obligada a mandar algo que no miro. Chica y a un lado: es lo que
   hay que poder elegir, no lo que hay que elegir. */
.estanque__saltar { position: relative; margin-top: .65rem; }
.estanque__saltar input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.estanque__saltar label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .35rem .9rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
    transition: border-color var(--vel-rapida) ease, background-color var(--vel-rapida) ease;
}
.estanque__saltar label:hover { background: var(--superficie-2); }
.estanque__saltar input:checked + label {
    border-color: var(--texto-tenue);
    background: var(--superficie-2);
    color: var(--texto);
}
.estanque__saltar input:focus-visible + label { box-shadow: var(--anillo); }


/* -----------------------------------------------------------------------------
   29.1  EN EL CHECK-IN DEL CHOFER
   -----------------------------------------------------------------------------
   Aca el dibujo va a la vista y sin nada que abrir: es el unico momento en que
   alguien esta mirando el tablero de verdad. Y valen las reglas del bloque 28,
   de pie, con una mano y a veces con guantes, asi que todo lo que se toca
   crece hasta el alto que se acierta sin mirar.

   El --alto de cada barra lo pone PHP en px y aca se multiplica en vez de
   escribirse de nuevo: el dibujo sigue siendo uno solo y no hay dos escalas que
   mantener en sincronia.
   ----------------------------------------------------------------------------- */
.estanque--grande { max-width: none; }
.estanque--grande .estanque__reloj { max-width: 19rem; }
.estanque--grande .estanque__rayitas { gap: .15rem; margin-top: .85rem; }

/* flex-basis auto y no 0: con seis celdas iguales, "Reserva" -que es la palabra
   larga- se sale de la suya y se encima con "Vacio", mientras "1/4" deja la
   mitad de la suya vacia. Con auto cada una pide lo que su palabra necesita y
   el sobrante se reparte. Las barras quedan a distinta distancia entre si, que
   es lo que pasa en cualquier escala con nombres debajo. */
.estanque--grande .estanque__rayita {
    flex: 1 1 auto;
    min-height: var(--c-tap, 3.5rem);
    justify-content: flex-end;
    gap: .5rem;
    padding: .7rem .3rem .55rem;
}
.estanque--grande .estanque__barra {
    max-width: 2.2rem;
    height: calc(var(--alto, 1rem) * 1.45);
}
.estanque--grande .estanque__nombre { font-size: var(--c-fs-sm, .97rem); }
.estanque--grande .estanque__saltar label {
    min-height: var(--c-tap-sm, 2.9rem);
    padding: .5rem 1.2rem;
    font-size: var(--c-fs-sm, .97rem);
}


/* =============================================================================
   31.  COMBUSTIBLE Y SALDOS
   =============================================================================
   Dos pantallas nuevas y una tira que se ve en las dos puntas: el chofer que
   anota lo que puso de su bolsillo, y el owner que ve a quien le debe.
   ============================================================================= */

/* --- La tira del chofer: lo que le deben ---------------------------------
   Una tira y no una tarjeta, porque es un dato y no una tarea: aca el chofer no
   cobra, solo comprueba que lo que puso quedo contado. Sin ese numero a la
   vista nadie vuelve a llenar el formulario de la carga, y ese es el unico
   motivo por el que existe. */
.c-saldo-aviso {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .6rem;
    margin: 1.1rem 0 0;
    padding: .95rem 1.1rem;
    border-radius: var(--c-radio, 18px);
    border: 1px solid var(--borde);
    background: var(--superficie);
}
.c-saldo-aviso__que {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    width: 100%;
}
.c-saldo-aviso__monto {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--verde-600);
}
body[data-ruta="abierta"] .c-saldo-aviso__monto { color: var(--verde-400); }

/* --- La puerta a la bomba, cuando la ruta esta abierta -------------------
   Solo se pinta andando, y solo porque andando la tarjeta del vehiculo -donde
   vive el boton- esta plegada abajo de un titulo que habla de papeles. Cargar
   combustible es lo unico de ese cajon que pasa con el motor prendido.

   Tira y no tarjeta, gris y no verde: es una puerta que tiene que estar a la
   vista, no una tarea. El unico verde de esta pantalla es finalizar. */
.c-bomba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 0;
    padding: .95rem 1.1rem;
    border-radius: var(--c-radio, 18px);
    border: 1px solid var(--borde);
    background: var(--superficie);
}
/* flex-basis chico y con permiso de crecer: sin esto el texto pide su ancho
   natural, el boton no cabe y se cae solo a la linea de abajo pegado a la
   izquierda, que es peor que las dos cosas juntas. Asi la frase se parte en dos
   lineas y el boton se queda donde tiene que estar, a la derecha. */
.c-bomba__que {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1 1 10rem;
    min-width: 0;
}
.c-bomba__que strong { font-size: var(--c-fs, 1rem); }
/* La linea de abajo baja un escalon, no dos: se lee de pie y de reojo. */
.c-bomba__que .sutil { font-size: var(--c-fs-sm, .9rem); }

/* width y margin explicitos: .boton nace con width:100% y margin-top:.5rem
   -esta hecho para ir apilado adentro de una tarjeta-, y adentro de esta fila
   eso pide el ancho entero y empuja el boton medio centimetro hacia abajo. */
.c-bomba .boton { flex: 0 0 auto; width: auto; margin: 0; }

/* En pantalla angosta el boton se va solo a su linea y ocupa el ancho entero.
   El corte va en 480 y no en 420 porque lo que hay que evitar no es que se
   caiga a la linea de abajo -eso pasa igual en cualquier telefono con la letra
   de este modo- sino que se caiga y ademas quede angosto y pegado a la
   izquierda, que es un boton que se aprieta con el pulgar en la mitad
   equivocada de la pantalla. Todo telefono entra en 480. */
@media (max-width: 480px) {
    .c-bomba { align-items: stretch; }
    .c-bomba .boton { width: 100%; justify-content: center; text-align: center; }
}

/* --- Quien pago: la pregunta que arma la deuda ---------------------------
   Dos botones grandes y no un desplegable. De esta respuesta sale si la cuenta
   le queda debiendo o no, y es lo unico de esa pantalla que no se puede
   contestar mal sin consecuencias. Un desplegable en un telefono, de pie y con
   guantes, se contesta con lo que venia marcado. */
.c-quien-paga {
    display: flex;
    gap: .5rem;
    margin: .35rem 0 0;
}
.c-quien-paga__op {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: var(--c-tap, 3.5rem);
    padding: .6rem .7rem;
    border-radius: var(--c-radio-sm, 12px);
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    font-weight: 700;
    cursor: pointer;
}
.c-quien-paga__op input { position: absolute; opacity: 0; pointer-events: none; }
.c-quien-paga__op:has(input:checked) {
    border-color: var(--verde-500);
    background: color-mix(in srgb, var(--verde-500) 16%, var(--superficie-2));
    box-shadow: 0 0 0 1px var(--verde-500);
}

/* La casilla del estanque lleno: el checkbox y su texto en una linea, con el
   alto de un dedo. Sin esto el <input type=checkbox> queda arriba y el texto
   debajo, porque .campo apila. */
.campo--check {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: var(--c-tap-sm, 2.9rem);
    cursor: pointer;
}
.campo--check input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; margin: 0; }
.campo--check > span { font-weight: 600; }

/* --- El total del owner ---------------------------------------------------
   Es la unica cifra que viene a buscar cuando abre la pantalla un viernes. */
.saldo-total__que {
    margin: 0;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.saldo-total__monto {
    margin: .25rem 0 .2rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* --- La lista de personas ------------------------------------------------- */
.saldo-lista { display: flex; flex-direction: column; gap: .55rem; margin-top: .9rem; }

.saldo-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: inherit;
    text-decoration: none;
}
.saldo-fila:hover { border-color: var(--texto-tenue); }
.saldo-fila--debe { border-left: 3px solid var(--verde-500); }

.saldo-fila__quien { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.saldo-fila__quien .sutil { font-size: .85rem; }

.saldo-fila__monto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.saldo-fila__monto strong { font-size: 1.15rem; }
.saldo-fila__monto .sutil { font-size: .78rem; }

/* --- La cartola -----------------------------------------------------------
   El signo va en el monto y no en un icono: "+" es lo que se le sumo a lo que
   se le debe y "-" es lo que ya se le pago. Es la unica lectura que no se
   presta para dos interpretaciones. */
.saldo-mov {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .3rem .9rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--superficie);
}
.saldo-mov__cuando {
    font-size: .82rem;
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.saldo-mov__que { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.saldo-mov__que .sutil { font-size: .85rem; }

.saldo-mov__monto {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.saldo-mov__monto.es-cargo { color: var(--verde-600); }
.saldo-mov__monto.es-pago  { color: var(--texto-suave); }

/* Anular es texto chico y en la esquina. Se puede hacer, no se ofrece. */
.saldo-mov__anular { grid-column: 3; margin: 0; }
.saldo-mov__anular button {
    background: none;
    border: 0;
    padding: .2rem 0 0;
    color: var(--texto-tenue);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.saldo-mov__anular button:hover { color: var(--rojo); }

/* Lo anulado se ve, tachado y apagado. Una cartola que esconde lo anulado es
   una cartola donde el saldo cambia sin explicacion, y este numero se lo va a
   discutir alguien a fin de mes. */
.saldo-mov--anulado { opacity: .55; }
.saldo-mov--anulado .saldo-mov__monto { text-decoration: line-through; }

@media (max-width: 480px) {
    .saldo-mov { grid-template-columns: 1fr auto; }
    .saldo-mov__cuando { grid-column: 1 / -1; }
    .saldo-mov__anular { grid-column: 2; }
}


/* =============================================================================
   30  CONDUCTORES: LA VUELTA, LA FICHA Y LAS LLAVES
   =============================================================================
   Lo que trajo el rediseno de /conductores y /conductores/ver.php. Nada de esto
   pisa una clase existente: son piezas nuevas que conviven con .fila, .tarjeta y
   .pestanas de siempre.
   ============================================================================= */

/* --- 1. La linea de lo que esta en calma -----------------------------------
   Las cuatro tarjetas de metricas eran fijas y casi siempre tres marcaban cero.
   Ahora la tarjeta grande se la gana el dato que pide algo y lo demas baja a
   esta linea, que es el tamano que le corresponde a una buena noticia. */
.en-calma {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .05rem .45rem;
    margin: -.35rem 0 1.25rem;
    padding: .1rem .2rem;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--texto-tenue);
}
.en-calma a { color: var(--texto-suave); }
.en-calma__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde-500);
    flex: 0 0 auto;
    align-self: center;
    margin-right: .15rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde-500) 18%, transparent);
}

/* --- 2. La fila entera como enlace -----------------------------------------
   El listado del equipo llevaba un boton "Ver" que apuntaba a la misma URL que
   el nombre: dos blancos para el mismo destino en la misma fila, y en celular
   uno de los dos ocupaba un renglon propio.

   El <a> tiene que recuperar a mano lo que .fila daba por hecho -display flex,
   color heredado, sin subrayado- porque un ancla trae lo suyo. */
a.fila--clic {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radio-chico);
    margin: 0 -.55rem;
    padding-left: .55rem;
    padding-right: .55rem;
    transition: background var(--vel) ease;
}
a.fila--clic:hover { background: var(--superficie-2); }
a.fila--clic:focus-visible {
    outline: 2px solid var(--verde-500);
    outline-offset: -2px;
}
a.fila--clic .fila__titulo { color: var(--texto); }
a.fila--clic:hover .fila__titulo { color: var(--verde-600); }

/* --- 3. La hora que es un rango --------------------------------------------
   "22:23 → 00:30". Dos horas y una flecha necesitan mas ancho que una sola, y
   la flecha va apagada para que lo que se lea de un golpe sean los numeros. */
.fila__hora--rango {
    min-width: 6.9rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.flecha {
    color: var(--texto-tenue);
    font-weight: 500;
    padding: 0 .05rem;
}

/* Lo que la fila de arriba ya dijo. No se esconde -sigue ahi para el que lo
   busca- pero deja de gritar el mismo nombre doce veces seguidas. */
.apagado { opacity: .45; }

/* --- 4. El retrato de una persona ------------------------------------------
   Las iniciales y no una foto: RutaOk no le pide la foto a nadie, y un hueco
   gris donde deberia ir una cara se ve peor que dos letras. */
.ficha__cabecera--persona { align-items: flex-start; }
.retrato-letras {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: var(--radio-chico);
    background: linear-gradient(150deg, var(--superficie-2), var(--marino-600));
    border: 1px solid var(--borde);
    display: grid;
    place-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .02em;
    color: var(--texto);
    box-shadow: var(--sombra-chica), var(--filo);
}
/* La foto de perfil (opcional, conductores/ver.php) en el lugar de las letras. */
.retrato-persona { flex: 0 0 auto; display: grid; justify-items: center; gap: .25rem; }
.retrato-foto {
    width: 62px; height: 62px; object-fit: cover; display: block;
    border-radius: var(--radio-chico); border: 1px solid var(--borde);
    box-shadow: var(--sombra-chica), var(--filo);
}
.retrato-persona__form { margin: 0; }
.retrato-persona__boton, .retrato-persona__quitar {
    font: inherit; font-size: .72rem; font-weight: 700; color: var(--texto-suave);
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.retrato-persona__boton:hover, .retrato-persona__quitar:hover { color: var(--texto); }

/* --- 5. Los tres pasos del enlace ------------------------------------------
   El formulario tenia seis campos y dos acoplados sin decirlo. Ahora son tres
   preguntas numeradas, y el numero SI significa algo: es una secuencia real,
   se contestan en ese orden y la de mas abajo depende de las de arriba. */
.enlace-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}
.paso {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.paso__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.paso__n {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--verde-claro);
    color: var(--verde-600);
    font-family: "Space Grotesk", sans-serif;
    font-size: .78rem;
    letter-spacing: 0;
    flex: 0 0 auto;
}

/* --- 6. El chip que es un radio --------------------------------------------
   Mismo aspecto que los .chip de los filtros, pero con un input adentro: elegir
   el plazo tiene que ser un clic y no un select mas un campo de horas donde el
   owner hace la aritmetica.

   El input se esconde sin display:none para que siga recibiendo el foco del
   teclado, y el estado activo cuelga de :checked sobre el hermano. Nada de
   :has(), que no hace falta aca. */
.chips-eleccion {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.chip-op {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.chip-op input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.chip-op__cara {
    display: block;
    padding: .5rem .9rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color var(--vel) ease, background var(--vel) ease, color var(--vel) ease;
}
.chip-op__cara small {
    display: block;
    margin-top: .1rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--texto-tenue);
}
.chip-op:hover .chip-op__cara { border-color: var(--texto-tenue); color: var(--texto); }
.chip-op input:checked + .chip-op__cara {
    background: var(--verde-claro);
    border-color: color-mix(in srgb, var(--verde-500) 45%, transparent);
    color: var(--verde-600);
    box-shadow: var(--glow-verde);
}
.chip-op input:checked + .chip-op__cara small { color: var(--verde-600); opacity: .8; }
.chip-op input:focus-visible + .chip-op__cara {
    outline: 2px solid var(--verde-500);
    outline-offset: 2px;
}

/* "Sin codigo" no se pinta de verde al elegirlo: es una decision valida pero es
   la insegura, y el verde de esta pantalla significa "asi esta bien". */
.chip-op--flojo input:checked + .chip-op__cara {
    background: var(--ambar-claro);
    border-color: color-mix(in srgb, var(--ambar) 45%, transparent);
    color: var(--ambar);
    box-shadow: none;
}
.chip-op--flojo input:checked + .chip-op__cara small { color: var(--ambar); opacity: .85; }

/* --- 7. El codigo propuesto ------------------------------------------------
   Venia vacio, con la ayuda diciendo "vacio = entra sin codigo": lo recomendado
   costaba teclear y lo inseguro era no hacer nada. Ahora viene puesto, en
   grande, y hay que poder leerlo de una para anotarlo antes de generar. */
.codigo-caja {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: .7rem .9rem;
}
.codigo-caja .sutil { flex: 1 1 16rem; }
input.codigo-num {
    flex: 0 0 auto;
    width: 5.6rem;
    padding: .35rem .5rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-family: "Space Grotesk", monospace;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--verde-600);
}
input.codigo-num:focus { outline: none; box-shadow: var(--anillo); }

/* --- 8. El enlace recien hecho ---------------------------------------------
   Es el resultado de lo que se acaba de hacer y hay alguien esperando al otro
   lado del telefono, asi que va arriba del todo y con su propio borde. */
.llave-nueva {
    border-color: color-mix(in srgb, var(--verde-500) 35%, transparent);
    background:
        linear-gradient(180deg, var(--verde-claro), transparent 55%),
        var(--superficie);
}
.llave__url {
    margin-top: .3rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: var(--fondo);
    border: 1px solid var(--borde-suave);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    color: var(--texto-suave);
    overflow-x: auto;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: all;
    user-select: all;
}
.llave__url.es-copiado { border-color: var(--verde-500); color: var(--texto); }

/* --- 9. Cuanto le queda a una llave ----------------------------------------
   Una fecha de vencimiento obliga a restar mentalmente y nadie renueva un
   enlace porque leyo "17/09 09:14". La barra se lee sin pensar, y se pone ambar
   cuando quedan menos de dos dias, que es cuando conviene renovarla antes de
   que el chofer se quede afuera un lunes. */
.barra-vida {
    display: block;
    height: 5px;
    max-width: 16rem;
    margin: .5rem 0 .35rem;
    border-radius: 99px;
    background: var(--superficie-2);
    overflow: hidden;
}
.barra-vida > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--verde-600), var(--verde-400));
}
.barra-vida--poca > span { background: linear-gradient(90deg, #a15b06, var(--ambar)); }

/* --- 10. El plegable de letra chica ----------------------------------------
   Para lo que casi nadie abre -"otro vehiculo", "mas opciones", el historial de
   enlaces caidos-. Es el mismo .plegable sin la caja, para que no compita con
   las tarjetas de verdad que tiene al lado. */
.plegable--fino {
    border: 0;
    background: none;
    margin: .4rem 0 0;
}
.plegable--fino > summary { padding-left: 0; padding-right: 1.5rem; }
.plegable--fino > .plegable__cuerpo { padding-left: 0; padding-right: 0; }

/* --- 11. En un celular -----------------------------------------------------
   El rango horario es lo mas ancho de la fila y con 375px se lleva la mitad.
   Se acuesta arriba, en su propio renglon, y el cuerpo recupera el ancho
   completo. Ver la seccion 28b para el resto del criterio. */
@media (max-width: 560px) {
    .fila__hora--rango {
        min-width: 100%;
        margin-bottom: .15rem;
        color: var(--texto);
    }
    .fila--vuelta { flex-wrap: wrap; }
    .retrato-letras { width: 50px; height: 50px; font-size: 1.1rem; }
    .codigo-caja { gap: .6rem; }
    .chip-op__cara { padding: .45rem .75rem; font-size: .85rem; }
}


/* =============================================================================
   31  LA OFICINA ACTUA POR EL CHOFER
   =============================================================================
   Cerrar su ruta, anotar su salida, marcar su parada, anotar su carga. Todo lo
   que la oficina deja escrito a nombre propio -nunca del chofer- lleva ESTE
   color y ningun otro: no es verde (entregado), no es rojo (no se pudo), no es
   ambar (espera algo) ni marino (en ruta). Es un cuarto eje, "lo escribio la
   oficina", y tiene que verse como tal de reojo en la vuelta, en la parada, en
   la linea de tiempo y en el reporte, sin leer una palabra. */
:root,
:root[data-theme="claro"] {
    --oficina:       #6b46c1;
    --oficina-claro: #efe9fb;
}
:root[data-theme="oscuro"] {
    --oficina:       #c9b8f5;
    --oficina-claro: #2b2149;
}

.insignia--oficina { background: var(--oficina-claro); color: var(--oficina); border-color: transparent; }
.de-oficina { color: var(--oficina); font-weight: 600; }

/* La fila que escribio la oficina. Mismo gesto que .fila--viva y .fila--pide:
   una barra a la izquierda, y el color dice cual de las tres es. */
.fila--oficina {
    border-left: 3px solid var(--oficina);
    padding-left: .8rem;
    margin-left: -.8rem;
}

/* El motivo que escribio la oficina. Tercera linea, como la cita del chofer,
   pero en el color de la oficina y sin comillas: no es un testimonio de la
   calle, es una anotacion administrativa. */
.fila__motivo {
    display: block;
    margin-top: .25rem;
    color: var(--oficina);
    font-size: .87rem;
    line-height: 1.45;
}

/* --- Las miniaturas de respaldo ------------------------------------------ */
.miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .45rem;
}
.miniaturas img {
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borde-suave);
    background: var(--superficie-2);
    transition: transform var(--vel-rapida) var(--curva), box-shadow var(--vel-rapida) ease;
}
.miniaturas a:hover img { transform: translateY(-1px); box-shadow: var(--sombra-chica); }
.miniaturas__video { max-width: 220px; border-radius: 8px; }
.miniaturas__archivo {
    display: inline-flex;
    align-items: center;
    padding: .4rem .7rem;
    border: 1px dashed var(--borde);
    border-radius: 8px;
    font-size: .84rem;
    color: var(--texto-suave);
    text-decoration: none;
}
.miniaturas__archivo:hover { color: var(--texto); border-color: var(--texto-tenue); }

/* --- Las carpetas de fotos del vehiculo ---------------------------------- */
/* Son chips, como los filtros de cualquier listado: la persona ya sabe que un
   chip con numero se aprieta y filtra. El pie de cada foto dice de que es y de
   cuando, porque una foto de tablero sin fecha no cuenta ninguna evolucion. */
.carpetas { margin-bottom: 1rem; }
.foto__pie {
    padding: .45rem .55rem .5rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--texto-suave);
}
.foto__pie strong { display: block; color: var(--texto); font-weight: 600; }
.foto__pie a { color: inherit; }

/* --- La linea de tiempo del conductor ------------------------------------ */
/* Reusa .fila y .dia-sep enteros. Lo unico propio es el tipo del evento en la
   columna de la hora, chico y en mayusculas, que es lo que deja recorrer la
   lista con el ojo buscando "REPORTO" o "ENTREGO" sin leer los titulos. */
.actividad .fila__hora { min-width: 3.4rem; }
.actividad__tipo {
    display: block;
    margin-top: .1rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.actividad__tipo--oficina { color: var(--oficina); }
.actividad__tipo--ok      { color: var(--verde-600); }
.actividad__tipo--baja    { color: var(--rojo); }
.actividad__tipo--vendido { color: var(--ambar); }
.actividad__tipo--empresa { color: var(--marino-600); }
.actividad-mapa { margin: .4rem 0 1rem; }

@media (max-width: 560px) {
    .fila--oficina { margin-left: 0; }
    .miniaturas img { width: 72px !important; height: 54px !important; }
}

/* Un dato en rojo dentro de una linea gris: "3 sin entregar". */
.de-baja { color: var(--rojo); font-weight: 600; }

/* =============================================================================
   LOS DOCUMENTOS EN EL FORMULARIO DEL CONDUCTOR (conductores/form.php)
   =============================================================================
   Cada papel es una tarjeta: miniatura a la izquierda, que es y cuando vence a
   la derecha, y la cruz para quitarlo. El estado va ENCIMA de la miniatura y
   con color, porque es lo que se mira para saber si ya subio. */
.cdocs__lista { display: grid; gap: .7rem; margin-bottom: .7rem; }
.cdocs__lista:empty { display: none; }

.cdoc {
    position: relative;
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: .9rem;
    padding: .8rem 2.6rem .2rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.cdoc.esta-fallida { border-color: var(--rojo); }
.cdoc .campo { margin-bottom: .6rem; }
.cdoc .campo > span { font-size: .86rem; margin-bottom: .25rem; }

.cdoc__mini {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--borde-suave);
    background: var(--superficie-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cdoc__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdoc__pdf { font-weight: 800; letter-spacing: .04em; color: var(--texto-suave); }

.cdoc__estado {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .2rem .3rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    background: rgba(10, 14, 12, .62);
}
.cdoc.esta-subiendo .cdoc__mini img { opacity: .5; animation: rok-cdoc-late 1.1s ease-in-out infinite; }
.cdoc.esta-lista .cdoc__estado   { background: var(--verde-600); }
.cdoc.esta-fallida .cdoc__estado { background: var(--rojo); }
.cdoc.esta-fallida .cdoc__nombre { color: var(--rojo); font-weight: 600; white-space: normal; }
@keyframes rok-cdoc-late { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cdoc.esta-subiendo .cdoc__mini img { animation: none; } }

.cdoc__nombre {
    font-size: .84rem;
    color: var(--texto-tenue);
    margin-bottom: .45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cdoc__fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.cdoc__quitar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.cdoc__quitar:hover { color: var(--rojo); border-color: var(--rojo); }

/* El boton grande de agregar. El input queda encima, transparente: asi el
   toque abre el selector del sistema en cualquier telefono. */
.cdocs__agregar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: 1rem;
    border: 2px dashed var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    cursor: pointer;
    text-align: center;
}
.cdocs__agregar:hover { border-color: var(--verde-500); }
.cdocs__agregar input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 560px) {
    .cdoc { grid-template-columns: 80px 1fr; gap: .7rem; }
    .cdoc__mini { width: 80px; height: 80px; }
    .cdoc__fila { grid-template-columns: 1fr; gap: 0; }
}

/* ===========================================================================
   30. EL EQUIPO EN TERRENO (2026-10-03)
   ===========================================================================
   Clases de licencia en el orden del carnet, las tres puertas de "Como entra",
   la lista de "Listo para salir", el asignar rapido, y en el telefono del
   chofer: su usuario y quien va con el. Ver core/lib/equipo.lib.php. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Clases de licencia ----------------------------------------------------
   Una grilla y no una tira: doce chips con la letra grande y lo que maneja
   debajo, en el mismo orden que la tabla del reverso del carnet. */
.chips-licencia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .4rem;
    margin: .35rem 0 .3rem;
}
.chip-lic { position: relative; display: block; cursor: pointer; }
.chip-lic input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.chip-lic__cara {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .45rem .6rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    color: var(--texto-suave);
    line-height: 1.2;
    transition: border-color var(--vel) ease, background var(--vel) ease, color var(--vel) ease;
}
.chip-lic__cara strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    min-width: 2.1rem;
    color: var(--texto);
}
.chip-lic__cara small { font-size: .74rem; color: var(--texto-tenue); }
.chip-lic:hover .chip-lic__cara { border-color: var(--texto-tenue); }
.chip-lic input:checked + .chip-lic__cara {
    background: var(--verde-claro);
    border-color: color-mix(in srgb, var(--verde-500) 45%, transparent);
}
.chip-lic input:checked + .chip-lic__cara strong,
.chip-lic input:checked + .chip-lic__cara small { color: var(--verde-600); }
.chip-lic input:focus-visible + .chip-lic__cara { outline: 2px solid var(--verde-500); outline-offset: 2px; }

/* --- Listo para salir ------------------------------------------------------- */
.paso-listo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-top: 1px solid var(--borde-suave);
}
.paso-listo:first-of-type { border-top: 0; }
.paso-listo__marca {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--borde);
    font-weight: 800;
    font-size: .85rem;
}
.paso-listo.es-hecho .paso-listo__marca {
    background: var(--verde-500);
    border-color: var(--verde-500);
    color: #fff;
}
.paso-listo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.paso-listo__que { font-weight: 600; }
.paso-listo.es-hecho .paso-listo__que { color: var(--texto-suave); font-weight: 500; }
.paso-listo__por { font-size: .85rem; color: var(--texto-suave); }
.listo-linea {
    margin: 0 0 1rem;
    padding: .6rem .9rem;
    border-radius: var(--radio-chico);
    background: var(--verde-claro);
    color: var(--verde-600);
    font-weight: 600;
}
@media (max-width: 560px) {
    .paso-listo { flex-wrap: wrap; }
    .paso-listo .boton { margin-left: 2.35rem; }
}

/* --- Las tres puertas de "Como entra" -------------------------------------- */
.puerta {
    padding: .85rem 0;
    border-top: 1px solid var(--borde-suave);
}
.puerta__cabeza { display: flex; align-items: center; gap: .75rem; }
.puerta__n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    font-weight: 700;
    font-size: .85rem;
    color: var(--texto-suave);
}
.puerta.es-abierta .puerta__n {
    background: var(--verde-claro);
    border-color: color-mix(in srgb, var(--verde-500) 45%, transparent);
    color: var(--verde-600);
}
.puerta__que { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.puerta__cuerpo { margin: .55rem 0 0 2.55rem; }
@media (max-width: 560px) {
    .puerta__cabeza { flex-wrap: wrap; }
    .puerta__cuerpo { margin-left: 0; }
}
input.codigo-num.codigo-num--clave {
    width: 11rem;
    letter-spacing: .06em;
    font-size: 1.25rem;
}

/* --- Asignar rapido -------------------------------------------------------- */
.asignar-rapido__fila { display: flex; gap: .6rem; align-items: stretch; }
.asignar-rapido__fila > .campo { flex: 1 1 auto; min-width: 0; margin: 0; }
.asignar-rapido__fila > .campo select { width: 100%; height: 100%; }
.asignar-rapido__fila > .boton { flex: 0 0 auto; width: auto; }
.asignar-rapido__quitar,
.asignar-rapido__op {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .9rem;
    cursor: pointer;
}
.asignar-rapido__quitar[hidden] { display: none; }
.asignar-rapido__quitar {
    padding: .5rem .7rem;
    border-radius: var(--radio-chico);
    background: var(--ambar-claro);
    color: var(--ambar);
}
.asignar-rapido__quitar input,
.asignar-rapido__op input { width: auto; margin: 0; }
@media (max-width: 560px) {
    .asignar-rapido__fila { flex-direction: column; }
    .asignar-rapido__fila > .boton { width: 100%; }
}

/* --- En el telefono del chofer: su usuario --------------------------------- */
.c-usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
}
.c-usuario__que {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.c-usuario__valor {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.c-usuario__o { font-size: .85rem; color: var(--texto-tenue); }

/* Quien va contigo: botones grandes, para el dedo y no para el mouse. */
.c-acomp .chip-op__cara {
    padding: .7rem 1rem;
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* La cabecera de la ficha de una persona, en el celular: Llamar, WhatsApp,
   Editar y Volver de a dos por fila. Apilados a lo ancho se comian media
   pantalla antes de llegar a las pestanas. */
@media (max-width: 620px) {
    .ficha__cabecera--persona > .fila-acciones .boton { flex: 1 1 calc(50% - .4rem); }
}

/* Con la cabecera en columna (720px para abajo), el flex-basis de 240px de
   .ficha__datos dejaba de ser un ancho y pasaba a ser un ALTO: un hueco en
   blanco entre las insignias y los botones, en todas las fichas. */
@media (max-width: 720px) {
    .ficha__cabecera > .ficha__datos { flex-basis: auto; }
}


/* ===========================================================================
   32. BUSCADOR DE COMUNAS (2026-10-03)
   ---------------------------------------------------------------------------
   assets/js/comuna.js cambia el select de 346 comunas por un campo donde se
   escribe y aparecen las que calzan. El input hereda todo de .campo; aca va
   solo la lista que se despliega debajo.
   =========================================================================== */
.comuna-buscar { position: relative; }
.comuna-buscar__lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .3rem;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra-alta);
}
.comuna-buscar__lista[hidden] { display: none; }
.comuna-buscar__opcion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    /* Alto de dedo: se elige en el celular mientras se habla por telefono. */
    padding: .7rem .8rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.comuna-buscar__opcion small {
    color: var(--texto-tenue);
    font-weight: 400;
    font-size: .82rem;
    text-align: right;
}
.comuna-buscar__opcion:hover,
.comuna-buscar__opcion[aria-selected="true"] { background: var(--verde-claro); }
.comuna-buscar__aviso { display: block; margin-top: .35rem; color: var(--rojo); }
.comuna-buscar__aviso[hidden] { display: none; }

/* =============================================================================
   LAS CARAS DE UN DOCUMENTO PERSONAL (personal/subir.php, personal/renovar.php)
   =============================================================================
   Frente y reverso lado a lado, cada uno con su foto, su sello y sus dos
   botones. El sello va ENCIMA de la foto y con color: es lo que se mira para
   saber si ya subio. "Tomar foto" se muestra solo donde hay camara de mano
   (pantalla tactil); en el computador queda "Elegir archivo". */
.caras { margin: .2rem 0 1.2rem; }
/* Dos por fila siempre, tambien en el telefono: frente y reverso se tienen que
   ver juntos para entender que son el mismo papel. */
.caras__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}
@media (min-width: 900px) {
    .caras__lista { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.caras__mas { margin-top: .7rem; }
.caras__mas[hidden] { display: none; }
.caras__aviso { display: block; margin-top: .4rem; color: var(--texto-tenue); }
.caras__aviso:empty { display: none; }

.cara {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: .6rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    transition: border-color var(--vel) var(--curva), box-shadow var(--vel) var(--curva);
}
.cara.es-siguiente { border: 2px dashed var(--verde-500); padding: calc(.6rem - 1px); }
.cara.esta-lista    { border-color: var(--verde-600); }
.cara.esta-fallida  { border-color: var(--rojo); }

.cara__cabeza { display: flex; align-items: baseline; gap: .45rem; }
.cara__cabeza strong { font-size: .98rem; }
.cara__cabeza .sutil { font-size: .8rem; }

.cara__vista {
    position: relative;
    aspect-ratio: 8 / 5;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--borde-suave);
    background: var(--superficie-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cara__vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cara__vacia { color: var(--texto-tenue); opacity: .7; }
.cara__pdf { font-weight: 800; font-size: 1.2rem; letter-spacing: .04em; color: var(--texto-suave); }

.cara__sello {
    position: absolute;
    left: .4rem;
    bottom: .4rem;
    max-width: calc(100% - .8rem);
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: rgba(10, 14, 12, .66);
}
.cara__sello:empty { display: none; }
.cara.esta-lista .cara__sello    { background: var(--verde-600); }
.cara.esta-fallida .cara__sello  { background: var(--rojo); }
.cara.esta-subiendo .cara__vista img { opacity: .5; animation: rok-cdoc-late 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cara.esta-subiendo .cara__vista img { animation: none; } }

.cara__nombre {
    min-height: 1.1em;
    font-size: .8rem;
    color: var(--texto-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cara__nombre:empty { display: none; }
.cara.esta-fallida .cara__nombre { color: var(--rojo); font-weight: 600; white-space: normal; }

.cara__botones { display: grid; gap: .4rem; margin-top: auto; }
.cara__boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-height: 42px;
    padding-left: .4rem;
    padding-right: .4rem;
    font-size: .86rem;
    white-space: nowrap;
    cursor: pointer;
}
.cara__boton svg { flex: 0 0 auto; }
.cara__boton[hidden] { display: none; }
.cara__camara { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
/* El input queda encima del boton, transparente: asi el toque abre la camara o
   el selector del sistema en cualquier telefono, sin depender de que el
   navegador acepte un clic sobre un input escondido. */
.cara__boton input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* comprimir.js escribe su aviso junto al input, que aca esta dentro del boton. */
.cara__boton .comprimir-aviso { display: none !important; }
.cara__quitar { color: var(--texto-suave); }

@media (hover: hover) and (pointer: fine) {
    .cara__camara { display: none; }
}

/* --- Las caras a la vista en personal/detalle.php ---------------------------
   Todas juntas, una al lado de la otra: abrir un documento de dos caras
   muestra las dos. Tocar una la abre en el visor. */
.caras-ver {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: .9rem;
}
.caras-ver__cara { margin: 0; min-width: 0; }
.caras-ver__vista {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 5;
    border-radius: var(--radio-chico);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    cursor: zoom-in;
}
.caras-ver__vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.caras-ver__vista--vacia { cursor: default; color: var(--texto-tenue); font-size: .88rem; }
.caras-ver__cara figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    margin-top: .45rem;
}
.caras-ver__borrar { margin-left: auto; font-size: .84rem; color: var(--rojo); }

/* --- El visor con varias caras: contador y tira de miniaturas ------------- */
.visor__cuenta {
    flex: 0 0 auto;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.visor__cuenta[hidden] { display: none; }
.visor__barra { justify-content: flex-start; }
.visor__acciones { margin-left: auto; }

.visor.con-tira .visor__lienzo { bottom: 92px; }
.visor.con-tira .visor__imagen {
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
}
.visor__tira {
    position: absolute;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom);
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    padding: 0 .8rem;
    overflow-x: auto;
    z-index: 2;
}
.visor__tira[hidden] { display: none; }
.visor__mini {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 0;
    border: 0;
    background: none;
    color: #f2f5f8;
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--vel-rapida) ease;
}
.visor__mini.es-activa, .visor__mini:hover { opacity: 1; }
.visor__mini-foto {
    width: 88px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    font-weight: 800;
    font-size: .85rem;
}
.visor__mini.es-activa .visor__mini-foto { border-color: #fff; }
.visor__mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor__mini-txt { font-size: .74rem; font-weight: 600; }

/* =============================================================================
   32  EL PRECIO EN DOS CASILLAS Y EL FORMULARIO EN PASOS
   =============================================================================
   .precio-iva es rok_precio_iva_campo() (core/vistas/piezas.php): neto y total
   lado a lado, enlazados por iva.js. La casilla que manda -la escrita- lleva el
   borde verde; la calculada queda en gris. Se usa en /servicios/ y en
   rutas/form.php.

   .form-paso / .form-barra son el formulario de rutas en pasos numerados, con
   la barra de guardar pegada abajo. */

.precio-iva {
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    padding: .85rem 1rem .75rem;
    margin-bottom: 1.15rem;
}
.precio-iva__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}
.precio-iva__titulo { font-weight: 700; font-size: .96rem; }

.precio-iva__modo {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
}
.precio-iva__modo label {
    position: relative;
    padding: .32rem .85rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--texto-suave);
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}
.precio-iva__modo input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.precio-iva__modo label:hover { color: var(--texto); }
.precio-iva__modo label.es-activo,
.precio-iva__modo label:has(input:checked) {
    background: var(--verde-500);
    color: #fff;
}
.precio-iva__modo label:has(input:focus-visible) { box-shadow: var(--anillo); }

.precio-iva__campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .55rem;
}
.precio-iva__casilla { display: block; min-width: 0; margin: 0; }
.precio-iva__casilla > span:first-child {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-suave);
    margin-bottom: .3rem;
}
.precio-iva__casilla > span:first-child small { font-weight: 500; color: var(--texto-tenue); }
.precio-iva__input {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .75rem;
    min-height: 48px;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.precio-iva__input i { font-style: normal; color: var(--texto-tenue); font-weight: 700; }
.precio-iva__input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .55rem 0;
}
.precio-iva__input:focus-within { border-color: var(--verde-500); box-shadow: var(--anillo); }
.precio-iva__casilla.es-escrito .precio-iva__input { border-color: var(--verde-500); }
.precio-iva__casilla.es-escrito .precio-iva__input input { color: var(--texto); }
.precio-iva__casilla.es-escrito > span:first-child { color: var(--verde-600); }
.precio-iva__signo {
    padding-bottom: .85rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-tenue);
    white-space: nowrap;
}
.precio-iva__pie { display: block; margin-top: .55rem; font-size: .82rem; color: var(--texto-tenue); }
.precio-iva__pie [data-iva-linea] { color: var(--texto-suave); font-weight: 600; }

/* --- El formulario en pasos ----------------------------------------------- */
.form-pasos { display: block; }
.tarjeta.form-paso:hover {
    transform: none;
    box-shadow: var(--sombra-chica), var(--filo);
    border-color: var(--borde-suave);
}
.tarjeta.form-paso:hover::before { opacity: 0; }
.tarjeta.form-paso:focus-within { border-color: color-mix(in srgb, var(--verde-500) 40%, var(--borde-suave)); }
.form-paso__cabeza {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.1rem;
}
.form-paso__cabeza h2 { margin: 0; }
.form-paso__cabeza p { margin: .1rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.form-paso__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--verde-claro);
    color: var(--verde-600);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease;
}
.tarjeta.form-paso:focus-within .form-paso__num { background: var(--verde-500); color: #fff; }
.form-paso__sub { margin: 1rem 0 .7rem; font-size: 1rem; }
.form-paso__extras .plegable:last-child { margin-bottom: 0; }

/* Los plegables que son una accion ("+ Crear un servicio nuevo"): mas livianos,
   para que no compitan con los campos. */
.plegable--accion { background: transparent; border-style: dashed; margin-bottom: .8rem; }
.plegable--accion[open] { border-style: solid; background: var(--superficie-2); }
.plegable--accion > summary { font-weight: 600; padding: .75rem 1rem; }
.plegable--accion > summary > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.plegable--accion > summary strong { color: var(--verde-600); }
.plegable--accion > summary .sutil { font-weight: 500; font-size: .86rem; }

/* Cada direccion del reparto, numerada como la vera el chofer. */
.punto-fila {
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    padding: .4rem .9rem .2rem;
    margin: 0 0 .8rem;
    min-width: 0;
}
.punto-fila legend { padding: 0 .3rem; }
.punto-fila__num {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--marino-700);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
}
.punto-fila .campo { margin-bottom: .75rem; }

.sugerido-linea {
    margin: -.4rem 0 1rem;
    font-size: .88rem;
    line-height: 2.2;
    color: var(--texto-suave);
}
.sugerido-linea .boton { margin: 0 0 0 .4rem; vertical-align: middle; }

/* La barra de guardar, pegada abajo mientras se recorre el formulario. */
.form-barra {
    position: sticky;
    bottom: max(.6rem, env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    margin: 1.4rem 0 1rem;
    padding: .7rem .7rem .7rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--superficie) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--sombra-alta);
}
.form-barra__resumen {
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-barra__resumen.es-falta { color: var(--texto-tenue); font-weight: 500; }
.form-barra .boton { width: auto; margin: 0; flex: 0 0 auto; }

@media (max-width: 620px) {
    .precio-iva { padding: .75rem .8rem .65rem; }
    /* El "+ 19%" se va: en un telefono cada pixel es para el numero. */
    .precio-iva__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
    .precio-iva__signo { display: none; }
    .precio-iva__input { padding: 0 .55rem; }
    .precio-iva__input input { font-size: 1.05rem; }
    .form-barra { flex-direction: column; align-items: stretch; gap: .45rem; padding: .55rem; }
    .form-barra__resumen { text-align: center; white-space: normal; font-size: .84rem; }
    .form-barra .boton { width: 100%; }
}


/* =============================================================================
   33  LA FLOTA EN EL MAPA (2026-10-05)
   =============================================================================
   conductores/mapa.php y assets/js/flota.js. Un pin por persona en la calle,
   con sus iniciales, y el COLOR DICE QUE TAN FRESCA ES LA POSICION, no quien es:

     viva    verde y con anillo   aviso en los ultimos minutos. Es donde va.
     tibia   ambar                hace un rato: la pantalla estuvo apagada.
     quieta  gris                 nada hace mas de veinte minutos.
     salida  blanco, borde cortado el punto donde marco la salida y nada mas.

   Colores fijos y no variables del tema, por lo mismo que .geo-pin: el mapa es
   claro siempre, y en modo oscuro --texto y --fondo se dan vuelta. */

.flota-mapa {
    height: 440px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    overflow: hidden;
}

.flota-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem .45rem;
    margin: 0 0 .7rem;
}

.flota-nota { margin: .6rem 0 1rem; max-width: 72ch; font-size: .85rem; }

.flota-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    color: #fff;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
}
.flota-pin--viva   { background: #15803d; box-shadow: 0 0 0 4px rgba(34, 197, 94, .35), 0 1px 5px rgba(0, 0, 0, .4); }
.flota-pin--tibia  { background: #b45309; }
.flota-pin--quieta { background: #64748b; }
.flota-pin--salida { background: #fff; color: #1f2d3d; border: 2px dashed #1f2d3d; }

/* En la leyenda, chicos y sin letras. */
.flota-leyenda .flota-pin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    box-shadow: none;
}

.flota-globo { font-size: .86rem; line-height: 1.45; min-width: 190px; }
.flota-globo strong { font-size: .95rem; }
.flota-globo__trabajo { margin-top: .3rem; font-weight: 600; }
.flota-globo__aviso { color: #92400e; font-size: .8rem; }
.flota-globo a { display: inline-block; margin-top: .35rem; }

/* El avance del trabajo en una barra: verde lo entregado, rojo lo que no se
   pudo, y el resto -lo que falta- es el fondo. Se lee sin contar. */
.flota-barra {
    display: flex;
    height: 6px;
    max-width: 260px;
    margin: .35rem 0 .2rem;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1px solid var(--borde-suave);
    overflow: hidden;
}
.flota-barra__ok    { background: var(--verde-500); }
.flota-barra__falla { background: var(--rojo); }

.flota-por-salir { margin-top: 1.6rem; }

@media (max-width: 620px) {
    .flota-mapa { height: 320px; }
}

/* El enlace para el cliente (core/lib/pedido.lib.php).

   En la ficha de la ruta: el enlace a la vista, para copiarlo, con el atajo a
   WhatsApp al lado. El campo es de solo lectura y se selecciona entero al
   tocarlo: es para copiar, no para escribir. */
.pedido-enlace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 0;
}
.pedido-enlace input {
    flex: 1 1 220px;
    min-width: 0;
    padding: .3rem .5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .8rem;
}
.pedido-enlace .boton { margin: 0; }

/* En la tarjeta del chofer va debajo de "Abrir en Waze", con el mismo peso: es
   un atajo, no la accion de la parada. El verde de WhatsApp lo hace reconocible
   sin leer. */
.c-avisar { display: table; color: #128c4a; font-weight: 700; }
body[data-ruta="abierta"] .c-avisar { color: #4ade80; }

/* Los vehiculos con GPS sin salida marcada (conductores/mapa.php). Cuadrados y
   con la patente, para que nadie los confunda con un chofer: un circulo es una
   persona en la calle, un cuadrado es un vehiculo que reporta solo. El color es
   el estado del motor, no la frescura. */
.flota-pin--gps { border-radius: 7px; font-size: .66rem; letter-spacing: 0; }
.flota-pin--andando   { background: #16a34a; }
.flota-pin--encendido { background: #7c3aed; }
.flota-pin--apagado   { background: #94a3b8; }
.flota-leyenda .flota-pin--gps { border-radius: 3px; }

/* El chofer cuya posicion viene del GPS del camion y no de su telefono: el
   mismo circulo, con un borde azul. */
.flota-pin--con-gps { border-color: #93c5fd; }

/* El telefono del chofer cuando el punto grande es el GPS del vehiculo: un
   punto chico, blanco con borde del color de su frescura. Va debajo del pin
   del vehiculo (zIndexOffset en flota.js). */
.flota-pin--tel {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #64748b;
}
.flota-pin--tel-viva   { border-color: #15803d; }
.flota-pin--tel-tibia  { border-color: #b45309; }
.flota-pin--tel-quieta { border-color: #64748b; }
/* Lo que aparece al pasar el mouse por un punto del mapa (flota.js). */
.flota-tip { font-size: .8rem; line-height: 1.35; white-space: nowrap; }
.flota-tip strong { display: block; font-size: .85rem; }
.flota-tip strong span { font-weight: 400; color: #64748b; }
.flota-tip b { color: #92400e; }

.flota-leyenda .flota-pin--tel { width: 12px; height: 12px; border-width: 3px; border-color: #15803d; }

/* vehiculos/gps.php */
.gps-conexion { margin-bottom: 1rem; }
.gps-conexion__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.gps-conexion__estado { margin: .6rem 0 0; color: var(--texto-suave); font-size: .92rem; }
.gps-url { margin: .8rem 0 0; padding: .8rem .9rem; border: 1px dashed var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); }
.gps-url__titulo { display: block; font-weight: 700; margin-bottom: .4rem; }
.gps-url input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: var(--superficie); color: var(--texto); }
.gps-url small { display: block; margin-top: .45rem; line-height: 1.5; }
.gps-muestra { width: 100%; max-height: 320px; overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
pre.gps-muestra { margin: 0; padding: .7rem; background: var(--superficie-2); border-radius: var(--radio-chico); }
.gps-editar > summary { list-style: none; cursor: pointer; }
.gps-editar > summary::-webkit-details-marker { display: none; }
.gps-editar[open] { flex-basis: 100%; }
.gps-editar[open] .gps-form { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--borde-suave); }
.gps-asociar { display: flex; gap: .4rem; align-items: center; margin: 0; }
.gps-asociar select { max-width: 220px; }
.gps-prueba { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde-suave); }

/* =============================================================================
   La ficha del vehiculo en el mapa (conductores/mapa_vehiculo.php + flota.js).
   En pantalla ancha es una columna fija a la derecha; en el celular, una hoja
   que sube desde abajo y deja ver la mitad de arriba del mapa.
   ============================================================================= */
.fd-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Debajo del visor de fotos (900), que se abre desde la ficha; encima de la
       barra de arriba. El mapa va aislado (abajo) para que los controles de
       Leaflet, con z-index de hasta 1000, no se suban encima de la ficha. */
    z-index: 850;
    width: min(440px, 100vw);
    overflow-y: auto;
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    overscroll-behavior: contain;
}
.fd-panel[hidden] { display: none; }
.flota-mapa { isolation: isolate; }

/* Pantalla completa (flota.js, ponerCompleto). El mapa tapa toda la ventana,
   menu incluido, y queda DEBAJO de la ficha (850) y del visor de fotos (900):
   la ficha se abre encima, como en la vista normal. */
body.flota-completa { overflow: hidden; }
/* main.contenido tiene z-index 1: es una capa propia y el mapa no puede subir
   por encima de la barra de arriba (sticky, 30) desde adentro. En pantalla
   completa la capa entera sube; la ficha (850, en el body) sigue encima. */
body.flota-completa .contenido { z-index: 840; }
/* !important en position: Leaflet le escribe position:relative en linea al
   contenedor del mapa, y sin esto el mapa queda con alto 0. */
body.flota-completa .flota-mapa {
    position: fixed !important;
    inset: 0;
    z-index: 840;
    height: auto;
    border: 0;
    border-radius: 0;
}
/* El mapa se deja abierto horas (flota.js pone .flota-quieta en el body). Sin
   adornos que se muevan solos: la aurora del pie y los puntos que laten
   tenian a la tarjeta de video dibujando sin parar, y el latido es box-shadow,
   que se repinta entero en cada cuadro. El punto "en vivo" queda quieto, igual
   se entiende. La barra pierde el desenfoque: con el mapa pasando por debajo
   al bajar la pagina, se recalculaba en cada movimiento. */
body.flota-quieta .pie::before,
body.flota-quieta .pie__marca .punto,
body.flota-quieta .punto-vivo { animation: none; }
body.flota-quieta .barra {
    background: var(--superficie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Comunas de Santiago y limites regionales (flota.js, limitesDe). El nombre de
   la comuna va centrado en su punto, chico y con un halo blanco para leerse
   sobre cualquier calle. En el cuadro de capas, una rayita con el mismo trazo
   que se ve en el mapa. */
.rok-comuna-nombre span {
    display: inline-block;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font: 600 11px/1.2 system-ui, sans-serif;
    color: #1e293b;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
/* El panel propio de los limites mide 0x0 como todos los de Leaflet, y la
   regla general de svg (max-width: 100%) dejaba el dibujo en ancho cero.
   Leaflet solo lo anula en su overlay-pane; aca va lo mismo. */
.leaflet-container .leaflet-rokLimites-pane svg { max-width: none !important; max-height: none !important; }
/* Filtrar por comuna (limites.js, rokLimites.filtro). Un boton arriba a la
   izquierda, debajo del zoom, que abre la lista de las 52 comunas con cuanto
   hay en cada una. Con los colores del tema, como las fichas del modo pro; en
   el mapa de la flota va en blanco fijo, como el resto de sus controles. */
.rok-filtro {
    border-radius: 12px;
    border: 2px solid var(--borde);
    background: color-mix(in srgb, var(--superficie) 96%, transparent);
    box-shadow: 0 4px 14px -6px rgba(10, 31, 61, .45);
    color: var(--texto);
    font: 400 .82rem/1.3 system-ui, sans-serif;
    overflow: hidden;
}
:root[data-theme="oscuro"] .rok-filtro { border-color: #33507a; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .7); }
/* Las esquinas de Leaflet pesan lo mismo y gana la de abajo: el panel abierto
   quedaba debajo del cuadro de capas cuando el mapa es bajo. */
.leaflet-top.leaflet-left { z-index: 1001; }
.rok-filtro__boton {
    display: block;
    padding: .35rem .7rem;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.rok-filtro__boton:hover { text-decoration: none; background: var(--superficie-2); }
.rok-filtro__boton.es-activo { background: var(--verde-600); color: #fff; }
.rok-filtro__panel {
    width: min(260px, 78vw);
    padding: .5rem;
    border-top: 1px solid var(--borde);
}
.rok-filtro__panel[hidden] { display: none; }
.rok-filtro__panel input[type=search] {
    width: 100%;
    padding: .35rem .5rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: .85rem;
    background: var(--superficie);
    color: var(--texto);
}
.rok-filtro__lista {
    max-height: min(320px, 45vh);
    overflow-y: auto;
    margin: .4rem 0;
    overscroll-behavior: contain;
}
.rok-filtro__lista label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .2rem;
    border-radius: 4px;
    cursor: pointer;
}
.rok-filtro__lista label[hidden] { display: none; }
.rok-filtro__lista label:hover { background: var(--superficie-2); }
.rok-filtro__lista label span { flex: 1 1 auto; }
.rok-filtro__lista label b {
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: .72rem;
    text-align: center;
}
.rok-filtro__lista input { accent-color: var(--verde-600); }
.rok-filtro__nota { margin: .3rem 0; color: var(--texto-suave); }
.rok-filtro__pie { display: flex; justify-content: space-between; border-top: 1px solid var(--borde); padding-top: .4rem; }
.rok-filtro__pie button,
.flota-filtro-aviso .boton-texto {
    padding: 0;
    border: 0;
    background: none;
    color: #1d4ed8;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
:root[data-theme="oscuro"] .rok-filtro__pie button { color: #93c5fd; }
/* En la flota, blanco fijo como la caja de capas de Leaflet. El :root es para
   pesar lo mismo que las reglas de modo oscuro de arriba y ganarles. */
:root .flota-mapa .rok-filtro {
    --superficie: #fff; --superficie-2: #f1f5f9; --borde: #cbd5e1; --texto: #0f172a; --texto-suave: #475569;
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    box-shadow: none;
}
:root .flota-mapa .rok-filtro__pie button { color: #1d4ed8; }
.flota-mapa .rok-filtro__boton.es-activo { background: #0f172a; }
/* Arriba de la lista, mientras hay un filtro puesto. */
.flota-filtro-aviso {
    margin: 0 0 .7rem;
    padding: .45rem .7rem;
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    font-size: .88rem;
}
/* En cada fila de la lista, la comuna donde esta. */
.flota-fila-comuna {
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 600;
}
.flota-fila-comuna:empty { display: none; }
.fila[hidden] { display: none; }
/* El cuadro de capas propio de limites.js (modo pro de Organizar). Con los
   colores del tema y la forma de las fichas del modo pro: en modo oscuro es
   oscuro, no la caja blanca de Leaflet. */
.rok-capas {
    display: grid;
    gap: .15rem;
    padding: .4rem .6rem;
    border-radius: 12px;
    border: 2px solid var(--borde);
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    box-shadow: 0 4px 14px -6px rgba(10, 31, 61, .45);
    color: var(--texto);
    font: 600 .78rem/1.3 system-ui, sans-serif;
}
.rok-capas label { display: flex; align-items: center; gap: .4rem; cursor: pointer; white-space: nowrap; }
.rok-capas input { margin: 0; accent-color: var(--verde-600); }
.rok-capas__linea { display: inline-block; width: 16px; border-top: 3px solid #1d4ed8; }
.rok-capas__linea--region { border-top: 3px dashed #64748b; }
:root[data-theme="oscuro"] .rok-capas { border-color: #33507a; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .7); }
:root[data-theme="oscuro"] .rok-capas__linea--comuna { border-top-color: #60a5fa; }
:root[data-theme="oscuro"] .rok-capas__linea--region { border-top-color: #94a3b8; }
.flota-capa-linea {
    display: inline-block;
    width: 16px;
    vertical-align: middle;
    border-top: 3px solid #1d4ed8;
}
.flota-capa-linea--region { border-top: 3px dashed #334155; }

/* Lo que queda DEBAJO del mapa no se pinta: la barra de arriba lleva un
   desenfoque (backdrop-filter) y la lista se rehace cada minuto. Tapados igual
   cuestan memoria de video, y con la ventana entera eso basta para que algunas
   tarjetas de video dejen la pantalla verde. visibility y no display: el mapa
   vive adentro de .contenido y se vuelve a mostrar el solo. */
body.flota-completa .barra,
body.flota-completa .pie,
body.flota-completa .contenido { visibility: hidden; }
body.flota-completa .barra { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.flota-completa .flota-mapa { visibility: visible; }
.flota-completa-control a {
    width: auto !important;
    padding: 0 .65rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    color: #0f172a;
}
/* Con la ficha abierta en pantalla ancha, el boton se corre para no quedar debajo. */
@media (min-width: 900px) {
    body.flota-completa.con-fd .flota-completa-control { margin-right: calc(min(440px, 100vw) + 10px); }
}
@media (max-width: 899px) {
    .fd-panel {
        top: auto;
        height: 62vh;
        width: 100vw;
        border-left: 0;
        border-top: 1px solid var(--borde);
        border-radius: 16px 16px 0 0;
    }
    body.con-fd { padding-bottom: 62vh; }
}
.fd-cargando { padding: 1.5rem; }

.fd { padding: 0 0 1rem; font-size: .9rem; }
.fd-pagina .fd { max-width: 720px; }

.fd-cabeza {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .9rem 1rem .8rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde-suave);
}
.fd-foto {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 70px;
    border-radius: var(--radio-chico);
    overflow: hidden;
    background: var(--superficie-2);
}
.fd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-foto span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .7);
    color: #fff;
    font-size: .68rem;
}
.fd-foto--sin {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--texto-suave);
}
.fd-titulo { flex: 1 1 auto; min-width: 0; }
.fd-titulo h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.fd-titulo p { margin: .15rem 0 0; }
.fd-cerrar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--texto);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.fd-pagina .fd-cerrar { display: none; }

.fd-estado { font-weight: 700; }
.fd-estado span { font-weight: 400; color: var(--texto-suave); }
.fd-estado::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: #94a3b8;
}
.fd-estado--andando::before   { background: #16a34a; }
.fd-estado--encendido::before { background: #7c3aed; }

.fd-bloque { padding: .85rem 1rem; border-bottom: 1px solid var(--borde-suave); }
.fd-bloque h3 { margin: 0 0 .5rem; font-size: .95rem; }
.fd-bloque h3 small { font-weight: 400; color: var(--texto-suave); margin-left: .3rem; }
.fd-lugar { margin: 0 0 .6rem; font-weight: 600; }
.fd-nota { margin: .5rem 0 0; font-size: .8rem; }

.fd-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.fd-dato {
    padding: .45rem .6rem;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
}
.fd-dato span { display: block; font-size: .72rem; color: var(--texto-suave); }
.fd-dato strong { font-size: .95rem; }
.fd-dato small { font-weight: 400; color: var(--texto-suave); }
.fd-datos--grandes .fd-dato strong { font-size: 1.1rem; }
.fd-dato--aviso { border-color: #f59e0b; }
.fd-dato--mal { border-color: var(--rojo); }
.fd-dato--mal strong { color: var(--rojo); }

.fd-lista-simple { list-style: none; margin: .6rem 0 0; padding: 0; }
.fd-lista-simple li { padding: .15rem 0; }
.fd-lista-simple span { color: var(--texto-suave); font-size: .8rem; margin-right: .3rem; }
.fd-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .7rem 0 0; }
.fd-acciones .boton { margin: 0; }
.fd-acciones .sutil { font-size: .78rem; }

.fd-persona { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.fd-persona p { margin: .15rem 0 0; }
.fd-cita { margin: .4rem 0; color: var(--texto-suave); font-style: italic; }
.fd-obs { margin: .5rem 0; padding-left: 1.1rem; color: var(--rojo); }
.fd-mal { color: var(--rojo); }
.fd-aviso { margin: .5rem 0 .2rem; color: #92400e; }

.fd-avance { margin: .2rem 0 .1rem; }
.fd-paradas { list-style: none; margin: .7rem 0 0; padding: 0; }
.fd-parada {
    display: flex;
    gap: .6rem;
    padding: .5rem .3rem;
    border-top: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
}
.fd-parada[data-fd-ir] { cursor: pointer; }
.fd-parada[data-fd-ir]:hover { background: var(--superficie-2); }
.fd-parada__n {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #94a3b8;
    font-size: .78rem;
    font-weight: 800;
    color: var(--texto-suave);
}
.fd-parada--entregado .fd-parada__n { background: var(--verde-500); border-color: var(--verde-500); color: #fff; }
.fd-parada--fallido .fd-parada__n { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.fd-parada--sigue .fd-parada__n { border-color: #1d4ed8; color: #1d4ed8; }
.fd-parada__cuerpo { flex: 1 1 auto; min-width: 0; }
.fd-parada__det { margin-top: .15rem; font-size: .82rem; color: var(--texto-suave); }
.fd-parada--fallido .fd-parada__det { color: var(--texto); }
.fd-sigue {
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
}
.fd .miniaturas { margin-top: .35rem; }

.fd-luces { list-style: none; margin: 0; padding: 0; }
.fd-luces li { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; }
.fd-luces li > span { flex: 1 1 auto; }
.fd-luces small { display: block; }
.fd-luz { width: 26px; height: 26px; flex: 0 0 auto; }

.fd-carga { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; }
.fd-carga > span:first-child { width: 2.8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fd-carga > div { flex: 1 1 auto; }
.fd-carga .sutil { display: block; }

.fd-tiempo { list-style: none; margin: 0; padding: 0; }
.fd-ev {
    display: flex;
    gap: .6rem;
    padding: .4rem 0 .4rem .6rem;
    border-left: 3px solid var(--borde);
}
.fd-ev--ok    { border-left-color: var(--verde-500); }
.fd-ev--mal   { border-left-color: var(--rojo); }
.fd-ev--aviso { border-left-color: #f59e0b; }
.fd-ev__hora { width: 2.8rem; flex: 0 0 auto; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.fd-pie { padding: .8rem 1rem 0; font-size: .82rem; }

/* Lo que la ficha dibuja en el mapa: paradas numeradas por estado y las
   detenciones largas (P, morada si el motor seguia encendido). */
.fd-mk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #1f2d3d;
    background: #fff;
    color: #1f2d3d;
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.fd-mk--entregado { background: #15803d; border-color: #fff; color: #fff; }
.fd-mk--fallido   { background: #dc2626; border-color: #fff; color: #fff; }
.fd-mk--sigue     { border-color: #1d4ed8; color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29, 78, 216, .25); }
.fd-mk-alto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #64748b;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    opacity: .9;
}
.fd-mk-alto--motor { background: #7c3aed; }

/* Las luces del tablero en el mapa y en la ficha (iconos de rok_luz_icono).
   En el pin, la mas grave en la esquina, con el numero si hay mas de una. */
.flota-pin { position: relative; }
.flota-pin__luz {
    position: absolute;
    top: -9px;
    right: -11px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    font-size: 14px;
    line-height: 1;
}
.flota-pin__luz--critica { box-shadow: 0 0 0 2px #dc2626, 0 1px 4px rgba(0, 0, 0, .4); }
.flota-pin__luz--atencion { box-shadow: 0 0 0 2px #f59e0b, 0 1px 4px rgba(0, 0, 0, .4); }
.flota-pin__luz b { font-size: .6rem; color: #1f2d3d; padding-right: 1px; }
.flota-tip__luz { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .78rem; }
.flota-tip__luz .luz-icono { font-size: 16px; }
.flota-tip__luz--critica { color: #b91c1c; font-weight: 700; }
.fd-tira { display: flex; flex-wrap: wrap; gap: 4px; margin: .3rem 0 .1rem; }
.fd-tira .vehiculo__luz { width: 28px; height: 28px; font-size: 19px; border-radius: 7px; }
.fd-ev__luz { float: left; margin: 0 .35rem 0 0; font-size: 20px; line-height: 1; }

/* =============================================================================
   ORGANIZAR LA RUTA Y LO APRENDIDO (rutas/form.php, organizar.js, 2026-10-06g)
   ============================================================================= */
.punto-fila__medidas { margin-top: .4rem; }
.punto-fila__medidas .campo--chico input { max-width: 9rem; }
.punto-fila__tipos-carga { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .35rem 0 .2rem; font-size: .85rem; }
.casilla-chica { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; color: var(--texto-suave); }
.casilla-chica input { width: auto; margin: 0; }
.punto-fila__memoria {
    margin: .45rem 0 0;
    padding: .45rem .6rem;
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .82rem;
}
.punto-fila.es-conocida .punto-fila__memoria { border-left: 3px solid var(--verde-500); }

.organizar {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
}
.organizar__cabeza p { margin: .2rem 0 0; }
.organizar__botones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .8rem; }
.organizar__cupo { font-size: .85rem; }
.organizar__comprar { margin-top: .8rem; }
.organizar__comprar-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.organizar__resultado { margin-top: .9rem; }
.organizar__espera { color: var(--texto-suave); font-style: italic; }
.organizar__resumen { font-size: .95rem; }
.organizar__razones { margin: .5rem 0; padding-left: 1.2rem; }
.organizar__razones li { margin: .15rem 0; }
.organizar__parecida { padding: .5rem .7rem; border-radius: var(--radio-chico); background: var(--verde-claro); color: var(--texto); }
.organizar__detalle { margin: .6rem 0; }
.organizar__detalle summary { cursor: pointer; font-weight: 600; }
.organizar__lista { margin: .5rem 0 0; padding-left: 1.5rem; }
.organizar__lista li { margin: .3rem 0; }
.organizar__lista li.es-tarde .organizar__det { color: var(--rojo); }
.organizar__dir { display: block; font-weight: 600; overflow-wrap: anywhere; }
.organizar__det { display: block; font-size: .82rem; }
.organizar__aviso { display: block; font-size: .82rem; color: var(--ambar); }
.organizar__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .3rem; }
.organizar__nota { font-size: .8rem; }

.organizar-salida {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
    margin-top: .8rem; padding: .55rem .7rem; border-radius: var(--radio-chico);
    background: var(--ambar-claro); color: var(--texto);
}
.organizar-clima { margin: .6rem 0 0; font-size: .85rem; }
.organizar-capacidad { margin-top: .8rem; }
.organizar-sugerencias { display: grid; gap: .8rem; margin-top: .9rem; }
.organizar-sug__lista { list-style: none; margin: .4rem 0 0; padding: 0; }
.organizar-sug__lista li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem;
    padding: .4rem 0; border-bottom: 1px solid var(--borde-suave); font-size: .88rem;
}
.organizar-sug__lista li .es-no { color: var(--rojo); }
.organizar-borrador { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.organizar-borrador__botones { display: inline-flex; flex-wrap: wrap; gap: .4rem; }

/* Lo aprendido de una ruta (rutas/ver.php) y las pantallas de aprendizaje. */
.aprendido__tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.aprendido__tabla th, .aprendido__tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--borde-suave); text-align: left; vertical-align: top; }
.aprendido__tabla th { color: var(--texto-suave); font-weight: 600; font-size: .8rem; }
.aprendido__tabla td.num, .aprendido__tabla th.num { text-align: right; white-space: nowrap; }
.aprendido__envoltura { overflow-x: auto; }
.aprendido__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.aprendido__cifra { padding: .6rem .7rem; border-radius: var(--radio-chico); background: var(--superficie-2); }
.aprendido__cifra b { display: block; font-size: 1.15rem; }
.aprendido__cifra span { font-size: .78rem; color: var(--texto-suave); }
.aprendido__fuente { display: inline-block; padding: 0 .35rem; border-radius: 6px; font-size: .72rem; background: var(--fondo-alt); color: var(--texto-suave); }
.aprendido__fuente--gps { background: var(--verde-claro); color: var(--verde-600); }
.aprendido__mejor { color: var(--verde-600); font-weight: 600; }
.aprendido__peor { color: var(--rojo); font-weight: 600; }
.aprendido__barra { display: inline-block; height: .5rem; border-radius: 4px; background: var(--verde-500); vertical-align: middle; }
.aprendido__barra--todas { background: var(--marino-600); opacity: .55; }
.aprendido__aviso { margin: .2rem 0 .6rem; padding: .55rem .7rem; border-radius: var(--radio-chico); background: var(--superficie-2); font-size: .88rem; }
.aprendido__aviso--ojo { border-left: 3px solid var(--rojo); }
.aprendido__aviso--bien { border-left: 3px solid var(--verde-500); }

/* Entregas y fallos por hora en la ficha del lugar (rutas/lugar.php). */
.lugar-horas { display: flex; gap: 2px; align-items: flex-end; max-width: 34rem; }
.lugar-horas__col { flex: 1; text-align: center; min-width: 0; }
.lugar-horas__col small { font-size: .66rem; color: var(--texto-suave); }
.lugar-horas__barra { height: 4rem; display: flex; flex-direction: column-reverse; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.lugar-horas__ok { display: block; background: var(--verde-500); }
.lugar-horas__mal { display: block; background: var(--rojo); }
.lugar-horas__ley { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: middle; margin-left: .4rem; }
.lugar-horas__ley--ok { background: var(--verde-500); }
.lugar-horas__ley--mal { background: var(--rojo); }

/* =============================================================================
   EL GPS FUERA DEL MAPA GRANDE (panel, ficha y listado de vehiculos)
   =============================================================================
   El mapa chico (flota-mini.js) usa los mismos pines .flota-pin del grande. El
   estado con su punto de color es .fd-estado, el de la ficha del mapa. */
.flota-mini {
    height: 300px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    overflow: hidden;
}
.flota-mini .leaflet-marker-icon { cursor: pointer; }
@media (max-width: 640px) {
    .flota-mini { height: 240px; }
}

/* El paso que falta antes del mapa: conectar, esperar la senal, asociar. */
.gps-paso__titulo { margin: 0 0 .3rem; }
.gps-paso__texto { margin: 0 0 .6rem; max-width: 68ch; }
.gps-paso__accion { margin: 0; }

/* Junto a la patente en la cabecera de la ficha. */
.ficha__gps {
    display: inline-block;
    margin-top: .45rem;
    color: var(--texto);
    text-decoration: none;
    font-size: .9rem;
}
.ficha__gps:hover { text-decoration: underline; }

/* En la tarjeta del listado: una linea, cortada si no cabe. */
.vehiculo__gps {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Ver los 7" en el mapa chico, cuando abre donde esta la mayoria. */
.flota-mini__todos {
    padding: .3rem .65rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie, #fff);
    color: var(--texto);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.flota-mini__todos:hover { background: var(--superficie-2); }

/* El vehiculo tocado en el panel del inicio: anillo y un poco mas grande. */
.flota-pin--elegido {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f172a, 0 2px 8px rgba(0, 0, 0, .45);
}
/* Cuando el elegido no tiene GPS. */
.flota-mini__aviso {
    padding: .3rem .6rem;
    border-radius: var(--radio-chico);
    background: var(--superficie, #fff);
    color: var(--texto);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* =============================================================================
   FUERA DE SERVICIO (vehiculos/servicio.php, fuera_servicio.lib.php, 2026-10-06j)
   =============================================================================
   Choco, en taller, en grua. El icono viene de iconos-estado.png (.estado-icono)
   y trae su color; aca solo se dice donde va y de que tamano. */
.insignia--fuera { background: var(--rojo-claro); color: var(--rojo); border-color: transparent; }
.vehiculo__fuera { display: inline-flex; align-items: center; gap: .3rem; }
.vehiculo__fuera .estado-icono { font-size: 1.15em; }

/* El aviso de arriba de la ficha: el dibujo grande a la izquierda, se reconoce
   antes de leer. */
.fs-aviso { display: flex; align-items: flex-start; gap: .75rem; }
.fs-aviso__icono { flex: 0 0 auto; font-size: 34px; line-height: 1; background: #fff; border-radius: 9px; padding: 3px; }

.fs-actual__cabeza { display: flex; align-items: center; gap: .9rem; }
.fs-actual__icono { flex: 0 0 auto; font-size: 46px; line-height: 1; }
.fs-hist__icono { font-size: 24px; }

.fs-linea { display: flex; align-items: center; gap: .4rem; }
.fs-linea .estado-icono { font-size: 20px; }
.fs-linea--grande { margin: 0; font-size: .98rem; }
.fs-linea--grande .estado-icono { font-size: 30px; }

/* El pin del mapa: apagado (no va a moverse) y con el motivo en la esquina de
   arriba a la izquierda; la de la derecha es de la luz del tablero. */
/* Gris con fondo y no con filter: un filter en el pin apaga tambien los iconos
   de las esquinas, y un hijo no se puede salir del filtro del padre. */
.flota-pin.flota-pin--fuera { background: #6b7280; }
.flota-pin__fuera {
    position: absolute;
    top: -10px;
    left: -12px;
    display: inline-flex;
    padding: 2px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0 2px #dc2626, 0 1px 4px rgba(0, 0, 0, .4);
    font-size: 16px;
    line-height: 1;
}
.flota-tip__fuera { display: flex; align-items: center; gap: .3rem; margin: .15rem 0 .1rem; font-size: .8rem; color: #b91c1c; }
.flota-tip__fuera .estado-icono { font-size: 18px; }

/* Los iconos del GPS al lado de "Andando", "Sin senal"... */
.flota-tip .gps-icono,
.fila__detalle .gps-icono { font-size: 15px; margin-right: .2rem; vertical-align: -2px; }
.fd-lista-simple .gps-icono { font-size: 17px; vertical-align: -3px; }

/* =============================================================================
   Caras y logos (7-oct-2026)
   rok_avatar(): la foto de una persona o el logo de un cliente, con las
   iniciales cuando no hay. El logo va ENTERO sobre blanco: un logo recortado
   o sobre fondo oscuro deja de ser el logo de nadie.
   ============================================================================= */
.avatar {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    overflow: hidden;
    display: inline-grid;
    place-items: center;
    background: var(--superficie-2);
    box-shadow: var(--sombra-chica), var(--filo);
    vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--chico  { width: 40px; height: 40px; border-radius: 10px; }
.avatar--grande { width: 84px; height: 84px; border-radius: 16px; }
.avatar--letras {
    background: linear-gradient(150deg, var(--superficie-2), var(--marino-600));
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--texto);
}
.avatar--chico.avatar--letras  { font-size: .9rem; }
.avatar--grande.avatar--letras { font-size: 1.7rem; }
.avatar--logo { background: #fff; }
.avatar--logo img { object-fit: contain; padding: 8%; }
.avatar--logo.avatar--letras { background: linear-gradient(150deg, #ede9fe, #c4b5fd); color: #3b0764; }

/* Una cara con su nombre al lado, dentro de un dato (rutas/ver.php). La
   regla `.datos-lista div span` es para el rotulo (mayusculas, gris): aca no. */
.con-cara { display: inline-flex; align-items: center; gap: .5rem; }
.datos-lista div .con-cara { display: inline-flex; font-size: inherit; text-transform: none; letter-spacing: normal; color: inherit; font-weight: inherit; margin: 0; }
.datos-lista div .avatar { display: inline-grid; margin: 0; text-transform: none; letter-spacing: .02em; color: var(--texto); }
.datos-lista div .avatar--logo.avatar--letras { color: #3b0764; }

/* La fila de una lista con su cara a la izquierda. */
.fila--con-cara { align-items: center; gap: .8rem; }

/* --- La cabecera de la ficha del cliente ----------------------------------- */
.cli-cabecera { display: flex; gap: 1.1rem; align-items: flex-start; }
.cli-cabecera__cara { display: grid; justify-items: center; gap: .3rem; flex: 0 0 auto; }
.cli-cabecera__cara form { margin: 0; }
.cli-cabecera__cuerpo { min-width: 0; flex: 1 1 auto; }
.cli-cabecera__cuerpo h1 { margin: 0 0 .35rem; }
.cli-boton-texto {
    font: inherit; font-size: .74rem; font-weight: 700; color: var(--texto-suave);
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.cli-boton-texto:hover { color: var(--texto); }
.cli-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin: 0 0 1.2rem;
}
.cli-cifra {
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    padding: .7rem .85rem;
    box-shadow: var(--filo);
}
.cli-cifra span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); }
.cli-cifra strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 1.2rem; margin-top: .15rem; }
.cli-cifra small { display: block; color: var(--texto-suave); font-size: .78rem; margin-top: .1rem; }
.cli-cifra--alerta strong { color: var(--rojo-500, #ef4444); }

/* --- Donde queda: mapa y lugares ------------------------------------------- */
.cli-donde { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cli-donde__mapa {
    height: 320px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    overflow: hidden;
}
.cli-lugares { display: grid; gap: .6rem; }
.cli-lugar {
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: .75rem .85rem;
    background: var(--superficie);
}
.cli-lugar__cab { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.cli-lugar__nombre { font-weight: 700; }
.cli-lugar__dir { display: block; margin-top: .15rem; }
.cli-lugar__extra { display: block; color: var(--texto-suave); font-size: .84rem; margin-top: .25rem; }
.cli-lugar__gps { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; font-size: .82rem; color: var(--texto-suave); }
.cli-lugar__acciones { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .45rem; font-size: .84rem; }
.cli-punto { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; background: #94a3b8; flex: 0 0 auto; }
.cli-punto--ok { background: #22c55e; }
.cli-punto--aviso { background: #f59e0b; }
.cli-punto--mal { background: #ef4444; }
.cli-vacio-dir {
    border: 1px dashed var(--borde);
    border-radius: var(--radio-chico);
    padding: 1rem;
    text-align: left;
}
@media (max-width: 760px) {
    .cli-donde { grid-template-columns: 1fr; }
    .cli-donde__mapa { height: 240px; }
    .cli-cabecera { gap: .8rem; }
    .cli-cabecera .avatar--grande { width: 64px; height: 64px; border-radius: 12px; }
}

/* --- Contactos ------------------------------------------------------------- */
.cli-contactos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.cli-contacto {
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: .7rem .85rem;
    background: var(--superficie);
    display: grid;
    gap: .15rem;
    font-size: .9rem;
}
.cli-contacto strong { font-size: .96rem; }
.cli-contacto .sutil { font-size: .82rem; }
.cli-contacto__acc { display: flex; gap: .7rem; margin-top: .3rem; font-size: .82rem; }

/* --- El logo como pin del mapa (rutas, bases, flota, ficha) ----------------- */
.pin-logo {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #7c3aed;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    display: grid !important;
    place-items: center;
    overflow: hidden;
}
.pin-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
/* Leaflet trae `.leaflet-container .leaflet-marker-pane img { width: auto; padding: 0 }`
   con mas peso: sin esto el logo sale a su tamano real, recortado en el circulo. */
.leaflet-container .leaflet-marker-pane .pin-logo img { width: 100% !important; height: 100% !important; padding: 3px !important; box-sizing: border-box; }
.pin-logo span { font: 700 11px/1 "Space Grotesk", sans-serif; color: #4c1d95; }
.pin-logo--chico { width: 26px !important; height: 26px !important; border-width: 2px; }
.pin-logo--chico span { font-size: 9px; }

/* --- La cara del chofer en /conductor/ (7-oct-2026) ------------------------
   Tocarla abre la camara de adelante. Sin foto: iniciales con una camara verde
   grande encima (la invitacion). Mientras sube, late; al volver, un anillo
   verde que se apaga: el chofer no lee, ve. */
.c-saludo { display: flex; align-items: center; gap: .9rem; }
.c-cara { margin: 0; flex: 0 0 auto; }
.c-cara__boton { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.c-cara .avatar { width: 64px; height: 64px; border-radius: 50%; transition: transform .15s ease, box-shadow .3s ease; }
.c-cara__boton:active .avatar { transform: scale(.94); }
.c-cara__camara {
    position: absolute; right: -4px; bottom: -4px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--superficie); color: var(--texto-suave);
    border: 2px solid var(--fondo, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.c-cara--sin .c-cara__camara { width: 32px; height: 32px; right: -6px; bottom: -6px; background: #16a34a; color: #fff; }
.c-cara--sin .c-cara__camara svg { width: 18px; height: 18px; }
.c-cara.es-subiendo .avatar { animation: c-cara-late 1s ease-in-out infinite; }
.c-cara.es-recien .avatar { animation: c-cara-listo 1.6s ease-out 1; }
@keyframes c-cara-late { 50% { transform: scale(.92); opacity: .7; } }
@keyframes c-cara-listo {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .7); transform: scale(1.08); }
    40%  { transform: scale(1); }
    100% { box-shadow: 0 0 0 18px rgba(22, 163, 74, 0); }
}
.c-saludo > .avatar { width: 64px; height: 64px; border-radius: 50%; }
.c-cara .comprimir-aviso { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .c-cara.es-subiendo .avatar, .c-cara.es-recien .avatar { animation: none; }
}

/* =============================================================================
   34  LA FICHA DE LA RUTA: RESUMEN, MAPA GRANDE Y PESTANAS (2026-10-07)
   =============================================================================
   rutas/ver.php y assets/js/ficha.js. Sin JavaScript no hay pestanas ni
   pantalla completa: las secciones se ven seguidas y el mapa en su tarjeta. */

/* --- El resumen: seis datos en una franja ---------------------------------- */
.ficha-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: .6rem;
    margin: 0 0 1.1rem;
}
.ficha-dato {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: .7rem .85rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    box-shadow: var(--sombra-chica);
    color: var(--texto);
    text-decoration: none;
}
.ficha-dato strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.ficha-dato small { font-size: .76rem; line-height: 1.3; }
.ficha-dato__t {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.ficha-dato--enlace:hover { border-color: var(--verde-500); }
.ficha-avance {
    display: flex;
    height: 6px;
    border-radius: 999px;
    background: var(--superficie-2);
    overflow: hidden;
}
.ficha-avance__ok { background: #15803d; }
.ficha-avance__no { background: #c02626; }

/* --- La tarjeta del mapa --------------------------------------------------- */
.ficha-mapa__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .8rem;
    margin: 0 0 .7rem;
}
.ficha-mapa__barra h2 { margin: 0; }
.ficha-mapa__barra .fila-acciones { margin: 0; gap: .4rem; flex-wrap: wrap; }
.ficha-mapa__cuerpo { position: relative; }
.ficha-mapa__panel,
.ficha-mapa__fichas { display: none; }

/* --- Pantalla completa, como el modo pro ----------------------------------
   Las mismas dos capas que encierran al modo pro (ver puntos.css): main.contenido
   con z-index 1 y la .tarjeta con isolation. Mientras dure, la primera sube y la
   segunda deja de ser capa; si no, la barra de la app tapa el boton de salir. */
body.ficha-completa-abierta { overflow: hidden; }
body.ficha-completa-abierta .contenido { z-index: 10050; }
body.ficha-completa-abierta .tarjeta { isolation: auto; }
.ficha-mapa.es-completa {
    position: fixed;
    inset: 0;
    z-index: 10050;
    margin: 0;
    padding: .6rem;
    border-radius: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--superficie);
}
.ficha-mapa.es-completa .ficha-mapa__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .5rem .7rem;
    min-height: 0;
}
.ficha-mapa.es-completa .geo-caja { display: contents; }
.ficha-mapa.es-completa .geo-mapa {
    grid-column: 1;
    grid-row: 1;
    height: auto !important;
    min-height: 0;
}
.ficha-mapa.es-completa .geo-caja > :not(.geo-mapa) { grid-column: 1; grid-row: 2; margin: 0; }
/* El parrafo de km se va: en pantalla completa lo dicen las fichas, y comparte
   la fila con "Guardar este orden", que es lo que importa ahi. */
.ficha-mapa.es-completa .geo-caja > [data-trazado-texto] { display: none; }
.ficha-mapa.es-completa .ficha-mapa__panel {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.ficha-mapa__panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .5rem;
}
.ficha-mapa__extremo { padding: .35rem .2rem; font-size: .85rem; color: var(--texto-suave); }
.ficha-mapa__extremo b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: .35rem;
    border-radius: 6px;
    background: var(--marino-800);
    color: #fff;
    font-size: .72rem;
}
.ficha-mapa__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ficha-mapa__parada {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    padding: .4rem .35rem;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}
.ficha-mapa__parada:hover { background: var(--superficie-2); }
.ficha-mapa__parada.es-elegida { border-color: var(--verde-500); background: var(--superficie-2); }
.ficha-mapa__parada .parada__num { margin: 0; flex: 0 0 auto; }
.ficha-mapa__hora { display: block; font-size: .74rem; color: var(--texto-suave); }

/* Las fichas: abajo a la izquierda del mapa, encima de los pines. */
.ficha-mapa.es-completa .ficha-mapa__fichas {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    position: absolute;
    left: 10px;
    bottom: 34px;
    z-index: 900;
    max-width: calc(100% - 370px);
    pointer-events: none;
}
.ficha-mapa__ficha {
    display: grid;
    justify-items: center;
    gap: .05rem;
    min-width: 4.6rem;
    padding: .35rem .5rem;
    border-radius: 12px;
    border: 2px solid var(--borde);
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    box-shadow: 0 4px 14px -6px rgba(10, 31, 61, .45);
    pointer-events: auto;
}
.ficha-mapa__ficha span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.ficha-mapa__ficha strong { font-size: .88rem; white-space: nowrap; }
.ficha-mapa__ficha small { font-size: .68rem; color: var(--texto-suave); }

@media (max-width: 760px) {
    .ficha-mapa.es-completa .ficha-mapa__cuerpo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto 38%;
    }
    .ficha-mapa.es-completa .ficha-mapa__panel { grid-column: 1; grid-row: 3; }
    .ficha-mapa.es-completa .ficha-mapa__fichas { max-width: calc(100% - 20px); bottom: auto; top: 10px; left: 54px; }
}

/* --- Las pestanas: el molde de /rutas/, con margen propio ------------------ */
.ficha-tabs { margin: 0 0 1rem; }
.ficha-panel > .tarjeta:first-of-type { margin-top: 0; }

/* --- Las paradas: una linea por parada, el resto plegado ------------------ */
.paradas-ficha { display: grid; gap: 0; }
.parada {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    padding: .65rem 0;
    border-top: 1px solid var(--borde-suave);
}
.parada:first-child { border-top: 0; }
.parada__cuerpo { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.parada__der { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.parada__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    margin: 0 .45rem 0 0;
    padding: 0 .3rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1f2d3d;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    font: 800 .78rem/1 "Space Grotesk", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    cursor: default;
}
body.ficha-mapa-listo button.parada__num { cursor: pointer; }
.parada--entregado .parada__num { background: #15803d; }
.parada--fallido .parada__num { background: #c02626; }
.parada__num.es-elegida { outline: 3px solid var(--verde-400); outline-offset: 1px; }
.parada__corta { display: block; margin: .15rem 0 0 2.1rem; color: var(--texto-suave); font-size: .8rem; }
.parada__detalle { margin: .25rem 0 0 2.1rem; }
.parada__detalle > summary {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
}
.parada__detalle[open] > summary { margin-bottom: .2rem; }
.parada__detalle__cuerpo > br:first-child { display: none; }
@media (max-width: 560px) {
    .parada { flex-wrap: wrap; }
    .parada__der { margin-left: 2.1rem; }
}

/* =============================================================================
   RUTAS: EL PANEL DE FILTROS Y LA LISTA AGRUPADA
   =============================================================================
   Los filtros de /rutas/ eran cuatro filas de chips sueltas, sin nombre en
   escritorio, y el cliente vivia en un plegable. Ahora van juntos en un panel,
   cada fila con su rotulo en una columna fija, y el cliente al lado del
   buscador. En celular el panel se aplana: las tiras deslizables ya saben
   llegar al canto de la pantalla y un borde alrededor las cortaria. */
.filtros-panel {
    margin: 0 0 1rem;
    padding: .95rem 1.05rem .35rem;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.filtros-panel > .filtros--panel { margin-bottom: .85rem; }
.filtros-panel > .plegable--filtros { margin: .55rem 0 .6rem; }

/* La columna de rotulos: todos del mismo ancho para que los chips de las cuatro
   filas arranquen en la misma vertical y la zona se lea como una tabla. */
.filtros--rotulada > .filtros__titulo { flex: 0 0 5.4rem; margin-right: 0; }
/* Si los chips no caben en una linea, la segunda arranca bajo los chips y no
   bajo el rotulo: el rotulo queda solo en su columna. */
@media (min-width: 621px) {
    .filtros--rotulada { position: relative; padding-left: 5.95rem; }
    .filtros--rotulada > .filtros__titulo { position: absolute; left: 0; top: .5rem; }
}

/* El cliente, al lado del buscador. Misma pastilla que el select de ordenar. */
.filtros__cliente { flex: 0 1 15rem; min-width: 0; }
.filtros__cliente select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 44px;
    padding: .55rem 2.2rem .55rem 1rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background-color: var(--superficie);
    color: var(--texto);
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-tenue) 50%),
                      linear-gradient(135deg, var(--texto-tenue) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease;
}
.filtros__cliente select:hover { border-color: var(--texto-tenue); }
.filtros__cliente select:focus { outline: none; border-color: var(--verde-500); box-shadow: var(--anillo); }
.filtros__cliente select option { background: var(--superficie); color: var(--texto); }

@media (max-width: 620px) {
    .filtros-panel { padding: 0; border: 0; background: none; }
    .filtros__cliente { flex: 1 1 100%; order: 2; }
    .filtros--panel > .boton { order: 1; }
    .filtros--rotulada > .filtros__titulo { flex: 0 0 auto; }
}

/* --- Como se ve la lista ----------------------------------------------------
   Agrupar va en un selector de tres posiciones arriba de la lista, aparte de
   los filtros: no saca filas, cambia como se leen. La posicion puesta se ve
   como una pastilla blanca levantada sobre el riel, que es la convencion de
   "esto es lo que esta elegido" en cualquier telefono. */
.lista-vista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .4rem 0 .9rem;
}
.segmentado {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--borde-suave);
    border-radius: 999px;
    background: var(--superficie-2);
}
.segmentado__op {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--vel-rapida) ease, color var(--vel-rapida) ease, box-shadow var(--vel-rapida) ease;
}
.segmentado__op svg { opacity: .7; }
.segmentado__op:hover { color: var(--texto); background: color-mix(in srgb, var(--superficie) 60%, transparent); }
.segmentado__op.es-activo {
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px -8px rgba(0, 0, 0, .35);
}
.segmentado__op.es-activo svg { opacity: 1; color: var(--verde-600); }

.lista-vista__sentido {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .45rem .95rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.lista-vista__sentido:hover { color: var(--texto); border-color: var(--texto-tenue); }

/* --- Un grupo, una tarjeta --------------------------------------------------
   Ver rok_rutas_encabezado_grupo(): con el rotulo gris dentro de una sola
   tarjeta larga no se notaba que la lista estaba agrupada. Ahora cada cliente
   (o cada dia) es su tarjeta, con una franja verde a la izquierda y la cabecera
   pegajosa: bajando por un cliente de treinta filas sigue a la vista de quien
   son y cuanto suman. */
.grupos { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.25rem; }

.grupo-bloque {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra-chica), var(--filo);
}
.grupo-bloque::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--verde-500);
}
.grupo-bloque.es-hoy { border-color: color-mix(in srgb, var(--verde-500) 45%, transparent); }

.grupo-bloque__cab {
    position: sticky;
    top: 5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.35rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde-suave);
    border-radius: var(--radio) var(--radio) 0 0;
}
.grupo-bloque__cab .sel-casilla { margin-right: -.4rem; }
.grupo-bloque__cab .avatar { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; }
.grupo-bloque__id { min-width: 0; flex: 1 1 auto; }
.grupo-bloque__nombre {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.grupo-bloque__datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .55rem;
    margin: .25rem 0 0;
    font-size: .86rem;
    color: var(--texto-suave);
}
.grupo-bloque__datos .insignia { font-size: .7rem; }
.grupo-bloque__plata { flex: 0 0 auto; text-align: right; line-height: 1.15; }
.grupo-bloque__plata strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--texto); }
.grupo-bloque__plata small { font-size: .74rem; font-weight: 600; color: var(--texto-tenue); }
.grupo-bloque__solo { flex: 0 0 auto; }
.grupo-bloque__cuerpo { padding: .25rem 1.35rem 1.05rem; }
.grupo-bloque__cuerpo > .documento:first-child { padding-top: .95rem; }
/* El titulo de la ruta no se aprieta en una columna de 150px para que quepan
   los botones al lado: si no caben los dos, los botones bajan a su linea. */
.grupos .documento__izq { flex-basis: 360px; }
.grupos .documento__der { margin-left: auto; }

/* La hoja de calendario del bloque de un dia. Hoy va llena. */
.fecha-ficha {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 54px;
    border: 1px solid color-mix(in srgb, var(--verde-500) 35%, transparent);
    border-radius: 12px;
    background: var(--verde-claro);
    color: var(--verde-600);
    line-height: 1;
}
.fecha-ficha b { font-size: 1.4rem; font-weight: 800; }
.fecha-ficha small { margin-top: .2rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.grupo-bloque.es-hoy .fecha-ficha { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }

/* El cliente dentro del dia: una banda suave, no otra tarjeta. Dos niveles de
   caja se leen como ruido; una banda con el logo chico se lee como seccion. */
.grupo-sub { margin-top: .85rem; }
.grupo-sub__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .7rem;
    padding: .55rem .85rem;
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
}
.grupo-sub__cab .avatar { width: 30px; height: 30px; border-radius: 8px; font-size: .72rem; }
.grupo-sub__nombre { margin: 0; font-size: 1rem; font-weight: 800; color: var(--texto); }
.grupo-sub__datos { font-size: .84rem; color: var(--texto-suave); }
.grupo-sub__plata { margin-left: auto; font-size: 1rem; font-weight: 800; color: var(--texto); }
.grupo-sub .documento { padding-left: .85rem; }

/* El rotulo gris de "Sin agrupar" con su casilla, alineada al texto. */
.grupo-lista { display: flex; align-items: center; gap: .5rem; }

@media (max-width: 620px) {
    .lista-vista { gap: .5rem; }
    .segmentado { width: 100%; }
    .segmentado__op { flex: 1 1 0; justify-content: center; padding: .5rem .5rem; font-size: .84rem; gap: .35rem; }
    .segmentado__op svg { display: none; }

    /* En el telefono la cabecera no se pega: dos lineas de cabecera fijas se
       comen un tercio de la pantalla. La plata baja a su propia linea. */
    .grupo-bloque__cab { position: static; flex-wrap: wrap; gap: .6rem .75rem; padding: .9rem 1rem; }
    .grupo-bloque__cab .avatar { width: 40px; height: 40px; }
    .grupo-bloque__nombre { font-size: 1.08rem; }
    .grupo-bloque__id { flex: 1 1 0; }
    .grupo-bloque__plata { order: 5; flex: 1 1 100%; text-align: left; display: flex; align-items: baseline; gap: .45rem; }
    .grupo-bloque__plata strong { display: inline; font-size: 1.15rem; }
    .grupo-bloque__solo { order: 6; }
    .grupo-bloque__cuerpo { padding: .15rem 1rem .9rem; }
    .grupo-sub .documento { padding-left: 0; }
}


/* =============================================================================
   CALENDARIO: OPCIONES Y TARJETA FLOTANTE
   =============================================================================
   La barra de opciones (buscar, colorear, texto de la barra, mostrar todo) y la
   tarjeta que aparece al pasar el mouse por un dia o una barra. Las dibuja
   core/lib/agenda.lib.php (rok_agenda_opciones_pintar y rok_agenda_flotante_js)
   y las usan /rutas/agenda.php y la tarjeta del inicio. */

.cal-op {
    display: flex;
    align-items: center;
    gap: .55rem 1rem;
    flex-wrap: wrap;
    margin: 0 0 .7rem;
}
.cal-op[hidden] { display: none; }

.cal-op__buscar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 16rem;
    max-width: 26rem;
    padding: 0 .65rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
}
.cal-op__buscar:focus-within { border-color: var(--verde-500); box-shadow: var(--anillo); }
.cal-op__ico { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--texto-tenue); }
.cal-op__buscar input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .45rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: .88rem;
}
.cal-op__cuenta { font-size: .8rem; }
.cal-op__cuenta:empty { display: none; }

.cal-op__campo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--texto-suave);
}
.cal-op__campo select {
    padding: .35rem .5rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: .84rem;
}
.cal-op__check {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--texto-suave);
    cursor: pointer;
}

/* La leyenda de colores propios: cada nombre es un boton que deja ese grupo
   solo a la vista. */
.cal-op__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .7rem;
}
.cal-op__leyenda[hidden] { display: none; }
.cal-op__grupo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 16rem;
    padding: .2rem .55rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
}
.cal-op__grupo span:not(.cal-op__n) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-op__grupo:hover { border-color: var(--texto-tenue); }
.cal-op__grupo.es-activo { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); font-weight: 700; }
.cal-op__grupo--quitar { color: var(--texto-suave); border-style: dashed; }
.cal-op__muestra { width: .7rem; height: .7rem; border-radius: 3px; flex: 0 0 auto; }
.cal-op__n { font-size: .7rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

/* --- Colorear por cliente, vehiculo o conductor ----------------------------
   El color lo pone el script en --cal-c. El estado no se pierde: la anulada
   sigue tachada y el cobro sigue con su borde cortado. */
.cal-env--tinta .cal__barra[data-tinta] {
    border-left-color: var(--cal-c);
    background: color-mix(in srgb, var(--cal-c) 15%, var(--superficie));
    color: var(--texto);
}
.cal-env--tinta .cal__barra--cobro[data-tinta] { background: color-mix(in srgb, var(--cal-c) 7%, transparent); }

/* --- Que dice la barra (solo en la cuadricula) ----------------------------- */
.cal__barra__alt { display: none; }
.cal-env--texto-titulo    .cal--grilla .cal__barra__quien,
.cal-env--texto-vehiculo  .cal--grilla .cal__barra__quien,
.cal-env--texto-conductor .cal--grilla .cal__barra__quien,
.cal-env--texto-vehiculo  .cal--grilla .cal__barra__extra { display: none; }
.cal-env--texto-titulo    .cal--grilla .cal__barra__alt--tit,
.cal-env--texto-vehiculo  .cal--grilla .cal__barra__alt--veh,
.cal-env--texto-conductor .cal--grilla .cal__barra__alt--con {
    display: inline;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Mostrar todo: las sobrantes a la vista y sin "+N mas" ----------------- */
.cal-env--todo .cal--grilla .cal__barra.es-sobrante { display: flex; }
.cal-env--todo .cal--grilla .cal__mas { display: none; }

/* --- Buscar y resaltar ----------------------------------------------------- */
.cal__barra.es-apagada { opacity: .18; filter: grayscale(.7); }
.cal-env .cal--lista .cal__barra.es-apagada { display: none; }
.cal__barra.es-par {
    z-index: 2;
    filter: brightness(.92);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--texto) 45%, transparent);
}
.cal__mas { cursor: pointer; }

/* =============================================================================
   La tarjeta flotante
   ============================================================================= */
.cal-flota {
    position: fixed;
    z-index: 55;
    width: 22rem;
    max-width: calc(100vw - 16px);
    max-height: min(70vh, 34rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-alta);
    font-size: .84rem;
    line-height: 1.35;
    overflow: hidden;
}
.cal-flota[hidden] { display: none; }
.cal-flota--ruta { width: 20rem; }

.cal-flota__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .85rem .35rem;
    font-size: .95rem;
}
.cal-flota__cerrar {
    display: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.cal-flota__cerrar:hover { background: var(--fondo-alt); }
.cal-flota.es-fija .cal-flota__cerrar { display: inline-block; }

.cal-flota__feriado {
    margin: 0 .85rem .3rem;
    color: var(--rojo);
    font-size: .78rem;
    font-weight: 700;
}
.cal-flota__resumen { padding: 0 .85rem .5rem; color: var(--texto-suave); }
.cal-flota__nota {
    margin: 0 .85rem .5rem;
    padding: .35rem .55rem;
    border-radius: 6px;
    background: var(--fondo-alt);
    font-size: .8rem;
    white-space: pre-line;
}

.cal-flota__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 .55rem .4rem;
    border-top: 1px solid var(--borde-suave);
}
.cal-flota--ruta .cal-flota__cuerpo { border-top: 0; }
.cal-flota__sub {
    margin: .55rem .3rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.cal-flota__oculto { margin: .4rem .3rem; font-size: .76rem; }

/* Un renglon por ruta: el borde izquierdo es el color de la barra. */
.cal-flota__item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: .35rem 0 0;
    padding: .45rem .6rem;
    border-left: 3px solid var(--texto-tenue);
    border-radius: 6px;
    background: var(--superficie-2);
    color: var(--texto);
    text-decoration: none;
}
.cal-flota--ruta > .cal-flota__item { margin: .5rem; }
.cal-flota__item:hover { background: var(--fondo-alt); text-decoration: none; }
.cal-flota__item--empresa { border-left-color: var(--marino-600); }
.cal-flota__item--ok      { border-left-color: var(--verde-600); }
.cal-flota__item--vencido { border-left-color: var(--rojo); }
.cal-flota__item--baja    { opacity: .65; }
.cal-flota__item.es-tinta { border-left-color: var(--cal-c); }

.cal-flota__cab { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.cal-flota__hora { font-variant-numeric: tabular-nums; }
.cal-flota__num { font-size: .74rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.cal-flota__estado {
    margin-left: auto;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--fondo-alt);
    color: var(--texto-suave);
    font-size: .7rem;
    font-weight: 700;
}
.cal-flota__estado--empresa { background: color-mix(in srgb, var(--marino-600) 14%, transparent); color: var(--marino-600); }
.cal-flota__estado--ok      { background: var(--verde-claro); color: var(--verde-600); }
.cal-flota__estado--vencido { background: var(--rojo-claro); color: var(--rojo); }
.cal-flota__cliente { font-weight: 700; font-size: .9rem; }
.cal-flota__que { color: var(--texto-suave); }
.cal-flota__rango { font-size: .78rem; color: var(--texto-suave); }
.cal-flota__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem 0;
    font-size: .78rem;
    color: var(--texto-suave);
}
/* El separador lo pone el CSS: el script se mantiene en ASCII. */
.cal-flota__meta > * + *::before { content: "\00b7"; margin: 0 .4rem; color: var(--texto-tenue); font-weight: 400; }
.cal-flota__placa { font-weight: 700; letter-spacing: .04em; color: var(--texto); }
.cal-flota__plata strong { color: var(--texto); }

.cal-flota__venc {
    display: flex;
    flex-direction: column;
    margin: .3rem 0 0;
    padding: .4rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    color: var(--texto);
    text-decoration: none;
    font-size: .8rem;
}
.cal-flota__venc:hover { background: var(--fondo-alt); text-decoration: none; }
.cal-flota__venc span { color: var(--texto-suave); }
.cal-flota__venc--vencido,
.cal-flota__venc--hoy    { border-color: var(--rojo); }
.cal-flota__venc--vencido .cal-flota__venc__cuando,
.cal-flota__venc--hoy .cal-flota__venc__cuando { color: var(--rojo); font-weight: 700; }
.cal-flota__venc--pronto { border-color: var(--ambar); }
.cal-flota__venc--pronto .cal-flota__venc__cuando { color: var(--ambar); font-weight: 700; }

.cal-flota__pie {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .55rem .85rem .7rem;
    border-top: 1px solid var(--borde-suave);
    background: var(--superficie-2);
}
.cal-flota--ruta .cal-flota__pie { display: none; }

@media (max-width: 720px) {
    .cal-op__solo-grilla { display: none; }
    .cal-op__buscar { max-width: none; }
    .cal-flota { display: none !important; }
}

@media print {
    .cal-op, .cal-op__leyenda, .cal-flota { display: none !important; }
    .cal__barra.es-apagada { opacity: 1; filter: none; }
}

/* -----------------------------------------------------------------------------
   Listado de /rutas: la fila se abre
   -----------------------------------------------------------------------------
   El titulo iba con el color del texto y nadie adivinaba que abria la ficha.
   Ahora tiene el color de enlace y una flecha, y la fila trae "Ver detalle" y
   "Editar" como botones. */
.fila-ruta__abrir { color: var(--verde-600); text-decoration: none; }
.fila-ruta__abrir:hover { color: var(--verde-500); text-decoration: underline; }
.fila-ruta__abrir .numerico { color: var(--texto); }
.fila-ruta__flecha {
    display: inline-block;
    margin-left: .15rem;
    font-weight: 700;
    transition: transform var(--vel-rapida) ease;
}
.fila-ruta__abrir:hover .fila-ruta__flecha { transform: translateX(3px); }
.fila-ruta__botones { gap: .35rem; }

@media print {
    .fila-ruta__flecha { display: none; }
}

/* --- Chofer: empresa de la parada y pasos del recorrido (9-oct-2026) ------
   La empresa va arriba de la direccion cuando la ruta lleva varias: el
   chofer tiene que saber a nombre de quien entrega. Cargar y rendir no son
   paradas que se marcan: una tarjeta punteada, con los mismos botones. */
.c-parada__empresa {
    margin: 0 0 .25rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--verde-600, #16a34a);
}
.c-parada--paso {
    border-style: dashed;
    border-width: 2px;
    background: color-mix(in srgb, var(--superficie) 92%, #f59e0b);
}
.c-paso__titulo {
    margin: 0 0 .25rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #b45309;
}
:root[data-theme="oscuro"] .c-paso__titulo { color: #fbbf24; }
/* La hora junto a "Sales de" y el fin "quedas libre" (RUTAOK-JORNADA-CHOFER.md, fase 1). */
.c-paso__extra { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto-suave); }
.c-parada--fin .c-parada__dir { color: var(--texto-suave); }

/* Ficha de la ruta: cargar antes y rendir al final (recorrido). */
.ficha-paso {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .4rem 0 .6rem;
    padding: .5rem .7rem;
    border: 1px dashed var(--borde);
    border-radius: var(--radio-chico, 8px);
    font-size: .9rem;
}
.ficha-paso__ico {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
}

/* Ficha de la ruta: el reparto del cobro entre empresas. */
.reparto-cobro__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    gap: .6rem;
    align-items: center;
    padding: .35rem 0;
    border-top: 1px solid var(--borde);
}
.reparto-cobro__fila input { text-align: right; }

/* Vehiculos y personas de un proveedor (SQL 2026-10-09m). */
.externo-marca {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.pago-prov__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    padding: .5rem 0;
    border-top: 1px solid var(--borde);
}
.pago-prov__monto { font-weight: 700; text-align: right; white-space: nowrap; }
.pago-prov__vencido { color: var(--peligro, #b42318); font-weight: 600; }

/* Crear sin salir del formulario (assets/js/alta-rapida.js): proveedor,
   titular o etiqueta en una ventanita encima; lo creado queda elegido. */
.rapida {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 10, 24, .55);
}
.rapida__caja {
    width: min(440px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    margin: 0;
}
.rapida__caja h2 { margin: 0 0 .3rem; }
.rapida__caja .sutil { margin: 0 0 .8rem; }
.rapida__error { color: var(--peligro, #b42318); font-weight: 600; margin: 0 0 .6rem; }
.rapida__hecho { color: var(--exito, #15803d); font-weight: 600; }

/* =============================================================================
   Acceso del equipo de la ruta (assets/js/acceso-equipo.js): como entra el
   chofer y el peoneta, y "Darle acceso" en un clic. RUTAOK-JORNADA-CHOFER.md F2.
   ============================================================================= */
.acc-titulo { margin: 0 0 .5rem; font-weight: 700; font-size: .92rem; }
.acc-cargando, .acc-error { margin: .3rem 0; font-size: .86rem; color: var(--texto-suave); }
.acc-error { color: var(--rojo); }
.acc-fila { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--borde); }
.acc-fila:first-of-type { border-top: 0; }
.acc-ico {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: #16a34a; color: #fff; font-weight: 800; font-size: .85rem;
}
.acc-fila.es-nada .acc-ico { background: #f59e0b; }
.acc-cuerpo { flex: 1 1 auto; min-width: 0; display: grid; gap: .3rem; justify-items: start; }
.acc-cuerpo small { color: var(--texto-suave); font-weight: 600; }
.acc-texto { font-size: .86rem; color: var(--texto-suave); }
.acc-dar { margin: .1rem 0 0; width: auto; }
.acc-codigo { display: grid; gap: .15rem; padding: .55rem .75rem; border: 2px dashed #16a34a; border-radius: 10px; background: color-mix(in srgb, #16a34a 6%, var(--superficie)); }
.acc-codigo span { font-size: .78rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.acc-codigo b { font-size: 1.7rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.acc-codigo em { font-style: normal; font-size: .8rem; color: var(--texto-suave); }
.acc-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.acc-botones .boton { width: auto; margin: 0; }
.acc-linea { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; font-size: .9rem; }

/* =============================================================================
   Jornada del chofer (RUTAOK-JORNADA-CHOFER.md, fase 3): "es hora de iniciar"
   arriba del inicio, la franja de iniciar de la hoja cuando ya toca, y "ahora,
   dirigete a" la carga recien iniciada. Grande y verde: el chofer no lee.
   ============================================================================= */
.c-iniciar {
    margin: 1rem 0;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: var(--c-radio, 18px);
    background: radial-gradient(120% 100% at 50% 0%, rgba(34, 197, 94, .2) 0%, transparent 70%), var(--superficie);
    border: 2px solid rgba(34, 197, 94, .55);
    display: grid;
    gap: .45rem;
}
.c-iniciar__titulo { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--verde-600); }
.c-iniciar__texto { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.c-iniciar__boton { margin: .3rem 0 0; font-size: 1.1rem; min-height: 3.2rem; }
.c-iniciar__ver { justify-self: center; font-size: .9rem; }
.ruta-cierre--ya { border: 2px solid rgba(34, 197, 94, .55); background: radial-gradient(120% 100% at 50% 0%, rgba(34, 197, 94, .16) 0%, transparent 70%), var(--superficie); }
.c-dirigete {
    margin: 1rem 0 1.2rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--c-radio, 18px);
    background: var(--superficie);
    border: 2px solid #f59e0b;
    display: grid;
    gap: .35rem;
}
.c-dirigete__titulo { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b45309; }
:root[data-theme="oscuro"] .c-dirigete__titulo { color: #fbbf24; }
.c-dirigete__dir { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.c-dirigete__nota { margin: 0; font-size: 1rem; }
.c-dirigete__tiempo { margin: 0; font-weight: 700; color: var(--texto-suave); }
.c-dirigete__botones { display: grid; gap: .5rem; margin-top: .5rem; }
.c-dirigete__botones form { margin: 0; }
.c-dirigete__botones .boton { width: 100%; margin: 0; min-height: 3rem; }
.c-revisar { margin: 1rem 0 1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--c-radio, 18px); background: var(--superficie); border: 2px solid rgba(34, 197, 94, .55); display: grid; gap: .6rem; }
.c-revisar__lista { margin: 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.c-revisar__lista span { display: block; color: var(--texto-suave); font-size: .9rem; }
.c-revisar form { margin: 0; }
.c-revisar .boton { width: 100%; margin: 0; min-height: 3rem; }
.c-revisar__otras { display: grid; gap: .5rem; }
.c-revisar__sug textarea { width: 100%; box-sizing: border-box; margin-bottom: .5rem; }
.c-parada__tiempo { margin: .1rem 0 .35rem; font-size: .88rem; font-weight: 700; color: var(--verde-600); }
.tabla-jornada th, .tabla-jornada td { padding: .4rem .8rem .4rem 0; text-align: left; white-space: nowrap; }
.tabla-jornada td:first-child { white-space: normal; }

/* Acompanar al chofer por WhatsApp (cuenta/whatsapp.php, RUTAOK-JORNADA-CHOFER.md D11). */
.wa-jornada { display: grid; gap: .6rem; }
.wa-jornada__op { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.wa-jornada__op input { margin-top: .25rem; }
.wa-jornada__op small { display: block; color: var(--texto-suave); }
.wa-jornada__gente { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.wa-jornada__p { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .92rem; }
.wa-jornada__p span { color: var(--texto-suave); }
.wa-jornada__p--si span { color: var(--verde-600); font-weight: 600; }

/* Un paso del recorrido ya hecho (Saliste de / Cargaste en / Rendiste en): una linea chica. */
.c-paso-hecho { display: flex; gap: .5rem; align-items: center; margin: 0 0 .6rem; padding: .45rem .75rem; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); font-size: .88rem; color: var(--texto-suave); }
.c-paso-hecho strong { color: var(--texto); font-weight: 600; }
.c-paso-hecho__ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #16a34a; color: #fff; font-size: .75rem; font-weight: 800; }

/* =============================================================================
   Ficha del cliente en pestanas (clientes/ver.php, 11-oct-2026): la tabla de
   Servicios, el Historial por mes y su filtro (assets/js/cliente-ficha.js).
   ============================================================================= */
.cli-tabs { margin-top: 1rem; }
@media (max-width: 720px) {
    /* Siete pestanas no caben: se deslizan de lado en vez de apilarse. */
    .cli-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cli-tabs::-webkit-scrollbar { display: none; }
    .cli-tabs .pestana { flex: 0 0 auto; }
}
.pestana__n--alerta { background: var(--rojo-claro); color: var(--rojo); }
.pestana.es-activa .pestana__n--alerta { background: var(--rojo-claro); color: var(--rojo); }

/* Un precio con el otro lado debajo: "$100.000 + IVA" / "$119.000 con IVA". */
.precio-doble { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.precio-doble small { font-size: .78rem; }

/* --- Servicios: una tabla que en el telefono se vuelve tarjetas ---------- */
.cli-serv { display: grid; gap: 0; margin-top: .4rem; }
.cli-serv__cab,
.cli-serv__fila {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(8.5rem, 1.2fr) minmax(6rem, .8fr) minmax(7.5rem, 1fr);
    gap: .4rem 1rem;
    align-items: center;
}
.cli-serv--sin-plata .cli-serv__cab,
.cli-serv--sin-plata .cli-serv__fila { grid-template-columns: minmax(0, 3fr) minmax(6rem, 1fr); }
.cli-serv__cab {
    padding: 0 0 .45rem;
    border-bottom: 1px solid var(--borde);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue);
}
.cli-serv__cab span:not(:first-child) { text-align: right; }
.cli-serv__fila { padding: .75rem 0; border-bottom: 1px solid var(--borde-suave); }
.cli-serv__fila.es-tenue .cli-serv__nombre strong { color: var(--texto-suave); }
.cli-serv__nombre { display: grid; gap: .15rem; min-width: 0; }
.cli-serv__nombre .sutil { font-size: .85rem; }
.cli-serv__marcas { display: flex; flex-wrap: wrap; gap: .3rem; }
.cli-serv__marcas:empty { display: none; }
.cli-serv__precio, .cli-serv__veces, .cli-serv__suma { display: grid; justify-items: end; text-align: right; gap: .1rem; }
.cli-serv__precio small, .cli-serv__veces small { font-size: .78rem; }
.cli-serv__ver { grid-column: 1 / -1; justify-self: start; font-size: .84rem; margin-top: -.2rem; }
.cli-serv__pie {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 0 0; font-size: .88rem; color: var(--texto-suave);
}
.cli-serv__pie strong { color: var(--texto); font-size: 1.05rem; }
@media (max-width: 640px) {
    .cli-serv__cab { display: none; }
    /* Cada dato en su linea: rotulo a la izquierda, valor a la derecha. Asi
       "$119.000 IVA incluido" no se parte en dos. */
    .cli-serv__fila,
    .cli-serv--sin-plata .cli-serv__fila { grid-template-columns: 1fr; gap: .35rem; }
    .cli-serv__precio, .cli-serv__veces, .cli-serv__suma {
        grid-template-columns: auto 1fr; justify-items: end; align-items: baseline; column-gap: .8rem;
    }
    .cli-serv__precio::before, .cli-serv__veces::before, .cli-serv__suma::before {
        content: attr(data-rotulo); grid-row: 1 / span 2; justify-self: start;
        font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue);
    }
    .cli-serv__precio > *, .cli-serv__veces > *, .cli-serv__suma > * { grid-column: 2; white-space: nowrap; }
}

/* --- Historial por mes ---------------------------------------------------- */
.cli-hist__filtros {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end;
    margin: .2rem 0 1rem; padding: .7rem .8rem;
    border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2);
}
.cli-hist__filtros label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.cli-hist__filtros select {
    min-width: 12rem; margin: 0; padding: .5rem .7rem; font: inherit; font-size: .92rem; font-weight: 500;
    color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
}
.cli-hist__filtros select:focus-visible { outline: none; border-color: var(--verde-500); box-shadow: var(--anillo); }
.cli-hist__cuenta { margin-left: auto; font-size: .85rem; }
.cli-hist__mes + .cli-hist__mes { margin-top: 1.2rem; }
.cli-hist__mes-cab {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: 0 0 .4rem; margin: 0 0 .2rem; border-bottom: 2px solid var(--borde);
}
.cli-hist__mes-cab h3 { margin: 0; font-size: 1rem; }
.cli-hist__mes-cab .sutil { font-size: .85rem; }
.cli-hist__mes-cab strong { margin-left: auto; font-size: .95rem; }
.cli-hist__fila { border-bottom: 1px solid var(--borde-suave); }
.cli-hist__fila > summary {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center;
    padding: .65rem .3rem; cursor: pointer; list-style: none; border-radius: var(--radio-chico);
}
.cli-hist__fila > summary::-webkit-details-marker { display: none; }
.cli-hist__fila > summary:hover { background: var(--superficie-2); }
.cli-hist__fila > summary:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; }
.cli-hist__fila[open] > summary { background: var(--superficie-2); }
.cli-hist__fecha {
    display: grid; justify-items: center; line-height: 1;
    padding: .35rem 0; border-radius: 10px; background: var(--fondo-alt);
}
.cli-hist__fecha b { font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; }
.cli-hist__fecha small { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-top: .15rem; }
.cli-hist__cuerpo { display: grid; gap: .15rem; min-width: 0; }
.cli-hist__cuerpo > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-hist__meta { display: flex; flex-wrap: wrap; gap: .1rem .55rem; font-size: .84rem; color: var(--texto-suave); }
.cli-hist__meta > span + span::before { content: "\00b7"; margin-right: .55rem; color: var(--texto-tenue); }
.cli-hist__serv { font-weight: 600; color: var(--texto); }
.cli-hist__ojo { color: var(--ambar); font-weight: 600; }
.cli-hist__der { display: grid; justify-items: end; gap: .25rem; }
.cli-hist__detalle { padding: .4rem .3rem 1rem 3.4rem; }
.cli-hist__datos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .55rem 1.2rem; margin: 0 0 .8rem;
}
.cli-hist__datos div { min-width: 0; }
.cli-hist__datos dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); }
.cli-hist__datos dd { margin: .1rem 0 0; font-size: .9rem; }
.cli-hist__nota { margin: 0 0 .8rem; font-size: .9rem; color: var(--texto-suave); white-space: pre-line; }
.cli-hist__detalle .fila-acciones .boton { margin: 0; }
@media (max-width: 560px) {
    .cli-hist__fila > summary { grid-template-columns: 2.4rem minmax(0, 1fr); }
    .cli-hist__der { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: .5rem; }
    .cli-hist__detalle { padding-left: .3rem; }
    .cli-hist__filtros select { min-width: 0; width: 100%; }
    .cli-hist__filtros label { flex: 1 1 10rem; }
    .cli-hist__cuenta { margin-left: 0; }
}