:root{
  --bg:#14161a; --surface:#1c1f25; --surface-2:#24272e; --border:#2e333d;
  --text:#dfe3ea; --muted:#8b919e; --muted-strong:#9aa3b2;
  --accent:#ff5d6c; --accent-soft:#33222a; --ko:#ffd479;
  --ok:#4ade80; --bad:#f87171; --warn:#f0c674; --info:#7aa2ff;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;
  --shadow:0 6px 18px rgb(0 0 0/.35);
  --focus:0 0 0 3px rgb(255 93 108/.45);
  --fs-xs:.8rem; --fs-sm:.88rem; --fs-base:1rem; --fs-lg:1.15rem;
  --fs-xl:1.4rem; --fs-2xl:1.75rem;
  --read-size:1.0625rem; --read-line:1.75; --read-measure:72ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     margin:0;background:var(--bg);color:var(--text)}
a{color:var(--accent)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.page{max-width:var(--read-measure);margin:0 auto;padding:1.3rem 1.1rem 5rem}
.panel{background:var(--surface);border:1px solid var(--border);
       border-radius:var(--radius);padding:1rem 1.1rem;margin:.9rem 0}
.panel h2{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
          color:var(--accent);margin:0 0 .6rem}
.btn{background:var(--accent);color:#1a0d10;border:none;border-radius:10px;
     padding:.65rem 1.3rem;font-size:var(--fs-base);font-weight:600;cursor:pointer;
     font-family:inherit}
.btn:hover:not(:disabled){filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);font-weight:500}
.btn.ghost:hover{color:var(--text);border-color:var(--accent)}
.btn.sm{padding:.4rem .9rem;font-size:var(--fs-sm)}
.btn.ok{background:var(--ok);color:#0d1a12}
.pill{border:1px solid var(--border);background:var(--surface-2);color:var(--text);
      border-radius:var(--radius-pill);padding:.45rem .95rem;min-height:44px;cursor:pointer;font-size:var(--fs-sm);
      transition:border-color .15s,background .15s,color .15s}
.pill:hover:not(:disabled){border-color:var(--accent)}
.pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.pill:disabled{opacity:.4;cursor:not-allowed}
.pill .sub{color:var(--muted);font-weight:400;font-size:.82em}
.aviso{border-radius:11px;padding:.85rem 1rem;margin:1rem 0;font-size:var(--fs-sm)}
.aviso.rojo{background:#2e1a1d;border:1px solid #6b2f38;color:#ffc9cf}
.aviso.verde{background:#14251b;border:1px solid #2f6b45;color:#b7e6c8}
.aviso.azul{background:#182135;border:1px solid #2f4a6b;color:#c2d6f5}
.aviso.ambar{background:#2a1f14;border:1px solid #5a4020;color:#f0c674}
.hablar{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
        color:var(--muted);cursor:pointer;font-size:.95rem;line-height:1;
        padding:.15rem .45rem;margin-left:.4rem;vertical-align:middle}
.hablar:hover{border-color:var(--accent);color:var(--text)}
.tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:.7rem 0}
.tabla th{text-align:left;color:var(--muted-strong);font-weight:600;font-size:.72rem;
          text-transform:uppercase;letter-spacing:.05em;padding:.45rem .5rem;
          border-bottom:1px solid var(--border)}
.tabla td{padding:.5rem;border-bottom:1px solid var(--border);vertical-align:top}
.barra{height:6px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden;margin:.5rem 0}
.barra i{display:block;height:100%;background:var(--ok);transition:width .3s}
.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
      padding:.35rem .7rem;font-size:var(--fs-xs);color:var(--muted)}
.chip b{color:var(--text)}
.prosa{font-size:var(--read-size);line-height:var(--read-line)}
.prosa p{margin:.7rem 0}