/* ===========================================================
   Bear Shift Logistics LLC — estilos
   Paleta de marca: Morado #8A5BB8 (primario), Dorado #D4A847 (acento), Negro #150F14.
   Morado-dominante a propósito, para diferenciar de Golden Bear (dorado-dominante).
   =========================================================== */
:root{
  --purple:#8A5BB8; --purple-d:#6f47a0; --purple-l:#a87fd0;
  --gold:#D4A847; --gold-d:#b08c2f;
  --ink:#150F14; --ink-2:#1e1620; --ink-3:#281d2e;
  --panel:#221829; --panel-2:#2b2033; --line:#3a2d45;
  --text:#f2ecf6; --muted:#b6a8c4; --muted-2:#8d7e9d;
  --ok:#3fbf7f; --warn:#e0a52e; --bad:#e5575f; --info:#4aa3e0;
  --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --sidebar-w:230px;

  /* ===========================================================
     TOKENS UI v2 (Fase 1 del rediseño) — assets/ui/kit.css los consume.
     Se AGREGAN aquí, no reemplazan nada de arriba: app.js usa los tokens
     viejos (--purple, --panel, --line, --muted…) en miles de líneas y
     renombrarlos rompería la app entera. Los nuevos son la base del kit u-*.
     Todos los ratios de contraste de abajo están CALCULADOS (WCAG 2.1), no
     estimados a ojo; los que no llegaban a 4.5:1 se aclararon a propósito.
     =========================================================== */

  /* Espaciado — una sola escala. Nada de márgenes de 7px o 13px. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  /* Superficie — SOLO TRES niveles. Más niveles = jerarquía ilegible en oscuro.
     surf-1 página · surf-2 tarjeta · surf-3 elevado (menú, diálogo, hover). */
  --surf-1:#150F14;
  --surf-2:#221829;
  --surf-3:#2b2033;

  /* Borde — uno solo para toda la app (divisores, tarjetas, tablas).
     --border-strong existe SOLO para el contorno de controles interactivos
     (botón secundario, input): WCAG 1.4.11 pide 3:1 para el límite de un
     control, y --border (1.5:1) no llega. No usarlo como divisor decorativo. */
  --border:#463554;
  --border-strong:#7f6796;   /* 3.9 / 3.5 / 3.2 :1 vs surf-1/2/3 → pasa 3:1 en las TRES
                                (con #7a6291 daba 2.94 sobre surf-3 y un botón
                                secundario dentro de un diálogo no llegaba) */

  /* Semántico — el color SIGNIFICA algo. Morado=acción, rojo=destruir,
     verde=éxito/dinero a favor, ámbar=advertencia, azul=informativo.
     --accent (dorado) es SOLO marca (logo, detalles). NUNCA un botón. */
  --primary:#8A5BB8;         /* blanco encima: 4.9:1 ✓ */
  --primary-hover:#7a4fa8;   /* blanco encima: 6.0:1 ✓ */
  --primary-fg:#ffffff;
  --danger:#c8434b;          /* relleno destructivo; blanco encima 4.8:1 ✓
                                (el --bad #e5575f original daba 3.6:1 con blanco)

                                ⚠️ COLISIÓN CONOCIDA (pendiente, no es de esta fase):
                                `var(--danger)` YA se usaba como COLOR DE TEXTO antes
                                de existir el token — 4 veces en app.js (las ✕ de
                                quitar miembro/célula/bodega en Grupos y Zonas) y en
                                `.kpi.bad .k-val` de este mismo archivo. Con el token
                                indefinido esas declaraciones eran inválidas y el texto
                                HEREDABA el color del .badge (--muted, 6.9:1). Al
                                definirlo, esas ✕ pasaron a #c8434b = 3.54:1 sobre
                                --panel → FALLA AA, y además cambian de aspecto en una
                                fase que no debía tocar ni un píxel.
                                ARREGLO: esos 5 usos deben pasar a var(--danger-text)
                                (#f2777f, 5.7:1, el mismo rojo que sí se quería). */
  --danger-hover:#b8323a;    /* blanco encima: 5.9:1 ✓ */
  --danger-fg:#ffffff;
  --danger-text:#f2777f;     /* rojo COMO TEXTO sobre fondo oscuro: 5.7:1 vs surf-3
                                (--bad daba 4.3:1 sobre surf-3 → no pasaba AA) */
  --success:#3fbf7f;         /* 6.6:1 vs surf-3 ✓ */
  --warning:#e0a52e;         /* 7.1:1 vs surf-3 ✓ */
  --info:#4aa3e0;            /* 5.6:1 vs surf-3 ✓ */
  --accent:#D4A847;

  /* Rellenos tenues de chips/badges. Son colores OPACOS ya mezclados (no rgba)
     para que el texto tenga contraste predecible caiga el chip donde caiga. */
  --tint-neutral:#3a2f42;
  --tint-info:#282e46;
  --tint-ok:#273337;
  --tint-warn:#402f2a;
  --tint-bad:#432737;

  /* Texto — 3 pesos. Nada de inventar un cuarto gris a mitad de camino. */
  --fg:#f2ecf6;              /* 13.3:1 vs surf-3 ✓ */
  --fg-muted:#b6a8c4;        /* 6.9:1 vs surf-3 ✓ */
  --fg-subtle:#9c8cad;       /* 5.0:1 vs surf-3 ✓ (el --muted-2 #8d7e9d daba 4.1:1) */

  /* Tipografía — una sola familia (la del body) y una escala cerrada. */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --fw-normal:400; --fw-med:600; --fw-bold:700;

  /* Radio */
  --r-sm:8px; --r-md:12px; --r-lg:16px;

  /* Foco — morado claro: 7.5:1 vs surf-3, se ve sobre las tres superficies. */
  --ring:#c9a6ea;

  /* Velo de diálogo/drawer. Existe como token para que kit.css no tenga NI UN
     color escrito a mano: si mañana el velo debe ser más oscuro, se cambia aquí. */
  --scrim:rgb(0 0 0 / .62);

  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(160deg,#150F14 0%,#1b1320 60%,#150F14 100%);
  color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45; min-height:100vh;
}
[hidden]{display:none !important}
a{color:var(--purple-l);text-decoration:none}
h1,h2,h3{margin:0 0 .4em}
small{color:var(--muted)}

/* ---------- Login ---------- */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);position:relative}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-title{font-size:24px;font-weight:800;letter-spacing:.3px}
.auth-sub{color:var(--gold);font-size:13px;font-weight:600}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--purple),var(--purple-d));color:#fff;font-weight:800;font-size:18px;box-shadow:0 4px 14px rgba(138,91,184,.5)}
.logo-badge.sm{width:30px;height:30px;font-size:13px;border-radius:8px}
.auth-form{display:flex;flex-direction:column;gap:6px}
.auth-form label{font-size:12px;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:.4px}
.auth-form-title{font-weight:700;margin-bottom:6px;color:var(--gold)}
.auth-error{background:rgba(229,87,95,.15);border:1px solid var(--bad);color:#ffd7d9;padding:8px 10px;border-radius:8px;font-size:13px;margin-top:10px}
.auth-ok{background:rgba(63,191,127,.14);border:1px solid var(--success);color:#cdeedd;padding:8px 10px;border-radius:8px;font-size:13px;margin-top:10px}
.auth-link{display:block;width:100%;margin-top:10px;background:none;border:none;color:var(--muted);font-size:13px;text-align:center;cursor:pointer;text-decoration:underline}
.auth-link:hover{color:var(--text)}
.form-sec{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.input-err{border-color:var(--bad)!important;box-shadow:0 0 0 2px rgba(214,69,69,.18)!important}
.setup-card{border:1px solid var(--gold)}
.setup-step{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.setup-step:last-child{border-bottom:none}
.auth-boot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.auth-lang{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:4px 10px;font-size:11px;cursor:pointer}

/* ---------- Inputs ---------- */
input,select,textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius-sm);padding:9px 11px;font-size:14px;font-family:inherit;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(138,91,184,.25)}
textarea{resize:vertical;min-height:64px}
/* Ícono de calendario (date/datetime) en DORADO y bien visible sobre el fondo oscuro del input */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:1;transform:scale(1.15);
  filter:invert(72%) sepia(48%) saturate(560%) hue-rotate(2deg) brightness(94%);
}
label.field{display:block;font-size:12px;color:var(--muted);margin:10px 0 3px;text-transform:uppercase;letter-spacing:.3px}
.checks{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.checks label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);text-transform:none;cursor:pointer}
.checks input{width:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 15px;font-size:14px;font-weight:600;font-family:inherit;transition:.15s;background:var(--panel-2);color:var(--text)}
.btn:hover{filter:brightness(1.12)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-d));color:#fff;border-color:var(--purple-d)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#231a08;border-color:var(--gold-d)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-danger{background:transparent;border-color:var(--bad);color:#ff9ca0}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-block{width:100%;margin-top:14px}
.icon-btn{background:transparent;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:6px;border-radius:8px;position:relative;line-height:1}
.icon-btn:hover{background:rgba(255,255,255,.07)}

/* ---------- Topbar ---------- */
.app{min-height:100vh}
.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 14px;background:rgba(28,20,34,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:40}
.brand{display:flex;align-items:center;gap:9px;font-weight:800}
.brand-name{font-size:17px;letter-spacing:.3px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:0 6px;max-width:170px}
#user-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.user-roles{font-size:10.5px;color:var(--gold);text-transform:uppercase;letter-spacing:.3px}
.badge-count{position:absolute;top:-2px;right:-2px;background:var(--bad);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center}
/* ---------- Sidebar ---------- */
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:var(--sidebar-w);background:var(--ink-2);border-right:1px solid var(--line);padding:14px 10px;overflow-y:auto;z-index:30}
/* (Fase 7) Borrado .nav-group: era el encabezado de grupo del menú VIEJO de 28 ítems. La Fase 2 lo
   reemplazó por .nav-main / .nav-foot y desde entonces nadie generaba ese nombre en la app viva. */
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;color:var(--muted);background:none;border:none;cursor:pointer;font-size:14.5px;font-family:inherit;text-align:left;margin-bottom:3px}
.nav-item .ico{font-size:18px;width:22px;text-align:center}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(138,91,184,.28),rgba(138,91,184,.12));color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.nav-label{flex:1}

/* ---------- Main ---------- */
.main{margin-left:var(--sidebar-w);padding:74px 22px 30px;max-width:1200px}
.view-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.view-head h1{font-size:22px;margin:0}
.view-head .spacer{flex:1}
.view-sub{color:var(--muted);font-size:13px;margin:-10px 0 16px}

/* ---------- Cards / KPIs ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;overflow:auto}
.card h3{font-size:15px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(138,91,184,.25),transparent 70%)}
.kpi .k-val{font-size:26px;font-weight:800;letter-spacing:.4px}
.kpi .k-lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.kpi.gold .k-val{color:var(--gold)}
.kpi.good .k-val{color:var(--ok)}
.kpi.bad .k-val{color:var(--danger-text)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:rgba(255,255,255,.025)}
.t-actions{display:flex;gap:6px}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;border:1px solid var(--line);color:var(--muted)}
/* (Fase 7) Borrados .badge.role y .badge.gold: ningún sitio los generaba. Comprobado que las dos
   funciones que arman la clase del badge en caliente (fitBadge, vetCovBadge) solo producen
   'b-ok' / 'b-no' / '', nunca 'role' ni 'gold'. */
/* Las .b-* SÍ se usan, pero se construyen en caliente ('badge b-' + estado de la carga), así que
   NO aparecen escritas en el código: buscarlas por nombre da cero y parecen muertas. No lo son. */
