/* AguaReparto · sistema de diseño (un solo archivo).
   Variables arriba; después la base, el marco (encabezado, menú principal, pestañas, menú inferior),
   los componentes comunes (botones, tarjetas, tablas, formularios, etiquetas, avisos) y por último
   lo propio de cada pantalla. Contraste mínimo 4.5:1, objetivos táctiles de 44 px y foco visible. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* Colores */
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-suave: #f8fafc;
  --borde: #e3e8ef;
  --borde-fuerte: #c5cfdb;
  --texto: #0f1b2d;
  --texto-suave: #5b6b7f;
  --primario: #0b5fa5;
  --primario-hover: #094d86;
  --primario-suave: #e8f1fa;
  --primario-texto: #ffffff;
  --menu-fondo: #0b2545;
  --menu-texto: #d5deea;
  --menu-titulo: #9fb3cc;
  --menu-fondo-2: #071b35;
  --menu-activo: #1d6fc0;
  --menu-acento: #5eead4;
  --menu-foco: #9cc7f0;
  --aviso-fondo: #fff4e5;
  --aviso: #8a4200;
  --aviso-borde: #f5c58a;
  --peligro: #b42318;
  --peligro-fondo: #fdecec;
  --peligro-borde: #f2b8b5;
  --exito: #1e6b3a;
  --exito-fondo: #e7f6ec;
  --cian: #0b6577;
  --cian-fondo: #e6f6f9;
  --foco: #0b5fa5;
  /* Forma y espacio */
  --radio: 12px;
  --radio-chico: 8px;
  --radio-grande: 16px;
  --sombra: 0 1px 2px rgb(15 27 45 / 0.06);
  --sombra-alta: 0 8px 24px rgb(15 27 45 / 0.14);
  --alto-barra: 4rem;
  --alto-inferior: 4rem;
  --toque: 44px;
  /* Cifras en letra monoespaciada (fuentes del sistema, sin descargas) */
  --letra-cifras: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  color-scheme: light;
}

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

/* Lo que recibe el foco o se busca con un enlace no queda tapado por el encabezado fijo. */
html { scroll-padding-top: 5rem; }
@media (min-width: 1100px) { html:has(body.con-menu-principal) { scroll-padding-top: 9rem; } }
@media (max-width: 1099px) { html:has(body.con-menu-principal) { scroll-padding-top: 1rem; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 400 15px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primario); text-underline-offset: 2px; }
a:hover { color: var(--primario-hover); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 0.75rem; }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--superficie); padding: 0.75rem 1rem; border-radius: var(--radio-chico);
}
.saltar:focus { left: 1rem; top: 1rem; }

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

.icono {
  width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Marco ---------- */

/* Encabezado azul oscuro: marca y localidad, resumen del día, buscador, conexión y usuario.
   Debajo, el menú principal horizontal (un desplegable por grupo). Fijo arriba en pantallas
   anchas; en el celular el menú se abre como panel con el botón "Menú". */
.encabezado-app {
  position: sticky; top: 0; z-index: 20;
  background: var(--menu-fondo); color: var(--menu-texto);
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 2px 10px rgb(11 37 69 / 0.25);
}
.encabezado-app :focus-visible { outline-color: var(--menu-foco); }
.fila-encabezado {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: var(--alto-barra); padding: 0.5rem 1.5rem; max-width: 90rem; margin: 0 auto;
}
.marca {
  display: flex; align-items: center; gap: 0.65rem; min-height: var(--toque); min-width: 0;
  color: #fff; text-decoration: none; margin-right: auto;
}
.marca:hover { color: #fff; }
.marca img { flex: none; border-radius: 10px; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12); }
.texto-marca { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nombre-marca { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.localidad-marca {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem;
  font-size: 0.78rem; font-weight: 600; color: var(--menu-acento); white-space: nowrap;
}
.localidad-marca::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

.boton-menu {
  display: none; align-items: center; gap: 0.4rem; min-height: var(--toque); min-width: var(--toque);
  padding: 0 0.6rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: var(--radio-chico);
  background: rgb(255 255 255 / 0.06); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.boton-menu:hover, .boton-menu[aria-expanded="true"] { background: rgb(255 255 255 / 0.14); }
.aviso-stock {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; padding: 0.2rem 0.4rem 0.2rem 0.6rem;
  border-radius: 99px; background: var(--aviso-fondo); color: var(--aviso); border: 1px solid var(--aviso-borde);
  font-size: 0.85rem; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.aviso-stock:hover { color: var(--aviso); background: #ffead0; }
.aviso-stock .icono { width: 1rem; height: 1rem; }
.contador-aviso {
  min-width: 1.4rem; padding: 0 0.35rem; border-radius: 99px; text-align: center;
  background: var(--aviso); color: #fff; font-size: 0.75rem; line-height: 1.4rem;
}

.usuario { position: relative; }
.boton-usuario {
  display: flex; align-items: center; gap: 0.5rem; min-height: var(--toque);
  padding: 0.2rem 0.6rem 0.2rem 0.25rem; border: 1px solid transparent; border-radius: 99px;
  background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.boton-usuario:hover, .boton-usuario[aria-expanded="true"] { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.2); }
.avatar {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--menu-activo); color: #fff; font-size: 0.85rem; font-weight: 700;
}
.nombre-usuario { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 40; min-width: 13rem;
  list-style: none; margin: 0; padding: 0.4rem; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.menu-usuario :focus-visible { outline-color: var(--foco); }
.menu-usuario a, .menu-usuario button {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: var(--toque); padding: 0.5rem 0.75rem;
  border: 0; border-radius: var(--radio-chico); background: none; color: var(--texto);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-usuario a:hover, .menu-usuario button:hover { background: var(--fondo); color: var(--texto); }
.rol-usuario { padding: 0.4rem 0.75rem 0.5rem; color: var(--texto-suave); font-size: 0.85rem; border-bottom: 1px solid var(--borde); margin-bottom: 0.25rem; }

/* Menú principal horizontal: Inicio y un desplegable por grupo */
.menu-principal { background: var(--menu-fondo-2); border-top: 1px solid rgb(255 255 255 / 0.08); }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  max-width: 90rem; margin: 0 auto; padding: 0.4rem 1.5rem;
}
.menu > li { position: relative; }
.menu a, .boton-grupo {
  display: flex; align-items: center; gap: 0.5rem; min-height: var(--toque);
  padding: 0.4rem 0.8rem; border: 0; border-radius: var(--radio-chico); background: none;
  color: var(--menu-texto); font: inherit; font-size: 0.92rem; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.menu a .icono, .boton-grupo .icono { width: 1.1rem; height: 1.1rem; }
.menu > li > a:hover, .boton-grupo:hover, .boton-grupo[aria-expanded="true"] { background: rgb(255 255 255 / 0.1); color: #fff; }
.menu > li > a[aria-current="page"], .grupo-menu.actual > .boton-grupo { background: var(--menu-activo); color: #fff; font-weight: 650; }
.flecha-grupo { transition: transform 0.15s ease; }
.boton-grupo[aria-expanded="true"] .flecha-grupo { transform: rotate(180deg); }
.submenu {
  position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 40; min-width: 15rem;
  padding: 0.4rem !important; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.submenu :focus-visible { outline-color: var(--foco); }
.submenu a { color: var(--texto); font-weight: 500; }
.submenu a .icono { color: var(--primario); }
.submenu a:hover { background: var(--fondo); color: var(--texto); }
.submenu a[aria-current="page"] { background: var(--primario-suave); color: var(--primario); font-weight: 650; box-shadow: inset 3px 0 0 var(--primario); }
.velo { position: fixed; inset: 0; z-index: 25; background: rgb(11 37 69 / 0.45); }
/* Con el panel del menú abierto, el encabezado (que lo contiene) queda sobre el velo. */
body.menu-abierto .encabezado-app { z-index: 30; }

/* Miga: grupo y pantalla actual */
.miga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; padding: 0.55rem 1.5rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde); font-size: 0.85rem;
}
.grupo-barra { color: var(--texto-suave); font-weight: 500; }
.grupo-barra:not(:empty)::after { content: "›"; margin-left: 0.4rem; }
.grupo-barra:empty { display: none; }
.nombre-barra { font-weight: 650; }

/* Pestañas de las pantallas agrupadas */
.pestanas {
  display: flex; gap: 0.25rem; overflow-x: auto; padding: 0 1.5rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.pestanas a {
  display: flex; align-items: center; min-height: 48px; padding: 0 0.9rem; white-space: nowrap;
  color: var(--texto-suave); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent;
}
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current="page"] { color: var(--primario); border-bottom-color: var(--primario); }

/* Contenido */
main { padding: 1.5rem; max-width: 80rem; margin: 0 auto; }
main:focus { outline: none; }
.cargando-pagina { text-align: center; color: var(--texto-suave); margin-top: 3rem; }

/* Menú inferior del repartidor */
.menu-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -2px 8px rgb(15 27 45 / 0.06);
}
.menu-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: var(--alto-inferior); color: var(--texto-suave); text-decoration: none; font-size: 0.8rem; font-weight: 600;
}
.menu-inferior a .icono { width: 1.5rem; height: 1.5rem; }
.menu-inferior a[aria-current="page"] { color: var(--primario); }
.menu-inferior a[aria-current="page"] .icono { stroke-width: 2.4; }
body.con-menu-inferior main { max-width: 40rem; padding-bottom: calc(var(--alto-inferior) + 1.5rem + env(safe-area-inset-bottom, 0px)); }
body.con-menu-inferior .avisos { bottom: calc(var(--alto-inferior) + 1rem + env(safe-area-inset-bottom, 0px)); }

/* Celular y tableta: el menú principal se abre como panel con el botón */
@media (max-width: 1099px) {
  .boton-menu { display: inline-flex; }
  /* El encabezado de la oficina no queda fijo (en el celular ocuparía media pantalla). */
  body.con-menu-principal .encabezado-app { position: relative; }
  .fila-encabezado { padding: 0.5rem 1rem; gap: 0.5rem; }
  .menu-principal {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(20rem, 86vw); overflow-y: auto;
    padding-top: env(safe-area-inset-top, 0px); border-top: 0;
    transform: translateX(-100%); transition: transform 0.2s ease; visibility: hidden; box-shadow: var(--sombra-alta);
  }
  .menu-principal.abierto { transform: none; visibility: visible; }
  .menu { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 0.75rem; }
  .menu a, .boton-grupo { width: 100%; font-size: 1rem; }
  .flecha-grupo { margin-left: auto; }
  .submenu {
    position: static; min-width: 0; margin: 0.15rem 0 0.35rem; padding: 0 0 0 1.1rem !important;
    background: none; border: 0; border-left: 1px solid rgb(255 255 255 / 0.15); border-radius: 0; box-shadow: none;
  }
  .submenu :focus-visible { outline-color: var(--menu-foco); }
  .submenu a, .submenu a .icono { color: var(--menu-texto); }
  .submenu a:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
  .submenu a[aria-current="page"] { background: var(--menu-activo); color: #fff; box-shadow: none; }
  .miga, .pestanas { padding-left: 1rem; padding-right: 1rem; }
  main { padding: 1rem; }
}
@media (max-width: 720px) {
  .texto-boton-menu, .nombre-usuario, .aviso-stock .texto-aviso, .localidad-marca { display: none; }
  .nombre-marca { font-size: 0.95rem; }
  .marca img { width: 34px; height: 34px; }
  .nombre-marca { overflow: hidden; text-overflow: ellipsis; }
  .estado-conexion { font-size: 0.75rem; padding: 0.2rem 0.55rem; }
}
/* Muy angosto: el nombre más chico y, con señal, "En línea" queda como un punto verde (el texto
   sigue para los lectores de pantalla; "Sin señal" y los pendientes se ven completos). */
@media (max-width: 480px) {
  .nombre-marca { font-size: 0.78rem; letter-spacing: 0; white-space: normal; line-height: 1.15; text-overflow: clip; }
  .fila-encabezado { gap: 0.4rem; padding: 0.5rem 0.75rem; }
  .estado-conexion:not(.sin-senal):not(.sincronizando):not(.con-error) {
    font-size: 0; gap: 0; padding: 0.45rem; min-height: 0;
  }
  .estado-conexion:not(.sin-senal):not(.sincronizando):not(.con-error)::before { width: 0.6rem; height: 0.6rem; }
}

/* ---------- Componentes ---------- */

/* Tarjetas */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.25rem; margin-bottom: 1rem;
}
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta > h2:first-child { margin-bottom: 1rem; }

.acceso { max-width: 26rem; margin: 3rem auto; padding: 2rem; }
.acceso .logo { display: block; margin: 0 auto 0.75rem; }
.acceso h1 { text-align: center; }
.acceso .pie { text-align: center; margin-top: 1rem; font-size: 0.95rem; }
.acceso .pie p { margin: 0.4rem 0; }

.subtitulo { color: var(--texto-suave); margin-top: -0.25rem; }
.suave { color: var(--texto-suave); font-size: 0.9rem; }

/* Encabezados, botoneras y filtros */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.encabezado h1 { margin: 0; }
.acciones, .botonera { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filtros { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: end; }
.columnas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.columnas .tarjeta { margin-bottom: 0; }
.fila-campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--toque); padding: 0.5rem 1.1rem; border-radius: var(--radio-chico);
  font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  background: var(--primario); color: var(--primario-texto); border: 1px solid var(--primario);
}
.boton:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--primario-texto); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; }
.boton.secundario { background: var(--superficie); color: var(--primario); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--primario-suave); border-color: var(--primario); }
.boton.peligro { background: var(--superficie); color: var(--peligro); border-color: var(--peligro-borde); }
.boton.peligro:hover { background: var(--peligro-fondo); border-color: var(--peligro); }
.boton.chico { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.boton.bloque { width: 100%; }
.boton.grande { min-height: 56px; font-size: 1.1rem; padding: 0.75rem 1.5rem; }
.boton .icono { width: 1.15rem; height: 1.15rem; }

.boton[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Formularios */
.campo { margin-bottom: 1rem; }
.campo label, .etiqueta-campo { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.campo .ayuda { display: block; color: var(--texto-suave); font-size: 0.85rem; margin-top: 0.3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"],
input[type="url"], select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  background-color: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico); padding: 0.55rem 0.75rem; min-height: var(--toque);
}
input:hover, select:hover, textarea:hover { border-color: #9aa9bb; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgb(11 95 165 / 0.35); outline-offset: 0; border-color: var(--primario);
}
input[disabled], select[disabled], textarea[disabled] { background-color: var(--superficie-suave); color: var(--texto-suave); }
input[aria-invalid="true"] { border-color: var(--peligro); }
::placeholder { color: #5b6b7f; }

input[type="file"] { min-height: var(--toque); max-width: 100%; font: inherit; font-size: 0.9rem; }
input[type="file"]::file-selector-button {
  min-height: var(--toque); margin-right: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--primario); font: inherit; font-weight: 600; cursor: pointer;
}

.con-boton { display: flex; gap: 0.5rem; }
.con-boton input { flex: 1; min-width: 0; }

.interruptor { display: flex; align-items: center; gap: 0.75rem; min-height: var(--toque); cursor: pointer; }
.interruptor input, .opcion input, label.dia input, .matriz input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--primario); }

fieldset.medios { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.5rem 1rem; margin: 0 0 1rem; }
fieldset.medios legend { font-weight: 600; padding: 0 0.25rem; }
.opcion { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque); margin-right: 1.25rem; cursor: pointer; }

details > summary { cursor: pointer; font-weight: 600; min-height: var(--toque); display: flex; align-items: center; }

/* Avisos y mensajes */
.mensaje { border-radius: var(--radio-chico); padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.mensaje:empty { display: none; }
.mensaje.error { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.mensaje.exito { background: var(--exito-fondo); color: var(--exito); border-color: #b5dfc3; }
.mensaje.info { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }

.avisos {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 0.5rem; width: min(30rem, calc(100% - 2rem));
}
.avisos .mensaje { box-shadow: var(--sombra-alta); margin: 0; }

.version-nueva {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center;
  background: var(--aviso-fondo); color: var(--aviso); padding: 0.5rem 1rem; border-bottom: 1px solid var(--aviso-borde);
}

/* Etiquetas */
.insignia {
  display: inline-flex; align-items: center; padding: 0.1rem 0.6rem; border-radius: 99px;
  font-size: 0.78rem; font-weight: 650; line-height: 1.5; white-space: nowrap;
  background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde);
}
.insignia.activo { background: var(--exito-fondo); color: var(--exito); border-color: #b5dfc3; }
.insignia.inactivo { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.insignia.pendiente { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }

/* Indicador de conexión */
.estado-conexion {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.2rem 0.7rem; border-radius: 99px;
  font-size: 0.8rem; font-weight: 650; text-decoration: none; white-space: nowrap;
  background: var(--exito-fondo); color: var(--exito); border: 1px solid #b5dfc3;
}
.estado-conexion::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.estado-conexion:hover { color: var(--exito); }
.estado-conexion.sin-senal { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }
.estado-conexion.sincronizando { background: var(--primario-suave); color: var(--primario); border-color: #b9d3ec; }
.estado-conexion.con-error { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }

/* Tablas */
.tabla-contenedor {
  overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); margin-bottom: 1rem;
}
.tarjeta .tabla-contenedor { margin-left: -1px; margin-right: -1px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
thead th {
  background: var(--superficie-suave); font-size: 0.78rem; color: var(--texto-suave); font-weight: 650;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfd; }
td select { min-width: 9rem; }
td.numero, th.numero { text-align: right; }
tr.total td { font-weight: 700; border-top: 2px solid var(--borde-fuerte); background: var(--superficie-suave); }
tr.anulada td { opacity: 0.65; }

/* Tablas apilables: tabla en pantallas anchas, fichas en celulares */
@media (max-width: 720px) {
  .tabla-usuarios thead, .tabla-apilable thead { display: none; }
  .tabla-usuarios tr, .tabla-apilable tr {
    display: grid; gap: 0.35rem; padding: 0.75rem; border-bottom: 1px solid var(--borde);
  }
  .tabla-usuarios td, .tabla-apilable td { border: 0; padding: 0; }
  .tabla-usuarios td[data-etiqueta]::before, .tabla-apilable td[data-etiqueta]::before {
    content: attr(data-etiqueta) ": "; color: var(--texto-suave); font-size: 0.85rem;
  }
}

/* Datos (pares etiqueta / valor) */
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0; }
dl.datos dt { color: var(--texto-suave); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* Cifras en letra monoespaciada: importes, cantidades y totales */
.cifra, .valor-cifra, dl.cifras dd, td.numero, .diferencia, .saldo-grande, .cantidad-revisar, .mono {
  font-family: var(--letra-cifras); letter-spacing: 0;
}

/* Cifras destacadas */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.cifra-gestion { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 1rem; background: var(--superficie); }
.cifra-gestion .titulo-cifra { color: var(--texto-suave); font-size: 0.85rem; font-weight: 500; }
.cifra-gestion .valor-cifra { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.cifra-gestion.destacada { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); }
.cifra-gestion.negativa .valor-cifra, .diferencia.negativa { color: var(--peligro); }
.cifra-gestion.positiva .valor-cifra, .diferencia.positiva { color: var(--exito); }
.diferencia { font-weight: 700; }

.lista-simple { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0; }
.lista-simple > li { padding: 0.6rem 0; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; }
.lista-simple > li:last-child { border-bottom: 0; }

/* Resultados de búsqueda de clientes */
.resultados { list-style: none; margin: -0.5rem 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.resultados .boton { width: 100%; justify-content: flex-start; text-align: left; font-weight: 500; color: var(--texto); }

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

/* Inicio: tablero */
.tablero { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: 1.25rem; }
.indicador {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra);
  color: inherit; text-decoration: none;
  --tono: var(--texto); --tono-fondo: var(--fondo);
}
.indicador.tono-verde { --tono: var(--exito); --tono-fondo: var(--exito-fondo); }
.indicador.tono-azul { --tono: var(--primario); --tono-fondo: var(--primario-suave); }
.indicador.tono-naranja { --tono: var(--aviso); --tono-fondo: var(--aviso-fondo); }
.indicador.tono-cian { --tono: var(--cian); --tono-fondo: var(--cian-fondo); }
a.indicador:hover { border-color: var(--tono); color: inherit; box-shadow: var(--sombra-alta); }
.cabeza-indicador { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.indicador .titulo-indicador {
  color: var(--texto-suave); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.icono-indicador {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 10px;
  background: var(--tono-fondo); color: var(--tono);
}
.icono-indicador .icono { width: 1.15rem; height: 1.15rem; }
.indicador .valor-indicador {
  font-family: var(--letra-cifras); font-size: 1.65rem; font-weight: 700; line-height: 1.2; color: var(--tono);
  overflow-wrap: anywhere;
}
.indicador.tono-cian .valor-indicador { color: var(--texto); }
.unidad-indicador { font-size: 0.85rem; font-weight: 500; color: var(--texto-suave); }
.indicador .detalle-indicador { color: var(--texto-suave); font-size: 0.85rem; }
.indicador .detalle-indicador.aviso { color: var(--aviso); font-weight: 600; }
.tipos-indicador { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.chip-tipo {
  padding: 0.1rem 0.45rem; border-radius: 6px; border: 1px solid #b9e3ea; background: var(--cian-fondo); color: var(--cian);
  font-family: var(--letra-cifras); font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.chip-tipo.bajo { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.paneles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.paneles .tarjeta { margin-bottom: 0; }
.avance-vehiculos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.avance-vehiculos .fila-avance { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.barra-avance { height: 0.6rem; border-radius: 99px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; }
.barra-avance > span { display: block; height: 100%; background: var(--primario); border-radius: 99px; }
.para-revisar { list-style: none; margin: 0; padding: 0; }
.para-revisar a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none;
}
.para-revisar li:last-child a { border-bottom: 0; }
.para-revisar a:hover { background: var(--superficie-suave); }
.para-revisar .texto-revisar { flex: 1; }
.para-revisar .icono:last-child { color: var(--texto-suave); }
.para-revisar .cantidad-revisar {
  min-width: 2rem; padding: 0.1rem 0.5rem; border-radius: 99px; text-align: center; font-weight: 700; font-size: 0.85rem;
  background: var(--aviso-fondo); color: var(--aviso);
}
.para-revisar .cantidad-revisar.cero { background: var(--fondo); color: var(--texto-suave); }
.accesos-rapidos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

/* Inicio: barra de progreso de cada vehículo (entregados en verde, no entregados en naranja) */
.linea-progreso { display: flex; align-items: center; gap: 0.75rem; }
.barra-progreso {
  flex: 1; display: flex; height: 1rem; border-radius: 99px; overflow: hidden;
  background: var(--fondo); border: 1px solid var(--borde);
}
.barra-progreso .tramo { display: block; height: 100%; transition: width 0.4s ease; }
.barra-progreso .tramo.entregado { background: #2f9e5b; }
.barra-progreso .tramo.omitido { background: #e08a2c; }
.porcentaje-avance { min-width: 3.2rem; text-align: right; font-weight: 700; font-size: 1.05rem; }
.detalle-avance { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0.35rem 0 0; font-size: 0.85rem; }
.detalle-avance .punto { display: inline-flex; align-items: center; gap: 0.3rem; }
.detalle-avance .punto::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--borde); }
.detalle-avance .punto.entregado::before { background: #2f9e5b; }
.detalle-avance .punto.omitido::before { background: #e08a2c; }
.detalle-avance .suave { margin-left: auto; }
.accesos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.accesos a { display: block; text-decoration: none; color: inherit; }
.accesos a:hover .tarjeta { border-color: var(--primario); }

/* Matriz de permisos */
.matriz th[scope="col"] { text-align: center; white-space: nowrap; }
.matriz td.celda { text-align: center; }
.matriz .modulo th { background: var(--fondo); text-transform: capitalize; color: var(--texto); }
.matriz .permiso-desc { display: block; font-size: 0.82rem; color: var(--texto-suave); }

/* Clientes */
.etiqueta-saldo, .etiqueta-envases {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--letra-cifras); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.etiqueta-saldo.al-dia { background: var(--fondo); color: var(--texto-suave); border-color: var(--borde); }
.etiqueta-saldo.debe { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.etiqueta-saldo.a-favor { background: var(--exito-fondo); color: var(--exito); border-color: #b5dfc3; }
.etiqueta-envases { background: var(--cian-fondo); color: var(--cian); border-color: #b9e3ea; }
.etiqueta-envases.cero { background: var(--fondo); color: var(--texto-suave); border-color: var(--borde); }
.etiqueta-envases .icono { width: 0.95rem; height: 0.95rem; }
.tabla-clientes td.mono { white-space: nowrap; }
.alerta-baja { border: 2px solid var(--peligro); }
.a-revisar { border-left: 4px solid var(--aviso); }
fieldset.dias { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.dias legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 0.35rem; }
.opciones-dias { display: flex; flex-wrap: wrap; gap: 0.5rem; }
label.dia {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--toque); padding: 0 0.85rem;
  border: 1px solid var(--borde-fuerte); border-radius: 99px; cursor: pointer; background: var(--superficie);
}
label.dia:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); color: var(--primario); font-weight: 650; }

/* Stock */
.panel-stock { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-bottom: 1rem; }
.tarjeta.stock { margin: 0; border-radius: var(--radio-grande); }
.tarjeta.stock.bajo { border: 2px solid var(--peligro); background: var(--peligro-fondo); }
.cabeza-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; margin-bottom: 0.9rem; }
.cabeza-stock h2 { margin: 0; flex: 1 1 calc(100% - 3rem); min-width: 0; }
.cabeza-stock .aviso-bajo { margin-left: 2.9rem; }
.icono-stock {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 10px;
  background: var(--cian-fondo); color: var(--cian);
}
.tarjeta.stock.bajo .icono-stock { background: #fff; color: var(--peligro); }
.aviso-bajo {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 99px;
  background: var(--peligro); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.aviso-bajo .icono { width: 0.95rem; height: 0.95rem; }
.datos-stock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.6rem; }
.dato-stock { padding: 0.55rem 0.65rem; border-radius: var(--radio-chico); background: var(--superficie-suave); border: 1px solid var(--borde); min-width: 0; }
.dato-stock dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.dato-stock dd { margin: 0; font-family: var(--letra-cifras); font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.dato-stock.llenos { background: var(--cian-fondo); border-color: #b9e3ea; }
.dato-stock.llenos dd { color: var(--cian); font-size: 1.6rem; }
.tarjeta.stock.bajo .dato-stock { background: #fff; border-color: var(--peligro-borde); }
.tarjeta.stock.bajo .dato-stock.llenos dd { color: var(--peligro); }
.otros-stock { margin-bottom: 0.5rem; }
.cifra { font-size: 2.25rem; font-weight: 700; line-height: 1; margin-right: 0.25rem; }
dl.cifras { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; margin: 0 0 0.75rem; }
dl.cifras dt { color: var(--texto-suave); }
dl.cifras dd { margin: 0; font-weight: 700; text-align: right; }
.umbral-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--texto-suave); }
.umbral-fila input.umbral { width: 5.5rem; }
/* Stock bajo: aviso fuerte dentro de la pantalla de stock (en las demás, el aviso chico de la barra). */
body.pantalla-alerta main { box-shadow: inset 0 4px 0 var(--peligro); }
.banner-stock-bajo {
  display: block; background: var(--peligro-fondo); color: var(--peligro); border: 2px solid var(--peligro);
  font-size: 1.05rem; font-weight: 600; padding: 1rem 1.25rem; border-radius: var(--radio); margin-bottom: 1rem;
}

/* Mi ruta */
.progreso-ruta { padding: 1rem 1.25rem; }
.progreso-ruta .fila-avance { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 0.5rem; }
.progreso-ruta .faltan { flex: 1 1 14rem; }
.progreso-ruta .cifra { font-size: 1.75rem; }
.progreso-ruta .barra-avance { height: 0.75rem; }
.faltan { font-size: 1rem; margin: 0; }
.tarjeta.parada { padding: 1rem 1.1rem; }
.tarjeta.parada h2, .tarjeta.parada h3 { margin-bottom: 0.25rem; }
.tarjeta.parada .direccion { margin-bottom: 0.25rem; color: var(--texto); }
.tarjeta.parada.siguiente { border: 2px solid var(--primario); box-shadow: 0 4px 16px rgb(11 95 165 / 0.12); padding: 1.25rem; }
.tarjeta.parada.siguiente h2 { font-size: 1.35rem; }
.tarjeta.parada .etiqueta {
  display: inline-block; margin-bottom: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 99px;
  background: var(--primario-suave); color: var(--primario); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.datos-siguiente { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.dato-siguiente { padding: 0.6rem 0.75rem; border-radius: var(--radio-chico); background: var(--superficie-suave); border: 1px solid var(--borde); }
.dato-siguiente .titulo-dato { display: block; font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; }
.dato-siguiente .valor-dato { font-weight: 700; }
.dato-siguiente.deuda { background: var(--peligro-fondo); border-color: var(--peligro-borde); }
.dato-siguiente.deuda .valor-dato { color: var(--peligro); }
.acciones-parada { display: grid; gap: 0.5rem; }
.acciones-parada .secundarias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.5rem; }
.como-llegar { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--texto-suave); }
.proximas { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.proximas > li { border-bottom: 1px solid var(--borde); }
.proximas > li:last-child { border-bottom: 0; }
.parada-proxima { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.15rem 0.75rem; align-items: center; padding: 0.7rem 0.9rem; }
.parada-proxima .numero-parada {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--fondo); color: var(--texto-suave); font-weight: 700; font-size: 0.85rem;
}
.parada-proxima h3 { margin: 0; font-size: 0.98rem; }
.parada-proxima p { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }
.parada-proxima .deuda-chica { color: var(--peligro); font-weight: 650; }
.titulo-seccion { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); margin: 1.5rem 0 0.5rem; }
.mas-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mas-opciones .boton { width: 100%; justify-content: flex-start; min-height: 56px; }
.resumen-cliente { margin-bottom: 0.75rem; }
.resumen-cliente p { margin: 0 0 0.25rem; }
.saldo, .saldo-grande { font-weight: 700; }
.saldo.deuda, .saldo-grande.deuda { color: var(--peligro); }
.saldo.a-favor, .saldo-grande.a-favor { color: var(--exito); }
.saldo-grande { font-size: 1.4rem; }
.acciones-ruta { margin: 1rem 0; }
.lista-simple.cola > li { display: block; }
.lista-simple.cola > li.con-error { border-left: 4px solid var(--peligro); padding-left: 0.75rem; }
.sin-ruta { font-size: 1.05rem; }

/* Formulario de entrega */
.productos-entrega { list-style: none; padding: 0; margin: 0 0 1rem; }
.productos-entrega > li { padding: 0.75rem 0; border-bottom: 1px solid var(--borde); }
.productos-entrega .producto { margin-bottom: 0.4rem; font-weight: 600; }
.productos-entrega .cantidades { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.productos-entrega .rotulo { display: block; font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0.2rem; }
.resumen-entrega { margin-bottom: 1rem; }
.resumen-entrega dd ul { margin: 0; padding-left: 1.1rem; }
.contador { display: inline-flex; align-items: center; gap: 0.35rem; }
.contador .boton { min-width: var(--toque); font-size: 1.2rem; padding: 0; }
input.cantidad { width: 4.2rem; text-align: center; font-size: 1.1rem; }
.total-entrega { font-size: 1.25rem; }
.confirmacion { border: 2px solid var(--primario); }

/* Rutas: orden de paradas */
.paradas-ordenables { list-style: none; padding: 0; margin: 0 0 1rem; }
.parada-orden {
  display: grid; grid-template-columns: auto auto 1fr; gap: 0.25rem 0.75rem; align-items: start;
  padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--borde); background: var(--superficie);
}
.parada-orden > .botonera { grid-column: 1 / -1; justify-content: flex-end; }
@media (min-width: 721px) {
  .parada-orden { grid-template-columns: auto auto 1fr auto; }
  .parada-orden > .botonera { grid-column: auto; }
}
.parada-orden .numero { font-weight: 700; min-width: 1.6rem; text-align: right; color: var(--texto-suave); }
.parada-orden.estado-reprogramado, .parada-orden.estado-excluido { opacity: 0.7; }
.asa {
  display: grid; place-items: center; min-width: 32px; min-height: var(--toque);
  cursor: grab; touch-action: none; user-select: none; font-size: 1.2rem; line-height: 1;
  border-radius: 6px; color: var(--texto-suave);
}
.asa:hover { background: var(--fondo); }
.arrastrando { opacity: 0.6; outline: 2px dashed var(--primario); }
form.excepcion, form.anulacion { margin-top: 0.75rem; }
.mover-a { display: inline-flex; align-items: center; gap: 0.35rem; }
.mover-a input { width: 4.25rem; text-align: center; padding: 0.4rem; }

/* Recorridos: pestañas por día, tabla compacta y barra fija de guardado */
.pestanas-dias { display: flex; gap: 0.25rem; overflow-x: auto; margin: 0.25rem 0 1rem; border-bottom: 1px solid var(--borde); }
.pestanas-dias button {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0 0.9rem;
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--texto-suave); white-space: nowrap;
}
.pestanas-dias button:hover { color: var(--texto); }
.pestanas-dias button[aria-current="true"] { color: var(--primario); border-bottom-color: var(--primario); }
.pestanas-dias .cuenta-dia {
  min-width: 1.6rem; padding: 0 0.4rem; border-radius: 99px; background: var(--fondo); color: var(--texto-suave);
  font-size: 0.78rem; line-height: 1.5rem; text-align: center;
}
.pestanas-dias button[aria-current="true"] .cuenta-dia { background: var(--primario-suave); color: var(--primario); }
.tabla-recorrido { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 1rem; }
.fila-recorrido, .cabecera-recorrido {
  display: grid; align-items: center; gap: 0.5rem 0.75rem;
  grid-template-columns: 2rem 2.5rem minmax(10rem, 1.2fr) minmax(10rem, 1.4fr) 5.5rem minmax(min(100%, 12rem), 1fr) auto;
  padding: 0.35rem 0.75rem;
}
.cabecera-recorrido {
  background: var(--superficie-suave); border-bottom: 1px solid var(--borde); min-height: 40px;
  font-size: 0.78rem; font-weight: 650; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em;
}
.tabla-recorrido .paradas-ordenables { margin: 0; }
.fila-recorrido { border-bottom: 1px solid var(--borde); background: var(--superficie); }
.paradas-ordenables > .fila-recorrido:last-child { border-bottom: 0; }
.fila-recorrido .numero { font-weight: 700; text-align: right; color: var(--texto-suave); }
.fila-recorrido .celda-cliente a { color: var(--texto); text-decoration: none; }
.fila-recorrido .celda-cliente a:hover { color: var(--primario); text-decoration: underline; }
.fila-recorrido .celda-direccion, .fila-recorrido .celda-dias { font-size: 0.9rem; color: var(--texto-suave); }
.fila-recorrido .celda-vehiculo select { min-height: var(--toque); padding: 0.3rem 0.5rem; font-size: 0.9rem; }
.fila-recorrido .celda-vehiculo .campo { margin: 0; }
.fila-recorrido .celda-vehiculo label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fila-recorrido .botonera { flex-wrap: nowrap; gap: 0.25rem; }
.fila-recorrido .botonera .boton.chico { min-width: var(--toque); padding: 0.3rem 0.6rem; }
.fila-recorrido.movido { background: var(--aviso-fondo); }
.movidos .asa, .movidos .subir, .movidos .bajar, .movidos .mover-a { visibility: hidden; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 5; margin: 1rem -1.25rem -1.25rem; padding: 0.75rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  background: var(--superficie); border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 -4px 12px rgb(15 27 45 / 0.06);
}
.barra-guardar.con-cambios { background: var(--aviso-fondo); border-top-color: var(--aviso-borde); }
.barra-guardar .resumen-cambios { margin: 0; font-weight: 600; }
.barra-guardar.con-cambios .resumen-cambios { color: var(--aviso); }
@media (max-width: 960px) {
  .cabecera-recorrido { display: none; }
  .fila-recorrido { grid-template-columns: 2rem 2rem 1fr; padding: 0.6rem 0.75rem; }
  .fila-recorrido .celda-direccion, .fila-recorrido .celda-dias, .fila-recorrido .celda-vehiculo { grid-column: 3; }
  .fila-recorrido .botonera { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
}
.cambio-vehiculo .campo { margin: 0.4rem 0 0; }

/* Alertas de reparto */
.alerta-reparto { border-left: 4px solid var(--peligro); }
.alerta-reparto.resuelta { border-left-color: var(--exito); opacity: 0.85; }
.alerta-reparto h2 .suave { font-weight: 400; }

/* Gestión */
.atajos { display: flex; gap: 0.4rem; align-items: flex-end; flex-wrap: wrap; }
.caja-repartidor h2 { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.solo-impresion { display: none; }

/* Configuración, feriados y auditoría */
.logo-empresa { width: auto; height: 72px; max-width: 200px; object-fit: contain; }
.imagen-config { margin: 0.25rem 0 0.5rem; }
.vista-imagen { max-width: 160px; max-height: 160px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: #fff; }
pre.detalle-auditoria {
  white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; background: var(--superficie-suave);
  border: 1px solid var(--borde); padding: 0.75rem; border-radius: var(--radio-chico); max-height: 24rem; overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Impresión y PDF (impresión del navegador): solo el contenido, en blanco y negro legible. */
@media print {
  @page { margin: 12mm; }
  :root { --fondo: #fff; --superficie: #fff; --superficie-suave: #fff; --texto: #000; --texto-suave: #333; --borde: #999; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .encabezado-app, .velo, .miga, .pestanas, .menu-inferior, .version-nueva, .avisos, .saltar, .no-imprimir, .botonera, button, form,
  details:not([open]), .barra-guardar, #estado-conexion { display: none !important; }
  .solo-impresion { display: block; }
  .encabezado-impresion { margin: 0 0 4mm; padding-bottom: 2mm; border-bottom: 1px solid #000; }
  main { padding: 0; max-width: none; box-shadow: none !important; }
  .tarjeta, .tabla-contenedor { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  h1 { font-size: 16pt; margin: 0 0 3mm; }
  a { color: #000; text-decoration: none; }
  thead th { background: #fff; }
  th, td { border-bottom: 1px solid #bbb; padding: 1mm 2mm; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  /* En papel, las tablas apilables vuelven a ser tablas. */
  .tabla-apilable thead { display: table-header-group !important; }
  .tabla-apilable tr { display: table-row !important; }
  .tabla-apilable td, .tabla-apilable th { display: table-cell !important; }
  .tabla-apilable td::before { content: none !important; }
}

/* Avisos al repartidor */
.avisos-repartidor {
  margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--radio);
  background: var(--aviso-fondo); color: var(--aviso); border: 2px solid var(--aviso);
}
.avisos-repartidor h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin-bottom: 0.5rem; }
.avisos-repartidor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.avisos-repartidor li { padding-top: 0.75rem; border-top: 1px solid var(--aviso-borde); }
.avisos-repartidor li:first-child { padding-top: 0; border-top: 0; }
.avisos-repartidor .suave { color: var(--aviso); }
.texto-aviso-repartidor { font-size: 1.05rem; font-weight: 650; color: var(--texto); margin-bottom: 0.2rem; }
.aviso-parada {
  display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.35rem 0; padding: 0.4rem 0.6rem;
  border-radius: var(--radio-chico); background: var(--aviso-fondo); color: var(--aviso); font-weight: 600; font-size: 0.9rem;
}
.menu-inferior a { position: relative; }
.menu-inferior a[data-contador]::after {
  content: attr(data-contador); position: absolute; top: 0.4rem; left: calc(50% + 0.5rem);
  min-width: 1.2rem; padding: 0 0.3rem; border-radius: 99px; text-align: center;
  background: var(--aviso); color: #fff; font-size: 0.72rem; line-height: 1.2rem;
}
.formulario-aviso { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.formulario-aviso .botonera { margin-bottom: 0.75rem; }

/* WhatsApp */
.mensaje-whatsapp.para-operador { border-left: 4px solid var(--aviso); }
.encabezado-mensaje { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
.encabezado-mensaje h2 { margin: 0; }
.texto-whatsapp { white-space: pre-wrap; background: var(--superficie-suave); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.6rem 0.8rem; }
.conversacion { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.conversacion li { padding: 0.5rem 0.75rem; border-left: 3px solid var(--borde-fuerte); background: var(--superficie-suave); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.conversacion p { margin: 0.1rem 0; }
.simulador-whatsapp { margin-top: 0.75rem; padding: 0.75rem; border: 1px dashed var(--peligro-borde); border-radius: var(--radio-chico); background: var(--peligro-fondo); }
.etiqueta-simulador { font-weight: 650; color: var(--peligro); margin-bottom: 0.5rem; }
.simulador-whatsapp .botonera { margin-bottom: 0.5rem; }
.simulador-whatsapp .campo { flex: 1; margin: 0; }
.simulador-whatsapp .con-boton { align-items: flex-end; }

/* Mapa en vivo y ubicación del repartidor */
.columnas-mapa { display: grid; gap: 1rem; grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: start; }
.columnas-mapa .tarjeta { margin: 0; }
.mapa-en-vivo { height: min(70vh, 40rem); min-height: 22rem; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie-suave); }
.mapa-cliente { height: 18rem; margin: 0.5rem 0 1rem; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
@media (max-width: 900px) { .columnas-mapa { grid-template-columns: 1fr; } }
.lista-vehiculos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.vehiculo-mapa { padding: 0.6rem 0.75rem; border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio-chico); }
.vehiculo-mapa.en-vivo { border-left-color: var(--primario); }
.vehiculo-mapa.pausada, .vehiculo-mapa.vieja { border-left-color: var(--aviso); }
.vehiculo-mapa div { font-size: 0.9rem; color: var(--texto-suave); }
.leaflet-container { font: inherit; }
.leaflet-tooltip { font-size: 0.8rem; color: var(--texto); }
.franja-ubicacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 1rem;
  background: var(--primario-suave); color: var(--primario); border-bottom: 1px solid #b9d3ec; font-weight: 600; font-size: 0.9rem;
}
.franja-ubicacion span { flex: 1; min-width: 12rem; }
.franja-ubicacion.pausada, .franja-ubicacion.sin_permiso { background: var(--aviso-fondo); color: var(--aviso); border-bottom-color: var(--aviso-borde); }
.progreso-ruta .empezar-ruta { margin-top: 0.75rem; min-height: 52px; }

/* Repartidor en pantallas angostas (desde 320 px y con la letra agrandada del celular): nada se
   sale por la derecha; los textos largos se cortan en varias líneas y los botones se acomodan. */
body.con-menu-inferior main { overflow-wrap: anywhere; }
body.con-menu-inferior .encabezado h1 { min-width: 0; }
body.con-menu-inferior .boton { max-width: 100%; white-space: normal; text-align: center; }
.progreso-ruta .faltan { flex: 1 1 auto; min-width: 0; }
.parada-proxima { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.parada-proxima > div { min-width: 0; }
.datos-siguiente { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.acciones-parada .secundarias { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.franja-ubicacion span { min-width: 0; flex: 1 1 10rem; }
.franja-ubicacion .ayuda-ubicacion { flex-basis: 100%; }
.franja-ubicacion summary { min-height: var(--toque); color: inherit; text-decoration: underline; font-weight: 650; }
.franja-ubicacion ol { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; font-weight: 500; }
.contador { flex-wrap: wrap; }
.mas-opciones .boton { text-align: left; justify-content: flex-start; }
details.fecha-simulada > summary { display: block; min-height: var(--toque); padding: 0.55rem 0; }
details.fecha-simulada > summary::after { content: " ▾"; }
details.fecha-simulada[open] > summary::after { content: " ▴"; }
details.fecha-simulada[open] > summary { margin-bottom: 0.5rem; }
details.fecha-simulada input[type="date"] { margin: 0.25rem 0; }
@media (max-width: 400px) {
  body.con-menu-inferior .fila-encabezado { padding-left: 0.75rem; padding-right: 0.75rem; }
  body.con-menu-inferior main { padding-left: 0.75rem; padding-right: 0.75rem; }
  body.con-menu-inferior .tarjeta.parada.siguiente { padding: 1rem; }
  .parada-proxima { padding: 0.6rem 0.6rem; gap: 0.15rem 0.5rem; }
}

/* Modales y comparación de recorridos */
.modal-telon {
  position: fixed; inset: 0; background: rgba(11, 27, 45, 0.6); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  overflow-y: auto; backdrop-filter: blur(2px);
}
.modal-contenido {
  background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--borde);
  max-width: 56rem; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 1rem;
}
.comparacion-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem;
}
.tarjeta-metrica {
  padding: 0.75rem 1rem; border-radius: var(--radio-chico); border: 1px solid var(--borde);
  background: var(--superficie-suave); display: flex; flex-direction: column; gap: 0.25rem;
}
.tarjeta-metrica.destacada {
  border-color: #107e3e; background: #eefaf2; color: #0d6832;
}
.tarjeta-metrica .valor-metrica {
  font-size: 1.35rem; font-weight: 700; font-family: var(--letra-cifras);
}
.comparacion-listas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 700px) {
  .comparacion-listas { grid-template-columns: 1fr; }
}
.mapa-comparacion {
  height: 20rem; border-radius: var(--radio-chico); border: 1px solid var(--borde);
  overflow: hidden; margin: 0.5rem 0;
}
.fila-orden-comparada {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--borde); font-size: 0.88rem;
}
.fila-orden-comparada.movida {
  background: #f4fbf7;
}

/* Simulador WhatsApp y pedidos entrantes */
.burbuja-whatsapp {
  background: #d9fdd3; color: #111b21; border-radius: 8px 8px 8px 0;
  padding: 0.6rem 0.9rem; max-width: 85%; margin: 0.5rem 0;
  font-size: 0.95rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  white-space: pre-wrap;
}
.grupo-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem;
}
.chip-ejemplo {
  background: var(--superficie-suave); border: 1px solid var(--borde);
  border-radius: 16px; padding: 0.25rem 0.65rem; font-size: 0.82rem;
  cursor: pointer; transition: background 0.15s; color: var(--texto);
}
.chip-ejemplo:hover {
  background: var(--primario-suave); border-color: var(--primario); color: var(--primario);
}

/* Banner push para repartidores */
.banner-push {
  background: var(--primario-suave); border-left: 4px solid var(--primario);
}
.banner-push .texto-push {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
}
.banner-push .texto-push svg {
  flex-shrink: 0; width: 1.1rem; height: 1.1rem; color: var(--primario);
}

/* WhatsApp del día: clientes de la ruta de hoy para elegir */
.grupo-whatsapp { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.5rem 1rem; margin: 0 0 1rem; }
.grupo-whatsapp legend { font-weight: 600; padding: 0 0.25rem; display: inline-flex; gap: 0.5rem; align-items: center; }
.grupo-whatsapp .lista-simple { margin-bottom: 0; }
.grupo-whatsapp .lista-simple > li { justify-content: space-between; }
.grupo-whatsapp .opcion { margin-right: 0; }
.grupo-whatsapp li.no-elegible .opcion { cursor: default; }
.casilla-vacia { display: inline-block; width: 1.25rem; height: 1.25rem; flex: none; }

/* Mi ruta: lo que pidió el cliente por WhatsApp */
.pedido-whatsapp { margin: 0.35rem 0; padding: 0.4rem 0.6rem; border-left: 4px solid #2f9e5b; background: var(--exito-fondo); color: var(--exito); border-radius: var(--radio-chico); }

/* Entrega en forma de lista: un renglón por tipo de bidón */
.renglones > li.renglon-entrega { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: start; }
.renglon-entrega .tipo-renglon { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.renglon-entrega .tipo-renglon .rotulo { flex-basis: 100%; }
.renglon-entrega .tipo-renglon select { flex: 1 1 12rem; min-width: 0; font-weight: 600; }
.renglon-entrega .cantidades { grid-column: 1 / -1; align-items: end; }
.renglon-entrega .subtotal-renglon { margin-left: auto; text-align: right; }
.renglon-entrega .subtotal-renglon strong { display: block; min-height: var(--toque); line-height: var(--toque); }
.renglon-entrega .quitar-renglon { grid-column: 2; grid-row: 1; min-width: var(--toque); }
.agregar-renglon { margin: 0 0 1rem; }

/* Cierre de caja: resumen y detalle en listas (en lugar de cuadros) */
.resumen-caja { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.25rem; margin: 0.5rem 0 1rem; }
.resumen-caja dt { color: var(--texto-suave); }
.resumen-caja dd { margin: 0; }
.resumen-caja .destacado { font-weight: 700; font-size: 1.1rem; }
.cuenta-en-caja { margin: 0.25rem 0 0.5rem; }
.detalle-caja { margin: 0 0 1rem; }
.detalle-caja h3 { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borde); padding-bottom: 0.3rem; margin-bottom: 0.25rem; }
.filas-detalle > li { gap: 0.25rem 0.75rem; }
.filas-detalle .importe { margin-left: auto; font-weight: 600; }
tr.elegida td { background: var(--fondo); }

/* Control de carga */
.cabeza-tarjeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.cabeza-tarjeta h2 { margin: 0; }
.carga-dia .botonera { margin-top: 0.5rem; }
.carga-dia dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0.5rem 0; }
.carga-dia dt { color: var(--texto-suave); }

/* Liquidación del reparto: una hoja por repartidor al imprimir */
@media print {
  .liquidacion + .liquidacion { break-before: page; }
}

/* Clientes: ubicación faltante o aproximada en la lista */
.ubicacion-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.25rem; }
.parada-proxima .ubicacion-parada { margin-top: 0.35rem; }

/* ---------- Encabezado: logo y buscador (rediseño 2026-11-06) ---------- */
.marca { margin-right: 0; }
.logo-marca {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px; background: #fff; border: 2px solid #29a8e0;
}
.marca .logo-marca img { width: 38px; height: 38px; border-radius: 0; box-shadow: none; }
.buscador-cabecera { position: relative; flex: 1 1 28rem; max-width: 36rem; margin: 0 auto 0 1.5rem; }
.caja-buscador {
  display: flex; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0 0.85rem;
  border-radius: 10px; background: #fff; color: var(--texto-suave);
}
.caja-buscador .icono { width: 1.1rem; height: 1.1rem; flex: none; }
.caja-buscador input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 0.95rem; color: var(--texto);
}
.caja-buscador:focus-within { box-shadow: 0 0 0 3px var(--menu-foco); }
.resultados-buscador {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
  max-height: 22rem; overflow-y: auto;
}
.opcion-buscador { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: var(--radio-chico); cursor: pointer; }
.opcion-buscador .suave { font-size: 0.82rem; }
.opcion-buscador:hover, .opcion-buscador[aria-selected="true"] { background: var(--primario-suave); }
.resultados-buscador .sin-resultados { padding: 0.5rem 0.65rem; }
@media (max-width: 900px) { .buscador-cabecera { display: none; } }
.fila-encabezado > .estado-conexion { margin-left: auto; }
.buscador-cabecera:not([hidden]) ~ .estado-conexion { margin-left: 0; }

/* ---------- Inicio (rediseño 2026-11-06) ---------- */
.tablero-inicio { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.75rem; }
@media (max-width: 1100px) { .tablero-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tablero-inicio { grid-template-columns: 1fr; } }
.tarjeta-inicio {
  display: block; padding: 1.25rem 1.35rem; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
}
a.tarjeta-inicio:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.titulo-tarjeta-inicio { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
.cifra-inicio { margin: 0 0 0.6rem; font-size: 2.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.unidad-inicio { font-size: 1.05rem; font-weight: 500; }
.fila-tarjeta { margin: 0.2rem 0; color: var(--texto-suave); }
.fila-tarjeta strong { color: var(--texto); }
.fila-tarjeta .deuda { color: var(--peligro); }
.fila-tarjeta .sin-deuda { color: var(--exito); }
.tarjeta-inicio hr { border: 0; border-top: 1px solid var(--borde); margin: 0.75rem 0; }
.nota-tarjeta { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--texto-suave); }
.grupos-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.grupo-stock h3 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.grupo-stock ul { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.chip-stock { display: flex; gap: 0.35rem; }
.chip-stock span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: 0.2rem 0.55rem;
  border-radius: var(--radio-chico); font-weight: 700; font-variant-numeric: tabular-nums;
}
.chip-stock .tipo-chip { background: var(--primario-suave); color: var(--primario); border: 1px solid #b9d3ec; }
.chip-stock .cantidad-chip { background: var(--exito-fondo); color: var(--exito); border: 1px solid #b5dfc3; }
.chip-stock.bajo .tipo-chip, .chip-stock.bajo .cantidad-chip { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }

.seccion-inicio { margin-bottom: 1.75rem; }
.titulo-seccion-inicio { margin: 0 0 0.85rem; font-size: 1.35rem; }
.vehiculos-inicio { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.tarjeta-vehiculo { padding: 1.15rem 1.35rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); box-shadow: var(--sombra); }
.cabeza-vehiculo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-bottom: 0.75rem; }
.cabeza-vehiculo h3 { margin: 0; font-size: 1.1rem; }
.cabeza-vehiculo .insignias { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.insignia.en-curso { background: var(--primario-suave); color: var(--primario); border-color: #b9d3ec; }
.tarjeta-vehiculo .detalle-avance .total-avance { margin-left: auto; }
.pie-vehiculo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.pie-vehiculo .a-bordo { margin: 0; }
.pie-vehiculo .botonera { margin: 0; }

.lista-atencion { margin: 0; padding: 0; list-style: none; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); box-shadow: var(--sombra); }
.aviso-inicio { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.25rem; }
.aviso-inicio + .aviso-inicio { border-top: 1px solid var(--borde); }
.aviso-inicio p { flex: 1; margin: 0; }
.aviso-inicio .boton { flex: none; }
.marca-aviso {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.95rem;
}
.aviso-inicio.error .marca-aviso { background: var(--peligro); }
.aviso-inicio.aviso .marca-aviso { background: #b45309; }
.aviso-inicio.info .marca-aviso { background: #64748b; font-family: Georgia, serif; font-style: italic; }
.cantidad-aviso { display: inline-block; min-width: 1.8rem; padding: 0 0.45rem; border-radius: var(--radio-chico); background: var(--fondo); text-align: center; font-weight: 700; }

/* Login: logo completo */
.acceso .logo-completo { display: block; width: 180px; height: auto; margin: 0 auto 0.75rem; }
.acceso .logo-completo ~ .subtitulo { text-align: center; }

/* Impresión: logo chico en el encabezado */
.encabezado-impresion .logo-impresion { height: 44px; width: auto; vertical-align: middle; margin-right: 0.5rem; }

@media (max-width: 720px) {
  .logo-marca { width: 40px; height: 40px; border-radius: 10px; }
  .marca .logo-marca img { width: 32px; height: 32px; }
}
@media (max-width: 640px) {
  .aviso-inicio { flex-wrap: wrap; padding: 0.85rem 1rem; }
  .aviso-inicio p { flex: 1 1 calc(100% - 2.5rem); }
  .aviso-inicio .boton { margin-left: 2.45rem; }
}

/* Planilla de transferencias: búsqueda por cliente o quien transfiere */
.buscar-titular { flex: 1 1 22rem; }
.fila-busqueda { display: flex; gap: 0.5rem; }
.fila-busqueda input { flex: 1; min-width: 0; }
.editar-titular { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.editar-titular input { flex: 1 1 10rem; min-width: 0; }
td[data-etiqueta="Quien transfiere"] > span { margin-right: 0.5rem; }
.lista-titulares { list-style: none; margin: 0; padding: 0; }
.lista-titulares li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--borde); }
.lista-titulares li:first-child { border-top: 0; }

/* Productos: aviso antes de cambiar el tipo o la marca retornable de un producto usado */
.confirmar-cambio h3 { margin: 0 0 0.5rem; font-size: 1rem; color: inherit; }
.confirmar-cambio ul { margin: 0.25rem 0 0.75rem; padding-left: 1.2rem; }
.confirmar-cambio li { margin-bottom: 0.3rem; }
.confirmar-cambio .campo label { color: var(--texto); }
.tabla-productos td.numero .suave { font-family: 'Inter', system-ui, sans-serif; white-space: nowrap; }
.tabla-productos .acciones-producto { flex-wrap: nowrap; gap: 0.4rem; justify-content: flex-end; }
@media (max-width: 900px) { .tabla-productos .acciones-producto { flex-wrap: wrap; justify-content: flex-start; } }
.filtros .campo:only-child { max-width: 20rem; }

/* Asistente de IA (solo admin): botón del encabezado y panel de chat lateral */
.boton-asistente {
  display: flex; align-items: center; gap: 0.4rem; min-height: var(--toque); min-width: var(--toque);
  padding: 0.3rem 0.8rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 99px;
  background: rgb(255 255 255 / 0.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.boton-asistente:hover, .boton-asistente[aria-expanded="true"] { background: rgb(255 255 255 / 0.18); }
.boton-asistente .icono { width: 1.15rem; height: 1.15rem; }
@media (max-width: 900px) { .texto-boton-asistente { display: none; } .boton-asistente { padding: 0.3rem; justify-content: center; } }

.panel-asistente {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(26rem, 100vw);
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto);
  border-left: 1px solid var(--borde); box-shadow: var(--sombra-alta);
}
.panel-asistente[hidden] { display: none; }
.cabecera-asistente { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem 1rem; border-bottom: 1px solid var(--borde); }
.cabecera-asistente h2 { display: flex; align-items: center; gap: 0.4rem; margin: 0 auto 0 0; font-size: 1.1rem; }
.cabecera-asistente h2 .icono { width: 1.2rem; height: 1.2rem; color: var(--primario); }
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center; width: var(--toque); height: var(--toque);
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); cursor: pointer;
}
.boton-icono:hover { background: var(--superficie-suave); }
.boton-icono .icono { width: 1.1rem; height: 1.1rem; }
.cupo-asistente { margin: 0; padding: 0.4rem 1rem; font-size: 0.85rem; color: var(--texto-suave); background: var(--superficie-suave); }
.cupo-asistente:empty { display: none; }
.cupo-asistente.agotado { color: var(--aviso); background: var(--aviso-fondo); }
.cuerpo-asistente { flex: 1; overflow-y: auto; padding: 1rem; }
.sugerencias-asistente ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mensajes-asistente { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.mensaje-asistente { border-radius: var(--radio); padding: 0.6rem 0.8rem; line-height: 1.45; overflow-wrap: anywhere; }
.mensaje-asistente.usuario { align-self: flex-end; max-width: 85%; background: var(--primario); color: #fff; }
.mensaje-asistente.respuesta { background: var(--superficie-suave); border: 1px solid var(--borde); }
.mensaje-asistente.pensando { color: var(--texto-suave); font-style: italic; }
.mensaje-asistente.aviso { background: var(--aviso-fondo); color: var(--aviso); border: 1px solid var(--aviso-borde); }
.mensaje-asistente.agotado { background: var(--peligro-fondo); color: var(--peligro); border: 1px solid var(--peligro-borde); }
.texto-asistente p { margin: 0 0 0.5rem; }
.texto-asistente p:last-child { margin-bottom: 0; }
.texto-asistente ul, .texto-asistente ol { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }
.tabla-asistente { font-size: 0.85rem; }
.tabla-asistente th, .tabla-asistente td { padding: 0.3rem 0.5rem; }
.enlaces-asistente { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.enlaces-asistente .icono { width: 0.9rem; height: 0.9rem; }
.fuentes-asistente { margin: 0.5rem 0 0; font-size: 0.8rem; }
.formulario-asistente { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem 1rem; border-top: 1px solid var(--borde); }
.formulario-asistente textarea { flex: 1; min-height: var(--toque); resize: vertical; max-height: 10rem; font: inherit; }
.formulario-asistente .boton { min-width: var(--toque); }
.formulario-asistente .boton .icono { width: 1.1rem; height: 1.1rem; }
@media (max-width: 720px) { .panel-asistente { width: 100vw; border-left: 0; } }
.claves-asistente { margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.claves-asistente h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.claves-asistente ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.claves-asistente li { margin-bottom: 0.4rem; }
.claves-asistente code { font-family: var(--letra-cifras); font-size: 0.85rem; overflow-wrap: anywhere; }
.tarjeta-accion { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--primario); border-radius: var(--radio-chico); background: var(--superficie); }
.tarjeta-accion h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.tarjeta-accion textarea { width: 100%; box-sizing: border-box; font: inherit; margin-top: 0.25rem; }
.items-accion { list-style: none; margin: 0.5rem 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.items-accion li { padding: 0.15rem 0; }
.estado-accion { margin: 0.5rem 0; font-size: 0.9rem; }
.estado-accion:empty { display: none; }
.estado-accion.exito { color: var(--exito); }
.estado-accion.error { color: var(--peligro); }
.totales-importacion dd { margin-bottom: 0.3rem; }
.bloqueos-anulacion { margin: 0.5rem 0 0; padding-left: 1.2rem; }