/* ============================================================
   STARGATE — CAPA EDITORIAL PREMIUM v6.0 "VANGUARD"
   ------------------------------------------------------------
   Sistema de composición de nivel consultoría estratégica:
   cabecera editorial, retículas partidas, paneles de consola,
   tarjetas de principio, métricas monumentales, matrices,
   mapas de calor, diagramas de núcleo y cronogramas de riel.

   REGLAS DE ORO (heredadas del núcleo):
     · Sin color-mix() ni backdrop-filter DENTRO de #deck
       (la exportación con html2canvas debe ser pixel-fiel).
     · Todo se dimensiona con --u (1% de la altura del deck)
       y --t (escala tipográfica), nunca con px absolutos.
     · Solo se usan tokens (--accent, --line, --text…), por lo
       que la capa hereda automáticamente las 5 plantillas
       y los temas día / noche.

   Se carga DESPUÉS de css/style.css y ANTES de css/editor.css.
   ============================================================ */

/* ============================================================
   1. TOKENS DE LA CAPA EDITORIAL
   ============================================================ */
:root{
  --font-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Superficies derivadas del color de página → funcionan en
     día, noche y en las 5 plantillas sin redefinir nada. */
  --pnl:rgba(var(--page-rgb),.46);
  --pnl-solid:rgba(var(--page-rgb),.82);
  --pnl-line:rgba(var(--text-rgb),.10);
  --pnl-line-2:rgba(var(--text-rgb),.16);

  --ink-a:rgba(var(--accent-rgb),1);
  --wash:rgba(var(--accent-rgb),.08);
  --wash-2:rgba(var(--accent-rgb),.14);
  --wash-crimson:rgba(var(--crimson-rgb),.11);
  --wash-amber:rgba(var(--amber-rgb),.11);

  --r-lg:14px;
  --r-md:10px;
  --r-sm:6px;
}

body[data-theme="day"]{
  --pnl:rgba(var(--page-rgb),.72);
  --pnl-solid:rgba(255,255,255,.92);
  --pnl-line:rgba(var(--text-rgb),.13);
  --pnl-line-2:rgba(var(--text-rgb),.20);
}

/* La plantilla editorial de papel prefiere esquinas rectas */
body[data-template="platinum"]{ --r-lg:3px; --r-md:2px; --r-sm:2px; }

/* ============================================================
   2. TIPOGRAFÍA TÉCNICA — el sello "de vanguardia"
   ------------------------------------------------------------
   Los rótulos, contadores y etiquetas pasan a monoespaciada con
   tracking amplio. Es el detalle que separa un deck genérico de
   uno de sala de mando.
   ============================================================ */
.mono,
.slide .kicker,
.deck-slug,
.panel-title,
.panel-stat,
.pc-n,
.m-lbl,
.stat .s-lbl,
.chip,
.matrix thead th,
.rail-tl .rt-ph,
.heat-lbl,
.kan-col > .kan-h,
.tree-node small,
.data-table th{
  font-family:var(--font-mono);
  font-feature-settings:"tnum" 1,"zero" 1;
}

/* Kicker refinado: mono, tracking ancho, sin barra pesada */
.slide .kicker{
  font-size:clamp(8px,calc(var(--u) * 1.36 * var(--t)),15px);
  letter-spacing:.34em;
  font-weight:500;
  color:var(--accent);
  text-transform:uppercase;
  gap:.9em;
}
.slide .kicker::before{
  width:1.6em;height:1px;
  box-shadow:none;
  opacity:.75;
}

/* Título editorial: más apretado y con mejor equilibrio de línea */
.slide h2{
  letter-spacing:-.028em;
  line-height:1.02;
  max-width:26ch;
}
body[data-ratio="16-9"] .slide h2{max-width:22ch}

/* ============================================================
   3. CABECERA EDITORIAL DE LÁMINA
   ------------------------------------------------------------
   <header class="s-head">
     <p class="kicker">…</p>
     <h2>…</h2>
     <p class="head-note">…</p>   ← opcional, a la derecha
   </header>
   ============================================================ */
.s-head{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--u) * .85);
  padding-bottom:calc(var(--u) * 1.5);
  border-bottom:1px solid var(--pnl-line);
}
body[data-ratio="16-9"] .s-head.with-note{
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:end;
  column-gap:calc(var(--u) * 3);
}
.s-head .kicker{grid-column:1}
.s-head h2{grid-column:1}
.s-head .head-note{
  grid-column:1;
  font-size:clamp(9px,calc(var(--u) * 1.5 * var(--t)),18px);
  line-height:1.45;
  color:var(--text-dim);
  max-width:42ch;
}
body[data-ratio="16-9"] .s-head.with-note .head-note{
  grid-column:2;grid-row:1 / span 2;
  text-align:right;align-self:end;
  padding-bottom:.35em;
}