.b-requested{color:var(--info);border-color:var(--info)}
.b-quoted{color:var(--gold);border-color:var(--gold)}
.b-accepted{color:#14b8a6;border-color:#14b8a6}
.next-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px 11px;border-radius:10px;background:rgba(138,91,184,.08);border:1px solid rgba(138,91,184,.25);font-size:13px}
.b-assigned{color:var(--purple-l);border-color:var(--purple)}
.b-in_transit{color:#56c0ff;border-color:#56c0ff}
.b-delivered{color:var(--ok);border-color:var(--ok)}
.b-cancelled{color:var(--bad);border-color:var(--bad)}
.b-ok{color:var(--ok);border-color:var(--ok)}
.b-no{color:var(--bad);border-color:var(--bad)}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.priv{color:var(--muted-2);font-style:italic}
/* (Revisión Fase 7) .muted NUNCA tuvo regla — ni ahora ni en ningún commit del historial — pero
   app.js la pinta en 115 sitios para el texto secundario (hint bajo un título, "Sin miembros",
   fechas de una fila…). Sin regla, ese texto salía al MISMO contraste que el principal, así que
   nada retrocedía visualmente. Mismo tipo de trampa que --good: la clase existe en el HTML pero
   el CSS no la define, y eso no da error en ninguna parte. Se apunta a --fg-muted (#b6a8c4,
   6.9:1 sobre surf-3, ya medido en la Fase 1) para no inventar un color nuevo. */
.muted{color:var(--fg-muted)}

/* ---------- Restos de la tarjeta de carga ----------
   (Fase 7) Se borraron .load-card y .load-actions: la Fase 3 cambió la lista de tarjetas por una
   tabla y el detalle por una página, y esos dos contenedores dejaron de existir. Las cuatro que
   quedan SÍ se siguen usando (la ruta y el bloque financiero se reusan en el detalle y en los
   modales de asignación). */
.load-route{font-weight:700;font-size:15px;letter-spacing:.3px}
.load-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:12.5px;margin-top:6px}
.load-fin{display:flex;gap:18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.load-fin .fin{display:flex;flex-direction:column}
.load-fin .fin .l{font-size:10.5px;color:var(--muted);text-transform:uppercase}
.load-fin .fin .v{font-weight:700;font-size:15px}

/* ---------- Notifications ---------- */
.notif{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);align-items:flex-start}
.notif.unread{background:rgba(138,91,184,.08)}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:6px;flex:none}
.notif.read .dot{background:var(--line)}
.notif .msg{flex:1}
.notif .when{font-size:11px;color:var(--muted-2)}

.empty{padding:30px;text-align:center;color:var(--muted-2)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input,.filters select{width:auto;min-width:150px}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,5,10,.66);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:560px;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px}
.modal-body{padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .full{grid-column:1 / -1}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:11px 18px;border-radius:30px;z-index:80;box-shadow:var(--shadow);font-size:14px;font-weight:600}
.toast.ok{border-color:var(--ok)}
.toast.err{border-color:var(--bad)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .sidebar{position:fixed;left:0;right:0;bottom:auto;top:56px;width:100%;height:60px;display:flex;flex-direction:row;border-right:none;border-bottom:1px solid var(--line);padding:6px 8px;overflow-x:auto;overflow-y:hidden;box-shadow:0 4px 10px rgba(8,5,10,.25)}
  .nav-item{flex:1 0 auto;width:auto;min-width:64px;flex-direction:column;gap:2px;padding:6px 8px;margin:0;font-size:10.5px;text-align:center}
  .nav-item .ico{font-size:19px;width:auto}
  .nav-item.active{box-shadow:inset 0 -3px 0 var(--gold)}
  .nav-label{flex:none}
  .main{margin-left:0;padding:124px 14px 30px;max-width:100%}
  .user-chip{display:none}
  .form-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .modal-overlay{padding:0}
  .modal{max-width:100%;min-height:100vh;border-radius:0}
}
/* ===== Accesibilidad / pulido (#18) ===== */
/* (Fase 7) Se quitaron .pend-row y .load-hist de estos tres selectores: la Fase 6 reemplazó las
   filas "pendientes" del tablero por .ph-row y el historial de cargas del modal ya no se dibuja
   con .load-hist. Ninguna de las dos la genera nadie en la app viva. */
.btn:focus-visible, .nav-item:focus-visible, .icon-btn:focus-visible, a:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--purple-l); outline-offset:1px; }
.notif[data-load], .gs-load, .gs-carrier, .gs-shipper{ border-radius:8px; }
.notif[data-load]:hover, .gs-load:hover, .gs-carrier:hover, .gs-shipper:hover{ background:var(--panel-2); }
@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 (max-width:720px){
  .btn, .icon-btn{ min-height:40px; }
  .nav-item{ min-height:46px; }
  table th, table td{ white-space:nowrap; }
}

/* ===== Menú v2 — 6 secciones + Configuración (Fase 2 del rediseño) =====
   El menú pasó de 28 renglones a 7 botones de sección. Los iconos ya no son emoji: son SVG del kit
   (UI.icon), así que .ico deja de ser un glifo de texto y pasa a ser una caja para el <svg>.
   Configuración se separa con un divisor y se pega al fondo: es mantenimiento, no operación diaria. */
.sidebar{display:flex;flex-direction:column}
.nav-main{flex:1 1 auto;min-height:0}
.nav-foot{flex:0 0 auto;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.nav-item .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto}
.nav-item .ico svg{width:19px;height:19px;display:block}
/* La barra de pestañas de la sección. Vive fuera de #view (ver index.html) y desaparece cuando la
   sección tiene una sola pestaña visible para ese rol. */
#view-tabs{margin:0 0 16px}
#view-tabs[hidden]{display:none}
/* Asistente flotante (patrón Intercom). z-index 45 = sobre el contenido y la topbar (40), pero
   DEBAJO del modal y del drawer del kit, que van más arriba: si tapara un diálogo sería una trampa. */
.fab-assist{position:fixed;right:18px;bottom:18px;z-index:45;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--purple);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(8,5,10,.45)}
.fab-assist:hover{filter:brightness(1.08)}
.fab-assist svg{width:22px;height:22px;display:block}
.fab-assist:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* OJO CON EL BREAKPOINT: el layout móvil de esta hoja está en **820px** (línea ~270), no en 720 — el
   de 720 es solo para tamaños de área táctil. Esta media query TIENE que ser 820, o el menú queda
   roto justo entre 721 y 820 px: la barra ya sería horizontal (regla de 820) pero mis reglas de
   arriba la seguirían poniendo en columna. Pasó de verdad y se vio en la captura de 735 px: los 7
   botones apilados y superpuestos dentro de una caja de 60 px de alto. */
@media (max-width:820px){
  /* En móvil el menú es una barra HORIZONTAL arriba: display:contents disuelve los dos contenedores
     para que los 7 botones vuelvan a ser hijos directos del flex de .sidebar, en el mismo orden. */
  .sidebar{flex-direction:row}
  .nav-main,.nav-foot{display:contents}
  .nav-foot{border-top:none;margin:0;padding:0}
  #view-tabs{margin-bottom:12px}
  /* Abajo-derecha está libre (el menú está ARRIBA en móvil), así que el flotante no tapa navegación.
     44 px = área táctil mínima. */
  .fab-assist{right:12px;bottom:12px;width:44px;height:44px}
}

/* ===========================================================
   FASE 3 — Cargas: la lista es una TABLA y el detalle es una PÁGINA (#/cargas/:id)

   Solo tokens del kit (--surf-*, --border, --fg-*, --sp-*). Nada de colores a mano: el día que
   cambie la paleta, esto cambia solo.
   =========================================================== */

/* ---- Lista ---- */
.ldt-toolbar{margin-top:12px}
.ldt-toolbar .search{flex:1 1 220px;min-width:180px}
.ldt-r1{font-weight:600;letter-spacing:.2px}
.ldt-r2{color:var(--fg-muted);font-size:var(--fs-xs,11.5px);margin-top:2px}
.ldt-route{min-width:190px}
.ldt-next{color:var(--fg-muted)}
.ldt-dash{color:var(--fg-subtle)}
.ldt-menu{width:44px;text-align:right}
/* El ⋯ aparece al pasar el mouse por la fila; en táctil (sin hover) queda SIEMPRE visible, porque
   ahí no hay forma de descubrirlo. */
.ldt-menu .u-menu__btn{opacity:0;transition:opacity .12s ease}
.u-table tbody tr:hover .ldt-menu .u-menu__btn,
.u-table tbody tr:focus-within .ldt-menu .u-menu__btn,
.ldt-menu .u-menu__btn[aria-expanded="true"]{opacity:1}
@media (hover:none){ .ldt-menu .u-menu__btn{opacity:1} }
.ldt-more{text-align:center;margin-top:var(--sp-3)}

/* ---- Detalle: encabezado pegajoso ---- */
/* top:56px = alto de la .topbar fija. En esta app el scroll es el del documento (no hay contenedor
   con overflow), así que sticky se mide contra el viewport. */
.ld-head{position:sticky;top:56px;z-index:20;background:var(--surf-1);
  padding:var(--sp-3) 0 var(--sp-2);margin:0 0 var(--sp-4);border-bottom:1px solid var(--border)}
.ld-head-top{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
.ld-head-id{flex:1 1 260px;min-width:0}
.ld-route{font-size:20px;margin:0;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ld-arrow{color:var(--fg-subtle);display:inline-flex}
.ld-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;color:var(--fg-muted);font-size:12.5px}
.ld-sub svg{vertical-align:-.15em;margin-right:3px}
.ld-dot{color:var(--fg-subtle);margin:0 2px}
/* EXACTAMENTE tres controles: siguiente paso · Editar · ⋯ */
.ld-head-act{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}
.ld-done{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-weight:600;font-size:13px}
.ld-pipe{margin-top:var(--sp-3);overflow-x:auto}
.ld-cancelled{margin-top:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);color:var(--fg-muted);font-size:13px}

/* ---- Detalle: paneles ---- */
#ld-tabs{margin-bottom:var(--sp-4)}
.ld-h3{margin:0 0 var(--sp-3);font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-muted)}
.ld-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3)}
.ld-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.ld-fact-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fg-subtle)}
.ld-fact-v{font-size:14px;color:var(--fg);word-break:break-word}
.ld-note{color:var(--fg-muted);font-size:13.5px;margin:var(--sp-3) 0 0}
.ld-muted{color:var(--fg-muted);font-size:12.5px;margin:var(--sp-2) 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ld-ok{color:var(--success);vertical-align:-.15em;margin-right:4px}
.ld-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.ld-row:last-child{border-bottom:none}
.ld-row .msg{flex:1;min-width:0;font-size:13.5px}
.ld-row .when{color:var(--fg-subtle);font-size:11.5px;margin-top:2px}
.ld-row-a{display:flex;gap:var(--sp-1);flex:0 0 auto}
.ld-alert{display:flex;align-items:flex-start;gap:8px;background:var(--tint-bad);color:var(--danger-text);
  border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:13.5px}
.ld-vet{display:flex;align-items:flex-start;gap:8px;background:var(--tint-ok);color:var(--success);
  border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:13px}
.ld-vet .ld-muted,.ld-alert .ld-muted{display:inline;color:inherit;opacity:.75}
/* Checklist de cierre: SOLO LECTURA (no son casillas clicables, son un semáforo de qué falta). */
.ld-cks{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
.ld-ck{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-subtle)}
.ld-ck.on{color:var(--success)}
/* Documento generable: título + badge de estado + sus acciones */
.ld-doc{padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.ld-doc:last-child{border-bottom:none}
.ld-doc-h{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.ld-doc-a{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* Divulgación progresiva: los formularios secundarios se abren con "+ Agregar…" */
.ld-add{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ---- Móvil ----
   DECISIÓN: la tabla NO se convierte en tarjetas. A 375 px se ocultan las cuatro columnas
   secundarias (Cliente · Carrier · Fechas · Margen) y quedan Ruta · Estado · Siguiente paso · ⋯,
   que es exactamente lo que se mira en el teléfono. El cliente y la referencia no se pierden: van
   como segunda línea dentro de la celda de Ruta. Así se conserva la semántica de tabla (encabezados,
   lectores de pantalla, orden de columnas) sin una segunda plantilla que mantener, y la página no
   desborda; si aun así no cupiera, .u-tablewrap ya scrollea DENTRO de su caja, nunca la página. */
@media (max-width:820px){
  .ldt-hide-sm{display:none}
  /* En pantalla angosta el menu de la fila va SIEMPRE visible. No basta con @media(hover:none):
     un navegador de escritorio con la ventana angosta sigue diciendo que tiene hover, y en un telefono
     real un boton que solo aparece al pasar el mouse es un boton que no existe. */
  .ldt-menu .u-menu__btn{opacity:1}
  /* La regla global de ≤720px pone nowrap en todas las celdas; aquí la ruta y el siguiente paso
     TIENEN que poder partirse o la fila se estira sin fin. */
  .u-table td.ldt-route,.u-table td.ldt-next{white-space:normal}
  .ldt-route{min-width:0}
  .ld-head{top:116px}          /* topbar 56 + barra de menú 60 */
  .ld-route{font-size:17px}
  .ld-head-act{width:100%}
  .ld-head-act .u-btn{flex:0 1 auto}
  .ld-facts{grid-template-columns:1fr 1fr}
}

/* ===========================================================
   Fase 4 — ASISTENTE DE CARGA (wizard de 4 pasos)
   Escala 4/8/12/16/24/32 y SOLO tokens (cero colores a mano).
   El dorado (--accent) aparece únicamente en el icono de los atajos, como
   acento de marca: nunca como fondo de una accion.
   =========================================================== */
.wz-head{margin-bottom:var(--sp-4)}
.wz-prog{height:4px;border-radius:999px;background:var(--border);overflow:hidden;margin-bottom:var(--sp-3)}
.wz-prog__f{display:block;height:100%;background:var(--primary);transition:width .18s ease}
.wz-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1)}
/* Los pasos son <button> y no <li>: al editar se puede saltar a cualquiera, y un
   paso navegable tiene que ser alcanzable con el teclado y tener foco visible. */
.wz-sbtn{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-1);
  background:none;border:0;border-radius:var(--r-sm);color:var(--fg-subtle);font:inherit;font-size:var(--fs-xs);
  line-height:1.2;text-align:center;cursor:pointer}
.wz-sbtn:disabled{cursor:default;opacity:.5}
.wz-sbtn__n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;border:1px solid var(--border-strong);font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.wz-sbtn.is-done{color:var(--fg-muted)}
.wz-sbtn.is-done .wz-sbtn__n{border-color:var(--success);color:var(--success)}
.wz-sbtn.is-current{color:var(--fg);font-weight:var(--fw-med)}
.wz-sbtn.is-current .wz-sbtn__n{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.wz-sbtn:not(:disabled):hover{background:var(--surf-3);color:var(--fg)}
.wz-sbtn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.wz-hint{font-size:var(--fs-xs);color:var(--fg-subtle);margin:var(--sp-1) 0 var(--sp-2)}
.wz-block{border-top:1px solid var(--border);padding-top:var(--sp-2);margin-top:var(--sp-1)}
.wz-modes{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin:var(--sp-1) 0 var(--sp-2)}
.wz-modes label,.wz-seal label,.wz-tpl{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  color:var(--fg);text-transform:none;cursor:pointer}
.wz-modes input,.wz-seal input[type=checkbox],.wz-tpl input{width:auto}
.wz-seal{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2)}
.wz-seal input[type=text]{flex:1;min-width:140px}
.wz-inline{display:flex;gap:var(--sp-2)}
.wz-inline select{flex:1;min-width:0}

/* Validacion: el mensaje va PEGADO al campo que falta, no en un toast generico. */
.wz-err{color:var(--danger-text);font-size:var(--fs-xs);margin-top:var(--sp-1)}

/* Atajos (IA / plantilla): tarjetas grandes ARRIBA del paso 1 — antes estaban
   enterrados dentro del modal y no los usaba nadie. */
.wz-scs{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.wz-sc{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surf-3);overflow:hidden}
.wz-sc__t{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);
  background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.wz-sc__t.is-static{cursor:default}
.wz-sc__t:not(.is-static):hover{background:rgba(255,255,255,.05)}
.wz-sc__t:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.wz-sc__ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:var(--r-sm);background:var(--surf-2);border:1px solid var(--border);color:var(--accent)}
.wz-sc__tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wz-sc__tx b{font-size:var(--fs-md)}
.wz-sc__tx small{color:var(--fg-subtle);font-size:var(--fs-xs)}
.wz-sc__ch{color:var(--fg-subtle);flex:0 0 auto;display:inline-flex;transition:transform .15s ease}
.wz-sc__t[aria-expanded=true] .wz-sc__ch,.wz-coll__t[aria-expanded=true] .wz-sc__ch{transform:rotate(180deg)}
.wz-sc__p{padding:0 var(--sp-3) var(--sp-3)}
.wz-sc__row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.wz-sc__hint{font-size:var(--fs-xs);color:var(--fg-subtle);margin-top:var(--sp-2)}

/* Colapsables: paradas y requisitos. El titulo lleva el CONTEO para verlo de un
   vistazo sin gastar media pantalla en casillas sueltas. */
.wz-coll{border:1px solid var(--border);border-radius:var(--r-md);margin-top:var(--sp-3)}
.wz-coll__t{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-3);
  background:none;border:0;color:var(--fg);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
.wz-coll__t>span:first-of-type{flex:1;font-weight:var(--fw-med)}
.wz-coll__t:hover{background:rgba(255,255,255,.05)}
.wz-coll__t:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.wz-coll__n{color:var(--fg-subtle);font-size:var(--fs-xs)}
.wz-coll__p{padding:0 var(--sp-3) var(--sp-3)}
.wz-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding:0 var(--sp-3) var(--sp-3)}
.wz-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--tint-neutral);
  color:var(--fg-muted);font-size:var(--fs-xs)}
.wz-chip.is-none{background:none;color:var(--fg-subtle);padding-left:0}

/* Paso 4 — Revision */
.wz-rsec{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.wz-rsec__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border)}
.wz-editlink{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--purple-l);
  font:inherit;font-size:var(--fs-xs);cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)}
.wz-editlink:hover{text-decoration:underline}
.wz-editlink:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.wz-rv{display:flex;justify-content:space-between;gap:var(--sp-3);padding:3px 0;font-size:var(--fs-sm)}
.wz-rv__l{color:var(--fg-subtle);flex:0 0 auto}
.wz-rv__v{color:var(--fg);text-align:right;word-break:break-word}
.wz-rv__v.is-missing{color:var(--danger-text)}
.wz-tpl{margin-top:var(--sp-3)}
.wz-kbd{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--fg-subtle)}
#m_wz_review:focus{outline:none}
.wz-foot{border-top:1px solid var(--border);padding-top:var(--sp-3);flex-wrap:wrap}

/* Asistente de CONTRATOS — 3 pasos (el de cargas tiene 4). */
.wz-steps--3{grid-template-columns:repeat(3,1fr)}
.cw-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:var(--sp-4)}
.cw-type.is-on{border-color:var(--primary);background:var(--surf-3)}
.cw-type.is-on .set-cat__ico{color:var(--primary)}
/* Vista previa del contrato en la Revision: se LEE antes de mandarlo, pero sin
   empujar el boton de enviar fuera de pantalla. */
.cw-prev{margin-top:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surf-3);max-height:220px;overflow:auto;white-space:pre-wrap;font-size:var(--fs-xs);
  color:var(--fg-muted);line-height:1.5}
.cw-what{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-xs);color:var(--fg-subtle);margin-top:var(--sp-2)}
/* .spin ya se usaba en el intake por IA pero NUNCA existio en el CSS: el indicador
   de 'leyendo el documento' salia como texto suelto sin girar nada. */
.spin{display:inline-block;width:12px;height:12px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--primary);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

@media (max-width:560px){
  .wz-sbtn{font-size:10.5px;padding:var(--sp-2) 2px}
  .wz-foot{justify-content:stretch}
  .wz-foot .u-btn{flex:1 1 auto}
}

/* ===========================================================
   TABLERO — "Para hoy" y mini-tabla (Fase 6)
   El tablero pasó de 24 casillas del mismo peso a tres bloques con jerarquía.
   Estas clases son las del bloque de tareas (ph- = "para hoy"); las casillas
   KPI y las columnas de la mini-tabla REUSAN las clases que ya existían
   (.kpi/.kpi-grid y .ldt-*) a propósito: la consistencia es media fase.
   =========================================================== */
.ph-card{padding:14px 16px 8px}
/* Título del bloque principal: más grande que un h3 de tarjeta, porque esto
   es lo primero que hay que leer al entrar. */
.ph-h{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:17px;font-weight:700}
.ph-hint{color:var(--muted);font-size:12.5px;margin:2px 0 6px}
/* Cada tarea es un <button> real: así Enter/Espacio y el foco funcionan sin
   código extra (una fila clicable que no responde al teclado es una trampa). */
.ph-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);border-radius:8px;
  padding:14px 8px;color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.ph-row:last-child{border-bottom:none}
.ph-row:hover{background:var(--panel-2)}
.ph-row:focus-visible{outline:2px solid var(--purple-l);outline-offset:2px}
.ph-row--static{cursor:default}
.ph-row--static:hover{background:none}
.ph-ico{display:inline-flex;align-items:center;color:var(--muted);flex:0 0 auto}
.ph-lb{flex:1;min-width:0}
.ph-n{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ph-arw{display:inline-flex;align-items:center;color:var(--muted-2);flex:0 0 auto}
/* El color SIGNIFICA: rojo = ya vencido / incidente abierto · ámbar = se vence pronto. */
.ph-row.bad .ph-ico,.ph-row.bad .ph-n{color:var(--danger-text)}
.ph-row.warn .ph-ico,.ph-row.warn .ph-n{color:var(--warning)}
/* Filas con acción directa (carga del conductor, reserva de bodega): no son un
   conteo, llevan su propio botón. */
.ph-item{padding:12px 8px;border-bottom:1px solid var(--line)}
.ph-item:last-child{border-bottom:none}
.ph-item-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.ph-item-s{color:var(--muted);font-size:12px;margin-top:3px}
.ph-item-a{margin-top:8px}
/* Encabezado de la mini-tabla: título + "Ver todas" a la derecha. */
.dash-h{display:flex;align-items:center;gap:8px;margin:22px 0 8px}
.dash-h .spacer{flex:1}
@media (max-width:820px){
  .ph-card{padding:12px 12px 6px}
  .ph-row{padding:13px 4px;gap:10px}
  .ph-n{font-size:17px}
}

/* ===========================================================
   FASE 7 — pulido final: Finanzas, Configuración y estados vacíos

   Piezas nuevas, todas con tokens (cero colores a mano salvo los dos de la gráfica, que salen
   de CHART_COL en app.js para que barras y leyenda no se desincronicen).
   =========================================================== */

/* Encabezado de una sección DENTRO de una tarjeta: título a la izquierda, total y acción a la
   derecha. Reemplaza los display:flex sueltos que cada vista escribía a su manera. */
.sec-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.sec-head h3{margin:0}
.sec-head .spacer{flex:1}
.sec-total{color:var(--fg-muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.sec-total b{color:var(--fg)}

/* Título de un grupo de tarjetas (Ajustes, Filiales y zonas). No es un h3 de tarjeta: va suelto
   sobre el fondo de la página, así que necesita su propio ritmo vertical. */
.sec-title{display:flex;align-items:center;gap:8px;margin:6px 0 8px;font-size:14px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--fg-muted)}
.sec-title--gap{margin-top:var(--sp-6)}

/* Toolbar de filtros: la etiqueta que dice QUÉ filtra el control de al lado. Sin esto, cuatro
   <select> seguidos son cuatro cajas mudas. */
.tb-lb{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.4px;color:var(--fg-subtle);
  margin:0 2px 0 0;white-space:nowrap}
.filters .spacer{flex:1}

/* Fila de totales de una tabla de Reportes. UI.table no pinta <tfoot>, así que el total viaja como
   una fila más: esta regla la separa para que no se lea como un dato del listado. */
.tbl-totals tbody tr:last-child td{border-top:1px solid var(--border-strong);background:var(--surf-3)}
/* Semana con saldo bajo en el forecast de caja. Antes era un rgba() escrito a mano en la fila. */
.row-warn td{background:var(--tint-bad)}

/* Leyenda de la gráfica de tendencia: cuadraditos de color reales. El carácter ■ cambiaba de forma
   y de tamaño según la tipografía del sistema, y en urdu se veía distinto. */
.chart-legend{display:flex;gap:var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--fg-muted)}
.lg-i{display:inline-flex;align-items:center;gap:6px}
.lg-sw{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}

/* Hub de Ajustes: tres bloques de tarjetas. La tarjeta es un botón de verdad (role+tabindex en el
   HTML): antes era un <div> con onclick, inalcanzable con el teclado. */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-6)}
.set-cat{margin:0;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.set-cat:hover{border-color:var(--border-strong);background:var(--surf-3)}
.set-cat:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.set-cat__ico{line-height:1;color:var(--accent)}
.set-cat__t{display:block;margin-top:var(--sp-2)}
.set-cat__d{color:var(--fg-muted);font-size:var(--fs-xs);margin-top:3px}

/* ===============================================================
   MANUAL DE USO  (vista guide · un capítulo por rol)
   El contenido sale de assets/manual.js; esto solo lo viste.
   =============================================================== */
.man-intro{ margin:0 0 12px }
.man-h{ font-size:1.15rem; margin:2px 0 10px }
.man-lead{ font-size:15px; line-height:1.6; margin:0 0 14px; max-width:70ch }
.man-tabs{ margin-bottom:14px }
.man-sec{ margin-bottom:14px }
.man-sec h3{ display:flex; align-items:center; gap:7px; margin:0 0 10px }

/* Pasos numerados: el número es el ancla visual, la ubicación va en tenue debajo del título. */
.man-step{ display:flex; gap:11px; padding:10px 0; border-top:1px solid var(--line) }
.man-step:first-of-type{ border-top:0; padding-top:2px }
.man-step__n{ min-width:26px; height:26px; border-radius:50%; background:var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:0 0 auto }
.man-step__t{ font-weight:700; font-size:14px }
.man-step__w{ font-size:12px; color:var(--muted); margin:2px 0 4px; display:flex; align-items:center; gap:4px }
.man-step__d{ font-size:14px; line-height:1.55; max-width:70ch }

.man-scr, .man-rule, .man-block, .man-faq{ padding:9px 0; border-top:1px solid var(--line) }
.man-scr:first-child, .man-rule:first-child, .man-block:first-child, .man-faq:first-child{ border-top:0; padding-top:0 }
.man-scr b, .man-rule b, .man-block b, .man-faq b{ display:block; font-size:14px }
.man-scr span, .man-rule span, .man-block span, .man-faq span{ display:block; font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:2px; max-width:70ch }
/* El "qué hacer en su lugar" es lo accionable del bloqueo: no puede leerse como nota al pie. */
.man-block__do{ color:var(--text) !important; margin-top:5px !important; display:flex !important; align-items:flex-start; gap:5px }
.man-rule b{ color:var(--purple) }

@media (max-width:720px){
  .man-step__d, .man-lead, .man-scr span, .man-rule span, .man-block span, .man-faq span{ max-width:none }
}

/* ---- IMPRESIÓN ----
   El manual es lo único que la gente va a querer en papel (capacitación, carpeta del escritorio).
   Se esconde todo el marco de la app y se deja el texto en negro sobre blanco. */
@media print{
  .sidebar, .topbar, .nav, .view-head .btn, .man-tabs, #assist-fab, .u-toast, .modal-backdrop{ display:none !important }
  body{ background:#fff !important }
  .main{ padding:0 !important }
  .card{ box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; page-break-inside:avoid }
  .man-step{ break-inside:avoid; page-break-inside:avoid }
  .man-h{ break-after:avoid; page-break-after:avoid }
  a[href]:after{ content:'' }   /* sin URLs pegadas al texto */
}

/* ===== Mapa de cargas en curso (tablero) — Tanda GPS ===== */
#fleetMap{height:340px;border-radius:12px;border:1px solid var(--line);background:#e9e6ee}
.fleet-pin span{display:inline-block;background:#150F14;color:#fff;font-size:11.5px;font-weight:700;
  padding:3px 8px;border-radius:999px;border:2px solid #D4A847;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transform:translate(-50%,-100%)}
.fleet-row:hover{background:rgba(138,91,184,.07);border-radius:8px}

/* ===== P&L mensual (matriz 12 meses) — Tanda 3 ===== */
.pnl-table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
.pnl-table th,.pnl-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right}
.pnl-table th:first-child,.pnl-table td:first-child{text-align:left}
.pnl-table thead th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.pnl-sticky{position:sticky;left:0;background:var(--panel);z-index:1}
.pnl-table thead .pnl-sticky{background:var(--panel)}
.pnl-cur{background:rgba(212,168,71,.10)}
.pnl-tot{background:rgba(138,91,184,.08);font-weight:600}
.pnl-strong th,.pnl-strong td{background:rgba(138,91,184,.05)}
.pnl-ref th,.pnl-ref td{color:var(--muted);font-size:11.5px}
.pnl-exp td{font-size:12px}
.pnl-pos{color:var(--ok, #2e9e6b)}
.pnl-neg{color:#e5575f}

/* ===== Alturas móviles (Tanda 4): 100dvh + safe-area ===== */
/* El navegador del celular corta el fondo con su barra: 100vh mide DETRÁS de la barra. dvh mide el
   viewport REAL dinámico. Y el padding safe-area evita que el contenido quede bajo el home indicator. */
@supports (min-height: 100dvh){
  body{min-height:100dvh}
  .auth-screen{min-height:100dvh}
  .app{min-height:100dvh}
  @media (max-width:820px){
    .modal{min-height:100dvh}
  }
}
@media (max-width:820px){
  .modal{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
  .main{padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px))}
}

/* ══ Tablero accionable T1: HERO del mes (tarjeta oscura, número grande) ══ */
.dash-hero{display:flex;gap:22px;align-items:stretch;background:#150F14;color:#efeaf3;border-radius:16px;padding:20px 22px;margin:10px 0 16px;flex-wrap:wrap}
.dash-hero .hero-main{flex:1;min-width:230px}
.dash-hero .hero-lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#bdb4c4;font-weight:700}
.dash-hero .hero-num{font-size:2.4rem;font-weight:800;line-height:1.15;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.dash-hero.pos .hero-num{color:#5fd39a}
.dash-hero.neg .hero-num{color:#f08a8a}
.dash-hero .hero-pct{font-size:1.05rem;font-weight:700;color:#bdb4c4;margin-left:4px}
.dash-hero .hero-words{font-size:15px;font-weight:600}
.dash-hero .hero-delta{display:inline-block;font-size:12.5px;font-weight:700;margin-top:6px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08)}
.dash-hero .hero-delta.up{color:#5fd39a}
.dash-hero .hero-delta.down{color:#f08a8a}
.dash-hero .hero-delta.flat{color:#bdb4c4}
.dash-hero .hero-aside{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:170px;border-left:1px solid rgba(255,255,255,.12);padding-left:22px}
.dash-hero .ha-row{display:flex;flex-direction:column;line-height:1.25}
.dash-hero .ha-row b{font-size:15px;font-variant-numeric:tabular-nums}
.dash-hero .ha-row span{font-size:11.5px;color:#bdb4c4}
.dash-hero .btn{align-self:flex-start;margin-top:4px;color:#efeaf3;border-color:rgba(255,255,255,.25)}
@media(max-width:560px){.dash-hero{flex-direction:column;gap:14px}.dash-hero .hero-aside{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;flex-direction:row;flex-wrap:wrap;gap:14px}}

/* T2 tablero: sublínea de las tareas de dinero (monto grande arriba, detalle abajo) */
.ph-row .ph-sub{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}


/* ── Compensación T2 ─────────────────────────────────────────────────────────────
   Dos piezas nuevas: la tarjeta "Mi comisión del mes" del tablero (.cmine-*) y la
   tarjeta de una FILIAL en Compensación (.ent-*), cuyo titular es el NETO
   (margen que la filial genera − lo que le pagamos). Reusan la estructura del
   hero pero DENTRO de una .card normal: no son el encabezado de la pantalla. */
.cmine-card{margin:10px 0 16px}
.cmine-grid{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap;margin-top:8px}
.cmine-num{flex:1;min-width:180px}
.cmine-num .cmine-v{font-size:2.1rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.cmine-num.pos .cmine-v{color:var(--ok)}
.cmine-num .cmine-l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.cmine-side{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:210px;border-left:1px solid var(--line);padding-left:20px}
.cmine-side .ha-row{display:flex;flex-direction:column;line-height:1.25}
.cmine-side .ha-row b{font-size:15px;font-variant-numeric:tabular-nums}
.cmine-side .ha-row span{font-size:11.5px;color:var(--muted)}
.cmine-thr{margin-top:11px;font-size:13px;font-weight:600;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px}
.cmine-thr.ok{color:var(--ok);border-color:rgba(63,191,127,.35)}
@media(max-width:560px){.cmine-grid{flex-direction:column;gap:12px}.cmine-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:11px}}

.ent-card{border-left:4px solid var(--line)}
.ent-card.pos{border-left-color:var(--ok)}
.ent-card.neg{border-left-color:var(--danger-text)}
.ent-net{margin:6px 0 10px}
.ent-net .ent-v{font-size:2rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.ent-card.pos .ent-net .ent-v{color:var(--ok)}
.ent-card.neg .ent-net .ent-v{color:var(--danger-text)}
.ent-net .ent-l{font-size:13px;color:var(--muted);font-weight:600}
.ent-lines{border-top:1px solid var(--line);padding-top:8px}
.ent-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13.5px}
.ent-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ent-row.minus b{color:var(--danger-text)}
.ent-row.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:7px;font-weight:700}
.ent-sub{font-size:11.5px;color:var(--muted);margin:-2px 0 5px 16px}
.ent-info{margin-top:9px;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}

/* Compensación T2 (arreglos tras la cacería): línea que separa el MARGEN (base del cálculo) del
   DINERO que sí se le paga a la persona — las cuatro filas se leían como una suma. */
.cmine-side .cmine-sep{border-top:1px dashed var(--line);margin:3px 0 1px}
.cmine-side .ha-row.pay b{font-weight:800}