/* ============================================================================
   FREY&LAU Platform — Sistema de diseño (tokens extraídos del index_6 real)
   Fuentes: Hanken Grotesk (cuerpo) · Bricolage Grotesque (títulos) · IBM Plex Mono (eyebrows)
   ============================================================================ */
/* Bandera real en SVG (flagcdn.com) — usada en toda la app en vez del emoji Unicode,
   que en Windows/Chrome suele mostrarse como texto plano (ej. "CO") en vez de un ícono. */
.flag-svg { display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); vertical-align: middle; object-fit: cover; }
.flag-fallback { display: inline-block; vertical-align: middle; }

:root {
  --brand: #FF8F00;          --brand-d: #E07D00;      --brand-tint: #FFF1DC;
  --cream: #F5F4F0;          --cream-2: #F6F4F1;      --surface: #FFFFFF;
  --ink: #1F1F1F;            --ink-2: #4A4A4A;
  --muted: #9A9A96;          --muted-2: #8A8A86;      --line: #CFCFCB;
  --sidebar: #1F1F1F;        --sidebar-2: #2A2A2A;    --sidebar-line: #383838;
  --ok: #16a34a; --ok-bg: #E6F4EA;
  --warn: #d97706; --warn-bg: #FEF3C7;
  --danger: #dc2626; --danger-bg: #FDECEC;
  --info: #2563eb; --info-bg: #E7EEFE;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --pill: 20px;
  --shadow: 0 1px 3px rgba(31,31,31,.06), 0 6px 16px rgba(31,31,31,.05);
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--body); background: var(--cream); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--brand-d); text-decoration: none; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); font-weight: 500; }
.mono { font-family: var(--mono); }

/* ── Login ── */
#login { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; }
#login .left { background: linear-gradient(150deg, #1a1a1a, #2d2d2d 70%, #3a2a12); color: #fff; padding: 56px 52px; display: flex; flex-direction: column; }
#login .brand { font-family: var(--display); font-size: 30px; font-weight: 800; }
#login .brand span { color: var(--brand); }
#login .left .eyebrow { color: var(--brand); margin-top: 6px; }
#login .pitch { margin-top: auto; }
#login .pitch h1 { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.08; }
#login .pitch h1 em { color: var(--brand); font-style: normal; }
#login .pitch p { color: #b9b9b5; margin-top: 16px; max-width: 420px; line-height: 1.6; font-size: 14.5px; }
#login .foot { color: #6b6b67; font-size: 11.5px; margin-top: 40px; font-family: var(--mono); }
#login .right { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 40px; }
#login .card { width: 100%; max-width: 380px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--pill); font-size: 11px; font-weight: 600; background: var(--brand-tint); color: var(--brand-d); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
#login h2 { font-family: var(--display); font-size: 24px; font-weight: 700; margin: 18px 0 4px; }
#login .sub { color: var(--muted-2); font-size: 13.5px; margin-bottom: 24px; }
/* Mi Perfil (autoservicio) — mismo tratamiento que ya usa el Portal del Distribuidor */
.logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.logo-preview { width: 64px; height: 64px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; object-fit: contain; display: block; }
.field { margin-bottom: 15px; }
.field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; background: #fff; transition: border .15s; }
.field input:focus, .field select:focus { border-color: var(--brand); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: none; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 700; transition: background .15s, transform .05s; }
.btn:hover { background: var(--brand-d); } .btn:active { transform: scale(.99); }
.btn.block { width: 100%; padding: 13px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); font-weight: 600; }
.btn.ghost:hover { background: var(--cream); }
.btn.sm { padding: 7px 13px; font-size: 12.5px; }
.err { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ── Shell ── */
#app { display: none; height: 100%; }
#app.on { display: flex; }
.side { width: 244px; flex-shrink: 0; background: var(--sidebar); color: #cfcfcb; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; }
.side .top { padding: 20px 20px 14px; }
.side .logo { font-family: var(--display); font-size: 19px; font-weight: 800; color: #fff; }
.side .logo span { color: var(--brand); }
.side .logo-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; color: var(--brand); text-transform: uppercase; margin-top: 4px; }
.nav { flex: 1; overflow-y: auto; padding: 6px 12px 20px; }
.nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; }
.nav-group { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: #7a7a76; padding: 16px 12px 6px; display: flex; align-items: center; justify-content: space-between; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px; margin: 1px 0; border: none; background: none; color: #b7b7b3; font-size: 13.5px; font-weight: 500; border-radius: var(--r-sm); transition: all .12s; }
.nav-item:hover { background: var(--sidebar-2); color: #fff; }
.nav-item.active { background: rgba(255,143,0,.13); color: var(--brand); font-weight: 600; }
.nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; }
.nav-item .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side .user { border-top: 1px solid var(--sidebar-line); padding: 14px 16px; display: flex; align-items: center; gap: 11px; }
.side .user:hover { background: rgba(255,255,255,.04); }
.side .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #1a1a1a; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
/* Logo propio del usuario (Mi Perfil) — mismo tratamiento que .dist-avatar-img: circular, fondo blanco, contain */
.side .avatar-logo { object-fit: contain; background: #fff; border: 1px solid var(--sidebar-line); }
.side .user-info { flex: 1; min-width: 0; }
.side .user .nm { font-weight: 700; color: #eee; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .user .rl { font-family: var(--mono); font-size: 9.5px; color: #8a8a86; text-transform: uppercase; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Antes era solo el glifo ⎋ sin texto (fácil de pasar por alto) — ahora
   "Salir" visible siempre, no solo al hover (Carlos, 2026-08). */
.side .signout { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: #b5b3ac; background: none; border: none; font-size: 11px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.side .signout:hover { color: var(--brand); background: rgba(255,143,0,.1); }
.side .signout-ic { font-size: 13px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { height: 58px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 26px; gap: 14px; }
/* Botón "Atrás" global (core.js #crumb-back) — Carlos, 2026-08-18: "se hace
   difícil tener que ir al menú para regresar a la pantalla anterior". */
.crumb-back { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.crumb-back:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-d); }
.crumb-back i { font-size: 16px; }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--muted-2); text-transform: none; }
.crumb b { color: var(--ink); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { padding: 6px 9px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 12.5px; }
.content { flex: 1; overflow-y: auto; padding: 26px; }
.page { max-width: 1280px; margin: 0 auto; }

/* ── Componentes ── */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 1000px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.kpi .ic-tile { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand-d); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.kpi .ic-tile svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi .val { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.kpi .lbl { color: var(--ink-2); font-size: 13px; margin-top: 7px; font-weight: 500; }
.kpi .hint { font-family: var(--mono); font-size: 11px; color: var(--brand-d); margin-top: 6px; }

/* KPI con jerarquía (ícono + chip de tendencia) — Analytics, 2026-07-31.
   Mismo espíritu que .ti-kpi (Trade Intelligence) y .dkpi-card (Dashboard/
   Pipeline), aplicado con las clases propias de esta pantalla. */
.akpi { position: relative; overflow: hidden; }
.akpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.akpi-icon { width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.akpi-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.akpi-trend { font-family: var(--mono); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: var(--pill); white-space: nowrap; }
.akpi-trend.ok   { color: var(--ok);      background: var(--ok-bg); }
.akpi-trend.warn { color: var(--brand-d); background: var(--brand-tint); }
.akpi-trend.danger { color: var(--danger); background: var(--danger-bg); }
.akpi-trend.mut  { color: var(--muted-2); background: #EFEEEA; }
.akpi-val { font-family: var(--display); font-size: 27px; font-weight: 800; margin-top: 12px; letter-spacing: -.3px; line-height: 1; }
.akpi-lbl { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; font-weight: 500; }
.akpi-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin-top: 6px; }
.akpi-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26px; opacity: .5; pointer-events: none; }
.card h3 { font-family: var(--display); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.card .h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: var(--display); font-size: 26px; font-weight: 800; margin: 6px 0 4px; }
.page-head p { color: var(--muted-2); max-width: 720px; line-height: 1.5; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 11px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line); }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--cream-2); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 700; }
.badge.b-ok { background: var(--ok-bg); color: var(--ok); } .badge.b-info { background: var(--info-bg); color: var(--info); }
.badge.b-warn { background: var(--warn-bg); color: var(--warn); } .badge.b-mut { background: #EFEEEA; color: var(--muted-2); }
.badge.b-danger { background: var(--danger-bg); color: var(--danger); }
.empty { text-align: center; color: var(--muted-2); padding: 40px 16px; }
/* Vacío tratado (ícono + explicación) — reemplaza el .empty pelado dentro de
   tarjetas de gráfica (Analytics, 2026-07-31): un texto centrado sin más se
   siente como un hueco roto, no como un estado real de la app. */
.aempty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px 20px; gap: 8px; }
.aempty .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.aempty .ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aempty .t1 { font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.aempty .t2 { font-size: 12px; color: var(--muted-2); max-width: 34ch; }
/* Contenedor de <canvas> Chart.js — necesita alto fijo + position:relative
   para que responsive+maintainAspectRatio:false funcione bien. */
.chart-box { position: relative; }
.chart-box.h220 { height: 220px; }
.chart-box.h180 { height: 180px; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--muted-2); font-size: 13px; font-weight: 600; padding: 60px 20px; }
.loading::before { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--brand-tint); border-top-color: var(--brand); animation: pf-spin .7s linear infinite; }
/* Carga larga con progreso estimado (Reporte Ejecutivo de Territorio — la
   redacción con IA es una sola llamada sin eventos de progreso reales, así
   que %rx-pct% es una estimación por tiempo transcurrido, no bytes
   generados; igual de honesto que cualquier barra de este tipo, pero sin
   fingir precisión que no existe. Carlos, 2026-08-24: "usando el logo de
   F&L como si el círculo naranja se estuviese llenando"). */
.rx-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 70px 20px; }
.rx-loading-ring { position: relative; width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--rx-pct, 0) * 1%), var(--brand-tint) 0);
  transition: background .25s linear; display: flex; align-items: center; justify-content: center; }
/* Sin aro blanco separado: el logo (mismo naranja de marca, ya circular en
   el PNG) se apoya directo sobre el degradado — al 100% ambos naranjas
   coinciden y se leen como un solo círculo, igual al logo real (Carlos,
   2026-08-24: "que al final quede el logo completo como si fuese original"). */
.rx-loading-ring img { position: relative; width: 84px; height: 84px; border-radius: 50%; object-fit: contain; }
.rx-loading-pct { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--brand-d); }
.rx-loading-txt { font-size: 13px; font-weight: 600; color: var(--muted-2); max-width: 46ch; }
.loading::after { content:'…'; animation: d 1.2s infinite; } @keyframes d { 0%{content:'·'} 33%{content:'··'} 66%{content:'···'} }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.soon { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); background: #EFEEEA; padding: 4px 10px; border-radius: var(--pill); }
.agent-card { display: flex; gap: 14px; align-items: flex-start; }
.agent-card .flag { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.contact-row { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ── Filas clicables + modal de detalle ── */
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: var(--brand-tint); }
.modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(31,31,31,.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { position: relative; background: var(--surface); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; border-radius: var(--r-lg); padding: 24px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: pop .16s ease-out; }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 20; width: 30px; height: 30px; border-radius: 50%; border: none;
           background: rgba(0,0,0,.4); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
           display: flex; align-items: center; justify-content: center; transition: background .12s, transform .12s; }
.modal-x:hover { background: rgba(0,0,0,.65); transform: scale(1.06); }
.modal-back { position: absolute; top: 14px; left: 14px; z-index: 20; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
              background: #fff; color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.modal-back:hover { border-color: var(--brand); color: var(--brand-d); }
@keyframes pop { from { transform: translateY(14px); opacity: .7; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal-head h2 { font-family: var(--display); font-size: 22px; font-weight: 800; margin-top: 2px; }
.detail-list { display: grid; }
.dl-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dl-row:last-child { border-bottom: none; }
.dl-k { color: var(--muted-2); font-weight: 500; }
.dl-v { text-align: right; font-weight: 500; }
.dl-note { background: var(--cream); border-radius: var(--r-sm); padding: 12px 14px; margin: 16px 0; }
.dl-note p { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.dl-section { font-family: var(--display); font-weight: 700; font-size: 15px; margin: 20px 0 8px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Fichas anchas reusables (Carlos, 2026-08-21: "elimina los modales angostos
   y verticales" — mismo criterio ya aplicado en Distribuidores). Cualquier
   ficha de detalle con varias secciones (Visitas, Oportunidades, Proyectos,
   Radar de Demanda, Usuarios…) debe usar esto en vez de apilarse entera en
   el .modal angosto por default (560px — pensado para formularios cortos o
   confirmaciones, no para fichas de varias secciones). */
.modal.modal-wide { max-width: 980px; }
.modal.modal-xwide { max-width: 1180px; }
.fi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.fi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.fi-col-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-d); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,143,0,.2); }
.fi-col-title:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .fi-grid, .fi-grid-3 { grid-template-columns: 1fr; }
}
.status-row { display: flex; gap: 8px; align-items: center; }
.status-row select { flex-shrink: 0; }
.status-row input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; }
.status-row input:focus { border-color: var(--brand); }

/* ── Kanban ── */
.seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.seg button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: none; background: #fff; color: var(--muted-2); font-size: 13px; font-weight: 600; transition: background .12s, color .12s; }
.seg button.on { background: var(--ink); color: #fff; }
/* Íconos del switcher de unidad + pestañas de división más grandes y
   nítidos que el resto del texto — antes no existían (Carlos, 2026-08-18:
   "rehaz los SVG para que sean visibles y nítidos"). */
.btn i.ti, .seg button i.ti { font-size: 16px; line-height: 1; }
/* Menú superior de cada Área de Negocio (division.js): switcher de unidad
   (.dv-switcher) y pestañas (.dv-subtabs) reusan el mismo lenguaje visual
   de tarjeta suelta que los chips de "Aplicación" del explorador
   (.eo-appchip) en vez de un .btn/.seg genérico — pedido explícito de
   Carlos, 2026-08-18: "que sea igual diseño a los que tenemos en las
   aplicaciones, observa que hay un solo botón para formulaciones".
   Sin clases propias — .eo-appchip ya trae el tamaño/ícono/estado "on". */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kcol { min-width: 232px; width: 232px; flex-shrink: 0; background: #EEEDE8; border-radius: var(--r); padding: 10px; }
.kcol h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }
.kcol h4 .n { background: #fff; border-radius: var(--pill); padding: 1px 8px; color: var(--ink-2); }
.kcard { background: #fff; border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; border-left: 3px solid var(--brand); transition: transform .08s, box-shadow .12s; }
.kcard:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.kcard .t { font-weight: 700; font-size: 13px; }
.kcard .m { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Digital Explorer (Divisiones de Producto) ── */
.explorer-hero { border-radius: var(--r); padding: 20px 24px; color: #fff; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; background: linear-gradient(120deg, #3a4a2e, #4c6b3f); }
.explorer-hero .h-brand { font-family: var(--display); font-weight: 800; font-size: 20px; }
.explorer-hero .h-brand span { color: var(--brand); }
.explorer-hero .h-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; margin-top: 3px; }
.explorer-hero .h-tag { font-style: italic; opacity: .9; font-size: 14px; }
.explorer-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 16px; }
.explorer-bar input { flex: 1; min-width: 220px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; }
.chip-fam { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 600; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.chip-fam.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-fam .dot { width: 9px; height: 9px; border-radius: 50%; }
.explorer-count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-left: auto; }
.eo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

/* Explorador de catálogo: encabezado (hero+búsqueda+filtros) fijo arriba,
   solo la grilla de productos hace scroll (Carlos, 2026-07). Contenedor con
   altura acotada (no position:sticky — con márgenes negativos duplicaba el
   repintado del switcher/tabs al hacer scroll) para que .eo-grid-scroll sea
   el único que necesite scrollbar propia; el resto de la página no se mueve. */
.eo-scroll-shell { display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.eo-fixed { flex: 0 0 auto; background: var(--cream); }
.eo-grid-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.eo-grid-scroll::-webkit-scrollbar { width: 9px; }
.eo-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.eo-grid-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.eo-grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* Filtro de Aplicación: tarjetas icono+conteo (mismo lenguaje visual que el
   modal de Dosificaciones sugeridas), reemplaza los antiguos chips ovalados. */
.explorer-appcat { margin-top: 10px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.explorer-appcat-label { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.explorer-appcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.eo-appchip { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: 10px; border: 0.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; overflow: hidden; font-size: 12px; color: var(--ink); }
.eo-appchip i { font-size: 17px; color: var(--brand); flex: 0 0 17px; }
.eo-appchip span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-appchip em { flex: 0 0 auto; font-style: normal; font-size: 10px; color: var(--muted-2); }
.eo-appchip.on { border: 1.5px solid var(--brand); background: var(--brand-tint); }
.eo-appchip.on i { color: var(--brand-d); }
.eo-appchip.on em { color: var(--brand-d); }
.eo-appchip:disabled { cursor: not-allowed; opacity: .45; }
.eo-appchip:disabled i { color: var(--muted-2); }

/* Chips de "Área de negocio" en Formulaciones: mismo .eo-appchip que
   "Aplicación", pero con solo 4 opciones y más aire — ícono más grande y
   nombre siempre en MAYÚSCULAS/12px para que las 4 áreas se vean uniformes
   sin depender del casing real guardado en business_areas (Carlos,
   2026-08-21). Escopado a #fm-area-acc para no tocar el resto de chips
   .eo-appchip (grilla de Aplicación, división, catálogo de marketing). */
#fm-area-acc .eo-appchip i { font-size: 24px; color: var(--brand); flex: 0 0 17px; }
#fm-area-acc .eo-appchip.on i { color: var(--brand-d); }
#fm-area-acc .eo-appchip span { font-size: 12px; text-transform: uppercase; }

/* Acordeón de Familia/Aplicación: colapsado por defecto (una barra delgada
   con el filtro activo) para no tapar la grilla de productos; se expande
   a la misma grilla de tarjetas al hacer clic (Carlos, 2026-07). */
.explorer-acc { margin-top: 8px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.explorer-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; background: transparent; border: 0; cursor: pointer; font-size: 12.5px; color: var(--ink); font-family: var(--display); text-align: left; }
.explorer-acc-head:hover { background: var(--cream-2); }
.explorer-acc-head span { display: flex; align-items: center; gap: 8px; }
.explorer-acc-head i.ti { font-size: 15px; color: var(--brand); }
.explorer-acc-head b { font-weight: 700; }
.explorer-acc-chev { transition: transform .15s ease; color: var(--muted-2) !important; }
.explorer-acc.open .explorer-acc-chev { transform: rotate(180deg); }
.explorer-acc.open .explorer-acc-head { border-bottom: 1px solid var(--line); }
.explorer-acc-body { display: none; padding: 12px; }
.explorer-acc.open .explorer-acc-body { display: grid; }

/* Acordeón de herramientas admin en Biblioteca Técnica: mismo lenguaje
   visual, pero contenido en bloque (no grid) y colapsado por defecto para
   dejar la tabla de documentos visible de inmediato (Carlos, 2026-07). */
.lib-acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lib-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 14px; background: transparent; border: 0; cursor: pointer; font-size: 13px; font-weight: 700; font-family: var(--display); color: var(--ink); text-align: left; }
.lib-acc-head:hover { background: var(--cream-2); }
.lib-acc-head span { display: flex; align-items: center; gap: 8px; }
.lib-acc-head i.ti:first-child { font-size: 16px; color: var(--brand); }
.lib-acc.open .lib-acc-head { border-bottom: 1px solid var(--line); }
.lib-acc.open .explorer-acc-chev { transform: rotate(180deg); }
.lib-acc-body { display: none; padding: 14px; }
.lib-acc.open .lib-acc-body { display: block; }
.lib-acc-section { margin-bottom: 16px; }
.lib-acc-section:last-child { margin-bottom: 0; }
.lib-acc-section h4 { font-size: 12.5px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.eo-card { border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; transition: transform .1s, box-shadow .12s; }
.eo-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.eo-head { padding: 14px 16px 16px; color: #fff; position: relative; }
.eo-head .fam { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .85; }
.eo-head .nm { font-family: var(--display); font-weight: 800; font-size: 18px; margin-top: 2px; padding-right: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.eo-head .bot { font-style: italic; font-size: 12px; opacity: .9; margin-top: 2px; }
.eo-head .drop { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; padding: 6px; }
.eo-head .drop svg { width: 30px; height: 30px; }
.eo-body { padding: 12px 16px 14px; }
.eo-body .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted-2); }
.eo-body .note { background: var(--cream); border-radius: var(--pill); padding: 2px 9px; font-weight: 600; color: var(--ink-2); font-size: 11px; }
.eo-body .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.eo-body .tag { border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 9px; font-size: 11px; color: var(--ink-2); }

/* Base sin ancestro específico — usado en Biblioteca Técnica ("Categorías de
   aplicación") donde .eo-body/.pf-modal-body no envuelven el bloque; sin esto
   los <span class="tag"> quedan como texto plano pegado sin separación
   (Carlos, 2026-07, bug real detectado en vivo). Los bloques con ancestro
   siguen ganando por especificidad, así que esto no cambia su apariencia. */
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 9px; font-size: 11px; color: var(--ink-2); }

/* ── Toast ── */
#toast-host { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--pill); font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: pop .16s ease-out; }
.toast.ok { background: var(--ok); } .toast.err { background: var(--danger); }

/* ── Radar ── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.chip.on { background: var(--ok-bg); color: var(--ok); } .chip.off { background: #EFEEEA; color: var(--muted-2); }
.heat { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.heat:last-child { border-bottom: none; }
.heat .lbl2 { width: 180px; font-size: 13px; font-weight: 500; }
.heat .bar { flex: 1; height: 22px; background: #EFEEEA; border-radius: 6px; overflow: hidden; }
.heat .bar > span { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.heat .acc { width: 90px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.note-warn { background: var(--warn-bg); color: #7c5300; border-radius: var(--r-sm); padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.note-warn code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; }

/* ── Dashboard premium (zona blanca) — fiel a index_6 + mejoras ── */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dash-head .right { display: flex; align-items: center; gap: 10px; }
.dash-updated { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }
.dbell-wrap { position: relative; }
.dbell { position: relative; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.dbell:hover { background: var(--cream-2); }
.dbell svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dbell-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
.dbell-panel { position: absolute; top: 44px; right: 0; width: 240px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 28px rgba(0,0,0,.14); padding: 12px; z-index: 20; }
.dbell-panel .dl-row { font-size: 12.5px; padding: 6px 0; }

.dkpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
.dkpi-card { position: relative; overflow: hidden; background: #FBFAF8; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 14px; opacity: 0; transform: translateY(10px); animation: dkpiIn .45s ease-out both; }
.dkpi-card.clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.dkpi-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
@keyframes dkpiIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.dkpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.dkpi-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.dkpi-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dkpi-arrow { color: var(--muted); }
.dkpi-arrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dkpi-val { font-family: var(--display); font-size: 22px; font-weight: 800; margin-top: 10px; letter-spacing: -0.5px; line-height: 1; }
.dkpi-lbl { font-size: 11.5px; color: var(--ink-2); font-weight: 500; margin-top: 3px; line-height: 1.3; }
.dkpi-hint { font-family: var(--mono); font-size: 10px; margin-top: 5px; }
.dkpi-hint.ok { color: var(--ok); } .dkpi-hint.warn { color: var(--brand-d); } .dkpi-hint.danger { color: var(--danger); }
.dkpi-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 24px; color: var(--brand); opacity: 0; transition: opacity .15s; pointer-events: none; }
.dkpi-card:hover .dkpi-spark { opacity: .55; }

/* Tira de KPIs de una sola línea (reemplaza dkpi-grid de 6 tarjetas altas) —
   Carlos, 2026-07: "resumido en una sola línea, para que no ocupe mucho". */
.dkpi-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #FBFAF8; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 16px; margin-top: 18px; }
.dkpi-seg { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dkpi-seg.clickable { cursor: pointer; }
.dkpi-seg.clickable:hover .dkpi-seg-val { color: var(--brand-d); }
.dkpi-seg-lbl { font-size: 12px; color: var(--muted-2); }
.dkpi-seg-val { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); }
.dkpi-seg.danger .dkpi-seg-val, .dkpi-seg.danger .dkpi-seg-lbl { color: var(--danger); }
.dkpi-seg-flag { font-family: var(--mono); font-size: 10px; color: var(--danger); background: var(--danger-bg); padding: 1px 7px; border-radius: var(--pill); }
.dkpi-sep { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }

/* Mapa LATAM real (geodata vía CDN) — clic en país o burbuja abre panel con sus leads. */
.dmap-country { cursor: pointer; transition: opacity .12s; }
.dmap-country:hover, .dmap-country:focus-visible { opacity: .8; }
.dmap-country:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.dmap-dot { cursor: pointer; }
.dmap-dot:hover circle, .dmap-dot:focus-visible circle { stroke: var(--brand) !important; }
.dmap-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dmap-panel { }
.dmap-panel-head { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.dmap-panel-head .muted { color: var(--muted-2); text-transform: none; letter-spacing: 0; }
.dmap-lead-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.dmap-lead-row:last-child { border-bottom: none; }
.dmap-lead-row:hover { color: var(--brand-d); }
.dmap-lead-row .muted { color: var(--muted-2); font-size: 11.5px; text-transform: capitalize; }

.dact-row { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.dact-row:first-child { border-top: none; padding-top: 0; }
.dact-row.clickable { cursor: pointer; }
.dact-row.clickable:hover .dact-txt { color: var(--brand-d); }
.dact-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--cream-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-2); }
.dact-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dact-body { flex: 1; min-width: 0; }
.dact-txt { font-size: 13.5px; font-weight: 500; }
.dact-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.dact-time { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }

.dreport-box { background: var(--cream-2); border-radius: var(--r-sm); padding: 16px; margin-bottom: 14px; }
.dreport-box .row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 10px; gap: 10px; }
.dreport-bar { height: 7px; background: var(--line); border-radius: 6px; overflow: hidden; }
.dreport-bar > span { display: block; height: 100%; background: var(--brand); }
.dreport-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin-top: 8px; }
.btn.dark { background: var(--ink); color: #fff; width: 100%; justify-content: center; padding: 12px; font-size: 14px; gap: 8px; }
.btn.dark:hover { background: #000; }
.btn.dark svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dreport-legal { display: flex; gap: 8px; margin-top: 14px; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }
.dreport-legal svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--brand); fill: none; stroke-width: 1.8; margin-top: 1px; }

/* ── Evidence Trace (Módulo 1 — auditoría IA) ── */
.etrace-table tbody tr:nth-child(even) td { background: var(--cream-2); }
.etrace-table tbody tr:hover td { background: var(--brand-tint); }
.etrace-table tbody tr.etrace-alert td:first-child { border-left: 3px solid var(--danger); }
.etrace-table td, .etrace-table th { white-space: normal; }

/* ── Territories (Módulo 2 — 3 niveles) ── */
.terr-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-bottom: 14px; cursor: pointer; }
.terr-crumb span.on { color: var(--ink); font-weight: 700; cursor: default; }
.terr-crumb .sep { color: var(--muted); }
.terr-region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.terr-region-tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, #1F1F1F, #2A2A2A 65%, #3a2a12); color: #fff; padding: 24px; cursor: pointer; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s, box-shadow .15s; }
.terr-region-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.terr-region-tile .silhouette { position: absolute; right: -8%; bottom: -8%; width: 78%; height: 78%; color: var(--brand); opacity: .2; pointer-events: none; }
.terr-region-tile .silhouette path { fill: currentColor; }
.terr-region-tile .rcode { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; color: var(--brand); text-transform: uppercase; position: relative; z-index: 1; }
.terr-region-tile .rname { font-family: var(--display); font-size: 21px; font-weight: 800; margin-top: 4px; position: relative; z-index: 1; }
.terr-region-metrics { display: flex; gap: 20px; margin-top: 18px; position: relative; z-index: 1; }
.terr-region-metrics b { font-family: var(--display); font-size: 20px; display: block; font-weight: 800; }
.terr-region-metrics span { font-size: 10px; color: #B9B9B5; font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px; }

.terr-country-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; }
.terr-country-row:last-child { border-bottom: none; }
.terr-country-row:hover { background: var(--brand-tint); }
.terr-flag { line-height: 1; display: inline-flex; align-items: center; }
.terr-country-name { flex: 1; font-weight: 700; letter-spacing: .3px; font-size: 13.5px; }
.terr-country-agent { font-size: 11.5px; color: var(--muted-2); }
.terr-mchip { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 5px 8px; border-radius: var(--r-sm); font-family: var(--mono); }
.terr-mchip b { font-size: 14px; line-height: 1.1; } .terr-mchip span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px; }
.terr-mchip.dist { background: var(--info-bg); color: var(--info); }
.terr-mchip.leads { background: var(--brand-tint); color: var(--brand-d); }
.terr-mchip.clients { background: var(--ok-bg); color: var(--ok); }

.dist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dist-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.dist-flag-bg { position: absolute; right: -10px; bottom: -22px; opacity: .08; line-height: 1; pointer-events: none; user-select: none; }
.dist-flag-bg .flag-svg { width: 130px; height: auto; box-shadow: none; }
.dist-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,143,0,.16); border-color: var(--brand); }
.dist-card.inactive { opacity: .6; }
.dist-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.dist-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.dist-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.dist-status { font-size: 10.5px; font-family: var(--mono); }
.dist-status.on { color: var(--ok); } .dist-status.off { color: var(--muted-2); }
.dist-name { font-family: var(--display); font-weight: 700; font-size: 15.5px; margin-top: 12px; position: relative; z-index: 1; }
.dist-loc { font-size: 12px; color: var(--ink-2); margin-top: 3px; position: relative; z-index: 1; }
.dist-area { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); margin-top: 9px; position: relative; z-index: 1; }
.dist-contact { margin-top: 10px; font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.dist-contact .muted { color: var(--muted-2); font-style: italic; }

/* ── Ficha de producto premium (Módulo 3 — solo el modal, las cards no se tocan) ── */
.pf-modal-head { position: relative; margin: -24px -26px 0; padding: 22px 26px 20px; border-radius: var(--r-lg) var(--r-lg) 0 0; color: #fff; }
.pf-modal-logo { width: 52px; height: 52px; border-radius: 50%; position: absolute; top: 18px; right: 22px; opacity: .97; object-fit: contain; }

.pf-modal-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; }
.pf-modal-title { font-family: var(--display); font-size: 25px; font-weight: 800; color: #fff; margin-top: 6px; padding-right: 64px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.pf-modal-code { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.75); margin-top: 4px; }
.pf-modal-class { display: inline-flex; margin-top: 10px; padding: 3px 11px; border-radius: var(--pill); background: rgba(255,255,255,.2); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.pf-modal-accent { height: 2px; background: var(--brand); margin: 0 -26px; }
.pf-modal-body { padding-top: 18px; background: var(--surface); }
.pf-sect { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-sect:first-child { border-top: none; padding-top: 0; }
.pf-sect-t { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted-2); }
.pf-text { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.pf-modal-body .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-modal-body .tag { display: inline-block; border: 1px solid var(--line); background: var(--brand-tint); color: var(--brand-d); border-radius: var(--pill); padding: 4px 11px; font-size: 11.5px; font-weight: 600; }
.pf-doc-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pf-doc-btn { position: relative; flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 10px; border-radius: var(--r-sm); font-weight: 700; font-size: 13px; text-decoration: none; text-align: center; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; }
.pf-doc-btn.ok { background: var(--ink); color: #fff; }
.pf-doc-btn.ok:hover { background: #000; }
.pf-doc-btn.pending { background: var(--warn-bg); color: #7c5300; border-color: #f0d9a0; }
.pf-doc-btn.missing { background: var(--cream-2); color: var(--muted-2); border-color: var(--line); }
.pf-doc-btn.missing:hover { border-color: var(--brand); color: var(--brand-d); }
.pf-doc-btn.missing span { font-size: 9.5px; font-weight: 500; font-family: var(--mono); text-transform: uppercase; letter-spacing: .3px; }
.pf-doc-dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; }
.pf-doc-dot.ok { background: var(--ok); } .pf-doc-dot.pending { background: var(--warn); }
.pf-admin-row { margin-top: 10px; display: flex; justify-content: flex-end; }
.pf-admin-row .btn { color: var(--danger); border-color: var(--danger-bg); }
.pf-only-docs { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
/* .explorer-bar input aplica flex:1;min-width:220px pensado para el buscador
   de texto — sin esto se lo comía también al checkbox, estirándolo invisible
   y dejando el click "funcional" solo sobre el texto (Carlos, 2026-08, bug real). */
.pf-only-docs input[type="checkbox"] { flex: none; width: 15px; height: 15px; min-width: 0; margin: 0; }
.pf-hs-note { background: var(--cream); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 14px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pf-ai-banner { background: #FFF4E5; border: 1px solid #FFD79A; color: #7a4a00; border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.5; }
.pf-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.ghs-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ghs-diamond { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; cursor: help; }
.ghs-diamond svg { width: 48px; height: 48px; }
.ghs-diamond span { font-family: var(--mono); font-size: 9px; color: var(--muted-2); }
/* Tooltip de significado oficial GHS (Carlos, 2026-08) — al pasar el mouse
   o dar foco de teclado sobre el pictograma, ver GHS_MEANING en division.js
   para el texto verificado contra CLP/GHS oficial (nunca inventado). */
.ghs-diamond .pf-ghs-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 210px; background: var(--ink); color: var(--surface); font-family: var(--body); font-weight: 400;
  font-size: 11px; line-height: 1.45; padding: 9px 11px; border-radius: var(--r-sm);
  box-shadow: 0 8px 20px rgba(0,0,0,.25); opacity: 0; visibility: hidden;
  transition: opacity .14s ease, transform .14s ease; pointer-events: none; z-index: 25; text-align: left;
}
.ghs-diamond .pf-ghs-tip b { display: block; color: var(--brand); font-family: var(--mono); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 3px; }
.ghs-diamond .pf-ghs-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
.ghs-diamond:hover .pf-ghs-tip, .ghs-diamond:focus-visible .pf-ghs-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* .modal tiene overflow-y:auto, que el navegador computa como overflow-x:auto
   también (no puede quedar "visible" en un solo eje) — el tooltip centrado
   del primer pictograma (el más cerca del borde izquierdo) se recortaba
   contra ese borde (Carlos, 2026-08, bug real visto en Pistachio SDS).
   Solo el primero se ancla a la izquierda; el resto tiene margen de sobra. */
.ghs-diamond:first-child .pf-ghs-tip { left: 0; transform: translateX(0) translateY(4px); }
.ghs-diamond:first-child:hover .pf-ghs-tip, .ghs-diamond:first-child:focus-visible .pf-ghs-tip { transform: translateX(0) translateY(0); }
.ghs-diamond:first-child .pf-ghs-tip::after { left: 20px; transform: none; }

/* ── Encabezado unificado de fichas de documento (Carlos, 2026-08) — fondo
   carbón cálido, nombre del producto en naranja de marca, resto del texto
   en blanco. Igual patrón de sangría negativa que .pf-modal-head (bleed a
   los bordes del modal) pero con más padding-top: esta ficha SIEMPRE se
   abre encadenada desde la ficha del producto (ver openFicha), así que el
   pill "← Atrás" de core.js SIEMPRE flota encima — 54px de espacio (mismo
   total ya validado en el fix del header plano de Ficha TDS) lo despeja. ── */
/* Verde forestal — mismo gradiente que .explorer-hero (Carlos, 2026-08:
   segunda alternativa de color, no el carbón anterior). Reusa un tono que
   YA existe en la app en vez de inventar uno nuevo — consistente con el
   banner "explora tus sentidos" del catálogo. */
.doc-head { position: relative; margin: -24px -26px 0; padding: 54px 26px 20px; border-radius: var(--r-lg) var(--r-lg) 0 0; color: var(--doc-head-text, #F2F0EC); background: linear-gradient(120deg, #3a4a2e, #4c6b3f); }
.doc-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-head-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(242,240,236,.72); }
.doc-head-name { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--brand); margin-top: 5px; }
.doc-head-code { font-family: var(--mono); font-size: 11.5px; color: rgba(242,240,236,.72); margin-top: 6px; }
/* Fondos sólidos, no traslúcidos (Carlos, 2026-08 — regresión real: el
   texto quedaba casi ilegible contra el traslúcido sobre el carbón del
   header). Relación de contraste verificada ≥5:1 en los 3 tonos — clase
   exclusiva de docHeadHtml(), no la usa nada más, segura de tocar. */
.doc-head-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.doc-head-status.ok { background: #15803D; color: #fff; }
.doc-head-status.warn { background: #92400E; color: #fff; }
.doc-head-status.mut { background: #52504B; color: #fff; }

/* Chip de TIPO de documento (Carlos, 2026-08 — mockup B aprobado, letra
   17px como la opción C): paleta propia, sin cruzarse con doc-head-status
   (verde/naranja/gris de ESTADO) ni con el naranja de marca del nombre. */
.doc-head-eyebrow-wrap { display: flex; align-items: center; gap: 9px; }
.doc-head-type { display: inline-flex; padding: 4px 12px; border-radius: 6px; font-size: 17px; font-weight: 800; letter-spacing: .5px; color: #fff; flex-shrink: 0; }
.doc-head-type.tds { background: #1D4ED8; }
.doc-head-type.sds { background: #000000; }
.doc-head-type.coa { background: #0F766E; }
.doc-head-type.ald { background: #B91C1C; }
.doc-head-type.mut { background: #52504B; }

/* ── Matriz de permisos por rol — pestañas por categoría + toggles en vez
   de una lista plana de checkboxes (Carlos, 2026-08: rediseño aprobado
   sobre mockup, opción A — "pestañas por categoría con toggles"). ── */
.pf-ptabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 0.5px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.pf-ptab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--muted-2); }
.pf-ptab i { font-size: 14px; }
.pf-ptab.active { background: var(--brand-tint); color: #B75E00; }
.pf-ppanel { display: grid; gap: 1px; }
/* Especificidad explícita (.field label le gana a .pf-toggle-row sola) +
   reseteo de lo que .field label impone (mayúsculas, mono, 10.5px, gris,
   margen) — si no, el texto y el ancho de la fila heredan ese estilo de
   campo de formulario en vez del texto normal que necesita esta lista. */
.pf-ppanel label.pf-toggle-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  gap: 10px; padding: 9px 4px; border-bottom: 0.5px solid var(--line);
  font-family: var(--body); font-size: 13px; text-transform: none;
  letter-spacing: normal; color: var(--ink); margin-bottom: 0; cursor: pointer;
}
.pf-toggle-row:last-child { border-bottom: none; }
.pf-toggle { position: relative; display: inline-block; flex: none; width: 32px; height: 18px; }
.pf-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.pf-toggle-slider { position: absolute; inset: 0; background: var(--line); border-radius: 9px; transition: background .15s; }
.pf-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; }
.pf-toggle input:checked + .pf-toggle-slider { background: var(--brand); }
.pf-toggle input:checked + .pf-toggle-slider::before { transform: translateX(14px); }

/* ── Almacenaje SDS — la temperatura, cuando el documento la trae, pesa más
   que el resto del texto; si no la trae, mensaje honesto en vez de un
   hueco vacío (Carlos, 2026-08). ── */
.pf-storage-temp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--brand-tint); border: 1px solid rgba(255,143,0,.35); border-radius: var(--r-sm); margin-bottom: 10px; }
.pf-storage-temp-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.pf-storage-temp-ic svg { width: 18px; height: 18px; }
.pf-storage-temp-v { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--brand-d); line-height: 1.1; }
.pf-storage-temp-l { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); margin-top: 1px; }
.pf-storage-fallback { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; background: var(--cream); border: 1px dashed var(--line); border-radius: var(--r-sm); margin-bottom: 10px; }
.pf-storage-fallback svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--muted-2); margin-top: 1px; }
.pf-storage-fallback span { font-size: 12px; color: var(--muted-2); line-height: 1.5; }

/* ── Pipeline Kanban premium (Módulo 6) ── */
.kcard { position: relative; }
.kcard[draggable="true"] { cursor: grab; }
.kcard.dragging { opacity: .4; }
.kcard.sla-overdue { border-left-color: var(--danger); box-shadow: 0 0 0 1px var(--danger-bg); }
.kcard-alert { position: absolute; top: 8px; right: 8px; color: var(--danger); font-size: 13px; }
.kcard-val { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.kcard-days { font-family: var(--mono); }
.kcard-days.warn { color: var(--danger); font-weight: 700; }
.kcol.drop-target { background: var(--brand-tint); outline: 2px dashed var(--brand); }
.kcol-drop { transition: background .12s; border-radius: var(--r-sm); min-height: 40px; }
.pipe-metrics .dkpi-card { animation: none; opacity: 1; transform: none; }

/* ── Ficha de cliente premium (Módulo 7) ── */
.cl-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cl-contact-card { background: var(--cream-2); border-radius: var(--r-sm); padding: 12px; }
.cl-contact-name { font-weight: 700; font-size: 13px; }
.cl-contact-role { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.cl-contact-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cl-contact-links a { font-size: 11.5px; color: var(--brand-d); text-decoration: none; }
.cl-contact-links a:hover { text-decoration: underline; }
.cl-contact-form-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.cl-contact-form-row input { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; font-size: 12.5px; }
@media (max-width: 700px) { .cl-contact-form-row { grid-template-columns: 1fr 1fr; } }
.cl-social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cl-social { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pill); background: var(--cream-2); color: var(--ink-2); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.cl-social:hover { background: var(--brand-tint); color: var(--brand-d); }
.cl-social svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-timeline { position: relative; padding-left: 18px; }
.cl-tl-item { position: relative; padding-bottom: 16px; }
.cl-tl-item:last-child { padding-bottom: 0; }
.cl-tl-item::before { content: ''; position: absolute; left: -13px; top: 14px; bottom: -2px; width: 1.5px; background: var(--line); }
.cl-tl-item:last-child::before { display: none; }
.cl-tl-dot { position: absolute; left: -18px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.cl-tl-dot.ok { background: var(--ok); }
.cl-tl-date { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.cl-tl-txt { font-size: 13px; font-weight: 500; margin: 2px 0 4px; cursor: pointer; }
.cl-tl-txt:hover { color: var(--brand-d); }

/* ── Reporte de visita — tablas dinámicas (Módulo 8) ── */
.vr-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.vr-row-comp { grid-template-columns: repeat(7, 1fr) auto; }
.vr-row-prod { grid-template-columns: 1.4fr 1fr auto auto auto; }
.vr-row input, .vr-row select { padding: 8px 9px; border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; font-size: 12px; width: 100%; }
.vr-row-del { background: none; border: none; color: var(--muted-2); font-size: 13px; padding: 4px; }
.vr-row-del:hover { color: var(--danger); }
@media (max-width: 760px) { .vr-row, .vr-row-comp, .vr-row-prod { grid-template-columns: 1fr 1fr; } }

/* ── Gobernanza premium (Módulo 10) ── */
.gov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gov-card { background: #FBFAF8; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.gov-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-d); display: flex; align-items: center; justify-content: center; }
.gov-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gov-t { font-family: var(--display); font-weight: 800; font-size: 16.5px; margin-top: 14px; letter-spacing: -.2px; }
.gov-sep { width: 34px; height: 3px; background: var(--brand); border-radius: 2px; margin: 10px 0 12px; }
.gov-d { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.gov-commit { background: #FBFAF8; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-top: 18px; }
.gov-commit p { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; margin-top: 8px; }
.gov-trace { margin-top: 18px; border-radius: var(--r-lg); background: linear-gradient(135deg, #1F1F1F, #2A2A2A 65%, #3a2a12); color: #fff; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gov-trace-info { flex: 1; min-width: 260px; }
.gov-trace-info h3 { font-family: var(--display); font-size: 20px; font-weight: 800; margin: 6px 0 8px; }
.gov-trace-info p { font-size: 13px; color: #c9c9c5; line-height: 1.6; max-width: 480px; }
.gov-trace-count { text-align: center; flex-shrink: 0; }
.gov-trace-n { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--brand); line-height: 1; }
.gov-trace-lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #B9B9B5; margin-top: 6px; }

/* ── Alertas de Clasificación Ambigua (mockup aprobado por Carlos, 2026-08) ── */
.calert-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calert-count { font-family: var(--mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--warn); font-weight: 700; background: var(--warn-bg); border-radius: var(--pill); padding: 5px 12px; }
.calert-list { display: flex; flex-direction: column; gap: 10px; }
.calert-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; transition: border-color .12s, box-shadow .12s; }
.calert-row:hover { border-color: var(--warn); box-shadow: var(--shadow); }
.calert-row-warn { width: 30px; height: 30px; border-radius: 50%; background: var(--warn); color: #fff; font-family: var(--display); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.calert-row-main { flex: 1; min-width: 0; }
.calert-row-name { font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--ink); }
.calert-row-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.calert-row-reason { font-size: 12px; color: var(--ink-2); margin-top: 5px; line-height: 1.4; }
.calert-more { font-family: var(--mono); font-size: 10px; color: var(--muted-2); }
.calert-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.calert-empty-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.calert-empty-t { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }
.calert-empty-d { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; max-width: 380px; line-height: 1.5; }

.calert-modal { margin: -24px -26px 0; }
.calert-mhead { background: var(--warn-bg); border-bottom: 1px solid #F3D08A; padding: 20px 26px; display: flex; gap: 13px; align-items: flex-start; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.calert-mico { width: 34px; height: 34px; border-radius: 50%; background: var(--warn); color: #fff; font-family: var(--display); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.calert-mtxt h2 { font-family: var(--display); font-size: 18px; font-weight: 800; margin: 3px 0 2px; color: var(--ink); }
.calert-mcode { font-size: 11px; color: var(--ink-2); }
.calert-mbody { padding: 20px 26px 4px; }
.calert-sect-t { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 9px; }
.calert-why { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.calert-why li { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; background: var(--cream-2); border-radius: var(--r-sm); padding: 10px 12px; }
.calert-why li .dot { color: var(--warn); flex: 0 0 auto; font-size: 11px; margin-top: 2px; }
.calert-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.calert-opt { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 13px; cursor: pointer; transition: border-color .12s, background .12s; }
.calert-opt:hover { border-color: var(--brand); }
.calert-opt.checked { border-color: var(--brand); background: var(--brand-tint); }
.calert-opt.suggested:not(.checked) { border-color: #F3D08A; background: var(--warn-bg); }
.calert-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--muted); flex: 0 0 18px; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.calert-opt.checked .calert-box { background: var(--brand); border-color: var(--brand); }
.calert-box svg { width: 12px; height: 12px; opacity: 0; }
.calert-opt.checked .calert-box svg { opacity: 1; }
.calert-lbl { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.calert-sugg-tag { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--warn); background: #fff; border: 1px solid #F3D08A; border-radius: var(--pill); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.calert-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.calert-mfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 26px 24px; }
.btn-ghost-txt { background: none; border: none; color: var(--muted-2); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 4px; font-family: var(--body); }
.btn-ghost-txt:hover { color: var(--ink); }
.btn-brand-pill { background: var(--brand); color: #fff; border: none; border-radius: var(--pill); padding: 11px 20px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, opacity .15s; font-family: var(--body); }
.btn-brand-pill:hover { background: var(--brand-d); }
.btn-brand-pill:disabled { background: var(--line); color: var(--muted-2); cursor: not-allowed; }

/* ── Territories — mejoras visuales ── */
.terr-country-active { background: rgba(255,143,0,.07); }
.terr-country-active:hover { background: var(--brand-tint) !important; }
.terr-inactive-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: .4px; cursor: pointer; user-select: none; }
.terr-inactive-header:hover { background: var(--cream-2); }
.terr-inactive-body .terr-country-row:last-child { border-bottom: none; }
.terr-chevron { transition: transform .2s; display: inline-block; font-size: 10px; }

/* ── Opportunities — demo badge + empty state ── */
.opp-demo-row td { background: rgba(0,0,0,.015); }
.opp-demo-badge { font-size: 9.5px !important; padding: 1px 6px !important; vertical-align: middle; margin-left: 5px; }
.opp-empty-state { display: flex; flex-direction: column; align-items: center; padding: 60px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.opp-empty-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.opp-empty-sub { font-size: 13.5px; color: var(--muted-2); max-width: 440px; text-align: center; line-height: 1.6; margin-bottom: 20px; }

/* ── Users — drawer premium ── */
.usr-drawer-head { display: flex; align-items: flex-start; gap: 16px; margin: -24px -26px 20px; padding: 22px 24px 20px; border-radius: var(--r-lg) var(--r-lg) 0 0; color: #fff; }
.usr-avatar-lg { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usr-avatar-sm { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usr-drawer-info { flex: 1; min-width: 0; }
.usr-drawer-name { font-family: var(--display); font-size: 20px; font-weight: 800; }
.usr-drawer-title { font-size: 13px; opacity: .85; margin-top: 2px; }
.usr-drawer-body { }
.usr-meta-row { display: flex; gap: 24px; margin-top: 14px; padding: 12px 14px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.usr-meta-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.usr-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.usr-role-card { background: #FBFAF8; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.usr-role-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.usr-role-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.usr-role-name { font-family: var(--display); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.usr-role-desc { font-size: 12.5px; color: var(--muted-2); margin-bottom: 10px; line-height: 1.4; }
.usr-role-perms { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.usr-role-perms li { font-size: 12px; color: var(--ink-2); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }

/* ── Evidence Trace — mejoras visuales premium ── */
.et-counter-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; font-size: 12.5px; }
.et-count-ok { color: var(--ok); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.et-count-sep { color: var(--muted-2); }
.et-count-blocked { color: var(--danger); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.et-tooltip-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cream-2); color: var(--muted-2); font-size: 10px; cursor: default; border: 1px solid var(--line); }
.et-tooltip-btn:hover { background: var(--brand-tint); color: var(--brand-d); }
.et-seq { padding: 0 8px; }
.et-seq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; border-radius: 6px; background: var(--brand); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.et-src-ok { display: flex; align-items: flex-start; gap: 5px; color: var(--ok); font-size: 11.5px; margin-bottom: 3px; }
.et-src-ok svg { margin-top: 1px; }
.et-src-none { display: flex; align-items: center; gap: 5px; color: var(--danger); font-size: 11.5px; font-weight: 600; }
.et-src-type { color: var(--muted-2); font-size: 10.5px; }
.et-blocked-txt { color: var(--muted-2); font-style: italic; font-size: 12px; }
.etrace-table tbody tr.etrace-alert td { background: rgba(220, 38, 38, .04); }
.etrace-table tbody tr.etrace-alert:hover td { background: rgba(220, 38, 38, .08) !important; }
.etrace-table tbody tr.etrace-alert td:first-child { border-left: 3px solid var(--danger); }

/* ── Clients — tabla de contactos ── */
.cl-contacts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cl-contacts-table th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cl-contacts-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.cl-contacts-table tbody tr:last-child td { border-bottom: none; }
.cl-contact-inline { display: flex; gap: 6px; }
.cl-contact-inline a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--cream-2); color: var(--ink-2); font-size: 12px; text-decoration: none; }
.cl-contact-inline a:hover { background: var(--brand-tint); color: var(--brand-d); }
.cl-empty-action { padding: 16px; color: var(--muted-2); font-size: 13px; display: flex; flex-direction: column; align-items: flex-start; }

/* ── DISEÑO 1 — Territories: region cards premium + level 2 split layout ── */
.terr-region-tile { min-height: 220px !important; border: 2px solid transparent; }
.terr-region-tile:hover { border-color: var(--brand) !important; box-shadow: 0 20px 48px rgba(255,143,0,.18) !important; }
.terr-l2-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .terr-l2-layout { grid-template-columns: 1fr; } }
.terr-country-card { }
.terr-see-dist { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); white-space: nowrap; margin-left: auto; padding-left: 8px; }
.terr-country-row:hover .terr-see-dist { color: var(--brand-d); }
.terr-selected { background: var(--brand-tint) !important; }
.terr-dist-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0; overflow: hidden; min-height: 200px; }
.terr-panel-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 200px; color: var(--muted-2); font-family: var(--mono); font-size: 11px; }
.terr-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #FBFAF8; }
.terr-panel-name { font-family: var(--display); font-weight: 800; font-size: 16px; }
.terr-panel-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

/* ── DISEÑO 2 — Distributors: flag bg premium, hover elevation, activity ── */
.dist-card { border-radius: var(--r-lg) !important; }
.dist-flag-bg { opacity: .12 !important; }
.dist-flag-bg .flag-svg { width: 140px !important; }
.dist-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(255,143,0,.22) !important; border-color: var(--brand) !important; }
.dist-activity { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.dist-activity.recent { color: var(--ok); }
.dist-activity.stale { color: var(--warn); }

/* ── DISEÑO 3 — Radar: pills, gradient bars, score circles, alternating rows ── */
.radar-trend-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.radar-area-lbl { min-width: 130px; font-size: 11px; color: var(--muted-2); flex-shrink: 0; }
.radar-bar-wrap { flex: 1; background: var(--cream); border-radius: 6px; height: 8px; overflow: hidden; border: 1px solid var(--line); }
.radar-bar-fill { height: 100%; border-radius: 6px; min-width: 6px; }
.radar-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); font-size: 10.5px; font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.radar-pill-high { background: #E6F4EA; color: #16a34a; }
.radar-pill-med { background: #FEF3C7; color: #d97706; }
.radar-pill-low { background: #E7EEFE; color: #2563eb; }
.radar-score-circle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid; font-family: var(--mono); font-size: 11px; font-weight: 800; }
.radar-row-alt td { background: var(--cream-2) !important; }
.radar-push-btn { font-size: 13px !important; padding: 8px 16px !important; }

/* ── DISEÑO 4 — Pipeline Kanban: column totals, enhanced cards ── */
.kcol-total { font-family: var(--mono); font-size: 9.5px; color: var(--brand-d); font-weight: 700; background: var(--brand-tint); padding: 2px 7px; border-radius: var(--pill); margin: 0 4px; }
.kcol h4 { padding: 6px 6px 12px !important; flex-wrap: wrap; gap: 4px; }

/* ── DISEÑO 5 — Clients: 56px rows, right-side drawer with tabs ── */
.cl-table-row td { height: 56px; vertical-align: middle; }
.cl-drawer-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(31,31,31,.3); backdrop-filter: blur(1px); display: flex; justify-content: flex-end; }
.cl-drawer { width: min(520px, 94vw); background: var(--surface); height: 100vh; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.22); transform: translateX(100%); transition: transform .28s cubic-bezier(.32,0,.2,1); overflow: hidden; }
.cl-drawer-overlay.cl-drawer-open .cl-drawer { transform: translateX(0); }
.cl-drawer-overlay.cl-drawer-closing .cl-drawer { transform: translateX(100%); }
.cl-drawer-head { padding: 22px 20px 18px; color: #fff; flex-shrink: 0; position: relative; }
.cl-drawer-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.cl-drawer-close:hover { background: rgba(255,255,255,.35); }
.cl-drawer-flag { font-size: 24px; margin-bottom: 4px; }
.cl-drawer-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .85; margin-bottom: 2px; }
.cl-drawer-name { font-family: var(--display); font-size: 22px; font-weight: 800; margin-bottom: 6px; }
/* Franja de cifras reales bajo el header del drawer (Carlos, 2026-08: le
   gustó el header con stats del prototipo de referencia — acá con datos
   que sí tenemos, no credit line/balance inventados). */
.cl-drawer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cl-drawer-stat { background: var(--cream-2); padding: 10px 8px; text-align: center; }
.cl-drawer-stat-v { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); }
.cl-drawer-stat-l { font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cl-drawer-tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }
.cl-tab { flex: 1; padding: 10px 4px; border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--muted-2); cursor: pointer; border-bottom: 2.5px solid transparent; transition: all .12s; }
.cl-tab:hover { color: var(--ink); background: var(--cream-2); }
.cl-tab.on { color: var(--brand-d); border-bottom-color: var(--brand); }
.cl-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }

/* ── DISEÑO 6 — Users: grid of cards, pulsing dot ── */
.usr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.usr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.usr-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.usr-card-head { position: relative; padding: 20px 16px; display: flex; align-items: center; gap: 12px; }
.usr-card-body { padding: 14px 16px; }
.usr-card-name { font-family: var(--display); font-weight: 800; font-size: 14px; }
.usr-card-email { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; word-break: break-all; }
.usr-card-title { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; font-style: italic; }
.usr-pulse { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)} 50%{box-shadow:0 0 0 6px rgba(22,163,74,0)} }

/* ── DISEÑO 7 — Evidence Trace: donut chart ── */
.et-donut-wrap { flex-shrink: 0; }
.et-donut-svg { width: 72px; height: 72px; }
.et-counter-bar { align-items: center; gap: 14px; }

/* ── DISEÑO 8 — Opportunities: cards grid, probability bar ── */
.opp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.opp-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r); padding: 16px; cursor: pointer; box-shadow: var(--shadow); transition: transform .1s, box-shadow .12s, border-color .12s; }
.opp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.1); border-color: var(--brand-d); border-left-color: var(--brand); }
.opp-prob-bar { min-width: 40px; }
.opp-prob-fill { min-width: 3px; }
.kpi { position: relative; }
.kpi .ic-tile { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand-d); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.kpi .ic-tile svg { width: 18px; height: 18px; }
.opp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.opp-card-val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.opp-card-title { font-family: var(--display); font-weight: 700; font-size: 15px; margin-bottom: 6px; line-height: 1.3; }
.opp-card-country { font-size: 12.5px; color: var(--muted-2); margin-bottom: 12px; }
.opp-card-prob { margin-bottom: 10px; }
.opp-prob-bar { height: 6px; background: var(--cream); border-radius: 4px; overflow: hidden; }
.opp-prob-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.opp-card-footer { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted-2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ── Impresión (Informes a PDF) ── */
@media print {
  .side, .topbar, .no-print, .seg, .btn { display: none !important; }
  .main, .content { height: auto; overflow: visible; }
  .content { padding: 0; }
  #app.on { display: block; }
  .card { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
  body { background: #fff; }
}

/* ── Imprimir SOLO un elemento puntual (ej. AI Formula → PDF, Carlos,
   2026-08-16: "puede generar un PDF y llevarse su consulta" — a diferencia
   del bloque de arriba, que imprime la página completa, esto oculta TODO
   menos .pf-print-area, incluso dentro de un modal). Se activa marcando
   body.pf-printing justo antes de window.print() y se saca después — así
   no interfiere con el flujo de impresión de Informes ni de otras vistas. */
@media print {
  body.pf-printing > *:not(.modal-overlay) { display: none !important; }
  body.pf-printing * { visibility: hidden; }
  body.pf-printing .pf-print-area, body.pf-printing .pf-print-area * { visibility: visible; }
  body.pf-printing .modal-overlay { position: static; background: none; backdrop-filter: none; padding: 0; display: block !important; }
  body.pf-printing .modal { box-shadow: none; max-height: none; max-width: 100%; overflow: visible; position: static; }
  body.pf-printing .pf-print-area { position: absolute; left: 0; top: 0; width: 100%; }
}

/* Catálogo de Marketing — galería de portadas reales (Carlos, 2026-08).
   4 columnas fijas, agrupada primero Verticales / luego Horizontales
   (ver sql/072_brochure_covers.sql + marketingCatalog.js). */
.mkt-cover-group { margin-bottom: 26px; }
.mkt-cover-group-t { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.mkt-cover-group-t span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.mkt-cover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .mkt-cover-grid { grid-template-columns: repeat(2, 1fr); } }
.mkt-cover-card { cursor: pointer; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.mkt-cover-card:hover { box-shadow: 0 6px 18px -6px rgba(0,0,0,.18); transform: translateY(-2px); }
.mkt-cover-img { width: 100%; background: var(--cream-2); overflow: hidden; position: relative; }
.mkt-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-cover-flag { position: absolute; top: 6px; left: 6px; right: 6px; background: #c0392b; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-align: center; padding: 3px 6px; border-radius: 5px; }
.mkt-cover-meta { display: flex; align-items: center; gap: 7px; padding: 9px 10px; }
.mkt-cover-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mkt-cover-name { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }