/* Tokens del manual (docs/diseno/sitio.html, "Site prototype: tokens"). Retícula de 8 px. */
:root {
  --bg: #F3EEE3; --card: #FBF8F1; --ink: #1B1F3B; --line: #D9D2C2; --mut: #4F5470;
  --y: #FFD23F; --on-y: #1B1F3B; --ok: #1E8E5A; --err: #B3261E;
  --fd: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="night"] {
  --bg: #080A1E; --card: #10143A; --ink: #F3EEE3; --line: #252A5C; --mut: #A9AED2;
  --ok: #3DDC97; --err: #FF8A7A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--fb);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
[hidden] { display: none !important; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 640px; margin: 0 auto 32px; }
.logo { margin: 0; line-height: 0; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font: 500 14px/1 var(--fb); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; }
.demo { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; }
.title { font: 700 32px/1.25 var(--fd); margin: 0; overflow-wrap: anywhere; }
.step { display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.step label, .modes legend { font-weight: 600; }
.modes { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.modes legend { margin-bottom: 8px; }
input { font: 400 16px/1.5 var(--fb); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; min-height: 48px; width: 100%; }
.modes input { width: auto; min-height: 0; }
.btn { font: 600 16px/1 var(--fb); color: var(--on-y); background: var(--y); border: 0; border-radius: 999px; padding: 16px 24px; min-height: 48px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: .6; cursor: progress; }
.banner { margin: 0; padding: 16px; border-radius: 16px; border: 1.5px solid var(--y); background: var(--card); overflow-wrap: anywhere; }
.banner.expired, .banner.unavailable, .banner.not_human, .banner.invalid { border-color: var(--err); }
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.msg { padding: 8px 16px; border-radius: 16px; max-width: 85%; overflow-wrap: anywhere; }
.msg.user { justify-self: end; background: var(--ink); color: var(--bg); }
.msg.kumio { justify-self: start; background: var(--card); border: 1px solid var(--line); }
.msg.example { border-style: dashed; }
.code { font: 700 32px/1.25 var(--fd); letter-spacing: .16em; margin: 0; text-align: center; }
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 10; transition: opacity .4s ease, visibility .4s; }
.splash.gone { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }