/* suizo.css — capa de componentes. Cárgalo DESPUÉS de styles.css y tokens.css.
   ---------------------------------------------------------------------------
   Convierte el sistema de cajas de styles.css en un sistema de aire. No cambia
   ningún nombre de clase: las 23 páginas siguen funcionando sin tocar su HTML.

   La regla de fondo: un grupo de contenido se marca con espacio y tipografía,
   no con tres elementos gráficos a la vez (borde + fondo + sombra). Ver
   docs/DESIGN.md §4.

   Todo lo que acá se pone a `none` es tinta que no representa un dato. */

/* ═══ BASE ═════════════════════════════════════════════════════════════════ */
body {
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container { max-width:1060px; padding:0 var(--sp-6) var(--sp-24); }

.num,.s-val,.stat,td,.precio,.proj-val,.aporte,.c-big,.cc-v,.m-v,.conv-chip b {
  font-variant-numeric:tabular-nums;
}

/* ═══ COLOR SEMÁNTICO DE VALORES KPI — fuente única ════════════════════════
   Manual de colores del portal: verde = bueno/ganancia, rojo = malo/egreso/
   pérdida, ámbar = atención. Está acá (compartido) para cambiarlo en UN solo
   lugar y que se aplique en TODOS los módulos. Cada módulo solo agrega la clase
   al valor según su significado. */
.yoy-up   { color:var(--green); }
.yoy-down { color:var(--red); }
.yoy-warn { color:var(--warn); }
/* Tarjetas/celdas con explicación al pasar el mouse (title). */
.fc-stat[title],.pf-tile[title],.cxc-metric[title],.vz-stat[title],.stat[title],[data-kpi][title] { cursor:help; }

/* ═══ CABECERA Y NAVEGACIÓN ════════════════════════════════════════════════ */
header { padding:var(--sp-8) 0 var(--sp-4); border-bottom:1px solid var(--rule); }
.logo { font-size:var(--fs-base); font-weight:700; letter-spacing:0; }
.logo small { font-size:var(--fs-xs); margin-top:2px; }
.header-meta { font-size:var(--fs-sm); }

nav.tabs { border-bottom:1px solid var(--border); margin-bottom:var(--sp-12); gap:var(--sp-2); }
nav.tabs a,.nav-dropdown-btn {
  font-size:var(--fs-sm); font-weight:400; padding:var(--sp-3) var(--sp-2);
  letter-spacing:.01em;
}
/* El verde es semántico (estado de la señal) — la pestaña activa usa el acento */
nav.tabs a.active,.nav-dropdown-btn.active { font-weight:600; border-bottom-color:var(--accent); }
.nav-dropdown-menu a.active,.nav-dropdown-menu button.active { color:var(--accent); }
.nav-dropdown-menu { border-radius:var(--r-md); box-shadow:0 12px 30px rgba(0,0,0,.14); }

.lock-btn,.tema-btn,.back-btc,.share-btn,.rng-preset,.ssm-esc {
  border-radius:var(--r-sm); font-weight:500;
}
.lock-btn.unlocked { border-color:var(--accent); color:var(--accent); }

/* ═══ EL CAMBIO CENTRAL — LAS CAJAS SE VUELVEN AIRE ════════════════════════ */
.card {
  background:none; border:none; border-radius:0; padding:0;
  margin:0 0 var(--sp-16); animation:none;
}
/* Encabezado de sección: etiqueta chica en versalitas sobre filete fuerte.
   Toda la jerarquía la hace la tipografía — no hay marco que la sostenga. */
.card h2,h2 {
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--rule);
  margin-bottom:var(--sp-4);
}
.h2-sub { font-size:var(--fs-base); color:var(--muted); margin-bottom:var(--sp-6); max-width:var(--measure); }
h3 { font-size:var(--fs-md); font-weight:600; letter-spacing:-.01em; margin:var(--sp-8) 0 var(--sp-2); }
p.body,p.body-muted { font-size:var(--fs-base); max-width:var(--measure); margin-bottom:var(--sp-4); }

/* Etiquetas dentro de un encabezado de sección (ej. "FORWARD", "NO OFICIAL"):
   siguen informando, pero sin marco — basta el acento. */
h2 span[style] { border:none !important; padding:0 !important; color:var(--accent) !important; }

/* ═══ LOGO DE SÚPER — modo contorno en tema oscuro ═════════════════════════ */
/* styles.css engancha el modo contorno a [data-theme="onix"] y ["dark"], que
   ya no existen: sin esto el logo quedaría RELLENO rojo sobre fondo oscuro,
   justo el contraste que ese código evitaba a propósito. Se replica la regla
   para "noche" (y "claro" hereda el relleno rojo de :root, que es correcto). */
html:root[data-theme="noche"]:not([data-logo="red"]) { --logo-brand:#f7931a; }
html:root[data-theme="noche"]:not([data-logo="red"]) .super-logo .brand {
  fill:none; stroke:var(--logo-brand); stroke-width:7;
}
html:root[data-theme="claro"] .logo-dot { display:none; }  /* en claro el logo ya es rojo */

/* Todo lo que era una cajita ahora es contenido suelto sobre el papel */
.medida,.stat,.cred,.proj-card,.tool-card,.conv-chip,.conv-cell,.mc-stat,
.playbook-card,.controls,.sig-resumen,.onboard,.subscribe,.share-panel,
.chip,.pb-row,.ten-field input,.ten-field select {
  background:none; box-shadow:none;
}
.medida,.stat,.cred,.proj-card,.mc-stat,.conv-cell,.sig-resumen,.pb-row {
  border:none; border-radius:0; padding:var(--sp-3) 0;
}
/* Sin saltitos al pasar el mouse: el movimiento era del lenguaje de las cards */
.stat:hover,.proj-card:hover,.cred:hover,.medida:hover,.tool-card:hover,.chip:hover {
  transform:none; border-color:inherit;
}
.stat,.proj-card,.cred,.medida { transition:color .15s ease; }

/* ═══ HERO — el veredicto es la tesis de la página ═════════════════════════ */
.hero { text-align:left; padding:var(--sp-12) 0 0; }
.hero .fecha {
  font-size:var(--fs-xs); letter-spacing:.13em; color:var(--muted); font-weight:600;
}
.traffic-wrap { justify-content:flex-start; gap:var(--sp-8); margin:var(--sp-6) 0 0; }
.traffic { animation:none; border-radius:var(--r-lg); box-shadow:none; border-color:transparent; }
.sem-label {
  font-size:var(--fs-3xl); font-weight:700; letter-spacing:-.038em; line-height:.94;
}
.sem-label small {
  font-size:var(--fs-md); font-weight:400; color:var(--muted);
  margin-top:var(--sp-4); max-width:42ch; line-height:1.45;
}
.hero .precio {
  font-size:var(--fs-xl); font-weight:400; letter-spacing:-.025em; margin-top:var(--sp-8);
}
.hero .precio .precio-lbl {
  font-size:var(--fs-xs); letter-spacing:.13em; font-weight:600; margin-top:var(--sp-2);
}
.hero-detalle {
  max-width:none; margin:var(--sp-12) 0 0; padding-top:var(--sp-8);
  border-top:1px solid var(--border);
}
.fuerza { margin:var(--sp-6) 0 0; max-width:var(--measure); font-size:var(--fs-sm); }
.live-strip { justify-content:flex-start; margin-top:var(--sp-6); font-size:var(--fs-xs); }

.headline { text-align:left; padding:var(--sp-12) 0 0; }
.headline h1 {
  font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.032em; line-height:1.06;
  max-width:17ch; margin:0;
}
.headline .hl-sub {
  font-size:var(--fs-md); margin:var(--sp-4) 0 0; max-width:52ch; margin-left:0; margin-right:0;
}
.cta-chips { justify-content:flex-start; margin:var(--sp-6) 0 0; gap:var(--sp-6); }
.chip {
  border:none; border-radius:0; padding:0; font-size:var(--fs-sm); font-weight:500;
  color:var(--accent); border-bottom:1px solid var(--border);
  padding-bottom:2px; border-radius:0;
}
.chip:hover { border-bottom-color:var(--accent); }

/* ═══ MEDICIONES — filas comparables, no tarjetas ══════════════════════════ */
.grid { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0 var(--sp-12); }
/* El aporte se ancla arriba a la derecha de la fila: así los nueve números
   quedan en una columna que se lee de un vistazo (small multiples), en vez de
   flotar sueltos sobre cada nombre. */
.medida {
  position:relative; padding:var(--sp-3) 4.2em var(--sp-3) 0;
  border-bottom:1px solid var(--border); cursor:pointer;
}
.medida:hover { border-bottom-color:var(--muted); }
.medida.sig-g,.medida.sig-r { border-color:var(--border); }
.medida .emoji { display:none; }              /* los iconos SVG y el número ya informan */
.medida .nombre { font-size:var(--fs-base); font-weight:400; margin:0; }
.medida .estado { font-size:var(--fs-sm); }
.medida .peso { font-size:var(--fs-xs); margin-top:var(--sp-1); }
.med-top { position:absolute; top:var(--sp-3); right:0; margin:0; display:block; }
.aporte {
  background:none !important; padding:0; min-width:0; text-align:right;
  font-family:var(--mono); font-size:var(--fs-md); font-weight:600;
}
.aporte.ap-g { color:var(--ok); } .aporte.ap-r { color:var(--bad); } .aporte.ap-n { color:var(--muted); }

/* ═══ CIFRAS SUELTAS (stats, credibilidad, proyecciones) ═══════════════════ */
.stats,.cred-grid,.proj-grid,.mc-stats,.conv-out {
  gap:var(--sp-8) var(--sp-12);
}
.cred,.proj-card,.stat,.mc-stat,.conv-cell { text-align:left; }
/* Versalitas solo para etiquetas cortas. Las de .cred son frases descriptivas
   ("señales registradas en vivo desde que arrancó la validación forward") y en
   mayúsculas espaciadas se vuelven ilegibles: esas van en caja baja. */
.stat .s-label,.proj-card .p-h,.mc-stat .m-l,.conv-cell .cc-l {
  font-size:var(--fs-xs); letter-spacing:.13em; font-weight:600; color:var(--muted);
  text-transform:uppercase;
}
.cred .c-lab {
  font-size:var(--fs-sm); letter-spacing:0; font-weight:400; color:var(--muted);
  text-transform:none; margin-top:var(--sp-2); max-width:34ch; line-height:1.45;
}
.stat .s-val,.mc-stat .m-v,.conv-cell .cc-v {
  font-size:var(--fs-lg); font-weight:400; letter-spacing:-.02em; margin-top:var(--sp-2);
}
.cred .c-big,.proj-card .proj-val {
  font-size:var(--fs-xl); font-weight:400; letter-spacing:-.025em; margin:var(--sp-2) 0 0;
}
.cred .c-lab,.proj-card .p-h { order:-1; }
.cred .cred-i { position:static; float:right; }
.proj-card.sel { box-shadow:none; border:none; }
.proj-card.sel .proj-val { color:var(--accent); }

/* ═══ TABLAS — densidad Tufte ══════════════════════════════════════════════ */
table { font-size:var(--fs-sm); }
th {
  font-size:var(--fs-xs); letter-spacing:.13em; font-weight:600;
  border-bottom:1px solid var(--rule); padding:0 var(--sp-2) var(--sp-2) 0;
}
td { padding:var(--sp-2) var(--sp-2) var(--sp-2) 0; border-bottom:1px solid var(--border); }
th:first-child,td:first-child { padding-left:0; }
td.r,th.r { text-align:right; padding-right:0; }
td.num,td.r { font-family:var(--mono); }
.tag { background:none !important; padding:0; font-weight:600; font-size:var(--fs-sm); border-radius:0; }
.tag-g { color:var(--ok); } .tag-r { color:var(--bad); }
.tag-y { color:var(--warn); } .tag-n { color:var(--muted); }

/* ═══ CONTROLES ════════════════════════════════════════════════════════════ */
.controls { border:none; border-radius:0; padding:0 0 var(--sp-6); gap:var(--sp-6); }
.ctrl label,.ten-field label {
  font-size:var(--fs-xs); letter-spacing:.13em; font-weight:600;
}
.ctrl input,.ctrl select,.ten-field input,.ten-field select,.conv-row input,.conv-row select {
  background:var(--surface); border:1px solid transparent; border-radius:var(--r-sm);
  font-weight:400; font-size:var(--fs-base);
}
.ctrl input:focus,.ctrl select:focus,.ten-field input:focus,.conv-row input:focus {
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
}
/* Todos los deslizadores, no solo los de .ctrl — el verde es semántico */
input[type=range] { accent-color:var(--accent); }
.rng-preset { background:none; border-color:var(--border); }
.rng-preset.on { background:none; border-color:var(--accent); color:var(--accent); }
.dualrange .dr-fill,.dualrange input[type=range]::-webkit-slider-thumb { background:var(--accent); }
.dualrange input[type=range]::-moz-range-thumb { background:var(--accent); }

/* ═══ BOTONES — uno primario por vista ═════════════════════════════════════ */
.subscribe button,#nx-save-btn {
  background:var(--accent); color:var(--bg); border:none;
  border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-base);
  padding:var(--sp-2) var(--sp-6);
}
.subscribe button:hover { filter:brightness(1.12); }
.share-btn { border-color:var(--border); font-weight:500; }
.share-btn:hover { border-color:var(--accent); color:var(--accent); }
.share-x,.share-wsp { border-color:var(--border); }

/* ═══ RESTO ════════════════════════════════════════════════════════════════ */
.playbook-card { border:none; border-radius:0; padding:0; }
.playbook-card.accion-verde,.playbook-card.accion-roja { background:none; }
.playbook-card.accion-verde .pb-action { color:var(--ok); }
.playbook-card.accion-roja .pb-action { color:var(--bad); }
.pb-action { font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; }
.pb-frase { font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; }
.pb-row { border-bottom:1px solid var(--border); border-radius:0; padding:var(--sp-2) 0; }
.pb-rows { gap:0; }
.pb-demo-tag { background:none; color:var(--muted); padding:0; font-weight:600; letter-spacing:.13em; }
.pb-escenarios summary { color:var(--accent); }

.tool-grid { gap:0 var(--sp-12); }
.tool-card {
  border:none; border-radius:0; padding:var(--sp-4) 0;
  border-bottom:1px solid var(--border); transition:color .15s ease;
}
.tool-card:hover { border-bottom-color:var(--muted); }
.tool-card:hover .t-title { color:var(--accent); }
.tool-card .t-icon { font-size:var(--fs-md); margin-bottom:var(--sp-1); opacity:.55; }
.tool-card .t-title { font-size:var(--fs-base); font-weight:600; }
.tool-card .t-sub { font-size:var(--fs-sm); }

