/* ==========================================================================
   Carcasa · capas: fondo fotográfico → hilo 3D → contenido → controles
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--background); color: var(--text-primary);
  font-family: var(--font-body); font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden;
  transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: 8px; }

.scene, .scene *, .dock, .dock * {
  transition-property: color, background-color, border-color, fill, stroke, box-shadow, outline-color;
  transition-duration: var(--theme-fade); transition-timing-function: ease;
}
html.no-theme-fade body, html.no-theme-fade .scene, html.no-theme-fade .scene * { transition: none !important; }
html.capture .dock { display: none; }
html.capture *, html.capture *::before { transition: none !important; }

/* ---------- Capa 1: fondos fotográficos a sangre ---------- */
#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--background); }
#backdrop::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(40% 50% at 78% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
              radial-gradient(45% 55% at 12% 88%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
}
.bd { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.bd.on { visibility: visible; }
.bd-img { position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; }
.bd::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bd[data-scrim="left"]::after { background: linear-gradient(90deg, rgb(var(--scrim) / 0.95) 0%, rgb(var(--scrim) / 0.8) 36%, rgb(var(--scrim) / 0.12) 72%, rgb(var(--scrim) / 0.3) 100%), linear-gradient(0deg, rgb(var(--scrim) / 0.75), transparent 32%); }
.bd[data-scrim="right"]::after { background: linear-gradient(270deg, rgb(var(--scrim) / 0.95) 0%, rgb(var(--scrim) / 0.8) 38%, rgb(var(--scrim) / 0.1) 74%), linear-gradient(0deg, rgb(var(--scrim) / 0.7), transparent 32%); }
.bd[data-scrim="bottom"]::after { background: linear-gradient(0deg, rgb(var(--scrim) / 0.97) 0%, rgb(var(--scrim) / 0.72) 42%, rgb(var(--scrim) / 0.08) 76%, rgb(var(--scrim) / 0.4) 100%); }
.bd[data-scrim="full"]::after { background: rgb(var(--scrim) / 0.82); }
.bd[data-scrim="soft"]::after { background: radial-gradient(90% 100% at 30% 60%, rgb(var(--scrim) / 0.86), rgb(var(--scrim) / 0.45)); }
[data-theme="claro"] .bd-img { filter: saturate(0.8) brightness(1.1); }

/* ---------- Capa 2: hilo 3D ---------- */
#thread { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }

/* ---------- Grano estático ---------- */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
html.no-texture .grain { display: none; }

/* ---------- Capa 3: escenario ---------- */
#stage { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; z-index: 2; transform-origin: 50% 50%; }
.scene {
  position: absolute; inset: 0; padding: var(--margin) var(--margin) 112px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start;
  container-type: inline-size; container-name: scene; visibility: hidden;
}
.scene.is-active { visibility: visible; }
.scene > * { min-width: 0; }
.sc-reader-media { display: none; }

/* ---------- Tipografía ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px; align-self: start; justify-self: start; width: max-content; max-width: 100%;
  padding: 9px 18px 9px 14px; border-radius: 999px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-primary); background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  border: var(--hair) solid var(--border-strong); backdrop-filter: blur(12px);
}
.kicker .sep { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); flex: none; }
.display, .title, .title-2, .title-3 {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--display-track); text-wrap: balance; font-optical-sizing: auto;
}
.display { font-size: var(--t-display); line-height: var(--lh-tight); }
.title { font-size: var(--t-h1); line-height: var(--lh-title); }
.title-2 { font-size: var(--t-h2); line-height: 1.02; }
.title-3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; font-stretch: 92%; }
:is(.display, .title, .title-2, .title-3) em {
  font-style: normal; color: var(--accent);
  background: linear-gradient(100deg, var(--accent-strong), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:is(.display, .title, .title-2, .title-3) em div { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lede { font-size: var(--t-lede); line-height: 1.34; color: var(--text-secondary); font-weight: 400; text-wrap: pretty; max-width: 30ch; }
.body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-secondary); text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.42; color: var(--text-secondary); }
.label { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--accent); letter-spacing: 0.01em; }
.source { font-size: 17px; line-height: 1.4; color: var(--text-muted); }
.source b { color: var(--text-secondary); font-weight: 600; }
.num { font-family: var(--font-display); font-weight: 800; font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; }
.accent { color: var(--accent); }
.muted { color: var(--text-muted); }
.synthetic { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--text-secondary); border: 1px dashed var(--border-strong); padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface-solid) 60%, transparent); }

/* Vidrio: solo donde el texto va sobre fotografía */
.glass {
  background: var(--surface); border: var(--hair) solid var(--border); border-radius: var(--radius-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-card);
}
html.q-estatico .glass, html.q-ligero .glass { backdrop-filter: none; background: var(--surface-solid); }

/* Botones: la física la aplica Motion sobre .btn-face */
.btn { position: relative; display: inline-flex; border: 0; background: none; cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.btn-face { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: inherit; font-size: 21px; font-weight: 600; line-height: 1; }
.btn.primary .btn-face { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--glow); }
.btn.ghost .btn-face { border: var(--hair) solid var(--border-strong); color: var(--text-primary); background: color-mix(in srgb, var(--surface-solid) 55%, transparent); }

/* ---------- Progreso: el hilo en miniatura ---------- */
#chrome { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; z-index: 5; transition: opacity 400ms ease; }
#chrome.hidden { opacity: 0; }
#chrome .where { position: absolute; left: var(--margin); bottom: 44px; font-size: 16px; font-weight: 600; color: var(--text-muted); }
#chrome .where b { color: var(--text-primary); font-weight: 600; }
#chrome .count { position: absolute; right: var(--margin); bottom: 44px; font-size: 16px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#chrome .count b { color: var(--accent); }
#chrome svg { position: absolute; left: 0; bottom: 0; width: 1600px; height: 44px; overflow: visible; }
#chrome .track { fill: none; stroke: var(--border); stroke-width: 2; }
#chrome .progress { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
#chrome .mark { fill: var(--background); stroke: var(--border-strong); stroke-width: 2; }
#chrome .mark.on { fill: var(--accent); stroke: var(--accent); }
#chrome .head { fill: var(--accent-strong); }

/* ---------- Controles ---------- */
.dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; gap: 4px; padding: 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent); border: var(--hair) solid var(--border);
  box-shadow: var(--shadow-card); transition: opacity 300ms ease, transform 300ms var(--ease-out);
}
.dock.dim:not(:focus-within):not(:hover) { opacity: 0; transform: translateY(8px); pointer-events: none; }
.dock button { border: 0; background: none; cursor: pointer; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); display: inline-flex; gap: 6px; align-items: center; }
.dock button:hover, .dock button[aria-expanded="true"], .dock button[aria-pressed="true"] { background: var(--background-2); color: var(--text-primary); }
.dock-home { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.dock-home:hover { background: var(--background-2); }
.dock kbd { font-family: inherit; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.panel {
  position: fixed; right: 16px; bottom: 72px; z-index: 31; width: 330px; padding: 18px; border-radius: 18px;
  background: var(--surface-solid); border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); color: var(--text-primary);
}
.panel[hidden] { display: none; }
.panel fieldset { border: 0; margin-bottom: 16px; }
.panel legend { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.panel .opts { display: grid; gap: 6px; }
.panel label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.panel label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.panel input { accent-color: var(--accent); }
.panel .sw { width: 30px; height: 18px; border-radius: 5px; display: inline-grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--border); flex: none; }
.panel .reset { font-size: 13px; border: 1px solid var(--border); background: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--text-secondary); }

