* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo `hidden` es una promesa del navegador: esconde el elemento con
   `display: none`. Cualquier regla de autor que fije `display` en ese elemento
   le gana y lo deja a la vista, sin avisar. Paso con `.demo-ruta`, que es
   `display: grid`: en la pantalla del conductor los selectores de sucursal del
   modo demo se veian siempre, aunque el modo demo estuviera apagado, y en un
   celu se salian de la pantalla.

   Esta regla es la red de seguridad: pone `display: none` por encima de
   cualquiera, sin importar que se escriba despues en la hoja. Hay pruebas que
   avisan si aparece un caso nuevo. */
[hidden] { display: none !important; }

/* =========================================================================
   Paleta: verde sobre negro.

   La aplicacion tiene dos superficies muy distintas y cada una pide un color
   distinto. Sobre la oscura (barra superior, cabecera de tabla, tarjeta de
   estado) va un negro con fondo verde, nunca negro puro: el verde le da
   temperatura y evita que la pantalla se vea apagada. Sobre la clara van las
   superficies blancas y un texto casi negro con el mismo fondo verde.

   El verde de marca esta partido en dos tonos a proposito: el medio se usa
   para superficies y botones (donde hay texto blanco encima), el oscuro para
   texto y bordes (donde hay fondo blanco debajo). Usar solo uno de los dos
   obliga a inventar excepciones, y ahi es donde se rompen los contrastes.

   El bronce reemplaza al ambar original. Calienta el verde sin gritar y
   sigue distinguiendose de el cuando los dos aparecen juntos: el camion
   "En ruta" nunca se confunde con el estado "Bodega".
   ========================================================================= */
/* Texto solo para lectores de pantalla.
   Visible para el motor de accesibilidad, invisible en pantalla. Se usa para
   dar en palabras lo que un mapa muestra en imagenes: un mapa es informacion
   visual, y sin una alternativa en texto no es accesible para quien no ve. */
.solo-lectores{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

:root{
  /* Cromo oscuro: barra, cabeceras de tabla, tarjetas de estado. */
  --negro:#0A1410;
  --negro-2:#12281E;   /* verde muy oscuro: segundo tono de los degradados */
  /* Verde de marca. */
  --verde:#1C7A50;
  --verde-osc:#125C3C;
  /* Bronce: resaltes de atencion (camion en ruta, contadores de carga). */
  --bronce:#B07A22;
  --bronce-osc:#8A5D12;   /* el mismo bronce, oscurecido para texto sobre blanco */
  --bronce-claro:#C68F2A;   /* y aclarado para texto sobre el fondo oscuro */
  /* Verde luminoso: el unico que se lee bien sobre el fondo oscuro, para los
     indicadores de "en vivo" y los enlaces que viven dentro de superficies negras. */
  --verde-vivo:#4FD08A;
  --ink:#141D19;
  --line:#D6E0D9;
  --soft:#F2F6F3;
  /* Texto secundario: etiquetas, notas al pie, datos que se leen pero no deciden. */
  --muted:#5A6B63;
  /* Una sola sombra para toda la app. Antes cada tarjeta escribia la suya y
     cada tabla habia quedado con un peso visual levemente distinto. */
  --sombra: 0 1px 2px rgba(9, 24, 18, 0.06), 0 2px 8px rgba(9, 24, 18, 0.05);
  --sombra-alta: 0 4px 14px rgba(9, 24, 18, 0.14);
  /* Tonos de apoyo que se repiten en toda la app. Se declaran aqui para que
     cambiar el tema no obligue a editar el color de cada tarjeta. */
  --borde:#C6D3CC;        /* borde de los campos de formulario */
  --ok:#12603C;           /* texto de "listo" y "entregado" */
  --ok-fondo:#E0F0E7;     /* fondo del badge verde */
  --rojo:#9E2B2B;         /* texto de incidencia */
  --rojo-solido:#B23A3A;  /* el mismo rojo como relleno (botones, bordes) */
  --rojo-fondo:#F8E2E0;
  --neutro-texto:#3E5148; /* texto del badge gris (registrado, en mantenimiento) */
  --bronce-fondo:#F7EBD2;
  --neutro-fondo:#E3E9E5;
  --texto-2:#33473E;      /* nota dentro de una tarjeta */
  --texto-barra:#C9DED2;  /* links de la barra superior */
  --sub-barra:#8FA79B;    /* rotulos y notas sobre fondo oscuro */
  --vivo:#2E9E63;         /* punto "en linea" sobre superficie clara */
  --fondo:#EBEFEB;        /* gris con fondo verde, detras de todo el contenido */

  /* Movimiento. Dos velocidades para toda la app y una sola curva: ver
     "Sistema de movimiento", mas abajo, para lo que se anima y lo que no. */
  --mov-rapido:140ms;     /* cambia de color: la respuesta tiene que ser casi
                            inmediata o se siente lenta en vez de firme */
  --mov-suave:320ms;      /* aparece o se mueve: se da el tiempo de leerse */
  --mov-facil:cubic-bezier(0.2, 0, 0, 1);  /* entra de una vez, sin rebote */
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--ink);
    line-height: 1.55;
}

