/* ============================================================
   ELIA · APP — MODO PAPEL (decisión CEO 29-jul)
   La app deja el modo oscuro y adopta la piel papel (como la landing).
   Fuente de verdad de estructura/copy/piel:
     docs/preview-dashboard-claro.html   (HOY)
     docs/preview-historia-detalle.html  (Ruta/Acciones/Lupa)
     docs/preview-historias-lista.html   (lista curada)
     docs/preview-narrativa.html         (espejo + índice + ADN)
   EXCEPCIÓN: el Espejo de la narrativa es el único bloque marino oscuro.
   Todo hex canónico vive en elia-tokens.css (prueba del hex del brandkit).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800&family=Cormorant:ital,wght@0,500;0,600;1,500;1,600&family=Work+Sans:wght@400;500;600&display=swap');
@import 'elia-tokens.css';

/* Alias cortos → tokens del brandkit (para copiar los previews sin inventar hex). */
:root {
  --paper: var(--elia-paper);            /* #FBF9F5 */
  --paper-2: var(--elia-paper-2);        /* #F4F0E7 */
  --card: var(--elia-card);              /* #FFF */
  --border: var(--elia-paper-border);    /* #E4DDD0 */
  --linea: var(--elia-linea);            /* #EDE7DA */
  --tinta: var(--elia-tinta);            /* #1C2A3A */
  --tinta-mute: var(--elia-tinta-mute);  /* #5A6B7E */
  --azul: var(--elia-marino-border);     /* #3A5476 */
  --marino-700: var(--elia-marino-700);  /* espejo oscuro */
  --oro-300: var(--elia-oro-300);
  --oro-400: var(--elia-oro-400);
  --oro-500: var(--elia-oro-500);
  --oro-600: var(--elia-oro-600);
  --verde: var(--elia-positivo);
  --garnet: var(--elia-negativo);
  --alerta: var(--elia-alerta);
  --crisis: var(--elia-crisis);          /* #8B1E38 */
  --ed: var(--elia-font-editorial);
  --ui: var(--elia-font-ui);
  /* Gutter lateral responsivo de las vistas (dashboard/onboarding). Da aire en
     celular y se topa en pantallas grandes para no desperdiciar espacio. Sustituye
     los insets laterales fijos del contenido. ~22.5px @375, hasta 32px en grande. */
  --gutter: clamp(20px, 6vw, 32px);
  /* tints cálidas (colores del brandkit a alpha — patrón §8.5) */
  --tint-crisis:  rgba(139, 30, 56, .06);
  --tint-alerta:  rgba(222, 154, 44, .16);
  --tint-garnet:  rgba(192, 64, 92, .10);
  --tint-verde:   rgba(46, 139, 107, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--elia-paper-backdrop); /* backdrop cálido fuera del "teléfono" en desktop */
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  color: var(--tinta);
}
button { font-family: var(--ui); cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* CURSOR: todo lo clickeable muestra la manita (no el cursor de texto). Los selectores por
   [data-*] cubren los clickables por DELEGACIÓN (cualquier elemento con handler, sea div/span/a).
   En .gated no se muestra manita porque ahí pointer-events:none apaga el cursor (correcto). */
a, summary, label[for], [role="button"],
[data-act], [data-nav], [data-sw], [data-modo], [data-plan], [data-f], [data-add], [data-t], [data-l], [data-k], [data-up], [data-dn], [data-rm],
.chip, .filtro, .masl, .mas, .lupa-tab, .frase-toggle, .frase-mas, .auth-link, .pswitch, .pitem, .opt, .cap-btn { cursor: pointer; }
/* Lo deshabilitado no invita al clic (lo gated ya no muestra manita: pointer-events:none). */
button:disabled { cursor: not-allowed; }

/* ---------- SHELL ---------- */
.e-app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  background: var(--paper);
  display: flex; flex-direction: column;
  position: relative;
}
@media (min-width: 500px) {
  body { padding: 28px 0; }
  .e-app {
    min-height: calc(100dvh - 56px);
    border-radius: 32px; overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(60, 50, 30, .35);
  }
}
.e-screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 96px; }

/* ---------- TOPBAR / WORDMARK (casa de la estrella) ---------- */
.e-brand { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter) 14px; border-bottom: 1px solid var(--linea); }
.e-wordmark { position: relative; display: inline-block; font-family: 'Big Shoulders Display', var(--ui); font-weight: 800; font-size: 20px; letter-spacing: 1px; line-height: 1; color: var(--tinta); }
.e-brand .ctx { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-mute); }
/* Ancla invisible: esquina inferior derecha del wordmark = casa de la estrella. */
#estrella-home { position: absolute; right: -6px; bottom: -1px; width: 6px; height: 6px; pointer-events: none; }

