/* Cofrial SpA · capa visual del prototipo (tienda y panel interno comparten estas piezas).
   Solo presentación: ningún selector depende de la lógica de negocio. Colores, radios y sombras viven en variables;
   el modo oscuro (según el sistema o el botón de la barra) solo redefine las variables. */

/* Schibsted Grotesk variable autoalojada (subconjunto latino, WOFF2). La "Schibsted Fallback" iguala las métricas para que el cambio de fuente no mueva el diseño. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-var.ba4038fc5cb5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial"); size-adjust: 113.5%; ascent-override: 86%; descent-override: 22.7%; line-gap-override: 0%; }

:root {
  --fondo: #F7F9FC;
  --fondo-2: #EDF3F9;
  --tarjeta: #FFFFFF;
  --texto: #0B2350;
  --texto-2: #43546C;
  --texto-3: #566680;           /* contraste 5,6:1 sobre blanco (AA) */
  --borde: #D5E1EE;
  --borde-fuerte: #BCCBDD;
  --acento: #143A7B;             /* azul marino del logo */
  --acento-hover: #0F2D61;
  --acento-suave: #E8EEF9;
  --acento-fg: #FFFFFF;
  --marino: #0B2350;
  --lima: #BDE63A;              /* verde lima del logo: solo acentos de marca (no es el verde de estado) */
  --lima-suave: #F1FAD0;
  --lima-fg: #0B1A33;
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .05);
  --sombra-alta: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .12);
  --lateral: 248px;
  --foco: rgba(20, 58, 123, .45);
  --cabecera-tabla: #F8FAFC;
  --hover-fila: #F8FAFD;
  --entrada: #FFFFFF;
  --columna: #E9EDF4;

  /* estados: fondo pastel + texto oscuro del mismo tono */
  --pendiente-bg: #FEF3C7;  --pendiente-fg: #8A3B0C;
  --asignado-bg: #DBEAFE;   --asignado-fg: #1E3A8A;
  --transito-bg: #E0F2FE;   --transito-fg: #075985;
  --entregado-bg: #DCFCE7;  --entregado-fg: #14532D;
  --cancelado-bg: #EEF1F5;  --cancelado-fg: #3F4B5F;
  --alerta-bg: #FEE2E2;     --alerta-fg: #991B1B;
  --alerta-borde: #FCA5A5;
  --ok: #16A34A;
}

/* modo oscuro: sigue al sistema, o se fuerza con data-tema en <html> (botón de la barra) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0B1220; --fondo-2: #121B2E; --tarjeta: #111A2C; --texto: #E8EDF6; --texto-2: #B7C2D4; --texto-3: #93A1B8;
    --borde: #223049; --borde-fuerte: #31425F; --acento: #BDE63A; --acento-hover: #D2F25E; --acento-suave: #1B2F55; --acento-fg: #0B1A33; --lima-suave: #26340F;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .55);
    --foco: rgba(189, 230, 58, .55); --cabecera-tabla: #0F1829; --hover-fila: #15203A; --entrada: #0D1626; --columna: #0F1829;
    --pendiente-bg: #3B2A0A; --pendiente-fg: #FCD34D; --asignado-bg: #172A57; --asignado-fg: #BFD3FF;
    --transito-bg: #0C3047; --transito-fg: #7DD3FC; --entregado-bg: #0F3A22; --entregado-fg: #86EFAC;
    --cancelado-bg: #1B2740; --cancelado-fg: #B7C2D4; --alerta-bg: #451A1A; --alerta-fg: #FCA5A5; --alerta-borde: #7F1D1D;
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0B1220; --fondo-2: #121B2E; --tarjeta: #111A2C; --texto: #E8EDF6; --texto-2: #B7C2D4; --texto-3: #93A1B8;
  --borde: #223049; --borde-fuerte: #31425F; --acento: #BDE63A; --acento-hover: #D2F25E; --acento-suave: #1B2F55; --acento-fg: #0B1A33; --lima-suave: #26340F;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .55);
  --foco: rgba(189, 230, 58, .55); --cabecera-tabla: #0F1829; --hover-fila: #15203A; --entrada: #0D1626; --columna: #0F1829;
  --pendiente-bg: #3B2A0A; --pendiente-fg: #FCD34D; --asignado-bg: #172A57; --asignado-fg: #BFD3FF;
  --transito-bg: #0C3047; --transito-fg: #7DD3FC; --entregado-bg: #0F3A22; --entregado-fg: #86EFAC;
  --cancelado-bg: #1B2740; --cancelado-fg: #B7C2D4; --alerta-bg: #451A1A; --alerta-fg: #FCA5A5; --alerta-borde: #7F1D1D;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
:root[data-tema="claro"] { color-scheme: light; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.55 "Schibsted Grotesk", "Schibsted Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.012em; }
h1 { font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
img { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
svg.spark { max-width: 100%; height: auto; display: block; }
::selection { background: var(--acento); color: var(--acento-fg); }

/* enlace para saltar al contenido (teclado y lectores de pantalla) */
.salto { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--acento); color: var(--acento-fg); padding: 10px 16px; border-radius: 0 0 var(--radio-sm) var(--radio-sm); font-weight: 600; transition: top .15s; }
.salto:focus { top: 0; text-decoration: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estructura: barra lateral + contenido ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: var(--lateral); flex: none; background: var(--tarjeta); border-right: 1px solid var(--borde);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; color: var(--texto); font-weight: 700; font-size: 1.05rem; }
.marca:hover { text-decoration: none; }
.marca-logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, #1B4A96, var(--marino)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(11, 35, 80, .35); overflow: hidden; }
.marca-logo img { width: 22px; height: auto; display: block; }
.marca small { display: block; font-weight: 500; font-size: .75rem; color: var(--texto-3); margin-top: -2px; }
.nav-etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 16px 12px 6px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; position: relative;
  color: var(--texto-2); font-weight: 500; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--fondo); text-decoration: none; color: var(--texto); }
.nav a.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.nav a.activo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--lima); }
.nav svg, .marca-logo svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.usuario { margin-top: auto; border-top: 1px solid var(--borde); padding: 14px 6px 0; display: flex; align-items: center; gap: 10px; }
.usuario-datos { min-width: 0; flex: 1; font-size: .85rem; }
.usuario-datos b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contenido { flex: 1; min-width: 0; padding: 32px 40px 56px; max-width: 1320px; }
.barra-movil { display: none; }

/* botón de tema (claro/oscuro) */
.tema-btn { background: transparent; color: var(--texto-2); border: 1px solid var(--borde-fuerte); padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: 50%; flex: none; }
.tema-btn:hover { background: var(--fondo-2); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: none; }
.tema-btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-tema-btn] svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }

/* ---------- encabezado de página ---------- */
.pagina-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.pagina-cab h1 { font-size: 1.75rem; }
.pagina-cab .sub { color: var(--texto-3); margin: 6px 0 0; font-size: .95rem; max-width: 70ch; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- tarjetas ---------- */
.tarjeta-ui { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--borde); padding: 22px 24px; }
.tarjeta-ui + .tarjeta-ui, .tarjeta-ui + .tabla-caja, .tabla-caja + .tarjeta-ui, .rejilla + .tarjeta-ui, .rejilla + .tabla-caja { margin-top: 20px; }
.tarjeta-ui h2 { margin-bottom: 14px; }
.seccion { margin: 32px 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.seccion h2 { font-size: 1.12rem; }
.seccion .mas { font-size: .9rem; font-weight: 600; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 4px; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla.modulos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rejilla.vehiculos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rejilla > .tarjeta-ui { margin-top: 0; }
.rejilla > * { min-width: 0; }
select:not(#mp-brick-container select) { max-width: 100%; }

/* KPI */
.kpi-card { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px 16px; position: relative; overflow: hidden; }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--borde-fuerte); }
.kpi-card.acento::before { background: var(--lima); }
.kpi-card.critico::before { background: #DC2626; }
.kpi-card .etiqueta::first-letter { text-transform: uppercase; }
.kpi-card .etiqueta { color: var(--texto-2); font-size: .84rem; font-weight: 500; }
.kpi-card .valor { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700; letter-spacing: -.025em; margin: 6px 0 2px; line-height: 1.1; }
.kpi-card .detalle { color: var(--texto-3); font-size: .8rem; }
.kpi-card.critico .valor { color: var(--alerta-fg); }
.kpi-card.acento .valor { color: var(--acento); }

/* barras horizontales (ventas por canal, embudo por etapa) */
.hbarra { display: grid; gap: 14px; }
.hbarra-fila { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 12px; align-items: center; font-size: .92rem; }
.hbarra-fila .pista { height: 10px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.hbarra-fila .pista i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #143A7B, var(--lima)); min-width: 4px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.hbarra-fila b { text-align: right; }

/* ---------- tablas ---------- */
.tabla-caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
thead th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 600; padding: 13px 20px; background: var(--cabecera-tabla); border-bottom: 1px solid var(--borde); white-space: nowrap; }
tbody td, tbody th { padding: 14px 20px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--hover-fila); }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; }
td.vacio { text-align: center; color: var(--texto-3); padding: 40px 20px; }
.id-orden { font-weight: 600; }
.frio, .muted { font-size: .84rem; color: var(--texto-3); }
.fila-total th, .fila-total td { background: var(--cabecera-tabla); font-weight: 700; }

/* estado vacío con ícono */
.vacio-caja { text-align: center; padding: 44px 20px; color: var(--texto-3); }
.vacio-caja .vacio-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; }
.vacio-caja .vacio-ico svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vacio-caja h2 { color: var(--texto); margin-bottom: 6px; }
.vacio-caja p { max-width: 44ch; margin: 0 auto 16px; }

