/* ═══════════════════════════════════════════════════════════════════════════
   GOVERNA · INNOVACIÓN PÚBLICA — sistema visual del producto.

   Bundle autónomo, sin build. Tokens tomados del manual de marca
   (docs/design-system/governa-identidad.html), idénticos al producto de
   inteligencia del entorno MX. Dos registros, un sistema:
     · EDITORIAL sobre papel (Newsreader serif) donde se lee.
     · OPERATIVO sobre tinta / superficie donde se trabaja (densidad).
   Color reservado al ESTADO y a la SEÑAL — nunca decorativo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Materiales */
  --ink:          #0D1F30;
  --ink-2:        #12293C;
  --ink-3:        #183246;
  --grafito:      #22303B;
  --papel:        #F6F4F0;
  --papel-hondo:  #ECE8E1;
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF7;
  --line:         #D9D3C8;
  --line-soft:    #E7E2D8;
  --line-ink:     rgba(255,255,255,.10);
  --line-ink-2:   rgba(255,255,255,.17);

  /* Señal / marca */
  --senal:        #0F7A82;
  --senal-bright: #16A6AC;
  --senal-soft:   #E4F1F1;
  --brass:        #B8823C;
  --brass-soft:   #85591F;

  /* Estados (color = dato) */
  --st-critico:   #C0392B;
  --st-alto:      #D97706;
  --st-medio:     #B8823C;
  --st-activo:    #0F7A82;
  --st-bajo:      #6B7A85;
  --st-ok:        #2E7D5B;

  /* Texto sobre papel */
  --tx:    #14232F;
  --tx-2:  #4A5A66;
  --tx-3:  #7C8A93;
  /* Texto sobre tinta */
  --tx-on:   #F4F1EA;
  --tx-on-2: #A9B7C1;
  --tx-on-3: #6E808D;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --rail: 256px;
  --maxw: 1620px;
  --r:    9px;
  --r-sm: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tx);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--senal-soft); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
svg { display: block; }

/* ── Layout maestro ────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--ink);
  color: var(--tx-on);
  border-right: 1px solid var(--line-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-brand { padding: 20px 20px 14px; border-bottom: 1px solid var(--line-ink); }
.rail-brand .logo { display: flex; align-items: center; gap: 10px; }
.rail-brand .iso { flex: 0 0 auto; }
.rail-brand .name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .01em; line-height: 1; }
.rail-brand .sub { margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-on-3); }

.rail-nav { flex: 1; padding: 12px 10px 24px; }
.nav-group { margin-top: 14px; }
.nav-group-h { font-family: var(--mono); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--tx-on-3); padding: 6px 12px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--tx-on-2); font-size: 13.5px; font-weight: 450;
  transition: background .14s, color .14s;
}
.nav-item .ic { flex: 0 0 auto; opacity: .85; }
.nav-item .cnt { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--tx-on-3); }
.nav-item:hover { background: var(--ink-2); color: var(--tx-on); }
.nav-item.on { background: var(--ink-3); color: #fff; }
.nav-item.on .ic { opacity: 1; color: var(--senal-bright); }
.nav-item.on .cnt { color: var(--tx-on-2); }

.rail-foot { padding: 12px; border-top: 1px solid var(--line-ink); }
.rail-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.rail-user .av { width: 30px; height: 30px; border-radius: 50%; background: var(--senal); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.rail-user .u-name { font-size: 12.5px; font-weight: 500; color: var(--tx-on); }
.rail-user .u-rol { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-on-3); }
.rail-logout { margin-top: 8px; width: 100%; text-align: left; padding: 7px 10px; font-size: 11.5px; color: var(--tx-on-3); border-radius: var(--r-sm); }
.rail-logout:hover { background: var(--ink-2); color: var(--tx-on-2); }

/* ── Main ───────────────────────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 26px; background: var(--papel);
  border-bottom: 1px solid var(--line);
}
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--tx-3); display: flex; align-items: center; gap: 8px; }
.crumbs .cur { color: var(--tx); }
.searchbox { position: relative; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 12px; min-width: 280px; }
.searchbox .ic { color: var(--tx-3); }
.searchbox input { border: none; outline: none; background: none; font-size: 13px; width: 100%; color: var(--tx); }
.searchbox .k { font-family: var(--mono); font-size: 10px; color: var(--tx-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.spacer { flex: 1; }
.tb-pais { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 11px; background: var(--surface); font-size: 12.5px; font-weight: 500; }
.tb-pais .flag { font-size: 14px; }
.tb-pais .ic { color: var(--tx-3); }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--senal); color: var(--senal); border-radius: var(--r); padding: 7px 13px; font-size: 12.5px; font-weight: 600; transition: background .14s, color .14s; }
.tb-btn:hover { background: var(--senal); color: #fff; }

/* Hamburguesa — sólo en móvil (el rail se vuelve cajón). */
.tb-menu { display: none; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r); color: var(--tx); background: var(--surface); }
.rail-scrim { display: none; }

#viewHost { padding: 30px 26px 80px; max-width: var(--maxw); width: 100%; }

/* ── Móvil: el rail se convierte en cajón lateral ─────────────────────────
   Antes se quedaba en 256px (ahogaba el contenido). Ahora es un cajón off-canvas
   con hamburguesa; al navegar, render() quita `rail-open` y el cajón se cierra. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(86vw, 300px);
    z-index: 60; transform: translateX(-100%); transition: transform .22s ease;
  }
  body.rail-open .rail { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45); }
  .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.rail-open .rail-scrim { opacity: 1; pointer-events: auto; }
  .tb-menu { display: inline-grid; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .searchbox { display: none; }
  #viewHost { padding: 22px 16px 72px; }
}

/* ── Tipografía / bloques ──────────────────────────────────────────────── */
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--senal); }
.eyebrow.mut { color: var(--tx-3); }
.page-h { margin-top: 8px; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; max-width: 22ch; }
.page-lede { margin-top: 14px; font-size: 16px; color: var(--tx-2); max-width: 68ch; line-height: 1.55; }
.sec-h { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.005em; }
.sec-sub { font-size: 13.5px; color: var(--tx-2); margin-top: 4px; max-width: 70ch; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 34px 0 16px; }
.hr { height: 1px; background: var(--line); border: none; margin: 30px 0; }

/* ── Cards / paneles ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1100px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.card.pad-lg { padding: 22px; }
.card.click { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card.click:hover { border-color: var(--senal); box-shadow: 0 4px 18px -12px rgba(13,31,48,.28); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.card-title { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.18; margin-top: 3px; }
.card-body { font-size: 13.5px; color: var(--tx-2); margin-top: 8px; line-height: 1.5; }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.stat .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-3); }
.stat .val { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; margin-top: 9px; }
.stat .val small { font-size: 15px; color: var(--tx-3); font-family: var(--sans); font-weight: 500; }
.stat .foot { font-size: 12px; color: var(--tx-2); margin-top: 8px; }
.stat .delta { font-family: var(--mono); font-size: 11px; }
.up { color: var(--st-ok); } .down { color: var(--st-critico); } .flat { color: var(--tx-3); }

/* ── Chips / pills / badges ────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; font-size: 11.5px; color: var(--tx-2); background: var(--surface); }
.chip.on { border-color: var(--senal); color: var(--senal); background: var(--senal-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; }
.dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }
.dot.r { border-radius: 50%; }

.badge-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; }
.st-critico { color: var(--st-critico); } .bg-critico { background: var(--st-critico); }
.st-alto { color: var(--st-alto); } .bg-alto { background: var(--st-alto); }
.st-medio { color: var(--st-medio); } .bg-medio { background: var(--st-medio); }
.st-activo { color: var(--st-activo); } .bg-activo { background: var(--st-activo); }
.st-bajo { color: var(--st-bajo); } .bg-bajo { background: var(--st-bajo); }
.st-ok { color: var(--st-ok); } .bg-ok { background: var(--st-ok); }

/* Estado de conexión de fuentes */
.conn { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; }
.conn.viva { color: var(--st-ok); background: rgba(46,125,91,.10); }
.conn.conector { color: var(--senal); background: var(--senal-soft); }
.conn.mapeada { color: var(--st-alto); background: rgba(217,119,6,.10); }
.conn.pend { color: var(--st-bajo); background: rgba(107,122,133,.10); }

/* Procedencia epistémica */
.proc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.proc .dot { width: 6px; height: 6px; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface-2); }
.tbl .num { font-family: var(--mono); text-align: right; }
.tbl.card-tbl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

/* ── Barras / medidores ────────────────────────────────────────────────── */
.bar { height: 7px; border-radius: 100px; background: var(--papel-hondo); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 100px; background: var(--senal); }
.barrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 12px; }
.barrow .bl { font-size: 12.5px; color: var(--tx); }
.barrow .bv { font-family: var(--mono); font-size: 12px; color: var(--tx-2); }
.barrow .bar { grid-column: 1 / -1; }