.wow { background:none; border:none; border-radius:0; padding:0; text-align:left; }
.wow .wow-big { font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; }
.onboard { border:none; border-radius:0; padding:var(--sp-3) 0; text-align:left;
  border-bottom:1px solid var(--border); }
.onboard a { color:var(--accent); font-weight:600; }
.subscribe { border:none; border-radius:0; padding:var(--sp-8) 0 0; text-align:left;
  border-top:1px solid var(--border); }
.share-signal { text-align:left; }
.share-panel { border:none; border-radius:0; padding:var(--sp-6) 0 0; animation:none; }
.share-panel .share-row { justify-content:flex-start; }
.share-panel canvas { margin:0 0 var(--sp-4); border-radius:var(--r-md); }
.conv-chip { border:none; border-radius:0; padding:0; font-size:var(--fs-sm); }
.conv-strip { gap:var(--sp-6); }
.f-badge { background:none !important; padding:0; font-weight:600; letter-spacing:0; }
.f-badge.f-g { color:var(--ok); } .f-badge.f-r { color:var(--bad); } .f-badge.f-y { color:var(--warn); }
ul.clean li { border-bottom:1px solid var(--border); padding:var(--sp-2) 0; font-size:var(--fs-base); }
.nota { font-size:var(--fs-sm); margin-top:var(--sp-4); max-width:var(--measure); }
footer { border-top:1px solid var(--border); margin-top:var(--sp-16); padding-top:var(--sp-6);
  font-size:var(--fs-sm); text-align:left; }
.tooltip { border-radius:var(--r-md); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.ssm-panel { border-radius:var(--r-md); }
.ssm-row.sel { background:var(--surface); outline:none; }

/* Foco visible en todo lo navegable por teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}

/* ═══ SPARKLINES (técnica Tufte) ═══════════════════════════════════════════ */
/* Sparkline dentro de cada medición: alto de una línea de texto, sin ejes ni
   etiquetas. Las nueve juntas funcionan como small multiples. */
.medida-spark { margin:var(--sp-2) 0 var(--sp-1); }
.medida-spark .spark { height:22px; }
/* El del puntaje total es un poco más alto: es el agregado, no un sumando */
.sig-spark { max-width:420px; margin:var(--sp-4) 0 0; }
.sig-spark .spark { height:34px; }

.spark { display:block; width:100%; height:40px; overflow:visible; }
.spark-line { fill:none; stroke:var(--text); stroke-width:1.4; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; }
.spark-area { fill:var(--text); opacity:.07; }
.spark-end { fill:var(--accent-mark); }
.spark-zero { stroke:var(--border); stroke-width:1; }
.spark-lab { display:flex; justify-content:space-between; font-size:var(--fs-xs);
  color:var(--muted); margin-bottom:var(--sp-1); }
.spark-lab b { color:var(--text); font-family:var(--mono); font-weight:600; }

@media (max-width:600px) {
  .container { padding:0 var(--sp-4) var(--sp-16); }
  .sem-label { font-size:var(--fs-2xl); }
  .headline h1 { font-size:var(--fs-xl); }
  .hero .precio { font-size:var(--fs-lg); }
  .grid,.tool-grid { grid-template-columns:1fr; }
  .stats,.cred-grid,.proj-grid { gap:var(--sp-6); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }