/* ===========================================================================
   Apoyo Vial - sistema visual
   ===========================================================================

   Dos contextos, no uno:

     CLARO   las pantallas de la aplicacion (inicio, vehiculos, panel)
     OSCURO  el ingreso con video de fondo y los avisos modales

   El color de marca es el ambar #FFC107 con su variante #FFA000. En AMBOS
   contextos el ambar es color de FONDO con texto oscuro encima, nunca color
   de texto ni de icono sobre blanco. Medido:

       ambar sobre blanco .............  1,63:1  inservible
       #FFA000 sobre blanco ...........  2,04:1  inservible
       #232527 sobre tarjeta ambar ....  9,44:1  correcto
       ambar sobre #121212 ............ 11,49:1  correcto

   Por eso el elemento activo de la barra inferior es un icono oscuro sobre
   pastilla ambar, y no un icono ambar sobre blanco: mantiene el color de
   marca y cumple el contraste.
   =========================================================================== */
@import url("nb-icons.css");
@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Fichas — tema claro, que es el de la aplicacion
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    --fondo:      #ffffff;
    --superficie: #f3f4f6;
    --superficie-2: #e9ebef;

    /* Borde de controles: 4,27:1 sobre blanco y 3,88:1 sobre gris. La norma
       exige 3:1 para poder distinguir un control de su entorno; los grises
       claros habituales (#d8dbe0 da 1,39:1) no llegan ni de lejos. */
    --borde:     #767b80;
    --separador: #e5e7eb;

    --texto:        #232527;
    --texto-fuerte: #111315;
    --texto-tenue:  #5b6472;

    --ambar:        #ffc107;
    --ambar-oscuro: #ffb300;
    --naranja:      #ffa000;
    --sobre-ambar:  #232527;

    --oscuro:       #232527;
    --sobre-oscuro: #ffffff;

    --error:  #b3261e;
    --exito:  #15803d;
    --aviso:  #8a5a00;

    --seleccion: #16a34a;   /* 3,30:1 sobre blanco: sirve como borde */

    --radio:   14px;
    --radio-s: 10px;

    --toque: 2.75rem;   /* 44 px */

    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;

    --barra: 4.5rem;    /* alto de la barra inferior */

    --pila: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente: "Montserrat", var(--pila);
}

/* --------------------------------------------------------------------------
   Tema oscuro de TODA la aplicacion
   --------------------------------------------------------------------------

   Tres estados y no dos: claro, oscuro, y el del telefono, que es el que rige
   mientras la persona no diga otra cosa.

   Se aplica en <html data-tema>, no en <body>: el fondo del documento lo pinta
   el elemento raiz, y puesto en el body queda una franja clara arriba al hacer
   rebote en el movil.

   Las fichas son las mismas que usa .oscuro, que ya existia para el ingreso con
   video. Aqui se agregan las que aquel no necesitaba porque en esa pantalla no
   aparecen.
   -------------------------------------------------------------------------- */

:root[data-tema="dark"],
:root[data-tema="auto"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
        --fondo:      #121212;
        --superficie: #232527;
        --superficie-2: #2b2e31;
        --borde:     #6b7075;
        --separador: #2e3134;

        --texto:        #cccccc;
        --texto-fuerte: #ffffff;
        --texto-tenue:  #9aa0a6;

        --error: #f28b82;
        --exito: #81c995;
        --aviso: #ffc107;

        /* Lo que .oscuro no necesitaba y aqui si. En claro, «oscuro» es el
           color de los elementos que contrastan con el fondo —la barra de
           abajo, por ejemplo—; sobre fondo oscuro eso desaparece, asi que se
           invierte el par. */
        --oscuro:       #2b2e31;
        --sobre-oscuro: #f2f3f5;

        /* Sobre fondo oscuro el verde claro contrasta; el de tema claro no. */
        --seleccion: #6ee7a8;
    }
}

:root[data-tema="dark"] {
    --fondo:      #121212;
    --superficie: #232527;
    --superficie-2: #2b2e31;
    --borde:     #6b7075;
    --separador: #2e3134;

    --texto:        #cccccc;
    --texto-fuerte: #ffffff;
    --texto-tenue:  #9aa0a6;

    --error: #f28b82;
    --exito: #81c995;
    --aviso: #ffc107;

    --oscuro:       #2b2e31;
    --sobre-oscuro: #f2f3f5;
    --seleccion:    #6ee7a8;
}

/* El ambar es el color de marca y no cambia entre temas: sobre #121212 da
   14,6:1 y sobre blanco 1,7:1, asi que en oscuro se lee mejor todavia. Lo que
   si cambia es lo que va ENCIMA del ambar, que en los dos casos es el gris
   oscuro de siempre. */

/* --------------------------------------------------------------------------
   Contexto oscuro: ingreso con video y avisos modales
   -------------------------------------------------------------------------- */

.oscuro {
    color-scheme: dark;

    --fondo:      #121212;
    --superficie: #232527;
    --superficie-2: #2b2e31;
    --borde:     #6b7075;
    --separador: #2e3134;

    --texto:        #cccccc;
    --texto-fuerte: #ffffff;
    --texto-tenue:  #9aa0a6;

    --error: #f28b82;
    --exito: #81c995;
    --aviso: #ffc107;
}

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

html {
    background: var(--superficie);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0 auto;
    max-width: 600px;
    min-height: 100dvh;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.5;
}

/* Con barra inferior, el contenido necesita sitio para no quedar debajo. */
body.con-barra .content {
    padding-bottom: calc(var(--barra) + var(--e6) + env(safe-area-inset-bottom));
}

.content {
    padding: var(--e4) var(--e4) var(--e6);
    padding-left:  max(var(--e4), env(safe-area-inset-left));
    padding-right: max(var(--e4), env(safe-area-inset-right));
}

h1 {
    margin: 0 0 var(--e4);
    color: var(--texto-fuerte);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h2 {
    margin: 0 0 var(--e3);
    color: var(--texto-fuerte);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

p { margin: 0 0 var(--e4); }

a {
    color: var(--texto);
    text-underline-offset: 2px;
}

.oscuro a { color: var(--ambar); }

strong { color: var(--texto-fuerte); }

.muted {
    color: var(--texto-tenue);
    font-size: 0.9375rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

:focus-visible {
    outline: 2px solid var(--oscuro);
    outline-offset: 2px;
    border-radius: var(--radio-s);
}

.oscuro :focus-visible { outline-color: var(--ambar); }

/* 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;
}

/* --------------------------------------------------------------------------
   Encabezado de pantalla
   -------------------------------------------------------------------------- */

.barra-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    min-height: var(--toque);
    margin-bottom: var(--e4);
}

.boton-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: var(--toque);
    padding: 0;
    border: 1px solid var(--separador);
    border-radius: 50%;
    background: var(--fondo);
    color: var(--texto);
    font-size: 1.125rem;
    cursor: pointer;
}

.boton-menu:hover { background: var(--superficie); }

/* --------------------------------------------------------------------------
   Interruptor de disponibilidad (panel del proveedor)
   -------------------------------------------------------------------------- */

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--toque);
    font-weight: 700;
    font-size: 0.9375rem;
}

.interruptor button {
    width: 3.25rem;
    height: 1.875rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--superficie-2);
    position: relative;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.interruptor button::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    transition: transform 150ms ease;
}

.interruptor button[aria-pressed="true"] { background: var(--ambar); }
.interruptor button[aria-pressed="true"]::after { transform: translateX(1.375rem); }
.interruptor button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Tarjeta de aviso en ambar. Es el bloque que empuja a la accion.
   -------------------------------------------------------------------------- */

.tarjeta-aviso {
    margin: 0 0 var(--e6);
    padding: var(--e4);
    border-radius: var(--radio);
    background: var(--ambar);
    color: var(--sobre-ambar);
}

.tarjeta-aviso h2 {
    margin: 0 0 var(--e2);
    color: var(--sobre-ambar);
    font-size: 1.125rem;
}

.tarjeta-aviso p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.tarjeta-aviso p + p { margin-top: var(--e2); }

/* Vencido no es lo mismo que por vencer: uno avisa, el otro ya te dejo fuera. */
.tarjeta-aviso.grave {
    background: var(--error);
    color: #ffffff;              /* 6,54:1 */
}

.tarjeta-aviso.grave h2 { color: #ffffff; }

.tarjeta-aviso .acciones-aviso {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--e3);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

button,
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: var(--toque);
    padding: var(--e2) var(--e4);
    border: 0;
    border-radius: 999px;
    background: var(--oscuro);
    color: var(--sobre-oscuro);
    font: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: filter 120ms ease, transform 80ms ease;
}

button:hover,
.boton:hover { filter: brightness(1.2); }

/* La pulsacion tiene que verse en el acto: en un telefono no hay «hover». */
button:active,
.boton:active { transform: scale(0.97); }

button.ambar,
.boton.ambar {
    background: var(--ambar);
    color: var(--sobre-ambar);
}

button.ambar:hover,
.boton.ambar:hover { background: var(--ambar-oscuro); filter: none; }

button.bloque,
.boton.bloque {
    display: flex;
    width: 100%;
    border-radius: var(--radio-s);
    font-size: 1rem;
}

button.secundario {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto);
}

button.secundario:hover { background: var(--superficie); filter: none; }

button.enlace {
    min-height: 0;
    padding: 0;
    background: none;
    color: var(--texto);
    font-weight: 400;
    font-size: inherit;
    text-decoration: underline;
}

button.enlace:hover { filter: none; opacity: 0.7; }
button.enlace:active { transform: none; }
.oscuro button.enlace { color: var(--ambar); }

button:disabled,
button:disabled:hover {
    background: var(--superficie);
    color: var(--texto-tenue);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   Carrusel horizontal de tarjetas (vehiculos, equipos)
   -------------------------------------------------------------------------- */

.carrusel {
    display: flex;
    gap: var(--e3);
    margin: 0 0 var(--e5);
    padding: 0 var(--e4) var(--e2);
    /* Se sale del relleno del contenedor para que las tarjetas lleguen al
       borde de la pantalla, como en un carrusel de telefono. */
    margin-inline: calc(var(--e4) * -1);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.carrusel > li {
    flex: 0 0 auto;
    width: 10.5rem;
    scroll-snap-align: start;
}

.tarjeta-vehiculo {
    display: block;
    height: 100%;
    border: 1px solid var(--separador);
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--texto);
    text-decoration: none;
    overflow: hidden;
}

.tarjeta-vehiculo:hover { border-color: var(--borde); }

.tarjeta-vehiculo.elegido {
    border: 2px solid var(--seleccion);
}

.foto-vehiculo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--superficie);
}

/* Marcador mientras no hay foto cargada. */
.foto-vehiculo.marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-tenue);
    font-size: 2rem;
}

/* Regla del proyecto: si el borde se ve, el texto no lo toca. Un contenedor
   con borde o fondo propio lleva relleno de --e3 como minimo, y --e4 cuando
   dentro hay un bloque de texto. Lo unico que puede llegar al borde es una
   imagen que sangra a proposito. */
.datos-vehiculo { padding: var(--e3) var(--e4) var(--e4); }

.datos-vehiculo strong {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.datos-vehiculo span {
    display: block;
    margin-top: 0.125rem;
    color: var(--texto-tenue);
    font-size: 0.8125rem;
}

/* Baldosa de «agregar»: el primer elemento del carrusel y el mas grande. */
.tarjeta-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 11rem;
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font-size: 1.75rem;
    text-decoration: none;
}

.tarjeta-agregar:hover { background: var(--superficie-2); }

/* --------------------------------------------------------------------------
   Filas de ubicacion
   -------------------------------------------------------------------------- */

.filas {
    margin: 0 0 var(--e5);
    padding: 0;
    list-style: none;
}

.filas > li + li { margin-top: var(--e2); }

.fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: var(--toque);
    padding: var(--e3);
    border: 1px solid var(--separador);
    border-radius: var(--radio-s);
    background: var(--superficie);
    color: var(--texto);
    font-size: 0.875rem;
    text-decoration: none;
}

.fila:hover { background: var(--superficie-2); }

.fila-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--texto);
}

.fila-agregar {
    justify-content: center;
    border-style: dashed;
    border-color: var(--borde);
    background: var(--fondo);
    font-size: 1.25rem;
}

.fila-texto { min-width: 0; }

.fila-texto strong { display: block; }

.etiqueta {
    display: inline-block;
    margin-left: var(--e2);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* La miniatura de la grua en la lista de la flota. Flota a la derecha para no
   romper el texto que ya estaba. */
.miniatura-equipo {
    float: right;
    width: 4.5rem;
    height: 3.375rem;
    margin-left: var(--e3);
    border-radius: var(--radio-s);
    object-fit: cover;
    background: var(--superficie);
}

/* --------------------------------------------------------------------------
   Apagado con temporizador
   -------------------------------------------------------------------------- */

.cuenta-atras {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;   /* no baila al cambiar de segundo */
}

.opciones-apagado {
    margin: 0 0 var(--e4);
    padding: 0;
    list-style: none;
}

.opciones-apagado li + li { margin-top: var(--e2); }

.opciones-apagado label {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: var(--toque);
    padding: var(--e2) var(--e3);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radio-s);
    cursor: pointer;
}

.opciones-apagado label:has(input:checked) {
    border-color: var(--ambar);
    background: rgba(255, 193, 7, 0.12);
}

/* --------------------------------------------------------------------------
   Etiquetas de vigencia de documentos

   Cuatro estados, cuatro colores. El color solo acompana: el texto ya dice
   «Vencido hace 3 dias», asi que quien no distinga los colores lee lo mismo.
   Todos los tonos van medidos sobre fondo claro y pasan 4,5:1.
   -------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: var(--e2);
    padding: 0.1rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* Dentro de una tarjeta de aviso el color ya lo pone la tarjeta: un chip rojo
   sobre fondo rojo no se leeria. Ahi la etiqueta aporta el dato, no el tono. */
.tarjeta-aviso .chip { color: inherit; margin: 0 var(--e1) 0 0; }

/* Medidos contra el peor fondo claro, que es --superficie (#f3f4f6), no el
   blanco. Todos pasan 4,5:1 tambien ahi. */
.chip-ok    { color: var(--exito); }        /* 4,56:1 */
.chip-aviso { color: var(--aviso); }        /* 5,39:1 */
.chip-mal   { color: var(--error); }        /* 5,94:1 */
.chip-falta { color: var(--texto-tenue); }  /* 5,44:1 */

/* En el fondo oscuro los mismos tonos no se leen: se aclaran. Sobre #232527
   van de 6,97:1 a 10:1. */
.oscuro .chip-ok    { color: #6ee7a8; }
.oscuro .chip-aviso { color: #ffc107; }
.oscuro .chip-mal   { color: #ff8f85; }
.oscuro .chip-falta { color: #ccced1; }

/* --------------------------------------------------------------------------
   Cabecera de pantalla: volver, titulo y menu

   Sustituye al enlace «Atras» del final de la pantalla. Con una lista larga,
   ese enlace obligaba a recorrerla entera para retroceder.
   -------------------------------------------------------------------------- */

.cabecera {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--toque);
    margin-bottom: var(--e4);
}

.cabecera h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.5rem;
}

.cabecera .volver,
.cabecera .boton-menu {
    flex: 0 0 auto;
}

/* El area tactil es de 44 px aunque el chevron sea chico: en un telefono, un
   objetivo de 20 px se falla una de cada tres veces. */
.cabecera .volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: var(--toque);
    margin-left: calc(var(--e3) * -1);
    border-radius: 50%;
    color: var(--texto-fuerte);
    font-size: 1.25rem;
    text-decoration: none;
}

.cabecera .volver:hover { background: var(--superficie); }

/* --------------------------------------------------------------------------
   Menu lateral

   Es un <dialog> pegado al borde izquierdo. Se usa dialog y no un div propio
   porque el navegador ya trae el foco atrapado dentro, el cierre con Esc y la
   devolucion del foco al boton que lo abrio.
   -------------------------------------------------------------------------- */

dialog.lateral {
    width: min(19rem, 88vw);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0 auto 0 0;          /* pegado a la izquierda, alto completo */
    padding: var(--e5) var(--e4);
    border: 0;
    border-radius: 0 var(--radio) var(--radio) 0;
    background: var(--fondo);
    color: var(--texto);
    overflow-y: auto;
    overscroll-behavior: contain;
}

dialog.lateral::backdrop { background: rgba(0, 0, 0, 0.45); }

.lateral-cerrar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--e2);
}

.lateral-cerrar button {
    width: var(--toque);
    height: var(--toque);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto);
    font-size: 1.125rem;
    cursor: pointer;
}

.lateral-perfil {
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--separador);
    text-align: center;
}

.lateral-avatar {
    display: block;
    color: var(--texto-fuerte);
    font-size: 3.5rem;
    line-height: 1;
}

.lateral-correo {
    margin: var(--e2) 0 var(--e3);
    color: var(--texto-tenue);
    font-size: 0.8125rem;
    word-break: break-all;
}

.lateral-nav ul {
    margin: var(--e3) 0 0;
    padding: 0;
    list-style: none;
}

.lateral-nav a,
.lateral-nav .apagado,
.lateral-salir button {
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    min-height: var(--toque);
    padding: var(--e2) var(--e2);
    border: 0;
    border-radius: var(--radio-s);
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lateral-nav i { width: 1.5rem; text-align: center; color: var(--texto-fuerte); }

.lateral-nav a:hover,
.lateral-salir button:hover { background: var(--superficie); }

.lateral-nav a[aria-current="page"] {
    background: var(--superficie);
    font-weight: 700;
}

/* Lo que todavia no existe se ve, pero apagado y sin cursor de enlace: dice
   «viene» en vez de «no existe», y no promete que se pueda pulsar. */
.lateral-nav .apagado,
.lateral-pie .apagado {
    color: var(--texto-tenue);
    cursor: default;
}

.lateral-nav .apagado small {
    margin-left: auto;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lateral-salir {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--separador);
}

.lateral-perfil .perfil[disabled] { opacity: 0.55; }

.lateral-pie {
    margin: var(--e5) 0 0;
    color: var(--texto-tenue);
    font-size: 0.75rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Tarjetas de vehiculo con foto

   La foto es lo que identifica al vehiculo de un vistazo. Ocupa el ancho y va
   arriba, como en el diseno aprobado.
   -------------------------------------------------------------------------- */

.tarjetas {
    margin: 0 0 var(--e5);
    padding: 0;
    list-style: none;
}

.tarjetas > li + li { margin-top: var(--e3); }

.tarjeta-carga {
    overflow: hidden;
    border: 1px solid var(--separador);
    border-radius: var(--radio);
    background: var(--fondo);
}

.foto-carga {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--superficie);
}

.foto-carga.marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-tenue);
    font-size: 2.5rem;
}

.datos-carga { padding: var(--e3) var(--e4) var(--e4);display:block; }
.datos-carga strong { display: block; font-size: 1rem; }
.datos-carga .muted { display: block; font-size: 0.8125rem; }

.tarjetas > li.inactivo .tarjeta-carga { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Campo de foto
   -------------------------------------------------------------------------- */

.foto-previa {
    position: relative;
    margin-bottom: var(--e3);
    overflow: hidden;
    border: 1px dashed var(--borde);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

.foto-previa img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.foto-previa .marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    color: var(--texto-tenue);
    font-size: 2.5rem;
}

.campo-foto input[type="file"] { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Selector de punto en el mapa
   -------------------------------------------------------------------------- */

/* Sin relleno a proposito: lo de dentro es una imagen que sangra hasta el
   borde. La regla del relleno es para el TEXTO. */
.mapa {
    height: 15rem;
    margin-bottom: var(--e3);
    border: 1px solid var(--separador);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

.acciones-mapa {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
}

.acciones-mapa .coords {
    margin: 0;
    color: var(--texto-tenue);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.fila-flecha {
    margin-left: auto;
    color: var(--texto-tenue);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Barra inferior fija
   -------------------------------------------------------------------------- */

.barra-inferior {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: 600px;
    height: calc(var(--barra) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--oscuro);
    border-top: 1px solid var(--oscuro);
}

.barra-inferior a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    flex: 1;
    min-height: var(--toque);
    color: #cfd3d8;
    font-size: 0.625rem;
    text-decoration: none;
}

.barra-inferior i { font-size: 1.125rem; }

/* El elemento activo es un icono OSCURO sobre pastilla ambar. Al reves —icono
   ambar sobre el fondo— daria 1,63:1 y seria ilegible. */
.barra-inferior a[aria-current="page"] { color: var(--ambar); }

/* Accion principal al centro: circulo ambar que sobresale de la barra. */
.barra-inferior .central {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: -1.25rem;
    border-radius: 50%;
    background: var(--ambar);
    color: var(--sobre-ambar);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
    font-size: 0.5625rem;
}

.barra-inferior .central i { font-size: 1.375rem; }
.barra-inferior .central[aria-current="page"] { color: var(--sobre-ambar); }

/* --------------------------------------------------------------------------
   Aviso modal
   -------------------------------------------------------------------------- */

dialog.aviso {
    width: min(24rem, calc(100vw - 2rem));
    padding: var(--e5);
    border: 0;
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
}

dialog.aviso::backdrop { background: rgb(0 0 0 / 0.6); }

.aviso-titulo {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e3);
    color: var(--ambar);
    font-size: 1.125rem;
    font-weight: 700;
}

.aviso-cerrar {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    width: 2rem;
    height: 2rem;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto);
    font-size: 1rem;
}

.aviso-cerrar:hover { background: var(--superficie); filter: none; }

.aviso-cuerpo {
    margin: 0 0 var(--e4);
    font-size: 0.875rem;
    line-height: 1.5;
}

.aviso-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.aviso-pie label {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--toque);
    font-size: 0.875rem;
}

.aviso-pie input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ambar);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.campo { margin: 0 0 var(--e5); }

.campo label {
    display: block;
    margin-bottom: var(--e1);
    color: var(--texto-fuerte);
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Los nombres de campo se guardan en minuscula porque los usan los mensajes
   de validacion: «Falta el correo electronico». Como etiqueta necesitan
   mayuscula inicial, y solo la inicial: 'capitalize' daria «Correo
   Electronico». Se resuelve aqui para no duplicar veinte traducciones. */
.campo label::first-letter { text-transform: uppercase; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input:not([type]),
select,
textarea {
    width: 100%;
    min-height: var(--toque);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--texto-fuerte);
    font: inherit;
}

input::placeholder { color: var(--texto-tenue); }

input:focus,
select:focus,
textarea:focus { border-color: var(--oscuro); }
.oscuro input:focus,
.oscuro select:focus { border-color: var(--ambar); }

.campo input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    margin-right: var(--e2);
    accent-color: var(--ambar);
}

.campo label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    min-height: var(--toque);
    font-weight: 400;
    color: var(--texto);
}

.campo-error input,
.campo-error select { border-color: var(--error); }

.hint,
.error {
    display: block;
    margin-top: var(--e1);
    font-size: 0.8125rem;
}

.hint  { color: var(--texto-tenue); }
.error { color: var(--error); }

/* --------------------------------------------------------------------------
   Avisos de una peticion
   -------------------------------------------------------------------------- */

.flash {
    margin: 0;
    padding: var(--e3) var(--e4);
}

.flash p {
    margin: 0;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    position: fixed;
    width: 100%;
    max-width: 350px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity .6s ease;
}

.flash p.desvanecer { opacity: 0; }
.flash-success { background: #e7f6ec; color: var(--exito); }
.flash-error   { background: #fdecea; color: var(--error); }
.oscuro .flash-success { background: rgb(129 201 149 / 0.14); }
.oscuro .flash-error   { background: rgb(242 139 130 / 0.14); }

/* --------------------------------------------------------------------------
   Listados y estado del proveedor
   -------------------------------------------------------------------------- */

.estado {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio-s);
    border: 1px solid var(--separador);
    background: var(--superficie);
}

/* El estado no se distingue solo por el color: lleva un punto y una palabra. */
.estado::before {
    content: "";
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: currentColor;
}

.estado-active    { color: var(--exito); }
.estado-pending   { color: var(--aviso); }
.estado-suspended { color: var(--error); }

section {
    margin: var(--e6) 0;
}

.titulo-seccion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
}

.titulo-seccion a { font-size: 0.875rem; color: var(--texto-tenue); }

.pendientes ul {
    margin: 0 0 var(--e3);
    padding: 0;
    list-style: none;
}

.pendientes li {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--toque);
}

.tilde { color: var(--exito); }
.caja  { color: var(--texto-tenue); }

.lista-equipos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-equipos li {
    padding: var(--e4) 0;
    border-bottom: 1px solid var(--separador);
}

.lista-equipos li.inactivo { opacity: 0.55; }
.lista-equipos strong { display: block; margin-bottom: var(--e1); }

.acciones-fila {
    display: flex;
    gap: var(--e5);
    align-items: center;
    margin-top: var(--e2);
    min-height: var(--toque);
}

.acciones-fila form { display: inline; }

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
    margin: var(--e5) 0;
}

.salir { margin-top: var(--e6); }

.coords {
    margin: var(--e2) 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    color: var(--texto-fuerte);
}

.atributos-tipo[hidden] { display: none; }

.debug {
    overflow-x: auto;
    padding: var(--e3);
    border: 1px solid var(--separador);
    border-radius: var(--radio-s);
    background: var(--superficie);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Ingreso con video de fondo
   -------------------------------------------------------------------------- */

.pantalla-video {
    position: relative;
    min-height: 100dvh;
    background: transparent;
}

/* Respaldo mientras el video no existe. Va en el MISMO plano que el video y
   antes en el orden del documento, asi que el video queda encima. Dentro de
   .velo no serviria: .velo esta en z-index 1 y taparia el video. */
.pantalla-video::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(120% 70% at 50% 0%, #2a2d31 0%, #121212 60%);
}

.fondo-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El velo es lo que garantiza el contraste, y esta calculado contra el peor
   fotograma posible —uno blanco puro—, no contra el video real:
       zona de la marca, velo 0,72   blanco 7,53:1  ambar 3,69:1 (texto grande)
       zona del formulario, 0,94     #ccc 10,12:1   tenue 6,15:1
   Ningun velo razonable sostiene texto pequeno gris sobre un fotograma
   blanco: al 80 % el tenue seguia en 3,84:1. Por eso el degradado se cierra
   casi del todo donde empieza el formulario. */
.velo {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgb(18 18 18 / 0.72) 0%,
        rgb(18 18 18 / 0.72) 30%,
        rgb(18 18 18 / 0.94) 46%,
        rgb(18 18 18 / 0.985) 70%,
        #121212 100%
    );
}

.pantalla-video .content {
    position: relative;
    z-index: 2;
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-bottom: var(--e6);
}

.marca-icono {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
}

.marca-texto {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
}

/* «APOYO» en el naranja de marca. Texto grande y en negrita, asi que le basta
   3:1; sobre el peor fotograma da 3,69:1. */
.marca-texto b {
    font-weight: 700;
    color: var(--naranja);
}

.marca-texto span {
    display: block;
    margin-top: var(--e1);
    /* Blanco, no gris: el gris no aguanta un fotograma claro detras. */
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Preferencia de menos movimiento. El video se queda, congelado en un
   fotograma por el script del layout: una imagen fija no se mueve.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    button:active,
    .boton:active { transform: none; }
}

@media (min-width: 40rem) {
    .content { padding: var(--e5); }
}

/* --------------------------------------------------------------------------
   Opciones de radio en tarjeta (forma legal del proveedor)
   -------------------------------------------------------------------------- */

fieldset.campo {
    margin: 0 0 var(--e5);
    padding: 0;
    border: 0;
}

fieldset.campo legend {
    padding: 0;
    margin-bottom: var(--e2);
    color: var(--texto-fuerte);
    font-weight: 700;
    font-size: 0.9375rem;
}

.opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    min-height: var(--toque);
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    cursor: pointer;
}

.opcion + .opcion { margin-top: var(--e2); }

.opcion input[type="radio"] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    accent-color: var(--ambar);
}

.opcion strong { display: block; font-size: 0.9375rem; }

.opcion small {
    display: block;
    margin-top: 0.125rem;
    color: var(--texto-tenue);
    font-size: 0.8125rem;
}

.opcion:has(input:checked) {
    border-color: var(--ambar);
    background: rgb(255 193 7 / 0.10);
}

/* --------------------------------------------------------------------------
   Panel del conductor
   -------------------------------------------------------------------------- */

.linea-marca {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: calc(var(--e4) * -1);
    margin-bottom: var(--e5);
}

/* La grúa en uso se marca con borde verde Y con texto: quien no distingue
   verde de gris tiene que poder saber cuál lleva. */
.marca-uso {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--e2);
    color: var(--seleccion);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Las tarjetas del carrusel que son botones no deben heredar el aspecto de
   botón: son tarjetas que se pueden pulsar. */
.carrusel button.tarjeta-vehiculo {
    display: block;
    width: 100%;
    padding: 0;
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
    font-weight: 400;
    text-align: left;
    border-radius: var(--radio);
}

.carrusel button.tarjeta-vehiculo:hover {
    filter: none;
    border-color: var(--borde);
}

.carrusel form { height: 100%; }


.button-sutil{background:#999;padding:5px 12px;border-radius:50px;display:inline-block;text-decoration:none}
.button-sutil-counter{background:#b80a0a; color:#FFF;border-radius: 50px;padding:5px;width:30px;text-align:center;font-size:10px;}

.rejilla-vehiculos{list-style:none;padding:0;margin:0;margin-bottom:12px;}
.rejilla-vehiculos input{display:none;}

/* Casilla con explicacion debajo: el texto de ayuda va alineado con la
   etiqueta, no debajo del cuadrito. */
.casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
}

.casilla span { display: block; }
.casilla .hint { display: block; margin-top: var(--e1); }

/* --------------------------------------------------------------------------
   Accesibilidad de la rejilla de vehiculos

   La regla de arriba esconde el radio con display:none, que ademas de
   esconderlo lo SACA del recorrido del teclado y del lector de pantalla: la
   rejilla deja de poder elegirse sin mouse. Esto lo devuelve manteniendo el
   mismo aspecto —sigue sin verse— y agrega la marca de foco, que si no es
   invisible y no se sabe donde se esta parado.
   -------------------------------------------------------------------------- */

.rejilla-vehiculos input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tarjeta-elegible { display: block; cursor: pointer; margin-bottom:21px;border-radius:12px}
.tarjeta-elegible:has(input:checked) { border: 2px solid var(--seleccion); }
.tarjeta-elegible img{border-radius:12px 12px 0 0}
.tarjeta-elegible:has(input:focus-visible) {
    outline: 3px solid var(--ambar);
    outline-offset: 2px;
}

/* El numero publico del servicio: chico y siempre a la vista. */
.numero-servicio {
    margin: calc(var(--e3) * -1) 0 var(--e3);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Pantalla de mapa a pantalla completa

   El mapa es la pantalla, no un recuadro dentro de ella: es donde el cliente
   tiene que reconocer su calle. Todo lo demas flota encima.
   -------------------------------------------------------------------------- */

/* El cuerpo pierde el relleno y el desplazamiento: el mapa ya se arrastra solo
   y una pagina que ademas se desplaza hace que arrastrar mueva las dos cosas. */
body.cuerpo-mapa { overflow: hidden; }
body.cuerpo-mapa .content { padding: 0; }

.pantalla-mapa {
    position: relative;
    height: calc(100dvh - var(--barra) - env(safe-area-inset-bottom));
}

.mapa-lienzo {
    position: absolute;
    inset: 0;
    background: var(--superficie);
}

/* La cabecera flota sobre el mapa. */
.mapa-cabecera {
    position: absolute;
    top: var(--e3);
    left: var(--e3);
    right: var(--e3);
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    pointer-events: none;   /* el mapa se sigue arrastrando entre los botones */
}

.mapa-cabecera > * { pointer-events: auto; }

.mapa-cabecera .boton-menu {
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}

/* La distancia, en pastilla, al lado del menu. */
.mapa-cabecera .pastilla-distancia {
    margin: 0 0 0 auto;
    padding: var(--e2) var(--e4);
    border-radius: 999px;
    background: var(--fondo);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
    font-weight: 700;
    font-variant-numeric: tabular-nums;   /* no baila al cambiar de cifra */
}

/* Mientras se arrastra, el numero es una estimacion en linea recta: en gris,
   para no dar por buena una cifra que todavia va a cambiar. */
.mapa-cabecera .pastilla-distancia.provisional {
    color: var(--texto-tenue);
    font-weight: 600;
}

/* El pie: el boton de confirmar y, debajo, el cintillo de lugares. */
.mapa-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--e3);
    z-index: 5;
    padding: 0 var(--e3);
}

.mapa-pie form { margin: 0 0 var(--e3); text-align: center; }

/* El boton de confirmar es el unico: no hay «continuar» aparte. Confirmar el
   enganche lleva al destino, y confirmar el destino lleva al paso siguiente. */
.boton-mapa {
    min-height: var(--toque);
    padding: var(--e3) var(--e5);
    border: 2px solid var(--oscuro);
    border-radius: 999px;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.3);
    font-size: 1rem;
    font-weight: 700;
}

.boton-mapa[disabled] { opacity: 0.5; }

/* El cintillo de lugares guardados, pegado encima de la barra. Se desplaza en
   horizontal: con cinco lugares no caben en el ancho de un telefono. */
.cintillo-lugares {
    display: flex;
    gap: var(--e2);
    padding: var(--e2);
    border-radius: 999px;
    background: var(--fondo);
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.22);
    overflow-x: auto;
    scrollbar-width: none;
}

.cintillo-lugares::-webkit-scrollbar { display: none; }

.atajo {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: var(--e2) var(--e3);
    border: 0;
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.atajo:hover { background: var(--superficie-2); }

/* --------------------------------------------------------------------------
   Zona de peligro: la accion destructiva de una pantalla de edicion

   Separada del resto y al final. No se pone al lado de «Guardar»: son dos
   botones que hacen lo contrario, y juntos es como se borra algo queriendo
   guardarlo.
   -------------------------------------------------------------------------- */

.zona-peligro {
    margin-top: var(--e6);
    padding-top: var(--e4);
    border-top: 1px solid var(--separador);
}

.zona-peligro form { margin: 0; }
.zona-peligro .hint { margin-top: var(--e2); }

/* Contorno y no relleno: un boton rojo macizo compite con el de guardar y
   atrae el dedo. Este tiene que encontrarse cuando se busca, no antes. */
button.peligro {
    border: 1px solid var(--error);
    background: transparent;
    color: var(--error);   /* 5,94:1 sobre la superficie clara */
    font-weight: 700;
}

button.peligro:hover {
    background: var(--error);
    color: #ffffff;        /* 6,54:1 */
    filter: none;
}

/* --------------------------------------------------------------------------
   Las tres fotos del servicio

   Tres ranuras en fila, con marco punteado mientras estan vacias: el punteado
   dice «falta algo aqui» sin necesidad de leer nada.
   -------------------------------------------------------------------------- */

.rejilla-fotos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e2);
    margin: 0 0 var(--e5);
    padding: 0;
    list-style: none;
}

.ranura-foto { display: block; cursor: pointer; }

.ranura-marco {
    display: block;
    overflow: hidden;
    border: 2px dashed var(--borde);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

/* Con foto puesta el marco deja de estar punteado: ya no falta nada. */
.ranura-foto:has(img:not([hidden])) .ranura-marco {
    border-style: solid;
    border-color: var(--seleccion);
}

.ranura-marco img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ranura-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    color: var(--texto-tenue);
    font-size: 1.75rem;
}

.ranura-nombre {
    display: block;
    margin-top: var(--e2);
    color: var(--texto-tenue);
    font-size: 0.75rem;
    text-align: center;
}

/* El input se esconde pero sigue en el recorrido del teclado: la etiqueta
   entera es el area pulsable. */
.ranura-foto input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ranura-foto:has(input:focus-visible) .ranura-marco {
    outline: 3px solid var(--ambar);
    outline-offset: 2px;
}

.ranura-foto.campo-error .ranura-marco { border-color: var(--error); }

/* --------------------------------------------------------------------------
   Lista de gruas candidatas
   -------------------------------------------------------------------------- */

.conteo-gruas {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e4);
    font-weight: 700;
}

.burbuja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #999;
    color: #000;
    font-size: 0.8125rem;
}

.lista-gruas { margin: 0 0 var(--e4); padding: 0; list-style: none; }
.lista-gruas > li + li { margin-top: var(--e3); }

.tarjeta-grua {
    display: flex;
    gap: var(--e3);
    padding: var(--e3) var(--e4) var(--e4) var(--e3);
    border: 1px solid var(--separador);
    border-radius: var(--radio);
    background: var(--fondo);
    cursor: pointer;
}

.tarjeta-grua:has(input:checked) {
    border: 2px solid var(--seleccion);
    background: var(--superficie);
}

/* Escondida a la vista pero en el recorrido del teclado: la tarjeta entera es
   el area pulsable, y sin esto la lista no se puede usar sin mouse. */
.tarjeta-grua input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tarjeta-grua:has(input:focus-visible) {
    outline: 3px solid var(--ambar);
    outline-offset: 2px;
}

/* Una grua que ya no se puede marcar —se llego al maximo— se apaga en vez de
   desaparecer: sigue siendo una opcion si se desmarca otra. */
.tarjeta-grua:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.foto-grua {
    flex: 0 0 auto;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radio-s);
    object-fit: cover;
    background: var(--superficie);
}

.foto-grua.marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-tenue);
    font-size: 1.5rem;
}

.datos-grua { min-width: 0; }
.datos-grua strong { display: block; font-size: 1.0625rem; }

/* La foto del conductor: redonda, para no confundirla con la de la grua -esa
   es rectangular porque es un vehiculo, esta es una persona. */
.foto-gruero {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--superficie);
    vertical-align: middle;
    margin-right: var(--e2);
}

.foto-gruero.marcador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-tenue);
    font-size: 1.125rem;
}

/* Numeracion de secciones en un formulario largo de una sola pantalla: no es
   un asistente con pasos -se ve y se llena todo de corrido-, pero el numero
   ayuda a ubicarse y a saber cuanto falta. */
.numero-seccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: var(--e2);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto-tenue);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* El boton de ver/ocultar la contrasena. El envoltorio es SOLO del input: el
   boton se alinea con el, no con la pista o el error que vengan debajo. */
.envoltorio-clave { position: relative; }
.envoltorio-clave input { padding-right: 2.75rem; width: 100%; }
.ver-clave {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--toque);
    height: var(--toque);
    border: 0;
    background: transparent;
    color: var(--texto-tenue);
}

.datos-grua .dato {
    display: block;
    margin-top: var(--e1);
    color: var(--texto-tenue);
    font-size: 0.8125rem;
}

.datos-grua .dato i { width: 1rem; text-align: center; }
.datos-grua .chip { margin: var(--e2) 0 0; }

.estrellas {
    display: block;
    margin-top: var(--e1);
    color: var(--ambar-oscuro);   /* 2,2:1 sobre blanco: decorativo, el texto va al lado */
    font-size: 0.8125rem;
}

.estrellas .muted { margin-left: var(--e1); }

/* Lo ya pedido, arriba. */
.lista-envios { margin: 0 0 var(--e5); padding: 0; list-style: none; }

.envio {
    padding: var(--e3) var(--e4);
    border: 1px solid var(--separador);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

.envio + .envio { margin-top: var(--e2); }
.envio strong, .envio .muted { display: block; font-size: 0.875rem; }

.estado-envio {
    display: inline-block;
    margin-top: var(--e2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.envio-pending  .estado-envio { color: var(--aviso); }
.envio-accepted .estado-envio { color: var(--exito); }
.envio-declined .estado-envio,
.envio-expired  .estado-envio { color: var(--texto-tenue); }

.centrado { text-align: center; }

/* ---------------------------------------------------------------------------
   Solicitudes del conductor (letra A del flujo) y cobro del cliente.

   Todo lo que tiene borde visible lleva padding propio: un texto pegado al
   borde de su tarjeta se lee como un error de maquetacion, no como diseno.
   --------------------------------------------------------------------------- */

/* Acceso a la bandeja, en el panel del conductor. */
.tarjeta-solicitudes {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e4);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: inherit;
    text-decoration: none;
}

.tarjeta-solicitudes:hover { background: var(--superficie); }

/* Con solicitudes esperando, la tarjeta se tine: es lo unico que el gruero
   tiene que ver al desbloquear el telefono. */
.tarjeta-solicitudes[data-vacia="0"] {
    border-color: var(--naranja);
    background: var(--ambar);
    color: var(--sobre-ambar);
}

.tarjeta-solicitudes[data-vacia="0"]:hover { background: var(--ambar-oscuro); }
.tarjeta-solicitudes[data-vacia="0"] .muted { color: var(--sobre-ambar); }

.icono-solicitudes {
    position: relative;
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
}

.icono-solicitudes .burbuja {
    position: absolute;
    top: -1rem;
    right: -0.75rem;
}

.texto-solicitudes { flex: 1 1 auto; min-width: 0; }
.texto-solicitudes strong,
.texto-solicitudes .muted { display: block; }
.texto-solicitudes .muted { font-size: 0.875rem; }

/* Bandeja vacia. */
.vacio-solicitudes {
    margin-top: var(--e5);
    padding: var(--e6) var(--e4);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    text-align: center;
}

.vacio-solicitudes i {
    font-size: 2.5rem;
    color: var(--texto-tenue);
}

.vacio-solicitudes p { margin-top: var(--e3); }

/* La lista de solicitudes. */
.lista-solicitudes { list-style: none; margin: var(--e4) 0 0; padding: 0; }
.lista-solicitudes li + li { margin-top: var(--e3); }

.tarjeta-solicitud {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: inherit;
    text-decoration: none;
}

.tarjeta-solicitud:hover { background: var(--superficie); }

.motivo-solicitud {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    background: var(--superficie-2);
    font-size: 1.125rem;
}

.datos-solicitud { flex: 1 1 auto; min-width: 0; }
.datos-solicitud strong,
.datos-solicitud .dato { display: block; }
.datos-solicitud .dato { font-size: 0.875rem; }

/* La cuenta atras. Tabular para que no baile al cambiar de cifra. */
.resta-solicitud,
.plazo-solicitud strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.resta-solicitud { flex: 0 0 auto; color: var(--aviso); }
.vencida .resta-solicitud,
.plazo-solicitud.vencida strong { color: var(--error); }

.plazo-solicitud {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e4);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

/* Tarjetas de la solicitud abierta. */
.tarjeta-detalle {
    margin-top: var(--e4);
    padding: var(--e4);
    border: 1px solid var(--separador);
    border-radius: var(--radio);
    background: var(--fondo);
}

.tarjeta-detalle h2 { font-size: 1rem; margin: 0 0 var(--e3); }

.motivo-detalle {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e3);
    font-weight: 600;
}

.nota-cliente {
    margin: var(--e3) 0 0;
    padding: var(--e3);
    border-left: 3px solid var(--ambar);
    border-radius: 0 var(--radio-s) var(--radio-s) 0;
    background: var(--superficie);
    font-style: italic;
}

.datos-detalle { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.datos-detalle li {
    display: flex;
    align-items: center;
    gap: var(--e2);
}
.datos-detalle li + li { margin-top: var(--e2); }
.aviso-terceros { color: var(--aviso); font-weight: 600; }

/* Las tres fotos del cliente. */
.fotos-solicitud {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e2);
    margin: 0;
    padding: 0;
}

.fotos-solicitud img,
.foto-ausente {
    display: block;
    width: 100%;
    height: 5rem;
    border-radius: var(--radio-s);
    object-fit: cover;
}

.foto-ausente {
    display: grid;
    place-items: center;
    border: 1px dashed var(--borde);
    color: var(--texto-tenue);
}

.pie-foto {
    display: block;
    margin-top: var(--e1);
    font-size: 0.75rem;
    color: var(--texto-tenue);
    text-align: center;
}

/* El recorrido A -> B. */
.ruta-detalle { list-style: none; margin: 0; padding: 0; }
.ruta-detalle li {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
}
.ruta-detalle li + li { margin-top: var(--e3); }

.punto {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
}

.punto-a { background: var(--oscuro); color: var(--sobre-oscuro); }
.punto-b { background: var(--ambar); color: var(--sobre-ambar); }

.km-detalle {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--separador);
    font-weight: 600;
}

/* Eventualidades: lo unico que el gruero puede cambiar del precio. */
.lista-eventualidades { list-style: none; margin: 0; padding: 0; }
.lista-eventualidades li + li {
    margin-top: var(--e2);
    padding-top: var(--e2);
    border-top: 1px solid var(--separador);
}

.eventualidad {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    min-height: var(--toque);
    cursor: pointer;
}

.texto-eventualidad { flex: 1 1 auto; min-width: 0; }
.texto-eventualidad strong,
.texto-eventualidad .muted { display: block; }
.texto-eventualidad .muted { font-size: 0.8125rem; }

.monto-eventualidad {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.horas-eventualidad {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: var(--e2) 0 0 var(--e5);
    font-size: 0.875rem;
}

.horas-eventualidad input { width: 4.5rem; }

/* El desglose del precio. */
.desglose,
.desglose-oferta { list-style: none; margin: 0; padding: 0; }

.desglose li,
.desglose-oferta li {
    display: flex;
    justify-content: space-between;
    gap: var(--e3);
}

.desglose li + li,
.desglose-oferta li + li { margin-top: var(--e2); }

.desglose .total,
.desglose-oferta .total {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--borde);
    font-size: 1.125rem;
    font-weight: 700;
}

.desglose .total span:last-child,
.desglose-oferta .total span:last-child { font-variant-numeric: tabular-nums; }

.tarjeta-total { border-color: var(--borde); background: var(--superficie); }

/* Las dos respuestas van separadas: con guantes, dos botones a la misma
   altura es como se descarta un servicio por error. */
.acciones-solicitud { margin-top: var(--e4); }
.descartar-solicitud { margin-top: var(--e5); }

/* Las ofertas que ve el cliente. */
.lista-ofertas { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.lista-ofertas li + li { margin-top: var(--e3); }

.tarjeta-oferta {
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}

.cabeza-oferta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e3);
}

.cabeza-oferta strong,
.cabeza-oferta .muted { display: block; }
.cabeza-oferta .muted { font-size: 0.875rem; }
.tarjeta-oferta .boton { margin-top: var(--e4); }

/* La grua elegida, en el cobro y en el seguimiento. */
.grua-elegida {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.grua-elegida strong,
.grua-elegida .muted,
.grua-elegida .dato { display: block; }
.grua-elegida .muted,
.grua-elegida .dato { font-size: 0.875rem; }

.tarjeta-cortesia {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e4);
    padding: var(--e4);
    border-radius: var(--radio);
    background: var(--superficie);
}

.tarjeta-cortesia i { font-size: 1.5rem; color: var(--aviso); }
.tarjeta-cortesia p { margin: 0; }

/* El codigo de enganche. Es lo primero que se busca al abrir la pantalla. */
.tarjeta-codigo {
    margin-top: var(--e4);
    padding: var(--e5) var(--e4);
    border: 2px solid var(--ambar);
    border-radius: var(--radio);
    background: var(--fondo);
    text-align: center;
}

.tarjeta-codigo h2 { font-size: 1rem; margin: 0; }

.codigo-enganche {
    margin: var(--e3) 0;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
    color: var(--texto-fuerte);
}

/* El visor de fotos.

   Dentro de la aplicacion y no en una pestana nueva: en el APK una pestana
   saca al gruero de la aplicacion y volver le cuesta. */
.abrir-foto {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.abrir-foto img { border-radius: var(--radio-s); }
.abrir-foto:active img { transform: scale(0.97); }

.visor-foto {
    width: min(92vw, 44rem);
    max-height: 88vh;
    padding: var(--e4);
    border: 0;
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--texto);
    overflow: auto;
}

.visor-foto::backdrop { background: rgba(0, 0, 0, 0.75); }

.visor-foto img {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radio-s);
    object-fit: contain;
}

/* El boton de cerrar no va pegado al borde del cuadro: la tarjeta tiene
   padding propio y el boton vive dentro de el. */
.cerrar-visor {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--e2);
}

.cerrar-visor button {
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border: 0;
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto);
    font-size: 1.125rem;
    cursor: pointer;
}

.cerrar-visor button:hover { background: var(--superficie-2); }

#visor-pie {
    margin: var(--e3) 0 0;
    color: var(--texto-tenue);
    text-align: center;
}

/* El servicio abierto, arriba del todo en el inicio del cliente.

   Se tine de ambar solo cuando hay algo que decidir. Un aviso que grita
   siempre deja de leerse, y entonces el dia que si importa tampoco se lee. */
.tarjeta-en-curso {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-bottom: var(--e4);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: inherit;
    text-decoration: none;
}

.tarjeta-en-curso:hover { background: var(--superficie); }

.tarjeta-en-curso.urgente {
    border-color: var(--naranja);
    background: var(--ambar);
    color: var(--sobre-ambar);
}

.tarjeta-en-curso.urgente:hover { background: var(--ambar-oscuro); }
.tarjeta-en-curso.urgente .muted { color: var(--sobre-ambar); }

.icono-en-curso {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    background: var(--superficie-2);
    font-size: 1.125rem;
}

.tarjeta-en-curso.urgente .icono-en-curso {
    background: var(--sobre-ambar);
    color: var(--ambar);
}