dialog.index { margin: auto; width: min(1100px, 94vw); max-height: 86vh; padding: 28px 32px; border-radius: 22px; background: var(--surface-solid); color: var(--text-primary); border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); }
dialog.index::backdrop { background: rgb(3 8 18 / 0.6); }
dialog.index h2 { font-size: 14px; font-weight: 700; color: var(--accent); margin: 20px 0 10px; }
dialog.index h2:first-of-type { margin-top: 0; }
dialog.index ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
dialog.index button { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--background-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 30px 1fr; gap: 6px; font-size: 14px; line-height: 1.3; }
dialog.index button:hover { border-color: var(--accent); }
dialog.index button[aria-current="true"] { border-color: var(--accent); box-shadow: var(--glow); }
dialog.index .n { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
dialog.index .close { position: absolute; top: 14px; right: 16px; }

.blackout { position: fixed; inset: 0; background: #000; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.blackout.on { opacity: 1; pointer-events: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Lectura y móvil: reflujo real, la foto de cada escena va arriba ---------- */
html.reader, html.reader body { overflow: auto; height: auto; }
html.reader #stage { position: relative; left: auto; top: auto; width: min(1120px, 100%); height: auto; transform: none !important; margin: 0 auto; }
html.reader .scene { position: relative; inset: auto; visibility: visible; padding: 56px 24px; border-bottom: var(--hair) solid var(--border); display: block; }
html.reader .scene > * + * { margin-top: 20px; }
html.reader #chrome, html.reader #thread, html.reader #backdrop .bd { display: none; }
html.reader [data-step] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
html.reader .scene * { transform: none !important; }
html.reader .sc-reader-media { display: block; margin: -56px -24px 28px; aspect-ratio: 16 / 9; overflow: hidden; }
html.reader .sc-reader-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  html.reader { --t-display: 54px; --t-h1: 42px; --t-h2: 34px; --t-h3: 26px; --t-lede: 21px; --t-body: 18px; --t-small: 16px; --t-label: 14px; }
  html.reader .scene { padding: 40px 18px; }
  html.reader .sc-reader-media { margin: -40px -18px 22px; aspect-ratio: 4 / 3; }
  .dock { left: 8px; right: 8px; justify-content: space-between; }
  .dock [data-a="full"], .dock [data-a="presenter"], .dock kbd { display: none; }
}
@media (min-width: 701px) {
  html.reader { --t-display: 80px; --t-h1: 58px; --t-h2: 46px; --t-h3: 30px; --t-lede: 25px; --t-body: 21px; --t-small: 18px; --t-label: 15px; }
}

/* ---------- Impresión ---------- */
@page { size: 1600px 900px; margin: 0; }
@media print {
  html, body { overflow: visible; height: auto; }
  #thread, .grain, #chrome, .dock, .panel, dialog, .blackout, #backdrop { display: none !important; }
  #stage { position: static; transform: none !important; width: 1600px; height: auto; }
  .scene { position: relative; visibility: visible !important; width: 1600px; height: 900px; break-after: page; background: var(--background); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scene * { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body.print-only-acta .scene:not([data-id="acta"]) { display: none; }
}
/* En tema claro las fotos quedan más veladas: el texto oscuro necesita contraste en toda la escena */
[data-theme="claro"] .bd::before { content: ""; position: absolute; inset: 0; background: rgb(238 242 248 / 0.38); z-index: 1; pointer-events: none; }
[data-theme="claro"] .bd::after { z-index: 2; }

/* Ajustes: borrar datos de prueba del encuentro */
.panel .wipe { margin-top: 10px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--risk) 60%, transparent); background: transparent; color: var(--risk); font: 600 15px var(--font-body); cursor: pointer; }
.panel .wipe.armed { background: var(--risk); color: var(--background); }
.panel .wipe-help { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }