/* =========================================================================
   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);
}
/* ---------- La barra de arriba ----------

   Llevaba `height: 58px`, un alto fijo. Con la ventana entera cabia
   todo y no se notaba; en una ventana a medias —o dentro de uno de los
   recuadros del banco de pruebas— las secciones se salian por la
   derecha y se llevaban por delante "Almacen central", "Viajes",
   "Puerta" y hasta el boton de Salir, mientras el nombre de quien
   entro se partia en dos y se desbordaba por arriba del rojo.

   Ahora el alto es un MINIMO: cuando todo cabe la barra mide lo mismo
   que siempre, y cuando no, crece una linea en vez de esconder medio
   menu fuera de la pantalla. */
.barra-interior {
    max-width: 1200px;
    margin: 0 auto;
    padding: .35rem 1.5rem;
    min-height: 58px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 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;
    min-width: 0;

    /* Once secciones no caben en una fila de 1200px sin partirse. Antes
       de esto pasaban dos cosas, las dos malas: sin `min-width: 0` el
       menu empujaba al usuario FUERA de la pantalla y se comia el boton
       de Salir; con el, el menu se encogia pero sus enlaces seguian
       pintandose encima del nombre.

       Que baje de linea. La barra crece una fila cuando hace falta y
       ninguna seccion se pierde ni se pisa; con la ventana entera todo
       sigue cabiendo en una sola. */
    flex-wrap: wrap;
    row-gap: .2rem;
}

/* Los nombres de dos palabras —"En agencia", "Almacen central"— no
   caben en una linea y se parten en dos. Los recuadros SI se estiran
   todos al mismo alto (es lo que hace un flex por su cuenta), asi que
   el fondo del activo y el del raton quedan parejos; lo que se
   descuadraba era el texto, que empezaba arriba y dejaba a los de una
   sola linea pegados al borde mientras los de dos ocupaban el centro.
   Centrandolo dentro de su recuadro, todos los nombres caen sobre la
   misma raya. */
.barra-menu a {
    color: rgba(255, 255, 255, .88);
    padding: .45rem .8rem;
    border-radius: var(--radio-sm);
    font-weight: 500;

    display: flex;
    align-items: center;      /* arriba y abajo */
    justify-content: center;  /* y a los lados, para la segunda linea */
    text-align: center;
    line-height: 1.2;
}
.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;
    /* Que no lo aplaste el menu: aplastado, el nombre se partia en dos
       lineas y el boton de Salir se iba fuera del borde. */
    flex: 0 0 auto;
    margin-left: auto;
    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);
}

/* ---------- Las cuentas de la demostracion ----------

   Solo salen en la copia que se enseña a desconocidos. En la
   instalacion del cliente este bloque no llega a dibujarse. */

.ingreso-cuentas {
    padding: 1rem 2rem 1.2rem;
    border-top: 1px dashed var(--borde);
    background: #fbfcfd;
}

.ingreso-cuentas-titulo {
    margin: 0 0 .6rem;
    font-size: .82rem;
    color: var(--tinta-tenue);
}

.cuenta-demo {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .7rem;
    margin-bottom: .35rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s ease, background .12s ease;
}

.cuenta-demo:hover {
    border-color: #1f4e79;
    background: #f2f7fb;
}

.cuenta-demo-quien {
    display: block;
    font-weight: 700;
    font-size: .88rem;
    color: #1f3a5f;
}

/* Lo que ve ese oficio: es lo que hace que el que prueba entienda por
   que hay siete cuentas y no una. */
.cuenta-demo-ve {
    display: block;
    font-size: .76rem;
    color: var(--tinta-tenue);
    margin-top: .1rem;
}

/* El usuario y la clave, en monoespaciada: se leen para teclearlas a
   mano si alguien prefiere no usar el atajo. */
.cuenta-demo-clave {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: .74rem;
    color: #5a4a2f;
    margin-top: .25rem;
}

.ingreso-cuentas-nota {
    margin: .7rem 0 0;
    font-size: .74rem;
    color: var(--tinta-tenue);
}

/* ---------- 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; }
    .fila > * { min-width: 100%; }

    /* ---------- LO QUE NO DEBE APILARSE ----------

       `.fila > *` estira a ancho completo todo lo que haya dentro de una
       fila. Nacio para los formularios —dos campos uno debajo del otro
       se leen mejor en un telefono— y arrasa con lo que no lo es: los
       tres botones para cambiar de mapa ocupaban 148 px apilados, casi
       lo mismo que la barra de navegacion, y empujaban el mapa fuera de
       la pantalla.

       Medido en un 375: antes del mapa habia 475 px de cosas. */
    .vistas > * { min-width: auto; }
    .vistas { flex-wrap: wrap; gap: .4rem; }
    .vistas .boton { padding: .5rem .8rem; font-size: .88rem; }

    /* La descripcion de la pantalla: en un telefono el titulo ya dice
       lo que es, y esas dos lineas cuestan 40 px de mapa. */
    .entre > div > p.suave { display: none; }

    /* Los dos botones del dia siguen enormes —se tocan con el pulgar—
       pero sin la explicacion debajo, que solo hace falta la primera
       vez. */
    .modos .modo-nota { display: none; }
    .modos .modo { padding: .55rem .6rem; }

    /* ---------- LA BARRA, EN UN CELULAR ----------

       Esta regla existía y NO funcionaba, y el porqué merece quedar
       escrito: `.barra-menu` lleva `flex: 1` en su regla de arriba, y
       eso pone la base flexible en CERO. Un `width: 100%` no puede
       contra eso — el menú se encogía a lo que sobrara después del
       logo y del nombre del usuario, que en un teléfono son cinco o
       diez píxeles. Los enlaces seguían dibujados, fuera de la
       pantalla, sin forma de llegar a ellos.

       Medido en un 375 de ancho: el cajero tenía SIETE secciones
       —Inicio, Registrar, Buscar, En agencia, Caja, Viajes, Puerta—
       metidas en 10 píxeles.

       Se arregla con `flex: 0 0 100%`, que sí manda sobre la base. */

    .barra-interior {
        height: auto;
        padding: .5rem .9rem;
        flex-wrap: wrap;
        gap: .45rem 0;
    }

    .barra-marca { font-size: .95rem; }

    /* El usuario y el botón de salir, a la derecha del logo. */
    .barra-usuario { margin-left: auto; gap: .5rem; }

    .barra-menu {
        order: 3;
        flex: 0 0 100%;      /* la línea de abajo, entera para el menú */
        margin-left: 0;
        gap: .3rem;

        /* Las secciones no caben todas en un teléfono, y partirlas en
           tres líneas dejaría la barra tapando media pantalla. Se
           deslizan con el dedo, y el difuminado del borde derecho es
           lo que avisa de que hay más. */
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, #000 88%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    }

    .barra-menu::-webkit-scrollbar { display: none; }

    .barra-menu a {
        flex: 0 0 auto;        /* que no se aplasten entre ellos */
        white-space: nowrap;
        padding: .5rem .75rem;
    }

    /* ---------- Para el dedo, no para el ratón ----------
       Un botón de 30 px se falla al tocarlo. 40 es lo mínimo que
       recomiendan Apple y Google, y aquí se trabaja de pie y con
       prisa. */
    .boton, button, .cuenta-demo {
        min-height: 40px;
    }

    .boton-chico {
        min-height: 36px;
        padding-left: .7rem;
        padding-right: .7rem;
    }
}

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

/* ---------- EL PANEL DEL VIAJE, EN UN TELEFONO ----------

   Flotando tapa el mapa justo cuando mas falta hace verlo: el encargado
   esta tocando sedes y el panel le cubre media pantalla, asi que marca
   a ciegas o lo cierra y pierde lo que llevaba.

   En un telefono deja de flotar y baja al final de la pagina, debajo
   del mapa. Se marca arriba, se desliza, y ahi esta el recorrido con el
   camion y el chofer. En una pantalla grande sigue flotando, que ahi si
   sobra sitio a los lados. */

@media (max-width: 780px) {
    .popup-viaje {
        position: static;
        width: auto;
        max-height: none;
        margin-top: 1rem;
        /* Sin la sombra de algo que flota, porque ya no flota. */
        box-shadow: var(--sombra);
    }

    /* El formulario dejaba de crecer para caber en la caja flotante.
       Aqui manda el contenido: la pagina se desliza. */
    .popup-viaje > form { max-height: none; }
    .popup-viaje .popup-cuerpo { overflow: visible; }
}

/* ---------- 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 ────────────────────────────────

   OJO CON EL NOMBRE. `.camion` ya existe arriba, y significa otra cosa:
   la tarjeta con franja roja de /almacen y de /puerta. Estas reglas
   iban sueltas y, por venir despues, ganaban — aplastaban esas
   tarjetas a 108 px de ancho en una pantalla de 1800, con el texto
   partido palabra por palabra, y encogian la etiqueta de 1.5rem a
   0.82.

   Por eso van todas acotadas a `.patio`, que es donde viven estos
   camioncitos. Dos cosas distintas pueden llamarse igual mientras cada
   una diga donde vive.
   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;
}

.patio .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;
}

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

.patio .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. */
.patio .camion-barra {
    display: block;
    height: 5px;
    margin: .3rem 0 .25rem;
    border-radius: 3px;
    background: #eceff2;
    overflow: hidden;
}

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

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

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

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