header {
    /* Degradado en vez de color plano: el negro puro se ve plano en pantallas
       grandes, el degradado le da profundidad sin agregar elementos. */
    background: linear-gradient(180deg, #12211B 0%, var(--negro) 100%);
    border-bottom: 2px solid var(--verde);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marca h1 {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 1.3rem;
    letter-spacing: -.01em;
    margin: 0;
}
.marca .sub { font-size: 0.8rem; color: var(--sub-barra); }

.nav { display: flex; align-items: center; gap: 1rem; }
.nav a { color: var(--texto-barra); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav a:hover { color: #fff; }
.nav a.boton { color: #fff; }

main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
main.wide { max-width: 1180px; }

h2 {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    color: var(--negro);
    margin-bottom: 1rem;
}
h3 {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    color: var(--negro);
    margin: 1.4rem 0 0.6rem;
}

.boton {
    display: inline-block;
    /* El verde es el color de accion de la app: antes lo era el ambar y cada
       boton(primary, de mapa, iniciar ruta) competia por el mismo foco. */
    background: var(--verde);
    color: #fff;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-weight: 600;
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--verde-osc);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}
.boton:hover { background: var(--verde-osc); border-color: var(--verde-osc); }

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sombra);
}
th, td { padding: 0.75rem 1rem; text-align: left; vertical-align: middle; }
thead { background: var(--negro); }
thead th {
    color: #fff;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* Franja verde bajo los rotulos: separa la cabecera del cuerpo sin gastar
       una linea gris mas. */
    border-bottom: 2px solid var(--verde);
}
tbody tr { border-top: 1px solid #EEF2EF; }
tbody tr:hover { background: var(--soft); }
td a { color: var(--verde-osc); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

.formulario {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 520px;
}
.formulario.compacto { padding: 0; border: none; box-shadow: none; gap: 0.7rem; max-width: none; }
.formulario label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.9rem;
    gap: 0.35rem;
}
.formulario input,
.formulario select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font-size: 1rem;
    font-weight: normal;
    background: #fff;
    font-family: inherit;
}
/* Un <select> se dimensiona al texto de su <option> mas larga, no a su
   contenedor. Con las sucursales de la casa ("Centro de Distribucion Norte")
   eso lo empujaba fuera de la pantalla en un celu: el formulario del
   conductor se salia 179 px a la derecha. `width: 100%` lo ata a la columna
   y `min-width: 0` le permite encogerse, que sin eso un elemento flexible no
   baja de su ancho minimo. Las casillas quedan fuera a proposito: estirar un
   checkbox lo deformaria. */
.formulario input:not([type="checkbox"]):not([type="radio"]),
.formulario select {
    width: 100%;
    min-width: 0;
}
.formulario input:focus,
.formulario select:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(28, 122, 80, 0.18);
}

/* ---------------- Tipo de entrega: despacho o retiro ---------------- */
/* El fieldset agrupa los dos radios. El navegador le pone borde y padding
   propios que no encajan con el resto del formulario, asi que se ajustan. */
.modalidad {
    border: 1px solid var(--borde);
    border-radius: 7px;
    padding: 0.6rem 0.9rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.modalidad legend {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.35rem;
}
/* Las etiquetas del formulario se apilan; un radio y su texto van en fila. */
.modalidad .opcion {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}
/* Ocupa el lugar del domicilio y su mapa cuando el paquete se retira. */
.aviso-retiro {
    background: var(--neutro-fondo);
    border-left: 4px solid var(--verde);
    border-radius: 7px;
    padding: 0.9rem 1rem;
}
.aviso-retiro p { margin: 0; color: var(--texto-2); }

.ficha {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: var(--sombra);
    margin-top: 1rem;
}
.ficha p { margin-bottom: 0.5rem; }

.vacio { color: var(--muted); font-style: italic; }

/* ---------------- Accesibilidad de teclado ---------------- */
/* Varios campos del panel apagaban el contorno del navegador sin poner nada
   en su lugar, dejando al operador sin saber de donde salta el cursor al
   tabular por la pantalla. A partir de aqui todo lo accionable muestra un
   anillo de foco, y el navegador deja de dibujarlo con el mouse para no
   ensuciar la lectura. */
:focus-visible {
    outline: 3px solid var(--verde-osc);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
.boton:focus-visible,
.mini-link:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
header :focus-visible { outline-color: #fff; }

/* Enlace de salto: invisible hasta que alguien navega con el teclado. */
.enlace-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--negro);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.enlace-saltar:focus { left: 0; }

/* Texto que solo se lee por lector de pantalla. */
.solo-lector {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================== Sistema de movimiento ==========================
   Antes no existia UNA sola transicion en toda la hoja: los botones cambiaban
   de color de golpe, las filas de tabla se iluminaban de un salto y apretar
   algo no devolvia nada hasta que la pantalla entera cambiaba. La interfaz se
   movia, pero no respondia. Esa es buena parte de la sensacion de que "todo se
   ve igual": no es que falten adornos, es que no hay respuesta al toque.

   Tres reglas sostienen la seccion:

   1. Dos velocidades, ni mas. --mov-rapido para lo que cambia de color (una
      respuesta tiene que llegar casi sin esperar; mas lenta se siente tardia)
      y --mov-suave para lo que se aparece o se mueve (una llegada tiene que
      poder leerse). Con tres o mas la pantalla se ve inquieta y las reglas
      empiezan a contradecirse entre si.

   2. Solo se anima lo que se toca. Un icono que gira porque si no comunica
      nada y cansa, y una tabla que se mece mientras se lee no ayuda a leerla.

   3. Se puede apagar entera. Preferir menos movimiento no es preferir menos
      animaciones: es no querer que NADA salte de golpe. Por eso el bloque
      final apaga la seccion entera y no solo el punto que late en el
      seguimiento, que era lo unico que se atendia antes.
   ======================================================================== */

/* ---- lo apretable responde al apretar ---- */
.boton,
.mini-boton,
.boton-salir,
.btn-ubicar,
.kpi-link,
.mini-link,
header .nav a {
    transition:
        background-color var(--mov-rapido) var(--mov-facil),
        border-color var(--mov-rapido) var(--mov-facil),
        color var(--mov-rapido) var(--mov-facil),
        box-shadow var(--mov-rapido) var(--mov-facil),
        transform var(--mov-rapido) var(--mov-facil),
        opacity var(--mov-rapido) var(--mov-facil);
}

/* Un pixel hacia abajo al apretar: la confirmacion fisica de que el clic
   llego. En un celular es la unica respuesta que existe antes de que la
   pantalla cambie, y sin ella el toque se siente fallido. */
.boton:active,
.mini-boton:active,
.btn-ubicar:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(9, 24, 18, 0.20);
}
header .nav a:active,
.mini-link:active,
td a:active { opacity: 0.65; }

/* ---- superficies, filas y campos ---- */
.card,
.formulario,
.ficha,
table,
.kpi {
    transition:
        box-shadow var(--mov-suave) var(--mov-facil),
        border-color var(--mov-rapido) var(--mov-facil);
}
tbody tr { transition: background-color var(--mov-rapido) var(--mov-facil); }

/* Las tarjetas de resumen son la cara del panel: al pasar encima se levantan
   un poco. Solo a ellas. Levantar tambien la tarjeta que envuelve una tabla
   entera moveria la tabla mientras el operador la esta leyendo.

   El borde verde dejo fuera a .kpi-alerta a proposito: esa tarjeta marca sus
   incidencias con un filete rojo de 4 px a la izquierda, y pintarle el borde
   de verde le roba exactamente lo que la hace legible de un vistazo. */
.kpi,
.kpi-link {
    transition:
        transform var(--mov-rapido) var(--mov-facil),
        box-shadow var(--mov-rapido) var(--mov-facil),
        border-color var(--mov-rapido) var(--mov-facil);
}
.kpi:hover,
.kpi-link:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.kpi:not(.kpi-alerta):hover,
.kpi-link:not(.kpi-alerta):hover { border-color: var(--verde); }

.formulario input,
.formulario select,
.campo input,
.campo select,
.filtros input,
.filtros select,
.fila-form input,
.fila-form select {
    transition:
        border-color var(--mov-rapido) var(--mov-facil),
        box-shadow var(--mov-rapido) var(--mov-facil);
}

/* ---- contenido que llega ---- */
/* El historial se repinta ENTERO con cada latido del flujo: seguimiento.js
   vacia la lista y la vuelve a llenar, y un camion que se mueve manda latido
   cada pocos segundos. Por eso la animacion no cuelga de `.es-ultimo` (que es
   solo el primero de la lista y ademas ya estiliza su icono y su titulo): si
   se colgara ahi, la lista entera parpadeciera cada cuatro segundos aunque no
   hubiera pasado nada.

   Cuelga de `.nuevo`, que seguimiento.js pone unicamente en los `id` que no
   estaban en el pintado anterior. Asi la animacion significa exactamente una
   cosa: esto no lo habias visto. En la primera pintada no se pone ninguna,
   porque lo que pinta el servidor ya estaba en pantalla al cargar y hacerlo
   parpadear seria un reflejo, no una novedad. */
.timeline li.nuevo,
.alerta {
    animation: llegar var(--mov-suave) var(--mov-facil) both;
}
@keyframes llegar {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

/* Barras de carga: llenan desde cero hasta el valor que manda el servidor.
   El ancho final llega en un style inline, asi que no hay con que animar un
   `width` desde cero: no existe un valor inicial que conocer. Escalar el eje X
   de 0 a 1 del elemento ya dimensionado da exactamente el mismo efecto y vale
   para cualquier porcentaje que el servidor decida, sin que este archivo se
   entere de que numero es. */
.barra-carga > span,
.barra-progreso > span {
    display: block;
    transform-origin: left center;
    animation: llenar var(--mov-suave) var(--mov-facil) both;
}
@keyframes llenar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---- quien pide menos movimiento se salta la seccion entera ---- */
/* `!important` no es descuido: una regla normal no le puede ganar a las dos
   reglas de arriba y a cualquier que se agregue despues, salvo que cada una
   se acuerde de poner su propia version aqui. Asi, una regla nueva de movimiento
   queda desactivada sola sin que nadie tenga que acordarse de esta lista. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .kpi:hover,
    .kpi-link:hover { transform: none; }
    .boton:active,
    .mini-boton:active,
    .btn-ubicar:active { transform: none; box-shadow: none; }
}

/* ---------------- Panel administrativo ---------------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.kpi .num {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--negro);
    line-height: 1;
}
.kpi .lbl {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.2rem;
    align-items: start;
}
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
/* Una tabla ancha no se comprime: el ancho minimo de sus celdas lo imponen los
   controles que llevan dentro (estado, camion y nota por fila). Sin un
   contenedor con scroll, la tabla empuja la tarjeta y con ella el encabezado y
   el menu, de modo que en un celu de 390 px la pagina entera se desplaza de
   lado en vez de desplazarse solo la tabla. */
.tabla-scroll { overflow-x: auto; }
/* Un elemento de un grid (o de un flex) trae `min-width: auto`, que significa
   "no bajes del ancho que te pide tu contenido". Por eso el contenedor con
   scroll solo no basta: la tarjeta seguiria midiendo lo que pide la tabla.
   Decirselo con `min-width: 0` es lo que deja que se encoja. */
.grid2 > * { min-width: 0; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--sombra);
}
.card h3 { margin: 0 0 0.8rem; }
/* Filete bajo el titulo de la tarjeta: separa el bloque sin gastarle otra
   caja a la caja. */
.card > h3 { padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
/* Una tabla dentro de una tarjeta ya esta enmarcada por la tarjeta. Con su
   propio borde encima aparecen dos marcos y la pantalla envejece. */
.card table { border: none; }

table.mini th, table.mini td { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.mini-link { color: var(--verde-osc); font-weight: 600; text-decoration: none; font-size: 0.8rem; }

.fila-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fila-form select, .fila-form input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff;
}
.fila-form input { min-width: 120px; }
.mini-boton { padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* Badges de estado (colores segun etapa) */
.badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.e-reg  { background: var(--neutro-fondo); color: var(--neutro-texto); }
.e-bod  { background: rgba(28, 122, 80, 0.15); color: var(--verde-osc); }
.e-ruta { background: var(--bronce-fondo); color: var(--bronce-osc); }
.e-ok   { background: var(--ok-fondo); color: var(--ok); }
.e-inc  { background: var(--rojo-fondo); color: var(--rojo); }
.c-ok   { background: var(--ok-fondo); color: var(--ok); }
.c-ruta { background: var(--bronce-fondo); color: var(--bronce-osc); }
.c-mant { background: var(--neutro-fondo); color: var(--neutro-texto); }
.c-inc  { background: var(--rojo-fondo); color: var(--rojo); }

/* Linea de tiempo del seguimiento (icono + cuerpo, el mas reciente arriba) */
.timeline { list-style: none; padding: 0; margin: 1rem 0; position: relative; }
.timeline li {
    position: relative;
    display: flex;
    gap: 0.85rem;
    padding: 0 0 1.1rem 0;
}
/* La linea que une los hitos la dibuja el propio icono, para que el conector
   nunca quede cortado ni desalineado al cambiar el ancho de la tarjeta. */
.timeline li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: -1px;
    width: 2px;
    background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline .tl-icono {
    position: relative;
    z-index: 1;
    flex: 0 0 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    font-size: 0.9rem;
    line-height: 1;
}
/* El hito mas reciente se destaca: es lo que el cliente vino a ver. */
.timeline li.es-ultimo .tl-icono {
    border-color: var(--verde);
    box-shadow: 0 0 0 4px rgba(28, 122, 80, 0.16);
}
.timeline .tl-cuerpo { flex: 1; padding-top: 0.15rem; min-width: 0; }
.timeline .tl-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}
.timeline .tl-estado { font-weight: 600; }
.timeline li.es-ultimo .tl-estado { color: var(--negro); }
.timeline .tl-cuando { color: var(--muted); font-size: 0.8rem; }
.timeline .t-nota { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--texto-2); }
/* Separadores de dia del historial (Hoy, Ayer o fecha): son etiquetas, no
   hitos; no llevan punto, no cuelgan de la linea del conector y no compiten
   con el fondo de `.nuevo` del li de al lado. */
.timeline li.tl-dia {
    display: block;
    padding: 1.2rem 0 0.55rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.timeline li.tl-dia::before { display: none; }
.timeline li.tl-dia:first-child { border-top: none; padding-top: 0; margin-top: 0; }
/* El icono toma el color de la etapa, igual que los badges del panel. */
.timeline .tl-icono.e-reg  { border-color: #BFCFC7; }
.timeline .tl-icono.e-bod  { border-color: var(--verde); color: var(--verde-osc); }
.timeline .tl-icono.e-ruta { border-color: var(--bronce); color: var(--bronce-osc); }
.timeline .tl-icono.e-ok   { border-color: #2A8F5E; color: var(--ok); }
.timeline .tl-icono.e-inc  { border-color: var(--rojo-solido); color: var(--rojo); }

/* ---------- Selector de direccion de destino con mapa (nuevo envio) ---------- */
.formulario.con-mapa { max-width: 680px; }

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;   /* ancla el desplegable de sugerencias */
    z-index: 1000;        /* sugerencias por sobre el mapa */
}

.dir-row { display: flex; gap: 0.5rem; align-items: stretch; }
.dir-row input { flex: 1; }
.dir-row .boton { white-space: nowrap; }

.sugerencias {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--sombra-alta);
    max-height: 220px;
    overflow-y: auto;
}
.sugerencias li {
    padding: 0.5rem 0.6rem;
    font-weight: 400;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
}
.sugerencias li:hover { background: var(--soft); }

.campo-mapa { display: flex; flex-direction: column; gap: 0.4rem; }

#mapa-destino, .mapa-mini {
    height: 320px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
    z-index: 1;   /* debajo del desplegable de sugerencias */
}
.mapa-mini { height: 260px; margin-top: 0.4rem; }

.mapa-hint { font-size: 0.85rem; font-weight: 500; }
.mapa-hint.pendiente { color: var(--muted); }
.mapa-hint.ok { color: var(--verde-osc); }

/* ---------- Mapas (MapLibre) ---------- */
/* El mapa se dibuja en un lienzo, no en una capa de imagenes: no hay forma de
   bajar la saturacion con un filtro sin tocar tambien los pines, que se dibujan
   en el mismo lienzo. Por eso la paleta neutra esta en el estilo del mapa
   (static/estilo-mapa.json) y no aqui. Lo que si se toca desde el css es el
   cromado: controles y carteles. */

.maplibregl-map { font: inherit; background: #F1F0EB; }

/* El mapa no captura el foco: es una imagen con informacion, y el texto de la
   pagina ya la dice. Los controles si lo necesitan, porque son botones. */
.maplibregl-canvas:focus { outline: none; }
.maplibregl-ctrl-group {
    border-radius: 8px !important;
    box-shadow: var(--sombra) !important;
    border: 1px solid var(--line);
    overflow: hidden;
}
.maplibregl-ctrl-group button {
    width: 30px !important;
    height: 30px !important;
    background: #fff;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-group button:hover { background: var(--soft); }
/* Los iconos de + y - vienen como svg negro por defecto: se pintan del color
   de la app para que no se vean como un control pegado. */
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in span,
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out span { filter: invert(11%) sepia(24%) saturate(1400%) hue-rotate(100deg); }
.maplibregl-ctrl-attrib {
    background: rgba(255, 255, 255, 0.86) !important;
    border-radius: 6px 0 0 0;
    font-size: 0.68rem;
    color: var(--muted);
}
.maplibregl-ctrl-attrib a { color: var(--verde-osc); }
.maplibregl-ctrl-attrib-button { filter: invert(11%) sepia(24%) saturate(1400%) hue-rotate(100deg); }

/* Cartel de detalle: fondo opaco y sombra de la app, no el blanco por defecto. */
.maplibregl-popup-content {
    background: #fff;
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    box-shadow: var(--sombra-alta);
}
.maplibregl-popup-content a { color: var(--verde-osc); font-weight: 600; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #fff; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #fff; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #fff; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #fff; }
.maplibregl-popup-close-button {
    width: 20px; height: 20px; padding: 0;
    color: var(--muted); font-size: 1rem; line-height: 1;
}
.maplibregl-popup-close-button:hover { background: transparent; color: var(--negro); }

/* Envoltorio estable de cada marcador. MapLibre posiciona este div; lo que hay
   adentro lo dibuja la pantalla. Sin nada aqui, el div queda con tamano cero
   y el contenido se escapa del punto. */
.netcf-marcador { line-height: 0; }

/* Mensaje cuando el mapa no se puede dibujar (navegador sin WebGL). No es un
   error de la app: los datos siguen en la lista y en el texto. */
.mapa-sin-mapa {
    margin: 0;
    padding: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
    background: var(--soft);
    border-radius: 10px;
}

/* Punto de entrega arrastrable en los formularios. */
.pin-eleccion {
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    cursor: grab;
}

/* Envios cerrados (entregados): solo lectura */
tr.cerrado td { color: var(--muted); }
tr.cerrado:hover { background: transparent; }

/* ================= Portada: buscador de seguimiento ================= */
.hero {
    /* Un halo verde arriba del degradado: da profundidad al bloque sin
       agregar un solo elemento a la pagina. */
    background-image:
        radial-gradient(120% 95% at 50% 0%, #1B3B2C 0%, rgba(27, 59, 44, 0) 62%),
        linear-gradient(155deg, var(--negro) 0%, var(--negro-2) 58%, #0E2A1E 100%);
    color: #fff;
    text-align: center;
    padding: 3.5rem 1.5rem 3rem;
}
.hero h2 { color: #fff; font-size: 2rem; margin-bottom: 0.4rem; }
.hero p { color: var(--sub-barra); }
.hero-ayuda { font-size: 0.85rem; margin-top: 0.8rem; }
/* La ayuda de la portada vive sobre el fondo oscuro, asi que ahi el enlace va
   en verde luminoso. En las tarjetas blancas (envio no encontrado, pagina de
   error) el mismo enlace tiene que caer al verde oscuro: en claro sobre
   blanco quedaba casi invisible. */
.hero-ayuda a { color: var(--verde-osc); }
.hero-ayuda a:hover { text-decoration: underline; }
.hero .hero-ayuda a { color: var(--verde-vivo); }

/* ================= Sucursales (pagina publica) ================= */
/* Tarjetas de sucursal: la ficha que el cliente necesita para ir a retirar.
   Las que atienden publico llevan un borde verde; los centros de distribucion
   se ven apagados para que no prometan atencion que no dan. */
.sucursales-hero { padding-bottom: 2.4rem; }
.sucursales-lista {
    list-style: none;
    margin: 0 auto;
    padding: 1.5rem;
    max-width: 760px;
    display: grid;
    gap: 1rem;
}
.sucursal { border-left: 4px solid var(--line); }
.sucursal-retira { border-left-color: var(--vivo); }
.sucursal-interna { opacity: 0.86; }
.sucursal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.sucursal-cabecera h3 { margin-bottom: 0.8rem; }
.badge-retiro { background: var(--ok-fondo); color: var(--ok); }
.badge-interno { background: var(--neutro-fondo); color: var(--neutro-texto); }
.sucursales-pie {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    color: var(--muted);
}

.buscador {
    display: flex;
    gap: 0.5rem;
    max-width: 520px;
    margin: 1.4rem auto 0;
    background: #fff;
    padding: 0.4rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.buscador input {
    flex: 1;
    min-width: 0;
    border: none;
    font-size: 1.1rem;
    padding: 0.6rem 0.8rem;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}
.buscador input:focus { outline: none; box-shadow: 0 0 0 3px rgba(28, 122, 80, 0.28); }
/* El texto de ejemplo tambien se lee: a 2.5:1 el gris claro original
   dejaba el campo de busqueda casi vacio a primera vista. */
.buscador input::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); }
.buscador-claro { margin: 1rem 0 0; box-shadow: var(--sombra-alta); border: 1px solid var(--line); }

/* ================= Portada: Mis envios ================= */
/* La lista de codigos rastreados cae sobre el borde del hero para que se
   sienta parte del buscador: la persona rastrea y su lista queda ahi mismo.
   Sin display propio: el atributo hidden y su red de seguridad son los
   unicos que deciden si el bloque existe. */
.mis-envios {
    max-width: 660px;
    margin: -1.4rem auto 0;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.3rem 1rem;
    box-shadow: var(--sombra-alta);
}
.mis-envios-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.mis-envios-cabecera h3 { margin: 0; font-size: 1.05rem; }
.mis-envios-acciones { display: flex; gap: 0.35rem; }
.mis-envios-ayuda { font-size: 0.8rem; color: var(--muted); margin: 0.15rem 0 0.7rem; }
.mis-envios-lista { list-style: none; margin: 0; padding: 0; }
.mis-fila {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--soft);
}
.mis-codigo {
    font-family: "Space Grotesk", monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--negro);
    text-decoration: none;
    transition: color var(--mov-rapido) var(--mov-facil);
}
a.mis-codigo:hover { color: var(--verde-osc); }
.mis-estado { margin-left: auto; }
.mis-quitar { flex: none; }
.mis-envios-vacio { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }

.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.paso-info {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--sombra);
}
.paso-info h3 { margin: 0.4rem 0 0.3rem; font-size: 1rem; }
.paso-info p { color: var(--muted); font-size: 0.9rem; }
.paso-ico { font-size: 1.6rem; }

/* ================= Barra de progreso del envio ================= */
.progreso {
    list-style: none;
    display: flex;
    margin: 1.4rem 0 0.5rem;
    padding: 1.3rem 0.5rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--sombra);
}
.progreso li {
    flex: 1;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.progreso li::before {           /* linea que une las etapas */
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 4px;
    background: var(--line);
    z-index: 0;
}
.progreso li:first-child::before { display: none; }
.progreso li.hecho::before,
.progreso li.actual::before { background: var(--verde); }
.progreso .punto {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    background: #fff;
    border: 3px solid var(--line);
    color: #8A9A92;
}
.progreso li.hecho .punto { background: var(--verde); border-color: var(--verde); color: #fff; }
.progreso li.actual .punto {
    border-color: var(--verde);
    color: var(--verde-osc);
    box-shadow: 0 0 0 5px rgba(28, 122, 80, 0.18);
}
.progreso .paso-nombre { font-size: 0.78rem; color: var(--muted); line-height: 1.2; padding: 0 0.2rem; }
.progreso li.actual .paso-nombre { color: var(--negro); font-weight: 600; }
.progreso.con-incidencia li.actual .punto { border-color: var(--rojo); color: var(--rojo); box-shadow: 0 0 0 5px rgba(158, 43, 43, 0.15); }
@media (max-width: 600px) {
    .progreso .paso-nombre { font-size: 0.65rem; }
    .progreso .punto { width: 28px; height: 28px; font-size: 0.75rem; }
    .progreso li::before { top: 12px; }
}

/* ================= Alertas ================= */
.alerta { padding: 0.7rem 1rem; border-radius: 8px; margin: 1rem 0 0; font-weight: 500; }
.alerta-error { background: var(--rojo-fondo); color: #7E1D1D; }
.alerta-ok { background: var(--ok-fondo); color: var(--verde-osc); }

/* ================= Login ================= */
.fondo-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(155deg, var(--negro) 0%, var(--negro-2) 62%, #0E2A1E 100%);
    padding: 1rem;
}
.login-caja {
    width: 100%;
    max-width: 380px;
    margin: 0;
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.8rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.login-marca { text-align: center; margin-bottom: 1rem; }
.login-marca h1 { font-family: "Space Grotesk", sans-serif; color: var(--negro); font-size: 1.4rem; }
.login-marca p { color: var(--muted); font-size: 0.85rem; }
.login-logo { font-size: 2.2rem; }
.boton-full { width: 100%; margin-top: 0.4rem; padding: 0.7rem; text-align: center; }
.login-volver { display: block; text-align: center; margin-top: 1.2rem; color: var(--verde-osc); font-size: 0.85rem; text-decoration: none; }

.form-salir { display: inline; }
.boton-salir {
    background: transparent;
    border: 1px solid #3E5A4C;
    color: var(--texto-barra);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}
.boton-salir:hover { border-color: #fff; color: #fff; }

/* ================= Filtros y alertas del panel ================= */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    box-shadow: var(--sombra);
    margin-bottom: 1.2rem;
}
.filtros input[name="q"] { flex: 1; min-width: 220px; }
.filtros input, .filtros select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font: inherit;
    font-size: 0.88rem;
    background: #fff;
}
.filtros .check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; }

/* ---- fichas de filtro del panel ---- */
/* La fila nace oculta y la red de seguridad [hidden] decide si existe: la caja
   no declara `display` (como la capa del QR o la tostada), solo ordena dentro
   del formulario. Los chips de adentro son `inline-flex`, asi que corren en
   fila y envuelven solos. */
.chips-filtros { flex-basis: 100%; margin-top: 0.4rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    background: var(--fondo);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--verde-osc);
}
.chip + .chip { margin-left: 0.35rem; }
.chip-x {
    border: none;
    background: transparent;
    color: var(--bronce-osc);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.chip-x:hover { color: var(--bronce); }
.chip-x:focus-visible { outline: 3px solid var(--verde); border-radius: 999px; }

.kpi-link { text-decoration: none; color: inherit; }
.kpi-link:hover { box-shadow: var(--sombra-alta); }
.kpi-alerta { border-left: 4px solid var(--rojo); }
.kpi-alerta .num { color: var(--rojo); }

tr.atrasado { background: #FDF3F2; }
tr.atrasado:hover { background: #F7E9E8; }

/* ================= Detalle: cabecera, entrega estimada ================= */
.detalle-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.llega-caja {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 1.1rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 210px;
}
.llega-caja strong { font-family: "Space Grotesk", sans-serif; color: var(--negro); font-size: 1.1rem; }
.alerta.creado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.codigo-grande { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; margin-left: 0.3rem; }


/* ================= Cotizador ================= */
.cotizacion {
    background: linear-gradient(160deg, var(--negro) 0%, var(--negro-2) 100%);
    color: #fff;
    border: 1px solid rgba(79, 208, 138, 0.22);
    border-radius: 14px;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cot-lbl { color: var(--sub-barra); font-size: 0.85rem; }
.cot-precio { font-family: "Space Grotesk", sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--bronce-claro); line-height: 1.1; }
.cotizacion p { color: var(--texto-barra); }
.cot-llega { margin: 0.4rem 0 0.8rem; }
.cot-llega strong { color: #fff; }

/* ================= Etiqueta imprimible ================= */
.fondo-etiqueta { background: #E6EBE7; padding: 1.5rem 1rem; }
.acciones-etiqueta { max-width: 640px; margin: 0 auto 1rem; display: flex; justify-content: space-between; align-items: center; }
.etiqueta {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #0C1A15;
    border-radius: 6px;
    color: #0C1A15;
}
.et-cabecera { display: flex; justify-content: space-between; padding: 0.7rem 1rem; background: #0C1A15; color: #fff; font-family: "Space Grotesk", sans-serif; }
.et-cuerpo { display: flex; border-bottom: 2px solid #0C1A15; }
.et-datos { flex: 1; }
.et-bloque { padding: 0.8rem 1rem; }
.et-bloque p { margin: 0.1rem 0; }
.et-destino { border-top: 1px dashed #999; font-size: 1.1rem; }
.et-suc { font-weight: 700; text-transform: uppercase; font-size: 0.85rem; margin-top: 0.3rem !important; }
.et-instrucciones { margin-top: 0.35rem !important; font-weight: 600; color: var(--verde-osc); }
.et-lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #666; }
.et-qr { width: 200px; border-left: 2px solid #0C1A15; padding: 0.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; text-align: center; font-size: 0.72rem; }
.et-qr svg { width: 100%; height: auto; }
.et-pie { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid #0C1A15; }
.et-pie > div { padding: 0.6rem 1rem; }
.et-pie > div + div { border-left: 1px solid #0C1A15; }
.et-pie strong { display: block; }
.et-codigo { text-align: center; font-family: "Space Grotesk", monospace; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.6rem; }
.et-url { max-width: 640px; margin: 0.8rem auto; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 560px) {
    .et-cuerpo { flex-direction: column; }
    .et-qr { width: 100%; border-left: none; border-top: 2px solid #0C1A15; }
    .et-qr svg { max-width: 180px; }
    .et-pie { grid-template-columns: 1fr; }
    .et-pie > div + div { border-left: none; border-top: 1px solid #0C1A15; }
}
@media print {
    .no-imprimir { display: none !important; }
    .fondo-etiqueta { background: #fff; padding: 0; }
    .etiqueta { margin: 0; max-width: none; }
    /* El enlace de salto existe solo para el teclado: en papel no debe ocupar
       una pagina con un texto que no le sirve a nadie. */
    .enlace-saltar { display: none !important; }
}

/* ================= Mapa en vivo de la flota (admin) ================= */
/* El acceso al mapa es una accion secundaria: con el mismo relleno verde
   compite con "Nuevo envio", que es la que el operador usa de verdad. */
.boton-mapa {
    background: transparent;
    color: var(--verde-vivo) !important;
    border: 1px solid rgba(79, 208, 138, 0.5);
}
.boton-mapa:hover { background: rgba(79, 208, 138, 0.14); border-color: var(--verde-vivo); }

.pagina-mapa { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.mapa-layout { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
#mapa-flota { height: 100%; width: 100%; z-index: 1; }
.flota-lista { background: #fff; border-right: 1px solid var(--line); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.flota-cabecera { display: flex; justify-content: space-between; align-items: center; }
.flota-cabecera h3 { margin: 0; }
.flota-resumen { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
.flota-lista ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.flota-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; }
.flota-item.clic { cursor: pointer; }
.flota-item.clic:hover { background: var(--soft); border-color: var(--verde); }
.flota-info { display: flex; flex-direction: column; gap: 0.1rem; }
.flota-info small { color: var(--muted); }
.flota-meta { font-size: 0.8rem; color: var(--muted); }
.punto-estado { width: 11px; height: 11px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; background: #B3C0B8; }
.flota-item.on .punto-estado { background: var(--vivo); box-shadow: 0 0 0 4px rgba(46, 158, 99, 0.18); }
.flota-ayuda { font-size: 0.78rem; color: var(--muted); margin-top: auto; }

/* ---- Esqueletos de carga de la flota ----
   Mientras /admin/api/flota responde, el panel lateral no se queda en blanco:
   dibuja bloques del tamano del contenido real (resumen y una fila por camion)
   para que la pantalla no salte cuando llegan los datos. Es una promesa visual
   y por eso flota.js los reemplaza apenas hay datos: si la carga falla, los
   cambia por un aviso, no los deja latiendo para siempre. */
.esqueleto {
    display: block;
    background: linear-gradient(90deg, var(--soft) 25%, #E3EBE6 37%, var(--soft) 63%);
    background-size: 400% 100%;
    border-radius: 5px;
    animation: brillar 1.4s ease-in-out infinite;
}
@keyframes brillar {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.flota-esqueleto {
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.esqueleto-punto { width: 11px; height: 11px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; }
.esqueleto-linea { height: 0.72rem; }
.esqueleto-patente { width: 5.5rem; margin-bottom: 0.4rem; }
.esqueleto-meta { width: 8.5rem; height: 0.6rem; }
.esqueleto-resumen { width: 4.5rem; height: 0.85rem; }
/* Quien pidio menos movimiento ve el bloque quieto, sin el gradiente corriendo. */
@media (prefers-reduced-motion: reduce) {
    .esqueleto { background: #E3EBE6; animation: none; }
}

.en-vivo { font-size: 0.78rem; color: var(--ok); display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.en-vivo.caido { color: var(--rojo); }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: latir 1.6s infinite; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.camion-pin { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.camion-emoji { font-size: 1.7rem; line-height: 1; }
.camion-patente { background: var(--negro); color: #fff; font: 700 0.7rem "Space Grotesk", sans-serif; padding: 0.05rem 0.4rem; border-radius: 4px; margin-top: -2px; }
.camion-pin.on .camion-patente { background: var(--verde-osc); }
.camion-pin.off { opacity: 0.55; filter: grayscale(1); }
.sucursal-pin { font-size: 1.4rem; line-height: 30px; text-align: center; background: #fff; border-radius: 50%; width: 30px; height: 30px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

@media (max-width: 760px) {
    .pagina-mapa { height: auto; overflow: visible; }
    .mapa-layout { grid-template-columns: 1fr; }
    #mapa-flota { height: 60vh; order: -1; }
    .flota-lista { border-right: none; }
}

/* ================= App del conductor (celular) ================= */
.app-conductor {
    background: linear-gradient(180deg, #12211B 0%, var(--negro) 55%, #08100D 100%);
    min-height: 100vh;
}
.cond-header {
    color: #fff;
    padding: 1rem 1.2rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--verde);
}
.cond-main { padding: 0 1rem 2rem; max-width: 480px; margin: 0 auto; }
.cond-card { background: #fff; border-radius: 16px; padding: 1.4rem; }
.cond-card h2 { margin-bottom: 0.8rem; }
.cond-check { font-weight: 500 !important; flex-direction: row !important; align-items: center; }
.demo-ruta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* En un celu las dos columnas dejan cada selector en unos 150 px y el nombre
   de la sucursal no entra comodo. En una columna caben los dos y el desborde
   horizontal desaparece. */
@media (max-width: 520px) { .demo-ruta { grid-template-columns: 1fr; } }
.cond-boton { font-size: 1.1rem; padding: 0.9rem; }
.cond-fin { background: var(--rojo-solido); color: #fff; margin-top: 1rem; }
.cond-fin:hover { background: #C24A4A; }
.cond-estado { display: flex; gap: 0.8rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.cond-estado strong { display: block; font-size: 1.1rem; }
.cond-punto { width: 16px; height: 16px; border-radius: 50%; background: #B3C0B8; flex-shrink: 0; }
.cond-punto.on { background: var(--vivo); animation: latir-verde 1.6s infinite; }
.cond-punto.error { background: var(--rojo-solido); }
@keyframes latir-verde { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 99, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(46, 158, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 99, 0); } }
.cond-sub { display: block; font-size: 0.82rem; color: var(--muted); }
.cond-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1rem 0 0.6rem; }
.cond-datos strong { font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; color: var(--negro); }
/* Recuadros de la cola: solo aparecen cuando hay algo que informar, */
/* porque un "0 por enviar" permanente solo hace ruido en la pantalla */
/* que el conductor mira por el parabrisas. */
.cond-datos #dato-cola { color: var(--bronce-osc); }
.cond-datos #dato-perdidos { color: var(--rojo); }
.cond-coords { font-family: monospace; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
.alerta code { font-size: 0.78rem; word-break: break-all; }

/* ---- Mapa en la app del conductor ---- */
.cond-mapa-wrap { position: relative; margin: 1rem -0.4rem 0; }
#mapa-cond { height: 300px; border-radius: 12px; border: 1px solid var(--line); z-index: 1; background: #E6EBE7; }
.cond-centrar {
    position: absolute; right: 10px; bottom: 10px; z-index: 500;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 0.45rem 0.9rem; font: 600 0.85rem "Inter", sans-serif; color: var(--negro);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer;
}

/* ---- Camion seguido en el mapa del admin ---- */
.flota-seguir { display: none; font-size: 0.75rem; font-weight: 600; color: var(--verde-osc); margin-top: 0.15rem; }
.flota-item.seguido { border-color: var(--verde); background: rgba(28, 122, 80, 0.07); }
.flota-item.seguido .flota-seguir { display: block; }

/* ================= Mapa en vivo dentro del panel admin ================= */
.mapa-panel-card { margin-bottom: 1.2rem; padding: 1rem 1.2rem; }
.mapa-panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.mapa-panel-cabecera h3 { margin: 0; }
.mapa-panel-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
#siguiendo-txt { color: var(--verde-osc); font-weight: 600; }
#mapa-panel { height: 400px; border-radius: 10px; border: 1px solid var(--line); z-index: 1; }
.leyenda { margin-top: 0.5rem; }

.celda-ubic { min-width: 150px; }
.btn-ubicar {
    border: 1px solid var(--line); background: #fff; border-radius: 6px;
    cursor: pointer; padding: 0.15rem 0.35rem; font-size: 0.9rem; margin-right: 0.2rem;
}
.btn-ubicar:hover, .btn-ubicar.activo { border-color: var(--bronce-osc); background: var(--bronce-fondo); }

/* contadores sobre los pines */
.sucursal-pin { position: relative; }
.suc-contador, .camion-carga {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--bronce); color: var(--negro);
    font: 700 0.68rem/18px "Inter", sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.camion-emoji { position: relative; }
.camion-pin.destacado .camion-patente { background: var(--bronce); color: var(--negro); }
.destino-pin { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.popup-paquetes { list-style: none; padding: 0; margin: 0.3rem 0 0.4rem; }
.popup-paquetes li { padding: 0.1rem 0; }

.buscar-paquete { display: flex; gap: 0.4rem; }
.buscar-paquete input { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid var(--borde); border-radius: 7px; font: inherit; font-size: 0.85rem; }

/* ================= Edicion de envios ================= */
.fila-botones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ================= Avance rapido de varios paquetes ================= */
.acciones-rapidas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.2rem;
}
.acciones-rapidas .ar-lbl { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.acciones-rapidas select, .acciones-rapidas input:not([type="checkbox"]) {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
}
.acciones-rapidas input[name="nota"] { min-width: 200px; }
.acciones-rapidas .check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
@media (max-width: 700px) {
    .acciones-rapidas .ar-lbl { width: 100%; }
}

/* ================= Pagina de error ================= */
.error-caja {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2.2rem 1.6rem;
    box-shadow: var(--sombra);
    text-align: center;
    max-width: 560px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.error-codigo {
    font-family: "Space Grotesk", sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--verde-osc);
    line-height: 1;
}
.error-caja p { color: var(--muted); }
.error-caja .buscador { margin-top: 0.8rem; }

/* ================= Paginacion del panel ================= */
.paginacion {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}
.paginacion .pag-info { font-size: 0.82rem; color: var(--muted); }
.paginacion .boton { text-decoration: none; }

/* =========================================================================
   Panel de seguimiento del cliente
   Cabecera de estado, mapa en vivo e historial con iconos.
   ========================================================================= */

/* ---------- Envio no encontrado ---------- */
.no-encontrado {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2.2rem 1.5rem;
    text-align: center;
    box-shadow: var(--sombra);
    max-width: 620px;
    margin: 1.5rem auto;
}
.no-encontrado .error-codigo { display: block; margin-bottom: 0.4rem; }
.no-encontrado p { color: var(--muted); }
.no-encontrado a { color: var(--verde-osc); font-weight: 600; }
.no-encontrado .codigo-grande { font-size: 0.95rem; }

/* ---------- Cabecera: estado actual + entrega estimada ---------- */
.segui-cabecera {
    display: grid;
    /* Las acciones van en su propia fila, abajo. En una columna `auto` a la
       derecha, los seis botones pedian su ancho entero en una sola linea y
       dejaban al codigo y al estado en una columna angosta: "NCF-" arriba y
       "JURG7Q" abajo. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "quien estado" "acciones acciones";
    gap: 0.9rem 1.5rem;
    align-items: start;
    background: linear-gradient(150deg, var(--negro) 0%, var(--negro-2) 100%);
    color: #fff;
    border-radius: 12px;
    border-bottom: 3px solid var(--verde);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--sombra-alta);
}
.segui-quien { grid-area: quien; min-width: 0; }
.segui-estado { grid-area: estado; }
.segui-acciones { grid-area: acciones; display: flex; flex-wrap: wrap; gap: 0.4rem;
                  padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }

.segui-etiqueta {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sub-barra);
}
.segui-cabecera .codigo-grande {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.7rem;
    letter-spacing: 0.06em;
    color: #fff;
}
.segui-ruta { color: var(--sub-barra); font-size: 0.9rem; }
.segui-ruta .flecha { color: var(--verde-vivo); font-weight: 700; margin: 0 0.3rem; }

.segui-titulo {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #fff;
}
.segui-eta { display: block; margin-top: 0.15rem; }
.segui-eta > span { font-size: 1.02rem; color: var(--bronce); font-weight: 600; }
.segui-eta.entregado > span { color: var(--verde-vivo); }
.segui-eta small {
    display: block;
    color: var(--sub-barra);
    font-size: 0.82rem;
    font-weight: 400;
}

/* Indicador de "en vivo": punto que late mientras el flujo este abierto. */
.segui-vivo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--sub-barra);
}
.punto-vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6E7F76;
    flex: 0 0 8px;
}
.segui-vivo.activo .punto-vivo {
    background: var(--verde-vivo);
    animation: latir-vivo 1.8s ease-in-out infinite;
}
.punto-vivo.en-linea { background: var(--verde-vivo); animation: latir-vivo 1.8s ease-in-out infinite; }
/* Este fotograma se llamaba igual que el de la linea 904, y el navegador se
   queda con el ultimo: `latir` estaba pisando al otro para TODOS los usos, asi
   que `.pulso` (que hereda `currentColor` del elemento y se disena a 1.6 s)
   estaba latiendo con el verde fijo y el radio de los puntos del seguimiento.
   Dos nombres distintos y cada elemento late como se diseno. */
@keyframes latir-vivo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 208, 138, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(79, 208, 138, 0); }
}
/* Respetar quien pidio menos movimiento: el punto queda fijo. */
@media (prefers-reduced-motion: reduce) {
    .segui-vivo.activo .punto-vivo,
    .punto-vivo.en-linea { animation: none; }
}

/* Acciones de la cabecera sobre fondo oscuro */
.segui-cabecera .mini-boton {
    background: rgba(255, 255, 255, 0.1);
    color: #DFE9E3;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    cursor: pointer;
}
.segui-cabecera .mini-boton:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.segui-cabecera .mini-boton.copiado { background: var(--verde-osc); border-color: var(--verde); }

/* ---------- Cuerpo: mapa a la izquierda, datos a la derecha ---------- */
.segui-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}
@media (max-width: 860px) {
    .segui-cuerpo { grid-template-columns: 1fr; }
    .segui-cabecera {
        grid-template-columns: 1fr;
        grid-template-areas: "quien" "estado" "acciones";
    }
}
.segui-lateral { display: flex; flex-direction: column; gap: 1rem; }
.segui-mapa-card { padding: 0; overflow: hidden; }
.segui-mapa-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem 0.6rem;
}
.segui-mapa-cabecera h3 { margin: 0; }
.mapa-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.segui-mapa-card .mapa-mini { margin: 0; border-radius: 0; height: 320px; }

/* Datos en dos columnas, como ficha, no como bloque de parrafos */
.datos { margin: 0; display: grid; gap: 0.7rem; }
.datos > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.6rem; }
.datos dt {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding-top: 0.1rem;
}
.datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Privacidad del seguimiento: con el codigo solo se ve parte de los datos
   (ver privacidad.py). La marca de la cabecera dice en que modo esta la
   tarjeta, y el bloque de abajo explica como pasar al otro. */
.detalle-cabeza { display: flex; flex-wrap: wrap; align-items: center;
                  justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.detalle-cabeza h3 { margin: 0; }
.pase-marca { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem;
              border-radius: 99px; background: var(--neutro-fondo); color: var(--neutro-texto); }
.pase-marca.pase-abierto { background: var(--ok-fondo); color: var(--ok); }
.dato-oculto { color: var(--muted); font-weight: 400; font-style: italic; }
.pase { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.pase-texto { font-size: 0.88rem; color: var(--texto-2); margin-bottom: 0.7rem; }
.pase-aviso { font-size: 0.85rem; margin-bottom: 0.6rem; padding: 0.5rem 0.7rem;
              border-radius: 8px; background: var(--bronce-fondo); color: var(--bronce-osc); }
.pase-aviso.pase-error { background: var(--rojo-fondo); color: var(--rojo); }
.pase-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pase-form input { width: 6.5rem; font-size: 1.1rem; letter-spacing: 0.3em; text-align: center;
                   font-variant-numeric: tabular-nums; }
.pase-ocultar { margin-top: 1rem; }
@media (max-width: 480px) {
    .datos > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.camion-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--line);
    background: var(--soft);
}
.camion-datos dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #74877D;
}
.camion-datos dd { margin: 0; font-weight: 600; }

.carga-resumen { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.5rem; }
.barra-carga {
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.barra-carga span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }

/* Barra del recorrido: el "% del camino" de la pagina de seguimiento.
   La animacion `llenar` (en la seccion de movimiento) la hace arrancar de
   cero en la primera pintada; esta transicion es para lo que pasa despues:
   el flujo en vivo actualiza el `width` con cada etapa y la barra se desliza
   en vez de saltar. La animacion no pisa la transicion: `llenar` anima el
   `transform` y la transicion anima el `width`. */
.barra-progreso {
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.barra-progreso > span {
    height: 100%;
    background: var(--verde);
    border-radius: 999px;
    transition: width var(--mov-suave) var(--mov-facil);
}
.progreso-valor {
    margin: 0.3rem 0 1.2rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.progreso-valor-rotulo strong { color: var(--verde-osc); }

/* ---------- Aviso de cambio de estado (tostada) ---------- */
/* La capa de afuera se centra con transform, y como la animacion `llegar`
   termina en transform:none, la animacion vive en la burbuja de adentro.
   Sin display propio en la capa: el atributo hidden y su red de seguridad
   son los que deciden si existe. */
.segui-aviso {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 50;
    max-width: min(560px, calc(100vw - 2rem));
}
.segui-aviso-burbuja {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--negro-2);
    color: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--sombra-alta);
    padding: 0.9rem 1.1rem;
    animation: llegar var(--mov-suave) var(--mov-facil) both;
}
.segui-aviso-texto { margin: 0; font-size: 0.92rem; }
.segui-aviso .mini-boton { flex: none; }

/* ---------- QR del seguimiento ---------- */
/* Sin display propio en la capa: el atributo hidden y su red de seguridad
   deciden si existe, igual que con la tostada y la lista de Mis envios. */
.segui-qr {
    max-width: 640px;
    margin: 0.4rem auto 1.1rem;
}
.segui-qr-caja {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: var(--sombra);
}
.segui-qr-img svg { width: 128px; height: 128px; display: block; }
.segui-qr-texto { font-size: 0.9rem; }
.segui-qr-texto strong { display: block; margin-bottom: 0.3rem; }
.segui-qr-texto p { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.3rem; }
.segui-qr-url {
    font-family: "Space Grotesk", monospace;
    font-size: 0.82rem;
    color: var(--muted);
    word-break: break-all;
}

/* ---------- Leyenda del mapa ---------- */
.mapa-leyenda-lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.7rem 1.1rem 0.9rem;
    margin: 0;
    font-size: 0.76rem;
    color: var(--muted);
}
.mapa-leyenda-lista li { display: inline-flex; align-items: center; gap: 0.35rem; }
.leyenda-punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.leyenda-punto.camion  { background: var(--bronce); box-shadow: 0 0 0 3px rgba(176, 122, 34, 0.25); }
.leyenda-punto.destino { background: var(--verde-osc); box-shadow: 0 0 0 3px rgba(18, 92, 60, 0.2); }
.leyenda-punto.origen  { background: #fff; border: 2px solid var(--negro); }
.leyenda-linea {
    width: 18px;
    height: 3px;
    display: inline-block;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--verde-osc) 0 4px, transparent 4px 8px);
}

/* Marcadores del mapa hechos con CSS: sin imagenes externas que fallen */
.pin-camion {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bronce);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(176, 122, 34, 0.45), 0 2px 5px rgba(9, 24, 18, 0.35);
}
.pin-destino {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--verde-osc);
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(9, 24, 18, 0.35);
}
.pin-origen {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--negro);
    box-shadow: 0 2px 5px rgba(9, 24, 18, 0.3);
}

.segui-pie { font-size: 0.82rem; margin-top: 1rem; }
.segui-pie a { color: var(--verde-osc); font-weight: 600; }

/* ---------- Impresion: la hoja es para el cliente, no para el mapa ---------- */
@media print {
    header, .nav, .segui-acciones, .segui-pie, .progreso,
    .enlace-saltar { display: none !important; }
    body { background: #fff; }
    .segui-cabecera { background: #fff; color: var(--negro); box-shadow: none; border: 1px solid var(--line); }
    .segui-cabecera .codigo-grande,
    .segui-titulo { color: var(--negro); }
    .segui-etiqueta, .segui-ruta, .segui-eta small { color: var(--muted); }
    .segui-eta > span { color: var(--verde-osc); }
    .segui-mapa-card, .card { box-shadow: none; break-inside: avoid; }
}

/* ================= Panel: excepciones y carga de flota ================= */

/* Las excepciones van arriba del todo: el operador no deberia tener que
   recorrer la tabla para descubrir que algo requiere accion. */
.excepciones {
    border-left: 4px solid var(--rojo-solido);
    background: #FDFCFB;
}
.excepciones h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; }
.excepciones .exc-ico { color: var(--rojo); }
.excepciones .exc-conteo {
    background: var(--rojo);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.exc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.exc-lista li {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: var(--soft);
    border-left: 3px solid transparent;
}
.exc-lista li.exc-grave { background: #FBF0EF; border-left-color: var(--rojo); }
.exc-lista li.exc-aviso { background: #FBF7EE; border-left-color: var(--bronce); }
.exc-codigo { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.85rem; }
.exc-texto { font-size: 0.88rem; color: var(--texto-2); overflow-wrap: anywhere; }
.exc-lista .mini-link { white-space: nowrap; }
@media (max-width: 620px) {
    .exc-lista li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Bitacora de acciones del panel. Tabla compacta y de lectura rapida: la
   columna importante es el detalle, asi que es la unica que ocupa el ancho. */
.auditoria h3 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.auditoria .aud-usr { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.tabla-aud { font-size: 0.82rem; }
.tabla-aud th { text-align: left; }
.tabla-aud td { vertical-align: top; }
.tabla-aud .aud-cuando {
    font-family: "Space Grotesk", sans-serif;
    white-space: nowrap;
    color: var(--muted);
}
.tabla-aud .aud-usr { font-weight: 600; white-space: nowrap; }
.tabla-aud .aud-accion {
    display: inline-block;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.tabla-aud .aud-detalle { overflow-wrap: anywhere; color: var(--texto-2); }
.tabla-aud .aud-ip { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 720px) {
    .tabla-aud .aud-ip { display: none; }
    .tabla-aud th:nth-child(5) { display: none; }
}

/* Estado de senal GPS del camion */
.gps-ok { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--ok); }
.gps-viejo { font-size: 0.8rem; color: #74877D; }

/* Carga por camion: numero + barra, para ver de un vistazo quien va lleno */
.celda-carga { min-width: 8rem; }
.celda-carga .carga-alerta { color: var(--rojo); font-weight: 600; }
.celda-carga > span:first-child { display: block; font-size: 0.82rem; }
.barra-carga.mini { display: block; height: 5px; margin-top: 0.2rem; }
.barra-carga.mini span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.celda-carga .carga-alerta + .barra-carga.mini span { background: var(--rojo-solido); }

/* Comprobante de entrega: la firma se dibuja en un lienzo y la foto se
   reduce antes de viajar. En el celular, dibujar no debe hacer scroll. */
.firma-lienzo {
    width: 100%;
    max-width: 520px;
    height: 180px;
    background: #fff;
    border: 1px dashed var(--borde);
    border-radius: 10px;
    touch-action: none;
    cursor: crosshair;
}
.foto-caja { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.foto-caja img {
    max-width: 260px;
    max-height: 200px;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.comprobante-card .comp-fecha { color: var(--muted); font-size: 0.85rem; }
.comprobante-card .comp-foto {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    margin: 0.6rem 0;
}
.comprobante-card .comp-firma {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.4rem 0;
}
.comprobante-card .comp-firma img {
    max-width: 320px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.comprobante-card .comp-ubi { font-size: 0.85rem; color: var(--texto-2); }

/* =========================================================================
   Portada: la pagina de la empresa dentro de la aplicacion.

   Antes vivia aparte (NetCF-Sitio) con su propia paleta azul y ambar. Aca
   usa la de la app: el mismo cromo oscuro del hero y de la barra, las mismas
   tarjetas blancas y el verde como unico color de accion. Asi el cliente no
   siente que salto de un sitio a otro al pasar de la portada al seguimiento.
   ========================================================================= */
.hero-portada { text-align: left; padding: 3.2rem 1.5rem 3.6rem; }
.hero-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    align-items: center;
}
.hero-portada h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; margin: 0.9rem 0 0.8rem; }
.hero-portada .resalte { color: var(--verde-vivo); }
.hero-portada .lead { font-size: 1.05rem; max-width: 46ch; }
.hero-portada .buscador { margin: 1.5rem 0 0; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--verde-vivo);
    background: rgba(79, 208, 138, 0.1);
    border: 1px solid rgba(79, 208, 138, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
}
.eyebrow .pulso,
.consola-vivo .pulso { display: inline-block; }

/* La consola: cifras reales de la base sobre un esquema de la red. */
.consola {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
}
.consola-cabeza {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sub-barra);
}
.consola-vivo { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--verde-vivo); }
.consola-red { display: block; width: 100%; height: auto; margin: 0.6rem 0 0.4rem; }
.consola-red text { fill: var(--sub-barra); font: 600 9px "Space Grotesk", sans-serif; letter-spacing: 0.08em; }
.red-ruta {
    fill: none;
    stroke: var(--bronce-claro);
    stroke-width: 2;
    stroke-dasharray: 5 7;
    stroke-linecap: round;
    /* La carga "fluye" de la matriz a los centros. Se apaga sola con el bloque
       de movimiento reducido, como todo lo animado de la hoja. */
    animation: fluir 1.4s linear infinite;
}
@keyframes fluir { to { stroke-dashoffset: -24; } }
.red-nodo { fill: var(--verde-vivo); }
.red-matriz { fill: #fff; stroke: var(--verde-vivo); stroke-width: 3; }
.consola-cifras {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.consola-cifras > div {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}
.consola-cifras dt { font-size: 0.72rem; color: var(--sub-barra); }
.consola-cifras dd {
    margin: 0.1rem 0 0;
    font: 700 1.55rem/1.1 "Space Grotesk", "Segoe UI", sans-serif;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Secciones de la portada: el ancho del contenido, con aire entre bloques. */
.portada-main { max-width: 1120px; }
.portada-seccion { margin: 3.2rem 0; scroll-margin-top: 1rem; }
.sec-cab { max-width: 640px; margin-bottom: 1.4rem; }
.sec-cab h2 { margin: 0.3rem 0 0.4rem; font-size: 1.7rem; line-height: 1.2; }
.sec-cab p { color: var(--muted); }
.sec-tag {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--verde-osc);
}
.sec-pie { margin-top: 1rem; }
.sec-pie a { color: var(--verde-osc); font-weight: 600; }

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

.serv-grid {
    display: grid;
    /* Tres por fila en escritorio: con seis tarjetas, cuatro dejaba una fila
       de dos colgando. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}
.serv {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    box-shadow: var(--sombra);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--mov-rapido) var(--mov-facil),
                box-shadow var(--mov-suave) var(--mov-facil),
                transform var(--mov-suave) var(--mov-facil);
}
.serv:hover { border-color: var(--verde); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.serv-ico { font-size: 1.6rem; }
.serv h3 { margin: 0.5rem 0 0.35rem; font-size: 1.05rem; }
.serv p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.serv-ir { margin-top: 0.8rem; font-weight: 600; font-size: 0.88rem; color: var(--verde-osc); }

.sedes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.sede {
    display: flex;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--sombra);
}
.sede-retira { border-left-color: var(--vivo); }
.sede-num { font: 700 1.3rem "Space Grotesk", sans-serif; color: var(--verde); }
.sede h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.sede p { font-size: 0.88rem; color: var(--texto-2); }
.sede .sede-meta { color: var(--muted); margin: 0.2rem 0 0.55rem; }

.faq { display: grid; gap: 0.6rem; max-width: 760px; }
.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.2rem 1.1rem;
    box-shadow: var(--sombra);
    scroll-margin-top: 1rem;
}
.faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--verde); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--texto-2); padding-bottom: 0.9rem; }

.contacto {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
}
.contacto-info p { color: var(--muted); margin: 0.3rem 0 1.2rem; }
.contacto-info h2 { margin: 0.3rem 0 0.4rem; font-size: 1.7rem; }
.contacto-datos a { color: var(--verde-osc); }
.contacto-form { max-width: none; }
.contacto-form .alerta { margin: 0; }
.contacto-form textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font: inherit;
    font-weight: normal;
    resize: vertical;
    width: 100%;
}
.contacto-form textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(28, 122, 80, 0.18); }
.fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
/* Campo trampa: fuera de la pantalla, no `hidden` ni `display: none`, porque
   los programas que rellenan formularios se saltan lo que esta oculto. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pie {
    background: var(--negro);
    color: var(--texto-barra);
    padding: 2rem 1.5rem 1.2rem;
    margin-top: 3rem;
    border-top: 2px solid var(--verde);
}
.pie-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}
.pie-marca { font-family: "Space Grotesk", sans-serif; color: #fff; font-size: 1.05rem; }
.pie p { color: var(--sub-barra); font-size: 0.88rem; margin-top: 0.3rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: flex-start; }
.pie nav a { color: var(--texto-barra); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.pie nav a:hover { color: #fff; }
.pie-nota { max-width: 1120px; margin: 1.5rem auto 0; font-size: 0.78rem; }

@media (max-width: 820px) {
    .hero-grid, .contacto { grid-template-columns: 1fr; }
    .hero-portada { padding-top: 2.2rem; }
}
@media (max-width: 520px) {
    .fila2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .serv:hover { transform: none; }
}
/* La barra de la portada lleva seis enlaces: en un celu no caben en una linea
   y empujaban la pagina de lado. Se reparten en dos lineas en vez de salirse. */
@media (max-width: 700px) {
    .nav { flex-wrap: wrap; gap: 0.45rem 0.9rem; }
}

/* Ayuda bajo un campo: dice para que sirve, no repite la etiqueta. */
.ayuda-campo { font-weight: 400; font-size: 0.8rem; color: var(--muted); }

/* Estado del respaldo al pie del panel: discreto si todo va bien, rojo si no. */
.respaldo-estado { font-size: 0.85rem; color: var(--texto-2); margin: 1.2rem 0; }
.respaldo-estado.respaldo-falta, .respaldo-error { color: var(--rojo); }


/* =========================================================================
   CAPA PROFESIONAL (v2 de la interfaz)

   Lo que hacia que la app se viera "de proyecto" no era la paleta, que ya
   estaba bien elegida, sino cuatro detalles repetidos en todas las pantallas:
     1. emojis como iconos: cada sistema los dibuja distinto y a color propio;
     2. una cabecera distinta por pantalla, sin navegacion comun en el panel;
     3. tablas con cabecera negra pesada dentro de tarjetas blancas;
     4. formularios en una sola columna larga, sin agrupar.
   Esta seccion va al final a proposito: reemplaza esas piezas sin tocar las
   reglas de arriba que siguen sirviendo (mapas, seguimiento, movimiento).
   ========================================================================= */
:root {
  --fondo: #F0F3F1;
  --line: #DCE4DF;
  --line-suave: #E8EEEA;
  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(9, 24, 18, 0.05), 0 1px 3px rgba(9, 24, 18, 0.04);
  --sombra-alta: 0 8px 24px rgba(9, 24, 18, 0.10), 0 2px 6px rgba(9, 24, 18, 0.06);
  --verde-tinte: #E4F2EA;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Iconos ---------- */
.ico {
  width: 1.1em; height: 1.1em;
  flex-shrink: 0;
  vertical-align: -0.17em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 1.35em; height: 1.35em; }
/* Ficha de icono: cuadro con tinte verde, el mismo en tarjetas y titulos. */
.ico-ficha, .titulo-ico, .paso-ico, .serv-ico {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--verde-tinte);
  color: var(--verde-osc);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.titulo-ico { width: 34px; height: 34px; font-size: 1rem; margin-right: 0.65rem; vertical-align: middle; }

/* ---------- Barra superior comun ---------- */
header.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
  background: rgba(10, 20, 16, 0.97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(79, 208, 138, 0.18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  flex-wrap: nowrap;
}
.pagina-mapa header.barra { position: relative; }
.marca {
  display: flex; align-items: center; gap: 0.7rem;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.marca-logo { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nombre {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em;
}
.marca-nombre b { font-weight: 500; color: var(--texto-barra); }
.marca .sub { font-size: 0.72rem; color: var(--sub-barra); letter-spacing: 0.02em; }

header.barra .nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; flex-wrap: nowrap; }
header.barra .nav a:not(.boton) {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radio-sm);
  color: var(--texto-barra); font-weight: 500; font-size: 0.9rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--mov-rapido) var(--mov-facil), color var(--mov-rapido) var(--mov-facil);
}
header.barra .nav a:not(.boton):hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
header.barra .nav a[aria-current="page"] { background: rgba(79, 208, 138, 0.13); color: #fff; box-shadow: inset 0 -2px 0 var(--verde-vivo); }
header.barra .nav .boton { margin-left: 0.5rem; }
.nav-discreto { opacity: 0.85; }

.barra-admin .nav-admin { margin-left: 1rem; }
.barra-acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.barra-acciones .nav-discreto {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--texto-barra); text-decoration: none; font-size: 0.85rem; font-weight: 500;
  padding: 0.45rem 0.6rem; border-radius: var(--radio-sm);
}
.barra-acciones .nav-discreto:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.boton-salir { display: inline-flex; align-items: center; gap: 0.35rem; border-color: rgba(201, 222, 210, 0.25); }

@media (max-width: 1100px) { .solo-ancho { display: none; } }
@media (max-width: 900px) {
  header.barra { flex-wrap: wrap; gap: 0.6rem 1rem; position: relative; }
  header.barra .nav, .barra-admin .nav-admin {
    order: 3; width: 100%; margin-left: 0;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem;
  }
  header.barra .nav::-webkit-scrollbar { display: none; }
  .marca .sub { display: none; }
}

/* ---------- Botones ---------- */
.boton, .mini-boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(9, 24, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.boton { border-radius: var(--radio-sm); font-weight: 600; letter-spacing: 0.005em; }
.boton .ico { width: 1em; height: 1em; }
.boton-sec, .boton.boton-sec {
  background: #fff; color: var(--negro); border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}
.boton-sec:hover, .boton.boton-sec:hover { background: var(--soft); border-color: #B5C6BC; color: var(--negro); }
.mini-boton {
  border-radius: 7px; font-weight: 600; font-family: "Inter", sans-serif;
  background: var(--verde); color: #fff; border: 1px solid var(--verde-osc); cursor: pointer;
}
.mini-boton:hover { background: var(--verde-osc); }
.mini-link { display: inline-flex; align-items: center; gap: 0.3rem; }
.mini-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Estructura de pagina ---------- */
main { margin: 2rem auto 3rem; }
main.wide { max-width: 1280px; }
.pagina-titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.pagina-titulo h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.015em; display: flex; align-items: center; }
.pagina-titulo .bajada { color: var(--muted); margin-top: 0.3rem; font-size: 0.95rem; max-width: 70ch; }
.pagina-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ruta-miga { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; display: flex; gap: 0.4rem; align-items: center; }
.ruta-miga a { color: var(--verde-osc); text-decoration: none; font-weight: 600; }

/* ---------- Tarjetas ---------- */
.card, .ficha, .formulario, .filtros, .kpi, .error-caja {
  border-color: var(--line);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.card { padding: 1.25rem 1.4rem; }
.card > h3, .card-titulo {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 1.02rem; letter-spacing: -0.005em;
  margin: -0.1rem 0 1rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-suave);
}
.card > h3 > .ico, .card-titulo > .ico {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  background: var(--verde-tinte); color: var(--verde-osc);
}
.card > h3 .mini-link:last-child, .card > h3 .aud-usr { margin-left: auto; }
.card h3 + h3, .card .formulario + h3, .card .tabla-scroll + h3 { margin-top: 1.6rem; }
section.card + section.card, .card + .card { margin-top: 1.2rem; }
.grid2 { gap: 1.25rem; }
.grid2 > .card + .card { margin-top: 0; }

/* ---------- Indicadores (KPIs) ---------- */
.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
.kpi {
  position: relative; padding: 1rem 1.1rem 0.95rem; gap: 0.45rem;
  flex-direction: column-reverse; justify-content: flex-end;
}
.kpi .lbl {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
  display: flex; align-items: center; gap: 0.4rem; line-height: 1.3;
}
.kpi .lbl .ico { color: var(--verde); }
.kpi .num { font-size: 1.85rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-alerta { border-left: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--rojo-solido), var(--sombra); }
.kpi-alerta .lbl .ico { color: var(--rojo-solido); }
.kpi-link:hover { box-shadow: var(--sombra-alta); }

/* ---------- Tablas ---------- */
table { border-radius: var(--radio); }
thead { background: var(--soft); }
thead th {
  color: var(--muted); font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
tbody tr { border-top: 1px solid var(--line-suave); }
tbody tr:first-child { border-top: none; }
tbody tr:hover { background: #F7FAF8; }
td { font-size: 0.92rem; }
.card table thead { background: transparent; }
.card table thead th { padding-top: 0.4rem; }
.card .tabla-scroll { margin: 0 -0.4rem; }
td small { color: var(--muted); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem; font-size: 0.75rem; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.badge .ico { width: 0.95em; height: 0.95em; }
.badge:has(.ico)::before { display: none; }
.e-reg  { border-color: #D3DCD7; }
.e-bod  { border-color: rgba(28, 122, 80, 0.22); }
.e-ruta { border-color: rgba(176, 122, 34, 0.25); }
.e-ok, .c-ok { border-color: rgba(18, 96, 60, 0.18); }
.e-inc, .c-inc { border-color: rgba(178, 58, 58, 0.22); }

/* ---------- Formularios ---------- */
.formulario input, .formulario select, .formulario textarea,
.filtros input, .filtros select,
.acciones-rapidas select, .acciones-rapidas input:not([type="checkbox"]),
.fila-form select, .fila-form input, .buscar-paquete input {
  border-color: var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color var(--mov-rapido) var(--mov-facil), box-shadow var(--mov-rapido) var(--mov-facil);
}
.formulario input:hover, .formulario select:hover, .formulario textarea:hover,
.filtros input:hover, .filtros select:hover { border-color: #AFC2B7; }
.filtros input:focus, .filtros select:focus,
.acciones-rapidas select:focus, .acciones-rapidas input:focus,
.fila-form select:focus, .fila-form input:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(28, 122, 80, 0.16);
}
.formulario label { font-size: 0.86rem; color: var(--ink); }
.formulario ::placeholder, .filtros ::placeholder { color: #7D8C84; }

/* Formulario por secciones: cada bloque con su titulo y una grilla de dos
   columnas que vuelve a una en el celular. */
.formulario.seccionado { max-width: 820px; padding: 0; gap: 0; }
.formulario.seccionado .form-pie { border-radius: 0 0 var(--radio) var(--radio); }
.form-seccion { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.form-seccion + .form-seccion { border-top: 1px solid var(--line-suave); }
.form-seccion > h3 {
  margin: 0; display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.98rem;
}
.form-seccion > h3 .paso-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--negro); color: #fff; font-size: 0.78rem; font-family: "Inter", sans-serif;
}
.form-seccion > p.ayuda-seccion { margin: -0.6rem 0 0 2.2rem; font-size: 0.85rem; color: var(--muted); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campos-2 > * { min-width: 0; }
.form-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.6rem; background: var(--soft); border-top: 1px solid var(--line-suave);
}
.form-pie .nota { font-size: 0.82rem; color: var(--muted); }
@media (max-width: 640px) { .campos-2 { grid-template-columns: 1fr; } .form-seccion, .form-pie { padding: 1.1rem; } }

/* ---------- Barra de filtros y avance en lote ---------- */
.filtros { padding: 0.75rem 0.9rem; gap: 0.5rem; }
.filtros .ico-buscar { color: var(--muted); margin-left: 0.2rem; }
.acciones-rapidas {
  border: 1px solid var(--line); border-radius: var(--radio);
  background: #fff; box-shadow: var(--sombra);
  padding: 0.7rem 0.9rem;
}
.acciones-rapidas .ar-lbl { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); }
.acciones-rapidas .ar-lbl .ico { color: var(--bronce); }

/* ---------- Alertas ---------- */
.alerta { display: flex; align-items: flex-start; gap: 0.6rem; border: 1px solid transparent; border-radius: var(--radio-sm); }
.alerta > .ico { margin-top: 0.15rem; }
.alerta-ok { border-color: rgba(18, 96, 60, 0.18); }
.alerta-error { border-color: rgba(178, 58, 58, 0.22); }

/* ---------- Excepciones del panel ---------- */
.excepciones { border-left: 1px solid var(--line) !important; box-shadow: inset 3px 0 0 var(--rojo-solido), var(--sombra) !important; }
.excepciones > h3 > .ico { background: var(--rojo-fondo) !important; color: var(--rojo) !important; }

/* ---------- Pie del panel: respaldo ---------- */
.respaldo-estado {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radio);
  padding: 0.9rem 1.1rem; box-shadow: var(--sombra); line-height: 1.5;
}
.respaldo-estado > .ico { color: var(--verde); margin-top: 0.2rem; }

/* ---------- Login ---------- */
.login-caja { border-radius: 16px; padding: 2.2rem 2rem 1.8rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.login-logo { display: inline-block; width: 52px; height: 52px; margin-bottom: 0.7rem; }
.login-logo .marca-logo, .login-logo svg { width: 52px; height: 52px; border-radius: 13px; }
.login-marca h1 { letter-spacing: -0.015em; }
.login-marca p { display: inline-flex; align-items: center; gap: 0.35rem; }
.login-volver { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }

/* ---------- Conductor ---------- */
.cond-header {
  display: flex; align-items: center; gap: 0.7rem;
  border-bottom: 1px solid rgba(79, 208, 138, 0.18);
  margin-bottom: 1.2rem;
}
.cond-header .marca-logo { width: 32px; height: 32px; }
.cond-header .cond-rol { margin-left: auto; font: 600 0.72rem "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub-barra); }
.cond-card { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.cond-card h2 { display: flex; align-items: center; gap: 0.6rem; }
.cond-boton .ico { width: 1em; height: 1em; }
.cond-fin { border-color: #962F2F; }

/* ---------- Pines del mapa (iconos, ya no emojis) ---------- */
.camion-emoji {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--negro); color: #fff;
  border: 2px solid #fff;
  font-size: 1rem;
}
.camion-pin.on .camion-emoji { background: var(--verde); }
.camion-pin.destacado .camion-emoji { background: var(--bronce); color: var(--negro); }
.camion-emoji .ico { width: 18px; height: 18px; }
.camion-patente { margin-top: 3px; }
.sucursal-pin {
  display: grid; place-items: center; line-height: 1;
  width: 32px; height: 32px; border-radius: 9px;
  background: #fff; color: var(--negro); border: 2px solid var(--negro);
}
.sucursal-pin .ico { width: 17px; height: 17px; }
.destino-pin {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--bronce); color: var(--negro); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.destino-pin .ico { transform: rotate(45deg); width: 15px; height: 15px; }
.pin-eleccion { color: var(--rojo-solido); filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.pin-eleccion .ico { width: 34px; height: 34px; fill: #fff; }
.btn-ubicar { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--verde-osc); }
.btn-ubicar .ico { width: 15px; height: 15px; }
.acciones-fila { display: inline-flex; gap: 0.15rem; margin-left: 0.3rem; vertical-align: middle; }
.acciones-fila a {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  color: var(--muted);
}
.acciones-fila a:hover { background: var(--verde-tinte); color: var(--verde-osc); text-decoration: none; }
.acciones-fila .ico { width: 15px; height: 15px; }

/* ---------- Pie publico ---------- */
.pie-marca { display: inline-flex; align-items: center; gap: 0.55rem; }
.pie-marca .marca-logo { width: 28px; height: 28px; border-radius: 7px; }

/* ---------- Detalle del envio: acciones con icono ---------- */
.det-acciones .ico, .acciones-detalle .ico { width: 1em; height: 1em; }
.pase-marca { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---------- Pagina de error ---------- */
.error-caja { padding: 2.6rem 2rem; }
.error-ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--verde-tinte); color: var(--verde-osc); margin: 0 auto 0.6rem; font-size: 1.6rem; }

/* ---------- Indicadores ---------- */
.ind-periodos { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: var(--radio-sm); padding: 3px; gap: 2px; box-shadow: var(--sombra); }
.ind-periodos a { padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.ind-periodos a:hover { color: var(--negro); background: var(--soft); }
.ind-periodos a[aria-current="true"] { background: var(--negro); color: #fff; }
.ind-grafico { width: 100%; height: auto; display: block; }
.ind-grafico .eje { stroke: var(--line); stroke-width: 1; }
.ind-grafico .eje-txt { fill: var(--muted); font: 500 11px "Inter", sans-serif; }
.ind-grafico .barra-reg { fill: var(--verde); }
.ind-grafico .barra-ent { fill: var(--verde-vivo); }
.ind-leyenda { display: flex; gap: 1.2rem; font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; flex-wrap: wrap; }
.ind-leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ind-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ind-medidor { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; margin-top: 0.6rem; }
.ind-medidor > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.kpi .det { font-size: 0.78rem; color: var(--muted); }
.ind-vacio { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

@media print { header.barra { display: none; } }
.grid-flota { grid-template-columns: 1.6fr 1fr; margin-top: 1.2rem; }
@media (max-width: 860px) { .grid-flota { grid-template-columns: 1fr; } }
#paquetes-card { margin-top: 0; }
.mapa-panel-cabecera .card-titulo { border: none; padding: 0; margin: 0; }
.leyenda .ico { color: var(--verde-osc); }
.kpi .lbl { text-transform: none; letter-spacing: 0.01em; font-size: 0.8rem; }
.camion-emoji { width: 30px; height: 30px; }
.camion-patente { margin-top: 2px; }
.sucursal-pin { width: 30px; height: 30px; }
.pop-on { color: var(--vivo); }
.pop-off { color: #9AA8A0; }
.flota-seguir .ico { width: 13px; height: 13px; vertical-align: -2px; }
.flota-ayuda .ico, .leyenda .ico { width: 14px; height: 14px; vertical-align: -2px; }
.kpis-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpis-4 .num { font-size: 2.1rem; }
.bajada-editar { color: var(--muted); margin: -0.8rem 0 1.2rem; font-size: 0.92rem; }
.grid-cotizar { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 760px) { .grid-cotizar { grid-template-columns: 1fr; } }
.cond-intro { margin: -0.3rem 0 1rem; }
.cond-header .marca .sub { display: none; }
.et-marca { display: inline-flex; align-items: center; gap: 0.5rem; }
.et-marca .marca-logo { width: 24px; height: 24px; border-radius: 6px; }
.modalidad .opcion .ico { color: var(--verde-osc); }
.form-pie .nota .ico { color: var(--verde); }
/* La bitacora puede tener cientos de filas: se lee en su propia ventana con
   la cabecera fija, y no empuja el resto del panel hacia abajo. */
.bitacora-scroll { max-height: 440px; overflow-y: auto; }
.auditoria thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(7, 1fr); } .kpis.kpis-4 { grid-template-columns: repeat(4, 1fr); } }
.sucursales-hero { padding-bottom: 0; }
.sucursales-lista { max-width: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.sucursales-lista .sucursal { margin: 0; }
.sucursales-lista .datos { grid-template-columns: 1fr; }
.sucursales-lista .datos dt { display: inline-flex; align-items: center; gap: 0.35rem; }
.sucursales-pie { max-width: none; padding: 0; margin: 1.4rem 0 2.5rem; }
.datos a, .sucursales-pie a, .contacto-datos a { color: var(--verde-osc); font-weight: 600; text-underline-offset: 3px; }
.grid2 + section.card, .grid2 + .card, .kpis + section.card { margin-top: 1.25rem; }
button.mini-link {
  background: none; border: none; padding: 0.2rem 0; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--verde-osc);
  align-self: flex-start; width: auto !important;
}
.formulario input[type="file"] { padding: 0.45rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 0.8rem; padding: 0.4rem 0.9rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 7px; background: var(--soft);
  font: 600 0.85rem "Inter", sans-serif; color: var(--negro);
}
input[type="file"]::file-selector-button:hover { background: var(--verde-tinte); border-color: var(--verde); }
.formulario-entrega { max-width: 640px; }
.sucursales-lista .datos > div { grid-template-columns: 6.6rem minmax(0, 1fr); align-items: start; }
.sucursales-lista .datos dd { font-size: 0.95rem; }
.sucursales-lista .datos dt { padding-top: 0.2rem; }
/* En pantalla angosta la bitacora se apretaba a lo ancho y cada fila crecia
   a ~116 px de alto: mejor un ancho minimo y que su caja haga scroll lateral. */
.tabla-aud { min-width: 640px; }
.tabla-aud td { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.tabla-aud .aud-cuando, .tabla-aud .aud-usr, .tabla-aud .aud-ip { white-space: nowrap; }

/* =========================================================================
   Mejoras de la operacion (rama mejoras-27)
   ========================================================================= */
/* Menu "Herramientas" de la barra del panel: <details> abre sin JavaScript. */
.menu-herr { position: relative; }
.menu-herr > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.75rem; border-radius: var(--radio-sm);
  color: var(--texto-barra); font-weight: 500; font-size: 0.9rem; white-space: nowrap;
}
.menu-herr > summary::-webkit-details-marker { display: none; }
.menu-herr > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 0.2rem; }
.menu-herr > summary:hover, .menu-herr[open] > summary { background: rgba(255,255,255,.07); color: #fff; }
.menu-herr > summary[aria-current="page"] { background: rgba(79,208,138,.13); color: #fff; box-shadow: inset 0 -2px 0 var(--verde-vivo); }
.menu-herr-lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 250px; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: 0.4rem;
  display: flex; flex-direction: column;
}
header.barra .menu-herr-lista a:not(.boton) { color: var(--ink); padding: 0.5rem 0.6rem; border-radius: 7px; font-size: 0.88rem; }
header.barra .menu-herr-lista a:not(.boton):hover { background: var(--soft); color: var(--negro); }
header.barra .menu-herr-lista a[aria-current="page"] { background: var(--verde-tinte); color: var(--verde-osc); box-shadow: none; }
.menu-herr-lista .ico { color: var(--verde); }
.menu-herr-grupo { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.6rem 0.2rem; }
.menu-herr-grupo:first-child { padding-top: 0.3rem; }
@media (max-width: 900px) { .menu-herr-lista { position: fixed; left: 1rem; right: 1rem; top: auto; } }
/* 1. Reprogramar tras un intento fallido */
.reprogramar { margin: 1rem 0; box-shadow: inset 3px 0 0 var(--bronce), var(--sombra); }
.reprogramar > h3 > .ico { background: var(--bronce-fondo) !important; color: var(--bronce-osc) !important; }
.reprog-motivo { color: var(--texto-2); margin-bottom: 0.8rem; }
.reprog-form { display: flex; flex-direction: column; gap: 0.9rem; }
.reprog-opciones { border: none; display: grid; gap: 0.6rem; }
.reprog-opciones legend { font-weight: 600; margin-bottom: 0.4rem; }
.reprog-opcion { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radio-sm); cursor: pointer; }
.reprog-opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-tinte); }
.reprog-opcion > span { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.reprog-opcion select { padding: 0.45rem 0.6rem; border: 1px solid var(--borde); border-radius: 7px; font: inherit; max-width: 320px; background: #fff; }
.reprog-aviso { margin: 1rem 0; }
.fallido-card { margin-top: 1.25rem; max-width: 640px; }
/* 2. Devoluciones */
.devolucion { margin: 1rem 0; padding: 0; }
.devolucion > summary { cursor: pointer; padding: 1rem 1.4rem; font-weight: 600; display: flex; align-items: center; gap: 0.55rem; list-style: none; }
.devolucion > summary::-webkit-details-marker { display: none; }
.devolucion > summary .ico { color: var(--verde); }
.devolucion[open] > summary { border-bottom: 1px solid var(--line-suave); }
.devolucion > *:not(summary) { margin: 1rem 1.4rem; }
.devol-aviso { margin: 1rem 0; }
.devol-aviso a { color: inherit; font-weight: 700; }
/* 3. Pago contra entrega */
.alerta-aviso { background: var(--bronce-fondo); color: var(--bronce-osc); border-color: rgba(176,122,34,.25); }
.cobro-aviso { margin: 1rem 0; }
.cobro-confirmar { flex-direction: row !important; align-items: flex-start; gap: 0.6rem !important; padding: 0.8rem 0.9rem; border: 1px solid rgba(176,122,34,.35); background: var(--bronce-fondo); border-radius: var(--radio-sm); font-weight: 500 !important; }
.cobro-confirmar input { margin-top: 0.25rem; }
.et-cobro { border-top: 2px solid #000; padding: 0.6rem 1rem; font: 700 1.05rem "Space Grotesk", sans-serif; text-align: center; letter-spacing: 0.04em; background: #000; color: #fff; }
/* 4. Calificacion */
.calificar { margin: 1rem 0; }
.estrellas { border: none; display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { font-size: 2rem; line-height: 1; color: #CBD5CF; cursor: pointer; transition: color var(--mov-rapido); }
.estrellas label:hover, .estrellas label:hover ~ label, .estrellas input:checked ~ label { color: var(--bronce); }
.estrellas input:focus-visible + label { outline: 3px solid var(--verde); border-radius: 4px; }
.calificar-form { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.calif-comentario { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.88rem; width: 100%; max-width: 520px; }
.calif-comentario textarea { padding: 0.55rem 0.7rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); font: inherit; font-weight: 400; resize: vertical; }
.estrellas-fijas { color: #CBD5CF; font-size: 1.3rem; letter-spacing: 0.08em; }
.estrellas-fijas .llena { color: var(--bronce); }
.satis-grid { display: grid; grid-template-columns: 160px 1fr 1.4fr; gap: 1.5rem; align-items: start; }
.satis-total { display: flex; flex-direction: column; gap: 0.2rem; }
.satis-num { font: 700 2.6rem/1 "Space Grotesk", sans-serif; color: var(--negro); }
.satis-barras { list-style: none; display: grid; gap: 0.45rem; }
.satis-barras li { display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.satis-barras .ind-medidor { margin: 0; }
.satis-barras .ind-medidor > span { background: var(--bronce); }
.satis-comentarios { display: grid; gap: 0.6rem; }
.satis-comentarios blockquote { background: var(--soft); border-radius: var(--radio-sm); padding: 0.6rem 0.8rem; }
.satis-comentarios cite { font-size: 0.78rem; color: var(--muted); font-style: normal; }
@media (max-width: 860px) { .satis-grid { grid-template-columns: 1fr; } }
/* 5. PIN de retiro */
.pin-retiro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; box-shadow: inset 3px 0 0 var(--verde), var(--sombra); }
.pin-retiro h3 { border: none !important; padding: 0 !important; margin-bottom: 0.3rem !important; }
.pin-digitos { display: inline-flex; gap: 0.4rem; }
.pin-digitos span { display: grid; place-items: center; width: 2.6rem; height: 3.1rem; border-radius: 10px; background: var(--negro); color: #fff; font: 700 1.7rem "Space Grotesk", sans-serif; }
/* 6. Avisos por correo */
.lista-simple { list-style: none; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.bandeja { list-style: none; display: grid; gap: 0.4rem; }
.bandeja details { border: 1px solid var(--line-suave); border-radius: var(--radio-sm); }
.bandeja summary { cursor: pointer; padding: 0.6rem 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.correo-cuerpo { white-space: pre-wrap; font: 0.88rem/1.5 "Inter", sans-serif; background: var(--soft); margin: 0 0.8rem 0.8rem; padding: 0.8rem; border-radius: var(--radio-sm); }
/* 7. Carga masiva y etiquetas en lote */
.grid-carga { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px) { .grid-carga { grid-template-columns: 1fr; } }
.zona-archivo { position: relative; border: 2px dashed var(--borde); border-radius: var(--radio); padding: 1.4rem 1rem; text-align: center; align-items: center; cursor: pointer; background: var(--soft); }
.zona-archivo:hover { border-color: var(--verde); background: var(--verde-tinte); }
.zona-archivo .ico { color: var(--verde); }
.zona-archivo input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#texto-csv { font: 0.82rem/1.45 ui-monospace, "DejaVu Sans Mono", monospace; padding: 0.6rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); resize: vertical; }
.lista-errores { margin: 0.4rem 0 0 1.1rem; font-weight: 400; font-size: 0.88rem; }
.columnas-csv { grid-template-columns: 1fr 1fr; margin: 0.6rem 0; }
.etiquetas-lote { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: 2rem; }
@media print { .etiquetas-lote .etiqueta { break-after: page; page-break-after: always; } .etiquetas-lote { gap: 0; } }
/* 8 y 9. Empresas */
.credencial { margin: 1rem 0; align-items: flex-start; }
.credencial .datos { margin-top: 0.5rem; }
.clave-unica { font-size: 1rem; background: #fff; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid rgba(176,122,34,.35); user-select: all; word-break: break-all; }
.codigo-ejemplo { background: var(--negro); color: #D7F5E4; border-radius: var(--radio-sm); padding: 0.9rem 1rem; font: 0.8rem/1.55 ui-monospace, "DejaVu Sans Mono", monospace; overflow-x: auto; margin: 0.6rem 0; }
.acciones-empresa { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.filtro-inline { margin-left: auto; }
.filtro-inline select { padding: 0.35rem 0.5rem; border: 1px solid var(--borde); border-radius: 7px; font: inherit; font-size: 0.85rem; font-weight: 400; }
.empresa-nombre { color: #fff !important; font-weight: 600 !important; }