/* ── Timeline / cambios (antes → cambio → después) ─────────────────────── */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--senal); }
.tl-item.sig::before { background: var(--brass); border-color: var(--brass); }
.tl-when { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.tl-what { font-size: 14px; font-weight: 500; margin-top: 2px; }
.tl-delta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.tl-delta .cell { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12px; }
.tl-delta .cell .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); display: block; margin-bottom: 3px; }
.tl-delta .arr { color: var(--senal); }
.tl-delta .cell.antes { background: var(--surface-2); }
.tl-delta .cell.despues { background: var(--senal-soft); border-color: var(--senal); }

/* ── Bandas oscuras (registro tinta dentro del producto) ───────────────── */
.ink-band { background: var(--ink); color: var(--tx-on); border-radius: var(--r); padding: 24px; }
.ink-band .eyebrow { color: var(--senal-bright); }
.ink-band .sec-h, .ink-band .card-title { color: #fff; }
.ink-band .sec-sub, .ink-band .card-body { color: var(--tx-on-2); }
.ink-band .card { background: var(--ink-2); border-color: var(--line-ink); }
.ink-band .card-k { color: var(--tx-on-3); }

/* ── Arco del proceso (stepper) ────────────────────────────────────────── */
.arco { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.arco .step { flex: 1 1 0; min-width: 92px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 11px; background: var(--surface); position: relative; }
.arco .step .n { font-family: var(--mono); font-size: 9px; color: var(--tx-3); }
.arco .step .s { font-size: 12px; font-weight: 600; margin-top: 3px; }
.arco .step.done { background: var(--senal-soft); border-color: var(--senal); }
.arco .step.now { background: var(--ink); color: #fff; border-color: var(--ink); }
.arco .step.now .n { color: var(--senal-bright); }

/* ── Split reto (inteligencia) ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.aside-card { position: sticky; top: 82px; min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; }
/* Campo para escribir el problema (Retos · empezar con inteligencia) */
.prob-input { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--tx); font-family: var(--sans); font-size: 14px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
.prob-input:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 3px var(--senal-soft); }
.prob-input::placeholder { color: var(--tx-3); }

/* ── Nodo / red de actores (SVG host) ──────────────────────────────────── */
.net { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.net text { font-family: var(--sans); }

/* ── Metodología flow ──────────────────────────────────────────────────── */
.flow { display: flex; flex-direction: column; gap: 2px; }
.flow .fstep { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.flow .fstep:last-child { border-bottom: none; }
.flow .fnum { font-family: var(--serif); font-size: 22px; color: var(--senal); line-height: 1; }
.flow .fh { font-size: 14.5px; font-weight: 600; }
.flow .fd { font-size: 13px; color: var(--tx-2); margin-top: 4px; }

/* ── Acceso (login) — MODELO ÚNICO GOVERNA ────────────────────────────────
   Mismo modelo que la plataforma de Inteligencia Legislativa (`.acceso-*`): panel
   de tinta con isotipo a la izquierda + formulario de filete a la derecha. Que
   los accesos de todos los productos se vean iguales es la regla del dueño. */
.acceso-ov { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1fr 1fr; background: var(--papel); }
.acceso-brand { background: var(--ink); color: var(--tx-on); padding: clamp(36px, 4.5vw, 76px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.acceso-brand::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(ellipse 100% 80% at 80% 10%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 100% 80% at 80% 10%,#000 20%,transparent 75%); }
.acceso-brand > * { position: relative; z-index: 1; }
.acceso-brand .ab-top { position: absolute; top: clamp(36px, 4.5vw, 76px); left: clamp(36px, 4.5vw, 76px); display: flex; align-items: center; gap: 13px; }
.acceso-brand .ab-top .bw b { font-family: var(--serif); font-weight: 600; font-size: 19px; color: #fff; letter-spacing: .01em; display: block; }
.acceso-brand .ab-top .bw span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-on-3); margin-top: 4px; display: block; }
.acceso-brand .ab-mid h2 { color: #fff; font-family: var(--serif); font-size: clamp(30px, 3vw, 46px); line-height: 1.1; font-weight: 500; letter-spacing: -.018em; max-width: 15ch; }
.acceso-brand .ab-mid p { color: var(--tx-on-2); font-size: 15px; line-height: 1.55; margin-top: 18px; max-width: 38ch; }
.acceso-brand .ab-arc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.acceso-brand .ab-arc span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-on-3); border: 1px solid var(--line-ink); border-radius: 100px; padding: 4px 10px; }
.acceso-brand .ab-foot { position: absolute; bottom: clamp(36px, 4.5vw, 76px); left: clamp(36px, 4.5vw, 76px); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-on-3); display: flex; align-items: center; gap: 9px; }
.acceso-brand .ab-foot .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--senal-bright); }
.acceso-form-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 4.5vw, 76px); overflow-y: auto; }
.acceso-form { width: 100%; max-width: 400px; }
.acceso-form .af-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--senal); }
.acceso-form h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.015em; margin: 10px 0 6px; }
.acceso-form .af-sub { font-size: 13.5px; color: var(--tx-2); margin-bottom: 28px; }
.acceso-field { margin-bottom: 22px; }
.acceso-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 7px; }
.acceso-field input { width: 100%; border: none; border-bottom: 1.5px solid var(--line); background: transparent; padding: 9px 2px; font-size: 15px; font-family: var(--sans); color: var(--tx); outline: none; transition: border-color .15s; }
.acceso-field input:focus { border-bottom-color: var(--senal); }
.acceso-field input::placeholder { color: var(--tx-3); }
.acceso-btn { width: 100%; height: 48px; background: var(--ink); color: #fff; border: none; border-radius: 3px; font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; letter-spacing: .01em; transition: background .15s; margin-top: 6px; }
.acceso-btn:hover { background: var(--ink-3); }
.acceso-err { font-size: 12.5px; color: var(--st-critico); margin-top: 12px; min-height: 16px; }
.acceso-demos { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.acceso-demos .d-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.acceso-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 9px; transition: border-color .14s, background .14s; }
.acceso-demo:hover { border-color: var(--senal); background: var(--surface); }
.acceso-demo .dn { font-size: 12.5px; font-weight: 500; color: var(--tx); }
.acceso-demo .dr { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-3); }
@media (max-width: 860px) {
  .acceso-ov { grid-template-columns: 1fr; }
  .acceso-brand { padding: 30px 24px; min-height: 34vh; justify-content: flex-start; gap: 20px; }
  .acceso-brand .ab-top, .acceso-brand .ab-foot { position: static; }
  .acceso-brand .ab-mid h2 { font-size: 24px; }
  .acceso-brand .ab-mid p, .acceso-brand .ab-arc, .acceso-brand .ab-foot { display: none; }
}

