/* app.css — Pasir Virtual School UI (global) */
:root{
  color-scheme: light dark;

  --primary:#2563eb;
  --accent:#38bdf8;
  --success:#22c55e;
  --danger:#ef4444;

  /* Light: azul/celeste elegante (no blanco plano) */
  --bg:#f2f7ff;
  --bg2:#eaf4ff;
  --card:#ffffff;
  --card2: rgba(37,99,235,.06);
  --stroke: rgba(37,99,235,.18);
  --text:#0b1220;
  --muted:#475569;

  --shadow: 0 18px 45px rgba(2, 6, 23, .10);
  --r: 18px;
  --pill: 999px;
  --t: .18s ease-out;
}

body[data-theme="dark"]{
  --bg:#0b1220;
  --bg2:#09101d;
  --card: rgba(15,23,42,.96);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(148,163,184,.22);
  --text:#f9fafb;
  --muted: rgba(255,255,255,.70);
  --shadow: 0 18px 55px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(860px 520px at 95% 0%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

a{color:inherit}
.container{width:min(1120px,92vw); margin:0 auto}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--stroke);border:0;margin:16px 0}

/* Header (unificado) */
.app-header{
  position:sticky; top:0; z-index:80;
  border-bottom:1px solid var(--stroke);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  backdrop-filter: blur(10px);
}
.app-header .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:1000;
  letter-spacing:.2px;
}
.brand .dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(56,189,248,.16);
}
.nav-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:900;
  transition: transform var(--t), border-color var(--t), filter var(--t);
}
.btn:hover{transform:translateY(-1px); border-color: rgba(56,189,248,.55)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.primary{background: var(--primary); color:#fff; border-color: rgba(37,99,235,.55)}
.btn.secondary{background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.30)}
.btn.danger{background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.30)}
.btn.full{width:100%}
.theme-btn{width:40px;height:40px;border-radius:var(--pill);padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Cards */
.card{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--card2);
  box-shadow: var(--shadow);
}
.card-inner{background: var(--card); border-radius: calc(var(--r) - 6px); padding:18px; border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent)}
.stack{display:flex; flex-direction:column; gap:12px}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
label{color:var(--muted); font-weight:800; font-size:.95rem}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
}

.page{padding:18px 0 30px}
.hero{
  padding:18px;
  border-radius: var(--r);
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(56,189,248,.10));
}

/* Course safe overrides: don't affect your player logic */
.player-wrap, .player{background:transparent !important}