/* ================================
   Notegood · Grilla Interactiva
   Estética dark limpia + acentos violeta
   ================================ */

:root{
  /* Colores base */
  --bg:#0b0d12;
  --bg-grad-1:#0a0c11;
  --bg-grad-2:#0f1421;
  --card:#121521;
  --surface:#111628;
  --line:#23283a;
  --line-2:#202746;
  --muted:#94a3b8;
  --txt:#e2e8f0;

  /* Acentos */
  --brand:#7c3aed;        /* violeta Notegood */
  --brand-weak: rgba(124,58,237,.15);
  --brand-line: rgba(124,58,237,.35);

  /* Estados */
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;

  /* Chips */
  --chip:#1f2433;
}

/* Layout general */
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-grad-1), var(--bg-grad-2) 45%, var(--bg-grad-1) 100%);
  color:var(--txt);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* Header */
header{
  display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px
}
header h1{font-size:20px;margin:0;font-weight:700}
header small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* Píldora/credit footer del header */
.pill{
  background:var(--brand-weak);
  color:#d6bcff;
  border:1px solid var(--brand-line);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}
header .pill{margin-left:auto}
.footer-note{
  display:flex;justify-content:center;margin-top:10px
}
.footer-note .pill{float:none}

/* Tarjetas / contenedores */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/* Grid principal */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:980px){.grid{grid-template-columns: 1fr 320px}}

/* Progreso */
.progress{padding:16px}
.bar{
  height:10px;background:#1f2636;border-radius:999px;overflow:hidden;position:relative
}
.bar>span{
  position:absolute;left:0;top:0;height:100%;
  background:linear-gradient(90deg,var(--brand),#22c55e);
  border-radius:999px;transition:width .5s ease; width:0%;
}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.kpi{
  background:var(--surface);padding:10px;border-radius:12px;border:1px solid #222a40
}
.kpi small{color:var(--muted)}
.kpi b{font-size:18px;display:block}

/* Filtros / búsqueda */
.filters{
  padding:16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
.filters select,.filters input[type="search"]{
  background:#12192a;color:var(--txt);
  border:1px solid #232b44;padding:10px;border-radius:10px;
  outline:none;
}
.filters select:focus,.filters input[type="search"]:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(124,58,237,.2);
}

/* Chips y tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.tag{
  background:var(--chip);
  border:1px solid #2b3247;
  color:#c7d2fe;
  padding:6px 8px;border-radius:999px;font-size:12px;text-decoration:none
}
.tag:hover{filter:brightness(1.08)}

/* Listado de materias */
.list{padding:16px}
.course{
  display:flex;gap:12px;align-items:flex-start;
  background:#0f1424;border:1px solid var(--line-2);
  border-radius:14px;padding:12px;margin:10px 0;
}
.course:hover{border-color:#2a3150}
.course.locked{opacity:.75}
.course h3{margin:0 0 4px 0;font-size:16px}
.course small{color:var(--muted)}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.area{
  font-size:11px;padding:4px 8px;border-radius:8px;
  border:1px solid #2a2f47;background:#0f1526;color:#c7d2fe
}
.badge{
  font-size:11px;padding:4px 8px;border-radius:999px;
  border:1px solid #2a2f47;background:#151b2d;color:#d0d7ea
}
.badge.ok{
  color:#c7ffd1;border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.12)
}
.badge.cur{
  color:#ffe7b3;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)
}
.badge.pen{
  color:#ffc0c0;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)
}
.act{margin-left:auto;display:flex;gap:8px;align-items:center}
button,.btn{
  background:#141b2f;color:#e5e7eb;border:1px solid #253051;
  padding:9px 12px;border-radius:10px;cursor:pointer;transition:filter .15s ease, transform .02s ease;
}
button:hover,.btn:hover{filter:brightness(1.05)}
button:active,.btn:active{transform:translateY(1px)}

/* Texto y estados */
.muted{color:var(--muted)}
.empty{padding:22px;text-align:center;color:#94a3b8}

/* Modal / Onboarding */
.modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:50
}
.modal{max-width:720px;width:100%}
.modal .card{padding:18px}
.modal h2{margin:0 0 8px}
.modal p{margin:0 0 6px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* Checkboxes (ligera mejora visual) */
input[type="checkbox"]{
  width:18px;height:18px;border-radius:4px;accent-color:var(--brand);
}

/* ====== Toasts / Notas (si las usas) ====== */
.toast{
  position:fixed;right:16px;bottom:16px;z-index:60;
  background:#0f1526;border:1px solid #2b3247;color:var(--txt);
  padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex;align-items:center;gap:10px;max-width:380px
}
.toast .title{font-weight:700}
.toast .msg{color:var(--muted)}
.toast .actions{margin-left:auto;display:flex;gap:8px}
.toast .btn-cancel{
  background:transparent;border:1px solid #3a4060;color:#c7d2fe;padding:8px 10px;border-radius:10px
}
.toast .btn-ok{
  background:var(--brand);border:1px solid var(--brand);color:white;padding:8px 10px;border-radius:10px
}
.toast .btn-cancel:hover{filter:brightness(1.15)}
.toast .btn-ok:hover{filter:brightness(1.05)}

/* ====== Confetti layer (si usas canvas de confetti) ====== */
.confetti-layer{
  position:fixed;inset:0;pointer-events:none;z-index:100;
}