/* ── Utilidades ────────────────────────────────────────────────────────── */
.muted { color: var(--tx-2); }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.note { background: var(--surface-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--brass); border-radius: var(--r-sm); padding: 12px 14px; font-size: 12.5px; color: var(--tx-2); }
.note b { color: var(--tx); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; font-size: 13px; }
.kv .k { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3); padding-top: 2px; }
.kv .v { color: var(--tx); }
.link { color: var(--senal); border-bottom: 1px solid transparent; font-weight: 500; }
.link:hover { border-color: var(--senal); }
.back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.back:hover { color: var(--senal); }

/* ── Motor de contexto (7 capas) ───────────────────────────────────────── */
.ctx { margin-top: 12px; }
.ctx-layer { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.ctx-layer:first-child { border-top: none; }
.ctx-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.ctx-v { font-size: 13.5px; color: var(--tx); margin-top: 5px; line-height: 1.5; }
.ctx-fuente { margin-top: -4px; margin-bottom: 4px; }
.ctx-list { list-style: none; margin-top: 6px; }
.ctx-list li { font-size: 13px; color: var(--tx-2); padding: 4px 0 4px 16px; position: relative; }
.ctx-list li::before { content: "→"; position: absolute; left: 0; color: var(--senal); }
.ctx-dec { border-top: 2px solid var(--senal); background: var(--senal-soft); margin: 8px -18px -18px; padding: 12px 18px 16px; border-radius: 0 0 var(--r) var(--r); }
.ctx-dec .ctx-list li::before { content: "◆"; font-size: 9px; top: 6px; }
.rels { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.rel-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: var(--r-sm); border: 1px solid transparent; }
.rel-row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.rel-dir { font-family: var(--mono); color: var(--senal); flex: 0 0 auto; }
.rel-node { font-size: 12.5px; font-weight: 600; color: var(--tx); min-width: 0; overflow-wrap: anywhere; }
.rel-rel { font-size: 11.5px; color: var(--tx-2); min-width: 0; overflow-wrap: anywhere; }
/* meta (fuente · fecha) cae a su propia línea cuando la fila se estrecha, en vez de desbordar el recuadro */
.rel-meta { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--tx-3); text-align: right; flex: 1 0 auto; overflow-wrap: anywhere; }
@media (max-width: 520px) { .rel-meta { display: none; } }

/* ── Vistas de universo: cobertura + guía (ago-2026) ─────────────────────── */
.big-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--tx); margin: 8px 0 6px; }
.funnel { display: flex; flex-direction: column; gap: 6px; }
.fn-row { display: grid; grid-template-columns: 210px 96px minmax(0,1fr); gap: 14px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.fn-et { font-weight: 600; font-size: 13.5px; color: var(--tx); }
.fn-v { font-family: var(--serif); font-size: 22px; color: var(--senal); }
.fn-v.nd { font-family: var(--mono); font-size: 10.5px; color: var(--tx-3); letter-spacing: .04em; align-self: center; }
.fn-n { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px){ .fn-row { grid-template-columns: 1fr; gap: 4px; } }
.guia-arc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 720px){ .guia-arc { grid-template-columns: 1fr; } }
.guia-step { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.gs-n { font-family: var(--mono); font-size: 12px; color: var(--senal); flex: 0 0 auto; }
.gs-t { font-weight: 600; font-size: 14px; color: var(--tx); }
.gs-d { margin-top: 3px; }
.src-list { display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px; }
.src-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; align-items: baseline; padding: 8px 10px; border-radius: var(--r-sm); }
.src-row:hover { background: var(--surface-2); }
.sr-main { min-width: 0; overflow-wrap: anywhere; }
.sr-meta { grid-column: 1; }
.src-estado { grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.src-estado.e-preparada { background: var(--senal-soft); color: var(--senal); }
.src-estado.e-identificada { background: var(--surface-2); color: var(--tx-3); }

/* ── Dictamen · motor de análisis profundo (ago-2026) ────────────────────── */
.dictamen { border: 1px solid var(--senal); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.dic-head { padding: 18px 20px; background: var(--senal-soft); border-bottom: 1px solid var(--line); }
.dic-lede { font-family: var(--serif); font-size: 18px; color: var(--tx); margin-top: 6px; line-height: 1.35; }
.dic-sec { display: grid; grid-template-columns: 46px minmax(0,1fr); border-top: 1px solid var(--line-soft); }
.dic-sec:first-of-type { border-top: none; }
.dic-n { font-family: var(--mono); font-size: 11px; color: var(--tx-3); padding: 16px 0 0 20px; }
.dic-body { padding: 14px 20px 16px 0; min-width: 0; }
.dic-t { font-weight: 600; font-size: 14px; color: var(--tx); margin-bottom: 8px; }
.dic-verdict { margin-top: 8px; padding: 8px 12px; border-left: 2px solid var(--senal); background: var(--senal-soft); font-size: 13px; color: var(--tx); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.dic-list { list-style: none; margin: 0; padding: 0; }
.dic-list li { font-size: 13px; color: var(--tx-2); padding: 4px 0; line-height: 1.5; overflow-wrap: anywhere; }
.ep { display: inline-block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; border-radius: 3px; padding: 1px 5px; vertical-align: middle; }
.dic-hip, .dic-op { padding: 10px 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.dic-chain { display: flex; flex-direction: column; gap: 3px; }
.dc-link { display: grid; grid-template-columns: 118px 130px minmax(0,1fr); gap: 10px; align-items: baseline; padding: 5px 8px; border-radius: var(--r-sm); }
.dc-link:hover { background: var(--surface-2); }
.dc-est { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.dc-name { font-size: 12px; font-weight: 600; color: var(--tx); }
.dc-val { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px){ .dc-link { grid-template-columns: 1fr; gap: 1px; } }
.dic-decision .dic-body { background: var(--senal-soft); }
.dl { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 6px 14px; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.dl:first-child { border-top: none; }
.dl-k { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dl-v { font-size: 13px; color: var(--tx); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px){ .dl { grid-template-columns: 1fr; gap: 2px; } .dic-sec { grid-template-columns: 34px minmax(0,1fr); } .dic-n { padding-left: 12px; } }
.dic-conf { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dcf-num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--senal); }
.dcf-txt { display: flex; flex-direction: column; }
.dic-rb { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 720px){ .dic-rb { grid-template-columns: 1fr; } }
.dic-rb-col { min-width: 0; }