/* ============================================================================
   EL MANIFIESTO — ESTILOS (Identidad "Editorial Paper", corporativo cálido)
   Paleta: crema (fondo) · tinta (texto/estructura) · terracota (acento/alerta)
   verde/ámbar/rojo solo para estados de medidor.
   Tipos: Fraunces (títulos) · Inter Tight (UI) · JetBrains Mono (números).
   Todo el chrome dibujado en CSS para que el fallback sin assets ya se vea bien.
   ========================================================================== */

/* Fuentes self-hosteadas (Fraunces / Inter Tight / JetBrains Mono): NO dependen de
   Google ni de internet (offline real, más rápido). Generadas con
   tools/self-host-fonts.mjs. Si faltaran, degradan a stacks de sistema. */
@import url('fonts.css');

:root {
  --crema: #f4ecde;
  --crema-2: #efe5d3;
  --papel: #fbf6ec;
  --tinta: #2b2620;
  --tinta-suave: #5b5346;
  --tinta-tenue: #8a8071;
  --terracota: #c0573a;
  --terracota-osc: #9c4026;
  --linea: #d8ccb6;
  --verde: #5a8a52;
  --ambar: #d59b2e;
  --rojo: #c0392b;
  --sombra: rgba(43, 38, 32, 0.14);

  --fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-ui: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  --r: 14px;
  --transicion: 220ms cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Grano / papel sutil de fondo (SVG embebido, sin assets externos) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 22px clamp(12px, 3vw, 30px) 60px; }

/* ---------- Capa de fondo (ilustración de escena) + scrim ---------- */
#fondo {
  position: fixed; inset: -28px; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; opacity: 0;
  transition: opacity 600ms ease; will-change: transform;
}
#fondo.activo { opacity: 1; }
#fondo-scrim { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
#fondo-scrim.activo { opacity: 1; background: radial-gradient(130% 110% at 50% 0%, rgba(244,236,222,.12), rgba(43,38,32,.26)); }
#fondo-scrim.activo.izquierda { background: linear-gradient(100deg, rgba(244,236,222,.55) 0%, rgba(244,236,222,.15) 42%, rgba(43,38,32,.18) 100%); }
#fondo-scrim.activo.slide { background: linear-gradient(180deg, rgba(43,38,32,.18) 0%, rgba(43,38,32,.04) 38%, rgba(43,38,32,.5) 100%); }

/* ---------- Slides de historia (novela gráfica) ---------- */
.slide-screen { position: relative; min-height: calc(100dvh - 60px); display: flex; align-items: flex-end; justify-content: center; padding: 24px 0 8px; }
.slide-panel {
  width: min(660px, 100%); background: rgba(251,246,236,.93); backdrop-filter: blur(6px);
  border: 2px solid var(--tinta); border-radius: 18px; box-shadow: 8px 8px 0 var(--tinta), 0 16px 40px rgba(43,38,32,.28);
  padding: clamp(20px, 3vw, 28px); position: relative;
  animation: slideIn 420ms cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.slide-kicker { color: var(--terracota); text-transform: uppercase; letter-spacing: 2.5px; font-size: .76rem; font-weight: 700; }
.slide-sub { font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 4px 0 8px; line-height: 1.15; }
.slide-texto { font-size: clamp(1.05rem, 2.4vw, 1.22rem); line-height: 1.55; color: var(--tinta); margin: 0; }
.slide-foco { font-family: var(--fuente-mono); font-size: .8rem; color: var(--tinta-tenue); margin: 10px 0 0; }
.slide-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.slide-dots { display: flex; gap: 7px; }
.slide-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--linea); cursor: pointer; transition: var(--transicion); }
.slide-dot.on { background: var(--terracota); transform: scale(1.15); }
.slide-saltar { position: absolute; top: -46px; right: 0; background: rgba(251,246,236,.85); border: 1.5px solid var(--linea); border-radius: 10px; padding: 7px 12px; font-size: .85rem; color: var(--tinta-suave); }
.slide-saltar:hover { border-color: var(--terracota); }
@media (max-width: 760px) {
  .slide-screen { align-items: flex-end; padding: 12px 0 6px; }
  .slide-panel { width: 100%; border-radius: 16px; }
  .slide-nav .btn { padding: 11px 16px; }
  .slide-saltar { top: -42px; }
}

/* ---------- Variante CIERRE / EPÍLOGO: "fin de capítulo" cinematográfico ----------
   Se distingue claramente de la apertura: panel OSCURO y CENTRADO (la apertura es
   claro y abajo), barras letterbox, scrim más oscuro y entrada con fundido. */
#fondo-scrim.activo.slide.cierre {
  background: linear-gradient(180deg, rgba(43,38,32,.62) 0%, rgba(43,38,32,.4) 45%, rgba(43,38,32,.66) 100%);
}
.slide-screen.cierre { align-items: center; }
/* Barras letterbox (entran desde arriba/abajo) */
.slide-screen.cierre::before, .slide-screen.cierre::after {
  content: ""; position: fixed; left: 0; right: 0; height: 7vh; min-height: 38px; z-index: 1;
  background: var(--tinta); pointer-events: none; animation: letterbox 520ms cubic-bezier(.2,.8,.2,1) both;
}
.slide-screen.cierre::before { top: 0; transform-origin: top; }
.slide-screen.cierre::after { bottom: 0; transform-origin: bottom; }
@keyframes letterbox { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .slide-screen.cierre::before, .slide-screen.cierre::after { animation: none; } }

.slide-screen.cierre .slide-panel {
  width: min(620px, 92%); text-align: center;
  background: rgba(30,26,21,.84); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(244,236,222,.26); border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.5); color: var(--crema);
  animation: cierreIn 640ms ease both;
}
@keyframes cierreIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.slide-screen.cierre .slide-kicker { color: var(--terracota); letter-spacing: 3.5px; }
.slide-screen.cierre .slide-sub { color: var(--crema); font-style: italic; }
.slide-screen.cierre .slide-texto { color: rgba(244,236,222,.92); }
.slide-screen.cierre .slide-foco { color: rgba(244,236,222,.6); }
.slide-screen.cierre .slide-nav { justify-content: center; }
.slide-screen.cierre .btn.sec { background: transparent; color: var(--crema); border-color: rgba(244,236,222,.42); }
.slide-screen.cierre .btn.sec:hover { background: rgba(244,236,222,.12); }
.slide-screen.cierre .slide-dot { background: rgba(244,236,222,.32); }
.slide-screen.cierre .slide-dot.on { background: var(--terracota); }
.slide-screen.cierre .slide-saltar { background: rgba(30,26,21,.72); color: var(--crema); border-color: rgba(244,236,222,.32); }
.slide-screen.cierre .slide-saltar:hover { border-color: var(--terracota); }

/* Paneles translúcidos cuando hay fondo, para que la ilustración respire */
.sobre-fondo { background: rgba(251,246,236,.9) !important; backdrop-filter: blur(5px); }

/* ---------- Pantalla de inicio (hero sobre la portada) ---------- */
.inicio { min-height: 100dvh; display: flex; align-items: center; }
.inicio-panel {
  max-width: 560px; background: rgba(251,246,236,.84); backdrop-filter: blur(6px);
  border: 2px solid var(--tinta); border-radius: 18px; box-shadow: 8px 8px 0 var(--tinta);
  padding: clamp(22px, 3vw, 34px);
}
.inicio-kicker { color: var(--terracota); text-transform: uppercase; letter-spacing: 3px; font-size: .8rem; font-weight: 700; }
.inicio-titulo { font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(2.1rem, 8vw, 4.4rem); line-height: .92; letter-spacing: -1.5px; margin: 6px 0 4px; }
.inicio-titulo .acc { color: var(--terracota); }
.inicio-lede { font-size: 1.08rem; color: var(--tinta-suave); max-width: 46ch; margin: 10px 0 0; }
.inicio-modos { display: flex; gap: 10px; margin: 20px 0 6px; flex-wrap: wrap; }
.inicio-modo {
  flex: 1; min-width: 150px; text-align: left; border: 2px solid var(--linea); border-radius: 12px;
  padding: 11px 13px; background: var(--crema); transition: var(--transicion); cursor: pointer;
}
.inicio-modo:hover { border-color: var(--terracota); }
.inicio-modo[aria-pressed="true"] { border-color: var(--tinta); background: var(--papel); box-shadow: 3px 3px 0 var(--terracota); }
.inicio-modo b { display: block; font-size: .98rem; }
.inicio-modo span { font-size: .82rem; color: var(--tinta-suave); }
.inicio-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.inicio-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* Portada (bienvenida): bajada secundaria */
.portada-sub { font-size: .96rem; color: var(--tinta-suave); max-width: 50ch; margin: 12px 0 0; }

/* Badge "Para <Empresa>" (white-label, si se configuró) */
.marca-empresa {
  display: inline-block; font-family: var(--fuente-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--terracota);
  background: var(--crema-2); border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 3px 11px; margin-bottom: 12px;
}

/* Logros (vitrina + desbloqueos) */
.logros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
@media (max-width: 560px) { .logros-grid { grid-template-columns: 1fr; } }
.logros-nuevos { text-align: left; }
.logro-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px;
  transition: var(--transicion);
}
.logro-card.ok { border-color: var(--terracota); box-shadow: 3px 3px 0 var(--terracota); }
.logro-card.bloq { opacity: .55; }
.logro-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--terracota); background: var(--crema); border: 1.5px solid var(--linea); border-radius: 10px; }
.logro-card.bloq .logro-ico { color: var(--tinta-tenue); }
.logro-ico svg { width: 1.4rem; height: 1.4rem; }
.logro-info { flex: 1; min-width: 0; }
.logro-nom { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; }
.logro-desc { font-size: .82rem; color: var(--tinta-suave); line-height: 1.35; }
.logro-check { flex: none; font-weight: 700; color: var(--verde); font-size: 1.2rem; }

/* Vínculos con el equipo ("Tu gente") */
.vinculos-list { display: grid; gap: 8px; margin-top: 8px; }
.vinculo-row { display: flex; align-items: center; gap: 12px; background: var(--crema); border: 1.5px solid var(--linea); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; }
.vinculo-row.pos { border-left-color: var(--verde); }
.vinculo-row.neg { border-left-color: var(--rojo); }
.vinculo-row.neu { border-left-color: var(--linea); }
.vinculo-ava { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--terracota); background: var(--papel); border: 1.5px solid var(--linea); border-radius: 50%; }
.vinculo-ava svg { width: 1.2rem; height: 1.2rem; }
.vinculo-txt { display: flex; flex-direction: column; min-width: 0; }
.vinculo-nom { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; }
.vinculo-estado { font-size: .86rem; color: var(--tinta-suave); }

/* Tarjeta-resultado descargable (preview del canvas) */
.tarjeta-wrap { text-align: center; }
.tarjeta-wrap h3 { margin-bottom: 2px; }
.tarjeta-preview {
  width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto;
  border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 5px 5px 0 var(--tinta); background: var(--crema);
}

/* Crédito de música (atribución CC BY, discreto) */
.creditos-musica { font-size: .72rem; color: var(--tinta-tenue); margin: 14px 0 0; }
.creditos-musica a { color: var(--tinta-tenue); text-decoration: underline; }
.creditos-musica a:hover { color: var(--terracota); }

/* Historial de partidas */
.hist-list { display: grid; gap: 10px; margin: 6px 0 4px; }
.hist-card {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 12px;
  padding: 12px 14px; transition: var(--transicion); cursor: pointer;
}
.hist-card:hover { border-color: var(--terracota); box-shadow: 3px 3px 0 var(--terracota); transform: translateY(-1px); }
.hist-grado {
  flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.3rem;
  border: 2px solid var(--tinta); border-radius: 10px; color: var(--tinta); background: var(--crema);
}
.hist-grado.grado-s, .hist-grado.grado-a { color: var(--verde); border-color: var(--verde); }
.hist-grado.grado-d { color: var(--rojo); border-color: var(--rojo); }
.hist-info { flex: 1 1 auto; min-width: 0; }
.hist-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.05rem; }
.hist-meta { font-size: .8rem; color: var(--tinta-suave); margin: 1px 0 2px; }
.hist-estrellas { font-family: var(--fuente-mono); font-size: .82rem; color: var(--terracota); letter-spacing: 1px; }
.hist-legado { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hist-legado .num { font-family: var(--fuente-mono); font-weight: 700; }
.hist-legado .hist-ver { font-size: .74rem; color: var(--tinta-tenue); }
@media (max-width: 560px) { .hist-legado .num { font-size: .85rem; } .hist-grado { width: 34px; height: 34px; font-size: 1.1rem; } }
.inicio-anim { animation: heroIn 700ms cubic-bezier(.2,.8,.2,1) both; }
.inicio-anim-2 { animation: heroIn 700ms cubic-bezier(.2,.8,.2,1) 120ms both; }
.inicio-anim-3 { animation: heroIn 700ms cubic-bezier(.2,.8,.2,1) 240ms both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .inicio-anim, .inicio-anim-2, .inicio-anim-3 { animation: none; } }

h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 600; line-height: 1.1; margin: 0 0 .4em; }
.num { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Íconos SVG de línea (heredan color del texto) */
.ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.18em; }
.ico svg { width: 1.15em; height: 1.15em; display: block; }

button { font-family: var(--fuente-ui); cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; border-radius: 6px; }

/* ---------- Encabezado / barra superior ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .logo { font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.5rem; letter-spacing: -.5px; }
.brand .logo .acc { color: var(--terracota); }
.brand .sub { color: var(--tinta-tenue); font-size: .82rem; text-transform: uppercase; letter-spacing: 2px; }
.topbar .controls { display: flex; gap: 8px; align-items: center; }

.chip {
  font-family: var(--fuente-mono); font-size: .8rem; background: var(--papel);
  border: 1.5px solid var(--linea); border-radius: 999px; padding: 5px 11px; color: var(--tinta-suave);
}
.chip b { color: var(--tinta); }
.iconbtn {
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 10px;
  padding: 7px 11px; font-size: .95rem; color: var(--tinta); transition: var(--transicion);
}
.iconbtn:hover { background: var(--crema-2); border-color: var(--tinta-tenue); }
.iconbtn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ---------- Layout principal de juego ---------- */
.layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start;
  grid-template-areas: "estado escena" "producis escena" "rastro escena";
}
.layout > .estado { grid-area: estado; }
.layout > .producis { grid-area: producis; }
.layout > .rastro-deuda { grid-area: rastro; margin-top: 0; }
.layout > .escena { grid-area: escena; }

/* ---------- Modo limpio: escena protagonista, tablero en drawer ---------- */
.layout.limpio { display: block; }
.layout.limpio > .escena { max-width: 760px; margin: 0 auto; }

/* Pulso de Energía (héroe) en la barra superior */
.pulso-energia {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--fuente-mono); font-weight: 700; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 4px 12px 4px 9px; transition: var(--transicion);
}
.pulso-energia:hover { border-color: var(--tinta-tenue); background: var(--crema-2); }
.pulso-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.05); transition: background var(--transicion); }
.pulso-ico svg { width: 1rem; height: 1rem; color: var(--terracota); }
.pulso-energia .num { font-size: .98rem; }

/* Botón Indicadores + badge de problemas */
.tablero-btn { position: relative; }
.tablero-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; font-family: var(--fuente-mono); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  border: 1.5px solid var(--papel); box-sizing: border-box;
}
.tablero-badge.ambar { background: var(--ambar); }
.tablero-badge.rojo { background: var(--rojo); }
.tablero-btn.pulsa { animation: lucePulsa 1.1s ease-out 2; }

/* Drawer del tablero (off-canvas, izquierda) + scrim */
.tablero-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: 340px; max-width: 88vw;
  background: var(--crema); border-right: 2px solid var(--tinta);
  box-shadow: 8px 0 30px rgba(43,38,32,.25);
  padding: 18px 16px 26px; overflow-y: auto; z-index: 60;
  display: grid; gap: 12px; align-content: start;
  transform: translateX(-104%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.tablero-drawer.abierto { transform: translateX(0); }
.tablero-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.tablero-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 7px; }
.tablero-titulo svg { color: var(--terracota); }
.iconbtn.ghost { background: transparent; border-color: transparent; padding: 5px 7px; }
.iconbtn.ghost:hover { background: var(--crema-2); }
.tablero-scrim {
  position: fixed; inset: 0; background: rgba(43,38,32,.34); z-index: 55;
  opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
}
.tablero-scrim.abierto { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tablero-drawer { transition: none; } }

/* ---------- Estado del equipo: Energía (héroe) + secundarios + rumbo ---------- */
.estado { display: grid; gap: 12px; }

.medidor-hero {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 14px; padding: 15px 16px;
  box-shadow: 5px 5px 0 var(--tinta); position: relative;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.mh-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.mh-nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.12rem; display: flex; gap: 8px; align-items: center; }
.mh-ico { color: var(--terracota); }
.mh-ico svg { width: 1.4rem; height: 1.4rem; }
.mh-valor { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.mh-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.medidores-sec { display: grid; gap: 8px; }
.med-sec { background: var(--papel); border: 1.5px solid var(--linea); border-radius: 10px; padding: 8px 11px 9px; position: relative; transition: box-shadow var(--transicion), transform var(--transicion); }
.ms-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ms-nombre { font-size: .84rem; font-weight: 600; display: flex; gap: 6px; align-items: center; flex: 1; }
.ms-nombre .emo svg { width: 1rem; height: 1rem; }
.ms-valor { font-family: var(--fuente-mono); font-weight: 700; font-size: .95rem; }
.ms-estado { display: block; margin-top: 5px; }

/* Barras (con BANDAS de zona de problema rojo/ámbar + marcas de límite) */
.barra { height: 12px; background: var(--crema-2); border-radius: 99px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); position: relative; overflow: hidden; }
.barra .bar-fill { display: block; height: 100%; border-radius: 99px; width: 50%; background: var(--verde); position: relative; z-index: 2; transition: width 600ms cubic-bezier(.2,.7,.2,1), background var(--transicion); }
.med-sec .barra { height: 9px; }
.zona { position: absolute; top: 0; bottom: 0; z-index: 1; }
.zona-rojo { left: 0; background: rgba(192,57,43,.18); border-radius: 99px 0 0 99px; }
.zona-ambar { background: rgba(213,155,46,.18); }
.marca-zona { position: absolute; top: -1px; bottom: -1px; width: 2px; z-index: 3; }
.marca-zona.roja { background: var(--rojo); opacity: .55; }
.marca-zona.ambar { background: var(--ambar); opacity: .6; }

/* Palabra de estado + tendencia ▴▾ + luz de alerta */
.mh-pie-der { display: flex; align-items: center; gap: 8px; }