/* ============================================================
   4. RETÍCULA PARTIDA — el patrón dominante del deck
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--u) * 2.4);
  align-items:stretch;
}
.split.w-left  {grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.split.w-right {grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
.split.w-narrow{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.split.thirds  {grid-template-columns:repeat(3,minmax(0,1fr))}

/* En vertical 9:16 todo se apila: una sola columna de lectura */
body[data-ratio="9-16"] .split,
body[data-ratio="9-16"] .split.w-left,
body[data-ratio="9-16"] .split.w-right,
body[data-ratio="9-16"] .split.w-narrow,
body[data-ratio="9-16"] .split.thirds{
  grid-template-columns:minmax(0,1fr);
  gap:calc(var(--u) * 1.6);
}
/* Los paneles de instrumentación son secundarios en vertical */
body[data-ratio="9-16"] .split .col-aside.hide-portrait{display:none}

.stack{
  display:flex;flex-direction:column;
  gap:calc(var(--u) * 1.15);
  min-width:0;
}
.stack.tight{gap:calc(var(--u) * .7)}
.stack.loose{gap:calc(var(--u) * 1.9)}
.stack.center{justify-content:center}

/* ============================================================
   5. PANEL DE CONSOLA — "instrumento" de la lámina
   ------------------------------------------------------------
   <section class="panel">
     <header class="panel-head">
       <span class="panel-title">Telemetría territorial</span>
       <span class="panel-stat live">En línea</span>
     </header>
     <div class="panel-body">…</div>
   </section>
   ============================================================ */
.panel{
  display:flex;flex-direction:column;
  gap:calc(var(--u) * 1.1);
  padding:calc(var(--u) * 1.8) calc(var(--u) * 1.9);
  background:var(--pnl);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-lg);
  min-width:0;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
body[data-theme="day"] .panel{box-shadow:0 6px 20px rgba(15,23,42,.07)}

.panel.flush{padding:calc(var(--u) * 1.4) calc(var(--u) * 1.5)}
.panel.plain{background:none;box-shadow:none}

.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2em;
  padding-bottom:calc(var(--u) * .9);
  border-bottom:1px solid var(--pnl-line);
}
.panel-title{
  font-size:clamp(7.5px,calc(var(--u) * 1.24 * var(--t)),14px);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.panel-stat{
  font-size:clamp(7px,calc(var(--u) * 1.12 * var(--t)),13px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;
  display:inline-flex;align-items:center;gap:.6em;
  white-space:nowrap;
}
.panel-stat.live::after{
  content:'';width:.5em;height:.5em;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.panel-stat.alert{color:var(--crimson)}
.panel-stat.alert::after{background:var(--crimson);box-shadow:0 0 8px var(--crimson)}

.panel-body{
  display:flex;flex-direction:column;
  gap:calc(var(--u) * 1.05);
  min-width:0;
}
.panel-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--u) * 1);
}
.panel-grid.thirds{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Sub-panel interior (caja dentro de la consola) */
.subpanel{
  background:rgba(var(--text-rgb),.035);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-md);
  padding:calc(var(--u) * 1.15) calc(var(--u) * 1.25);
  display:flex;flex-direction:column;gap:calc(var(--u) * .5);
  min-width:0;
}

/* ============================================================
   6. FILA-CARACTERÍSTICA con barra de acento (patrón maestro)
   ============================================================ */
.feat{
  position:relative;
  padding:calc(var(--u) * 1.35) calc(var(--u) * 1.5) calc(var(--u) * 1.35) calc(var(--u) * 1.9);
  background:rgba(var(--text-rgb),.035);
  border:1px solid var(--pnl-line);
  border-left:none;
  border-radius:0 var(--r-md) var(--r-md) 0;
  display:flex;flex-direction:column;gap:calc(var(--u) * .42);
  min-width:0;
  transition:background .3s ease,transform .3s ease;
}
.feat::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:calc(var(--u) * .32);min-width:2px;
  background:var(--accent);
  border-radius:2px 0 0 2px;
}
.feat:hover{background:rgba(var(--text-rgb),.06);transform:translateX(2px)}
.feat b{
  font-size:clamp(11px,calc(var(--u) * 2.02 * var(--t)),26px);
  font-weight:700;color:var(--text);line-height:1.18;letter-spacing:-.012em;
}
.feat span{
  font-size:clamp(8.5px,calc(var(--u) * 1.46 * var(--t)),18px);
  color:var(--text-dim);line-height:1.42;
}
.feat.c2::before{background:var(--accent-2)}
.feat.c3::before{background:var(--crimson)}
.feat.c4::before{background:var(--amber)}
.feat.c5::before{background:var(--emerald)}

/* ============================================================
   7. TARJETA DE PRINCIPIO — regla de acento superior
   ============================================================ */
.pcards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(var(--u) * 1.6);
}
/* En vertical, las tarjetas de principio se leen en dos columnas: seis
   tarjetas apiladas en una sola columna obligaban a comprimir la lámina
   hasta hacerla ilegible. Con dos columnas la densidad baja a la mitad
   y la tipografía conserva su tamaño natural. */
body[data-ratio="9-16"] .pcards{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--u) * 1.15);
}
/* Con 3 tarjetas o menos, una sola columna respira mejor */
body[data-ratio="9-16"] .pcards:has(.pcard:nth-child(3):last-child),
body[data-ratio="9-16"] .pcards:has(.pcard:nth-child(2):last-child),
body[data-ratio="9-16"] .pcards:has(.pcard:only-child){
  grid-template-columns:minmax(0,1fr);
}
body[data-ratio="9-16"] .pcard{
  padding:calc(var(--u) * 1.5) calc(var(--u) * 1.35);
  gap:calc(var(--u) * .5);
}

.pcard{
  position:relative;
  padding:calc(var(--u) * 1.9) calc(var(--u) * 1.7);
  background:linear-gradient(180deg,rgba(var(--text-rgb),.05),rgba(var(--text-rgb),.015));
  border:1px solid var(--pnl-line);
  border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  display:flex;flex-direction:column;gap:calc(var(--u) * .7);
  min-width:0;
}
.pcard::before{
  content:'';position:absolute;left:0;right:0;top:0;
  height:calc(var(--u) * .3);min-height:2px;
  background:var(--accent);
}
.pcard.c2::before{background:var(--accent-2)}
.pcard.c3::before{background:var(--crimson)}
.pcard.c4::before{background:var(--amber)}
.pcard .pc-n{
  font-size:clamp(7px,calc(var(--u) * 1.16 * var(--t)),13px);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.pcard.c2 .pc-n{color:var(--accent-2)}
.pcard.c3 .pc-n{color:var(--crimson)}
.pcard.c4 .pc-n{color:var(--amber)}
.pcard h3{
  font-size:clamp(12px,calc(var(--u) * 2.28 * var(--t)),30px);
  font-weight:700;line-height:1.14;letter-spacing:-.015em;
}
.pcard p{
  font-size:clamp(8.5px,calc(var(--u) * 1.48 * var(--t)),18px);
  color:var(--text-dim);line-height:1.45;
}

/* ============================================================
   8. MÉTRICA MONUMENTAL
   ============================================================ */
.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(var(--u) * 1.5);
}
.metrics.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics.two{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-ratio="9-16"] .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

.metric{
  position:relative;overflow:hidden;
  padding:calc(var(--u) * 2) calc(var(--u) * 1.6);
  background:linear-gradient(165deg,var(--wash),rgba(var(--text-rgb),.02));
  border:1px solid var(--pnl-line);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;
  gap:calc(var(--u) * .75);
  min-width:0;
}
.metric.alert{background:linear-gradient(165deg,var(--wash-crimson),rgba(var(--text-rgb),.02))}
.metric.amber{background:linear-gradient(165deg,var(--wash-amber),rgba(var(--text-rgb),.02))}

.metric .m-lbl{
  font-size:clamp(7px,calc(var(--u) * 1.16 * var(--t)),13px);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
}
.metric.alert .m-lbl{color:var(--crimson)}
.metric .m-num{
  font-size:clamp(26px,calc(var(--u) * 6.6 * var(--t)),96px);
  font-weight:900;line-height:.92;letter-spacing:-.045em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.06em;
}
.metric .m-unit{
  font-size:.36em;font-weight:800;letter-spacing:-.01em;
  color:var(--accent);
}
.metric.alert .m-unit{color:var(--crimson)}
.metric .m-rule{
  width:calc(var(--u) * 4.5);height:2px;
  background:var(--accent);border-radius:2px;
  margin:calc(var(--u) * .25) 0;
}
.metric.alert .m-rule{background:var(--crimson)}
.metric p{
  font-size:clamp(8.5px,calc(var(--u) * 1.46 * var(--t)),18px);
  color:var(--text-dim);line-height:1.4;
}

/* Estadística compacta (fila de 3 dentro de un panel) */
.stat-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(var(--u) * .9);
}
.stat{
  background:rgba(var(--text-rgb),.04);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-sm);
  padding:calc(var(--u) * 1) calc(var(--u) * 1.05);
  display:flex;flex-direction:column;gap:calc(var(--u) * .3);
  min-width:0;
}
.stat .s-lbl{
  font-size:clamp(6px,calc(var(--u) * 1.02 * var(--t)),12px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat .s-num{
  font-size:clamp(13px,calc(var(--u) * 2.7 * var(--t)),34px);
  font-weight:800;color:var(--text);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.stat .s-num.accent{color:var(--accent)}
.stat .s-num.alert{color:var(--crimson)}
.stat .s-foot{
  font-size:clamp(6.5px,calc(var(--u) * 1.06 * var(--t)),12px);
  color:var(--text-faint);line-height:1.3;
}

/* ============================================================
   9. CHIPS Y BANDERINES TÉCNICOS
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(6.5px,calc(var(--u) * 1.08 * var(--t)),12px);
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:.42em .8em;
  border:1px solid var(--pnl-line-2);
  border-radius:var(--r-sm);
  color:var(--text-dim);
  background:rgba(var(--text-rgb),.03);
}
.chip.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:var(--wash)}
.chip.alert{color:var(--crimson);border-color:rgba(var(--crimson-rgb),.42);background:var(--wash-crimson)}
.chip.amber{color:var(--amber);border-color:rgba(var(--amber-rgb),.42);background:var(--wash-amber)}

/* Banda de cierre / conclusión de lámina */
.closer{
  display:flex;align-items:center;gap:calc(var(--u) * 1.6);
  padding:calc(var(--u) * 1.3) calc(var(--u) * 1.7);
  background:var(--wash);
  border:1px solid rgba(var(--accent-rgb),.26);
  border-radius:var(--r-md);
}
.closer .cl-lbl{
  font-family:var(--font-mono);
  font-size:clamp(6.5px,calc(var(--u) * 1.1 * var(--t)),13px);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:600;flex:0 0 auto;
  max-width:30%;line-height:1.4;
}
.closer p{
  font-size:clamp(9px,calc(var(--u) * 1.62 * var(--t)),20px);
  color:var(--text-soft);line-height:1.45;
}
.closer p b{color:var(--text);font-weight:700}
.closer.alert{background:var(--wash-crimson);border-color:rgba(var(--crimson-rgb),.3)}
.closer.alert .cl-lbl{color:var(--crimson)}

/* ============================================================
   10. MATRIZ COMPARATIVA con columna destacada
   ============================================================ */
.matrix{
  width:100%;border-collapse:collapse;
  font-size:clamp(8px,calc(var(--u) * 1.44 * var(--t)),18px);
}
.matrix thead th{
  text-align:left;font-weight:600;
  padding:calc(var(--u) * 1) calc(var(--u) * 1.1);
  font-size:clamp(7px,calc(var(--u) * 1.16 * var(--t)),13px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);
  border-bottom:1px solid var(--pnl-line-2);
  vertical-align:bottom;
}
.matrix thead th.hero{
  color:var(--accent);
  font-size:clamp(9px,calc(var(--u) * 1.52 * var(--t)),18px);
  letter-spacing:.16em;font-weight:800;
  background:var(--wash-2);
  border-bottom:1px solid rgba(var(--accent-rgb),.42);
}
.matrix tbody th{
  text-align:left;font-weight:700;color:var(--text);
  padding:calc(var(--u) * 1.05) calc(var(--u) * 1.1);
  border-bottom:1px solid var(--pnl-line);
  font-size:clamp(9px,calc(var(--u) * 1.6 * var(--t)),20px);
  letter-spacing:-.01em;
}
.matrix tbody td{
  padding:calc(var(--u) * 1.05) calc(var(--u) * 1.1);
  color:var(--text-faint);line-height:1.36;
  border-bottom:1px solid var(--pnl-line);
  vertical-align:top;
}
.matrix tbody td.hero{
  color:var(--text);font-weight:600;
  background:var(--wash);
  border-bottom:1px solid rgba(var(--accent-rgb),.2);
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{border-bottom:none}
.matrix tbody td.hero:last-child{border-radius:0 0 var(--r-sm) var(--r-sm)}

/* ============================================================
   11. MAPA DE CALOR OPERATIVO
   ============================================================ */
.heat{display:flex;flex-direction:column;gap:calc(var(--u) * .55)}
.heat-row{display:grid;grid-template-columns:calc(var(--u) * 4.4) 1fr;gap:calc(var(--u) * .7);align-items:center}
.heat-lbl{
  font-size:clamp(6px,calc(var(--u) * 1.04 * var(--t)),12px);
  letter-spacing:.16em;color:var(--text-faint);font-weight:600;
}
.heat-cells{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:calc(var(--u) * .28)}
.heat-cells i{
  display:block;height:calc(var(--u) * 1.5);min-height:8px;
  border-radius:2px;
  background:rgba(var(--accent-rgb),calc(var(--v,3) / 10));
}
.heat-cells i.hot{background:var(--crimson);box-shadow:0 0 8px rgba(var(--crimson-rgb),.5)}
.heat-legend{
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:clamp(6px,calc(var(--u) * 1.02 * var(--t)),12px);
  letter-spacing:.14em;color:var(--text-faint);
  padding-top:calc(var(--u) * .5);
}
.heat-legend em{
  display:inline-block;width:calc(var(--u) * 1.9);height:calc(var(--u) * .8);
  min-height:5px;border-radius:2px;font-style:normal;
  background:rgba(var(--accent-rgb),calc(var(--v,3) / 10));
}
.heat-legend em.hot{background:var(--crimson)}

/* ============================================================
   12. TABLERO KANBAN ESTRATÉGICO
   ============================================================ */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .85)}
.kan-col{display:flex;flex-direction:column;gap:calc(var(--u) * .6);min-width:0}
.kan-col > .kan-h{
  font-size:clamp(6px,calc(var(--u) * 1.02 * var(--t)),12px);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
  padding-bottom:calc(var(--u) * .4);
  border-bottom:1px solid var(--pnl-line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kan-card{
  background:rgba(var(--text-rgb),.05);
  border:1px solid var(--pnl-line);
  border-left:2px solid var(--pnl-line-2);
  border-radius:var(--r-sm);
  padding:calc(var(--u) * .8) calc(var(--u) * .85);
  display:flex;flex-direction:column;gap:calc(var(--u) * .3);
  font-size:clamp(6.5px,calc(var(--u) * 1.22 * var(--t)),15px);
  color:var(--text-soft);line-height:1.28;
}
.kan-card small{
  font-family:var(--font-mono);
  font-size:.78em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.kan-card.hi{border-left-color:var(--crimson)}
.kan-card.hi small{color:var(--crimson)}
.kan-card.go{border-left-color:var(--accent)}
.kan-card.go small{color:var(--accent)}

/* ============================================================
   13. PILA DE PERMISOS EN CASCADA
   ============================================================ */
.perm{display:flex;flex-direction:column;gap:calc(var(--u) * .6)}
.perm-row{
  display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:calc(var(--u) * 1.05) calc(var(--u) * 1.2);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--wash-2),rgba(var(--text-rgb),.02));
  margin-left:calc(var(--d,0) * var(--u) * 2.6);
}
.perm-row .p-t{display:flex;flex-direction:column;gap:calc(var(--u) * .2);min-width:0}
.perm-row b{
  font-size:clamp(9px,calc(var(--u) * 1.62 * var(--t)),20px);
  font-weight:700;color:var(--text);line-height:1.15;
}
.perm-row span{
  font-size:clamp(7px,calc(var(--u) * 1.24 * var(--t)),15px);
  color:var(--text-faint);line-height:1.3;
}
.perm-row i{
  flex:0 0 auto;
  width:calc(var(--u) * 3);height:calc(var(--u) * 3);
  min-width:18px;min-height:18px;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.4);
  color:var(--accent);
  display:grid;place-items:center;
  font-size:clamp(7px,calc(var(--u) * 1.24 * var(--t)),15px);
  background:var(--wash);
}
.perm-row.dim{background:rgba(var(--text-rgb),.03)}
.perm-row.dim i{border-color:var(--pnl-line-2);color:var(--text-faint);background:none}

/* ============================================================
   14. DIAGRAMA DE NÚCLEO (hub & spoke)
   ============================================================ */
.hub{
  position:relative;
  width:100%;aspect-ratio:1 / .82;
  min-height:calc(var(--u) * 30);
}
.hub::before,
.hub::after{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.18);
  pointer-events:none;
}
.hub::before{width:62%;height:74%}
.hub::after{width:40%;height:48%;border-style:dashed;opacity:.6}

.hub-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:23%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15em;text-align:center;
  background:radial-gradient(circle at 38% 32%,rgba(var(--accent-rgb),.95),rgba(var(--accent2-rgb),.9));
  box-shadow:0 0 calc(var(--u) * 5) rgba(var(--accent-rgb),.45);
  z-index:2;
}
.hub-core b{
  font-size:clamp(8px,calc(var(--u) * 1.6 * var(--t)),20px);
  font-weight:800;letter-spacing:.06em;color:var(--accent-ink);line-height:1;
}
.hub-core span{
  font-family:var(--font-mono);
  font-size:clamp(5.5px,calc(var(--u) * .92 * var(--t)),11px);
  letter-spacing:.2em;color:var(--accent-ink);opacity:.8;
}
.hub-node{
  position:absolute;
  left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%);
  padding:calc(var(--u) * .75) calc(var(--u) * 1.1);
  background:var(--pnl-solid);
  border:1px solid var(--pnl-line-2);
  border-radius:var(--r-sm);
  font-size:clamp(7px,calc(var(--u) * 1.3 * var(--t)),16px);
  color:var(--text-soft);font-weight:600;
  white-space:nowrap;line-height:1.1;
  z-index:3;
}
.hub-node.on{border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}

/* ============================================================
   15. CRONOGRAMA DE RIEL HORIZONTAL
   ============================================================ */
.rail-tl{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(var(--u) * 1.5);
}
body[data-ratio="9-16"] .rail-tl{grid-template-columns:repeat(2,minmax(0,1fr))}
.rt{display:flex;flex-direction:column;gap:calc(var(--u) * .8);min-width:0;position:relative}
.rt-ph{
  font-size:clamp(6.5px,calc(var(--u) * 1.1 * var(--t)),13px);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.rt.c3 .rt-ph{color:var(--crimson)}
.rt-name{
  font-size:clamp(11px,calc(var(--u) * 2.16 * var(--t)),28px);
  font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-.018em;
}
.rt-dot{
  position:relative;height:calc(var(--u) * 2.4);
  display:flex;align-items:center;
}
.rt-dot::before{ /* riel */
  content:'';position:absolute;left:0;right:calc(var(--u) * -1.5);
  height:1px;background:rgba(var(--accent-rgb),.32);
}
.rt:last-child .rt-dot::before{right:0}
.rt.c3 .rt-dot::before{background:rgba(var(--crimson-rgb),.4)}
.rt-dot::after{ /* nodo */
  content:'';position:relative;z-index:2;
  width:calc(var(--u) * 1.7);height:calc(var(--u) * 1.7);
  min-width:10px;min-height:10px;border-radius:50%;
  border:2px solid var(--accent);
  background:var(--page);
  box-shadow:0 0 calc(var(--u) * 1.5) rgba(var(--accent-rgb),.55);
}
.rt.c3 .rt-dot::after{border-color:var(--crimson);box-shadow:0 0 calc(var(--u) * 1.5) rgba(var(--crimson-rgb),.55)}
.rt-list{
  display:flex;flex-direction:column;gap:calc(var(--u) * .55);
  padding:calc(var(--u) * 1.2) calc(var(--u) * 1.15);
  background:rgba(var(--text-rgb),.035);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-sm);
  list-style:none;
}
.rt.c3 .rt-list{background:var(--wash-crimson);border-color:rgba(var(--crimson-rgb),.24)}
.rt-list li{
  font-size:clamp(7.5px,calc(var(--u) * 1.34 * var(--t)),17px);
  color:var(--text-dim);line-height:1.3;
  padding-bottom:calc(var(--u) * .5);
  border-bottom:1px solid var(--pnl-line);
}
.rt-list li:last-child{border-bottom:none;padding-bottom:0}

/* ============================================================
   16. ÁRBOL DE ESTRUCTURA (jerarquía 4x4)
   ============================================================ */
.tree{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * .9)}
.tree-row{display:flex;justify-content:center;gap:calc(var(--u) * .7);width:100%}
.tree-node{
  flex:1 1 0;min-width:0;
  padding:calc(var(--u) * .7) calc(var(--u) * .5);
  text-align:center;
  background:rgba(var(--text-rgb),.05);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-sm);
  font-size:clamp(6px,calc(var(--u) * 1.14 * var(--t)),14px);
  color:var(--text-dim);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tree-node.root{
  background:var(--wash-2);border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent);font-weight:700;flex:0 1 62%;
}
.tree-link{
  width:1px;height:calc(var(--u) * 1.2);
  background:rgba(var(--accent-rgb),.3);
}

/* ============================================================
   17. MAQUETA DE DISPOSITIVO
   ============================================================ */
.phone{
  width:100%;max-width:calc(var(--u) * 26);
  margin-inline:auto;
  aspect-ratio:9 / 17.4;
  background:linear-gradient(170deg,rgba(var(--text-rgb),.09),rgba(var(--page-rgb),.9));
  border:1px solid var(--pnl-line-2);
  border-radius:calc(var(--u) * 2.2);
  padding:calc(var(--u) * 1.5) calc(var(--u) * 1.1);
  display:flex;flex-direction:column;gap:calc(var(--u) * .8);
  position:relative;
  box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0,0,0,.32);
}
.phone::before{ /* auricular */
  content:'';position:absolute;top:calc(var(--u) * .7);left:50%;
  transform:translateX(-50%);
  width:22%;height:calc(var(--u) * .4);min-height:3px;border-radius:99px;
  background:rgba(var(--text-rgb),.22);
}
.ph-bar{
  font-family:var(--font-mono);
  font-size:clamp(5.5px,calc(var(--u) * .96 * var(--t)),11px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  padding:calc(var(--u) * .5) calc(var(--u) * .6);
  background:var(--wash-2);border-radius:var(--r-sm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ph-block{
  background:rgba(var(--text-rgb),.05);
  border:1px solid var(--pnl-line);
  border-radius:var(--r-sm);
  padding:calc(var(--u) * .7);
  display:flex;flex-direction:column;gap:calc(var(--u) * .35);
  font-size:clamp(5.5px,calc(var(--u) * 1.02 * var(--t)),12px);
  color:var(--text-dim);line-height:1.25;
}
.ph-block .ph-k{display:flex;justify-content:space-between;gap:.5em;align-items:baseline}
.ph-block .ph-k b{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums}
.ph-block .ph-k b.alert{color:var(--crimson)}
.ph-cta{
  margin-top:auto;
  text-align:center;
  padding:calc(var(--u) * .75);
  border-radius:var(--r-sm);
  background:var(--wash-2);
  border:1px solid rgba(var(--accent-rgb),.4);
  color:var(--accent);font-weight:700;
  font-size:clamp(6px,calc(var(--u) * 1.1 * var(--t)),13px);
}
.ph-cta.ghost{background:rgba(var(--text-rgb),.04);border-color:var(--pnl-line);color:var(--text-faint)}

/* ============================================================
   18. VISUALIZACIONES SVG (anillo, curva, columnas)
   ============================================================ */
.viz{width:100%;height:auto;display:block;overflow:visible}
.viz .v-track{fill:none;stroke:rgba(var(--text-rgb),.10);stroke-width:6}
.viz .v-arc{
  fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.55));
}
.viz .v-arc.c3{stroke:var(--crimson);filter:drop-shadow(0 0 6px rgba(var(--crimson-rgb),.5))}
.viz .v-grid{stroke:rgba(var(--text-rgb),.09);stroke-width:1}
.viz .v-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .v-line.c3{stroke:var(--crimson);stroke-dasharray:4 3}
.viz .v-area{fill:rgba(var(--accent-rgb),.14);stroke:none}
.viz .v-bar{fill:var(--accent)}
.viz .v-bar.dim{fill:rgba(var(--accent-rgb),.42)}
.viz .v-txt{
  fill:var(--text-faint);
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.12em;
}
.viz .v-num{
  fill:var(--text);font-family:var(--font);
  font-size:26px;font-weight:800;letter-spacing:-.03em;
}
.viz .v-num.accent{fill:var(--accent)}
.viz .v-cap{
  fill:var(--text-faint);font-family:var(--font-mono);
  font-size:8px;letter-spacing:.24em;
}

/* Anillo con dato al centro */
.dial-wrap{position:relative;display:grid;place-items:center;width:100%}
.dial-mid{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1em;text-align:center;pointer-events:none;
}
.dial-mid .d-lbl{
  font-family:var(--font-mono);
  font-size:clamp(6px,calc(var(--u) * 1.02 * var(--t)),12px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint);
}
.dial-mid .d-num{
  font-size:clamp(24px,calc(var(--u) * 6 * var(--t)),82px);
  font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   19. PORTADA EDITORIAL
   ============================================================ */
.slide.cover .slide-inner{gap:calc(var(--u) * 2.4)}
.cover-mark{
  font-size:clamp(38px,calc(var(--u) * 11 * var(--t)),170px);
  font-weight:900;letter-spacing:-.035em;line-height:.88;
  color:var(--text);
}
.cover-rule{
  width:calc(var(--u) * 9);height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.cover-sub{
  font-size:clamp(12px,calc(var(--u) * 2.5 * var(--t)),34px);
  font-weight:600;color:var(--text);letter-spacing:-.015em;line-height:1.2;
}
.cover-note{
  font-size:clamp(9px,calc(var(--u) * 1.6 * var(--t)),20px);
  color:var(--text-dim);line-height:1.5;max-width:46ch;
}
.cover-badge{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-family:var(--font-mono);
  font-size:clamp(7px,calc(var(--u) * 1.2 * var(--t)),14px);
  letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  padding:.6em 1.1em;border-radius:var(--r-sm);
  border:1px solid rgba(var(--accent-rgb),.4);
  background:var(--wash);color:var(--accent);
}
/* Rejilla de módulos de portada */
.cover-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * .9)}
body[data-ratio="9-16"] .cover-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
.cover-mods .cm{
  padding:calc(var(--u) * .95) calc(var(--u) * 1.05);
  border:1px solid var(--pnl-line);
  border-left:2px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(var(--text-rgb),.035);
  font-size:clamp(7px,calc(var(--u) * 1.32 * var(--t)),16px);
  color:var(--text-soft);font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;
}
.cover-mods .cm.c2{border-left-color:var(--accent-2)}
.cover-mods .cm.c3{border-left-color:var(--crimson)}
.cover-mods .cm.c4{border-left-color:var(--amber)}
.cover-mods .cm.c5{border-left-color:var(--emerald)}

/* Cierre de deck (última lámina, centrada) */
.slide.finale .slide-inner{align-items:center;text-align:center}
.slide.finale .cover-note{max-width:56ch;margin-inline:auto}
.slide.finale .cover-rule{margin-inline:auto}
.slide.finale .cover-badge{align-self:center}

/* ============================================================
   20. PIE DE MARCA PERSISTENTE (slug del deck)
   ============================================================ */
.deck-slug{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5em;
  padding:0 5% calc(var(--u) * 2.2);
  font-size:clamp(6.5px,calc(var(--u) * 1.06 * var(--t)),12px);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;
  pointer-events:none;
}
.deck-slug .sl-r{font-variant-numeric:tabular-nums;letter-spacing:.3em}

/* Reserva de aire inferior: el contenido nunca debe quedar bajo
   la cápsula de navegación ni bajo el pie de marca. Se ajusta al
   espacio que realmente ocupan ambos elementos (cápsula a 5.2u +
   su alto) para no desperdiciar altura útil de composición. */
body[data-ratio="9-16"] .slide{padding-bottom:calc(var(--u) * 13)}
body[data-ratio="16-9"] .slide{padding-bottom:calc(var(--u) * 12.5)}

/* ------------------------------------------------------------
   Contención de elementos de proporción fija en vertical 9:16
   ------------------------------------------------------------
   El diagrama de núcleo, el anillo y la maqueta de teléfono se
   dimensionan por relación de aspecto: al ocupar el 100 % del
   ancho en una lámina estrecha devoraban la altura y obligaban a
   comprimir toda la composición. Se acotan a un ancho máximo
   proporcional para que el texto conserve su tamaño natural.
   ------------------------------------------------------------ */
body[data-ratio="9-16"] .hub{
  max-width:calc(var(--u) * 38);
  margin-inline:auto;
  min-height:0;
}
body[data-ratio="9-16"] .dial-wrap{
  max-width:calc(var(--u) * 27);
  margin-inline:auto;
}
body[data-ratio="9-16"] .phone{max-width:calc(var(--u) * 21)}
/* Los SVG se limitan por ALTURA: al escalar por ancho, una figura
   vertical (200×250) se comía casi la mitad de la lámina. */
body[data-ratio="9-16"] .viz{
  width:auto;max-width:100%;
  max-height:calc(var(--u) * 25);
  margin-inline:auto;
}

/* En vertical los paneles ceden aire interior: el ancho es escaso y
   el relleno generoso robaba altura al contenido de lectura. */
body[data-ratio="9-16"] .panel{
  padding:calc(var(--u) * 1.35) calc(var(--u) * 1.4);
  gap:calc(var(--u) * .85);
}
body[data-ratio="9-16"] .panel-body{gap:calc(var(--u) * .8)}
body[data-ratio="9-16"] .subpanel{padding:calc(var(--u) * .9) calc(var(--u) * 1)}
body[data-ratio="9-16"] .metric{padding:calc(var(--u) * 1.4) calc(var(--u) * 1.25)}
body[data-ratio="9-16"] .feat{
  padding:calc(var(--u) * 1.1) calc(var(--u) * 1.25)
          calc(var(--u) * 1.1) calc(var(--u) * 1.55);
}

/* Las métricas monumentales usan cifras enormes pensadas para 16:9.
   En vertical se moderan para no dominar la altura de la lámina. */
body[data-ratio="9-16"] .metric .m-num{
  font-size:clamp(22px,calc(var(--u) * 4.9 * var(--t)),64px);
}
body[data-ratio="9-16"] .metrics{gap:calc(var(--u) * 1.1)}
body[data-ratio="9-16"] .slide-inner{gap:calc(var(--u) * 1.7)}

/* En vertical, el kanban se lee en una sola columna */
body[data-ratio="9-16"] .kanban{grid-template-columns:minmax(0,1fr);gap:calc(var(--u) * 1.1)}
body[data-ratio="9-16"] .kan-card{font-size:clamp(9px,calc(var(--u) * 1.32 * var(--t)),16px)}
body[data-ratio="9-16"] .kan-col > .kan-h{font-size:clamp(8px,calc(var(--u) * 1.14 * var(--t)),13px)}
body[data-ratio="9-16"] .heat-cells{grid-template-columns:repeat(7,minmax(0,1fr))}
body[data-ratio="9-16"] .heat-cells i:nth-child(n+8){display:none}

/* La barra de navegación pasa a cápsula flotante para no
   competir con el pie de marca. */
.deck-foot{
  left:50%;right:auto;bottom:calc(var(--u) * 5.2);
  transform:translateX(-50%);
  width:auto;max-width:86%;
  padding:calc(var(--u) * .8) calc(var(--u) * 1.4);
  border-radius:999px;
  background:var(--chrome);
  border:1px solid var(--line);
  box-shadow:var(--shadow-chrome);
  gap:calc(var(--u) * 1.2);
}
.oracle-trigger{bottom:calc(var(--u) * 5.2)}

/* ============================================================
   21. APAGADO DE NEÓN EN MODO DÍA
   ============================================================ */
body[data-theme="day"] .panel-stat.live::after,
body[data-theme="day"] .rt-dot::after,
body[data-theme="day"] .hub-core,
body[data-theme="day"] .heat-cells i.hot{box-shadow:none}
body[data-theme="day"] .viz .v-arc,
body[data-theme="day"] .viz .v-arc.c3{filter:none}
body[data-theme="day"] .phone{box-shadow:0 10px 26px rgba(15,23,42,.12)}
body[data-theme="day"] .metric,
body[data-theme="day"] .pcard{box-shadow:0 4px 14px rgba(15,23,42,.05)}

/* ============================================================
   22. ANIMACIÓN DE ENTRADA DE LOS NUEVOS COMPONENTES
   ============================================================ */
.slide.is-active .feat,
.slide.is-active .pcard,
.slide.is-active .metric,
.slide.is-active .rt,
.slide.is-active .perm-row,
.slide.is-active .cover-mods .cm{
  animation:riseIn .66s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(180ms + var(--i,0) * 80ms);
}
.slide.is-active .hub-node{
  animation:popIn .6s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(260ms + var(--i,0) * 70ms);
}
.slide.is-active .matrix tbody tr{
  animation:slideInLeft .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(200ms + var(--i,0) * 70ms);
}

/* ============================================================
   23. FIDELIDAD EN EXPORTACIÓN
   ------------------------------------------------------------
   El escenario de exportación re-compone la lámina sin el
   cromado de la app: el pie de marca se replica ahí.
   ============================================================ */
.export-deck .export-foot{
  font-family:var(--font-mono);
  letter-spacing:.26em;text-transform:uppercase;
}
.export-deck .feat:hover{transform:none}