/* ---------- chips de estado ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--cancelado-bg); color: var(--cancelado-fg); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.chip.pendiente { background: var(--pendiente-bg); color: var(--pendiente-fg); }
.chip.asignado { background: var(--asignado-bg); color: var(--asignado-fg); }
.chip.transito { background: var(--transito-bg); color: var(--transito-fg); }
.chip.entregado { background: var(--entregado-bg); color: var(--entregado-fg); }
.chip.cancelado { background: var(--cancelado-bg); color: var(--cancelado-fg); }
.chip.alerta, .alerta { background: var(--alerta-bg); color: var(--alerta-fg); }
.chip.sin-punto::before { display: none; }
.alerta { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; }

/* ---------- pestañas con contador ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto-2); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.tab:hover { border-color: var(--borde-fuerte); background: var(--tarjeta); color: var(--texto); text-decoration: none; box-shadow: none; }
.tab .n { background: var(--fondo); color: var(--texto-3); border-radius: 999px; padding: 0 8px; font-size: .78rem; font-weight: 600; min-width: 22px; text-align: center; }
.tab.activo, .tab.activo:hover { background: var(--acento); border-color: var(--acento); color: var(--acento-fg); }
.tab.activo .n { background: rgba(255, 255, 255, .24); color: inherit; }

/* ---------- formularios y botones ---------- */
/* El Brick de Mercado Pago trae su propio CSS; estas reglas no deben alcanzarlo. */
label:not(#mp-brick-container label) { display: block; margin: 16px 0 6px; font-size: .85rem; font-weight: 600; color: var(--texto-2); }
input:not(#mp-brick-container input), select:not(#mp-brick-container select), textarea:not(#mp-brick-container textarea) {
  font: inherit; color: var(--texto); background: var(--entrada); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  padding: 10px 12px; max-width: 100%; transition: border-color .12s, box-shadow .12s;
}
select:not(#mp-brick-container select) {
  padding-right: 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem 1.125rem;
}
input:not(#mp-brick-container input)::placeholder, textarea:not(#mp-brick-container textarea)::placeholder { color: var(--texto-3); opacity: .9; }
input:not(#mp-brick-container input):hover, select:not(#mp-brick-container select):hover, textarea:not(#mp-brick-container textarea):hover { border-color: var(--texto-3); }
input:not(#mp-brick-container input):focus, select:not(#mp-brick-container select):focus, textarea:not(#mp-brick-container textarea):focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px var(--foco); }
button:focus-visible, .btn:focus-visible, .tab:focus-visible, a:focus-visible, summary:focus-visible, input[type=radio]:focus-visible, input[type=checkbox]:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
input:user-invalid { border-color: #DC2626; }
form:not(.en-linea) > input:not([type=hidden]):not([type=number]):not([type=radio]):not([type=checkbox]), form:not(.en-linea) > select, form:not(.en-linea) > textarea { width: 100%; max-width: 460px; display: block; }
input[type=number] { width: 84px; }
input[type=radio], input[type=checkbox] { accent-color: var(--acento); width: 16px; height: 16px; padding: 0; }
button:not(#mp-brick-container button), .btn {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radio-sm); border: 1px solid var(--acento); background: var(--acento); color: var(--acento-fg); text-decoration: none;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s; line-height: 1.2;
}
button:not(#mp-brick-container button):hover, .btn:hover { background: var(--acento-hover); border-color: var(--acento-hover); text-decoration: none; box-shadow: 0 4px 12px rgba(11, 35, 80, .28); }
button:not(#mp-brick-container button):active, .btn:active { transform: translateY(1px); box-shadow: none; }
button:not(#mp-brick-container button)[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* Iconos, steppers y enlaces: anulan el CTA primario (mayor especificidad que button:not(#mp-brick-container)) */
button.tema-btn:not(#mp-brick-container button),
a.tema-btn {
  background: transparent; color: var(--texto-2); border: 1px solid var(--borde-fuerte); padding: 0;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; flex: none; box-shadow: none; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
button.tema-btn:not(#mp-brick-container button):hover,
a.tema-btn:hover { background: var(--fondo-2); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: none; transform: none; }
button.enlace:not(#mp-brick-container button) {
  background: none; border: 0; color: var(--texto-2); padding: 4px 2px; font-weight: 500; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 3px; box-shadow: none; border-radius: 0; width: auto; height: auto; min-width: 0; min-height: 0;
}
button.enlace:not(#mp-brick-container button):hover { background: none; color: var(--acento); box-shadow: none; transform: none; }
.cant button:not(#mp-brick-container button) {
  background: transparent; color: var(--texto); border: 0; padding: 0; width: 34px; height: 40px; min-width: 34px; min-height: 40px;
  border-radius: 0; font-size: 1.25rem; font-weight: 600; line-height: 1; box-shadow: none;
}
.cant button:not(#mp-brick-container button):hover { background: var(--fondo-2); box-shadow: none; border-color: transparent; transform: none; }
button.asistente-cerrar:not(#mp-brick-container button) {
  background: rgba(255, 255, 255, .14); border: 0; color: #fff; padding: 0; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border-radius: 50%; box-shadow: none; font-weight: 500;
}
button.asistente-cerrar:not(#mp-brick-container button):hover { background: rgba(255, 255, 255, .26); box-shadow: none; transform: none; }

.btn-sec, button.btn-sec { background: var(--tarjeta); color: var(--texto); border-color: var(--borde-fuerte); }
.btn-sec:hover, button.btn-sec:hover { background: var(--fondo-2); border-color: var(--texto-3); box-shadow: none; }
.btn-peligro, button.btn-peligro { background: var(--tarjeta); color: var(--alerta-fg); border-color: var(--alerta-borde); }
.btn-peligro:hover, button.btn-peligro:hover { background: var(--alerta-bg); border-color: var(--alerta-fg); box-shadow: none; }
.btn-grande { padding: 13px 22px; font-size: 1rem; }
.btn-bloque { width: 100%; }
button.enlace { background: none; border: 0; color: var(--texto-2); padding: 4px 2px; font-weight: 500; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
button.enlace:hover { background: none; color: var(--acento); box-shadow: none; }
td button, td .btn { padding: 6px 12px; font-size: .85rem; }
td input[type=number] { padding: 6px 8px; width: 74px; }
td select { padding: 6px 2rem 6px 8px; max-width: 220px; }
.en-linea { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-linea input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-width: 0; flex: 1 1 16rem; }   /* size="50" medía 457 px y desbordaba el móvil */
.ayuda { font-size: .82rem; color: var(--texto-3); margin: 4px 0 0; }
.errorlist { color: var(--alerta-fg); list-style: none; padding: 0; margin: 4px 0; font-size: .85rem; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- avisos ---------- */
.avisos { margin-bottom: 20px; display: grid; gap: 8px; }
.aviso { --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.01'/%3E%3C/svg%3E");
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--radio-sm); background: var(--tarjeta); border: 1px solid var(--borde-fuerte); color: var(--texto); font-size: .92rem; box-shadow: var(--sombra); animation: entra .25s ease-out; }
.aviso::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ico-aviso) center / contain no-repeat; mask: var(--ico-aviso) center / contain no-repeat; }
.aviso.success, .aviso.exito { --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.5'/%3E%3C/svg%3E"); border-color: var(--ok); background: var(--entregado-bg); color: var(--entregado-fg); }
.aviso.error { --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.01'/%3E%3C/svg%3E"); border-color: var(--alerta-borde); background: var(--alerta-bg); color: var(--alerta-fg); }
.aviso.warning { --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.4v.01'/%3E%3C/svg%3E"); border-color: #D97706; background: var(--pendiente-bg); color: var(--pendiente-fg); }
.aviso a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@keyframes entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- pestañas de sección (CRM) ---------- */
.subnav { position: relative; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; padding: 5px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; width: fit-content; max-width: 100%; box-shadow: var(--sombra); }
.subnav a { padding: 7px 14px; border-radius: 8px; color: var(--texto-2); font-weight: 500; font-size: .92rem; transition: background .12s; }
.subnav a:hover { background: var(--fondo); text-decoration: none; color: var(--texto); }
.subnav a.activo { background: var(--acento); color: var(--acento-fg); }
.subnav .rol { margin: 0 10px 0 8px; }

/* ---------- embudo (kanban) ---------- */
.embudo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.col { background: var(--columna); border-radius: var(--radio); padding: 12px; min-height: 140px; scroll-snap-align: start; border-top: 3px solid var(--borde-fuerte); }
.col.ganada { border-top-color: var(--ok); }
.col.perdida { border-top-color: #DC2626; }
.col-cab { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-weight: 600; font-size: .9rem; gap: 8px; }
.col-cab .n { background: var(--tarjeta); border-radius: 999px; padding: 0 9px; font-size: .78rem; color: var(--texto-2); }
.col-vacia { color: var(--texto-3); font-size: .85rem; text-align: center; padding: 18px 8px; border: 1px dashed var(--borde-fuerte); border-radius: 12px; margin-top: 8px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-top: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: transform .12s, box-shadow .12s; }
.tarjeta:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.tarjeta a { font-weight: 600; }

/* ---------- línea de tiempo del pedido ---------- */
.pasos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 4px 0 8px; }
.paso { position: relative; text-align: center; font-size: .82rem; color: var(--texto-3); padding-top: 42px; }
.paso::before { content: ""; position: absolute; top: 5px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--tarjeta); border: 2px solid var(--borde-fuerte); z-index: 1; transition: all .3s; }
.paso::after { content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 4px; border-radius: 4px; background: var(--borde); }
.paso:first-child::after { display: none; }
.paso .ico { position: absolute; top: 5px; left: 50%; width: 26px; height: 26px; margin-left: -13px; z-index: 2; display: grid; place-items: center; color: var(--texto-3); }
.paso .ico svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paso.hecho { color: var(--texto); font-weight: 600; }
.paso.hecho::before { background: var(--acento); border-color: var(--acento); }
.paso.hecho::after { background: var(--acento); }
.paso.hecho .ico { color: var(--acento-fg); }
.paso.actual::before { background: var(--acento); border-color: var(--lima); box-shadow: 0 0 0 6px rgba(189, 230, 58, .35); animation: pulso 2.2s ease-out infinite; }
.paso.actual { color: var(--acento); }
.paso small { display: block; font-weight: 500; color: var(--texto-3); font-size: .75rem; margin-top: 2px; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(189, 230, 58, .6); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Seguimiento del envío (tienda): rail en tres columnas para centrar marca y tramos */
.pasos-envio { grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 12px 0 6px; align-items: start; }
.pasos-envio .paso { padding-top: 0; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.pasos-envio .paso::before, .pasos-envio .paso::after { display: none; }
.pasos-envio .paso-hito { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; margin-bottom: 10px; }
.pasos-envio .paso-tramo { height: 4px; background: var(--borde); border-radius: 4px; min-width: 0; }
.pasos-envio .paso:first-child .paso-tramo-izq { visibility: hidden; }
.pasos-envio .paso:last-child .paso-tramo-der { visibility: hidden; }
.pasos-envio .paso.hecho .paso-tramo { background: var(--acento); }
.pasos-envio .paso-marca {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--tarjeta);
  display: grid; place-items: center; position: relative; z-index: 1; transition: background .2s, border-color .2s, box-shadow .2s;
}
.pasos-envio .paso.actual .paso-marca { border-color: var(--lima); box-shadow: 0 0 0 6px rgba(189, 230, 58, .35); animation: pulso 2.2s ease-out infinite; }
.pasos-envio .paso.hecho .paso-marca { background: var(--acento); border-color: var(--acento); }
.pasos-envio .paso.actual .paso-marca { background: var(--acento); }
.pasos-envio .paso .ico { position: static; top: auto; left: auto; margin: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.pasos-envio .paso-etq { display: block; width: 100%; text-align: center; padding: 0 4px; line-height: 1.25; }
.pasos-envio .paso-etq small { margin-top: 3px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 0; }
.datos dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 600; margin-bottom: 3px; }
.datos dd { margin: 0; font-weight: 500; }

/* ---------- flota ---------- */
.vehiculo { display: flex; flex-direction: column; gap: 14px; transition: box-shadow .15s, border-color .15s; }
.vehiculo:hover { box-shadow: var(--sombra-alta); }
.vehiculo-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vehiculo-cab .patente { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.vehiculo-id { display: flex; gap: 12px; align-items: center; }
.vehiculo-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; flex: none; }
.vehiculo-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vehiculo.en-alerta { border-color: var(--alerta-borde); box-shadow: 0 0 0 3px var(--alerta-bg), var(--sombra); }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini div { background: var(--fondo); border-radius: 12px; padding: 10px 10px; }
.mini span { display: block; font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.mini b { font-size: 1.02rem; white-space: nowrap; }
.mini b.mal { color: var(--alerta-fg); }
.barra { height: 8px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .6s; }
.barra i.bajo { background: #D97706; }
.viaje { display: grid; gap: 14px; }
.ruta { display: grid; grid-template-columns: 14px 1fr; gap: 0 12px; align-items: start; }
.ruta .punto { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--acento); margin-top: 5px; }
.ruta .punto.fin { background: var(--acento); }
.ruta .linea { width: 2px; background: var(--borde-fuerte); margin: 0 6px; min-height: 16px; }
.conductor { display: flex; align-items: center; gap: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--texto-2); padding: 6px 12px; border: 1px solid var(--borde); border-radius: 999px; background: var(--tarjeta); }
.en-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulso-verde 1.8s ease-out infinite; }
@keyframes pulso-verde { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

/* ---------- login ---------- */
.login { max-width: 400px; margin: 6vh auto 0; }
.login form > input, .login p input { width: 100%; max-width: none; }
.login button { width: 100%; margin-top: 18px; padding: 12px; }
.login ul.errorlist { list-style: none; padding: 10px 14px; margin: 0 0 8px; background: var(--alerta-bg); color: var(--alerta-fg); border-radius: var(--radio-sm); font-size: .88rem; }
.login p { margin: 0; }

/* ---------- inicio del panel ---------- */
.hero { padding: 36px; background: linear-gradient(135deg, #143A7B, #0B2350); color: #fff; border: 0; position: relative; overflow: hidden; }
.hero h2 { font-size: 1.7rem; color: #fff; margin-bottom: 8px; }
.hero p { color: #DBEAFE; max-width: 56ch; margin: 0 0 18px; }
.hero .btn, .hero .btn:hover { background: var(--lima); color: var(--lima-fg); border-color: var(--lima); }
.modulo { display: block; color: inherit; transition: transform .14s, box-shadow .14s, border-color .14s; }
.modulo:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--acento); }
.modulo .vehiculo-ico { margin-bottom: 4px; }
.modulo h2 { margin: 12px 0 4px; }
.modulo p { margin: 0; color: var(--texto-3); font-size: .9rem; }

/* ---------- skeleton (estados de carga) ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--fondo-2); border-radius: 8px; color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: brillo 1.3s infinite; }
:root[data-tema="oscuro"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); } }
@keyframes brillo { to { transform: translateX(100%); } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .contenido { padding: 26px 24px 44px; }
}
@media (max-width: 860px) {
  .app { display: block; }
  .barra-movil { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
  .barra-movil .marca { padding: 0; }
  .menu-btn { background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); padding: 8px 14px; min-height: 40px; }
  .menu-btn:hover { background: var(--borde); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: none; }
  .lateral { display: none; position: fixed; inset: 61px 0 0 0; width: auto; height: auto; z-index: 15; border-right: 0; padding: 16px 18px 24px; }
  .lateral.abierto { display: flex; animation: entra .18s ease-out; }
  .lateral .marca { display: none; }
  .nav a { padding: 12px 14px; }
  .nav a.activo::before { left: -18px; }
  .contenido { padding: 20px 16px 40px; }
  .pagina-cab h1 { font-size: 1.45rem; }
  .pagina-cab { align-items: flex-start; }
  thead th, tbody td, tbody th { padding: 12px 14px; }
  .tarjeta-ui { padding: 18px 16px; }
  .subnav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .subnav a, .subnav .rol { flex: none; }
  .hero { padding: 26px 20px; }
  .kpi-card .valor { font-size: 1.8rem; }
  .hbarra-fila { grid-template-columns: 1fr auto; }
  .hbarra-fila .pista { grid-column: 1 / -1; order: 3; }
  .pasos { margin-bottom: 0; }
  .paso { font-size: .75rem; }
  .paso small { display: none; }
  .pasos-envio .paso-etq small { display: block; font-size: .65rem; }
  input[type=number] { width: 72px; }
}
@media (max-width: 420px) {
  .rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rejilla.dos, .rejilla.vehiculos, .rejilla.modulos { grid-template-columns: 1fr; }
  .kpi-card { padding: 14px 14px 12px; }
  .kpi-card .valor { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { .lateral, .barra-movil, .acciones, .tb, .t-pie { display: none; } .contenido { padding: 0; } body { background: #fff; } }

[hidden] { display: none !important; }

/* acciones dentro de una celda (cantidad + botón) siempre en una sola línea */
td .en-linea { flex-wrap: nowrap; }
td:last-child { white-space: nowrap; }

/* requerimientos: acciones apiladas y columna de asunto legible */
td.celda-acciones { white-space: normal; min-width: 230px; }
td.celda-acciones form { display: flex; margin-bottom: 8px; flex-wrap: wrap; }
td.celda-acciones form:last-child { margin-bottom: 0; }
td.celda-asunto { min-width: 260px; }
td.celda-acciones select { max-width: 100%; }

/* tablas de texto corrido (por ejemplo el estado de la IA): las celdas sí parten línea */
.tabla-caja.texto td, .tabla-caja.texto th { white-space: normal; vertical-align: top; }
.tabla-caja.texto th { width: 34%; }

/* ---------- mapas ---------- */
.pin-mapa span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.pin-mapa.alerta span { animation: pulso-rojo 1.6s ease-out infinite; }
@keyframes pulso-rojo { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); } 70% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.ruta-info { font-size: .9rem; color: var(--texto-2); margin: 10px 0 0; }
.ruta-lista { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.mapa { isolation: isolate; height: 300px; border-radius: var(--radio-sm); background: var(--fondo-2); position: relative; }
.mapa.alto { height: 420px; }
.mapa .leaflet-tile-pane { filter: grayscale(.9) contrast(.92) brightness(1.06); }   /* mapa claro y minimalista */
.despacho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); font-weight: 400; cursor: pointer; }
.opcion:last-child { border-bottom: 0; }
.opcion input { width: auto; margin-top: 4px; }
@media (max-width: 860px) { .despacho-grid { grid-template-columns: 1fr; } }
:root[data-tema="oscuro"] .mapa .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.85) brightness(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .mapa .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.85) brightness(.9); } }
.mapa-vacio { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--fondo-2); border-radius: var(--radio-sm); color: var(--texto-2); }
.mapa-vacio b { display: block; color: var(--texto); margin-bottom: 4px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--texto-2); }
.leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.leyenda .pt { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .75rem; font-weight: 700; border: 2px solid var(--tarjeta); box-shadow: 0 0 0 1px var(--borde-fuerte); }

/* paso actual de la línea de tiempo: punto blanco en vez de visto bueno */
.paso.actual .ico svg { display: none; }
.paso.actual .ico::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.pasos { list-style: none; padding-left: 0; }

/* páginas de error */
.error-pag { max-width: 560px; margin: 8vh auto 0; text-align: center; padding: 40px 28px; }
.error-pag .codigo { font-size: 4.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--acento); margin-bottom: 8px; }
.error-pag h1 { font-size: 1.4rem; margin-bottom: 8px; }
.error-pag p { color: var(--texto-3); }
.error-pag .acciones { justify-content: center; margin-top: 18px; }

/* mapa de flota más alto para ver las rutas completas */
#mapa-flota { height: 420px; }
@media (max-width: 860px) { #mapa-flota { height: 320px; } }

/* ---------- identidad de marca: lima como acento ---------- */
/* destacador sobre una frase clave (texto siempre azul marino sobre lima: contraste ~9:1) */
.marca-texto { background: var(--lima); color: var(--lima-fg); font-weight: 700; padding: .04em .3em; margin: 0 -.05em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .marca-texto, .t-hero .marca-texto { background: var(--lima); color: var(--lima-fg); }
.linea-lima { display: block; height: 4px; width: 72px; border-radius: 4px; background: var(--lima); margin: 12px 0 0; }
.pagina-cab h1 + .linea-lima { margin-top: 10px; }
.logo-chip { display: inline-block; line-height: 0; }
/* El logo tiene letras azul marino: con tema oscuro se usa la variante de letras blancas, sin caja de fondo. */
.logo-chip .logo-tema-oscuro, .tb-marca .logo-tema-oscuro { display: none; }
:root[data-tema="oscuro"] .logo-tema-claro { display: none; }
:root[data-tema="oscuro"] .logo-tema-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-tema-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-tema-oscuro { display: block; }
}
.logo-chip img { height: 54px; width: auto; display: block; }
.marca-texto-logo { font-weight: 800; letter-spacing: .08em; color: var(--acento); }
:root[data-tema="oscuro"] .marca-texto-logo { color: var(--texto); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .marca-texto-logo { color: var(--texto); } }
/* camión, destino y bodega del mapa */
.pin-camion, .pin-destino, .pin-base { background: none; border: 0; }
.pin-camion.leaflet-div-icon { background: transparent !important; border: 0 !important; overflow: visible; line-height: 0; }
.pin-camion-graf {
  display: block; box-sizing: border-box; flex: none;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35));
}
.pin-camion .pin-etq { display: block; width: max-content; margin: 2px auto 0; padding: 0 6px; border-radius: 999px; background: #fff; color: #0F172A; font-size: .68rem; line-height: 15px; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); }
.pin-camion.alerta .pin-camion-graf { animation: pulso-camion 1.4s ease-in-out infinite; }
@keyframes pulso-camion { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pin-camion.alerta .pin-camion-graf { animation: none; } }
.leyenda .pin-camion-graf { filter: none; }
.pin-destino svg, .pin-base svg { filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35)); display: block; }

/* enlaces dentro de texto corrido: subrayados (no solo por color) */
.muted a, .sub a, .ayuda a, .tarjeta-ui p a { text-decoration: underline; text-underline-offset: 3px; }
.panel-bi { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; background: var(--lima); color: var(--lima-fg); font-weight: 700; font-size: .92rem; }
.panel-bi:hover { text-decoration: none; filter: brightness(.95); }

/* confirmación de compra */
.confirmacion { display: flex; gap: 18px; align-items: flex-start; background: var(--entregado-bg); color: var(--entregado-fg); border: 1px solid #86EFAC; border-radius: var(--radio); padding: 22px 24px; margin-bottom: 22px; animation: entra .3s ease-out; }
.confirmacion h2 { font-size: 1.3rem; color: inherit; margin-bottom: 4px; }
.confirmacion p { margin: 0 0 12px; }
.conf-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.conf-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.confirmacion .btn-sec { background: rgba(255, 255, 255, .7); }
@media (max-width: 480px) { .confirmacion { flex-direction: column; } }

/* tablas que se vuelven tarjetas en móvil */
@media (max-width: 600px) {
  .tabla-cards { overflow: visible; background: none; border: 0; box-shadow: none; }
  .tabla-cards table, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td, .tabla-cards th { display: block; width: 100%; }
  .tabla-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-cards tbody tr { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 10px; padding: 6px 0; box-shadow: var(--sombra); }
  .tabla-cards td, .tabla-cards th { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 7px 16px; text-align: right; }
  .tabla-cards td[data-label]::before { content: attr(data-label); color: var(--texto-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; text-align: left; }
  .tabla-cards td[colspan], .tabla-cards th[colspan] { justify-content: flex-end; }
  .tabla-cards tr:has(td[colspan]), .tabla-cards tr.fila-total { background: var(--cabecera-tabla); }
  .tabla-cards td[data-label="Producto"] { font-weight: 600; text-align: left; justify-content: flex-start; }
  .tabla-cards td[data-label="Producto"]::before { display: none; }
}
@media (max-width: 600px) {
  .tabla-cards tbody tr:has(td[colspan]), .tabla-cards tbody tr.fila-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; margin-bottom: 6px; }
  .tabla-cards tbody tr:has(td[colspan]) > *, .tabla-cards tbody tr.fila-total > * { width: auto; padding: 0; text-align: right; }
  .tabla-cards tr.fila-total { font-size: 1.05rem; }
}

/* íconos de las leyendas de los mapas */
.leyenda .ley-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
.leyenda .ley-ico svg { width: 38px; height: auto; max-height: 32px; display: block; }
.leyenda .ley-ico img { width: 64px; height: auto; display: block; }      /* mismo tamaño que el camión del mapa */

/* modo demostración */
.demo-estado { margin-top: 16px; padding: 12px 16px; border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto-2); font-weight: 500; }
.demo-estado.activa { background: var(--alerta-bg); color: var(--alerta-fg); font-weight: 700; }
.demo-lista { padding-left: 18px; display: grid; gap: 8px; margin: 0; }
/* tiempo acelerado: un color sólido igual en los dos temas, porque si no se nota, un camión cruzando la región en minutos parece un error */
.aviso.aviso-tiempo { background: #F59E0B; border-color: #B45309; color: #1F1300; }
.aviso.aviso-tiempo[hidden] { display: none; }
.tiempo-boton[aria-pressed="true"], button.tiempo-boton[aria-pressed="true"] { background: #F59E0B; border-color: #B45309; color: #1F1300; font-weight: 700; }
.dialogo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; max-width: 460px; width: calc(100% - 32px); background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta); }
.dialogo::backdrop { background: rgba(15, 23, 42, .55); }
.dialogo h2 { margin-bottom: 8px; }

/* icono de la aplicación en el menú del panel interno */
.marca-icono { width: 32px; height: 32px; border-radius: 8px; flex: none; display: block; }


/* ---------- estados compartidos (estados.js y componentes/vacio_estado.html) ---------- */
.vacio-caja .vacio-titulo { margin: 0 0 6px; color: var(--texto); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.vacio-caja.compacto { padding: 24px 20px; }
.vacio-caja.compacto .vacio-ico { width: 44px; height: 44px; margin-bottom: 10px; }
.vacio-caja.compacto .vacio-ico svg { width: 22px; height: 22px; }
.vacio-caja.compacto .vacio-titulo { font-size: 1rem; }
.vacio-caja.compacto p { margin-bottom: 12px; }
.vacio-caja .acciones { justify-content: center; }
.vacio-caja .vacio-ico.alerta { background: var(--alerta-bg); color: var(--alerta-fg); }

/* indicador de conexión de los paneles que se refrescan solos */
.vivo { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--texto-3); background: var(--cancelado-bg); white-space: nowrap; }
.vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.vivo[data-estado="vivo"] { color: var(--entregado-fg); background: var(--entregado-bg); }
.vivo[data-estado="vivo"]::before { animation: pulso-vivo 2s ease-out infinite; }
.vivo[data-estado="retraso"] { color: var(--pendiente-fg); background: var(--pendiente-bg); }
.vivo[data-estado="caido"] { color: var(--alerta-fg); background: var(--alerta-bg); }
.vivo[data-estado="caido"]::before { border-radius: 2px; }                 /* la forma cambia, no solo el color */
@keyframes pulso-vivo { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .vivo[data-estado="vivo"]::before { animation: none; } }
.desactualizado [data-resumen], .desactualizado [data-campo], .desactualizado .seg-datos b, .desactualizado .temp-grande, .desactualizado .mapa, .desactualizado .grafico { opacity: .62; transition: opacity .3s; }

/* acción destructiva en dos pasos */
button.confirmando, .btn.confirmando { background: var(--alerta-fg); border-color: var(--alerta-fg); color: var(--alerta-bg); }
button.confirmando:hover, .btn.confirmando:hover { background: var(--alerta-fg); border-color: var(--alerta-fg); box-shadow: none; }

/* resumen de errores de un formulario: se enfoca al cargar para que el lector de pantalla lo lea */
.resumen-errores { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radio-sm); background: var(--alerta-bg); border: 1px solid var(--alerta-borde); color: var(--alerta-fg); font-size: .92rem; }
.resumen-errores:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.resumen-errores b { display: block; margin-bottom: 4px; }
.resumen-errores ul { margin: 0; padding-left: 18px; }
.resumen-errores a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #DC2626; }

/* estado de una orden: qué pasó y qué sigue */
.estado-pedido { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; padding: 16px 18px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde-fuerte); }
.estado-pedido .ep-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); }
.estado-pedido .ep-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.estado-pedido h2 { font-size: 1.05rem; margin: 0 0 2px; }
.estado-pedido p { margin: 0; color: var(--texto-2); max-width: 62ch; }
.estado-pedido .acciones { margin-top: 12px; }
.estado-pedido.cancelada { background: var(--cancelado-bg); }
.estado-pedido.cancelada .ep-ico { background: var(--tarjeta); color: var(--cancelado-fg); }
.estado-pedido.entregada { border-color: var(--ok); background: var(--entregado-bg); }
.estado-pedido.entregada .ep-ico { background: var(--tarjeta); color: var(--entregado-fg); }
.estado-pedido.entregada h2, .estado-pedido.entregada p { color: var(--entregado-fg); }
.estado-pedido.transito .ep-ico { background: var(--transito-bg); color: var(--transito-fg); }
/* ---------- panel interno (CRM, flota) con la dirección «Termómetro» ---------- */
.pagina-cab .marca-texto { background: none; color: inherit; padding: 0; font-weight: inherit; }
.pagina-cab h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.tarjeta-ui, .kpi-card, .tabla-caja { border-radius: 18px; box-shadow: none; }
.kpi-card { container-type: inline-size; padding: 18px 20px; }
.kpi-card::before { display: none; }
.kpi-card.critico { border-color: var(--alerta-borde); }
.kpi-card .valor { font-size: clamp(1.4rem, 12cqi, 2rem); letter-spacing: -.035em; white-space: nowrap; }
.rejilla.kpis, .rejilla:has(> .kpi-card) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.hbarra-fila .pista { height: 8px; }
.hbarra-fila .pista i { background: var(--acento); }
:root[data-tema="oscuro"] .hbarra-fila .pista i { background: #2E5AA8; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .hbarra-fila .pista i { background: #2E5AA8; } }
/* navegación del CRM: pestañas con subrayado, no una caja con botones */
.subnav { background: none; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; box-shadow: none; padding: 0; gap: 4px 20px; width: auto; max-width: 100%; margin-bottom: 28px; }
.subnav a { padding: 10px 2px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { background: none; border-bottom-color: var(--borde-fuerte); }
.subnav a.activo { background: none; color: var(--texto); font-weight: 650; border-bottom-color: var(--lima); }
.panel-bi { background: none; color: var(--acento); padding: 10px 2px; border-radius: 0; font-weight: 600; }
:root[data-tema="oscuro"] .panel-bi { color: var(--texto); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .panel-bi { color: var(--texto); } }
.subnav .rol { margin: 0 0 0 auto; }
.embudo .col, .embudo > * { border-radius: 18px; }
.tabla-caja { position: relative; }
.pagina-cab > div:first-child { flex: 1 1 320px; min-width: 0; }
.cerrar-viaje { margin: 14px 0 0; }
.cerrar-viaje button { width: 100%; }

/* desglose de la IA en el CRM */
.desglose { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 22px 24px; }
.desglose-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.desglose-cab h2 { margin: 0; }
.desglose-resumen { font-size: 1.05rem; font-weight: 600; margin: 0 0 16px; }
.desglose-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 18px 0 8px; }
.hechos { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.hechos q { display: block; color: var(--texto-3); font-size: .86rem; quotes: "\201C" "\201D"; }
.desglose-pie { margin: 16px 0 0; }
.chip.urg-baja { background: var(--entregado-bg); color: var(--entregado-fg); }
.chip.urg-media { background: var(--pendiente-bg); color: var(--pendiente-fg); }
.chip.urg-alta { background: var(--alerta-bg); color: var(--alerta-fg); }
.texto-original { font-size: 1rem; line-height: 1.6; padding: 14px 16px; background: var(--fondo); border-radius: 12px; border-left: 4px solid var(--borde-fuerte); margin: 0 0 16px; }
.dato-base { margin-top: 20px; border-left: 5px solid var(--lima); }
.acierto-cifra b { font-size: 2rem; letter-spacing: -.03em; margin-right: 8px; }
/* ---------- flota y despacho (Termómetro): lo que está pasando primero, el resto compacto ---------- */
.vehiculo.sin-lectura { padding: 12px 16px; }
.vehiculo.sin-lectura .mini { display: none; }
.vehiculo.sin-lectura .vehiculo-cab { margin: 0; }
.rejilla.vehiculos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.lista-corta { max-height: 340px; overflow-y: auto; padding-block: 8px; }
.despacho-grid > div:last-child { position: sticky; top: 16px; }
@media (max-width: 860px) { .despacho-grid > div:last-child { position: static; } }
/* accesibilidad: enlaces dentro de párrafos y listas se distinguen por subrayado (no solo por color) y los enlaces de la cuenta miden al menos 24 px de alto */
.tarjeta-ui li a, .tarjeta-ui p a, .sub a { text-decoration: underline; text-underline-offset: 3px; }
.enlace { display: inline-block; padding: 4px 0; min-height: 24px; }

/* ---------- navegación por rol ---------- */
.usuario-datos .rol-cuenta { display: block; color: var(--texto-3); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.accesos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.accesos a { padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--tarjeta); color: var(--texto); font-weight: 600; font-size: .875rem; }
.accesos a:hover { background: var(--fondo-2); text-decoration: none; }
/* acciones sobre un documento (pago, nota de crédito): se despliegan dentro de la fila */
.acc-doc { margin: 2px 0; }
.acc-doc summary { cursor: pointer; color: var(--acento); font-size: .875rem; }
.acc-doc form { margin-top: 6px; }
.acc-doc input[type=number] { width: 7.5rem; }

/* ---------- navegación que se mantiene y filtros que se recuerdan (nav.js, filtros.js) ---------- */
:root { --barra-movil: 61px; }
/* el submenú del CRM queda pegado arriba al desplazarse; en móvil, justo bajo la barra superior */
.subnav { position: sticky; top: 0; z-index: 10; background: var(--fondo); }
.seccion[id] { scroll-margin-top: 90px; }   /* al saltar a una sección, el título no queda bajo el submenú fijo */
@media (max-width: 860px) {
  .seccion[id] { scroll-margin-top: calc(var(--barra-movil) + 90px); }
  .subnav { top: var(--barra-movil); margin-left: -16px; margin-right: -16px; width: auto; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav .rol { margin-left: 12px; }
  .subnav.mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .subnav.mas-izq { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
  .subnav.mas-izq.mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  html.menu-abierto { overflow: hidden; }
}

/* barra de búsqueda y selectores de las listas */
.filtro-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; }
.filtro-barra .filtro-q { flex: 1 1 240px; max-width: 360px; margin: 0; }
.filtro-barra select { flex: 0 1 auto; margin: 0; max-width: 100%; }
.filtro-cuenta { color: var(--texto-3); font-size: .85rem; margin-left: auto; }
button.filtros-limpiar-btn:not(#mp-brick-container button) { background: none; border: 0; padding: 6px 4px; color: var(--acento); font: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; min-height: 0; transform: none; }
button.filtros-limpiar-btn:not(#mp-brick-container button):hover { background: none; color: var(--acento); text-decoration-thickness: 2px; box-shadow: none; }
:root[data-tema="oscuro"] button.filtros-limpiar-btn:not(#mp-brick-container button) { color: var(--lima); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) button.filtros-limpiar-btn:not(#mp-brick-container button) { color: var(--lima); } }
.tabs .filtros-limpiar-btn { align-self: center; margin-left: 4px; }
.filtros-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--acento-suave); color: var(--texto); font-size: .92rem; }
.filtro-vacio { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 20px; margin-bottom: 14px; border: 1px dashed var(--borde-fuerte); border-radius: 18px; color: var(--texto-3); }
.filtro-vacio b { color: var(--texto); font-size: 1.05rem; }
.filtro-vacio[hidden], .filtro-barra [hidden] { display: none !important; }
.tabla-caja[hidden] { display: none; }
@media (max-width: 600px) { .filtro-barra .filtro-q { max-width: none; flex-basis: 100%; } .filtro-cuenta { margin-left: 0; flex-basis: 100%; order: 5; } }

/* tablas: sombra en el borde que indica que hay más columnas al deslizar (solo aparece cuando la tabla desborda) */
.tabla-caja {
  background:
    linear-gradient(to right, var(--tarjeta) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--tarjeta) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .16), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), transparent) right center / 10px 100% no-repeat scroll,
    var(--tarjeta);
}
:root[data-tema="oscuro"] .tabla-caja { background:
    linear-gradient(to right, var(--tarjeta) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--tarjeta) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .5), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), transparent) right center / 10px 100% no-repeat scroll,
    var(--tarjeta); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tabla-caja { background:
    linear-gradient(to right, var(--tarjeta) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--tarjeta) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .5), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), transparent) right center / 10px 100% no-repeat scroll,
    var(--tarjeta); } }
/* una tabla sin filas: en pantallas chicas el estado vacío no puede quedar cortado por el ancho de las columnas que no se ven */
td.vacio-caja, td.vacio { white-space: normal; }
@media (max-width: 860px) {
  .tabla-caja table:has(td.vacio-caja) thead, .tabla-caja table:has(td.vacio) thead { display: none; }
}
@media (max-width: 600px) { .tabla-caja tbody td:first-child { min-width: 9.5rem; } }

/* Íconos de react-icons (Lucide), pintados por {% icono %}: mismo trazo que el menú lateral. */
.ico { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.nav .ico { stroke-width: 1.8; }
.btn .ico { margin-right: 6px; }
.subnav a { display: inline-flex; align-items: center; gap: 7px; }
.subnav:has(+ .subnav-2) { margin-bottom: 0; }
.subnav.subnav-2 { position: static; border-bottom: 0; gap: 2px 16px; margin: 6px 0 22px; }
.subnav-2 a { font-size: .86rem; padding: 6px 2px; }
.subnav-2 a.activo { border-bottom-color: transparent; color: var(--acento); }
:root[data-tema="oscuro"] .subnav-2 a.activo { color: var(--texto); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .subnav-2 a.activo { color: var(--texto); } }
.subnav .panel-bi { margin-left: auto; }