/* Palabra de estado + tendencia ▴▾ */
.estado-palabra { font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.estado-palabra.solido { color: var(--verde); }
.estado-palabra.riesgo { color: var(--ambar); }
.estado-palabra.critico { color: var(--rojo); }
.tend { font-family: var(--fuente-mono); font-weight: 700; font-size: 1rem; line-height: 1; min-width: .7em; }
.tend.up { color: var(--verde); }
.tend.down { color: var(--rojo); }
.tend.none { color: transparent; }

/* Luz de alerta clickeable (el "tablero": prende cuando hay problema, click para ver) */
.med-alerta { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 8px; border: 1.5px solid; background: var(--papel); padding: 0; cursor: pointer; transition: var(--transicion); }
.med-alerta svg { width: 1rem; height: 1rem; }
.med-alerta.amarillo { color: var(--ambar); border-color: var(--ambar); background: #fdf5e6; }
.med-alerta.rojo { color: var(--rojo); border-color: var(--rojo); background: #fbeae6; }
.med-alerta:hover { transform: translateY(-1px); }
.med-sec .med-alerta { width: 22px; height: 22px; }
.med-alerta.pulsa { animation: lucePulsa 1.1s ease-out 2; }
@keyframes lucePulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } 30% { box-shadow: 0 0 0 5px rgba(192,57,43,.28); } }
.med-mensaje { margin-top: 9px; font-size: .86rem; line-height: 1.4; border-radius: 9px; padding: 9px 11px; border: 1.5px solid; }
.med-mensaje.amarillo { background: #fdf5e6; border-color: var(--ambar); color: #7a5a10; }
.med-mensaje.rojo { background: #fbeae6; border-color: var(--rojo); color: #8c2a1e; }

/* Rumbo: hacia qué final vas */
.rumbo { font-size: .86rem; color: var(--tinta-suave); background: var(--crema); border: 1.5px dashed var(--linea); border-radius: 10px; padding: 9px 12px; }
.rumbo b { color: var(--terracota-osc); font-family: var(--fuente-titulo); font-weight: 600; }

.medidor.pulso, .medidor-hero.pulso { animation: pulso 600ms ease-out; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(192,87,58,.0); }
  35% { box-shadow: 0 0 0 6px rgba(192,87,58,.22); }
  100% { box-shadow: 0 0 0 0 rgba(192,87,58,0); } }

/* ---------- Lo que producís (consecuencia, de-enfatizado, al pie) ---------- */
.producis {
  background: linear-gradient(180deg, var(--tinta) 0%, #20322b 100%); color: var(--papel);
  border-radius: var(--r); padding: 14px 16px; box-shadow: 0 8px 22px var(--sombra); position: relative; overflow: hidden;
}
.producis .prod-label { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; opacity: .72; display: flex; align-items: center; gap: 6px; }
.producis .prod-label svg { width: .95rem; height: .95rem; }
.producis .beneficio { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.7rem; letter-spacing: -.5px; margin: 3px 0 1px; }
.producis .beneficio::before { content: "$"; opacity: .55; font-size: .6em; vertical-align: top; margin-right: 2px; }
.producis .prod-frase { font-size: .82rem; opacity: .82; margin-top: 5px; }
.producis .tick-float { position: absolute; right: 14px; top: 12px; font-family: var(--fuente-mono); font-weight: 700; color: #aee0a2; opacity: 0; pointer-events: none; }

/* Rastro de la Deuda: grieta/sombra que crece en el borde sin mostrar el número */
.rastro-deuda {
  margin-top: 14px; height: 26px; border-radius: 10px; position: relative; overflow: hidden;
  border: 1.5px solid var(--linea); background: var(--papel);
}
.rastro-deuda .grieta {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(120,30,12,.5), transparent 60%),
    repeating-linear-gradient(115deg, rgba(60,20,10,.18) 0 2px, transparent 2px 9px);
  transition: opacity 900ms ease;
}
.rastro-deuda .et { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-tenue); }

/* Deltas flotantes */
.float-delta {
  position: fixed; z-index: 50; font-family: var(--fuente-mono); font-weight: 700; font-size: 1.05rem;
  pointer-events: none; text-shadow: 0 1px 0 var(--papel);
}
.float-delta.pos { color: var(--verde); }
.float-delta.neg { color: var(--rojo); }

/* ---------- Carta de decisión ---------- */
.escena { min-height: 60px; }
.carta {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--r);
  box-shadow: 8px 8px 0 var(--tinta); padding: 0; overflow: hidden;
}
.carta .cabecera {
  display: flex; gap: 14px; align-items: center; padding: 16px 20px;
  background: var(--crema-2); border-bottom: 2px solid var(--tinta);
}
.carta .retrato {
  width: 64px; height: 64px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--terracota); color: var(--papel); font-size: 2rem; border: 2px solid var(--tinta);
  overflow: hidden;
}
.carta .retrato img { width: 100%; height: 100%; object-fit: cover; }
.carta .meta-carta { flex: 1; }
.carta .nivel-tag { font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--terracota-osc); }
.carta .carta-personaje { display: inline-flex; align-items: center; gap: 5px; margin: 3px 0 1px;
  font-family: var(--fuente-mono); font-size: .74rem; font-weight: 700; letter-spacing: .3px;
  color: var(--tinta); background: var(--crema-2); border: 1.5px solid var(--linea);
  border-radius: 999px; padding: 2px 9px 2px 7px; }
.carta .carta-personaje .cp-ico svg { width: .82rem; height: .82rem; color: var(--terracota); }
.carta .titulo-carta { font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 600; margin-top: 2px; }
.carta .cuerpo { padding: 20px; }
.carta .narrativa { font-size: 1.08rem; line-height: 1.55; margin-bottom: 18px; }
.opciones { display: grid; gap: 11px; }
.opcion {
  text-align: left; background: var(--papel); border: 1.5px solid var(--linea); border-radius: 11px;
  padding: 13px 15px; font-size: 1rem; color: var(--tinta); transition: var(--transicion);
  display: flex; gap: 12px; align-items: flex-start;
}
.opcion:hover:not(:disabled) { border-color: var(--terracota); background: #fdf3e9; transform: translateX(3px); box-shadow: -3px 3px 0 var(--terracota); }
.opcion:disabled { opacity: .55; cursor: default; }
.opcion .marca { font-family: var(--fuente-mono); font-weight: 700; color: var(--terracota); flex: none; }
.opcion-cuerpo { flex: 1; min-width: 0; }
.opcion-texto { display: block; }

/* Preview de impacto (Mentor, antes de elegir) */
.opcion-preview { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.impactos { display: flex; flex-wrap: wrap; gap: 6px; }
.impacto-chip {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--fuente-mono);
  font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1.5px solid;
}
.impacto-chip svg { width: .85rem; height: .85rem; }
.impacto-chip.pos { color: #3f6b39; border-color: var(--verde); background: #e7f0e4; }
.impacto-chip.neg { color: #9c2f23; border-color: var(--rojo); background: #f8e7e3; }
.impacto-chip.pts { color: var(--terracota-osc); border-color: var(--terracota); background: #fdf0e8; }

/* Puntos por opción, revelados al pedir pista */
.op-pts { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-family: var(--fuente-mono); font-weight: 700; font-size: .82rem; padding: 3px 10px; border-radius: 99px; border: 1.5px solid; }
.op-pts svg { width: .9rem; height: .9rem; }
.op-pts.pos { color: #3f6b39; border-color: var(--verde); background: #e7f0e4; }
.op-pts.neg { color: #9c2f23; border-color: var(--rojo); background: #f8e7e3; }
.pista-puntos-nota { font-size: .82rem; margin-top: 6px; }
.opcion-motivo { font-size: .82rem; color: var(--tinta-suave); font-style: italic; }
.consec-motivo { margin-top: 8px; font-size: .92rem; color: var(--terracota-osc); font-weight: 600; }

/* Entrada / salida de cartas */
.carta-anim-in { animation: cartaIn 380ms cubic-bezier(.2,.8,.2,1); }
.carta-anim-out { animation: cartaOut 280ms ease-in forwards; }
@keyframes cartaIn { from { opacity: 0; transform: translateY(22px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
@keyframes cartaOut { to { opacity: 0; transform: translateY(-16px) scale(.98); } }

/* ---------- Estrellas por nivel (feedback de desempeño) ---------- */
.estrellas-box {
  margin-top: 14px; background: var(--crema); border: 2px solid var(--tinta);
  border-radius: var(--r); padding: 16px 18px; box-shadow: 4px 4px 0 var(--terracota);
}
.estrellas { display: inline-flex; gap: 4px; line-height: 1; }
.estrellas .estrella { color: var(--linea); }
.estrellas .estrella.llena { color: var(--terracota); }
.estrellas.grande { font-size: 2.1rem; }
.estrellas-box.no-superado { box-shadow: 4px 4px 0 var(--rojo); border-color: var(--rojo); }
.estrellas-veredicto { font-family: var(--fuente-titulo); font-size: 1.25rem; font-weight: 600; margin: 8px 0 12px; }
.criterios-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.criterios-list li { display: flex; gap: 9px; align-items: center; font-size: .95rem; }
.criterios-list .crit-mark { font-family: var(--fuente-mono); font-weight: 700; width: 1.2em; flex: none; }
.criterios-list li.ok { color: var(--tinta); }
.criterios-list li.ok .crit-mark { color: var(--verde); }
.criterios-list li.no { color: var(--tinta-tenue); }
.criterios-list li.no .crit-mark { color: var(--rojo); }

/* Resumen de estrellas en la pantalla final */
.estrellas-final { margin: 18px auto 4px; max-width: 520px; }
.ef-prom { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ef-num { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.05rem; }
.ef-detalle { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; font-family: var(--fuente-mono); font-size: .82rem; color: var(--terracota-osc); }
.ef-nivel { white-space: nowrap; }

/* ---------- Panel de Foco (capa de acciones por turno) ---------- */
.foco-panel {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--tinta); margin: 14px 0 0; padding: 0; overflow: hidden;
}
.foco-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--tinta);
  transition: background var(--transicion);
}
.foco-toggle:hover { background: var(--crema-2); }
.foco-caret { font-family: var(--fuente-mono); color: var(--terracota); width: 12px; flex: 0 0 auto; }
.foco-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.foco-dots { display: flex; gap: 5px; font-family: var(--fuente-mono); font-size: 1.15rem; line-height: 1; margin-left: 4px; }
.foco-mini { margin-left: auto; font-family: var(--fuente-mono); font-size: .74rem; color: var(--tinta-tenue); }
.foco-body { padding: 2px 14px 14px; }
.foco-dot.lleno { color: var(--terracota); }
.foco-dot.gastado { color: var(--tinta-tenue); }
.foco-dot.comido { color: var(--rojo); }
.foco-sub { font-size: .85rem; color: var(--tinta-tenue); margin: 4px 0 12px; }
.foco-sub.alerta { color: var(--terracota-osc); font-weight: 600; }
.foco-sub.bonus { color: var(--verde); font-weight: 600; }
.foco-dot.lleno.bonus-dot { color: var(--verde); }
.acciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 560px) { .acciones-grid { grid-template-columns: 1fr; } }
.accion-chip {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  background: var(--crema); border: 1.5px solid var(--linea); border-radius: 11px; padding: 10px 12px;
  transition: var(--transicion); color: var(--tinta);
}
.accion-chip:hover:not(:disabled) { border-color: var(--terracota); background: #fdf3e9; transform: translateY(-1px); box-shadow: 0 3px 0 var(--terracota); }
.accion-chip:disabled { opacity: .45; cursor: default; }
.accion-chip.usada { opacity: .5; }
.accion-chip.trampa { border-style: dashed; border-color: var(--terracota); }
.accion-ico { font-size: 1.4rem; flex: none; line-height: 1.1; color: var(--terracota); }
.accion-chip.trampa .accion-ico { color: var(--terracota-osc); }
.accion-txt { flex: 1; min-width: 0; }
.accion-nom { font-weight: 600; font-size: .95rem; }
.accion-costo { color: var(--terracota); font-family: var(--fuente-mono); font-size: .8rem; letter-spacing: 1px; }
.accion-desc { font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; margin-top: 2px; }

/* Carta delegada: el equipo decidió, vos reaccionás (cambia el "verbo") */
.carta-delegada { border-color: var(--verde); box-shadow: 8px 8px 0 var(--verde); }
.carta-delegada .cabecera { background: rgba(90,138,82,.12); border-bottom-color: var(--verde); }
.carta-delegada .retrato { background: var(--verde); }
.banner-delegada {
  background: var(--verde); color: var(--papel); font-family: var(--fuente-mono);
  font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  padding: 7px 16px; text-align: center;
}

/* Beat «el reporte te roba el turno»: textura gris/apagada, sin épica */
.carta-reporte { border-color: var(--tinta-tenue); box-shadow: 8px 8px 0 var(--tinta-tenue); }
.carta-reporte .cabecera { background: var(--crema-2); border-bottom-color: var(--tinta-tenue); filter: grayscale(.5); }
.carta-reporte .retrato { background: var(--tinta-tenue); }
.banner-reporte {
  background: var(--tinta-tenue); color: var(--papel); font-family: var(--fuente-mono);
  font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  padding: 7px 16px; text-align: center;
}

/* Consecuencia narrativa */
.consecuencia {
  margin-top: 4px; background: var(--crema-2); border-left: 4px solid var(--terracota);
  border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: 1.02rem;
}
.consecuencia .tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pri { font-family: var(--fuente-mono); font-size: .72rem; padding: 3px 9px; border-radius: 99px; border: 1.5px solid; }
.tag-pri.ok { color: #3f6b39; border-color: var(--verde); background: #e7f0e4; }
.tag-pri.no { color: #9c2f23; border-color: var(--rojo); background: #f8e7e3; }

/* ---------- Botones de acción ---------- */
.acciones { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  border: 2px solid var(--tinta); border-radius: 11px; padding: 12px 22px; font-size: 1rem; font-weight: 600;
  background: var(--tinta); color: var(--papel); transition: var(--transicion); box-shadow: 3px 3px 0 var(--terracota);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--terracota); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--terracota); }
.btn.sec { background: var(--papel); color: var(--tinta); box-shadow: 3px 3px 0 var(--linea); }
.btn.sec:hover { box-shadow: 5px 5px 0 var(--linea); }
.btn.terra { background: var(--terracota); border-color: var(--terracota-osc); box-shadow: 3px 3px 0 var(--tinta); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }

/* Pista */
.pista-box {
  margin-top: 14px; background: #fff7ea; border: 1.5px dashed var(--ambar); border-radius: 11px;
  padding: 13px 15px; font-size: .98rem; display: none;
}
.pista-box.show { display: block; animation: cartaIn 280ms ease; }
.pista-box .et { font-family: var(--fuente-mono); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ambar); display: block; margin-bottom: 5px; }

/* ---------- Pantallas (intro, informe, fin, reflexión) ---------- */
.pantalla { background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--r); padding: clamp(20px, 4vw, 38px); box-shadow: 8px 8px 0 var(--tinta); }
.pantalla h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -1px; }
.pantalla .lede { font-size: 1.15rem; color: var(--tinta-suave); max-width: 60ch; }
.pantalla .seccion { margin-top: 22px; }

.intro-hero { display: grid; gap: 6px; margin-bottom: 18px; }
.intro-hero .kicker { color: var(--terracota); text-transform: uppercase; letter-spacing: 3px; font-size: .8rem; font-weight: 700; }
.manifiesto-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.manifiesto-list li { display: flex; gap: 12px; padding: 11px 13px; background: var(--crema); border-radius: 10px; border: 1.5px solid var(--linea); }
.manifiesto-list .n { font-family: var(--fuente-mono); font-weight: 700; color: var(--terracota); flex: none; }
.manifiesto-list .t { font-weight: 600; }
.manifiesto-list .d { color: var(--tinta-suave); font-size: .92rem; }

.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 560px) { .modos { grid-template-columns: 1fr; } }
.modo-card { border: 2px solid var(--linea); border-radius: 12px; padding: 16px; background: var(--crema); transition: var(--transicion); text-align: left; }
.modo-card:hover { border-color: var(--terracota); }
.modo-card[aria-pressed="true"] { border-color: var(--tinta); background: var(--papel); box-shadow: 4px 4px 0 var(--terracota); }
.modo-card h3 { margin-bottom: 4px; }
.modo-card p { margin: 0; font-size: .92rem; color: var(--tinta-suave); }

/* Informe de nivel: curva de beneficio */
.curva-wrap { background: var(--crema); border: 1.5px solid var(--linea); border-radius: 12px; padding: 14px; }
.curva-wrap svg { width: 100%; height: auto; display: block; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }
.principios-balance { display: grid; gap: 6px; }
.pb-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.pb-row .barra { flex: 1; }
.pb-row .barra > i { transition: width 700ms ease; }

/* Iniciativas */
.iniciativas { display: grid; gap: 11px; margin-top: 8px; }
.inic-card { border: 1.5px solid var(--linea); border-radius: 12px; padding: 14px; background: var(--crema); display: grid; gap: 8px; }
.inic-card.estrella { border-color: var(--terracota); box-shadow: 0 0 0 1px var(--terracota) inset; }
.inic-card .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inic-card .nom { font-weight: 700; font-family: var(--fuente-titulo); font-size: 1.05rem; }
.inic-card .costo { font-family: var(--fuente-mono); font-weight: 700; white-space: nowrap; }
.inic-card .desc { font-size: .92rem; color: var(--tinta-suave); }
.inic-card .pri { display: flex; gap: 5px; }
.inic-card.activa { opacity: .7; background: var(--papel); }
.inic-card.activa .btn { background: var(--verde); border-color: var(--verde); box-shadow: none; }
.estrella-badge { font-family: var(--fuente-mono); font-size: .66rem; background: var(--terracota); color: var(--papel); padding: 2px 7px; border-radius: 99px; letter-spacing: 1px; }

/* Resultado final */
.grado-final { font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(4rem, 16vw, 9rem); line-height: .9; color: var(--terracota); letter-spacing: -3px; }
.titulo-final { font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 600; }
.stats-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 12px; margin-top: 18px; }
.stat { background: var(--crema); border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px; text-align: center; }
.stat .v { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.5rem; }
.stat .k { font-size: .76rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tinta-tenue); }

/* Reflexión: tabla de principios */
.reflexion-tabla { width: 100%; border-collapse: collapse; margin-top: 10px; }
.reflexion-tabla th, .reflexion-tabla td { text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--linea); vertical-align: top; }
.reflexion-tabla th { font-size: .76rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tinta-tenue); }
.reflexion-tabla .bal { font-family: var(--fuente-mono); font-weight: 700; }
.reflexion-tabla .bal.pos { color: var(--verde); }
.reflexion-tabla .bal.neg { color: var(--rojo); }
.reflexion-tabla .bal.neu { color: var(--tinta-tenue); }

/* Game over */
.gameover .grado-final { color: var(--rojo); }

/* Confeti canvas */
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* Screen shake */
.shake { animation: shake 420ms cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--tinta); color: var(--papel); padding: 12px 20px; border-radius: 12px; font-size: .95rem;
  box-shadow: 0 8px 20px var(--sombra); opacity: 0; transition: var(--transicion); z-index: 70; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.muted-text { color: var(--tinta-tenue); }
.center { text-align: center; }
.mt { margin-top: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
hr.fina { border: none; border-top: 1.5px solid var(--linea); margin: 18px 0; }

/* ---------- Accesibilidad: reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .barra > i { transition: none; }
}
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

/* Foco visible para teclado en opciones */
.opcion:focus-visible { border-color: var(--terracota); box-shadow: -3px 3px 0 var(--terracota); }

/* ---------- Panel tycoon: línea de Legado ---------- */
.producis .legado-line { font-size: .8rem; opacity: .9; margin: 0 0 4px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.producis .legado-line .num { color: #aee0a2; font-weight: 700; }
.producis .legado-line .muted-tip { opacity: .6; font-size: .74rem; }

/* ---------- Onboarding / ayuda ---------- */
.ayuda-grid { display: grid; gap: 12px; margin-top: 16px; }
.ayuda-bloque { display: flex; gap: 14px; align-items: center; background: var(--crema); border: 1.5px solid var(--linea); border-radius: 12px; padding: 15px 16px; }
.ayuda-bloque h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ayuda-bloque p { margin: 0; color: var(--tinta-suave); font-size: .96rem; line-height: 1.5; }
.ayuda-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--terracota); background: var(--papel); border: 1.5px solid var(--linea); border-radius: 11px; }
.ayuda-ico .ico svg { width: 1.5rem; height: 1.5rem; }

/* Visor paginado de ayuda (un concepto por pantalla, tipo slides) */
.ayuda-paginada { margin-top: 16px; }
.ayuda-stage { display: flex; min-height: 150px; }
.ayuda-stage .ayuda-bloque { width: 100%; align-items: flex-start; }
.ayuda-stage .ayuda-bloque p { font-size: 1rem; }
.ayuda-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.ayuda-nav .btn { white-space: nowrap; }
.ayuda-center { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ayuda-dots { display: flex; gap: 7px; }
.ayuda-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--linea); cursor: pointer; transition: var(--transicion); }
.ayuda-dot.on { background: var(--terracota); transform: scale(1.15); }
.ayuda-prog { font-family: var(--fuente-mono); font-size: .7rem; color: var(--tinta-tenue); }
@media (max-width: 560px) {
  .ayuda-stage { min-height: 200px; }
  .ayuda-stage .ayuda-bloque { flex-direction: column; gap: 10px; }
  .ayuda-nav .btn { padding: 11px 14px; font-size: .9rem; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(43,38,32,.55);
  display: grid; place-items: center; padding: 18px; animation: fadeIn 180ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--r);
  box-shadow: 10px 10px 0 var(--tinta); max-width: 720px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 6px; }
.modal-head h2 { margin: 0; }

/* ---------- Debrief / reflexión interrogativa ---------- */
.veredicto-box {
  margin-top: 16px; background: var(--tinta); color: var(--papel); border-radius: 12px;
  padding: 16px 20px; font-family: var(--fuente-titulo); font-size: 1.25rem; line-height: 1.35;
  border-left: 6px solid var(--terracota);
}
.recap-list { display: grid; gap: 12px; margin-top: 8px; }
.recap-card {
  background: var(--papel); border: 1.5px solid var(--linea); border-left: 5px solid var(--terracota);
  border-radius: 0 12px 12px 0; padding: 14px 16px;
}
.recap-card.bien { border-left-color: var(--verde); background: rgba(90,138,82,.06); }
.recap-card.alt { border-left-color: var(--ambar); }
.recap-momento { font-family: var(--fuente-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: 1px; color: var(--terracota-osc); margin-bottom: 6px; }
.recap-card .et { font-weight: 700; color: var(--tinta); }
.recap-elegiste { margin-bottom: 4px; }
.recap-costo { margin-bottom: 6px; }
.recap-conse { font-size: .92rem; font-style: italic; }
.preguntas-list { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.preguntas-list li { font-size: 1.05rem; line-height: 1.45; padding-left: 4px; }
.preguntas-list li::marker { color: var(--terracota); font-family: var(--fuente-mono); font-weight: 700; }

/* ---------- Avisos contextuales por zona (verde/amarillo/rojo) ---------- */
#alertas-zona { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 78; display: flex; flex-direction: column; gap: 8px; width: min(440px, 92vw); pointer-events: none; }
.alerta-zona {
  pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  border: 2px solid; border-radius: 12px; padding: 11px 14px; font-size: .92rem; line-height: 1.4;
  background: var(--papel); box-shadow: 0 8px 22px rgba(43,38,32,.2);
  animation: alertaIn 300ms cubic-bezier(.2,.8,.2,1);
}
.alerta-zona .ico { flex: none; margin-top: 1px; }
.alerta-zona .ico svg { width: 1.25rem; height: 1.25rem; }
.alerta-zona.amarillo { border-color: var(--ambar); background: #fdf5e6; color: #7a5a10; }
.alerta-zona.amarillo .ico { color: var(--ambar); }
.alerta-zona.rojo { border-color: var(--rojo); background: #fbeae6; color: #8c2a1e; }
.alerta-zona.rojo .ico { color: var(--rojo); }
.alerta-zona.verde { border-color: var(--verde); background: #eaf2e7; color: #34602e; }
.alerta-zona.verde .ico { color: var(--verde); }
@keyframes alertaIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------- Coachmark just-in-time (tarjeta vertical) ---------- */
.coach {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 75; width: min(420px, 92vw); display: block;
  background: var(--papel); border: 2px solid var(--tinta); border-left: 6px solid var(--terracota);
  border-radius: 14px; box-shadow: 6px 6px 0 var(--tinta), 0 14px 34px rgba(43,38,32,.22); padding: 16px 18px;
  animation: cartaIn 320ms cubic-bezier(.2,.8,.2,1);
}
.coach-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.coach-titulo { font-family: var(--fuente-titulo); font-size: 1.12rem; line-height: 1.15; }
.coach-texto { margin: 0 0 14px; font-size: .94rem; color: var(--tinta-suave); line-height: 1.5; }
.coach-emo { flex: none; line-height: 1; }
.coach-ok { width: 100%; padding: 11px 14px; }

/* En mobile: bottom-sheet a ancho completo, botón en zona del pulgar */
@media (max-width: 760px) {
  .coach {
    left: 0; right: 0; bottom: 0; transform: none; width: auto;
    border-radius: 16px 16px 0 0; border-width: 2px 0 0; border-left: none; border-top: 5px solid var(--terracota);
    box-shadow: 0 -10px 30px rgba(43,38,32,.25); padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .coach-texto { font-size: .98rem; }
}

/* ---------- "Qué está en juego" (antes de decidir) ---------- */
.en-juego {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  background: var(--crema-2); border-radius: 9px; padding: 8px 12px; margin-bottom: 14px;
  font-size: .86rem;
}
.en-juego .ej-pri { color: var(--tinta-suave); }
.en-juego .ej-alerta { font-family: var(--fuente-mono); font-weight: 700; color: var(--terracota-osc); }

/* Tooltip de principio (Modo Mentor) — superficie sólida para legibilidad sobre el fondo */
.mentor-tip {
  display: flex; gap: 7px; align-items: center; font-size: .84rem; color: var(--tinta-suave);
  background: var(--crema-2); border: 1.5px solid var(--linea); border-radius: 9px; padding: 8px 12px;
}
.mentor-tip .ico { color: var(--terracota); }

/* ---------- Nota causal (post-decisión, Mentor) ---------- */
.nota-causal {
  margin-top: 10px; background: #fff7ea; border: 1.5px dashed var(--ambar); border-radius: 10px;
  padding: 10px 12px; font-size: .92rem; line-height: 1.45;
}
.nota-causal .et { font-weight: 700; color: var(--ambar); }

/* ---------- Pantalla de leverage (antes del jefe final) ---------- */
.lev-list { display: grid; gap: 12px; margin-top: 16px; }
.lev-row { display: flex; gap: 14px; align-items: flex-start; background: var(--papel); border: 1.5px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.lev-row.ok { border-left: 5px solid var(--verde); }
.lev-row.no { border-left: 5px solid var(--rojo); }
.lev-mark { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.3rem; flex: none; line-height: 1.2; }
.lev-row.ok .lev-mark { color: var(--verde); }
.lev-row.no .lev-mark { color: var(--rojo); }
.lev-text { flex: 1; }
.lev-text .num { font-family: var(--fuente-mono); font-weight: 700; }

/* ---------- Nota del tick (↗/↘ rinde más/menos) ---------- */
.tick-nota { min-height: 1.1em; font-size: .78rem; margin-top: 8px; line-height: 1.3; }
.tick-nota.pos { color: #aee0a2; }
.tick-nota.neg { color: #f0b6a6; }
.tick-nota.neu { color: rgba(251,246,236,.6); }

/* ============================================================
   PULIDO: scrim de juego, íconos, game-feel y MOBILE
   ============================================================ */

/* Velo atmosférico sobre el fondo en la pantalla de decisión */
#fondo-scrim.activo.juego { background: radial-gradient(150% 130% at 50% 22%, rgba(43,38,32,.22), rgba(43,38,32,.5)); }

/* Íconos en chips / tarjetas de modo / coachmarks / finales / retrato */
.chip-ico { color: var(--terracota); }
.chip .chip-ico svg { width: 1em; height: 1em; }
.inicio-modo-head { display: flex; align-items: center; gap: 8px; }
.inicio-modo-ico { color: var(--terracota); }
.inicio-modo-ico svg { width: 1.3rem; height: 1.3rem; }
.coach-emo { color: var(--terracota); }
.coach-emo .ico svg { width: 1.7rem; height: 1.7rem; }
.icono-final { color: var(--rojo); display: grid; place-items: center; margin: 0 auto 8px; }
.icono-final .ico svg { width: clamp(3.4rem, 12vw, 5.5rem); height: clamp(3.4rem, 12vw, 5.5rem); stroke-width: 1.6; }
.retrato .ico svg { width: 2rem; height: 2rem; }

/* Sombras suaves en capas (profundidad sin perder el look editorial) */
.pantalla, .producis, .foco-panel, .inicio-panel, .estrellas-box {
  box-shadow: 8px 8px 0 var(--tinta), 0 14px 34px rgba(43,38,32,.16);
}
.carta { box-shadow: 8px 8px 0 var(--tinta), 0 16px 38px rgba(43,38,32,.18); }

/* Entrada escalonada de cada pantalla (suave, < 300 ms, ease-out) */
.pantalla, .inicio-panel { animation: pantallaIn 260ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes pantallaIn { from { opacity: 0; transform: scale(.985) translateY(8px); } to { opacity: 1; transform: none; } }
.layout > * { animation: pantallaIn 280ms cubic-bezier(.2,.7,.2,1) both; }
.layout > .estado { animation-delay: 40ms; }
.layout > .escena { animation-delay: 60ms; }
.layout > .producis { animation-delay: 90ms; }
.layout > .rastro-deuda { animation-delay: 110ms; }

/* Micro-feedback: scale en :active (el lift de hover ya existe) */
.btn:active, .opcion:active, .accion-chip:active, .inicio-modo:active, .iconbtn:active, .modo-card:active { transform: scale(.97); }

/* ---------------- MOBILE — reflujo vertical, una pantalla por estado ---------------- */
@media (max-width: 760px) {
  .btn, .opcion, .iconbtn, .inicio-modo, .accion-chip { min-height: 44px; }
  .opcion { padding: 14px 15px; }
  #app { padding: 14px 12px 40px; }

  /* Pantalla de juego: Energía héroe + secundarios arriba; carta protagonista */
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "estado" "escena" "producis" "rastro"; gap: 12px; }
  /* En el drawer los medidores secundarios se APILAN (1 columna) para que cada uno
     —y sobre todo su mensaje de alerta— tenga el ancho completo y no quede amontonado. */
  .medidores-sec { grid-template-columns: 1fr; gap: 9px; }
  .med-sec { padding: 9px 12px 10px; }
  .ms-top { gap: 8px; margin-bottom: 6px; }
  .ms-nombre { font-size: .86rem; }
  .mh-valor { font-size: 1.7rem; }

  /* Drawer del tablero un poco más ancho y cómodo en celular */
  .tablero-drawer { width: 90vw; max-width: 360px; padding: 16px 14px 26px; }
  .med-mensaje { font-size: .9rem; }

  .producis .beneficio { font-size: 1.6rem; }

  /* Foco: grilla de 2 columnas (todas las acciones visibles, sin scroll horizontal) */
  .acciones-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .accion-chip { padding: 9px 10px; gap: 8px; }
  .accion-ico { font-size: 1.15rem; }
  .accion-nom { font-size: .9rem; }
  .accion-desc { font-size: .73rem; line-height: 1.3; }

  /* Sombras menos agresivas en pantallas chicas */
  .pantalla, .producis, .foco-panel, .inicio-panel, .estrellas-box { box-shadow: 4px 4px 0 var(--tinta), 0 10px 22px rgba(43,38,32,.15); }
  .carta { box-shadow: 4px 4px 0 var(--tinta); }

  /* Pantalla de inicio en retrato: panel full-width, CTA en zona del pulgar */
  .inicio { min-height: 100dvh; align-items: stretch; padding: 0; }
  .inicio-panel { max-width: none; width: 100%; border-radius: 18px 18px 0 0; border-width: 2px 0 0; box-shadow: none; margin-top: auto; background: rgba(251,246,236,.93); backdrop-filter: blur(8px); }
  .inicio-modos { flex-direction: column; }
  .inicio-acciones { flex-direction: column; }
  .inicio-acciones .btn { width: 100%; }
  .inicio-links { justify-content: space-between; }
  #fondo-scrim.activo.izquierda { background: linear-gradient(180deg, rgba(43,38,32,.12) 0%, rgba(244,236,222,.35) 55%, rgba(244,236,222,.7) 100%); }

  /* Topbar: compacto */
  .topbar { gap: 8px; }
  .brand .sub { display: none; }
  .topbar .controls { gap: 6px; }
  .topbar .controls .chip { font-size: .72rem; padding: 4px 8px; }
  .iconbtn { padding: 8px 9px; }
  #btn-ayuda { font-size: 0; }            /* en mobile solo el ícono de ayuda */
  #btn-ayuda svg { width: 1.1rem; height: 1.1rem; }
}