/* ═══════════════════════════════════════════════════════════════════════════
   Consola ROS™ — sistema visual RT& · rediseño "clean admin"

   Mismo contrato de siempre: los tokens se definen una vez y el tema oscuro
   los REDEFINE — ningún componente conoce el tema.

   El rojo RT& (#C00000) sigue siendo color de ACENTO y de ALERTA, nunca de
   relleno decorativo: pastilla de navegación activa, firmas humanas
   pendientes, crisis y bloqueos. Si el rojo está en todos lados deja de
   significar algo — y en una consola de crisis eso es un defecto de
   seguridad, no de estética.

   NOTA DE COMPATIBILIDAD: app.js no se tocó. Cada clase que app.js inyecta
   (card/alert/ok/warn, chip*, firma, gate-label, accion*, check*, punto*,
   wizard*, repetible*, variant*, pillar*, tbl, aviso*, vacio, empty, mono…)
   está cubierta abajo. La pantalla de acceso sigue siendo `.gate` overlay y
   el bloque de firma en línea sigue siendo `.firma` — no volver a unificarlos.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Harriet Display'; src:url('../dashboard/assets/fonts/HarrietDisplay-Light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Harriet Display'; src:url('../dashboard/assets/fonts/HarrietDisplay-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Harriet Display'; src:url('../dashboard/assets/fonts/HarrietDisplay-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('../dashboard/assets/fonts/NeueHaasDisplay-Light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('../dashboard/assets/fonts/NeueHaasDisplay-Roman.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('../dashboard/assets/fonts/NeueHaasDisplay-Mediu.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('../dashboard/assets/fonts/NeueHaasDisplay-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }

/* ── Tokens: tema claro (por defecto) ─────────────────────────────────── */
:root {
  --rt-red:#C00000;
  --rt-red-hover:#A50000;
  --rt-red-grad:linear-gradient(135deg, #D40000, #9E0000);
  --rt-red-soft:#FBE7E7;
  --rt-red-line:rgba(192,0,0,.30);
  --rt-blue:#0070C0;
  --rt-blue-soft:#EAF3FB;

  --bg:#F4F5FA;
  --bg-sunken:#EDEFF5;
  --surface:#FFFFFF;
  --surface-2:#F6F7FB;
  --ink:#15161C;
  --ink-2:#3C4150;
  --ink-3:#5B6070;
  --ink-4:#9298A9;
  --line:#ECEDF3;
  --line-strong:#DDDFE9;

  --ok:#12805C;
  --ok-soft:#E4F5EE;
  --warn:#9A6200;
  --warn-soft:#FBF1DC;

  --shadow:0 6px 22px -8px rgba(24,29,48,.10), 0 1px 3px rgba(24,29,48,.04);
  --shadow-lg:0 18px 44px -16px rgba(24,29,48,.22);

  --r-xl:22px; --r-lg:18px; --r-md:13px; --r-sm:10px; --r-pill:999px;
  --spring:cubic-bezier(.34,1.3,.5,1);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Tipografía: SF Pro (fuente del sistema en Apple) para títulos y UI —
     se lee mejor en tamaños de interfaz. Harriet queda como fuente de MARCA:
     solo el wordmark ROS™ (sidebar, gate y topbar) la usa. */
  --marca:'Harriet Display', Georgia, 'Times New Roman', serif;
  --display:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ui:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* ── Tokens: tema oscuro ──────────────────────────────────────────────────
   No es el claro invertido: el fondo sube apenas de negro, las superficies
   flotan por luminancia y el rojo se aclara a #FF5449 porque #C00000 sobre
   oscuro no alcanza contraste legible. */
[data-theme="dark"] {
  --rt-red:#FF5449;
  --rt-red-hover:#FF6E64;
  --rt-red-grad:linear-gradient(135deg, #E03A30, #A80E06);
  --rt-red-soft:rgba(255,84,73,.13);
  --rt-red-line:rgba(255,84,73,.36);
  --rt-blue:#5CA8E0;
  --rt-blue-soft:rgba(92,168,224,.14);

  --bg:#101116;
  --bg-sunken:#0A0B0F;
  --surface:#1A1B22;
  --surface-2:#22232C;
  --ink:#F2F3F8;
  --ink-2:#C9CDD9;
  --ink-3:#A7ACBC;
  --ink-4:#666C7E;
  --line:#262731;
  --line-strong:#31323E;

  --ok:#34C98B;
  --ok-soft:rgba(52,201,139,.13);
  --warn:#F5B345;
  --warn-soft:rgba(245,179,69,.13);

  --shadow:0 8px 26px -10px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 18px 44px -14px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-weight:400; font-size:14px; line-height:1.5;
  min-height:100vh;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a { color:inherit; }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--rt-red); outline-offset:2px; border-radius:4px; }
::selection { background:#C00000; color:#fff; }
.mono { font-family:var(--mono); font-size:12px; }
.hidden { display:none !important; }
[hidden] { display:none !important; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }

@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT — sidebar fija + contenido
   ═══════════════════════════════════════════════════════════════════════ */
.shell { display:flex; min-height:100vh; }

.side {
  position:fixed; z-index:40; top:16px; left:16px; bottom:16px; width:242px;
  display:flex; flex-direction:column; gap:4px;
  padding:24px 14px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
  overflow-y:auto;
}
.side .mark { padding:0 10px 18px; }
.side .logo { font-family:var(--marca); font-weight:700; font-size:26px; letter-spacing:-.01em; line-height:1; }
.side .logo .amp { color:var(--rt-red); font-size:.55em; vertical-align:.5em; }
.side .logo-sub { margin-top:5px; font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-4); }
.side-flex { flex:1; }

.nav-lbl { padding:14px 10px 7px; font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); }

/* Pestañas → items de sidebar. app.js marca la activa con aria-selected. */
.tabs { display:flex; flex-direction:column; gap:3px; }
.tabs button {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:none; cursor:pointer;
  padding:10px 12px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:400; color:var(--ink-3);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.tabs button svg { width:17px; height:17px; flex:none; opacity:.75; }
.tabs button:hover { background:var(--surface-2); color:var(--ink); }
.tabs button[aria-selected="true"] {
  background:var(--rt-red-grad); color:#fff; font-weight:500;
  box-shadow:0 8px 18px -8px rgba(192,0,0,.55);
}
.tabs button[aria-selected="true"] svg { opacity:1; }

.tabs .badge {
  display:inline-block; margin-left:auto; min-width:21px; padding:2px 6px;
  font-size:10.5px; font-weight:600; line-height:1.5; text-align:center;
  border-radius:var(--r-pill); font-variant-numeric:tabular-nums;
  background:var(--rt-red-soft); color:var(--rt-red);
}
.tabs .badge.zero { background:var(--surface-2); color:var(--ink-4); }
.tabs button[aria-selected="true"] .badge,
.tabs button[aria-selected="true"] .badge.zero { background:rgba(255,255,255,.22); color:#fff; }

/* Toggle de tema al pie de la sidebar */
.theme-toggle {
  display:flex; gap:2px; padding:3px; margin:10px 6px 0;
  background:var(--surface-2); border-radius:var(--r-pill);
}
.theme-toggle button {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:none; cursor:pointer;
  padding:7px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500; color:var(--ink-3);
  transition:background .2s var(--spring), color .16s var(--ease), box-shadow .2s var(--ease);
}
.theme-toggle button[aria-pressed="true"] {
  background:var(--surface); color:var(--ink);
  box-shadow:0 2px 8px -2px rgba(24,29,48,.18);
}
.theme-toggle button:hover:not([aria-pressed="true"]) { color:var(--ink); }
.theme-toggle svg { width:14px; height:14px; }

.side-note {
  margin:12px 6px 0; padding:12px 14px;
  background:var(--surface-2); border-radius:var(--r-md);
  font-size:11px; color:var(--ink-3); line-height:1.6;
}
.side-note strong { color:var(--ink-2); font-weight:500; }

/* ── Contenido ────────────────────────────────────────────────────────── */
.main { flex:1; margin-left:274px; padding:16px 24px 80px; min-width:0; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:16px; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; margin-bottom:20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
}
.kicker { font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--rt-red); }
h1 { font-family:var(--marca); font-weight:500; font-size:21px; line-height:1.15; white-space:nowrap; }
h1 .amp { color:var(--rt-red); font-size:.55em; vertical-align:.5em; }
.sub { font-size:12px; color:var(--ink-4); max-width:30ch; line-height:1.45; }
.t-spacer { flex:1; }
.head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.client-select {
  appearance:none; -webkit-appearance:none;
  font-family:var(--ui); font-size:12.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-pill);
  padding:8px 32px 8px 14px; min-width:180px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239298a9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  transition:border-color .16s var(--ease);
}
.client-select:hover { border-color:var(--line-strong); }
.client-select:focus { outline:none; border-color:var(--rt-red); }
.client-select option { background:var(--surface); color:var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:1px solid transparent; border-radius:var(--r-pill);
  font-family:var(--ui); font-size:13px; font-weight:500;
  cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease),
             color .16s var(--ease), transform .16s var(--spring), box-shadow .16s var(--ease);
}
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-primario { background:var(--rt-red-grad); color:#fff; box-shadow:0 6px 16px -6px rgba(192,0,0,.55); }
.btn-primario:hover:not(:disabled) { filter:brightness(1.08); }
.btn-secundario { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-secundario:hover:not(:disabled) { background:var(--surface-2); }
.btn-fantasma { background:transparent; color:var(--ink-3); }
.btn-fantasma:hover:not(:disabled) { color:var(--ink); background:var(--surface-2); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-ancho { width:100%; }

.accion-rapida { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════════════════
   BARRA DE ESTADO
   ═══════════════════════════════════════════════════════════════════════ */
.estado-barra {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:11px 18px; margin-bottom:20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  font-size:12px;
}
.estado-barra:empty { display:none; }
.estado-item { display:flex; align-items:center; gap:7px; color:var(--ink-3); }
.estado-item b { color:var(--ink); font-weight:500; }
.punto { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.punto-ok { background:var(--ok); }
.punto-warn { background:var(--warn); }
.punto-error { background:var(--rt-red); }

/* ═══════════════════════════════════════════════════════════════════════
   KPIs
   ═══════════════════════════════════════════════════════════════════════ */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:8px; }
.kpi {
  padding:18px 20px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease);
  animation:rise .5s var(--ease) backwards;
}
.kpi:nth-child(2) { animation-delay:.06s; }
.kpi:nth-child(3) { animation-delay:.12s; }
.kpi:nth-child(4) { animation-delay:.18s; }
.kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.kpi .num { font-family:var(--display); font-weight:300; font-size:46px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .lbl { margin-top:10px; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.kpi .sub-note { margin-top:4px; font-size:11.5px; color:var(--ink-4); }

/* El KPI hero es el que espera firma humana: rojo pleno, como los tiles del dashboard */
.kpi.hero { background:var(--rt-red-grad); border:none; box-shadow:0 14px 30px -12px rgba(192,0,0,.55); }
.kpi.hero .num { color:#fff; }
.kpi.hero .lbl { color:rgba(255,255,255,.82); }
.kpi.hero .sub-note { color:rgba(255,255,255,.62); }

/* ═══════════════════════════════════════════════════════════════════════
   SECCIONES — cada sección es un panel blanco
   ═══════════════════════════════════════════════════════════════════════ */
section {
  padding:20px 22px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  animation:rise .5s var(--ease) backwards;
}
.sec-head { display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
.sec-num {
  font-family:var(--display); font-weight:500; font-size:13px; color:var(--rt-red);
  width:26px; height:26px; border-radius:8px; background:var(--rt-red-soft);
  display:inline-flex; align-items:center; justify-content:center; align-self:center; flex:none;
}
h2 { font-family:var(--display); font-weight:500; font-size:18px; }
.sec-note { font-size:11px; color:var(--ink-4); margin-left:auto; text-align:right; }
.sec-desc { font-size:13px; color:var(--ink-3); margin-bottom:18px; max-width:78ch; line-height:1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   TARJETAS (señales, drafts, crisis) — inyectadas por app.js
   ═══════════════════════════════════════════════════════════════════════ */
.card {
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
  padding:18px 20px 18px 24px; margin-bottom:12px;
  transition:transform .25s var(--spring), box-shadow .25s var(--ease);
  animation:rise .45s var(--ease) backwards;
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
/* riel de estado: color semántico sin pintar la tarjeta entera */
.card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md); background:transparent;
}
.card.alert::before { background:var(--rt-red); }
.card.ok::before    { background:var(--ok); }
.card.warn::before  { background:var(--warn); }

.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.card-title { font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.35; }
.card-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--ink-3); }
.card-body { margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--ink-2); white-space:pre-wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   CHIPS Y ETIQUETAS — pastel suave, dos familias que usa app.js
   ═══════════════════════════════════════════════════════════════════════ */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.chip .dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.chip.red    { color:var(--rt-red); background:var(--rt-red-soft); }
.chip.green  { color:var(--ok);     background:var(--ok-soft); }
.chip.amber  { color:var(--warn);   background:var(--warn-soft); }
.chip.plain  { color:var(--ink-3);  background:var(--surface-2); }
.chip.solid  { color:#fff; background:var(--rt-red-grad); }

/* familia de urgencia en "qué me toca ahora" */
.chip-crisis     { color:#fff; background:var(--rt-red-grad); }
.chip-bloqueo    { color:var(--warn); background:var(--warn-soft); }
.chip-aprobacion { color:var(--ink-2); background:var(--surface-2); }
.chip-ok         { color:var(--ok); background:var(--ok-soft); }

.pill {
  display:inline-block; font-size:11px; color:var(--ink-3);
  background:var(--surface-2); border-radius:var(--r-pill);
  padding:2px 10px; white-space:nowrap;
}
.pill.pillar { background:var(--rt-red-soft); color:var(--rt-red); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOQUE DE FIRMA HUMANA
   Visualmente distinto de todo lo demás: es donde el sistema se DETIENE
   y espera a una persona. (app.js inyecta .firma > .gate-label/.gate-text;
   no confundir con `.gate`, que es el overlay de login.)
   ═══════════════════════════════════════════════════════════════════════ */
.firma {
  border:1px solid var(--rt-red-line); background:var(--rt-red-soft);
  border-radius:var(--r-md);
  padding:16px 20px; margin-top:14px;
}
.firma .gate-label {
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rt-red); display:flex; align-items:center; gap:8px;
}
.firma .gate-label::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--rt-red);
  animation:pulso 2s var(--ease) infinite;
}
@keyframes pulso { 0%,100%{opacity:1} 50%{opacity:.35} }
.firma .gate-text { margin-top:8px; font-size:13px; color:var(--ink-2); line-height:1.6; }
.firma code {
  display:block; margin-top:10px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
  overflow-x:auto; white-space:pre;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTES POR STAKEHOLDER
   ═══════════════════════════════════════════════════════════════════════ */
.variants { margin-top:16px; border-top:1px solid var(--line); }
.variant { border-bottom:1px solid var(--line); }
.variant:last-child { border-bottom:none; }
.variant summary {
  cursor:pointer; padding:12px 4px; font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:10px; list-style:none;
  border-radius:var(--r-sm);
  transition:background .16s var(--ease);
}
.variant summary:hover { background:var(--surface-2); }
.variant summary::-webkit-details-marker { display:none; }
.variant summary::before {
  content:'+'; font-family:var(--mono); color:var(--rt-red); font-size:13px; width:12px; flex:none;
}
.variant[open] summary::before { content:'−'; }
.variant .v-body { padding:2px 4px 16px 26px; font-size:13px; line-height:1.65; color:var(--ink-2); white-space:pre-wrap; }
.variant .v-emphasis {
  margin-top:10px; padding:10px 12px; background:var(--surface-2); border-radius:var(--r-sm);
  font-size:12px; color:var(--ink-3); border-left:3px solid var(--rt-red-line); white-space:normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   PILARES
   ═══════════════════════════════════════════════════════════════════════ */
.pillar-row {
  display:grid; grid-template-columns:minmax(160px,1fr) 2fr max-content;
  gap:14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line);
}
.pillar-row:last-child { border-bottom:none; }
.pillar-name { font-weight:500; font-size:13.5px; }
.pillar-obj { font-size:11.5px; color:var(--ink-4); margin-top:3px; line-height:1.5; }
.track { position:relative; height:8px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; }
.fill {
  position:absolute; left:0; top:0; height:8px; border-radius:var(--r-pill); min-width:3px;
  background:linear-gradient(90deg, #9E0000, #E23A2E);
  transition:width .6s var(--spring);
}
.fill.done { background:linear-gradient(90deg, #0E6B4D, #23A876); }
.pillar-count { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pillar-count .deficit { color:var(--rt-red); }

/* ═══════════════════════════════════════════════════════════════════════
   TABLA DE AUDITORÍA
   ═══════════════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
  text-align:left; font-size:9.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-4); padding:2px 14px 10px 8px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.tbl td { padding:12px 14px 12px 8px; border-bottom:1px solid var(--line); vertical-align:top; font-size:12.5px; }
.tbl tbody tr { transition:background .14s var(--ease); }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl tbody tr:hover td:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.tbl tbody tr:hover td:last-child { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.tbl .t-time { color:var(--ink-4); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl .t-actor { white-space:nowrap; }
.tbl .t-action { font-family:var(--mono); font-size:11.5px; }
.tbl .t-action.human { color:var(--rt-red); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════════
   ESTADOS VACÍOS / ERROR
   ═══════════════════════════════════════════════════════════════════════ */
.empty { padding:28px 0; font-size:13.5px; color:var(--ink-4); }
.load-error {
  margin:40px 0; padding:22px 24px;
  border:1px solid var(--rt-red-line); background:var(--rt-red-soft);
  border-radius:var(--r-lg);
  font-size:13.5px; line-height:1.7;
}
.load-error code {
  font-family:var(--mono); font-size:12px;
  background:var(--surface); padding:2px 7px; border-radius:6px;
}

.vacio { text-align:center; padding:56px 24px; max-width:520px; margin:0 auto; }
.vacio h3 { font-family:var(--display); font-size:24px; font-weight:500; margin-bottom:12px; }
.vacio p { font-size:14px; color:var(--ink-2); line-height:1.65; margin-bottom:24px; }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
footer {
  margin-top:20px; padding:18px 22px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  font-size:11.5px; color:var(--ink-3); line-height:1.75;
}
footer strong { color:var(--ink-2); font-weight:500; }
footer .estado {
  color:var(--rt-red); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; font-size:10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO — overlay de login
   ═══════════════════════════════════════════════════════════════════════ */
.gate {
  position:fixed; inset:0; z-index:100; isolation:isolate; overflow:hidden;
  background:#08090C;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.gate[hidden] { display:none; }

/* Teaser cinemático de fondo — atenuado al 65% para no competir con el
   formulario. object-fit:cover lo llena sin importar el aspecto real del
   viewport; el <video> nunca bloquea el login si no carga (ver .gate-scrim). */
.gate-video {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.65; filter:saturate(1.05) contrast(1.02);
  animation:gateVideoIn 2.4s var(--ease) backwards;
}
@keyframes gateVideoIn { from { opacity:0; transform:scale(1.04); } to { opacity:.65; transform:none; } }

/* Scrim: un degradado radial oscurece el centro lo justo para que el
   formulario sea legible sobre cualquier fotograma del video. */
.gate-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 640px 620px at 50% 52%, rgba(8,9,12,.62), rgba(8,9,12,.28) 60%, transparent 78%),
    linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,.15) 22%, rgba(8,9,12,.15) 78%, rgba(8,9,12,.6) 100%);
}

/* ── Liquid glass — al estilo iOS 26: cristal esmerilado, borde de luz que
   recorre el contorno, y una respiración sutil de tamaño/blur. Vive sobre
   el teaser (z-index 2), nunca sobre un fondo sólido — por eso sus tokens
   de texto son fijos (blancos), no los del tema claro/oscuro de la consola. */
.gate-card {
  position:relative; z-index:2;
  width:100%; max-width:420px;
  padding:40px;
  color:#F3F4F8;
  background:
    linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 40%, rgba(255,255,255,.05) 100%),
    rgba(20,21,26,.42);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  box-shadow:
    0 24px 70px -20px rgba(0,0,0,.65),
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -18px 40px -30px rgba(255,255,255,.12) inset;
  animation:riseGlass .7s var(--spring) backwards, glassBreathe 7s ease-in-out 1.2s infinite;
  overflow:hidden;
}
/* Borde de luz que recorre el contorno — el rasgo característico del liquid glass */
.gate-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--sheen-angle,0deg),
    rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 8%, rgba(255,255,255,0) 22%,
    rgba(255,255,255,0) 72%, rgba(255,84,73,.55) 84%, rgba(255,255,255,0) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sheenSpin 9s linear infinite;
  pointer-events:none;
}
/* Especular: un reflejo suave que cruza el cristal una vez al cargar, como
   el "glint" de iOS 26 al abrir una hoja de cristal. */
.gate-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
  transform:translateX(-120%);
  animation:glint 1.6s var(--ease) .5s 1;
}
@keyframes riseGlass { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes glassBreathe {
  0%, 100% { backdrop-filter:blur(28px) saturate(150%); transform:scale(1); }
  50%      { backdrop-filter:blur(34px) saturate(165%); transform:scale(1.004); }
}
@keyframes sheenSpin { to { --sheen-angle:360deg; } }
@keyframes glint { to { transform:translateX(120%); } }
@property --sheen-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }

.gate-mark {
  font-family:var(--marca); font-weight:700; font-size:34px;
  letter-spacing:-.02em; margin-bottom:4px; text-align:center;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.gate-mark span { color:#FF6259; font-size:.55em; vertical-align:.5em; }
.gate-sub {
  font-size:11px; color:rgba(255,255,255,.56); margin-bottom:26px; text-align:center;
  text-transform:uppercase; letter-spacing:.12em; font-weight:500;
}
.gate-intro {
  font-size:13px; color:rgba(255,255,255,.82); line-height:1.6;
  padding:14px 16px; background:rgba(255,255,255,.07); border-radius:var(--r-md);
  border-left:3px solid #FF6259; margin-bottom:24px;
  border-top:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.gate-intro strong { color:#fff; }
.gate .campo label { color:rgba(255,255,255,.6); }
.gate .campo input {
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.gate .campo input:focus {
  background:rgba(255,255,255,.12); border-color:#FF6259;
  box-shadow:0 0 0 4px rgba(255,98,89,.16);
}
.gate .campo input::placeholder { color:rgba(255,255,255,.32); }
.gate .campo .pista { color:rgba(255,255,255,.4); }
.gate .aviso-error { background:rgba(255,98,89,.16); border-color:#FF6259; color:#fff; }

@media (max-width:720px) { .gate-video { opacity:.5; } }
@media (prefers-reduced-motion:reduce) {
  .gate-card, .gate-card::before, .gate-card::after, .gate-video { animation:none !important; }
}

/* ── Campos de formulario (gate, modal, wizard) ───────────────────────── */
.campo { margin-bottom:16px; }
.campo label {
  display:block; font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); margin-bottom:6px;
}
.campo input, .campo textarea, .campo select {
  width:100%; padding:11px 14px;
  background:var(--surface-2); color:var(--ink);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-family:var(--ui); font-size:14px;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline:none; background:var(--surface); border-color:var(--rt-red);
  box-shadow:0 0 0 4px rgba(192,0,0,.10);
}
.campo textarea { resize:vertical; min-height:88px; line-height:1.6; }
.campo .pista { font-size:12px; color:var(--ink-4); margin-top:6px; line-height:1.5; }

/* ── Avisos ───────────────────────────────────────────────────────────── */
.aviso {
  padding:12px 15px; font-size:13px; line-height:1.55;
  border-radius:var(--r-md); border-left:3px solid; margin-bottom:16px;
}
.aviso-error { background:var(--rt-red-soft); border-color:var(--rt-red); color:var(--ink); }
.aviso-ok    { background:var(--ok-soft);     border-color:var(--ok);     color:var(--ink); }
.aviso-warn  { background:var(--warn-soft);   border-color:var(--warn);   color:var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   "QUÉ ME TOCA AHORA"
   ═══════════════════════════════════════════════════════════════════════ */
.acciones { display:flex; flex-direction:column; gap:12px; }

.accion {
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow);
  padding:18px 20px 18px 24px;
  transition:transform .25s var(--spring), box-shadow .25s var(--ease);
  animation:rise .45s var(--ease) backwards;
}
.accion:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.accion::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md); background:var(--ink-4);
}
.accion[data-urgencia="0"]::before, .accion[data-urgencia="1"]::before { background:var(--rt-red); }
.accion[data-urgencia="2"]::before { background:var(--warn); }
.accion[data-urgencia="3"]::before { background:var(--ink-4); }

.accion-titulo {
  font-family:var(--display); font-size:16.5px; font-weight:500;
  line-height:1.3; margin-bottom:8px;
}
.accion-porque { font-size:13px; color:var(--ink-2); line-height:1.6; margin-bottom:10px; }
.accion-meta {
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:12px; color:var(--ink-3); margin-bottom:12px;
}
.accion-meta b { color:var(--ink-2); font-weight:500; }
.accion-consecuencia {
  font-size:12px; color:var(--ink-3); font-style:italic;
  padding-left:12px; border-left:2px solid var(--line-strong);
  margin-bottom:12px;
}
.accion-bloqueo {
  font-size:12px; padding:10px 13px; margin-bottom:12px;
  background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:var(--r-sm);
}
.accion-botones { display:flex; flex-wrap:wrap; gap:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   WIZARD DE ALTA DE CLIENTE
   ═══════════════════════════════════════════════════════════════════════ */
.wizard { max-width:760px; margin:0 auto; }

.wizard-pasos {
  display:flex; gap:4px; margin-bottom:32px;
  background:var(--surface-2); border-radius:var(--r-pill); padding:4px;
}
.wizard-paso {
  flex:1; padding:9px 6px; text-align:center;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-4); border-radius:var(--r-pill);
  transition:background .25s var(--spring), color .16s var(--ease);
}
.wizard-paso[data-estado="actual"] {
  background:var(--rt-red-grad); color:#fff; font-weight:600;
  box-shadow:0 5px 14px -5px rgba(192,0,0,.5);
}
.wizard-paso[data-estado="hecho"] { color:var(--ink-2); background:var(--surface); box-shadow:0 2px 8px -2px rgba(24,29,48,.14); }

.wizard-cabecera { margin-bottom:28px; }
.wizard-cabecera h2 {
  font-family:var(--display); font-size:26px; font-weight:500;
  letter-spacing:-.01em; margin-bottom:10px;
}
.wizard-cabecera p {
  font-size:13px; color:var(--ink-2); line-height:1.65;
  padding:12px 16px; background:var(--surface-2); border-radius:var(--r-md);
  border-left:3px solid var(--rt-red);
}
.wizard-navegacion {
  display:flex; justify-content:space-between; gap:12px;
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
}

/* Elementos repetibles (reglas, stakeholders, pilares) */
.repetible {
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px; margin-bottom:12px; position:relative;
}
.repetible-quitar {
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  background:none; border:none; cursor:pointer;
  color:var(--ink-4); font-size:15px; line-height:1;
  display:grid; place-items:center;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.repetible-quitar:hover { color:var(--rt-red); background:var(--rt-red-soft); }
.repetible-titulo {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); margin-bottom:12px; font-weight:500;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO DE SET UP
   ═══════════════════════════════════════════════════════════════════════ */
.checklist { display:flex; flex-direction:column; gap:8px; }
.check-fila {
  display:grid; grid-template-columns:24px 1fr; gap:10px;
  padding:12px 14px; background:var(--surface-2); border-radius:var(--r-md);
  align-items:start;
}
.check-icono { font-size:14px; line-height:1.4; text-align:center; }
.check-fila[data-estado="ok"] .check-icono { color:var(--ok); }
.check-fila[data-estado="advertencia"] .check-icono { color:var(--warn); }
.check-fila[data-estado="bloqueante"] .check-icono { color:var(--rt-red); }
.check-fila[data-estado="bloqueante"] { background:var(--rt-red-soft); }
.check-titulo { font-size:13px; font-weight:500; }
.check-detalle { font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.check-arreglo {
  font-size:12px; color:var(--ink-2); margin-top:7px; line-height:1.55;
  padding:9px 12px; background:var(--surface); border-radius:var(--r-sm);
  border-left:3px solid var(--line-strong);
}

.barra-progreso {
  height:6px; background:var(--surface-2); border-radius:var(--r-pill);
  margin:14px 0 20px; overflow:hidden;
}
.barra-progreso i {
  display:block; height:100%; border-radius:var(--r-pill);
  background:var(--rt-red-grad); transition:width .4s var(--spring);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.modal {
  position:fixed; inset:0; z-index:90;
  background:rgba(10,12,20,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal[hidden] { display:none; }
.modal-caja {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  width:100%; max-width:560px; max-height:86vh; overflow-y:auto;
  padding:30px; box-shadow:var(--shadow-lg);
  animation:rise .35s var(--ease) backwards;
}
.modal-titulo { font-family:var(--display); font-size:22px; font-weight:500; margin-bottom:8px; }
.modal-nota { font-size:13px; color:var(--ink-2); line-height:1.6; margin-bottom:22px; }
.modal-botones { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOVIMIENTO / IMPRESIÓN
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .kpis { grid-template-columns:1fr 1fr; }
  .sub { display:none; }
}
@media (max-width:940px) {
  .side { position:static; width:auto; margin:12px; overflow:visible; }
  .shell { flex-direction:column; }
  .main { margin-left:0; padding:0 12px 64px; }
  .tabs { flex-direction:row; flex-wrap:wrap; }
  .tabs button { width:auto; }
  .nav-lbl { display:none; }
  .side-note { display:none; }
}
@media (max-width:720px) {
  .kpis { grid-template-columns:1fr; }
  .gate-card { padding:28px 22px; }
  .wizard-paso { font-size:9px; padding:8px 4px; }
  .accion-meta { flex-direction:column; gap:6px; }
  .pillar-row { grid-template-columns:1fr; gap:8px; }
  .topbar { flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA BIENVENIDA — el primer momento de cada sesión
   ═══════════════════════════════════════════════════════════════════════ */
.bienvenida { max-width:720px; margin:8px auto 0; }
.bienvenida-hola {
  font-family:var(--display); font-weight:300; font-size:34px; line-height:1.12;
  letter-spacing:-.01em; margin-bottom:10px;
}
.bienvenida-hola em { font-style:normal; color:var(--rt-red); }
.bienvenida-resumen {
  font-size:14px; color:var(--ink-3); line-height:1.65; margin-bottom:22px; max-width:58ch;
}
.bienvenida-resumen b { color:var(--ink); font-weight:500; }
.bienvenida .acciones { margin-bottom:18px; }

.bienvenida-cliente-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rt-red); background:var(--rt-red-soft);
  padding:3px 10px; border-radius:var(--r-pill); margin-bottom:10px;
}

.aldia {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--ok-soft); color:var(--ink-2); font-size:13.5px; margin-bottom:18px;
  line-height:1.6;
}
.aldia .anillo-ok {
  width:26px; height:26px; flex:none; border-radius:50%; color:var(--ok);
  border:2px solid var(--ok); display:grid; place-items:center; font-size:13px;
}
.aldia b { font-weight:600; color:var(--ink); }

.bienvenida-monitor {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); font-size:12.5px; color:var(--ink-3);
}
.bienvenida-monitor a { color:var(--rt-red); font-weight:500; text-decoration:none; }
.bienvenida-monitor a:hover { text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════════
   MIS CLIENTES — el portafolio
   ═══════════════════════════════════════════════════════════════════════ */
.clientes-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:16px;
}
.cliente-card {
  display:flex; flex-direction:column; gap:12px; text-align:left; width:100%;
  appearance:none; -webkit-appearance:none;
  font-family:inherit; font-size:inherit; line-height:1.5; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:18px 18px 16px;
  transition:transform .25s var(--spring), box-shadow .25s var(--ease), border-color .16s var(--ease);
  animation:rise .45s var(--ease) backwards;
}
.cliente-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.cc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cc-nombre { font-family:var(--display); font-weight:500; font-size:18px; line-height:1.25; }
.cc-sub { font-size:11px; color:var(--ink-4); margin-top:3px; }
.cc-dot { width:10px; height:10px; border-radius:50%; flex:none; margin-top:5px; }
.cc-dot.ok { background:var(--ok); }
.cc-dot.warn { background:var(--warn); }
.cc-dot.error { background:var(--rt-red); box-shadow:0 0 0 4px var(--rt-red-soft); }

.cc-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.cc-stat { background:var(--surface-2); border-radius:var(--r-sm); padding:8px 10px; min-width:0; }
.cc-stat .n {
  font-family:var(--display); font-weight:300; font-size:21px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cc-stat.hot .n { color:var(--rt-red); }
.cc-stat .l {
  margin-top:4px; font-size:9px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.cc-pend { display:flex; flex-direction:column; gap:5px; }
.cc-pend .fila { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3); }
.cc-pend .fila b { color:var(--ink-2); font-weight:500; }

.cc-pie {
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:11px; border-top:1px dashed var(--line-strong);
}
.anillo {
  width:28px; height:28px; border-radius:50%; flex:none;
  background:conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0);
  display:grid; place-items:center;
}
.anillo.incompleto { background:conic-gradient(var(--warn) calc(var(--p) * 1%), var(--line) 0); }
.anillo i {
  width:20px; height:20px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; font-style:normal; font-size:8px; font-weight:600;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.cc-setup { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-4); }
.chispa { display:flex; align-items:flex-end; gap:2px; height:24px; }
.chispa i { width:5px; min-height:2px; border-radius:2px; background:var(--rt-blue); opacity:.65; }
.chispa i.pico { background:var(--rt-red); opacity:1; }

.cliente-fantasma {
  border-style:dashed; border-color:var(--line-strong); background:transparent; box-shadow:none;
  align-items:center; justify-content:center; text-align:center; gap:8px; min-height:180px;
  color:var(--ink-3);
}
.cliente-fantasma:hover { border-color:var(--rt-red-line); background:var(--surface); }
.cliente-fantasma .mas {
  width:36px; height:36px; border-radius:50%; border:1.5px dashed var(--ink-4);
  display:grid; place-items:center; font-size:18px; color:var(--ink-3);
}
.cliente-fantasma b { color:var(--ink); font-weight:500; }
.cliente-fantasma small { font-size:11.5px; line-height:1.5; max-width:26ch; }

/* ═══════════════════════════════════════════════════════════════════════
   EL TOUR — spotlight de primera vez (z entre modal 90 y gate 100)
   ═══════════════════════════════════════════════════════════════════════ */
.tour { position:fixed; inset:0; z-index:95; }
.tour[hidden] { display:none; }
.tour-halo {
  position:fixed; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,12,20,.55), 0 0 0 3px var(--rt-red);
  transition:all .35s var(--ease);
}
.tour-halo[hidden] { display:none; }
/* Sin ancla: el velo lo pone la tarjeta, no el halo */
.tour.sin-ancla { background:rgba(10,12,20,.55); }
.tour-card {
  position:fixed; z-index:96; width:min(400px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:22px 24px;
  animation:rise .35s var(--ease) backwards;
}
.tour-num {
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rt-red); margin-bottom:8px;
}
.tour-card h3 { font-family:var(--display); font-weight:500; font-size:20px; margin-bottom:8px; }
.tour-copy { font-size:13px; color:var(--ink-2); line-height:1.65; }
.tour-copy strong { color:var(--ink); font-weight:600; }
.tour-botones {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
}
.tour-dots { display:flex; gap:6px; justify-content:center; margin-top:14px; }
.tour-dots i {
  width:6px; height:6px; border-radius:50%; background:var(--line-strong);
  transition:background .2s var(--ease), transform .2s var(--spring);
}
.tour-dots i.actual { background:var(--rt-red); transform:scale(1.35); }

.tour-launch {
  display:flex; align-items:center; gap:10px; width:calc(100% - 12px); margin:0 6px;
  background:transparent; border:none; cursor:pointer; text-align:left;
  padding:9px 10px; border-radius:var(--r-md);
  font-family:var(--ui); font-size:12px; color:var(--ink-4);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.tour-launch:hover { background:var(--surface-2); color:var(--ink); }
.tour-launch svg { width:15px; height:15px; flex:none; opacity:.8; }

/* ═══════════════════════════════════════════════════════════════════════
   TOASTS — avisos que no interrumpen (reemplazan window.alert)
   ═══════════════════════════════════════════════════════════════════════ */
.toasts {
  position:fixed; right:20px; bottom:20px; z-index:120;
  display:flex; flex-direction:column; gap:10px; max-width:min(380px, calc(100vw - 40px));
}
.toast {
  padding:13px 16px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ink-4);
  box-shadow:var(--shadow-lg); font-size:13px; line-height:1.55; color:var(--ink-2);
  animation:rise .3s var(--ease) backwards;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast strong { color:var(--ink); font-weight:600; }
.toast-ok { border-left-color:var(--ok); }
.toast-error { border-left-color:var(--rt-red); }
.toast-warn { border-left-color:var(--warn); }
.toast.salir { opacity:0; transform:translateY(8px); }

/* ═══════════════════════════════════════════════════════════════════════
   MODO DEMOSTRACIÓN + SEMÁFORO CRÍTICO + MARCA DE IA
   ═══════════════════════════════════════════════════════════════════════ */
.demo-banner {
  margin-bottom:16px; padding:12px 18px;
  background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--r-lg);
  font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.demo-banner code {
  font-family:var(--mono); font-size:11.5px;
  background:var(--surface); padding:2px 7px; border-radius:6px;
}
.chip.critico .dot { animation:pulso 1.4s var(--ease) infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   MEDIA INTEL — monitoreo de medios, nativo (console/media-intel.js)
   Reusa .kpi, .card, .chip, .pill y .tbl; aquí solo va lo que no existía.
   ═══════════════════════════════════════════════════════════════════════ */
.mi-filtros {
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:18px;
  background:var(--surface-2); border-radius:var(--r-md);
}
.mi-campo { display:flex; flex-direction:column; gap:5px; }
.mi-campo label {
  font-size:9.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4);
}
.mi-campo select {
  appearance:none; -webkit-appearance:none;
  font-family:var(--ui); font-size:12.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:7px 30px 7px 13px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239298a9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.mi-campo select:focus { outline:none; border-color:var(--rt-red); }
.mi-conteo { margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.mi-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:940px) { .mi-duo { grid-template-columns:1fr; } }

/* Listas de titulares */
.mi-lista { list-style:none; margin-top:12px; }
.mi-lista li { padding:11px 0; border-top:1px solid var(--line); }
.mi-lista li:first-child { border-top:0; }
.mi-lista a {
  font-family:var(--display); font-size:14.5px; font-weight:500; line-height:1.4;
  color:var(--ink); text-decoration:none; display:block;
}
.mi-lista a:hover { color:var(--rt-red); }
.mi-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:7px; font-size:11.5px; color:var(--ink-3); }

/* Barras horizontales */
.mi-barras { display:flex; flex-direction:column; gap:7px; }
.mi-barra { display:grid; grid-template-columns:minmax(90px,150px) 1fr 34px; gap:10px; align-items:center; }
.mi-barra-lbl {
  font-size:12px; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mi-barra-track { height:7px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; }
.mi-barra-track i { display:block; height:100%; border-radius:var(--r-pill); transition:width .5s var(--spring); }
.mi-barra-n { font-size:12px; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }

/* Tiles de severidad */
.mi-sev { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.mi-sev-tile {
  padding:14px 16px; background:var(--surface-2); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.mi-sev-tile.hot { background:var(--rt-red-soft); }
.mi-sev-tile .n {
  font-family:var(--display); font-weight:300; font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums;
}
@media (max-width:720px) { .mi-sev { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   RESUMEN DEL CLIENTE — gráfica de sentimiento mensual
   ═══════════════════════════════════════════════════════════════════════ */
.chart-leyenda { display:flex; gap:18px; margin-top:10px; font-size:12px; color:var(--ink-3); }
.chart-leyenda span { display:inline-flex; align-items:center; gap:6px; }
.chart-leyenda i { width:10px; height:10px; border-radius:50%; display:inline-block; }

@media (max-width:720px) {
  .bienvenida-hola { font-size:27px; }
  .clientes-grid { grid-template-columns:1fr; }
  .tour-card { left:16px !important; right:16px; bottom:16px; top:auto !important; width:auto; }
}

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

@media print {
  .side, .theme-toggle, .head-actions, .topbar,
  .tour, .toasts, .demo-banner { display:none; }
  .main { margin-left:0; }
  body { background:#fff; color:#000; }
  section, .card, .accion { box-shadow:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ARTY AI COUNCIL — el espacio de los agentes (console/arty.js)
   ═══════════════════════════════════════════════════════════════════════ */
.arty-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px;
}
.arty-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  text-align:left; width:100%; appearance:none; -webkit-appearance:none;
  font-family:inherit; font-size:inherit; line-height:1.5; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px;
  transition:transform .25s var(--spring), box-shadow .25s var(--ease), border-color .16s var(--ease);
  animation:rise .45s var(--ease) backwards;
}
.arty-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.arty-avatar { border-radius:50%; display:block; }
.arty-avatar-lg { flex:none; }
.arty-nombre { font-family:var(--display); font-weight:600; font-size:15px; line-height:1.3; }
.arty-esp {
  font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4);
}
.arty-pie { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.arty-cabecera { display:flex; gap:18px; align-items:flex-start; }
.arty-desc { font-size:13px; color:var(--ink-2); line-height:1.6; margin-top:8px; max-width:70ch; }

.arty-consulta {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:14px;
  animation:rise .4s var(--ease) backwards;
}
.arty-pregunta {
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
  padding:10px 14px; background:var(--surface-2); border-radius:var(--r-sm);
  border-left:3px solid var(--line-strong);
}
.arty-pregunta b { color:var(--ink); }
.arty-respuesta { margin-top:12px; font-size:13.5px; line-height:1.7; color:var(--ink-2); }
.arty-fuentes { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ═══════════════════════════════════════════════════════════════════════
   RADAR EJECUTIVO — los 5 tiles del RFQ (tab Radar)
   ═══════════════════════════════════════════════════════════════════════ */
.radar-tiles {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:16px;
}
@media (max-width:1100px) { .radar-tiles { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:720px)  { .radar-tiles { grid-template-columns:1fr; } }
.radar-tile {
  padding:14px 16px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.radar-tile .rt-lbl {
  font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:7px;
}
.radar-tile .rt-val {
  font-family:var(--display); font-weight:500; font-size:19px; line-height:1.25;
}
.radar-tile .rt-sub { font-size:11px; color:var(--ink-4); margin-top:4px; }
.radar-tile.estado-verde { border-left:4px solid var(--ok); }
.radar-tile.estado-ambar { border-left:4px solid var(--warn); }
.radar-tile.estado-rojo  { border-left:4px solid var(--rt-red); background:var(--rt-red-soft); }

/* Chip de categoría del Radar (positive/momentum/issue/crisis) */
.chip.momentum { color:var(--rt-blue); background:var(--rt-blue-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   TEXTO FORMATEADO (.ft) — la salida de los agentes, legible: encabezados,
   listas y párrafos en lugar de texto plano corrido
   ═══════════════════════════════════════════════════════════════════════ */
.ft { white-space:normal; }
.ft .ft-p { margin:0 0 8px; }
.ft .ft-h {
  display:flex; align-items:baseline; gap:8px;
  margin:16px 0 6px; font-size:13px; font-weight:650; color:var(--ink-1);
  letter-spacing:.01em;
}
.ft .ft-h:first-child { margin-top:4px; }
.ft .ft-caps { font-size:11.5px; letter-spacing:.08em; text-transform:none; }
.ft .ft-num {
  flex:none; min-width:20px; height:20px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:6px; font-size:11px; font-weight:600;
  background:var(--rt-blue-soft); color:var(--ink-1);
}
.ft .ft-sub { margin:12px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink-1); }
.ft-lista { margin:0 0 10px; padding-left:18px; }
.ft-lista li { margin:3px 0; line-height:1.6; }
.ft-lista .ft-lista { margin:2px 0 2px; }

/* ── Opciones del Council en el Radar ─────────────────────────────────── */
.delib-opciones { display:grid; gap:10px; margin-top:14px; }
.delib-opcion {
  border:1px solid var(--linea, rgba(120,120,140,.18)); border-radius:12px;
  padding:12px 14px; background:color-mix(in srgb, currentColor 2%, transparent);
}
.delib-opcion-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.delib-opcion .btn { margin-top:8px; }
.delib-riesgo { color:var(--ink-3); font-size:12.5px; }
.delib-incierto { border-left:3px solid #C99A2E; padding-left:12px; }

/* ═══════════════════════════════════════════════════════════════════════
   LEYENDAS — qué significa cada color, tier y notificación, plegado por
   defecto para no robar espacio a la operación
   ═══════════════════════════════════════════════════════════════════════ */
.leyenda {
  margin:14px 0 18px; border:1px solid var(--linea, rgba(120,120,140,.18));
  border-radius:12px; background:color-mix(in srgb, currentColor 2%, transparent);
  font-size:12.5px; color:var(--ink-2);
}
.leyenda summary {
  cursor:pointer; padding:10px 14px; font-weight:600; color:var(--ink-3);
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  list-style:none; display:flex; align-items:center; gap:8px; user-select:none;
}
.leyenda summary::-webkit-details-marker { display:none; }
.leyenda summary::before { content:'▸'; font-size:10px; transition:transform .15s; }
.leyenda[open] summary::before { transform:rotate(90deg); }
.leyenda-cuerpo { padding:2px 14px 14px; display:grid; gap:14px; }
@media (min-width: 880px) { .leyenda-cuerpo { grid-template-columns:1fr 1fr; } }
.leyenda-grupo .leyenda-titulo {
  font-weight:650; color:var(--ink-1); font-size:12px; margin-bottom:6px;
}
.leyenda-fila { display:flex; align-items:baseline; gap:8px; margin:5px 0; line-height:1.5; }
.leyenda-fila > .chip, .leyenda-fila > .pill { flex:none; }
.leyenda-fila .badge { position:static; flex:none; }

/* ── Editor de pilares ────────────────────────────────────────────────── */
.pilar-edit {
  border:1px solid var(--linea, rgba(120,120,140,.18)); border-radius:12px;
  padding:14px; margin:0 0 12px; background:color-mix(in srgb, currentColor 2%, transparent);
}
.pilar-edit-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pilar-edit .campo { margin-top:10px; }