.texto-en-curso { flex: 1 1 auto; min-width: 0; }
.texto-en-curso strong,
.texto-en-curso .muted { display: block; }
.texto-en-curso .muted { font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   Lista de solicitudes, bitacora, numero de servicio y chat.
   --------------------------------------------------------------------------- */

/* El buscador. Va siempre visible, aunque la lista este vacia. */
.buscador-servicios {
    display: flex;
    gap: var(--e2);
    margin: var(--e4) 0;
}

.buscador-servicios input {
    flex: 1 1 auto;
    min-width: 0;
}

.buscador-servicios button {
    flex: 0 0 auto;
    width: var(--toque);
    height: var(--toque);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
}

.buscador-servicios button:hover { background: var(--superficie-2); }

/* Los renglones. El separador es una linea entre filas, no un borde por
   tarjeta: ocho tarjetas con borde propio hacen ruido y esta lista se recorre
   con el pulgar, no se lee una por una. */
.lista-servicios { list-style: none; margin: 0; padding: 0; }

.lista-servicios li {
    display: flex;
    align-items: center;
    gap: var(--e2);
}

.lista-servicios li + li { border-top: 1px solid var(--separador); }

/* El boton de copiar va FUERA del enlace: anidarlo haria que copiar navegara
   tambien, que es lo contrario de lo que quiere quien copia para pegar. */
.copiar-numero {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border: 0;
    border-radius: var(--radio-s);
    background: none;
    color: var(--texto-tenue);
    cursor: pointer;
}

.copiar-numero:hover { background: var(--superficie); color: var(--texto); }
.copiar-numero.copiado { color: var(--exito); }

.renglon-servicio {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-width: 0;
    min-height: var(--toque);
    padding: var(--e3) var(--e2) var(--e3) 0;
    color: inherit;
    text-decoration: none;
}

.renglon-servicio:hover .numero-servicio { text-decoration: underline; }

.numero-servicio {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuando-servicio {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--texto-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.renglon-servicio .chip { flex: 0 0 auto; margin: 0; }
.renglon-servicio .fa-chevron-right { flex: 0 0 auto; color: var(--texto-tenue); }

.paginas-servicios {
    display: flex;
    justify-content: center;
    gap: var(--e2);
    margin-top: var(--e4);
}

/* Distintivos de estado. Cinco colores para dieciseis estados: mas de cinco
   dejan de leerse de un vistazo, que es para lo unico que sirven aqui. */
.chip-neutro { color: var(--texto-tenue); }
.chip-curso  { color: var(--aviso); }

/* El numero de servicio con su estado, arriba de la pantalla de detalle. */
.cinta-numero {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e3);
    padding: var(--e2) var(--e3);
    border-radius: var(--radio-s);
    background: var(--superficie);
}

.cinta-numero .numero-servicio { flex: 1 1 auto; min-width: 0; }
.cinta-numero .chip { flex: 0 0 auto; margin: 0; }

/* La bitacora. Una linea vertical que une los hitos: es lo que hace que se lea
   como una secuencia y no como una lista de frases sueltas. */
.bitacora { list-style: none; margin: 0; padding: 0; }

.bitacora li {
    position: relative;
    display: flex;
    gap: var(--e3);
    padding-bottom: var(--e4);
}

.bitacora li:last-child { padding-bottom: 0; }

.bitacora li::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: 0.84rem;
    bottom: 0;
    width: 2px;
    background: var(--separador);
}

.bitacora li:last-child::before { display: none; }

.hito {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--texto-tenue);
    font-size: 0.75rem;
}

.bitacora .ahora .hito { background: var(--ambar); color: var(--sobre-ambar); }
.bitacora .ahora .texto-hito { font-weight: 600; }

.texto-hito { flex: 1 1 auto; min-width: 0; }
.texto-hito time { display: block; font-size: 0.8125rem; }

.cobro-servicio { margin-left: auto; font-weight: 700; }

/* El acceso al chat. Arriba y no escondido en un menu: entre que se paga y que
   la grua aparece, escribir es lo unico que se puede hacer. */
.acceso-chat {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e4);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: inherit;
    text-decoration: none;
}

.acceso-chat:hover { background: var(--superficie); }

.icono-chat {
    position: relative;
    flex: 0 0 auto;
    font-size: 1.375rem;
    line-height: 1;
}

.icono-chat .burbuja {
    position: absolute;
    top: -0.5rem;
    right: -0.75rem;
}

.texto-chat { flex: 1 1 auto; min-width: 0; }
.texto-chat strong,
.texto-chat .muted { display: block; }
.texto-chat .muted { font-size: 0.875rem; }

/* El chat. Deja sitio abajo para la barra de escribir, que va fija: sin ese
   hueco el ultimo mensaje queda tapado justo cuando se acaba de recibir. */
.chat { padding-bottom: 4.5rem; }

.chat-contexto {
    margin: var(--e3) 0;
    padding: var(--e2) var(--e3);
    border-radius: var(--radio-s);
    background: var(--superficie);
    font-size: 0.8125rem;
    color: var(--texto-tenue);
    text-align: center;
}

.globos { list-style: none; margin: 0; padding: 0; }

.globo {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    margin-bottom: var(--e3);
    padding: var(--e3);
    border-radius: var(--radio);
}

.globo .quien {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: var(--e1);
}

.globo .hora {
    align-self: flex-end;
    margin-top: var(--e1);
    font-size: 0.6875rem;
    opacity: 0.75;
}

/* El propio en ambar, el del otro en gris: es la convencion que todo el mundo
   ya sabe leer de cualquier otro chat. */
.globo.mio {
    margin-left: auto;
    background: var(--ambar);
    color: var(--sobre-ambar);
    border-bottom-right-radius: var(--e1);
}

.globo.suyo {
    margin-right: auto;
    background: var(--superficie);
    border-bottom-left-radius: var(--e1);
}

.globo .texto { white-space: pre-wrap; overflow-wrap: anywhere; }

.chat-vacio {
    margin-top: var(--e6);
    color: var(--texto-tenue);
    text-align: center;
}

.chat-cerrado {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--barra);
    margin: 0;
    padding: var(--e3);
    text-align: center;
    background: var(--superficie);
    color: var(--texto-tenue);
    font-size: 0.8125rem;
}

/* La barra de escribir, fija encima de la barra inferior. */
.chat-escribir {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--barra);
    display: flex;
    gap: var(--e2);
    padding: var(--e3);
    border-top: 1px solid var(--separador);
    background: var(--fondo);
}

.chat-escribir input {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-escribir button {
    flex: 0 0 auto;
    width: var(--toque);
    height: var(--toque);
    border: 0;
    border-radius: 50%;
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-size: 1rem;
    cursor: pointer;
}

.chat-escribir button:hover { background: var(--ambar-oscuro); }

/* ---------------------------------------------------------------------------
   Bandeja de chats y retirar una solicitud.
   --------------------------------------------------------------------------- */

.lista-chats { list-style: none; margin: var(--e4) 0 0; padding: 0; }
.lista-chats li + li { border-top: 1px solid var(--separador); }

.renglon-chat {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) 0;
    color: inherit;
    text-decoration: none;
}

.renglon-chat:hover { background: var(--superficie); }
.renglon-chat.con-nuevos strong { font-weight: 700; }
.renglon-chat.con-nuevos .ultimo-mensaje { color: var(--texto); font-weight: 600; }

.datos-chat { flex: 1 1 auto; min-width: 0; }
.datos-chat strong,
.datos-chat .muted { display: block; }
.datos-chat .muted { font-size: 0.8125rem; }

/* Una sola linea: es lo que permite reconocer la conversacion sin abrirla. */
.ultimo-mensaje {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lado-chat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--e1);
    font-size: 0.75rem;
}

.lado-chat .chip { margin: 0; }

/* Retirar la solicitud. Va al lado del enlace que la abre, asi que pide
   confirmacion y se pinta en rojo solo al tocarlo. */
.cancelar-solicitud { flex: 0 0 auto; margin: 0; }

.cancelar-solicitud button {
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border: 0;
    border-radius: var(--radio-s);
    background: none;
    color: var(--texto-tenue);
    cursor: pointer;
}

.cancelar-solicitud button:hover { background: var(--superficie); color: var(--error); }

/* Cancelar un servicio pagado. Las restas del desglose se pintan distinto: es
   la diferencia entre «pagaste 50.000» y «se te devuelven 20.000». */
.desglose .resta { color: var(--error); }

/* La salida va separada del boton que cobra: dos botones pegados a la misma
   altura es como se cancela un servicio por error. */
.volver-servicio { margin-top: var(--e5); }
.zona-cancelar   { margin-top: var(--e6); }

.boton.peligro,
button.peligro {
    background: var(--error);
    color: #ffffff;
}

button.peligro:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------------------
   Navegacion paso a paso y mapa en vivo.

   El mapa ocupa todo. Lo que flota encima es lo unico que compite con el, asi
   que es lo minimo: la instruccion arriba, el destino y el boton abajo.
   --------------------------------------------------------------------------- */

.mapa-lleno {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.pantalla-mapa.navegando { position: relative; }

/* La instruccion. Es lo unico que el conductor lee mientras maneja, asi que va
   grande y con fondo opaco: sobre un mapa claro, un texto sin fondo no se lee
   con sol. */
.instruccion {
    position: absolute;
    top: var(--e3);
    left: var(--e3);
    right: var(--e3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio);
    background: var(--oscuro);
    color: var(--sobre-oscuro);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.salir-navegacion {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    margin-left: calc(var(--e2) * -1);
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

.salir-navegacion:hover { background: rgba(255, 255, 255, 0.12); }

.texto-instruccion { flex: 1 1 auto; min-width: 0; }

.texto-instruccion strong {
    display: block;
    font-size: 1.125rem;
    line-height: 1.3;
}

.texto-instruccion .muted {
    display: block;
    margin-top: var(--e1);
    color: #c9ccd0;
    font-variant-numeric: tabular-nums;
}

/* El pie: a donde va y el boton de llegue. */
.pie-navegacion,
.pie-vivo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--barra);
    z-index: 2;
    padding: var(--e4);
    border-top: 1px solid var(--separador);
    background: var(--fondo);
}

.destino-navegacion {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin: 0;
}

.destino-navegacion strong,
.destino-navegacion .muted { display: block; }
.destino-navegacion .muted { font-size: 0.875rem; }
.destino-navegacion > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.falta {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#forma-llegue { margin-top: var(--e3); }

/* La barra de progreso del cliente. Convierte «esperar» en «faltan dos pasos»:
   sin ella, cinco minutos parados se sienten como veinte. */
.progreso-servicio {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.progreso-servicio li {
    flex: 1 1 0;
    position: relative;
    padding-top: 1.5rem;
    font-size: 0.6875rem;
    color: var(--texto-tenue);
    text-align: center;
}

/* El punto de cada paso, y la linea que los une. */
.progreso-servicio li::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: -0.375rem;
    border-radius: 50%;
    background: var(--superficie-2);
}

.progreso-servicio li::after {
    content: "";
    position: absolute;
    top: 0.5625rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--superficie-2);
}

.progreso-servicio li:last-child::after { display: none; }

.progreso-servicio .hecho { color: var(--texto); }
.progreso-servicio .hecho::before,
.progreso-servicio .hecho::after { background: var(--exito); }

.progreso-servicio .ahora {
    color: var(--texto-fuerte);
    font-weight: 700;
}

.progreso-servicio .ahora::before {
    background: var(--ambar);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
}

.sin-posicion {
    margin: var(--e3) 0 0;
    font-size: 0.8125rem;
    color: var(--texto-tenue);
    text-align: center;
}

/* La cabecera flotante del mapa en vivo. */
.cabecera-flotante {
    position: absolute;
    top: var(--e3);
    left: var(--e3);
    right: var(--e3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e3);
    border-radius: var(--radio);
    background: var(--fondo);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.volver-mapa {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

.volver-mapa:hover { background: var(--superficie); }

.texto-flotante { flex: 1 1 auto; min-width: 0; }
.texto-flotante strong,
.texto-flotante .muted { display: block; }
.texto-flotante .muted { font-size: 0.8125rem; }

.acceso-mapa .icono-chat { color: var(--naranja); }

/* Guia de respaldo. Va siempre visible: la navegacion de aqui dentro depende de
   que Google conteste, y estos enlaces no dependen de ninguna API nuestra. */
.guias-externas {
    display: flex;
    gap: var(--e2);
    margin: var(--e3) 0 0;
}

.guias-externas .boton {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.8125rem;
}

/* Un ajuste de desarrollo que no se ve es un ajuste que acaba encendido en
   produccion sin que nadie se entere. */
.aviso-pruebas {
    display: block;
    margin-top: var(--e2);
    font-size: 0.75rem;
    color: var(--aviso);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Alcance del servicio en el cobro, y el documento legal.
   --------------------------------------------------------------------------- */

/* Lo que NO cubre el precio. Va antes de confirmar y con borde propio: es lo
   que el cliente tiene que haber leido cuando discuta con el gruero. */
.tarjeta-alcance {
    margin-top: var(--e4);
    padding: var(--e4);
    border: 1px solid var(--aviso);
    border-radius: var(--radio);
    background: var(--fondo);
}

.tarjeta-alcance h2 {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e3);
    font-size: 1rem;
    color: var(--aviso);
}

.tarjeta-alcance ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tarjeta-alcance li {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tarjeta-alcance li + li {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--separador);
}

.tarjeta-alcance li i {
    flex: 0 0 1.25rem;
    margin-top: 0.15rem;
    color: var(--texto-tenue);
    text-align: center;
}

.tarjeta-alcance .hint { margin-top: var(--e3); }

/* El documento legal. Medida de linea corta y renglon alto: son varias paginas
   de texto corrido y hay que poder leerlas sin perder el hilo. */
.documento-legal {
    max-width: 42rem;
    margin: 0 auto;
    padding-bottom: var(--e6);
    line-height: 1.7;
}

.documento-legal h2 {
    margin: var(--e6) 0 var(--e3);
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--separador);
    font-size: 1.125rem;
}

.documento-legal h3 {
    margin: var(--e5) 0 var(--e2);
    font-size: 1rem;
}

.documento-legal p { margin: 0 0 var(--e3); }
.documento-legal ul { margin: 0 0 var(--e3); padding-left: var(--e5); }
.documento-legal li { margin-bottom: var(--e2); }

.version-legal {
    padding: var(--e2) var(--e3);
    border-radius: var(--radio-s);
    background: var(--superficie);
    font-size: 0.8125rem;
    color: var(--texto-tenue);
}

/* Lo que hay que leer aunque se lea en diagonal. */
.destacado {
    padding: var(--e3);
    border-left: 3px solid var(--ambar);
    border-radius: 0 var(--radio-s) var(--radio-s) 0;
    background: var(--superficie);
}

/* Marcas para el abogado. Se ven a proposito: si estuvieran en un comentario
   HTML nadie las encontraria, y son justo lo que hay que revisar. */
.revisar {
    padding: var(--e3);
    border-left: 3px solid var(--error);
    border-radius: 0 var(--radio-s) var(--radio-s) 0;
    background: var(--superficie);
    font-size: 0.875rem;
}

.definiciones { margin: 0 0 var(--e3); }
.definiciones dt { font-weight: 700; margin-top: var(--e3); }
.definiciones dd { margin: 0 0 0 var(--e4); color: var(--texto-tenue); }

/* Al imprimir —que es como va a llegarle al abogado— sobra la navegacion. */
@media print {
    .barra-inferior,
    .barra-superior,
    .encabezado-pantalla { display: none !important; }

    .documento-legal { max-width: none; }
    .revisar { border-left-width: 4px; }
}

/* ---------------------------------------------------------------------------
   Avance de la grua, mapa del inicio y pagina compartida.
   --------------------------------------------------------------------------- */

/* La barra con la grua encima. Va encima del relleno y no dentro, asi avanza
   SOBRE la linea en vez de empujarla: es como se lee un recorrido. */
.avance-grua {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-top: var(--e3);
}

.pista-avance {
    position: relative;
    flex: 1 1 auto;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--superficie-2);
}

.relleno-avance {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ambar);
    transition: width 600ms ease-out;
}

/* La grua se coloca con la misma variable que mueve el relleno, asi que las dos
   cosas no se pueden desincronizar. */
.marcador-avance {
    position: absolute;
    top: 50%;
    left: var(--avance, 0%);
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
    transition: left 600ms ease-out;
    pointer-events: none;
}

.texto-avance {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* El mapa del inicio. Alto fijo y sin gestos: es un vistazo, no un mapa para
   explorar; para eso esta el boton que lleva al grande. */
.tarjeta-seguimiento {
    margin: calc(var(--e4) * -1 + var(--e2)) 0 var(--e4);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-top: 0;
    border-radius: 0 0 var(--radio) var(--radio);
    background: var(--fondo);
}

.mapa-inicio {
    height: 9rem;
    border-radius: var(--radio-s);
    background: var(--superficie);
}

.acciones-seguimiento {
    display: flex;
    gap: var(--e2);
    margin: var(--e3) 0 0;
}

.acciones-seguimiento .boton,
.acciones-seguimiento button { flex: 1 1 0; font-size: 0.8125rem; }
.acciones-seguimiento .copiado { color: var(--exito); }

/* La pagina compartida no lleva navegacion: no es la aplicacion. */
.pantalla-mapa.compartida .pie-vivo { bottom: 0; }

.nota-compartida {
    margin: var(--e3) 0 0;
    font-size: 0.75rem;
    color: var(--texto-tenue);
    text-align: center;
}

/* Las siluetas del angulo que se pide. Ocupan la ranura entera en vez de un
   icono chico centrado: la idea es que se vea QUE foto hay que tomar. */
.ranura-icono img {
    width: 100%;
    max-width: 6.5rem;
    height: auto;
    opacity: 0.55;
}

.ranura-foto:hover .ranura-icono img { opacity: 0.8; }

/* La instruccion de navegacion va sobre fondo oscuro, pero la regla global
   «strong { color: var(--texto-fuerte) }» la pintaba casi negra en tema claro:
   texto oscuro sobre caja oscura, ilegible.
   Google devuelve la instruccion con su propio marcado —negritas, divisiones—
   asi que se fuerza el color en TODO lo que haya dentro. */
.instruccion,
.instruccion strong,
.instruccion b,
.instruccion div,
.instruccion span { color: var(--sobre-oscuro); }

/* La distancia y el nombre de la calle, un punto por debajo: sigue legible
   sobre el oscuro —#c9ccd0 da 9,7:1— sin competir con la instruccion. */
.instruccion .muted,
.texto-instruccion .muted { color: #c9ccd0; }

/* El tiempo de llegada, arriba y grande. Es LA decision del cliente: una grua
   mas cerca puede llegar mucho despues, y con la distancia arriba elige mal. */
.eta-grua {
    display: flex;
    align-items: baseline;
    gap: var(--e2);
    margin-bottom: var(--e1);
}

.eta-grua strong { font-size: 1.0625rem; }
.eta-grua .muted { font-size: 0.75rem; }

/* El modal de avisos. Es un dialogo y no un mensaje en una esquina: lo que
   llega aqui tiene plazo —dos minutos para contestar, una grua que ya salio— y
   un aviso que se desvanece a los cinco segundos se pierde. */
.modal-aviso {
    width: min(92vw, 24rem);
    padding: var(--e5) var(--e4) var(--e4);
    border: 0;
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--texto);
}

.modal-aviso::backdrop { background: rgba(0, 0, 0, 0.55); }

.cuerpo-aviso { text-align: center; }

.icono-aviso {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--e3);
    border-radius: 50%;
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-size: 1.5rem;
}

.cuerpo-aviso h2 { margin: 0 0 var(--e2); font-size: 1.125rem; }
.cuerpo-aviso p  { margin: 0; color: var(--texto-tenue); }

.acciones-aviso-modal {
    display: flex;
    gap: var(--e2);
    margin-top: var(--e5);
}

.acciones-aviso-modal .boton,
.acciones-aviso-modal button { flex: 1 1 0; }

/* El aviso de GPS flota sobre el contenido: llega desde el layout y no sabe en
   que pantalla esta, asi que no puede contar con un hueco reservado. */
.aviso-gps-flotante {
    position: sticky;
    top: var(--e2);
    z-index: 3;
    margin: var(--e3) 0;
}

/* El campo del codigo de enganche. Grande y espaciado: se teclea en la calle,
   de pie, con lo que el cliente dicta en voz alta. */
.campo-codigo {
    width: 100%;
    padding: var(--e3);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tarjeta-codigo-gruero { border-color: var(--ambar); }

/* La valoracion. Cinco preguntas con cuatro opciones cada una: se contesta con
   el pulgar, de un vistazo y sin desplegables. */
.lista-preguntas { list-style: none; margin: var(--e4) 0; padding: 0; }

.pregunta + .pregunta {
    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid var(--separador);
}

.texto-pregunta { margin: 0 0 var(--e3); font-weight: 600; }

.escala { display: flex; gap: var(--e2); }

.opcion-escala {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    cursor: pointer;
}

.opcion-escala input { position: absolute; opacity: 0; pointer-events: none; }

.opcion-escala span {
    display: block;
    padding: var(--e3) var(--e1);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    font-size: 0.75rem;
    line-height: 1.2;
}

.opcion-escala:hover span { background: var(--superficie); }

/* La marcada se tine entera: un punto chico no se ve al elegir de reojo. */
.opcion-escala input:checked + span {
    border-color: var(--naranja);
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-weight: 700;
}

.opcion-escala input:focus-visible + span { outline: 2px solid var(--seleccion); }

/* El dialogo de confirmacion propio. Reemplaza al cuadro gris del navegador,
   que no respeta el tema y en el APK se ve como un error del sistema. */
.modal-confirmar {
    width: min(92vw, 24rem);
    padding: var(--e5) var(--e4) var(--e4);
    border: 0;
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--texto);
}

.modal-confirmar::backdrop { background: rgba(0, 0, 0, 0.55); }

.icono-aviso.peligro { background: var(--error); color: #ffffff; }

/* Retirar la solicitud mientras se espera respuesta. Va separado del resto:
   es la salida, no una opcion mas de la lista, y pegado al bloque de arriba se
   toca por error. */
.zona-cancelar { margin: var(--e5) 0 var(--e4); }

/* ---------------------------------------------------------------------------
   La ayuda.
   --------------------------------------------------------------------------- */

/* El indice. Cada tema lleva su resumen debajo del titulo: sin el, «Tus
   lugares» y «Tus vehiculos» se parecen lo suficiente como para entrar a los
   dos y volver. */
.ayuda-indice {
    margin: 0 0 var(--e6);
    padding: 0;
    list-style: none;
}

.ayuda-indice li { margin-bottom: var(--e2); }

.ayuda-indice a {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
}

.ayuda-indice a:hover,
.ayuda-indice a:focus-visible { background: var(--superficie-2); }

.ayuda-icono {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fondo);
    color: var(--naranja);
}

/* El texto ocupa lo que sobra y empuja el chevron al borde. */
.ayuda-texto { flex: 1 1 auto; min-width: 0; }
.ayuda-texto strong { display: block; }

.ayuda-texto small {
    display: block;
    margin-top: 2px;
    color: var(--texto-tenue);
    line-height: 1.4;
}

/* Los pasos numerados. El numero va fuera del texto y no en linea: al leerlos
   en un telefono, lo que se busca es «voy por el 4», no la frase. */
.ayuda-tema .pasos {
    margin: 0 0 var(--e4);
    padding-left: var(--e5);
}

.ayuda-tema .pasos li {
    margin-bottom: var(--e3);
    padding-left: var(--e2);
}

.ayuda-tema .pasos li::marker {
    color: var(--naranja);
    font-weight: 700;
}

/* La tabla de retenciones por fase. Se desplaza sola si no cabe: el cuerpo de
   la pagina nunca se mueve de lado. */
.tabla-ayuda {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 var(--e4);
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tabla-ayuda th,
.tabla-ayuda td {
    padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--separador);
    text-align: left;
    white-space: nowrap;
}

.tabla-ayuda th { color: var(--texto-tenue); font-weight: 600; }
.tabla-ayuda tr:last-child td { border-bottom: 0; }

.zona-ayuda-volver { margin: var(--e5) 0 var(--e6); }

/* La foto con la que el cliente registro el vehiculo, en la pantalla del
   enganche. Grande: se mira para cotejar modelo y color, no de adorno. */
.foto-cotejo {
    display: block;
    width: 100%;
    max-height: 14rem;
    object-fit: cover;
    border-radius: var(--radio);
    background: var(--superficie);
}

/* La placa escondida mientras se engancha. En cursiva y tenue para que se lea
   como una nota del sistema y no como el dato del vehiculo. */
.placa-oculta { font-style: italic; color: var(--texto-tenue); }

.foto-hecha { margin: var(--e2) 0; color: var(--exito); }

/* La salida de emergencia de la foto. Cerrada por omision: esta para el
   telefono que no abre la camara, no para ahorrarse el paso. */
.sin-foto { margin-top: var(--e4); }

.sin-foto summary {
    padding: var(--e2) 0;
    color: var(--texto-tenue);
    cursor: pointer;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   Prueba de camara. Pantalla suelta, no es parte de ningun flujo.
   --------------------------------------------------------------------------- */

.lista-diagnostico {
    margin: 0 0 var(--e5);
    padding: 0;
    list-style: none;
}

.lista-diagnostico li {
    display: flex;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--separador);
}

.lista-diagnostico li span { color: var(--texto-tenue); text-align: right; }
.lista-diagnostico li.ok  span { color: var(--exito); }
.lista-diagnostico li.mal span { color: var(--error); }

.visor-camara {
    position: relative;
    margin-bottom: var(--e3);
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;
}

.visor-camara video { display: block; width: 100%; height: auto; }

/* La guia de encuadre. Solo las esquinas: un marco entero tapa el vehiculo y
   la gente encuadra contra el borde en vez de contra el objeto. */
.guia-encuadre {
    position: absolute;
    inset: 12% 8%;
    pointer-events: none;
}

.guia-encuadre .esquina {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(255, 255, 255, 0.9);
}

.guia-encuadre .ai { top: 0;    left: 0;  border-right: 0;  border-bottom: 0; }
.guia-encuadre .ad { top: 0;    right: 0; border-left: 0;   border-bottom: 0; }
.guia-encuadre .bi { bottom: 0; left: 0;  border-right: 0;  border-top: 0; }
.guia-encuadre .bd { bottom: 0; right: 0; border-left: 0;   border-top: 0; }

.guia-encuadre .guia-texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.25rem;
    margin: 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 0.875rem;
}

.medidas-vivo { text-align: center; color: var(--texto-tenue); }
.medidas-vivo .ok  { color: var(--exito); font-weight: 700; }
.medidas-vivo .mal { color: var(--error); font-weight: 700; }

#captura { display: block; width: 100%; border-radius: var(--radio); }

/* ---------------------------------------------------------------------------
   La bandeja de notificaciones.
   --------------------------------------------------------------------------- */

.bandeja { margin: 0 0 var(--e4); padding: 0; list-style: none; }
.bandeja li { margin-bottom: var(--e2); }

.bandeja a,
.bandeja div {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
}

.bandeja a:hover,
.bandeja a:focus-visible { background: var(--superficie-2); }

/* Sin leer se marca con el fondo y un punto, no con negrita: la negrita en el
   titulo ya la usa el texto y no se distinguiria. */
.bandeja li.nueva a,
.bandeja li.nueva div { background: var(--ambar-suave, var(--superficie-2)); }

.icono-bandeja {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fondo);
    color: var(--naranja);
}

.texto-bandeja { flex: 1 1 auto; min-width: 0; }
.texto-bandeja strong { display: block; }
.texto-bandeja span { display: block; margin-top: 2px; line-height: 1.4; }

.texto-bandeja small {
    display: block;
    margin-top: var(--e2);
    color: var(--texto-tenue);
    font-size: 0.75rem;
}

.punto-nueva {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-top: .9rem;
    border-radius: 50%;
    background: var(--naranja);
}

.vacio-bandeja { padding: var(--e6) var(--e4); text-align: center; }

.vacio-bandeja .icono-vacio {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--e3);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto-tenue);
    font-size: 1.5rem;
}

.vacio-bandeja h2 { margin: 0 0 var(--e2); font-size: 1.0625rem; }

.zona-bandeja-pie { margin: var(--e5) 0 var(--e6); }

/* El punto del menu lateral, cuando hay algo sin leer. */
.lateral-nav .con-punto { position: relative; }

.lateral-nav .con-punto::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--e4);
    width: .5rem;
    height: .5rem;
    margin-top: -.25rem;
    border-radius: 50%;
    background: var(--naranja);
}

/* ---------------------------------------------------------------------------
   Configuración.
   --------------------------------------------------------------------------- */

/* Una sección apagada se ve, pero no se toca: verla dice «viene», no verla
   dice «no existe», y son cosas que la gente busca. */
.ayuda-indice .apagado {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-radius: var(--radio);
    background: var(--superficie);
    opacity: .55;
}

.etiqueta-pronto {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto-tenue);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Tres opciones cortas en fila. Un desplegable con tres cosas es un toque de
   más para ver lo que ya cabía en pantalla. */
.opciones-tema { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opciones-tema .opcion-escala { flex: 1 1 7rem; }

.lista-avisos { margin: 0 0 var(--e3); padding: 0; list-style: none; }

.lista-avisos li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--separador);
}

.lista-avisos li:last-child { border-bottom: 0; }
.lista-avisos small { white-space: nowrap; }

.lista-movimientos { margin: 0; padding: 0; list-style: none; }

.lista-movimientos li {
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--separador);
}

.lista-movimientos li:last-child { border-bottom: 0; }
.lista-movimientos strong { display: block; }
.lista-movimientos small { color: var(--texto-tenue); font-size: .75rem; }

/* Un dato que se muestra pero no se edita. Se ve como dato, no como campo
   deshabilitado: un campo gris invita a tocarlo y no pasa nada. */
.dato-fijo {
    margin: 0 0 var(--e2);
    padding: var(--e3);
    border-radius: var(--radio-s);
    background: var(--superficie);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Cada aviso con su ejemplo debajo: sin él, «recomendaciones» no le dice a
   nadie qué está apagando. */
.texto-aviso { flex: 1 1 auto; min-width: 0; }
.texto-aviso strong { display: block; }

.texto-aviso small {
    display: block;
    margin-top: 2px;
    color: var(--texto-tenue);
    line-height: 1.4;
}

.lista-avisos li { align-items: flex-start; }
.lista-avisos .interruptor,
.lista-avisos .apagado { flex: 0 0 auto; margin-top: .15rem; }

/* El mismo interruptor, pero con una casilla en vez de un botón.
   
   El de disponibilidad es un <button> porque manda un formulario al tocarlo. Los
   de configuración son casillas dentro de un formulario que se guarda al final,
   así que la casilla es lo correcto: funciona sin JavaScript y el teclado la
   entiende sola. Lo que se ve es idéntico. */
.interruptor input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 3.25rem;
    height: 1.875rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--superficie-2);
    position: relative;
    cursor: pointer;
    transition: background-color 150ms ease;
    flex: 0 0 auto;
}

.interruptor input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    transition: transform 150ms ease;
}

.interruptor input[type="checkbox"]:checked { background: var(--ambar); }
.interruptor input[type="checkbox"]:checked::after { transform: translateX(1.375rem); }
.interruptor input[type="checkbox"]:focus-visible { outline: 2px solid var(--seleccion); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Dónde está abierta la cuenta.
   --------------------------------------------------------------------------- */

.lista-dispositivos { margin: 0 0 var(--e3); padding: 0; list-style: none; }

.lista-dispositivos li {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--separador);
}

.lista-dispositivos li:last-child { border-bottom: 0; }

/* El aparato desde el que se está mirando va marcado: sin eso, no se sabe cuál
   NO hay que cerrar. */
.lista-dispositivos .etiqueta-este {
    margin-left: var(--e2);
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--ambar);
    color: var(--sobre-ambar);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: lowercase;
}

.lista-dispositivos form { flex: 0 0 auto; }

.boton.chico {
    min-height: 0;
    padding: .35rem .75rem;
    font-size: .8125rem;
}