:root{
  --bg:#ffffff; --card:#f9f9fb; --muted:#6b7280; --text:#111827;
  --brand:#6c5ce7; --accent:#00bfa6; --chip:#eef2ff; --chip-b:#c7d2fe; --line:#e5e7eb;
  --y1:#f3e8ff; --y2:#dbeafe; --y3:#dcfce7; --y4:#fee2e2; --y5:#fef3c7; --y6:#e0e7ff; --y7:#fae8ff;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 10px 28px rgba(15,23,42,.05);
  --progress-track:#e5e7eb; --progress-bg:rgba(108,92,231,.12);
}
body.dark{
  --bg:#0b1020; --card:#0f162b; --muted:#a0aec0; --text:#e5e7eb;
  --brand:#8b7dff; --accent:#03c9b5; --chip:#141e3a; --chip-b:#26345c; --line:#1f2a44;
  --y1:#1b1540; --y2:#14203b; --y3:#0f2e2a; --y4:#3a1b22; --y5:#3b2e12; --y6:#1a1b3a; --y7:#2f1340;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35);
  --progress-track:#1f2a44;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Header */
.ng-header{ padding:1rem 1rem 1.4rem; background:linear-gradient(90deg,#6c5ce7,#00bbf9); color:#fff; border-bottom:1px solid rgba(255,255,255,.2) }
body.dark .ng-header{ background:linear-gradient(90deg,#5b4bff,#8b7dff); border-bottom-color:rgba(255,255,255,.15) }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
.container{ max-width:1100px; margin:0 auto }
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; min-width:148px; padding:0 14px; font-weight:700; letter-spacing:.2px;
  border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
  line-height:1; white-space:nowrap; color:#fff; text-decoration:none; cursor:pointer;
}
.controls{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.btn{
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  padding:.45rem .75rem; border-radius:12px; font-weight:600; cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.12) }
.btn.ghost{ backdrop-filter:saturate(120%) blur(2px) }

/* Landing hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(108,92,231,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(0,191,166,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, rgba(108,92,231,.06) 100%);
  padding:3rem 1rem 2rem
}
.hero-title{ font-size:clamp(28px,4.6vw,56px); line-height:1.05; margin:0 0 .6rem; text-align:center }
.hero-title .brand{ background:linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-sub{ max-width:980px; font-size:clamp(16px,2.3vw,22px); color:var(--muted); margin:0 auto 1.2rem; text-align:center }
.hero-inner{ text-align:center }
.hero-cta{ display:flex; justify-content:center; gap:12px; margin:18px 0 10px }
.hero-list{ list-style:none; padding:0; margin:10px auto 0; display:grid; gap:.5rem; max-width:760px; color:var(--muted); text-align:center }
.hero-list li{ display:flex; gap:.55rem; align-items:center; justify-content:center }

/* CTA principal (hover) */
.btn-pri{
  --c1:#6c5ce7; --c2:#00bfa6;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  color:#fff; border:none; padding:.9rem 1.2rem; border-radius:999px; font-weight:800; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-position .25s ease;
  background-size:200% 100%; background-position:0% 50%;
}
.btn-pri:hover{
  background-position:100% 50%;
  filter:brightness(1.05);
  box-shadow:0 14px 28px rgba(108,92,231,.22);
  transform:scale(1.02);
}

/* Cards */
.feature-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px auto 0; padding:0 1rem }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; text-align:left; box-shadow:var(--shadow) }
.card h3{ margin:0 0 .35rem 0 }

/* Cierre */
.closing{max-width:820px;margin:18px auto 0;padding:0 16px;text-align:center;color:var(--muted);font-style:italic}

/* Progreso */
.header-bottom{ margin-top:.8rem }
.progress{ max-width:1100px; margin:0 auto; padding:0 1rem; position:relative; height:12px }
.progress-track{
  position:absolute; inset:0; border-radius:999px; background:var(--progress-track);
  box-shadow:inset 0 0 0 3px var(--progress-bg)
}
.progress-bar{
  position:absolute; left:0; top:0; height:12px; width:0%; border-radius:999px;
  transition:width .25s ease, background .2s ease
}
.mini-legend{ display:flex; gap:.8rem; justify-content:center; margin:.55rem 0 0; font-size:.9rem; color:#f8fafc; text-align:center }
.mini-legend .lg{ display:inline-block; width:12px; height:12px; border-radius:999px; margin-right:.35rem; vertical-align:-2px; border:2px solid #fff }
.lg-ok{ background:#10b981; border-color:#bbf7d0 }
.lg-dis{ background:#fff; border-color:#fff }
.lg-blq{ background:#f59e0b; border-color:#fde68a }
.progress-kpi{ max-width:980px; margin:.6rem auto 0; padding:0 1rem; display:flex; justify-content:center; align-items:center; gap:.5rem; text-align:center; font-weight:800 }
.share-cta{ text-align:center; color:#f8fafc; margin:.4rem 0 0; font-size:.9rem }
.share-cta a{ color:#fff; font-weight:700; text-decoration:underline }

/* Grid malla */
.grid-container{ display:flex; flex-wrap:wrap; justify-content:center; padding:1rem; gap:1rem }
.year{ min-width:280px; background:var(--card); border-radius:14px; padding:1rem; border:1px solid var(--line); box-shadow:var(--shadow) }
.year.y1{background:var(--y1)} .year.y2{background:var(--y2)} .year.y3{background:var(--y3)}
.year.y4{background:var(--y4)} .year.y5{background:var(--y5)} .year.y6{background:var(--y6)} .year.y7{background:var(--y7)}
.year h2{ color:#1f2937; text-align:center; margin-top:0 } body.dark .year h2{ color:#e5e7eb }

/* Semestres */
.semestre{ background:var(--chip); border:1px solid var(--chip-b); border-radius:12px; padding:.6rem; margin-top:.7rem }
.semestre h3{ margin:0 0 .45rem 0; color:var(--accent); font-size:1rem }

/* Materias */
.materia{
  background:#fff; border-radius:12px; padding:.65rem .75rem; margin:.35rem 0;
  cursor:pointer; font-weight:600; border:1px solid var(--line);
  transition:transform .06s, border-color .15s, box-shadow .15s, background-color .15s;
  position:relative; padding-left:2rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
body.dark .materia{ background:#0b1020 }
.materia:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.materia .title{ flex:1; min-width:0 }
.materia.tachada{ background:rgba(16,185,129,.08); border-color:#10b981 }
.materia.bloqueada{ background:rgba(245,158,11,.075); border-color:#f59e0b }
.materia.has-note{ outline:2px dashed rgba(108,92,231,.35); outline-offset:2px }

/* Indicador izq */
.materia::before{
  content:""; position:absolute; left:.55rem; top:50%; transform:translateY(-50%); width:1.05rem; height:1.05rem; border-radius:999px;
  border:2px solid #059669; background:#10b981;
}
.materia.bloqueada::before{ border-color:#9a3412; background:#f59e0b }
.materia:not(.tachada):not(.bloqueada)::before{ background:#fff; border-color:#94a3b8 }

/* Acciones derecha */
.actions{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.grade-chip{ background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; font-weight:800 }
.grade-high{ background:#10b981; color:#052e2b; border-color:#059669 }
.grade-mid{ background:#fde68a; color:#7a5e00; border-color:#f59e0b }
.grade-low{ background:#fecaca; color:#7f1d1d; border-color:#fca5a5 }
.note-btn{ background:#eef2ff; border:1px solid #c7d2fe; color:#1e293b; padding:.35rem .7rem; border-radius:999px; font-weight:800; cursor:pointer }
.note-btn:hover{ filter:brightness(1.02) }
body.dark .note-btn{ background:#1e1b4b; border-color:#3730a3; color:#e5e7eb }
.nb-label{ white-space:nowrap }

/* Tooltip correlativas */
.materia[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:10px; right:10px; bottom:100%; transform:translateY(-6px);
  background:#111827; color:#f9fafb; border:1px solid rgba(255,255,255,.1);
  padding:.5rem .6rem; border-radius:10px; font-size:.8rem; line-height:1.2; white-space:pre-wrap; box-shadow:var(--shadow)
}

/* Modal (notas / onboarding) */
dialog{ border:none; padding:0; background:transparent }
.note-form{
  min-width:min(92vw,680px); border-radius:16px; padding:18px;
  background:var(--card); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow)
}
.note-form h3{ margin:.2rem 0 .6rem }
.field{ display:flex; gap:.6rem; align-items:flex-start; margin:.45rem 0 }
.field label{ min-width:180px; font-weight:600; padding-top:.45rem }
.field input, .field textarea{
  flex:1; width:100%; padding:.6rem .7rem; border-radius:10px; border:1px solid var(--line); background:#fff; color:#111827
}
body.dark .field input, body.dark .field textarea{ background:#0b1020; color:#e5e7eb; border-color:#1f2a44 }
.note-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.6rem }
/* Centrar acciones SOLO en la bienvenida */
.welcome-actions{ justify-content:center }

/* Toasts */
.toast-container{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 18px); transform:translateX(-50%); width:min(96vw,700px); display:grid; gap:10px; z-index:9999; pointer-events:none; text-align:left }
.toast{
  pointer-events:auto; background:#111827; color:#f9fafb; padding:.75rem 1rem; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);
  font-weight:600; letter-spacing:.2px; display:flex; align-items:center; gap:.6rem;
}
.toast button.ok{ background:#00bbf9; color:#fff; border:none; border-radius:6px; padding:.3rem .6rem; font-weight:700; cursor:pointer }

/* Confetti full-screen y lento */
#confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9998 }
.confetti-piece{
  position:absolute; font-size:24px; will-change:transform, opacity;
  animation: confetti-fall 1800ms linear forwards;
}
@keyframes confetti-fall{
  0%{ transform:translate(var(--x,0), var(--y,0)) rotate(0deg); opacity:1 }
  100%{ transform:translate(calc(var(--x,0) + var(--dx,0px)), calc(var(--y,0) + var(--dy,220px))) rotate(340deg); opacity:0 }
}

/* FAB IG */
.fab-ig{
  position:fixed; right:16px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display:grid; place-items:center; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.22); z-index:9990
}
.fab-ig svg{ width:26px; height:26px; fill:#fff }

/* Footer centrado (landing y malla) */
.ng-footer{ padding:20px 16px; text-align:center }
.ng-footer p{ margin:0; color:var(--muted) }
.ng-footer .center{ text-align:center }

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform:none }

/* Responsivo */
@media (max-width: 1024px){
  .feature-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 720px){
  .feature-cards{ grid-template-columns:1fr }
  .hero-list{ padding:0 10px }
  .grid-container{ padding:.7rem }
  .year{ min-width:unset; width:100% }
  .materia{ gap:.5rem; padding:.6rem .65rem .6rem 2rem }
}
@media (max-width: 540px){
  .ng-header .logo{ display:none } /* evita scroll lateral en móvil */
  .ng-footer{ font-size:.9rem; padding-bottom:1.2rem }
  .fab-ig{ right:12px; bottom:14px; width:48px; height:48px }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; transform:none; opacity:1 }
  .confetti-piece{ animation:none; opacity:0 }
}