:root { --fondo:#f6f7f9; --panel:#fff; --texto:#1c2430; --suave:#5b6675; --borde:#dfe3e8; --acento:#1f5fbf;
  --aviso:#9a5b00; --aviso-fondo:#fff4e0; --error:#a3261c; --sim:#6b3fa0; --sim-fondo:#efe7fa; --real:#1b6e3a; --real-fondo:#e5f4ea; }
@media (prefers-color-scheme: dark) { :root { --fondo:#12161c; --panel:#1b212a; --texto:#e6e9ee; --suave:#9aa5b4; --borde:#2c3440;
  --acento:#6ea0ff; --aviso:#ffcc80; --aviso-fondo:#3a2c12; --error:#ff8a80; --sim:#c9a7f2; --sim-fondo:#2e2340; --real:#8fdca8; --real-fondo:#173322; } }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--fondo); color:var(--texto); }
header { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:var(--panel); border-bottom:1px solid var(--borde); }
.marca-app { font-weight:700; }
nav { display:flex; flex-wrap:wrap; gap:.25rem .75rem; align-items:center; }
nav a { color:var(--acento); text-decoration:none; padding:.25rem 0; }
nav a[aria-current="page"] { font-weight:700; border-bottom:2px solid var(--acento); }
form.salir { margin:0; }
button { font:inherit; padding:.45rem .9rem; border-radius:6px; border:1px solid var(--borde); background:var(--panel); color:var(--texto); cursor:pointer; }
button.principal { background:var(--acento); border-color:var(--acento); color:#fff; width:100%; }
.entorno { padding:.5rem 1rem; background:var(--aviso-fondo); color:var(--aviso); font-size:.9rem; }
main { padding:1rem; max-width:1200px; margin:0 auto; }
h1 { font-size:1.3rem; margin:.25rem 0 1rem; }
h2 { font-size:1rem; margin:0 0 .5rem; }
.grilla { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 760px) { .grilla.dos { grid-template-columns:1fr 1fr; } .grilla.tres { grid-template-columns:repeat(3, 1fr); } }
.panel { background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:1rem; min-width:0; }
.panel.alerta { border-color:var(--aviso); }
dl.cifras { display:grid; grid-template-columns:1fr auto; gap:.25rem 1rem; margin:0; }
dl.cifras dt { color:var(--suave); }
dl.cifras dd { margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--borde); vertical-align:top; }
th { color:var(--suave); font-weight:600; }
.tabla { overflow-x:auto; }
.marca { display:inline-block; font-size:.75rem; font-weight:700; padding:.05rem .45rem; border-radius:999px; letter-spacing:.02em; }
.marca.simulado { color:var(--sim); background:var(--sim-fondo); }
.marca.real { color:var(--real); background:var(--real-fondo); }
.nd { color:var(--suave); font-style:italic; }
.nota { color:var(--suave); font-size:.85rem; margin:.5rem 0 0; }
.vacio { color:var(--suave); }
.error { color:var(--error); }
.ingreso { max-width:360px; margin:10vh auto; }
.ingreso label { display:block; margin:.75rem 0 .25rem; }
.ingreso input { width:100%; font:inherit; padding:.55rem; border:1px solid var(--borde); border-radius:6px; background:var(--fondo); color:var(--texto); }
.progreso { height:.5rem; background:var(--borde); border-radius:999px; overflow:hidden; margin:.25rem 0; }
.progreso > span { display:block; height:100%; background:var(--acento); }
ul.lista { margin:.25rem 0 0; padding-left:1.1rem; }