:root{
  --cream:#FDF7F1; --card:#FFF; --ink:#332C4A; --ink2:#5B5470; --muted:#9A93A8;
  --lav:#B9A6E8; --lav-l:#E9E1FA; --lav-d:#8E76C9;
  --pink:#F5A8C6; --pink-l:#FCE3EC;
  --blue:#A8D2F0; --blue-l:#E1F0FB;
  --green:#9FDCB8; --green-l:#E0F5E8;
  --peach:#FBC79A; --peach-l:#FDEEDF;
  --line:#EFE9E3;
  --sh:0 2px 4px rgba(90,70,120,.04), 0 10px 30px rgba(90,70,120,.07);
  --sh-lg:0 8px 20px rgba(90,70,120,.10), 0 30px 70px rgba(90,70,120,.12);
  --font:'Nunito','Quicksand','Varela Round','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60vw 60vw at 12% -10%,#F7E9F6 0,transparent 60%),
             radial-gradient(50vw 50vw at 100% 108%,#E7EEFB 0,transparent 60%);
}
#app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}

.view{display:none;flex:1;flex-direction:column}
.view.on{display:flex;animation:in .4s cubic-bezier(.2,.9,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Login ---------- */
#v-login{align-items:center;justify-content:center;padding:24px}
.gate{
  background:var(--card);border-radius:32px;box-shadow:var(--sh-lg);
  padding:44px 40px;width:100%;max-width:440px;text-align:center;position:relative;
}
.stamp{
  position:absolute;top:-14px;right:-10px;transform:rotate(-8deg);
  border:2px solid var(--pink);color:var(--pink);border-radius:10px;
  padding:6px 14px;font-size:12px;font-weight:900;letter-spacing:.16em;background:var(--pink-l);
}
.gate .hi{font-size:15px;font-style:italic;color:var(--muted);font-weight:600}
.gate h1{
  font-size:36px;font-weight:900;letter-spacing:-.02em;margin:2px 0 0;
  background:linear-gradient(96deg,var(--lav-d),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gate .sub{font-size:19px;font-weight:800;color:var(--ink2);letter-spacing:.01em}
.pips{display:flex;gap:6px;justify-content:center;margin:14px 0 26px}
.pips i{width:8px;height:8px;border-radius:50%;display:block}
.field{
  display:flex;align-items:center;background:#FEFAF4;border:1px solid var(--line);
  border-radius:16px;padding:5px 5px 5px 18px;margin-bottom:12px;
}
.field input{flex:1;border:0;background:none;font:inherit;font-size:16px;padding:12px 0;outline:none;color:var(--ink)}
.field input::placeholder{color:#BDB6C6}
.go{
  border:0;width:48px;height:48px;border-radius:13px;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lav),var(--pink));color:#fff;
}
.go:disabled{opacity:.5;cursor:default}
.err{color:#B2456C;font-size:14px;font-weight:700;min-height:20px;margin-top:4px}
.gate .foot{font-size:13px;font-style:italic;color:var(--muted);margin-top:22px}

/* ---------- Cabecera ---------- */
.head{display:flex;align-items:center;gap:12px;padding:22px 26px 8px}
.head h2{font-size:26px;font-weight:900;letter-spacing:-.01em}
.head .day{font-size:14px;font-weight:600;color:var(--muted);margin-top:1px}
.head .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{
  border:0;background:var(--card);width:40px;height:40px;border-radius:13px;cursor:pointer;
  display:grid;place-items:center;color:var(--ink2);box-shadow:var(--sh);
}
.sync{
  display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:7px 13px;
  font-size:13px;font-weight:800;background:var(--green-l);color:#2F7A4F;
}
.sync.pend{background:var(--peach-l);color:#B0702B}
.sync.off{background:var(--pink-l);color:#B25578}

/* ---------- Contenido ---------- */
.wrap{padding:12px 26px 32px;max-width:900px;width:100%;margin:0 auto}
.banner{
  background:linear-gradient(120deg,var(--lav-l),var(--pink-l));border-radius:24px;
  padding:20px 22px;margin-bottom:18px;
}
.banner h3{font-size:17px;font-weight:900;display:flex;align-items:center;gap:9px;color:var(--lav-d)}
.banner p{margin-top:10px;color:var(--ink2);font-weight:600}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.course{
  background:var(--card);border-radius:24px;box-shadow:var(--sh);padding:20px;
  border:2px solid transparent;cursor:pointer;transition:.18s;text-align:left;font:inherit;
}
.course:hover{transform:translateY(-3px);border-color:var(--lav-l)}
.course .n{font-size:24px;font-weight:900}
.course .m{font-size:13.5px;font-weight:700;color:var(--muted);margin-top:2px}
.tag{
  display:inline-block;margin-top:12px;border-radius:99px;padding:4px 11px;
  font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}
.tag.app{background:var(--lav-l);color:var(--lav-d)}
.tag.control{background:var(--blue-l);color:#3E7BA6}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px}
.tile{border-radius:20px;padding:16px 12px;text-align:center}
.tile b{display:block;font-size:30px;line-height:1.1}
.tile span{font-size:12.5px;font-weight:800;opacity:.75}
.t-blue{background:var(--blue-l);color:#3E7BA6} .t-green{background:var(--green-l);color:#2F7A4F}
.t-pink{background:var(--pink-l);color:#B25578} .t-peach{background:var(--peach-l);color:#B0702B}

.empty{
  text-align:center;color:var(--muted);font-weight:700;padding:34px 20px;
  background:var(--card);border-radius:24px;box-shadow:var(--sh);
}
.btn{
  font:inherit;font-size:16px;font-weight:800;border:0;border-radius:15px;padding:13px 24px;
  cursor:pointer;background:var(--lav);color:#fff;box-shadow:0 6px 16px rgba(185,166,232,.45);
  display:inline-flex;align-items:center;gap:8px;transition:.18s;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:var(--card);color:var(--ink2);box-shadow:var(--sh)}
.spin{animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}