.patio .camion.vacio            { background: #f7f9fa; }
.patio .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. */

/* ── DÍA A DÍA, EN LAS VISITAS ─────────────────────────────────────
   Barras dibujadas con CSS, sin librería de gráficas: una dependencia
   externa para dibujar treinta rectángulos no se paga sola, y este
   sistema tiene que funcionar con el internet caído. */
.dias-visitas {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    margin-top: .8rem;
    overflow-x: auto;
    padding-bottom: 1.4rem;   /* sitio para la fecha de debajo */
}

.dia-visita {
    flex: 1 0 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.dia-visita > span {
    display: block;
    width: 100%;
    background: var(--rojo);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

/* Un día de cero se dibuja como una raya gris, no como nada: el hueco
   se confunde con "ese día no existe". */
.dia-visita > span[style*="height:2%"] { background: var(--borde-fuerte); }

.dia-visita > small {
    position: absolute;
    bottom: -1.3rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .62rem;
    color: var(--tinta-tenue);
    white-space: nowrap;
}

/* ── EL BUSCADOR DEL RECOJO ────────────────────────────────────────
   La caja es grande a proposito: se teclea de pie, con prisa y a veces
   con el cliente hablando encima. Y el texto va en monoespaciada porque
   lo que mas se escribe aqui son codigos —LIM-00037-0—, donde una O y
   un 0 tienen que distinguirse a la primera. */
.buscador-recojo label { display: block; margin-bottom: .3rem; }

.buscador-recojo .control {
    font-size: 1.15rem;
    padding: .6rem .8rem;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    letter-spacing: .5px;
}

.buscador-recojo #pista-busca { margin-top: .35rem; }

.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;
}

/* Los botones de la cabecera: el de agrandar y el selector de persona. */
.banco-acciones {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}

.banco-acciones .boton-chico { white-space: nowrap; }

/* ── UN RECUADRO CON LA VENTANA ENTERA ────────────────────────────
   En un cuarto de pantalla se ve por donde va el sistema pero no se
   puede trabajar: el formulario de registro pide rodar tres veces y el
   mapa queda del tamano de un sello.

   Se agranda MOVIENDOLO DE SITIO, no recargandolo: el iframe es el
   mismo nodo, asi que lo que se estaba escribiendo sigue escrito. */
.banco-panel.en-grande {
    position: fixed;
    inset: 0;
    z-index: 200;
    border-radius: 0;
    border: 0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}

/* El recuadro ocupa lo que sobra entre la cabecera y el pie, sea cual
   sea el alto de la ventana. Sin `min-height: 0` un hijo de flex se
   niega a encoger por debajo de su contenido y se sale por abajo. */
.banco-panel.en-grande iframe {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* Que no ruede la pagina de detras: si no, se rueda esa creyendo que se
   rueda el recuadro. */
body.con-panel-en-grande { overflow: hidden; }

@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;
}

/* ---------- El mapa de calles ----------

   El codigo de la sede escrito encima de su circulo, siempre visible.

   OJO CON LA ESPECIFICIDAD. Leaflet marca sus globos con
   `.leaflet-tooltip`, que trae fondo blanco, borde y flechita. Nuestra
   clase `.etiqueta-sede` pesa lo mismo (0,1,0), asi que gana la que
   venga DESPUES en el orden de carga — y `leaflet.css` se carga despues
   de esta hoja. Resultado: un recuadro feo debajo de cada nombre.

   Encadenando las dos clases el peso sube a (0,2,0) y ya no depende de
   quien cargue primero. */

.leaflet-tooltip.etiqueta-sede {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #ffffff;
    font-weight: 700;
    font-size: .68rem;
    /* Un contorno oscuro alrededor de la letra: sobre un mapa claro el
       blanco solo se pierde. */
    text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
    padding: 0;
    white-space: nowrap;
    pointer-events: none;   /* el clic es del circulo, no del texto */
}

/* La flechita del globo, en sus cuatro direcciones. */
.leaflet-tooltip.etiqueta-sede::before,
.leaflet-tooltip.etiqueta-sede::after {
    display: none;
    border: 0;
}

/* El popup, con la letra del sistema y no la de Leaflet. */
.leaflet-popup-content { font-family: inherit; font-size: .85rem; margin: .7rem .9rem; }
.leaflet-popup-content strong { color: #1f3a5f; }

/* Los botones de encuadre, encima del mapa y por debajo de los controles
   de Leaflet, que van en la esquina contraria. */
.encuadre-calles {
    position: absolute;
    right: .7rem;
    /* Por encima del credito de OpenStreetMap, que va pegado al borde
       inferior. Taparlo no es solo feo: la licencia obliga a que se
       vea. */
    bottom: 2.1rem;
    z-index: 500;          /* Leaflet usa hasta 400 para sus paneles */
    display: flex;
    gap: .35rem;
}

.encuadre-calles .boton { box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* ---------- EL MAPA DE CALLES Y SU PANEL ----------

   El panel del viaje NO flota en esta pantalla. Flotando tapaba el lado
   derecho del mapa —justo donde caen las sedes del este de Lima— y el
   encargado terminaba marcando a ciegas o cerrandolo y perdiendo lo que
   llevaba.

   `1fr auto` en vez de `1fr 340px` es lo que hace que la columna del
   panel no exista mientras no hay nada marcado: con el panel en
   display:none, `auto` mide cero y el mapa ocupa el ancho entero. */

.mapa-y-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
}

.mapa-y-panel .popup-viaje {
    position: static;
    width: 340px;
    max-height: none;
    box-shadow: var(--sombra);   /* ya no flota: sombra de tarjeta */
}

.mapa-y-panel .popup-viaje > form { max-height: none; }
.mapa-y-panel .popup-viaje .popup-cuerpo { overflow: visible; }

/* Debajo de esta anchura no caben dos columnas: el panel pasa a estar
   debajo del mapa, que es donde se lee bien en un telefono. */
@media (max-width: 980px) {
    .mapa-y-panel { grid-template-columns: 1fr; }
    .mapa-y-panel .popup-viaje { width: auto; }
}

/* ---------- EL ARO QUE LATE: carga que no entra en cualquier camion ----

   En el croquis esto era un 📏 dibujado al lado del circulo: se ve si
   uno lo busca. En el mapa de calles el lienzo es grande y esta lleno
   de avenidas, y un simbolo quieto se pierde entre ellas.

   El aro late y el ojo va solo, sin tener que pasar por encima de nada
   ni abrir la ficha. Es la diferencia entre un dato que esta y un dato
   que se ve. */

@keyframes late-el-aro {
    0%   { stroke-opacity: .9; stroke-width: 3; }
    70%  { stroke-opacity: 0;  stroke-width: 11; }
    100% { stroke-opacity: 0;  stroke-width: 11; }
}

.aro-grande {
    animation: late-el-aro 1.8s ease-out infinite;
    /* El aro no captura el raton: el clic es de la sede que hay debajo.
       Sin esto, tocar justo en el aro no metia la sede en el recorrido. */
    pointer-events: none;
}

/* Quien pide que no le muevan la pantalla —mareos, migrañas, o
   sencillamente porque lo prefiere— sigue viendo el aro, quieto. La
   informacion no se pierde: solo deja de parpadear. */
@media (prefers-reduced-motion: reduce) {
    .aro-grande {
        animation: none;
        stroke-opacity: .9;
        stroke-width: 4;
    }
}

/* ---------- QUÉ HAY DENTRO DE UNA TARIMA ----------

   Va plegado a proposito. Abierto por defecto serian cientos de filas
   en una pantalla que se usa para orientarse de un vistazo; pero la
   pregunta "¿esto de aqui que es?" se hace delante de la tarima, con el
   montacargas esperando, y hasta ahora obligaba a salir de la pantalla
   y buscar los paquetes de uno en uno. */

.dentro-tarima { margin-top: .35rem; }

.dentro-tarima > summary {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--rojo);
    padding: .3rem 0;
    /* Que se vea que se puede abrir: un texto sin pista de que es un
       control no se toca. */
    list-style: revert;
}

.dentro-tarima > summary:hover { text-decoration: underline; }

.dentro-tarima[open] > summary { margin-bottom: .4rem; }

/* La tabla de dentro, mas apretada que las de pantalla completa: es un
   detalle dentro de otra cosa, no la protagonista. */
.dentro-tarima .tabla th,
.dentro-tarima .tabla td { padding: .35rem .55rem; font-size: .85rem; }

/* ---------- UN AVISO QUE SE ABRE ----------

   Para avisos con lista larga: la cifra se lee siempre, el desglose se
   abre cuando se va a hacer algo con el. Con quince sedes, quince
   lineas empujaban fuera de la pantalla las tres cifras del dia, que es
   a lo que se entra a Inicio. */

.aviso-plegable > summary {
    cursor: pointer;
    list-style: revert;
}

/* El "ver quien debe" en gris y pequeño: la pista de que hay mas
   debajo, sin competir con la cifra. */
.aviso-plegable > summary .chico {
    color: var(--tinta-tenue);
    margin-left: .3rem;
}

.aviso-plegable[open] > summary .chico { display: none; }