/* =========================================================================
   Sistema de Encomiendas — Hoja de estilos base
   -------------------------------------------------------------------------
   Un solo archivo de variables y componentes. Todas las pantallas del
   sistema se construyen con estas clases; no se escribe CSS suelto por
   vista. Si algo se repite dos veces, se convierte en clase aqui.

   Criterio de diseno (FASE 0, seccion 0.2.6): el personal tiene baja
   alfabetizacion digital. Por eso los botones son grandes, el texto no
   baja de 15px y los estados se distinguen por color Y por texto, nunca
   solo por color.
   ========================================================================= */

:root {
    /* Identidad: el cliente pidio rojo corporativo */
    --rojo:            #c1121f;
    --rojo-oscuro:     #8d0801;
    --rojo-claro:      #fdf0f0;

    --tinta:           #1a1a1a;
    --tinta-suave:     #5c5c5c;
    --tinta-tenue:     #8a8a8a;

    --fondo:           #f4f5f7;
    --superficie:      #ffffff;
    --borde:           #dfe1e6;
    --borde-fuerte:    #c2c6cc;

    /* Estados de encomienda — mismos colores en todo el sistema */
    --estado-registrado: #6b7280;
    --estado-transito:   #b45309;
    --estado-agencia:    #1d4ed8;
    --estado-entregado:  #15803d;
    --estado-desechado:  #7f1d1d;
    --estado-anulado:    #4b5563;

    --exito:   #15803d;
    --alerta:  #b45309;
    --peligro: #c1121f;

    --radio:      8px;
    --radio-sm:   5px;
    --sombra:     0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --sombra-alta: 0 8px 24px rgba(16, 24, 40, .12);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--rojo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Estructura ---------- */

.contenedor { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.contenedor-angosto { max-width: 780px; margin: 0 auto; padding: 1.5rem; }

/* El mostrador trabaja en 1920x1080. Las pantallas donde el cajero
   atiende con el cliente delante usan todo ese ancho: rodar la pantalla
   con una cola esperando es tiempo perdido en cada envio. */
.contenedor-ancho { max-width: 1760px; }

.barra {
    background: var(--rojo);
    color: #fff;
    box-shadow: var(--sombra);
}
.barra-interior {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.barra-marca {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}
.barra-marca:hover { text-decoration: none; }
.barra-menu { display: flex; gap: .25rem; margin-left: 1rem; flex: 1; }
.barra-menu a {
    color: rgba(255, 255, 255, .88);
    padding: .45rem .8rem;
    border-radius: var(--radio-sm);
    font-weight: 500;
}
.barra-menu a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.barra-menu a.activo { background: rgba(0, 0, 0, .18); color: #fff; }

.barra-usuario {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .92);
}
.barra-usuario strong { display: block; font-size: .9rem; color: #fff; }
.barra-usuario span { font-size: .75rem; color: rgba(255, 255, 255, .75); }

/* ---------- Tarjetas ---------- */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta-cabecera {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tarjeta-cabecera h2 { margin: 0; }
.tarjeta-cuerpo { padding: 1.25rem; }

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

.campo { margin-bottom: 1rem; }
.campo label {
    display: block;
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tinta-suave);
}
.campo .obligatorio { color: var(--rojo); }

.control {
    width: 100%;
    padding: .6rem .75rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    transition: border-color .15s, box-shadow .15s;
}
.control:focus {
    outline: none;
    border-color: var(--rojo);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, .12);
}
.control:disabled, .control[readonly] {
    background: #f1f2f4;
    color: var(--tinta-suave);
}
.control.error { border-color: var(--rojo); }

.mensaje-error {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--rojo);
}
.ayuda {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--tinta-tenue);
}

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

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.15rem;
    font-size: .95rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.boton:hover { background: #f7f8f9; text-decoration: none; }
.boton:focus-visible { outline: 3px solid rgba(193, 18, 31, .35); outline-offset: 1px; }

.boton-primario {
    color: #fff;
    background: var(--rojo);
    border-color: var(--rojo);
}
.boton-primario:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }

.boton-peligro { color: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo-claro); }

.boton-bloque { width: 100%; }
.boton-grande { padding: .85rem 1.4rem; font-size: 1.05rem; }
.boton-chico { padding: .35rem .7rem; font-size: .85rem; }

/* ---------- Tablas ---------- */

.tabla-scroll { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
    text-align: left;
    padding: .7rem .9rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--borde);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tinta-suave);
    white-space: nowrap;
}
.tabla td {
    padding: .7rem .9rem;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
}
.tabla tbody tr:hover { background: #fafbfc; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }

.vacio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--tinta-tenue);
}

/* ---------- Etiquetas de estado ---------- */

.etiqueta {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    white-space: nowrap;
}
.etiqueta-gris   { background: var(--estado-registrado); }
.etiqueta-verde  { background: var(--exito); }
.etiqueta-ambar  { background: var(--alerta); }
.etiqueta-roja   { background: var(--peligro); }
.etiqueta-azul   { background: var(--estado-agencia); }