/* ---------- TEXTO BASE ---------- */
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }
.overline { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-mute); line-height: 1.2; }
.overline b { color: var(--oro-600); font-weight: 600; }
.e-app h1 { font-family: var(--ed); font-weight: 600; color: var(--tinta); font-size: 26px; line-height: 1.18; margin: 0; padding: 18px var(--gutter) 2px; }
.e-app h1 em { font-style: italic; color: var(--oro-600); font-weight: 600; }
.sub { font-size: 13px; color: var(--tinta-mute); padding: 0 var(--gutter) 16px; line-height: 1.5; }
.lede { font-family: var(--ed); font-style: italic; font-weight: 500; color: var(--azul); font-size: 20px; line-height: 1.42; }

/* ---------- CORTE DE CAJA (saludo fresco de Elia, arriba de HOY) ---------- */
.corte { padding: 16px var(--gutter) 6px; }
.corte .hola { font-family: var(--ed); font-size: 25px; font-weight: 600; color: var(--tinta); line-height: 1.2; }
.corte .mov { font-size: 13.5px; color: var(--tinta-mute); margin-top: 6px; line-height: 1.5; }
.corte .mov b { color: var(--tinta); font-weight: 600; }

/* ---------- SECCIÓN NUMERADA (círculo oro) ---------- */
.sec-k { display: flex; align-items: center; gap: 9px; padding: 16px var(--gutter) 10px; }
.sec-k .n { font-family: var(--ed); font-size: 15px; color: #fff; background: var(--oro-500); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.sec-k .t { font-family: var(--ed); font-size: 20px; font-weight: 600; color: var(--tinta); }
.sec-k .tag { margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-mute); }
.sec-k.mini-k { padding-top: 6px; }

/* ---------- CARD ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 15px; padding: 17px; margin: 0 var(--gutter) 14px; }
.card.flush { margin-left: var(--gutter); margin-right: var(--gutter); }

/* ---------- GRÁFICA ---------- */
.chart { position: relative; height: 118px; margin: 4px 0 2px; }
svg.tray { width: 100%; height: 100%; display: block; }
.chart-head { margin-bottom: 4px; }
.chart-pie { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; gap: 10px; }
.chart-lect { font-size: 13px; color: var(--tinta); font-family: var(--ed); font-style: italic; }
.chart-legend { font-size: 11px; color: var(--tinta-mute); margin-top: 6px; }

/* ---------- PILL ---------- */
.pill { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.neg { color: var(--garnet); background: var(--tint-garnet); }
.pill.pos { color: var(--verde); background: var(--tint-verde); }
.pill.ale { color: var(--oro-600); background: var(--tint-alerta); }
.pill.oro { color: var(--oro-600); background: var(--paper-2); }
.pill.hist-pill-crisis { color: #fff; background: var(--crisis); }
.pill.hist-pill-alerta { color: var(--oro-600); background: var(--tint-alerta); }
/* Buena noticia — contraparte celebratoria del rojo de crisis: verde del brandkit (--elia-positivo). */
.pill.hist-pill-buena { color: #fff; background: var(--verde); }

/* ---------- HISTORIA DEL MOMENTO (fila título+score) ---------- */
.hrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.htitulo { font-family: var(--ed); font-size: 20px; font-weight: 600; color: var(--tinta); line-height: 1.22; }
.score { font-family: var(--ed); font-size: 30px; font-weight: 600; line-height: 1; flex: none; }
.s-neg { color: var(--garnet); } .s-ale { color: var(--alerta); } .s-pos { color: var(--verde); } .s-neu { color: var(--tinta-mute); }
.ciclo { font-size: 12px; color: var(--tinta-mute); margin: 4px 0 10px; }
.hdesc { font-size: 13.5px; color: var(--tinta-mute); line-height: 1.6; margin: 8px 0 2px; }
.fuentes { font-size: 11.5px; color: var(--tinta-mute); margin-top: 8px; }

/* ---------- JUGADA (firma: filete oro) ---------- */
.jugada { margin: 14px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--oro-500); }
.jugada .kicker { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-600); margin-bottom: 6px; }
.jugada strong { display: block; font-family: var(--ed); font-size: 16px; font-weight: 600; color: var(--tinta); line-height: 1.4; }
.jugada .meta { font-size: 13px; color: var(--tinta-mute); margin-top: 6px; line-height: 1.5; }

/* ---------- BOTONES ---------- */
.btn { display: block; text-align: center; background: var(--card); color: var(--tinta); font-size: 13.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; margin-top: 14px; width: 100%; }
.btn.gold { background: var(--oro-500); color: #fff; border-color: var(--oro-500); }
.btn.ghost { background: transparent; color: var(--tinta-mute); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- MINIS (3 en fila) ---------- */
.row3 { display: flex; gap: 10px; padding: 0 var(--gutter); margin-bottom: 6px; }
.mini { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px 11px; text-align: left; }
.mini .score { font-size: 22px; }
.mini .t { font-family: var(--ed); font-weight: 600; font-size: 13px; color: var(--tinta); line-height: 1.25; margin-top: 3px; }

/* "ver todas" / enlaces suaves de oro */
.masl { display: block; text-align: center; color: var(--oro-600); font-weight: 500; font-size: 12.5px; padding: 11px; margin: 2px var(--gutter) 8px; }
.mas { display: block; text-align: center; color: var(--tinta-mute); font-size: 13px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; margin: 0 var(--gutter) 14px; background: var(--card); width: calc(100% - var(--gutter) * 2); }
.mas b { color: var(--oro-600); font-weight: 600; }

/* ---------- RUTA (progreso) ---------- */
.rcard { display: flex; justify-content: space-between; align-items: center; }
.rprog { height: 5px; background: var(--paper-2); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.rprog i { display: block; height: 100%; background: var(--oro-500); border-radius: 999px; transition: width .4s ease; }
.rarrow { color: var(--oro-600); font-family: var(--ed); font-size: 22px; }

/* ---------- NAV INFERIOR ---------- */
.nav { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(251, 249, 245, .97); backdrop-filter: blur(8px); padding: 9px 8px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 20; }
.nav button { text-align: center; color: var(--tinta-mute); font-size: 10.5px; letter-spacing: .02em; font-weight: 500; position: relative; padding: 2px 0; }
/* El ícono nunca es el blanco del tap: el <button> siempre lo es. Sin esto, un tap sobre un
   hijo SVG pintado (los círculos del ícono de Conf.) no sintetiza el click en iOS Safari y el
   tab "no responde". pointer-events:none unifica los 4 tabs y hace robusta la delegación. */
.nav button svg { width: 22px; height: 22px; display: block; margin: 0 auto 3px; pointer-events: none; }
.nav button.on { color: var(--tinta); font-weight: 600; }
.nav button.on::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--oro-500); margin: 3px auto 0; }

/* ---------- BACK / topbar de detalle ---------- */
.e-top { display: flex; align-items: center; gap: 14px; padding: 16px var(--gutter) 12px; border-bottom: 1px solid var(--linea); }
.e-back { color: var(--tinta-mute); font-size: 20px; font-weight: 500; line-height: 1; }
.e-top .ctx { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-mute); }
.e-top .ctx.crisis { color: var(--crisis); }
.e-top .ctx.buena { color: var(--verde); }
.e-top .ctx.alerta { color: var(--oro-600); }

/* ---------- HERO DE DETALLE ---------- */
.hero { padding: 20px var(--gutter) 18px; border-bottom: 1px solid var(--linea); }
.hero .htitulo { font-size: 24px; }
.hero .hmeta { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.hero .score { font-size: 36px; }
.hero .info { font-size: 12.5px; color: var(--tinta-mute); line-height: 1.5; }
.minichart { height: 44px; margin-top: 14px; }

/* ---------- RUTA · ESTRATEGIA + PASOS ---------- */
.estrategia { border-left: 3px solid var(--oro-500); }
.estrategia .k { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-600); margin-bottom: 6px; }
.estrategia .frase { font-family: var(--ed); font-size: 17px; color: var(--tinta); line-height: 1.4; font-weight: 600; }
.estrategia .por { font-size: 13px; color: var(--tinta-mute); margin-top: 8px; line-height: 1.55; }
.paso { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.paso:last-child { border-bottom: none; }
.paso .chk { min-width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--oro-500); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex: none; }
.paso.done .chk { background: var(--oro-500); }
.paso.pend .chk { border-color: var(--border); }
.paso .cont { flex: 1; min-width: 0; }
.paso .cuando { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-600); font-weight: 600; }
.paso.pend .cuando { color: var(--tinta-mute); }
.paso .que { font-size: 13.5px; color: var(--tinta); margin-top: 2px; line-height: 1.45; }
.paso.done .que { color: var(--tinta-mute); text-decoration: line-through; text-decoration-color: rgba(90, 107, 126, .4); }
.paso .realizar { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--oro-600); display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
.paso .pill { margin-top: 8px; }

/* ---------- ACCIONES (grid 2 col; la jugada del momento en oro) ---------- */
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 var(--gutter) 14px; }
.acc { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 12px; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.acc .ic { color: var(--oro-500); width: 19px; height: 19px; }
.acc .ic svg { width: 19px; height: 19px; display: block; }
.acc .nm { font-family: var(--ed); font-weight: 600; font-size: 14px; color: var(--tinta); margin-top: 4px; }
.acc .ds { font-size: 11px; color: var(--tinta-mute); margin-top: 1px; line-height: 1.35; }
.acc:disabled { opacity: .55; }
.acc.prim { background: var(--oro-500); border-color: var(--oro-500); }
.acc.prim .ic, .acc.prim .nm { color: #fff; }
.acc.prim .ds { color: rgba(255, 255, 255, .88); }
/* "Estrategia" — celda ancha (el consejo del que salen las demás) */
.acc.full { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 11px; }
.acc.full .ic { flex: none; }
.acc.full .nm { margin-top: 0; }
.acc.full > div { display: flex; flex-direction: column; }

/* ---------- LUPA (menciones nota por nota) ---------- */
.lupa-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin: 0 var(--gutter) 10px; }
.lupa-item.neg { border-left: 3px solid var(--garnet); }
.lupa-item.pos { border-left: 3px solid var(--verde); }
.lupa-item .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 5px; }
.lupa-item .medio { font-size: 11px; font-weight: 600; color: var(--azul); letter-spacing: .03em; }
.lupa-item .fecha { font-size: 10.5px; color: var(--tinta-mute); white-space: nowrap; }
.lupa-item .txt { font-size: 13px; color: var(--tinta); line-height: 1.5; }
.lupa-item .link { font-size: 11px; color: var(--oro-600); margin-top: 7px; display: inline-block; }

/* ---------- HISTORIAS · FILTROS + GRUPOS ---------- */
.filtros { display: flex; gap: 7px; padding: 0 var(--gutter) 16px; overflow-x: auto; }
.chip { white-space: nowrap; font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--tinta-mute); background: var(--card); }
.chip.on { background: var(--tinta); color: var(--paper); border-color: var(--tinta); }
.grupo-k { font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-mute); padding: 8px var(--gutter) 8px; }
.grupo-k.grupo-k-buena { color: var(--verde); }

/* ---------- TARJETA DE HISTORIA (lista curada) ---------- */
.hcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 15px; margin: 0 var(--gutter) 10px; display: flex; gap: 13px; align-items: flex-start; width: calc(100% - var(--gutter) * 2); text-align: left; }
.hcard .score { font-size: 27px; min-width: 44px; }
.hcard .hbody { flex: 1; min-width: 0; }
.hcard .htitulo { font-size: 17px; }
.hcard .meta { font-size: 11.5px; color: var(--tinta-mute); margin-top: 4px; }
.hcard .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hcard.manual { border-left: 3px solid var(--oro-500); }
/* Curaduría — el estado manda visualmente (se conserva). Buena noticia = contraparte verde de la crisis. */
.hist-crisis { border-left: 3px solid var(--crisis); background: linear-gradient(180deg, var(--tint-crisis), var(--card)); }
.hist-alerta { border-left: 3px solid var(--alerta); }
.hist-buena { border-left: 3px solid var(--verde); background: linear-gradient(180deg, var(--tint-verde), var(--card)); }
.hist-apagando { opacity: .55; }
.card.hist-crisis { background: linear-gradient(180deg, var(--tint-crisis), var(--card)); border-color: var(--crisis); }
.card.hist-alerta { border-color: var(--alerta); }
.card.hist-buena { background: linear-gradient(180deg, var(--tint-verde), var(--card)); border-color: var(--verde); }
.mini.hist-crisis { border-top: 3px solid var(--crisis); }
.mini.hist-alerta { border-top: 3px solid var(--alerta); }
.mini.hist-buena { border-top: 3px solid var(--verde); }
/* Triage en la lista (Confirmar crisis / Descartar — llamadas reales) */
.triage { display: flex; gap: 8px; margin-top: 10px; }
.triage button { flex: 1; font-size: 11px; font-weight: 600; padding: 8px; border-radius: 8px; }
.triage .t-si { background: var(--garnet); color: #fff; }
.triage .t-no { background: var(--paper-2); color: var(--tinta-mute); }
/* Buena noticia: no es triage de crisis — es capitalizar (celebración informativa, verde de oficio). */
.capitaliza { margin-top: 10px; }
.cap-btn { font-size: 11px; font-weight: 600; padding: 8px 12px; border-radius: 8px; background: var(--tint-verde); color: var(--verde); border: 1px solid var(--verde); }

/* ---------- NARRATIVA · EL ESPEJO (único bloque marino) ---------- */
.espejo { position: relative; overflow: hidden; background: var(--marino-700); margin: 0 var(--gutter) 18px; border-radius: 16px; padding: 24px 20px; }
.espejo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oro-500); }
.espejo .k { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--oro-400); margin-bottom: 10px; }
.espejo .frase { font-family: var(--ed); font-size: 20px; font-style: italic; color: var(--paper); line-height: 1.4; }

/* ---------- NARRATIVA · ÍNDICE + ADN ---------- */
.sec-lbl { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-mute); padding: 6px var(--gutter) 10px; }
.indice-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.indice-big .n { font-family: var(--ed); font-size: 44px; font-weight: 600; color: var(--tinta); line-height: 1; }
.indice-big .d { font-size: 13px; font-weight: 600; }
.indice-big .d.up { color: var(--verde); } .indice-big .d.dn { color: var(--garnet); } .indice-big .d.eq { color: var(--tinta-mute); }
.adn-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.adn-row:last-child { border-bottom: none; }
.adn-row .lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-600); font-weight: 600; }
.adn-row .val { font-size: 14px; color: var(--tinta); line-height: 1.5; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.tag { font-size: 12px; background: var(--paper-2); color: var(--tinta); padding: 5px 11px; border-radius: 999px; font-weight: 500; }
.tag.roja { background: var(--tint-garnet); color: var(--garnet); }

/* ---------- CHAT DE ADN (ajustar la narrativa con Elia · pantalla Narrativa) ----------
   Burbujas modo papel, coherentes con el chat del onboarding (.said). Usuario a la derecha,
   Elia a la izquierda. Nada se guarda sin que el líder toque "Aplicar cambio". */
.adn-chat .say { font-size: 13.5px; color: var(--tinta-mute); line-height: 1.55; }
.adn-log { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
/* .said — burbuja del usuario (misma piel que en el onboarding). */
.said { align-self: flex-end; max-width: 85%; background: var(--paper-2); border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 14px; color: var(--tinta); line-height: 1.5; }
/* .dice — burbuja de Elia. */
.dice { align-self: flex-start; max-width: 88%; background: var(--card); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: 14px; color: var(--tinta); line-height: 1.5; }
.dice.esc { color: var(--tinta-mute); font-style: italic; }
/* Renglón de entrada: campo + botón oro de enviar. */
.adn-in { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.adn-in input { flex: 1; min-width: 0; font-family: var(--ui); font-size: 15px; color: var(--tinta); background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 11px 15px; }
.adn-in input::placeholder { color: var(--tinta-mute); }
.adn-in input:focus { outline: none; border-color: var(--oro-500); }
.adn-in input:disabled { opacity: .6; }
.adn-send { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--oro-500); color: #fff; display: flex; align-items: center; justify-content: center; }
.adn-send svg { width: 20px; height: 20px; pointer-events: none; }
.adn-send:disabled { opacity: .5; }
.adn-send:hover:not(:disabled) { background: var(--oro-600); }
/* Tarjeta de propuesta — acento oro; el paso deliberado antes de escribir en el ADN. */
.adn-prop { margin-top: 14px; border: 1px solid var(--oro-500); border-left: 3px solid var(--oro-500); border-radius: 0 12px 12px 0; background: var(--paper-2); padding: 14px; }
.adn-prop .k { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-600); margin-bottom: 7px; }
.adn-prop .rsm { font-size: 14px; color: var(--tinta); line-height: 1.5; }
.adn-prop .adv { font-size: 12.5px; color: var(--garnet); line-height: 1.45; margin-top: 8px; }
.adn-prop .stack { margin-top: 12px; }
.adn-prop .stack.row { display: flex; gap: 8px; }
.adn-prop .stack.row .btn { margin-top: 0; flex: 1; }

/* ---------- ENTORNO / CONTEXTO (HOY ④⑤ y visor de brief) ---------- */
.entorno-line { font-size: 13.5px; color: var(--tinta); line-height: 1.55; }
.entorno-line .eye { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-mute); margin-right: 7px; }
.frase-dia { font-family: var(--ed); font-style: italic; font-size: 17px; color: var(--tinta); line-height: 1.4; border-left: 3px solid var(--oro-500); padding-left: 12px; margin-top: 4px; }
details.expand > summary { list-style: none; cursor: pointer; color: var(--oro-600); font-weight: 500; font-size: 12.5px; margin-top: 10px; }
details.expand > summary::-webkit-details-marker { display: none; }
details.expand[open] > summary { color: var(--tinta-mute); }

/* ---------- SECCIÓN / LISTAS (narrativa: entregas/documentos) ---------- */
.seclbl { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-mute); margin: 20px var(--gutter) 8px; display: flex; align-items: center; gap: 10px; }
.seclbl .rule { flex: 1; height: 1px; background: var(--linea); }
.listitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px var(--gutter); border-bottom: 1px solid var(--linea); width: 100%; text-align: left; }
.listitem:last-child { border-bottom: none; }
.listitem .t { font-size: 14.5px; color: var(--tinta); font-weight: 500; line-height: 1.35; }
.listitem .tag { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-mute); white-space: nowrap; background: none; padding: 0; }
/* Protegidos / equipo: nombre arriba, cargo/rol debajo — un cargo largo no rompe la fila. */
.listitem.person { flex-direction: column; align-items: flex-start; gap: 3px; }
.listitem.person .tag { white-space: normal; max-width: 100%; }

/* ---------- FILAS CLAVE-VALOR (cuenta) ---------- */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.kv:first-child { padding-top: 0; }
.kv:last-child { border-bottom: none; padding-bottom: 0; }
.kv .k { font-size: 13px; color: var(--tinta-mute); }
.kv .v { font-size: 14px; color: var(--tinta); font-weight: 500; text-align: right; word-break: break-word; }

/* ---------- FORMULARIO (crear historia) ---------- */
.field { margin: 14px var(--gutter) 0; }
.field label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-mute); margin-bottom: 6px; }
.input, .textarea { width: 100%; font-family: var(--ui); font-size: 15px; color: var(--tinta); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; line-height: 1.5; }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--tinta-mute); }
.input:focus, .textarea:focus { outline: none; border-color: var(--oro-500); }

/* ---------- CAMPOS DE FORMULARIO (js/forms.js) — estándar global ---------- */
.f-field { position: relative; margin-top: 14px; }
.f-field .input { width: 100%; }
/* estados de validez sobre cualquier .input */
.input.f-ok { border-color: var(--verde); padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E8B6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input.f-err { border-color: var(--garnet); }
.f-msg { font-size: 12px; line-height: 1.4; margin-top: 6px; min-height: 1px; color: var(--tinta-mute); }
.f-msg-err { color: var(--garnet); }
/* password: ojo + medidor + requisitos */
.f-field-pass .input { padding-right: 44px; }
.f-field-pass .input.f-ok { padding-right: 68px; background-position: right 40px center; }
.f-eye { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--tinta-mute); }
.f-eye:hover { color: var(--tinta); }
.f-eye.on { color: var(--oro-600); }
.f-eye.on .ojo-tache { display: block !important; }
.f-meter { height: 5px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: 10px; }
.f-meter i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease, background .25s ease; background: var(--garnet); }
.f-meter[data-n="3"] i { background: var(--alerta); }
.f-meter[data-n="4"] i { background: var(--verde); }
.f-req { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; }
.f-req li { font-size: 11.5px; color: var(--tinta-mute); position: relative; padding-left: 16px; }
.f-req li::before { content: "○"; position: absolute; left: 0; color: var(--tinta-mute); font-size: 10px; top: 1px; }
.f-req li.ok { color: var(--verde); }
.f-req li.ok::before { content: "✓"; color: var(--verde); }
/* teléfono: selector de país con bandera + input */
.f-tel { display: flex; gap: 8px; }
.f-cc { flex: none; font-family: var(--ui); font-size: 15px; color: var(--tinta); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; min-width: 96px; }
.f-cc:focus { outline: none; border-color: var(--oro-500); }
.f-field-tel .input { flex: 1; min-width: 0; }

/* ---------- LAYOUT DE AUTENTICACIÓN (login / registro / reset) ---------- */
body.bg-paper { background: var(--paper); }
.auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 400px; margin: 0 auto; padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px)); }
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand .e-wordmark { font-size: 34px; letter-spacing: 2px; }
.auth-brand .tag { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-mute); margin-top: 8px; }
.auth h1 { font-family: var(--ed); font-size: 24px; color: var(--tinta); text-align: center; padding: 0; margin: 0 0 4px; }
.auth .sub { text-align: center; padding: 0 0 6px; }
.auth .btn { margin-top: 18px; }
.auth-alt { text-align: center; font-size: 13px; color: var(--tinta-mute); margin-top: 20px; }
.auth-alt a, .auth-link { color: var(--oro-600); font-weight: 500; cursor: pointer; }
.auth-link.right { display: block; text-align: right; font-size: 12.5px; margin-top: 8px; }

/* Consentimiento legal (solo registro) — bloquea "Crear cuenta" hasta marcarse. */
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.consent-box { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--oro-500); cursor: pointer; }
.consent-text { font-size: 12.5px; line-height: 1.5; color: var(--tinta-mute); }
.consent-text a { color: var(--oro-600); font-weight: 500; text-decoration: none; }
.consent-text a:hover { text-decoration: underline; }

/* ---------- DOCUMENTO GENERADO ---------- */
.doc { border: 1px solid var(--border); border-left: 3px solid var(--oro-500); border-radius: 0 14px 14px 0; padding: 18px 16px; margin: 14px var(--gutter) 0; background: var(--card); }
.doc .dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.doc h3 { font-family: var(--ed); font-weight: 600; font-size: 22px; color: var(--tinta); margin: 0 0 12px; line-height: 1.18; }
.doc .p { font-size: 15px; line-height: 1.65; color: var(--tinta); margin: 0 0 12px; white-space: pre-wrap; }
.doc .cita { font-family: var(--ed); font-style: italic; font-size: 18px; color: var(--azul); }
.doc .item { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.doc .item:last-child { border-bottom: none; }
.doc .item .h { font-size: 14.5px; font-weight: 500; color: var(--tinta); line-height: 1.4; }
.doc .item .d { font-size: 13px; color: var(--tinta-mute); margin-top: 4px; line-height: 1.5; }
.doc .eye { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-mute); margin-right: 8px; }
.doc .jn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--oro-500); color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.doc .sub { margin-top: 12px; }
.doc .sub .sl { font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-mute); margin-bottom: 6px; }
.juicio { background: var(--tint-alerta); border-radius: 10px; padding: 12px; margin-top: 14px; font-size: 13px; color: var(--oro-600); line-height: 1.5; }
.juicio.ok { background: var(--tint-verde); color: var(--verde); }
.juicio strong { color: var(--tinta); }

/* ---------- VISOR DE BRIEF (items dentro de card) ---------- */
.card .item { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.card .item:first-child { padding-top: 0; }
.card .item:last-child { border-bottom: none; padding-bottom: 0; }
.card .item .h { font-size: 14.5px; font-weight: 500; color: var(--tinta); line-height: 1.4; }
.card .item .d { font-size: 13px; color: var(--tinta-mute); margin-top: 4px; line-height: 1.55; }
.card .eye { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-mute); margin-right: 8px; }

/* ---------- BANNER DE ALERTA ---------- */
.alertbar { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--tint-crisis), var(--card)); border: 1px solid var(--crisis); border-left: 3px solid var(--crisis); border-radius: 13px; padding: 12px 14px; margin: 0 var(--gutter) 14px; width: calc(100% - var(--gutter) * 2); text-align: left; }
.alertbar .k { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--crisis); }
.alertbar .l { font-size: 13px; color: var(--tinta); line-height: 1.4; margin-top: 2px; }
.alertbar .cx { margin-left: auto; color: var(--crisis); }

/* ---------- ESTADO DE ESPERA DE MARCA ---------- */
.wait { text-align: center; padding: 30px var(--gutter); }
.wait .bar { height: 2px; width: 120px; margin: 0 auto 18px; background: var(--oro-500); border-radius: 2px; transform-origin: left center; animation: filete-crece 1.8s ease infinite; }
.wait .frase { font-family: var(--ed); font-style: italic; font-size: 18px; color: var(--azul); line-height: 1.45; transition: opacity .4s ease; }
@keyframes filete-crece { 0% { transform: scaleX(0); opacity: .4; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .wait .bar { animation: none; transform: scaleX(1); } }

/* ---------- ESTADOS ---------- */
.empty { font-family: var(--ed); font-style: italic; font-size: 17px; color: var(--tinta-mute); line-height: 1.45; }
.muted { color: var(--tinta-mute); font-size: 13px; line-height: 1.55; }
.spin { color: var(--tinta-mute); font-size: 13px; padding: 36px var(--gutter); }
.err { background: var(--tint-garnet); border-left: 3px solid var(--garnet); padding: 12px; border-radius: 0 10px 10px 0; font-size: 13px; color: var(--garnet); margin: 12px var(--gutter) 0; }
.flash { background: var(--paper-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 13px; color: var(--tinta); margin: 0 var(--gutter) 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prodhead { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-mute); margin: 16px 0 2px; }

/* Foco accesible (brandkit) */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--oro-500); outline-offset: 3px; border-radius: 6px; }

/* ---------- SWITCHER DE PROTEGIDO (topbar) ---------- */
.switcher { position: relative; margin-left: 12px; }
.switcher .pname { font-size: 13px; color: var(--tinta-mute); font-weight: 500; }
.pswitch { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tinta); background: var(--paper-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; max-width: 46vw; }
.pswitch svg { flex: none; transition: transform .2s ease; }
.pswitch.open svg { transform: rotate(180deg); }
.pmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(60, 50, 30, .3); padding: 6px; z-index: 60; }
.pitem { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; }
.pitem:hover { background: var(--paper-2); }
.pitem.on { background: var(--paper-2); }
.pitem .pn { font-size: 14px; color: var(--tinta); font-weight: 600; }
.pitem .pc { font-size: 11.5px; color: var(--tinta-mute); }
.pitem.add .pn { color: var(--oro-600); }
.pitem.limite { flex-direction: row; align-items: center; justify-content: space-between; }
.pitem.limite .pn { color: var(--tinta-mute); font-weight: 500; }
.pdiv { height: 1px; background: var(--linea); margin: 5px 4px; }

/* ---------- GATING VISUAL POR PLAN ---------- */
.gated { opacity: .5; pointer-events: none; position: relative; }
.gated::after { content: "🔒"; position: absolute; top: 10px; right: 30px; font-size: 13px; }
/* Botón "Realizar" sombreado en línea: sin el candado de esquina (la tira ya lo indica). */
.gated-inline { display: inline-block; }
.gated-inline::after { display: none; }
.gate-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px var(--gutter) 14px; padding: 9px 12px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 10px; }
.gate-strip.flush { margin-left: 0; margin-right: 0; margin-top: 8px; }
.gate-lock { font-size: 12px; font-weight: 600; color: var(--oro-600); letter-spacing: .02em; }
.gate-up { font-size: 12px; font-weight: 600; color: #fff; background: var(--oro-500); border-radius: 8px; padding: 6px 14px; flex: none; }
/* Texto del banner de countdown del trial (modo papel). */
.gate-txt { font-size: 13px; color: var(--tinta); line-height: 1.4; }
.gate-txt strong { font-weight: 600; }

/* ---------- PAYWALL · ESTADOS DE SUSCRIPCIÓN (modo papel, brandkit) ----------
   Tarjeta centrada coherente con el dashboard: papel, tinta, oro, Cormorant. Vive dentro
   de .e-screen (sin padding lateral propio), por eso se insetea con --gutter. */
.paywall { text-align: center; margin: 40px var(--gutter) 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 34px 24px; box-shadow: var(--elia-shadow-card); }
.paywall .k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-600); }
.paywall h2 { font-family: var(--ed); font-weight: 600; color: var(--tinta); font-size: 24px; line-height: 1.22; margin: 12px 0 0; }
.paywall p { font-size: 14px; color: var(--tinta-mute); line-height: 1.6; margin: 12px auto 0; max-width: 32ch; }
.paywall .btn { margin-top: 22px; }

/* ---------- LUPA · PESTAÑAS POR FUENTE ---------- */
.lupa-tabs { display: flex; gap: 7px; padding: 2px var(--gutter) 10px; overflow-x: auto; }
.lupa-tab { white-space: nowrap; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--tinta-mute); background: var(--card); }
.lupa-tab.on { background: var(--tinta); color: var(--paper); border-color: var(--tinta); }
.lupa-tab.locked { opacity: .6; }
.lupa-tab .tl { color: var(--oro-600); font-weight: 600; }

/* ---------- FEAT CARDS (Conf · canales/entregas) ---------- */
.feat { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feat .ft { font-family: var(--ed); font-size: 16px; font-weight: 600; color: var(--tinta); }
.feat .fd { font-size: 12.5px; color: var(--tinta-mute); margin-top: 2px; }
.feat .finc { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); flex: none; }
/* Campos de Redes monitoreadas (Conf.) — dentro de una .card, sin gutter lateral extra. */
.redes-field { margin-top: 12px; }
.redes-field label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-mute); margin-bottom: 6px; }
.redes-field + #redes-msg:empty { display: none; }

/* ============================================================
   LA ESTRELLA DE ELIA (DOCTRINA regla 11) — presencia viva
   Sobre PAPEL: azul profundo #3A5476 con núcleo claro + halo azul,
   para que se lea sobre fondo claro (ajuste de contraste CEO 29-jul).
   Forma/física en js/estrella.js; aquí la piel y el titileo.
   ============================================================ */
.estrella-estela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.estrella-elia { position: absolute; left: 0; top: 0; width: 15px; height: 15px; pointer-events: none; z-index: 50; will-change: transform; opacity: 0; transition: opacity .5s ease; }
.estrella-elia svg path { fill: var(--azul); }          /* azul profundo sobre papel */
.estrella-elia svg circle { fill: var(--paper); }        /* núcleo claro para contraste */
.estrella-elia svg { display: block; filter: drop-shadow(0 0 4px rgba(58,84,118,.55)) drop-shadow(0 0 10px rgba(90,150,240,.4)); }
@keyframes estrella-titileo { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
.estrella-elia.reposo svg { animation: estrella-titileo 2.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .estrella-elia.reposo svg { animation: none; }
  .estrella-elia { transition: opacity .2s linear; }
}