/* VISOR · Gobantes — tema corporativo según la paleta oficial de marca:
   #c21532 (rojo), #9b001c (granate), #000000/#525252/#696969 (negros y grises),
   #e8e7e7 (gris claro), #ffffff. Centralizada en variables. */
:root {
  --rojo-700: #9b001c;      /* granate oficial: hovers y acentos profundos */
  --rojo-600: #c21532;      /* rojo oficial Gobantes */
  --rojo-500: #d63b54;      /* tinte derivado para acentos sobre fondo oscuro */
  --rojo-100: #f5d0d7;
  --rojo-50: #fbeef1;
  --negro-900: #18161c;
  --negro-800: #242129;
  --negro-700: #363240;
  --gris-700: #525252;      /* gris oscuro oficial */
  --gris-500: #696969;      /* gris medio oficial */
  --fondo: #f7f7f8;
  --tarjeta: #ffffff;
  --borde: #e8e7e7;         /* gris claro oficial */
  --texto: #1a1c20;
  --texto-suave: #696969;   /* gris medio oficial */
  --ok: #15803d;
  --ok-fondo: #e8f7ee;
  --alerta: #92400e;
  --alerta-fondo: #fdf3df;
  --error: #b91c1c;
  --error-fondo: #fdecec;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(19, 20, 23, .05), 0 8px 24px rgba(19, 20, 23, .05);
  --sombra-alta: 0 2px 4px rgba(19, 20, 23, .07), 0 18px 48px rgba(19, 20, 23, .16);
  --anillo-foco: 0 0 0 3px rgba(194, 21, 50, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Detalles de sistema: selección con la marca y foco visible consistente en
   toda la aplicación (accesibilidad con teclado sin ensuciar el uso con mouse) */
::selection { background: var(--rojo-100); color: var(--negro-900); }
:focus-visible { outline: 2px solid var(--rojo-600); outline-offset: 2px; border-radius: 4px; }

/* Barras de desplazamiento sobrias (contenido claro y barra lateral oscura) */
.contenido::-webkit-scrollbar, .tabla-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.contenido::-webkit-scrollbar-thumb, .tabla-scroll::-webkit-scrollbar-thumb {
  background: #c9cbd1; border-radius: 999px; border: 2px solid var(--fondo);
}
.contenido::-webkit-scrollbar-thumb:hover, .tabla-scroll::-webkit-scrollbar-thumb:hover { background: #aaadb5; }
.barra-lateral::-webkit-scrollbar { width: 8px; }
.barra-lateral::-webkit-scrollbar-thumb { background: var(--negro-700); border-radius: 999px; }
/* App-shell: la barra lateral siempre completa; solo el contenido se desplaza
   (vertical y horizontal), así el menú nunca se corta ni se va de pantalla. */
body {
  margin: 0; display: flex; height: 100vh; overflow: hidden;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo); color: var(--texto);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Barra lateral (negro corporativo) ── */
.barra-lateral {
  width: 208px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--negro-900); height: 100vh; overflow-y: auto;
}
.marca {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 17px;
}
.marca-logo {
  width: 42px; height: 42px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.3; }
.marca-nombre {
  font-weight: 800; letter-spacing: 3px; font-size: 14.5px; color: #ffffff;
}
.marca-producto { font-size: 10px; font-weight: 500; color: #9aa0ab;
                  letter-spacing: .4px; }

/* Selector de sucursal activa (barra lateral) */
.selector-sucursal {
  padding: 12px 14px; border-bottom: 1px solid var(--negro-700);
  display: flex; flex-direction: column; gap: 5px;
}
.selector-sucursal:empty { display: none; }
.sel-suc-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #6b7077;
}
.sel-suc {
  width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--negro-800); color: #fff; border: 1px solid var(--negro-700);
  cursor: pointer; font-family: inherit;
}
.sel-suc:focus { outline: 2px solid var(--rojo-600); }

/* Vista Sucursales */
.suc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-top: 12px;
}
.suc-card {
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px;
  background: var(--tarjeta); display: flex; flex-direction: column; gap: 8px;
}
.suc-card.activa { border-color: var(--rojo-600); box-shadow: 0 0 0 3px rgba(194, 21, 49, .10); }
.suc-cab { display: flex; align-items: center; gap: 8px; }
.suc-cab b { font-size: 15px; }
.suc-dep { font-size: 12.5px; color: var(--texto); min-height: 18px; }
.suc-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
                margin-top: 4px; }

.menu { display: flex; flex-direction: column; padding: 10px 10px 12px; gap: 2px; }
.menu-seccion {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b7077; padding: 12px 12px 5px; user-select: none;
}
/* Los enlaces del menú no llevan href a propósito: así el módulo abierto no
   queda escrito en la dirección web. Sin href el navegador no pone la manito
   ni deja llegar con el tabulador, así que ambas cosas se reponen aquí. */
.menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  color: #a6abb4; text-decoration: none; border-radius: 9px;
  font-weight: 500; font-size: 13.5px; border-left: 3px solid transparent;
  transition: background .12s, color .12s;
  cursor: pointer; user-select: none;
}
.menu a:focus-visible { outline: 2px solid var(--rojo-600); outline-offset: -2px; }
.menu a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.menu a:hover { background: var(--negro-800); color: #fff; }
.menu a.activo {
  background: rgba(200, 16, 46, .16); color: #fff; font-weight: 600;
  border-left-color: var(--rojo-600);
}
.menu a.activo svg { opacity: 1; }
.barra-pie {
  margin-top: auto; padding: 14px 18px; font-size: 11px;
  color: #6b7077; border-top: 1px solid var(--negro-700);
}

/* ── Contenido ── */
.contenido {
  flex: 1; min-width: 0; height: 100vh; overflow: auto;
  padding: 26px 32px 48px; scroll-behavior: smooth;
}
.contenido > * { max-width: 1340px; }
h1 { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: var(--negro-900); letter-spacing: -.3px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 22px; font-size: 13.5px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--negro-900); }

/* ── Estados de carga y vacíos (componentes estándar) ── */
.cargando {
  display: flex; align-items: center; gap: 10px; color: var(--texto-suave);
  font-size: 13.5px; padding: 6px 0;
}
.cargando::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--rojo-100); border-top-color: var(--rojo-600);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Selector de conductor del día (tabla de flota): compacto, dentro de la celda */
.sel-conductor {
  width: 100%; max-width: 220px; padding: 6px 8px; font-size: 12.5px;
  border: 1px solid var(--borde); border-radius: 7px; font-family: inherit;
  background: #fff; cursor: pointer;
}
.sel-conductor:focus { outline: none; border-color: var(--rojo-500);
                       box-shadow: 0 0 0 3px var(--rojo-100); }

/* Cuenta que aún no define su contraseña: se oculta la plataforma detrás del
   cambio obligatorio (no puede abrir ningún módulo todavía) */
body.clave-pendiente .barra-lateral,
body.clave-pendiente .contenido { display: none; }

/* Clave inicial de una cuenta nueva: se muestra una sola vez, en grande y en
   monoespaciada, para dictarla o copiarla sin equivocarse */
.clave-inicial {
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  font-size: 21px; font-weight: 700; letter-spacing: 1px; text-align: center;
  background: var(--negro-050, #f4f5f7); border: 1px dashed var(--borde, #e2e5ea);
  border-radius: 10px; padding: 16px 12px; user-select: all; word-break: break-all;
}

/* Punto de "en línea": usuario con acceso muy reciente (monitoreo de accesos) */
.punto-vivo {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(21, 128, 61, .5); animation: latido-vivo 1.8s infinite;
}
@keyframes latido-vivo {
  0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .5); }
  70% { box-shadow: 0 0 0 5px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}
.vacio {
  text-align: center; padding: 34px 20px; color: var(--texto-suave);
  font-size: 13.5px;
}
.vacio .vacio-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 10px;
  background: var(--rojo-50); color: var(--rojo-600); font-size: 22px;
}
/* Solo el TÍTULO va en su propia línea. Antes la regla alcanzaba a cualquier
   <b> del cuerpo, y un texto como «Agregue uno con + Agregar vehículo» quedaba
   partido en tres renglones. */
.vacio .vacio-titulo {
  display: block; color: var(--negro-900); font-size: 14.5px; margin-bottom: 3px;
}
.vacio p { margin: 0 auto; max-width: 46ch; line-height: 1.5; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px; margin-bottom: 16px;
}
.tarjeta-mapa { padding: 6px; }

/* ── Indicador de pasos ── */
.pasos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.paso {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--texto-suave);
  background: var(--fondo); border: 1px solid var(--borde);
  padding: 5px 12px 5px 6px; border-radius: 999px;
}
.paso b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px;
  background: #c2c6cc; color: #fff;
}
.paso.activo { color: var(--rojo-700); background: var(--rojo-50); border-color: var(--rojo-100); }
.paso.activo b { background: var(--rojo-600); }
.paso.hecho { color: var(--ok); background: var(--ok-fondo); border-color: #cdebd8; }
.paso.hecho b { background: var(--ok); }

/* ── Formularios ── */
label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 5px; letter-spacing: .2px;
}
input, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 8px; font-size: 13.5px; font-family: inherit;
  background: #fff; color: var(--texto);
}
input:focus, select:focus {
  outline: none; border-color: var(--rojo-500);
  box-shadow: 0 0 0 3px var(--rojo-100);
}
input[type="file"] { padding: 7px; background: var(--fondo); }
.fila-form { display: grid; gap: 14px; margin-bottom: 14px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rojo-600); color: #fff; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(155, 0, 28, .18);
  transition: background .12s, transform .05s, box-shadow .12s;
}
.boton:hover { background: var(--rojo-700); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.boton:disabled { background: #cfd2d6; cursor: not-allowed; transform: none; }
.boton-secundario {
  background: #fff; color: var(--negro-900); border: 1px solid var(--borde);
  box-shadow: 0 1px 2px rgba(19, 20, 23, .05);
}
.boton-secundario:hover { background: var(--rojo-50); border-color: var(--rojo-100); color: var(--rojo-700); }
.boton-chico { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.boton-peligro { background: #fff; color: var(--error); border: 1px solid var(--borde);
                 box-shadow: 0 1px 2px rgba(19, 20, 23, .05); }
.boton-peligro:hover { background: var(--error-fondo); border-color: #f3c5c5; }
/* Deshabilitado: apagado y coherente (sin mezclar fondo gris con texto rojo) */
.boton-peligro:disabled { background: #f4f5f6; color: #a9adb3;
                          border-color: var(--borde); }

/* ── Tablas ──
   Un solo sistema para toda la herramienta: misma densidad, misma letra
   (12.5px), encabezados sobrios, numéricas a la derecha con cifras tabulares y
   texto largo recortado con «…» (el valor completo queda al pasar el cursor).
   Las variantes de abajo solo ajustan casos puntuales, nunca el tamaño base. */
.tabla-scroll { overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums;   /* cifras alineadas columna a columna */
}
th {
  text-align: left; padding: 9px 9px; color: var(--texto-suave);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; border-bottom: 1px solid var(--borde);
  background: #fafafb; white-space: nowrap;
}
td { padding: 8px 9px; border-bottom: 1px solid #f0f0f2; vertical-align: middle; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: #f8f8fa; }
tbody tr:last-child td { border-bottom: none; }
td input { padding: 5px 8px; font-size: 12.5px; }
/* Numéricas: SIEMPRE a la derecha y tabulares (una cifra bajo la otra). */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { padding-right: 12px; }
/* Una tabla dentro de una tarjeta no necesita el relleno de la tarjeta a los
   lados: se pega a los bordes y respira mejor. */
.tarjeta-tabla { padding: 6px 6px 8px; }
.tarjeta-tabla > .tabla-scroll { border-radius: 10px; }
.tabla-pie { display: flex; justify-content: flex-end; padding: 10px 10px 4px; }

/* Mantenedores (Clientes, Vehículos, Reportes): muchas columnas y, al final,
   una de acciones. Con el relleno de siempre la fila no cabía en un notebook de
   1280 y había que arrastrar la tabla justo para llegar a "Eliminar", que
   además quedaba cortado sin ninguna pista de que seguía a la derecha. */
.tabla-compacta { font-size: 12px; }
.tabla-compacta th, .tabla-compacta td { padding: 7px 6px; }
.tabla-compacta th { letter-spacing: .4px; }
.tabla-compacta td .boton-chico { padding: 5px 8px; font-size: 12px; }
.tabla-compacta td .chip { font-size: 10.5px; padding: 2px 7px; }
.tabla-compacta td:last-child .boton-chico + .boton-chico { margin-left: 2px; }

/* Reportes: encabezados y celdas centrados para una lectura más ordenada.
   El relleno lateral va más apretado que el general: son muchas columnas de
   cifras cortas y con el relleno normal la tabla no cabía en un notebook. */
.tabla-reportes th, .tabla-reportes td {
  text-align: center; white-space: nowrap; padding-left: 6px; padding-right: 6px;
}
.tabla-reportes td .boton-chico, .tabla-reportes td .chip { vertical-align: middle; }

/* Bitácora y afines: tablas con UNA columna de texto largo. El nowrap general
   empujaba la tabla fuera de la pantalla y obligaba a desplazarse para leer el
   detalle, que es justo lo que se vino a leer. Aquí el ancho se reparte fijo,
   lo corto no se parte y el texto largo baja de línea dentro de su columna. */
.tabla-relato { table-layout: fixed; }
.tabla-relato th, .tabla-relato td {
  text-align: left; white-space: normal; overflow-wrap: break-word;
}
.tabla-relato .col-corta { white-space: nowrap; }
.tabla-relato td { vertical-align: top; padding-top: 11px; }
.tabla-relato td .chip { white-space: nowrap; }
/* Correo y origen: un dato de una sola palabra NUNCA se parte a mitad de
   palabra (se ve roto y desordenado). Si no cabe, se recorta con "…" y el
   valor completo queda al pasar el cursor. */
.tabla-relato .celda-recorte {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.tabla-relato div.celda-recorte { margin-top: 3px; font-size: 12.5px; }

/* Detalle en vivo (Seguimiento): centrado y ordenado; las columnas de texto
   largo (Cliente, Dirección, Motivo) quedan a la izquierda para leerse mejor */
.tabla-seg th, .tabla-seg td { text-align: center; vertical-align: middle; }
.tabla-seg th:nth-child(2), .tabla-seg td:nth-child(2),
.tabla-seg th:nth-child(3), .tabla-seg td:nth-child(3),
.tabla-seg th:nth-child(9), .tabla-seg td:nth-child(9) { text-align: left; }

/* ── Chips y avisos ── */
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.chip-ok { background: var(--ok-fondo); color: var(--ok); }
.chip-info { background: #ededf0; color: var(--negro-700); }
.chip-alerta { background: var(--alerta-fondo); color: var(--alerta); }
.chip-error { background: var(--error-fondo); color: var(--error); }

.aviso {
  padding: 11px 14px; border-radius: 9px; margin-bottom: 10px;
  font-size: 13px; border: 1px solid transparent;
}
.aviso-error { background: var(--error-fondo); color: var(--error); border-color: #f3c5c5; }
.aviso-alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: #f0ddb4; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: #cdebd8; }
.aviso a { color: inherit; font-weight: 600; }

/* ── KPIs ── */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.kpi {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.kpi-valor { font-size: 21px; font-weight: 700; color: var(--negro-900); letter-spacing: -.3px; }
.kpi-titulo { font-size: 11.5px; font-weight: 500; color: var(--texto-suave); margin-top: 3px; }

/* Tarjeta resumen por vehículo */
.veh-card {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 13px 15px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.veh-card:hover { border-color: var(--rojo-100); box-shadow: 0 2px 10px rgba(200, 16, 46, .10); }
.veh-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.veh-cab b { font-size: 13.5px; }
.veh-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-bottom: 9px;
}
.vs-val { display: block; font-size: 14px; font-weight: 700; color: var(--negro-900); }
.vs-lab { display: block; font-size: 10.5px; font-weight: 500; color: var(--texto-suave);
          text-transform: uppercase; letter-spacing: .5px; }
.veh-pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--texto-suave);
  border-top: 1px solid #f0f0f2; padding-top: 9px;
}
.veh-pie a { color: var(--rojo-600); font-weight: 600; text-decoration: none; }
.veh-pie a:hover { text-decoration: underline; }
.barra-uso {
  height: 5px; border-radius: 999px; background: #eceef0; overflow: hidden; margin-top: 4px;
}
.barra-uso > div { height: 100%; border-radius: 999px; }

/* ── Mapa ── */
.mapa-principal { height: 400px; border-radius: 9px; z-index: 0; }
.mapa-detalle { height: 440px; border-radius: 9px; z-index: 0; }
.marcador-parada {
  background: var(--rojo-600); color: #fff; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; font-size: 13.5px; font-weight: 700;
  border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(19, 20, 23, .45);
}
.marcador-deposito {
  background: var(--negro-900); color: #fff; border-radius: 9px;
  width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--rojo-600), 0 2px 10px rgba(19, 20, 23, .45);
}
.marcador-deposito svg { width: 15px; height: 15px; }

/* Los marcadores reaccionan al mouse (retroalimentación de que son interactivos) */
.marcador-pedido, .marcador-parada, .marcador-deposito {
  transition: transform .13s ease; cursor: pointer;
}
.leaflet-marker-icon:hover .marcador-pedido,
.leaflet-marker-icon:hover .marcador-parada,
.leaflet-marker-icon:hover .marcador-deposito { transform: scale(1.22); }

/* ── Tarjetas de información del mapa (tooltip al pasar el mouse y popup) ── */
.leaflet-tooltip.tt-visor {
  background: #fff; border: none; border-radius: 11px; padding: 0;
  box-shadow: 0 6px 22px rgba(19, 20, 23, .22);
  font-family: inherit;
}
.leaflet-tooltip-top.tt-visor::before { border-top-color: #fff; }
.leaflet-tooltip-bottom.tt-visor::before { border-bottom-color: #fff; }
.leaflet-tooltip-left.tt-visor::before { border-left-color: #fff; }
.leaflet-tooltip-right.tt-visor::before { border-right-color: #fff; }
.tt-card { padding: 10px 13px; width: max-content; max-width: 260px; }
.tt-titulo {
  font-weight: 700; font-size: 13px; color: var(--negro-900);
  margin-bottom: 5px; white-space: normal;
  display: flex; align-items: center; gap: 6px;
}
.tt-titulo svg { width: 13.5px; height: 13.5px; color: var(--rojo-600); flex-shrink: 0; }
.tt-fila {
  display: flex; align-items: flex-start; gap: 7px; font-size: 12px;
  color: #4a4e55; line-height: 1.45; white-space: normal; margin-top: 3px;
}
.tt-fila svg { width: 12.5px; height: 12.5px; flex-shrink: 0; margin-top: 2px;
               color: var(--rojo-600); }
.tt-fila b { color: var(--negro-900); }
.tt-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 4px; flex-shrink: 0;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px; box-shadow: 0 8px 28px rgba(19, 20, 23, .24);
}
.leaflet-popup-content { font-family: inherit; font-size: 12.5px; margin: 3px 2px; }
.leaflet-popup-close-button { color: #9aa0a8; }

/* Controles de zoom acordes a la línea visual */
.leaflet-bar {
  border: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(19, 20, 23, .18);
}
/* Fondo OpenStreetMap un poco atenuado: las rutas y paradas dibujadas encima
   siguen siendo lo primero que se lee. */
.leaflet-tile-pane { filter: saturate(.72) contrast(.94) brightness(1.03); }
.leaflet-control-zoom a { color: var(--negro-900); }
.leaflet-control-zoom a:hover { color: var(--rojo-600); background: var(--rojo-50); }

/* ── Detalle de rutas ── */
.ruta-cabecera {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px;
}
/* Indicadores de la tarjeta de vehículo, en casillas fijas. Iban sueltos en una
   fila que se ajustaba al contenido, así que dos vehículos del mismo reparto
   quedaban con sus píldoras en distinta posición —y con distinto número de
   líneas— según qué datos tuviera cada uno. En grilla, cada indicador cae
   siempre en la misma casilla y las tarjetas se leen una debajo de otra. */
.ruta-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding-bottom: 12px;
}
.ruta-chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruta-chips .chip {
  width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis;
}
/* Indicador sin dato: ocupa su casilla, apagado, en vez de desaparecer */
.chip-vacio { background: #f4f5f7; color: var(--texto-suave); font-weight: 500; }
@media (max-width: 900px) {
  .ruta-chips, .ruta-chips-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.punto-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ruta-resumen { color: var(--texto-suave); font-size: 12.5px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.texto-suave { color: var(--texto-suave); }
.derecha { text-align: right; }

@media (max-width: 900px) {
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .contenido { padding: 18px; }
}

/* ── Grilla de tarjetas de vehículos ── */
.veh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.veh-card.seleccionado {
  border-color: var(--rojo-600);
  box-shadow: 0 0 0 3px var(--rojo-100), var(--sombra);
}

/* ── Modal ── */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(24, 22, 28, .55);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px;
}
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 780px;
  max-height: 92vh; overflow: auto; padding: 24px;
  box-shadow: 0 20px 60px rgba(24, 22, 28, .3);
}
.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-cerrar {
  background: none; border: none; cursor: pointer; font-size: 20px;
  color: var(--texto-suave); padding: 4px 8px; border-radius: 7px; line-height: 1;
}
.modal-cerrar:hover { background: var(--fondo); color: var(--negro-900); }

/* ── Pestañas ── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.tab {
  padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--texto-suave); border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: none; border-top: none; border-left: none;
  border-right: none; font-family: inherit;
}
.tab:hover { color: var(--negro-900); }
.tab.activo { color: var(--rojo-600); border-bottom-color: var(--rojo-600); }

/* ── Configuración (filas tipo panel de ajustes) ── */
.config-fila {
  display: grid; grid-template-columns: 290px 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid #f0f0f2; align-items: start;
}
.config-fila:last-child { border-bottom: none; padding-bottom: 4px; }
.config-fila h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; color: var(--negro-900); }
.config-desc { font-size: 12px; color: var(--texto-suave); line-height: 1.45; }
.mapa-mini { height: 240px; border-radius: 9px; z-index: 0; }
.config-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 200px)); }


@media (max-width: 800px) {
  .config-fila { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Tabla de detalle de reparto estandarizada ── */
table { font-variant-numeric: tabular-nums; }
.tabla-detalle { table-layout: fixed; min-width: 880px; }
.tabla-detalle td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detalle-ruta { padding-left: 17px; }
/* Botones de acción de una fila: nunca se recortan con «…»; si no caben en
   una línea, siguen en la siguiente. */
td.celda-acciones, .tabla-detalle td.celda-acciones {
  overflow: visible; white-space: normal; text-overflow: clip;
}
.celda-acciones .boton-mini, .celda-acciones .boton-chico { margin: 1px 0; }
.kpi-valor { font-variant-numeric: tabular-nums; }

/* ── Pulido general ── */
::selection { background: var(--rojo-100); }
.boton:focus-visible, .tab:focus-visible, .menu a:focus-visible {
  outline: 2px solid var(--rojo-500); outline-offset: 2px;
}
.tab { transition: color .12s, border-color .12s; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d6da; border-radius: 999px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: #b9bcc2; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Dashboard: gráficos livianos en CSS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 950px) { .grid-2 { grid-template-columns: 1fr; } }

.lista-barras { display: flex; flex-direction: column; gap: 4px; }
.fila-barra {
  display: grid; grid-template-columns: 150px 1fr 56px; align-items: center;
  gap: 10px; padding: 5px 0; font-size: 12.5px;
}
.fb-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fb-valor { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-detalle { grid-column: 2 / -1; font-size: 11px; color: var(--texto-suave); margin-top: -3px; }
.barra-h { height: 8px; background: #eceef0; border-radius: 999px; overflow: hidden; }
.barra-h > div { height: 100%; border-radius: 999px; }

.mini-dias {
  display: flex; gap: 10px; align-items: flex-end; height: 150px; padding-top: 8px;
}
.mini-dia-col {
  flex: 1; max-width: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 4px;
}
.mini-dia-barra { width: 100%; border-radius: 6px 6px 0 0; min-height: 6px; }
.mini-dia-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-dia-fecha { font-size: 10.5px; color: var(--texto-suave); }

/* ── Tablas de detalle: letra compacta para que quepa toda la información ──
   El ancho mínimo vive UNA sola vez, arriba (880px). Aquí se declaraba otra vez
   en 1000px y, por ser la última, ganaba: la letra se achicaba para que cupiera
   y el ancho mínimo la volvía a sacar de la pantalla. */
/* Una pizca más chica que el resto de las tablas: son las que llevan más
   columnas, y cada décima de píxel se le devuelve al nombre del cliente. */
.tabla-detalle { font-size: 11px; }
/* Los títulos sí pueden bajar de línea. En nowrap, un título más ancho que su
   columna se derramaba sobre el de al lado y se leían pegados
   ("EN CLIENTEDESVÍO"); el dato de la celda sí se recorta con "…". */
.tabla-detalle th { font-size: 10px; padding: 8px 7px; white-space: normal; }
.tabla-detalle td { padding: 7px; }
.tabla-detalle .chip { font-size: 10px; padding: 2px 7px; }
.tabla-detalle td.tel { white-space: nowrap; overflow: visible; }

/* ── Dashboard ejecutivo ── */
.dash-hero {
  display: grid; grid-template-columns: 280px 280px 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 1180px) {
  .dash-hero { grid-template-columns: 1fr 1fr; }
  .dash-hero .dash-kpis { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .dash-hero { grid-template-columns: 1fr; } }
.donut-card {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; margin-bottom: 0; padding: 26px 20px;
}
.donut {
  width: 168px; height: 168px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #eef0f2 0);
  display: grid; place-items: center;
}
.donut-centro {
  width: 126px; height: 126px; background: #fff; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 4px rgba(19, 20, 23, .06);
}
.donut-num { font-size: 31px; font-weight: 800; letter-spacing: -1px;
             font-variant-numeric: tabular-nums; }
.donut-sub { font-size: 11px; font-weight: 600; color: var(--texto-suave);
             text-transform: uppercase; letter-spacing: .5px;
             text-align: center; line-height: 1.35; padding: 0 16px; }
/* Opción "comprobar proximidad" junto a Guardar planificación */
.prox-opt {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--texto-suave); font-weight: 600; cursor: pointer;
}
.prox-opt input[type="number"] {
  width: 68px; padding: 4px 6px; border: 1px solid var(--borde);
  border-radius: 7px; font-size: 12.5px; font-family: inherit;
}
.prox-opt input[type="checkbox"] { accent-color: var(--rojo-600); }

/* ── Excepciones en ruta: acciones compactas y formulario del pedido urgente ── */
.boton-mini { padding: 4px 8px; font-size: 12px; border-radius: 6px; }
.modal-form { text-align: left; }
.modal-form h3, .modal-form .qr-instruccion { text-align: center; }
.modal-form label { display: block; font-size: 12px; font-weight: 600;
                    color: var(--texto-suave); margin: 10px 0 3px; }
.modal-form input, .modal-form select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde);
  border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.modal-form input:focus, .modal-form select:focus {
  outline: none; border-color: var(--rojo-600);
}
.modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Excepciones en ruta: historial de cambios del plan (Seguimiento) ── */
.eventos-plan { list-style: none; margin: 0; padding: 0; }
.eventos-plan li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid #f0f0f2;
}
.eventos-plan li:last-child { border-bottom: none; }
.eventos-plan .ev-hora {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto-suave);
}

/* ── Modal del código QR del itinerario (para escanear con el teléfono) ── */
.qr-fondo {
  position: fixed; inset: 0; z-index: 60; background: rgba(19, 20, 23, .62);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.qr-caja {
  background: #fff; border-radius: 16px; padding: 26px 30px; text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35); max-width: 430px; width: 100%;
}
.qr-caja h3 { font-size: 16px; margin-bottom: 6px; }
.qr-instruccion { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 16px; }
.qr-svg { display: flex; justify-content: center; }
.qr-svg svg {
  width: min(300px, 70vw); height: auto;
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px; background: #fff;
}
.qr-url {
  font-size: 11px; color: var(--texto-suave); word-break: break-all;
  margin: 14px 0 16px; font-family: ui-monospace, monospace;
}

/* Punto de pedido en la revisión (geocodificado, aún sin ruta asignada) */
.marcador-pedido {
  /* Sobre el mapa de la ciudad entera, un punto de 14 px se perdía entre las
     calles: el planificador tiene que localizar de un vistazo dónde caen sus
     clientes, no cazarlos. */
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rojo-600); border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.donut-leyenda { display: flex; gap: 16px; font-size: 12.5px; font-weight: 600; }
.donut-leyenda i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px;
}
.donut-pie { font-size: 11.5px; color: var(--texto-suave); }

.dash-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; align-content: stretch;
}
.kpi-dash { display: flex; align-items: center; gap: 13px; margin: 0; }
.kpi-icono {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--rojo-50); color: var(--rojo-600);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icono svg { width: 19px; height: 19px; }

.dash-sub { font-size: 12px; color: var(--texto-suave); margin: -8px 0 14px; }
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 6px;
  background: #eef0f2; color: var(--texto-suave);
  font-weight: 700; font-size: 10.5px; vertical-align: middle;
}
.rank-top { background: var(--negro-900); color: #fff; }

/* ── Dashboard: tarjetas con acento de color por sección ── */
.dash-card { border-top: 3px solid var(--ac, var(--borde)); }


/* ── Identidad doble: Gobantes (empresa) + VISOR (plataforma) ──
   Lockup corporativo: la empresa arriba (emblema + nombre), y VISOR como
   producto protagonista sobre una veta granate→rojo de la paleta oficial,
   cerrada por un filo de luz rojo. */
.marca-visor {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 18px 12px;
  border-top: 1px solid var(--negro-700);
  border-bottom: 1px solid var(--negro-700);
  background: linear-gradient(120deg, rgba(155, 0, 28, .38),
                              rgba(194, 21, 50, .14) 55%, rgba(194, 21, 50, 0));
  position: relative;
}
.marca-visor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--rojo-600) 0%, rgba(194, 21, 50, .35) 55%,
                              rgba(194, 21, 50, 0));
}
.visor-nombre {
  font-size: 23px; font-weight: 800; letter-spacing: 6px; color: #ffffff;
  line-height: 1.1;
}
.visor-sub { font-size: 9.5px; font-weight: 700; color: #e8909f;
             letter-spacing: 2.6px; text-transform: uppercase; }

/* ── Interactividad del dashboard y tablas ordenables ── */
.fila-clic { cursor: pointer; border-radius: 8px; padding-left: 6px; padding-right: 6px;
             margin: 0 -6px; transition: background .1s; }
.fila-clic:hover { background: #f4f5f7; }
.mini-clic { cursor: pointer; border-radius: 8px; transition: background .1s; }
.mini-clic:hover { background: #f4f5f7; }
.th-orden { cursor: pointer; user-select: none; }
.th-orden:hover { color: var(--negro-900); background: #f0f1f4; }
.th-orden.orden-activo { color: var(--negro-900); }
.orden-flecha { font-size: 9px; margin-left: 4px; opacity: .75; }


/* ── Usuario activo (arriba a la derecha) ── */
.usuario-badge {
  position: fixed; top: 14px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--borde); border-radius: 999px;
  padding: 6px 14px 6px 7px; box-shadow: var(--sombra);
}
.usuario-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--negro-900);
  color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.usuario-texto { display: flex; flex-direction: column; line-height: 1.15; }
.usuario-texto b { font-size: 12.5px; color: var(--negro-900); }
.usuario-texto span { font-size: 10.5px; font-weight: 600; color: var(--rojo-600);
                      text-transform: uppercase; letter-spacing: .5px; }

/* ── Código del plan en el título de Planificación ── */
.codigo-plan {
  display: inline-block; vertical-align: middle; margin-left: 12px;
  font-size: 17px; font-weight: 800; letter-spacing: .5px;
  background: var(--rojo-600); color: #fff;
  padding: 3px 16px; border-radius: 9px;
}
.codigo-plan.borrador { background: #ededf0; color: var(--texto-suave);
                        font-size: 13px; font-weight: 700; }

/* ── Dashboard reestructurado ── */
.dash-kpis-grandes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 16px;
}
@media (max-width: 1100px) { .dash-kpis-grandes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dash-kpis-grandes { grid-template-columns: 1fr; } }

/* Filtros generales del tablero: período y sucursal, arriba de todo */
.dash-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 14px;
}
.dash-filtro { display: flex; align-items: center; gap: 10px; }
.dash-filtro .selector-periodo { margin: 0; }
.dash-filtro-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-suave); }
.dash-filtro-fin { margin-left: auto; gap: 14px; }
.dash-filtro-resumen { font-size: 12px; color: var(--texto-suave); }
.dash-filtros .sel-suc { font-size: 12.5px; padding: 5px 8px; }
.dash-filtros .boton-chico { white-space: nowrap; }
.cargando-suave { opacity: .55; pointer-events: none; transition: opacity .15s; }
@media (max-width: 900px) { .dash-filtro-fin { margin-left: 0; width: 100%; } }

/* Resumen por sucursal (vista global): anchos fijos para que entre entera sin
   desplazamiento lateral. Los títulos bajan de línea; los datos no se parten. */
.tabla-sucursales { table-layout: fixed; width: 100%; font-size: 12px; }
.tabla-sucursales th {
  white-space: normal; line-height: 1.25; vertical-align: bottom; padding: 8px 6px;
}
.tabla-sucursales td { padding: 8px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tabla-sucursales .num { font-size: 11.5px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; }
.tabla-sucursales .barra-h { height: 5px; margin-top: 3px; }
.dash-kpis-grandes .kpi-dash { padding: 19px 20px; }
.dash-kpis-grandes .kpi-icono { width: 46px; height: 46px; border-radius: 12px; }
.dash-kpis-grandes .kpi-icono svg { width: 23px; height: 23px; }
.dash-kpis-grandes .kpi-valor { font-size: 24px; }
.dash-kpis-grandes .kpi-titulo { font-size: 12px; }

.dash-donuts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 760px) { .dash-donuts { grid-template-columns: 1fr; } }

/* Selector de período de los gráficos (día / semana / mes) */
.selector-periodo { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 6px; }
.periodo-op {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; color: var(--texto-suave);
  background: var(--fondo-suave, #f4f5f7); border: 1px solid transparent;
}
.periodo-op:hover { color: var(--negro-900); border-color: var(--borde); }
/* El período elegido tiene que saltar a la vista: relleno oscuro y texto
   blanco. En blanco sobre fondo claro apenas se distinguía del resto. */
.periodo-op.activo {
  background: var(--negro-900); color: #fff; border-color: var(--negro-900);
  box-shadow: 0 1px 4px rgba(19, 20, 23, .22);
}
.periodo-op.activo:hover { color: #fff; }

.grafico-dias { display: block; width: 100%; height: auto; }
.grafico-leyenda {
  display: flex; gap: 22px; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin: -4px 0 6px;
}
.grafico-leyenda .cuadro {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}
.grafico-leyenda .linea {
  display: inline-block; width: 18px; height: 3.5px; border-radius: 999px;
  margin-right: 6px; vertical-align: 3px;
}
.dash-h3 {
  font-size: 13px; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px;
}
.grafico-dias .mini-clic:hover rect[fill="transparent"] { fill: #f4f5f7; }


/* ── Cabeceras de sección del dashboard ── */
.sec-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.sec-ico {
  width: 36px; height: 36px; border-radius: 10px; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(19, 20, 23, .18);
}
.sec-ico svg { width: 18px; height: 18px; }
.sec-cab h2 { margin: 0; font-size: 15.5px; }
.sec-cab .dash-sub { margin: 1px 0 0; }
.dash-card { transition: box-shadow .15s; }
.dash-card:hover { box-shadow: 0 3px 16px rgba(19, 20, 23, .09); }

/* ── Doble barra por conductor ── */
.fila-barra2 {
  display: grid; grid-template-columns: 230px 1fr; gap: 8px 18px;
  align-items: center; padding: 9px 6px; margin: 0 -6px;
  border-bottom: 1px solid #f0f0f2;
}
.fila-barra2:last-child { border-bottom: none; }
.fila-barra2 .fb-etiqueta { white-space: normal; }
.fb-mini { display: block; font-size: 11px; font-weight: 500;
           color: var(--texto-suave); margin-top: 2px; }
.barras2 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b2 { display: grid; grid-template-columns: 76px 1fr 52px; gap: 10px; align-items: center; }
.b2-lab { font-size: 10.5px; font-weight: 600; color: var(--texto-suave);
          text-transform: uppercase; letter-spacing: .4px; }
.b2-val { font-size: 12.5px; font-weight: 700; text-align: right;
          font-variant-numeric: tabular-nums; }
.b2 .barra-h { height: 9px; }
@media (max-width: 760px) { .fila-barra2 { grid-template-columns: 1fr; } }

/* ── Tabla de conductores y tarjeta de fallas ── */
.tabla-conductores td { padding: 10px; }
.tabla-conductores .rank { margin-right: 0; }
.tarjeta-fallas { background: linear-gradient(180deg, #fdf4f5 0, #ffffff 84px); }

/* ── Escala de desempeño y tabla alta de clientes ── */
.escala-strip {
  display: flex; align-items: center; gap: 12px; margin: -4px 0 16px;
  padding: 9px 18px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--texto-suave);
}
.escala-strip i { font-style: normal; font-variant-numeric: tabular-nums; }
.escala-grad {
  flex: 1; height: 9px; border-radius: 999px;
  background: linear-gradient(90deg, hsl(0,72%,38%), hsl(71,72%,36%), hsl(142,72%,34%));
}
.tabla-alta { max-height: 430px; overflow-y: auto; }
.tabla-alta th { position: sticky; top: 0; z-index: 1; }
.barra-falla { height: 11px; }

/* ── Seguimiento en vivo ── */
.seg-avance { background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 18px; box-shadow: var(--sombra); margin-bottom: 16px; }
.seg-avance-cab { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 13px; color: var(--texto-suave); }
.seg-avance-cab b { font-size: 14px; color: var(--negro-900); }
.barra-grande { height: 12px; background: #eceef0; border-radius: 999px; overflow: hidden; }
.barra-grande > div { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rojo-500), var(--rojo-700)); transition: width .4s; }
.seg-leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px;
  font-weight: 600; color: var(--texto-suave); margin-bottom: 10px; }
.seg-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; }
.seg-leyenda .aro { background: #fff; border: 2px solid #2563eb;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb33; }
.seg-leyenda .cam { background: var(--negro-900); border-radius: 7px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(24, 22, 28, .35); }

/* GPS en vivo: el camión en su última posición reportada */
.marcador-vehiculo {
  width: 34px; height: 34px; border-radius: 10px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(19, 20, 23, .45);
  animation: pulso-gps 2s ease-in-out infinite;
}
.marcador-vehiculo svg { width: 18px; height: 18px; }
.marcador-vehiculo.gps-viejo { opacity: .55; animation: none; }
@keyframes pulso-gps {
  0%, 100% { box-shadow: 0 2px 10px rgba(19, 20, 23, .45), 0 0 0 0 rgba(194, 21, 50, .45); }
  50% { box-shadow: 0 2px 10px rgba(19, 20, 23, .45), 0 0 0 9px rgba(194, 21, 50, 0); }
}
.marcador-parada.mk-proxima { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb;
  animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 0%,100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb; }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px #2563eb55; } }
/* Reparto cerrado: la parada que falló conserva el color de su ruta y suma
   un aro rojo, para ubicarla sin cambiar la lectura por vehículo. */
.marcador-parada.mk-fallida { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #c21531; }
.seg-leyenda .aro-fallo { background: #fff; border: 2px solid #c21531;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c2153155; }

/* ── Estrategia de ruteo (Planificación) ── */
.estrategia-ruteo { margin: 6px 0 16px; }
.estrategia-titulo {
  font-size: 12px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px;
}
.estrategia-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.estrategia-op {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; background: var(--tarjeta); border: 1.5px solid var(--borde);
  border-radius: 13px; cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s;
}
.estrategia-op:hover { border-color: var(--rojo-100); }
.estrategia-op input { position: absolute; opacity: 0; pointer-events: none; }
.estrategia-op .eo-icono {
  font-size: 22px; width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px;
  background: var(--fondo); display: flex; align-items: center; justify-content: center;
  transition: background .14s;
}
.estrategia-op .eo-texto { display: flex; flex-direction: column; gap: 2px; }
.estrategia-op .eo-texto b { font-size: 14px; color: var(--negro-900); }
.estrategia-op .eo-desc { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }
.estrategia-op .eo-check {
  position: absolute; top: 10px; right: 12px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--rojo-600); color: #fff; font-size: 12px;
  font-weight: 800; display: none; align-items: center; justify-content: center;
}
.estrategia-op.sel {
  border-color: var(--rojo-600); background: #fff5f6;
  box-shadow: 0 0 0 3px rgba(194,21,49,.10);
}
.estrategia-op.sel .eo-icono { background: #fde3e8; }
.estrategia-op.sel .eo-check { display: flex; }
@media (max-width: 640px) { .estrategia-ops { grid-template-columns: 1fr; } }

/* Botón "Nueva planificación": mismo formato que el primario, en negro de la
   paleta (distinto del rojo de "Cargar y geocodificar", pero armónico) */
.boton-nueva { background: var(--negro-900); }
.boton-nueva:hover { background: #2a2730; }

/* Botón "Guardar planificación": mismo formato primario, en verde (acción de
   confirmar/guardar) */
.boton-guardar { background: var(--ok); }
.boton-guardar:hover { background: #116e34; }

/* KPI en alerta (ej. ventanas sin cubrir al 100%): realce rojo fuerte */
.kpi-alerta {
  border: 1.5px solid var(--error); background: #fff5f6;
  box-shadow: 0 0 0 3px rgba(194,21,49,.08);
}

/* Tarjeta de vehículo cuya ruta ya finalizó (regreso confirmado) */
.veh-card.finalizada { border-left: 4px solid var(--ok); }

/* ── Pantalla de acceso (login / primer arranque) ── */
.acceso {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #211e26, var(--negro-900));
}
/* Panel dividido: identidad de marca a la izquierda, formulario a la derecha */
.acceso-panel {
  display: flex; width: 100%; max-width: 880px; min-height: 520px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.acceso-lado {
  flex: 1.15; display: flex; flex-direction: column; padding: 34px 38px 26px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(194, 21, 50, .35), transparent 55%),
    linear-gradient(155deg, #26222c 0%, var(--negro-900) 60%, #140d10 100%);
  color: #fff; position: relative;
}
.acceso-lado::after {                 /* veta granate→rojo, sello de la marca */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--rojo-700), var(--rojo-600) 55%, var(--rojo-500));
}
.acceso-lado-marca { display: flex; align-items: center; gap: 12px; }
.acceso-lado-marca img { width: 44px; height: 44px;
                         filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.acceso-lado-nombre {
  display: flex; flex-direction: column; font-weight: 800; letter-spacing: 3px;
  font-size: 14px; line-height: 1.35;
}
.acceso-lado-nombre span {
  font-weight: 500; letter-spacing: .4px; font-size: 10.5px; color: #9aa0ab;
}
.acceso-lado-centro { margin: auto 0; padding: 30px 0; }
.acceso-visor {
  display: block; font-weight: 800; font-size: 44px; letter-spacing: 10px;
  line-height: 1.05; color: #fff;
}
.acceso-claim {
  display: block; margin-top: 8px; font-size: 14px; color: #c9ccd3;
  font-weight: 500;
}
.acceso-puntos { list-style: none; margin: 26px 0 0; padding: 0;
                 display: flex; flex-direction: column; gap: 12px; }
.acceso-puntos li {
  position: relative; padding-left: 26px; font-size: 13px; color: #b9bdc6;
  line-height: 1.45;
}
.acceso-puntos li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 17px; height: 17px; border-radius: 50%; font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(194, 21, 50, .28); color: #ff98aa; font-weight: 700;
}
.acceso-lado-pie { font-size: 11px; color: #7b818c; letter-spacing: .3px; }
.acceso-tarjeta {
  flex: 1; background: #fff; padding: 40px 36px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.acceso-marca-mini { display: none; }
.acceso-tarjeta h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.2px; }
.acceso-nota { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.45; }
.acceso-tarjeta label { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin: 12px 0 4px; }
.acceso-tarjeta input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde);
  border-radius: 9px; font-size: 14px; font-family: inherit;
}
.acceso-tarjeta input:focus {
  outline: none; border-color: var(--rojo-500); box-shadow: 0 0 0 3px var(--rojo-100);
}
.acceso-tarjeta .boton { width: 100%; margin-top: 20px; justify-content: center;
                         padding: 12px 18px; font-size: 14px; }
.acceso-tarjeta #accesoAviso:not(:empty) { margin-top: 12px; }
/* Pantallas angostas: queda el formulario con cabecera compacta de marca */
@media (max-width: 760px) {
  .acceso-panel { max-width: 400px; min-height: 0; display: block; }
  .acceso-lado { display: none; }
  .acceso-marca-mini {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--borde);
    font-weight: 800; letter-spacing: 2px; font-size: 13px; color: var(--negro-900);
  }
  .acceso-marca-mini img { width: 34px; height: 34px; }
}

/* Botón de cerrar sesión en el badge de usuario */
.usuario-salir {
  background: none; border: none; cursor: pointer; color: var(--texto-suave);
  padding: 5px; border-radius: 8px; display: flex; align-items: center; margin-left: 2px;
}
.usuario-salir:hover { background: var(--rojo-50); color: var(--rojo-600); }
a.usuario-salir { text-decoration: none; }
.usuario-salir svg { width: 18px; height: 18px; }

/* Modal "Cambiar mi contraseña" */
.modal-clave label { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin: 12px 0 4px; }
.modal-clave input { width: 100%; padding: 10px 12px; border: 1px solid var(--borde);
  border-radius: 9px; font-size: 14px; font-family: inherit; }
.modal-clave input:focus { outline: none; border-color: var(--rojo-600); }

/* ── Banda del entorno de pruebas ──
   La pinta app.js cuando /api/salud anuncia entorno=pruebas. Va POR SOBRE todo
   (login y modales incluidos: su z-index supera el 1000 de .acceso) para que
   la base de ensayo jamás se confunda con producción. El resto de la pantalla
   baja 32px: la banda nunca tapa contenido. */
.banda-pruebas {
  position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, #b45309 0 16px, #92400e 16px 32px);
  color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); user-select: none;
}
/* El body NO se desplaza con margen: eso dejaba el documento 32px más alto que
   la ventana y cualquier scrollIntoView subía la página bajo la banda, tapando
   la marca sin forma de volver salvo recargar. En su lugar, el contenido de la
   aplicación ocupa la altura restante y la banda vive sobre él. */
body.con-banda-pruebas { padding-top: 32px; height: 100vh; }
body.con-banda-pruebas .barra-lateral,
body.con-banda-pruebas .contenido { height: calc(100vh - 32px); }
body.con-banda-pruebas .acceso { top: 32px; }
/* Los elementos fijos ignoran el relleno del body: también deben bajar */
body.con-banda-pruebas .usuario-badge { top: 46px; }

/* ── Campo de contraseña con el ojo para verla ──────────────────────────────
   Las claves se teclean a ciegas; el ojo deja mirar lo escrito (clave inicial
   copiada del correo, sobre todo) sin cambiar el flujo del formulario. */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 40px; }
.campo-clave .ver-clave {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 5px; border: none; border-radius: 7px;
  background: transparent; color: var(--texto-suave); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.campo-clave .ver-clave:hover { background: #f0f0f3; color: var(--texto); }
.campo-clave .ver-clave svg { width: 18px; height: 18px; }

/* ── Vehículos para este ruteo (Planificación) ──────────────────────────────
   Chips marcables: por defecto van todos los disponibles; rutear con un camión
   concreto es desmarcar el resto aquí, no ir a apagarlos en Vehículos. */
.veh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.veh-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1.5px solid var(--borde); border-radius: 999px; background: var(--tarjeta);
  cursor: pointer; font-size: 12.5px; user-select: none;
  transition: border-color .12s, background .12s;
}
.veh-chip input { margin: 0; accent-color: var(--rojo-600); }
.veh-chip b { font-size: 13px; }
.veh-chip span { color: var(--texto-suave); }
.veh-chip-txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.veh-chip-estado { font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--rojo-600); text-transform: uppercase; letter-spacing: .3px; }
.veh-chip.ocupado .veh-chip-estado { color: var(--texto-suave); }
.veh-chip.sel { border-color: var(--rojo-600); background: var(--rojo-50); }
.veh-chip.ocupado { opacity: .55; cursor: default; background: #f3f3f5; }

/* ── Reportes: lista de un reparto por fila ─────────────────────────────────
   Reemplaza las dos listas P/R separadas por una sola. El estado enlaza la
   planificación con su resultado, y la fila entera abre el detalle comparado. */
.codigo-reparto { color: var(--rojo-700); font-weight: 800; letter-spacing: .3px; }
.codigo-reparto.grande { font-size: 18px; }
.tabla-lista tbody tr { cursor: pointer; }
.tabla-lista tbody tr:hover td { background: var(--rojo-50); }
.tabla-lista td.pendiente { color: #b9bcc2; }
.tabla-lista .acciones-col { text-align: right; white-space: nowrap; width: 1%; }
.fila-acciones { display: inline-flex; gap: 5px; align-items: center; justify-content: flex-end; }

/* Píldora de estado del reparto */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  letter-spacing: .2px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-neutro { background: #eef0f2; color: #6b7077; }
.pill-activo { background: #e7f0ff; color: #1d4ed8; }
.pill-ok { background: var(--ok-fondo); color: var(--ok); }

/* Encabezado del detalle de un reparto */
.detalle-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px 0 14px; flex-wrap: wrap;
}
.detalle-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; }

/* Franja de comparación plan → real: lo prometido y lo cumplido, lado a lado */
.comparacion {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 900px) { .comparacion { grid-template-columns: 1fr 1fr; } }
.comp-item {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  padding: 13px 15px; box-shadow: var(--sombra);
}
.comp-etq {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin-bottom: 7px;
}
.comp-valores { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.comp-plan { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.comp-flecha { color: #c2c6cc; font-weight: 700; }
.comp-real { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.comp-delta {
  margin-top: 4px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.comp-bien { color: var(--ok); }
.comp-ok { color: var(--alerta); }
.comp-malo { color: var(--error); }

/* ── Clientes: tabla con reparto fijo de columnas ───────────────────────────
   Los ids (C076175835-7000), nombres y direcciones largos partían en dos o tres
   líneas y la tabla se veía desordenada frente al resto. Cada columna tiene su
   ancho; lo que no cabe se recorta con «…» y el valor completo queda al pasar
   el cursor. La ubicación pasa de un chip repetido en cada fila a un pin
   discreto: lo que hay que ver es cuándo FALTA. */
.tabla-clientes { table-layout: fixed; }
.tabla-clientes td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-clientes th.centro, .tabla-clientes td.centro { text-align: center; }
/* El id (C076175835-7000) y la ventana (08:30–17:00) NUNCA se recortan: son el
   dato por el que se busca y el compromiso con el cliente. Tienen ancho para
   caber enteros hasta en 1280; lo que cede es el nombre y la dirección. */
/* Anchos MEDIDOS sobre datos reales a 1280: las columnas de contenido acotado
   (id, comuna, ventana, teléfono, estado, acciones) van en píxeles y caben
   enteras; nombre y dirección, sin ancho, se reparten lo que sobra y son las
   únicas que se recortan con «…» (con el texto completo al pasar el cursor). */
/* El id va en letra algo menor y cifras tabulares: cabe entero en 112 px
   (C076175835-7000) y deja ese espacio al nombre, que es lo que se lee. */
.tabla-clientes .col-id { width: 124px; }
.tabla-clientes td.celda-id { font-size: 11px; font-weight: 700; letter-spacing: -.1px;
                              font-variant-numeric: tabular-nums; color: var(--negro-900); }
/* Nombre y dirección se reparten por igual lo que dejan las columnas fijas, y
   bajan a una segunda línea antes que cortarse: «CONSTRUCTORA …» no
   identificaba a nadie. (Con el nombre en % la dirección quedaba en 0 px a
   1280 y se montaba sobre la comuna.) */
.tabla-clientes th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-clientes td.celda-nombre, .tabla-clientes td.celda-dir { white-space: normal; }
.cli-dir { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; line-height: 1.3; }
.cli-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              overflow: hidden; line-height: 1.3; font-weight: 600; color: var(--negro-900); }
.tabla-clientes .col-comuna { width: 88px; }
/* En pantallas angostas la comuna pasa a una segunda línea bajo la dirección y
   su columna se oculta: así la dirección conserva un ancho legible. */
.cli-comuna { display: none; font-size: 11.5px; color: var(--texto-suave); line-height: 1.3;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1400px) {
  .tabla-clientes .col-comuna, .tabla-clientes .celda-comuna { display: none; }
  .cli-comuna { display: block; }
}
.tabla-clientes .col-ubic { width: 42px; }
.tabla-clientes th.centro { padding-left: 2px; padding-right: 2px; }
.tabla-clientes .col-ventana { width: 90px; }
.tabla-clientes .col-tiempo { width: 66px; }
.tabla-clientes .col-tel { width: 104px; }     /* +569XXXXXXXX a 11,5 px */
.tabla-clientes .col-estado { width: 68px; }
.tabla-clientes .col-acciones { width: 146px; }
.tabla-clientes td:nth-child(8) { font-size: 11.5px; }
.tabla-clientes td:last-child .boton-chico { padding: 4px 7px; }
.tabla-clientes td:last-child { overflow: visible; }
.tabla-clientes td.celda-acciones { white-space: normal; }   /* con «Sedes ①» el ✕ quedaba fuera */
.ubic { display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.ubic svg { width: 13px; height: 13px; }
.ubic-ok { background: var(--ok-fondo); color: var(--ok); }
.boton-chico .cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--negro-900); color: #fff; font-size: 10px; font-weight: 700;
}

/* ── Reportes: lista acotada y detalle ampliado de una ruta ── */
/* La lista crece un reparto por día: sin tope había que bajar media pantalla
   para llegar al detalle abierto. Cabe en un alto fijo y se desplaza dentro,
   con el encabezado pegado arriba. */
.tabla-acotada { max-height: min(58vh, 500px); overflow-y: auto; }
.tabla-acotada thead th { position: sticky; top: 0; z-index: 2; }
.tabla-lista td { padding: 5px 12px; }
.tabla-lista .boton-chico { padding: 4px 9px; font-size: 12px; }
.tabla-lista .pill { padding: 2px 9px; }

/* Cinco casillas: entregas, efectividad, ventana, kilómetros y vehículos */
.comparacion { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .comparacion { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .comparacion { grid-template-columns: 1fr 1fr; } }

/* La tarjeta de cada vehículo se abre en grande al pinchar su cabecera */
.detalle-ruta .ruta-cabecera { cursor: pointer; }
.detalle-ruta .ruta-cabecera:hover b { color: var(--rojo-700); }
.ruta-ampliar { margin-left: auto; }
.modal-amplio { max-width: 1200px; padding: 22px 24px 20px; }
.modal-amplio .modal-cabecera h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.mapa-ruta-ampliada { height: 360px; border-radius: 9px; z-index: 0; margin-bottom: 14px; }
/* En grande caben los nombres y motivos completos: sin recorte ni ancho fijo */
.tabla-detalle.tabla-amplia { table-layout: auto; min-width: 0; font-size: 12.5px; }
.tabla-amplia th { font-size: 10.5px; padding: 9px 10px; }
.tabla-amplia td { padding: 9px 10px; white-space: normal; overflow: visible; text-overflow: clip; }
.tabla-amplia td:first-child, .tabla-amplia td.hora { white-space: nowrap; }

/* ── Entregas consolidadas y salidas múltiples ── */
/* Varios pedidos en una sola entrega: los números uno bajo otro en su celda */
.tabla-detalle td.pedidos-consolidados { white-space: normal; line-height: 1.35; }
.etq-consolidada {
  display: block; margin-top: 2px; font-size: 9.5px; font-weight: 700; color: #1d4ed8;
  text-transform: uppercase; letter-spacing: .3px;
}
/* Sede del cliente a la que va el pedido, o aviso de dirección nueva */
.etq-sede { display: block; margin-top: 2px; font-size: 10.5px; color: var(--texto-suave); }
.etq-sede-nueva { color: #b45309; font-weight: 600; }
.chip-salida { background: #1c1e23; color: #fff; font-weight: 700; }
/* Propuesta de consolidar en la revisión de pedidos */
.consolidar-caja {
  border: 1px solid #c7dbff; background: #f3f8ff; border-radius: 12px;
  padding: 12px 14px; margin: 4px 0 14px;
}
.consolidar-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.consolidar-cab b { font-size: 13.5px; }
.consolidar-grupo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0;
  border-top: 1px solid #dbe7fb; font-size: 12.5px;
}
.consolidar-grupo .cg-texto { flex: 1; min-width: 240px; }
.consolidar-grupo .cg-pedidos { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.consolidar-grupo.hecho .cg-texto b::after { content: " ✓"; color: var(--ok); }
tr.fila-consolidada td { background: #f3f8ff; }

/* Campo bloqueado (p. ej. parámetros comunes para un planificador): que se vea
   apagado, no como un campo editable que no responde. */
input:disabled, select:disabled, textarea:disabled {
  background: #f4f5f7; color: var(--texto-suave); cursor: not-allowed;
}

/* ── Reportes: resumen por ruta y listado completo del reparto ── */
.resumen-reparto, .listado-reparto { margin: 14px 0; }
.resumen-reparto .titulo-bloque { font-size: 13.5px; margin: 6px 8px 8px; }
.tabla-resumen-ruta .punto-color, .tabla-listado-reparto .punto-color {
  display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 1px; }
.tabla-resumen-ruta tfoot td { border-top: 2px solid var(--negro-900); background: #f7f7f8;
  padding-top: 8px; padding-bottom: 8px; }
/* Catorce columnas a lo ancho de la tarjeta, sin desplazamiento lateral a
   1366 px: letra algo menor, relleno justo y títulos que pueden partirse. */
.tabla-resumen-ruta, .tabla-listado-reparto { font-size: 12.5px; }
.tabla-resumen-ruta th, .tabla-listado-reparto th { white-space: normal; padding: 8px 6px;
  vertical-align: bottom; line-height: 1.2; }
.tabla-resumen-ruta td, .tabla-listado-reparto td { padding-left: 6px; padding-right: 6px; }
.tabla-resumen-ruta td { white-space: nowrap; }
.tabla-resumen-ruta td:nth-child(3) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.nota-tabla { font-size: 11.5px; margin: 6px 8px 2px; }
.listado-reparto > summary { cursor: pointer; padding: 10px 8px; list-style: none; font-size: 13.5px; }
.listado-reparto > summary::-webkit-details-marker { display: none; }
.listado-reparto > summary::before { content: "▸"; display: inline-block; width: 16px;
  color: var(--texto-suave); transition: transform .15s; }
.listado-reparto[open] > summary::before { transform: rotate(90deg); }
.buscar-listado { width: calc(100% - 16px); margin: 0 8px 10px; }
.tabla-acotada-alta { max-height: min(70vh, 620px); overflow-y: auto; }
.tabla-acotada-alta thead th { position: sticky; top: 0; z-index: 2; }
.tabla-listado-reparto td { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-listado-reparto td:nth-child(4) { max-width: 170px; }
.tabla-listado-reparto td:nth-child(5) { max-width: 170px; }
.tabla-listado-reparto tr[hidden] { display: none; }

/* ── Inicio ──────────────────────────────────────────────────────────────── */
.ini { display: flex; flex-direction: column; gap: 18px; }
.ini h2 { margin: 0; }
.ini-saludo { margin: 6px 260px 0 2px; color: var(--gris-700); font-size: 15px; min-height: 30px; }
.ini-saludo b { color: var(--negro-900); }
.ini-saludo span { color: var(--texto-suave); }
.ini-portada {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center;
  background: linear-gradient(115deg, #fff 0%, #fff 52%, #f3f4f6 100%);
  border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra);
  overflow: hidden;
}
.ini-portada-texto { padding: 26px 32px 24px; text-align: center; }
.ini-marca { font-size: 26px; font-weight: 800; letter-spacing: .14em; color: var(--negro-900); line-height: 1; }
.ini-producto {
  margin-top: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rojo-600);
}
.ini-raya { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--rojo-600); margin: 13px auto 14px; }
.ini-titulo { font-size: 32px; font-weight: 800; letter-spacing: -.7px; margin: 0; line-height: 1.1; }
.ini-lema { margin: 10px auto 0; max-width: 52ch; color: var(--texto-suave); font-size: 14.5px; line-height: 1.55; text-wrap: balance; }
.ini-pasos { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin-top: 18px; }
.ini-paso-linea { flex: 0 1 44px; height: 2px; background: var(--borde); margin-top: 24px; }
.ini-paso {
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 1 150px;
  background: none; border: 0; padding: 0 4px; cursor: pointer; font: inherit; color: var(--texto);
}
.ini-paso:disabled { cursor: default; }
.ini-paso-ico {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: #eceef0; color: var(--negro-700); margin-bottom: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ini-paso-primero .ini-paso-ico { background: var(--rojo-600); color: #fff; box-shadow: 0 6px 16px rgba(194, 21, 50, .28); }
.ini-paso:not(:disabled):hover .ini-paso-ico { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(19, 20, 23, .14); }
.ini-paso b { font-size: 13.5px; color: var(--negro-900); }
.ini-paso span:last-child { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
/* La imagen acompaña, no manda: alto acotado, alineada abajo a la derecha */
.ini-portada-img { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.ini-portada-img img {
  display: block; width: auto; max-width: 100%; max-height: 330px; height: auto; object-fit: contain;
  /* El borde izquierdo de la foto se funde con la tarjeta: sin costura */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
  mask-image: linear-gradient(to right, transparent 0, #000 56px);
}

.ini-seccion {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave); margin: 6px 0 -4px !important;
}
.ini-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ini-tarjeta {
  display: flex; gap: 18px; align-items: flex-start; text-align: left; font: inherit; color: inherit;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: var(--sombra); padding: 24px 26px; width: 100%; min-height: 168px;
}
.ini-clic { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ini-clic:hover { border-color: #d5d7db; box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.ini-tarjeta-ico {
  display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 14px;
  background: var(--rojo-50); color: var(--rojo-600);
}
.ini-tarjeta-ico svg { width: 26px; height: 26px; }
.ini-tarjeta-cuerpo { min-width: 0; flex: 1; }
.ini-tarjeta-titulo { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.ini-tarjeta-valor {
  font-size: 40px; font-weight: 800; color: var(--negro-900); letter-spacing: -.8px;
  line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.ini-tarjeta-valor small { font-size: 17px; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.ini-tarjeta-sub { font-size: 13.5px; color: var(--texto-suave); margin-top: 6px; }
.ini-barra { height: 8px; border-radius: 99px; background: #eceef0; margin-top: 10px; overflow: hidden; }
.ini-barra span { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.ini-aviso { display: flex; gap: 8px; align-items: center; margin: 0; }

/* Novedad destacada: una sola, grande, con foto */
.ini-seccion-cab { display: flex; align-items: center; gap: 12px; margin: 6px 0 -4px; }
.ini-seccion-cab .ini-seccion { margin: 0 !important; }
.ini-seccion-cab .boton { margin-left: auto; }
.ini-destacada {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px;
  box-shadow: var(--sombra); overflow: hidden; text-align: left;
}
/* La foto completa, sin recortar: suele ser una pieza gráfica con texto */
.ini-dest-foto { background: #f4f5f7; display: flex; align-items: center; }
.ini-dest-foto img { width: 100%; height: auto; display: block; }
.ini-dest-texto { display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; justify-content: center; }
.ini-dest-etq {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo-600); background: var(--rojo-50);
  border-radius: 6px; padding: 3px 9px;
}
.ini-dest-texto h3 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--negro-900); letter-spacing: -.3px; }
.ini-dest-texto p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }
.ini-dest-texto .ini-novedad-mas { margin-top: 4px; font-size: 13px; }
/* El cuadro que se abre al entrar: solo la foto, lo más grande que quepa en la
   pantalla (suele ser una pieza gráfica con su propio texto, que tiene que leerse). */
.modal.modal-destacada { position: relative; width: auto; padding: 0; overflow: hidden;
                         max-width: min(1400px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
/* Sin barra de título: la pieza gráfica ya lo dice. Solo un botón para cerrar,
   flotando sobre la esquina de la imagen. */
.modal-destacada .modal-cabecera { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 1; }
.modal-destacada .modal-cabecera h2 { display: none; }
.modal-destacada .modal-cerrar {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 17px;
  background: rgba(255, 255, 255, .92); color: var(--negro-900);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.modal-destacada .modal-cerrar:hover { background: #fff; }
.dest-foto-grande { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 40px);
                    display: block; margin: 0 auto; }
.dest-form { display: flex; flex-direction: column; gap: 12px; }
.dest-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.dest-form textarea { font: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.5; resize: vertical; }
.dest-form input { font-weight: 400; }
.dest-form label > .texto-suave { font-weight: 400; font-size: 12px; }
.dest-form-foto { display: flex; gap: 14px; align-items: flex-start; }
.dest-form-foto img { width: 200px; max-height: 140px; object-fit: cover; border-radius: 10px;
                      border: 1px solid var(--borde); flex: none; }
.dest-form-foto label { flex: 1; }
.dest-form .dest-form-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.dest-form-check input { width: auto; margin: 0; }

/* Novedades menores: cuadros chicos y resumidos */
.ini-novedades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ini-novedad {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; height: 100%; cursor: pointer;
  font: inherit; color: inherit; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra); padding: 11px 14px; width: 100%;
}
.ini-novedad-fecha {
  font-size: 11.5px; font-weight: 700; color: var(--rojo-600);
  background: var(--rojo-50); border-radius: 6px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.ini-novedad b { font-size: 13.5px; color: var(--negro-900); line-height: 1.3; }
.ini-novedad-detalle {
  font-size: 12px; color: var(--texto-suave); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ini-novedad .ini-novedad-fecha { font-size: 10.5px; padding: 1px 7px; }
.ini-novedad-mas { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--rojo-600); }
.nov-cab { display: flex; gap: 8px; align-items: center; margin: -2px 0 10px; }
.nov-resumen { font-size: 14px; font-weight: 600; color: var(--negro-900); margin: 0 0 10px; line-height: 1.5; }
.nov-parrafo { font-size: 13.5px; color: var(--texto); line-height: 1.6; margin: 0 0 10px; }
.nov-h3 { font-size: 13px; margin: 14px 0 6px; color: var(--negro-900); }
.nov-pasos { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }

.ini-pie {
  text-align: center; font-size: 11.5px; letter-spacing: .2em; color: var(--texto-suave);
  padding: 6px 0 4px;
}
.ini-pie span { color: var(--rojo-600); margin: 0 10px; }

@media (max-width: 1180px) {
  .ini-novedades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .ini-tarjetas { grid-template-columns: 1fr; }
  .ini-tarjeta { min-height: 0; }
}
@media (max-width: 860px) {
  .ini-destacada { grid-template-columns: 1fr; }
  .ini-dest-texto { padding: 18px 18px 20px; }
  .ini-dest-texto h3 { font-size: 20px; }
  .dest-form-foto { flex-direction: column; }
  .ini-portada { grid-template-columns: 1fr; }
  .ini-portada-img { padding: 0 24px; justify-content: center; }
  .ini-portada-img img { max-height: 260px; -webkit-mask-image: none; mask-image: none; }
  .ini-novedades { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ini-saludo { margin-right: 0; margin-top: 56px; }
  .ini-marca { font-size: 22px; }
  .ini-portada-texto { padding: 22px 16px 20px; }
  .ini-titulo { font-size: 26px; }
  .ini-pasos { flex-direction: column; align-items: center; }
  .ini-paso-linea { display: none; }
  .ini-pie span { margin: 0 4px; }
}


/* ── Dashboard: profundización (drill-through) ─────────────────────────────── */
.kpi-clic { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.kpi-clic:hover { box-shadow: 0 6px 18px rgba(24, 22, 28, .10); transform: translateY(-1px); }
.kpi-clic:focus-visible { outline: 2px solid var(--rojo-600); outline-offset: 2px; }
.modal.modal-ancho { max-width: min(1180px, calc(100vw - 40px)); }
.enlace-boton {
  background: none; border: none; padding: 0; font: inherit; color: var(--azul, #2563eb);
  cursor: pointer; text-align: left; font-weight: 600;
}
.enlace-boton:hover { text-decoration: underline; }
.dd-sub { font-size: 11px; color: var(--texto-suave); }
.dd-motivo { font-size: 11px; color: var(--error); margin-top: 2px; line-height: 1.3; }
.dd-patente {
  font-size: 10.5px; font-weight: 700; color: var(--texto-suave); letter-spacing: .3px;
  background: #eef0f2; border-radius: 5px; padding: 1px 5px; margin-left: 4px;
}
.tabla-visitas td { vertical-align: top; }

/* ── Asignación manual de vehículos (Planificación) ─────────────────────────── */
.asignar-caja {
  border: 1px solid #e3d7fb; background: #f8f5ff; border-radius: 12px;
  padding: 12px 14px; margin: 4px 0 14px;
}
.asignar-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.asignar-cab b { font-size: 13.5px; }
.asignar-cab .texto-suave { font-size: 12.5px; }
.asignar-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asignar-barra select { width: auto; min-width: 190px; padding: 5px 8px; font-size: 12.5px; }
.asignar-resumen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                   margin-top: 9px; font-size: 12px; }
.tabla-revision .col-marca { width: 26px; padding-left: 6px; padding-right: 2px; }
.tabla-revision .col-marca input { width: auto; margin: 0; }
.tabla-revision .sel-asignar { width: 100%; min-width: 92px; padding: 4px 6px; font-size: 12px; }
tr.fila-fijada td { background: #f8f5ff; }
tr.fila-fijada .sel-asignar { border-color: #7c3aed; color: #5b21b6; font-weight: 700; }
.etq-fijo {
  display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; color: #6d28d9;
  text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}
/* Pedido asignado a mano en el mapa de revisión: el código y el color de su camión */
.marcador-pedido-asignado {
  min-width: 38px; height: 20px; padding: 0 5px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
  color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .13s ease;
}
.leaflet-marker-icon:hover .marcador-pedido-asignado { transform: scale(1.15); }
.tt-asignar {
  display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--borde); font-size: 12px; font-weight: 600; color: var(--texto);
}
.tt-asignar svg { width: 12.5px; height: 12.5px; color: var(--texto-suave); flex-shrink: 0; }
.tt-asignar select { flex: 1; width: auto; padding: 4px 6px; font-size: 12px; }
.punto-veh { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
             margin-right: 3px; vertical-align: middle; }

/* Título de un módulo con una acción a la derecha (p. ej. la papelera de Reportes) */
.cab-con-accion { display: flex; align-items: flex-start; gap: 16px; }
.cab-con-accion > div { flex: 1; min-width: 0; }
.cab-con-accion > .boton { margin-top: 4px; margin-right: 290px; flex: none; }
@media (max-width: 900px) { .cab-con-accion > .boton { margin-right: 0; } }

/* ── Figura del tipo de vehículo (Vehículos, Dashboard) ─────────────────────── */
.veh-fig { display: inline-flex; vertical-align: middle; color: var(--negro-900); }
.veh-fig svg { overflow: visible; }
.veh-fig .vf-cuerpo { fill: #f7f8fa; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.veh-fig .vf-cabina { fill: #dfe5ee; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.veh-fig .vf-franja { fill: var(--rojo-600); }
.veh-fig .vf-vidrio { fill: #b9d3f0; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; }
.veh-fig .vf-asiento { fill: #3a3f47; }
.veh-fig .vf-faro { fill: #ffd76a; stroke: currentColor; stroke-width: .6; }
.veh-fig .vf-piloto { fill: var(--rojo-600); }
.veh-fig .vf-rueda { fill: #2f343b; stroke: currentColor; stroke-width: 1; }
.veh-fig .vf-llanta { fill: #d5dae1; }
.veh-fig .vf-chasis { fill: none; stroke: #3a3f47; stroke-width: 2.2; stroke-linecap: round; }
.veh-fig .vf-parachoque { fill: none; stroke: #3a3f47; stroke-width: 1.8; stroke-linecap: round; }
.veh-fig .vf-linea { fill: none; stroke: currentColor; stroke-width: .9; stroke-linecap: round;
                     stroke-linejoin: round; opacity: .75; }
.veh-fig-vacia { color: #b5b9c0; }
.veh-fig-vacia .vf-cuerpo { fill: #f6f7f8; stroke-dasharray: 3 2; }
.veh-fig-vacia .vf-rueda { fill: #fff; stroke-width: 1.3; stroke-dasharray: 2 1.6; }
.fila-barra .fb-etiqueta .veh-fig { margin-right: 4px; }
.fila-barra { grid-template-columns: 190px 1fr 56px; }
.tipo-veh-opciones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.tipo-veh-op {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 4px 7px;
  font-size: 11.5px; font-weight: 600; color: var(--texto); text-align: center; margin: 0;
}
.tipo-veh-op input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-veh-op:hover { border-color: #c9ccd2; }
.tipo-veh-op.sel { border-color: var(--rojo-600); background: var(--rojo-50); box-shadow: 0 0 0 2px rgba(200, 16, 46, .12); }
@media (max-width: 700px) { .tipo-veh-opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ══ Versión de teléfono ═══════════════════════════════════════════════════
   Hasta 820 px la barra lateral deja de ocupar la pantalla: es un cajón que se
   abre desde la cabecera. El contenido toma todo el ancho, las tablas densas se
   deslizan de lado dentro de su tarjeta (nunca la página entera) y los cuadros
   usan la pantalla completa. Pensada para CONSULTAR (Inicio, Seguimiento,
   Reportes, Dashboard); planificar sigue siendo trabajo de escritorio. */
.barra-movil, .telon-menu, .cerrar-menu { display: none; }

@media (max-width: 820px) {
  :root { --alto-banda: 26px; --alto-cab: 52px; }
  body { flex-direction: column; height: 100vh; }
  body.con-banda-pruebas { padding-top: var(--alto-banda); }
  .banda-pruebas { height: var(--alto-banda); font-size: 10px; letter-spacing: 1.2px;
                   padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                   display: block; line-height: var(--alto-banda); text-align: center; }
  body.con-banda-pruebas .acceso { top: var(--alto-banda); }

  /* Cabecera */
  .barra-movil {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    height: var(--alto-cab); padding: 0 8px; background: var(--negro-900); color: #fff;
    position: relative; z-index: 60;
  }
  .btn-menu, .cerrar-menu {
    background: none; border: 0; color: #fff; width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .btn-menu:active, .cerrar-menu:active { background: var(--negro-800); }
  .btn-menu svg { width: 25px; height: 25px; }
  .barra-movil-marca { font-weight: 800; letter-spacing: 4px; font-size: 17px; line-height: 1;
                       display: flex; flex-direction: column; gap: 3px; }
  .barra-movil-marca small { font-size: 8px; letter-spacing: 2.2px; color: #e8909f;
                             font-weight: 700; text-transform: uppercase; }

  /* Usuario: dentro de la cabecera, solo avatar e iconos */
  .usuario-badge {
    top: 6px; right: 8px; z-index: 65; gap: 2px; padding: 3px 4px 3px 3px;
    background: var(--negro-800); border-color: var(--negro-700); box-shadow: none;
  }
  body.con-banda-pruebas .usuario-badge { top: calc(var(--alto-banda) + 6px); }
  .usuario-texto { display: none; }
  .usuario-avatar { width: 30px; height: 30px; background: var(--rojo-600); }
  .usuario-badge .usuario-salir { color: #e4e6ea; padding: 7px; margin: 0; }
  .usuario-badge .usuario-salir svg { width: 19px; height: 19px; }

  /* Menú lateral como cajón */
  .barra-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(300px, 86vw); height: 100vh;
    transform: translateX(-104%); transition: transform .22s ease;
    box-shadow: 0 0 44px rgba(0, 0, 0, .45);
  }
  body.con-banda-pruebas .barra-lateral { top: var(--alto-banda); height: auto; }
  body.menu-abierto .barra-lateral { transform: none; }
  .telon-menu { position: fixed; inset: 0; z-index: 85; background: rgba(24, 22, 28, .5); }
  body.menu-abierto .telon-menu { display: block; }
  .cerrar-menu { display: inline-flex; position: absolute; top: 10px; right: 8px;
                 color: #a6abb4; font-size: 18px; z-index: 1; }
  .marca { padding-right: 56px; }
  .menu a { padding: 11px 12px; font-size: 14.5px; }

  /* Contenido */
  .contenido, body.con-banda-pruebas .contenido { height: auto; flex: 1; min-height: 0;
                                                   padding: 14px 14px 56px; }
  .ini-saludo { margin-top: 4px; }          /* el usuario ya está en la cabecera */
  h1 { font-size: 19px; }
  .subtitulo { font-size: 13px; margin-bottom: 14px; }
  .tarjeta { padding: 14px; border-radius: 12px; }
  .acciones { gap: 8px; }
  /* Campos de 16 px: con menos, iOS acerca la pantalla al tocar un campo */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }

  /* Tablas: se deslizan de lado dentro de su tarjeta, no la página */
  .tarjeta, .modal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla-scroll { margin: 0 -14px; padding: 0 14px; }
  .tabla-scroll > table { min-width: 640px; }
  .tabla-scroll > .tabla-clientes { min-width: 880px; }
  .tabla-scroll th, .tabla-scroll td { white-space: nowrap; }   /* fechas y horas enteras */
  .tabla-compacta { font-size: 12.5px; }
  .marca-producto { display: none; }

  /* Cuadros a pantalla casi completa */
  .modal-fondo { padding: 8px; align-items: flex-start; padding-top: max(8px, 4vh); }
  .modal { max-height: calc(100vh - 16px); padding: 16px; border-radius: 12px; }
  body.con-banda-pruebas .modal-fondo { top: var(--alto-banda); }

  /* Dashboard */
  .dash-filtro { flex-wrap: wrap; }
  .dash-kpis-grandes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-kpis-grandes .kpi-dash { padding: 12px 12px; gap: 10px; }
  .dash-kpis-grandes .kpi-icono { width: 34px; height: 34px; border-radius: 9px; }
  .dash-kpis-grandes .kpi-icono svg { width: 17px; height: 17px; }
  .dash-kpis-grandes .kpi-valor { font-size: 19px; }
  .dash-kpis-grandes .kpi-titulo { font-size: 11px; }
  .grid-2, .dash-donuts, .dash-hero { grid-template-columns: 1fr; }
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
}