.etiqueta-suave {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tinta-suave);
    background: #eef0f2;
    border: 1px solid var(--borde);
}

/* ---------- Avisos ---------- */

.aviso {
    padding: .8rem 1rem;
    border-radius: var(--radio-sm);
    border-left: 4px solid;
    margin-bottom: 1.25rem;
    font-size: .92rem;
}
.aviso-exito  { background: #f0fdf4; border-color: var(--exito);   color: #14532d; }
.aviso-error  { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo-oscuro); }
.aviso-alerta { background: #fffbeb; border-color: var(--alerta);  color: #78350f; }

/* ---------- Pantalla de ingreso ---------- */

.ingreso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        linear-gradient(160deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
}
.ingreso-caja {
    width: 100%;
    max-width: 400px;
    background: var(--superficie);
    border-radius: 12px;
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
.ingreso-cabecera {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
}
.ingreso-cabecera h1 {
    font-size: 1.4rem;
    margin-bottom: .25rem;
    color: var(--rojo);
    letter-spacing: .5px;
}
.ingreso-cabecera p { margin: 0; color: var(--tinta-tenue); font-size: .9rem; }
.ingreso-cuerpo { padding: 0 2rem 2rem; }
.ingreso-pie {
    padding: .9rem;
    text-align: center;
    font-size: .78rem;
    color: var(--tinta-tenue);
    background: #fafbfc;
    border-top: 1px solid var(--borde);
}

/* ---------- Pantalla de registro ---------- */

/* Dos columnas para que todo el formulario quepa sin desplazarse:
   es la pantalla donde el negocio gana o pierde tiempo. */
/* EL REGISTRO ENTRA DE UNA SOLA MIRADA.
   Tres columnas —quien va, que va, cuanto cuesta— porque en dos el
   formulario medía 1183 px y no cabía en 1080: el cajero tenía que
   rodar la pantalla para llegar al boton, en cada envio.
   La proporcion no es pareja: las personas son cinco campos, el dinero
   casi ninguno. */
.registro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1400px) {
    .registro { grid-template-columns: 1.05fr 1.05fr .9fr; }

    /* Y las tarjetas respiran menos: lo que se gana de alto se gana
       una vez por envio, todo el dia. */
    .registro .tarjeta-cuerpo { padding: .85rem 1rem; }
    .registro .campo { margin-bottom: .6rem; }
    .registro h3 { margin-bottom: .45rem; }
    .registro .precio { padding: .7rem; }

    /* Las unidades son lo unico que crece sin techo: un envio puede
       llevar ocho. A partir de cuatro la lista rueda por dentro, y asi
       el boton de registrar nunca se va de la pantalla. */
    #lista-bultos { max-height: 46vh; overflow-y: auto; }
}

/* El precio: grande, calculado, imposible de editar (regla R-T4) */
.precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    background: #fafbfc;
}
.precio-etiqueta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--tinta-tenue);
}
.precio-monto {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tinta-tenue);
    font-variant-numeric: tabular-nums;
}
.precio-nota { font-size: .82rem; color: var(--tinta-tenue); }

.precio.precio-ok {
    border-style: solid;
    border-color: var(--exito);
    background: #f0fdf4;
}
.precio.precio-ok .precio-monto { color: var(--exito); }

.precio.precio-rechazado {
    border-style: solid;
    border-color: var(--rojo);
    background: var(--rojo-claro);
}
.precio.precio-rechazado .precio-monto { font-size: 1.5rem; color: var(--rojo); }

/* Las dos formas de pago: decision obligatoria y bien visible (R-C1) */
.opciones-pago { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.opcion { cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }

.opcion-caja {
    display: block;
    padding: .8rem .75rem;
    text-align: center;
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: #fff;
    transition: border-color .15s, background .15s;
}
.opcion-caja strong { display: block; font-size: .92rem; letter-spacing: .3px; }
.opcion-caja small { display: block; margin-top: .2rem; font-size: .74rem; color: var(--tinta-tenue); line-height: 1.3; }

.opcion:hover .opcion-caja { border-color: var(--tinta-tenue); }

.opcion input:checked + .opcion-caja {
    border-color: var(--rojo);
    background: var(--rojo-claro);
}
.opcion input:checked + .opcion-caja strong { color: var(--rojo); }
.opcion input:focus-visible + .opcion-caja { outline: 3px solid rgba(193, 18, 31, .35); outline-offset: 1px; }

.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Detalle de encomienda ---------- */

.codigo-grande {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: "Consolas", "Courier New", monospace;
}

.acciones-impresion { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Confirmación de cobro antes de entregar (regla dura 2) */
.confirmar-cobro {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem;
    border: 2px solid var(--rojo);
    border-radius: var(--radio);
    background: var(--rojo-claro);
    cursor: pointer;
}
.confirmar-cobro input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.confirmar-cobro strong { display: block; font-size: 1rem; }
.confirmar-cobro small { display: block; margin-top: .15rem; font-size: .8rem; color: var(--tinta-suave); }

.dato { margin-bottom: .8rem; }
.dato dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--tinta-tenue);
    text-transform: uppercase;
}
.dato dd { margin: .1rem 0 0; font-size: .95rem; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
    position: relative;
    padding: 0 0 1rem 1.4rem;
    border-left: 2px solid var(--borde);
}
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea-tiempo li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: .35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rojo);
}

/* ---------- Página pública de rastreo ----------
   Es la única parte del sistema que ve un cliente, así que da la cara
   por la empresa. Más aire y letra más grande que el resto: aquí no
   hay un cajero con prisa, hay alguien preocupado por su paquete. */

body.publico { background: var(--fondo); }

.publico-cabecera { background: var(--rojo); color: #fff; }
.publico-interior {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.publico-marca { font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; }
.publico-acceso { color: rgba(255, 255, 255, .85); font-size: .82rem; }
.publico-acceso:hover { color: #fff; }

.publico-cuerpo { max-width: 720px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

.publico-caja {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}
.publico-caja h1 { font-size: 1.5rem; }
.publico-caja h2 { font-size: 1.05rem; }

.control-grande { font-size: 1.15rem; padding: .75rem .9rem; letter-spacing: 1px; }

.publico-estado {
    padding: 1rem;
    background: #fafbfc;
    border-radius: var(--radio-sm);
    font-size: 1.02rem;
    line-height: 1.5;
}

.publico-pie {
    padding: 1.5rem;
    text-align: center;
    font-size: .8rem;
    color: var(--tinta-tenue);
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Puerta y flota ----------
   La pantalla de puerta la usa alguien de pie, a veces con guantes y
   con un camión esperando. Todo más grande de lo normal. */

.camion { border-left: 4px solid var(--rojo); }

.camion-placa {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: "Consolas", "Courier New", monospace;
}
.camion-datos { font-size: 1rem; color: var(--tinta-suave); margin-top: .15rem; }

.boton-puerta {
    padding: 1.1rem 1.8rem;
    font-size: 1.05rem;
    letter-spacing: .5px;
}

/* La línea de paradas de un viaje */
.paradas { list-style: none; margin: 0; padding: 0; }
.paradas li {
    position: relative;
    padding: .5rem 0 .9rem 1.6rem;
    border-left: 2px solid var(--borde);
}
.paradas li:last-child { border-left-color: transparent; }
.paradas li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .8rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--borde-fuerte);
}
.paradas li.hecha::before { background: var(--exito); border-color: var(--exito); }
.paradas li.aqui::before { background: var(--rojo); border-color: var(--rojo); }
.paradas li.omitida::before { background: var(--borde-fuerte); border-color: var(--borde-fuerte); }
.paradas li.omitida .parada-sede { text-decoration: line-through; color: var(--tinta-tenue); }

.parada-sede { font-weight: 600; }
.parada-horas { font-size: .82rem; color: var(--tinta-suave); }

/* ---------- Tablero e informes ---------- */

.cifra {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    margin: .15rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Barras dibujadas con CSS, sin librerías: el sistema tiene que
   funcionar aunque la sucursal se quede sin internet. */
.barra-dato {
    position: relative;
    height: 18px;
    background: #eef0f2;
    border-radius: 3px;
    overflow: hidden;
}
.barra-dato span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--exito);
    border-radius: 3px;
    transition: width .2s;
}
.barra-dato span.gris { background: var(--borde-fuerte); }

.leyenda { font-size: .78rem; color: var(--tinta-suave); display: flex; align-items: center; gap: .35rem; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.punto-verde { background: var(--exito); }
.punto-gris { background: var(--borde-fuerte); margin-left: .6rem; }

/* ---------- Utilidades ---------- */

.fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 200px; }

/* DNI y nombre comparten linea, pero no a partes iguales: un DNI son
   ocho digitos y un nombre puede ser "Ing. Maximiliano Hernandez". */
.fila-dni > *:first-child { flex: 0 1 150px; min-width: 120px; }

.entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.der { text-align: right; }
.centro { text-align: center; }
.tenue { color: var(--tinta-tenue); }
.suave { color: var(--tinta-suave); }
.chico { font-size: .85rem; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1rem; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 1.75rem; }

/* ---------- El esquema de una ruta ----------
   Lo dibuja el servidor en SVG (EsquemaRuta), sin librerias: cajas y
   flechas con la carga que espera en cada parada. */

.esquema-ruta {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Los bultos del envio ----------
   Cada uno con su tamano o sus medidas. Se ven separados para que el
   cajero no confunda un bulto con otro. */

.bulto {
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: .7rem;
    margin-bottom: .7rem;
    background: #fbfbfc;
}

.bulto .bulto-numero { font-size: .85rem; color: var(--tinta-suave); }
.bulto .bulto-aviso { margin-top: .4rem; min-height: 1rem; }
.bulto label { font-size: .8rem; }

/* ---------- El croquis de Lima ----------
   Las sedes sobre el mapa real de distritos. Sin librerias: es un SVG
   que arma Blade y al que el JavaScript solo le cambia el trazo y el
   zoom. */

.mapa-lima {
    display: block;
    width: 100%;
    height: auto;
    background: #dfe8f0;
    border-radius: 6px;
}

/* El circulo crece un poco al pasar por encima, para saber cual se va
   a marcar antes de hacer clic. El almacen no: no se marca. */
.mapa-lima .sede circle { transition: r .12s ease; }

/* El mapa del Peru: la imagen del cliente con las sedes encima,
   ubicadas por porcentaje (su latitud y longitud reales). */

.mapa-peru {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}

.mapa-peru img {
    display: block;
    width: 100%;
    height: auto;
}

.mapa-peru .marcador {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    pointer-events: auto;
}

.mapa-peru .marcador-codigo {
    background: #ffffff;
    border: 2px solid #33475b;
    border-radius: 999px;
    padding: .05rem .45rem;
    font-size: .78rem;
    font-weight: 700;
    color: #33475b;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* El color de una sede dice CUÁNTO LLEVA ESPERANDO lo más viejo que
   hay ahí por recoger — no si hay algo o no, que era un sí/no que no
   servía para decidir a qué sede mandar el camión. Mismos umbrales y
   mismos colores que los camiones: verde en hora, ámbar demorado,
   rojo muy demorado. */

.mapa-peru .espera-verde .marcador-codigo {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.mapa-peru .espera-ambar .marcador-codigo {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
}

.mapa-peru .espera-roja .marcador-codigo {
    background: #c1121f;
    border-color: #c1121f;
    color: #ffffff;
}

.mapa-peru .es-almacen .marcador-codigo {
    background: #1f4e79;
    border-color: #1f4e79;
    color: #ffffff;
}

.mapa-peru .marcador-carga {
    font-size: .72rem;
    font-weight: 700;
    color: #5a4a2f;
    background: rgba(255, 255, 255, .85);
    border-radius: 4px;
    padding: 0 .25rem;
    white-space: nowrap;
}

/* El color, puesto en la propia pastilla: cada mitad del dia tiene el
   suyo —lo que espera para subir no lleva parado lo mismo que lo que
   hay que bajarle— y el marcador lleva las dos dentro. */

.mapa-peru .marcador-codigo.espera-verde {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.mapa-peru .marcador-codigo.espera-ambar {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
}

.mapa-peru .marcador-codigo.espera-roja {
    background: #c1121f;
    border-color: #c1121f;
    color: #ffffff;
}

.mapa-peru .marcador-codigo.es-almacen {
    background: #1f4e79;
    border-color: #1f4e79;
    color: #ffffff;
}

/* ---------- El mapa del Peru tambien se toca ----------

   Era una lamina: se veia la carga de cada ciudad y no habia forma de
   mandar un camion a buscarla. Ahora se marcan las sedes igual que en
   el croquis de Lima, y el recorrido se dibuja encima. */

/* El lienzo del trazo va justo encima de la imagen, con el mismo 0-100
   en el que se colocan las sedes. `preserveAspectRatio="none"` en el
   SVG es lo que hace que las dos rejillas coincidan. */
.mapa-peru .trazos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* el clic es de las sedes, no del trazo */
    z-index: 1;
}

/* Y las sedes, por encima del trazo. */
.mapa-peru .marcador { z-index: 2; }

/* Las dos mitades del dia, una cada vez. Cada una es una columna, como
   lo era el marcador entero antes de partirse. */
.mapa-peru .vista-repartir,
.mapa-peru .vista-recoger {
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.mapa-peru .vista-repartir { display: flex; }
.mapa-peru .vista-recoger  { display: none; }

.mapa-peru.modo-recoger .vista-repartir { display: none; }
.mapa-peru.modo-recoger .vista-recoger  { display: flex; }

/* El numero de orden, en la esquina de la pastilla: dice por donde va
   el camion en el recorrido que se esta armando. */
.mapa-peru .orden {
    position: absolute;
    top: -.45rem;
    right: -.55rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #c0392b;
    color: #ffffff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    z-index: 3;
}

/* La sede crece un poco al pasar por encima: se ve cual se va a marcar
   antes de hacer clic. El almacen no, que no se marca. */
.mapa-peru .sede:not([data-almacen="1"]):hover .marcador-codigo {
    transform: scale(1.12);
    transition: transform .12s ease;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 900px) {
    .registro { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .contenedor, .contenedor-angosto { padding: 1rem; }
    .opciones-pago { grid-template-columns: 1fr; }
    .barra-interior { height: auto; padding: .6rem 1rem; flex-wrap: wrap; gap: .5rem; }
    .barra-menu { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
    .fila > * { min-width: 100%; }
}

/* ---------- El puesto de mando: plegables y popup del viaje ----------
   El encargado de rutas trabaja sobre el mapa. Lo que se consulta de
   vez en cuando se pliega; lo que se usa todo el rato —armar el
   viaje— flota encima y se va llenando con cada clic. */

.plegable {
    flex: 1 1 260px;
    min-width: 240px;
    background: var(--panel, #fff);
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
}

.plegable-ancho { flex: 1 1 100%; }

.plegable > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    cursor: pointer;
    user-select: none;
    font-size: .95rem;
}

.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: '▸'; color: #8a94a0; margin-right: .1rem; }
.plegable[open] > summary::before { content: '▾'; }
.plegable[open] > summary { border-bottom: 1px solid var(--borde); }
.plegable > summary:hover { background: #f7f9fb; }

/* El popup: pegado abajo a la derecha, encima de todo, sin tapar el
   mapa. En pantallas chicas ocupa el ancho y se queda abajo. */
.popup-viaje {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 340px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--rojo, #c1121f);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    z-index: 50;
}

.popup-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    background: var(--rojo, #c1121f);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.popup-cabecera .boton { background: rgba(255, 255, 255, .15); color: #fff; border-color: transparent; }
.popup-cabecera .chico { color: rgba(255, 255, 255, .85); }

/* EL FORMULARIO ES LA COLUMNA, NO EL POPUP.
   Aqui estaba el fallo de verdad: el popup tiene UN SOLO HIJO, el
   <form>, y la cabecera, el cuerpo y el pie cuelgan de el. Asi que la
   columna flex del popup gobernaba un unico elemento, y las tres
   franjas de dentro se apilaban a su aire y se salian por abajo.
   Habia que repetir la columna aqui (M43.b). */
.popup-viaje > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* EL CUERPO RUEDA POR DENTRO, no se desborda por fuera.
   `min-height: 0` no es un adorno: un hijo de flex trae `min-height:
   auto`, que le impide encogerse por debajo de su contenido. Con eso
   puesto, `overflow-y: auto` no servia de nada -- el cuerpo crecia
   hasta 726 px dentro de una caja de 184 y el boton de "Que salga"
   terminaba fuera de la pantalla, sin forma de pulsarlo (M43.b). */
.popup-cuerpo {
    padding: .7rem .8rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* La franja de la zona cargada NO crece: es una linea fija arriba. Si
   comparte el reparto con el cuerpo, le roba alto al que si rueda. */
.popup-viaje #paso-carga { flex: 0 0 auto; }

/* Y el pie tampoco: el boton de enviar tiene que quedarse anclado
   abajo, siempre visible, pase lo que pase con el contenido. */
.popup-pie {
    padding: .7rem .8rem;
    border-top: 1px solid var(--borde);
    display: grid;
    gap: .4rem;
    flex: 0 0 auto;
}

.popup-pie .boton[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 780px) {
    .popup-viaje {
        right: .6rem;
        left: .6rem;
        bottom: .6rem;
        width: auto;
        max-height: 60vh;
    }
}

/* ---------- El viaje, paso a paso ----------
   Para quien entra por primera vez: dónde está el viaje y qué toca
   ahora. Se lee de un vistazo, sin tener que preguntarle a nadie. */

.pasos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.paso {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .6rem .4rem;
    border: 2px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e6e9ed;
    color: #5c6672;
    font-weight: 700;
    font-size: .9rem;
}

.paso-titulo { font-weight: 700; font-size: .95rem; }
.paso-quien  { font-size: .78rem; color: #8a94a0; }

.paso.hecho { border-color: #9ccaa9; background: #f4faf6; }
.paso.hecho .paso-numero { background: #15803d; color: #fff; }

.paso.ahora {
    border-color: var(--rojo, #c1121f);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, .12);
}
.paso.ahora .paso-numero { background: var(--rojo, #c1121f); color: #fff; }
.paso.ahora .paso-titulo { color: var(--rojo, #c1121f); }

/* ── EL PATIO DEL ALMACÉN CENTRAL ────────────────────────────────
   Los camiones que están en casa. Vivió dentro del croquis SVG
   hasta el 2026-07-30, dibujado en coordenadas fijas colgando del
   almacén: sus cajas caían encima de la sede SMP y del propio ALM,
   y solo cabían ocho de los quince. Un patio no es un lugar del
   mapa, es una lista — y una lista se dibuja como una lista. */

.patio {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .8rem .9rem;
}

.camion {
    flex: 0 0 auto;
    width: 108px;
    padding: .45rem .5rem .4rem;
    border: 1px solid var(--borde, #d9dee3);
    border-left: 4px solid #b9c2cc;
    border-radius: 5px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.camion:hover  { border-color: #8fa0b0; background: #fbfcfd; }
.camion:focus  { outline: 2px solid var(--rojo, #c1121f); outline-offset: 1px; }

.camion-placa {
    display: block;
    font-weight: 700;
    font-size: .82rem;
    color: #33475b;
    letter-spacing: .01em;
}

/* Cuánto lleva encima, en una barra que se lee sin números. */
.camion-barra {
    display: block;
    height: 5px;
    margin: .3rem 0 .25rem;
    border-radius: 3px;
    background: #eceff2;
    overflow: hidden;
}

.camion-barra > span {
    display: block;
    height: 100%;
    background: #b9c2cc;
}

.camion-pie { display: block; font-size: .7rem; color: #8a94a0; }

.camion.lleno            { border-left-color: #15803d; }
.camion.lleno .camion-barra > span { background: #15803d; }
.camion.lleno .camion-pie { color: #15803d; font-weight: 700; }

.camion.a-medias         { border-left-color: #b45309; }
.camion.a-medias .camion-barra > span { background: #b45309; }

.camion.vacio            { background: #f7f9fa; }
.camion.vacio .camion-placa { color: #5c6672; }

/* Los puntitos de la leyenda del patio. */
.punto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    vertical-align: -1px;
    background: #b9c2cc;
}

.punto.lleno    { background: #15803d; }
.punto.a-medias { background: #b45309; }
.punto.vacio    { background: #d3dae0; }

/* ── LOS DOS MOMENTOS DEL DÍA ────────────────────────────────────
   El camión sale a REPARTIR y vuelve RECOGIENDO. El croquis dibuja
   los dos y enseña uno: mezclarlos obligaba al encargado a adivinar
   de qué mitad del viaje hablaba cada número. */

.modos {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.modo {
    flex: 1 1 0;
    padding: .55rem .8rem;
    border: 1px solid var(--borde, #d9dee3);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.modo:hover { background: #fbfcfd; border-color: #8fa0b0; }
.modo:focus { outline: 2px solid var(--rojo, #c1121f); outline-offset: 1px; }

.modo-titulo { display: block; font-weight: 700; font-size: .95rem; color: #5c6672; }
.modo-nota   { display: block; font-size: .75rem; color: #8a94a0; }

.modo.activo {
    border-color: var(--rojo, #c1121f);
    background: #fff5f5;
    box-shadow: inset 0 0 0 1px var(--rojo, #c1121f);
}

.modo.activo .modo-titulo { color: var(--rojo, #c1121f); }
.modo.activo .modo-nota   { color: #7a5c5c; }

/* Los dos dibujos vienen del servidor; solo se enciende uno. */
.mapa-lima .vista-recoger  { display: none; }
.mapa-lima.modo-recoger .vista-repartir { display: none; }
.mapa-lima.modo-recoger .vista-recoger  { display: inline; }

/* Y el pie explica el modo que se está mirando. */
.solo-recoger { display: none; }
body.viendo-recoger .solo-repartir { display: none; }
body.viendo-recoger .solo-recoger  { display: inline; }

/* ── EL CROQUIS DE LIMA, CON EL MAPA REAL ────────────────────────
   Los 38 distritos del casco urbano (IGN), convertidos una vez a
   public/img/lima-distritos.svg y servidos en local: el sistema no
   pide nada por internet. */

.croquis-caja {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #dfe8f0;

    /* NADA DE PELLIZCAR PARA AMPLIAR. En esta pantalla se marca el
       recorrido tocando las sedes, y un gesto mal interpretado movería
       el mapa en mitad de un viaje a medio armar. El zoom va con los
       botones, que son deliberados y reversibles. */
    touch-action: pan-y;
}

.croquis-zoom {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.croquis-zoom button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--borde, #d9dee3);
    border-radius: 5px;
    background: rgba(255, 255, 255, .94);
    color: #33475b;
    font: 700 1.1rem/1 inherit;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.croquis-zoom button:hover  { background: #fff; border-color: #8fa0b0; }
.croquis-zoom button:active { background: #eef2f5; }
.croquis-zoom button:focus  { outline: 2px solid var(--rojo, #c1121f); outline-offset: 1px; }

/* El último es el de "ver todo": más discreto que los dos de zoom. */
.croquis-zoom button:last-child { font-size: .95rem; color: #7a8894; }

/* El dibujo se amplía desde el centro, con una transición corta para
   que el ojo siga dónde estaba mirando. */
#lente { transition: transform .18s ease-out; }

/* ── LA PANTALLA DE AJUSTES DEL MAPA ─────────────────────────────
   El mapa a la izquierda para arrastrar, los numeros a la derecha
   para afinar. Arrastrar es comodo pero no es preciso, y hay quien
   no puede usar el raton: las dos formas hacen lo mismo. */

.ajustes-mapa {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .ajustes-mapa { grid-template-columns: 1fr; }
}

/* La sede que se esta moviendo se despega del mapa. */
.sede-editable .bulto { transition: r .1s ease, filter .1s ease; }
.sede-editable:hover .bulto,
.sede-editable:focus .bulto { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.sede-editable:focus { outline: none; }
.sede-editable:focus .bulto { stroke: var(--rojo, #c1121f); stroke-width: .8; }

/* Mientras se arrastra, el cursor lo dice. */
.sede-editable:active,
#mira:active { cursor: grabbing; }

/* ── LA LEYENDA DEL MAPA, PLEGADA ────────────────────────────────
   Vivia dentro del SVG, siempre abierta, y tapaba un tercio de Lima.
   Se consulta una vez —cuando alguien no sabe que significa un
   color— y despues estorba: por eso ahora se pliega. */

.leyenda-mapa {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    max-width: min(340px, calc(100% - 5rem));
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--borde, #d9dee3);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    font-size: .78rem;
    color: #5c6672;
}

.leyenda-mapa > summary {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .6rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #33475b;
    white-space: nowrap;
}

.leyenda-mapa > summary::-webkit-details-marker { display: none; }
.leyenda-mapa > summary::after { content: "▸"; margin-left: .2rem; color: #8a94a0; }
.leyenda-mapa[open] > summary::after { content: "▾"; }
.leyenda-mapa[open] > summary { border-bottom: 1px solid var(--borde, #d9dee3); }

.leyenda-cuerpo { padding: .5rem .6rem .6rem; }

.leyenda-titulo {
    margin: 0 0 .4rem;
    font-weight: 700;
    color: #33475b;
}

.leyenda-mapa ul { margin: 0; padding: 0; list-style: none; }

.leyenda-mapa li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .13rem 0;
    line-height: 1.35;
}

/* Los puntos de color: los mismos que el croquis usa en las sedes. */
.muestra {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #33475b;
}

.muestra.verde { background: #15803d; border-color: #15803d; }
.muestra.ambar { background: #b45309; border-color: #b45309; }
.muestra.roja  { background: #c1121f; border-color: #c1121f; }
.muestra.azul  { background: #1f4e79; border-color: #1f4e79; }

/* En el resumen van mas juntos: son una miniatura, no una lista. */
.leyenda-mapa > summary .muestra { width: 10px; height: 10px; }

/* ── EL JOYSTICK DEL MAPA ────────────────────────────────────────
   Para pasear el croquis cuando esta acercado. Con botones, por lo
   mismo que el zoom: aqui se marca el recorrido tocando las sedes, y
   un arrastre mal interpretado moveria el mapa en mitad de un viaje
   a medio armar. */

.croquis-joystick {
    position: absolute;
    right: .6rem;
    bottom: 8.2rem;
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 2px;
}

.croquis-joystick button {
    border: 1px solid var(--borde, #d9dee3);
    background: rgba(255, 255, 255, .94);
    color: #5c6672;
    font: 700 .72rem/1 inherit;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

    /* Sin menu de contexto ni seleccion al mantener pulsado. */
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.croquis-joystick button:hover  { background: #fff; border-color: #8fa0b0; color: #33475b; }
.croquis-joystick button:active { background: #eef2f5; }
.croquis-joystick button:focus  { outline: 2px solid var(--rojo, #c1121f); outline-offset: 1px; }

.croquis-joystick .arriba { grid-area: 1 / 2; }
.croquis-joystick .izq    { grid-area: 2 / 1; }
.croquis-joystick .centro { grid-area: 2 / 2; font-size: .95rem; color: #8a94a0; }
.croquis-joystick .der    { grid-area: 2 / 3; }
.croquis-joystick .abajo  { grid-area: 3 / 2; }

/* En pantallas chicas el joystick estorba mas de lo que ayuda: el
   mapa cabe entero y no hay por donde pasear. */
@media (max-width: 700px) {
    .croquis-joystick { display: none; }
}


/* ---------- El popup de la clave de recojo ----------
   La clave vivia en el formulario, en claro, mientras el cajero atendia
   y mientras la cola miraba por encima del hombro. Es un secreto: solo
   debe existir el momento en que el remitente lo teclea.

   Se abre al registrar, con `showModal()`: el navegador lo centra, lo
   oscurece por detras y atrapa el tabulador dentro. Sin librerias. */
.popup-clave {
    border: 2px solid var(--rojo, #c1121f);
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    max-width: 420px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.popup-clave::backdrop { background: rgba(15, 20, 28, .55); }

/* Cuatro digitos, grandes y separados: el remitente los teclea de pie,
   al otro lado del mostrador, y tiene que verlos. */
.clave-grande {
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: .5rem;
    padding: .5rem;
    font-weight: 700;
}

.popup-clave-botones {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.popup-clave-botones .boton { flex: 1 1 auto; }

/* Cuando la clave ya esta puesta, el aviso del formulario lo dice. */
#estado-clave.puesta { color: var(--verde, #16803c); font-weight: 600; }


/* ---------- El ultimo remitente ----------
   Se ofrece, no se impone: por eso es un boton y no unos campos ya
   rellenos. Ver el comentario de registro.js. */
.ultimo-remitente {
    display: flex;
    gap: .35rem;
    margin-bottom: .7rem;
}

.ultimo-remitente > button {
    font: inherit;
    cursor: pointer;
    border: 1px dashed var(--borde);
    border-radius: 8px;
    background: #f7f9fb;
    color: inherit;
    padding: .35rem .7rem;
    text-align: left;
    line-height: 1.2;
}

.ultimo-remitente > button:hover { background: #eef2f6; border-style: solid; }

#usar-remitente { flex: 1 1 auto; display: block; }
#usar-remitente .chico { display: block; color: var(--tinta-tenue); }
#usar-remitente strong { font-size: .95rem; }

#olvidar-remitente { flex: 0 0 auto; color: var(--tinta-tenue); }

.ultimo-remitente kbd {
    font: inherit;
    font-size: .75em;
    border: 1px solid var(--borde);
    border-radius: 3px;
    padding: 0 .25em;
    background: #fff;
}

/* ---------- La pantalla del chofer ----------
   Se lee en una cabina, con el motor en marcha y alguien esperando.
   Una sola instruccion, grande, y el resto como lista de tareas.
   Ver el comentario de flota/mi-viaje.blade.php. */

.ahora-chofer { border-width: 2px; }
.ahora-chofer.ahora-recoger  { border-color: var(--rojo, #c1121f); }
.ahora-chofer.ahora-llegue   { border-color: var(--rojo, #c1121f); }
.ahora-chofer.ahora-arrancar { border-color: var(--verde, #2e7d32); }

.ahora-etiqueta {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--tinta-tenue);
}

.ahora-titulo {
    margin: .2rem 0 .3rem;
    font-size: 1.9rem;
    line-height: 1.1;
}

.ahora-detalle { margin: 0 0 1rem; }

/* El boton de la accion de ahora: grande de verdad. Se pulsa de pie,
   con una mano, a veces con guantes. */
.ahora-boton {
    font-size: 1.25rem;
    padding: 1rem;
}

/* Las paradas, como lista de tareas */
.paradas-chofer {
    list-style: none;
    margin: 0;
    padding: 0;
}

.paradas-chofer li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borde);
}

.paradas-chofer li:last-child { border-bottom: none; }

.parada-marca {
    flex: 0 0 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--borde);
    display: grid;
    place-items: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--tinta-tenue);
}

.paradas-chofer .hecha .parada-marca {
    background: var(--verde, #2e7d32);
    border-color: transparent;
    color: #fff;
}

.paradas-chofer .aqui .parada-marca {
    background: var(--rojo, #c1121f);
    border-color: transparent;
    color: #fff;
}

.paradas-chofer .aqui .parada-sede { font-weight: 700; }
.paradas-chofer .hecha .parada-sede { color: var(--tinta-tenue); }
.paradas-chofer .omitida .parada-sede { text-decoration: line-through; color: var(--tinta-tenue); }

.parada-sede { flex: 1 1 auto; }

.parada-carga { flex: 0 0 auto; white-space: nowrap; }
.parada-carga .baja { font-weight: 700; margin-right: .5rem; }
.parada-carga .sube { font-weight: 700; color: var(--verde, #2e7d32); }

/* ---------- Los tres modos del viaje ----------
   Reparte y recoge · Solo reparto · Solo recojo. Se eligen en el mismo
   sitio y se ve cual esta puesto: antes eran dos interruptores sueltos y
   el tercer modo se conseguia NO tocando uno de ellos. */

.modos-viaje {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    margin-top: .8rem;
    padding: .25rem;
    background: #eef2f6;
    border-radius: 8px;
}

.modos-viaje .modo {
    font: inherit;
    font-size: .82rem;
    line-height: 1.15;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tinta-tenue);
    padding: .45rem .2rem;
    text-align: center;
}

.modos-viaje .modo:hover { background: rgba(255, 255, 255, .6); }

/* El puesto: blanco sobre el gris, como una pestaña elegida. */
.modos-viaje .modo.activo {
    background: #fff;
    border-color: var(--borde);
    color: var(--tinta);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ---------- El banco de pruebas del administrador ----------
   Las cuatro pantallas del sistema a la vez, en el orden en que pasa un
   paquete: mostrador, rutas, almacen, chofer. Se lee de izquierda a
   derecha y de arriba abajo. */

.banco {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.banco-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.banco-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--borde);
    background: #f7f9fb;
}

.banco-cabecera .control {
    width: auto;
    max-width: 45%;
    padding: .2rem .4rem;
    font-size: .8rem;
}

/* El alto: dos filas tienen que caber en una pantalla de 1080 sin rodar
   la pagina entera. Cada recuadro rueda por dentro, que es lo suyo. */
.banco-panel iframe {
    width: 100%;
    /* Alto de trabajo, no de vistazo: aqui se pulsan botones de verdad
       (M46.b). Que la pagina ruede es mejor que un recuadro donde no se
       llega a lo de abajo. */
    height: 78vh;
    min-height: 560px;
    border: 0;
    display: block;
    background: #fff;
}

.banco-pie {
    padding: .35rem .7rem;
    border-top: 1px solid var(--borde);
    background: #f7f9fb;
}

@media (max-width: 1100px) {
    .banco { grid-template-columns: 1fr; }
}

/* La franja del banco de pruebas: quien esta actuando como otro tiene
   que verlo sin buscarlo. Va arriba del todo, fija y sin cerrar. */
.franja-pruebas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: .3rem .8rem;
    background: #7c3aed;
    color: #fff;
    font-size: .78rem;
    text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

/* El sitio que ocupa, para que no tape la barra de arriba. */
body:has(.franja-pruebas) { padding-top: 1.6rem; }

/* El nombre de la sede, entero, en la linea chica del chofer: "San
   Martin de Porres" es mas largo que "SMP" y tiene que caber igual. */
.ahora-etiqueta {
    white-space: normal;
    line-height: 1.25;
}