:root{
  --bg:#f4f1ff; --card:#fff; --ink:#1f2340; --muted:#6b7090; --line:#e4e1f5;
  --accent:#e63946; --accent2:#ffcb05; --ok:#1a9d57; --bad:#d6334a;
  --r:20px; --shadow:0 6px 18px rgba(40,30,90,.12);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#14152a; --card:#1f2140; --ink:#f1f1ff; --muted:#a3a6cc; --line:#34376a; --shadow:0 6px 18px rgba(0,0,0,.4)}
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);
  min-height:100vh;font-size:18px;line-height:1.4}
#app{max-width:980px;margin:0 auto;padding:16px}
h1,h2,h3{margin:.2em 0}
button{font:inherit;cursor:pointer}
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.top .spacer{flex:1}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:700;background:var(--accent);color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.2);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.good{background:var(--ok)} .btn.warn{background:#f59e0b}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.big{padding:16px 22px;font-size:1.1em}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.muted{color:var(--muted)}
.hero{text-align:center;margin:18px 0 26px}
.hero h1{font-size:2em}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.profile{background:var(--card);border:0;border-radius:28px;padding:22px 14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink);
  border-bottom:8px solid var(--c);transition:transform .12s}
.profile:hover{transform:translateY(-4px) rotate(-1deg)}
.profile svg{width:130px;height:130px}
.profile .n{font-size:1.6em;font-weight:800}
.profile .t{color:var(--muted);font-size:.9em}
.profile.off{opacity:.6}
.avatar{width:64px;height:64px;flex:none}
.days{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.chip{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:700}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip small{display:block;font-weight:400;opacity:.85;font-size:.75em}
.materias{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.materia h3{font-size:1.3em}
.materia .pgs{font-size:.85em;color:var(--muted);margin:2px 0 12px}
.materia .row{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.75em;font-weight:700;background:var(--accent2);color:#222}
.soon{font-style:italic;color:var(--muted)}
.banner{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-radius:var(--r);padding:14px 18px;font-weight:700;margin-bottom:14px}
.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0}
.progress>i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
/* estudio */
.lessons{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.flip{perspective:1200px;margin:10px 0}
.flip .in{position:relative;min-height:280px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.flip.f .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:var(--shadow)}
.face.front{background:var(--accent);color:#fff;font-size:1.5em;font-weight:800}
.face.back{background:var(--card);border:4px solid var(--accent);transform:rotateY(180deg);font-size:1.25em}
.face small{opacity:.8;font-weight:400;font-size:.55em;margin-top:14px}
.ctrl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:14px;z-index:10}
.modal img{max-width:100%;max-height:92vh;border-radius:12px;background:#fff}
/* examen */
.q{font-size:1.35em;font-weight:700;margin:6px 0 16px}
.tag{font-size:.7em;color:var(--muted);font-weight:400;display:block}
.opts{display:grid;gap:10px}
.opt{text-align:left;border:3px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:14px 16px;font-weight:600}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--card))}
.opt .num{display:inline-block;min-width:1.6em;height:1.6em;border-radius:50%;background:var(--accent);color:#fff;text-align:center;margin-right:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin-bottom:10px}
select,input[type=text],input[type=password]{font:inherit;width:100%;padding:12px;border-radius:12px;border:3px solid var(--line);background:var(--card);color:var(--ink)}
.timer{font-variant-numeric:tabular-nums;font-weight:800}
.score{font-size:4em;font-weight:900;text-align:center;color:var(--accent)}
.stars{text-align:center;font-size:2.2em}
.review{border-left:6px solid var(--bad);padding:10px 14px;margin:10px 0;background:color-mix(in srgb,var(--bad) 8%,var(--card));border-radius:10px}
.review.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.review b{display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:12px 18px;border-radius:12px;z-index:20}
/* admin */
table{border-collapse:collapse;width:100%;font-size:.8em}
th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
th{position:sticky;top:0;background:var(--card)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.grid3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kpi{font-size:2em;font-weight:900}
.wrap{overflow-x:auto}
.pill{border-radius:999px;padding:2px 9px;font-weight:700;color:#fff;font-size:.9em}
.pill.g{background:var(--ok)} .pill.y{background:#d97706} .pill.r{background:var(--bad)}
.det{background:color-mix(in srgb,var(--line) 40%,var(--card));font-size:.95em}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.filters select{width:auto}
@media (max-width:560px){.two,.pair{grid-template-columns:1fr}#app{padding:12px}}