:root { --paper:#FBF9F6; --paper-2:#F4F0F8; --card:#fff; --ink:#3A3650; --ink-2:#5E5A74; --ink-3:#8C889E; --line:#E6E1EC; --lilac:#E6E0F0; --sage:#DDE7E1; --peach:#F5E4DB; --sky:#DCE5EF; --plum:#6F5FA8; --plum-deep:#5B4C92; --rojo:#B3463F; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;font-size:16px}
a{color:var(--plum)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;width:100%;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--lilac)}
label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:999px;border:0;font-weight:700;background:var(--plum);color:#fff}
.btn:hover{background:var(--plum-deep)}
.btn.soft{background:var(--lilac);color:var(--ink)}
.btn.sm{padding:.35rem .8rem;font-size:.85rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700}
.brand small{display:block;font-weight:400;color:var(--ink-2);font-size:.8rem}
.topbar nav{display:flex;gap:.5rem;flex-wrap:wrap}
.topbar nav button{background:none;border:0;padding:.4rem .8rem;border-radius:999px;color:var(--ink-2);font-weight:600}
.topbar nav button.active{background:var(--lilac);color:var(--ink)}
main{width:min(1040px,100% - 2rem);margin:1.5rem auto 4rem;display:grid;gap:1.25rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.25rem}
.card h2{font-size:1.15rem;margin-bottom:.75rem}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.login{max-width:420px;margin:12vh auto;display:grid;gap:1rem}
.login h1{font-size:1.5rem}
.login p{color:var(--ink-2);font-size:.95rem}
.msg{padding:.7rem .9rem;border-radius:10px;background:var(--sage);font-size:.95rem}
.msg.error{background:#F8E0DE;color:var(--rojo)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink-3);font-weight:600;font-size:.82rem;text-transform:none}
.tag{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.8rem;background:var(--paper-2);color:var(--ink-2)}
.tag.online{background:var(--sky)} .tag.presencial{background:var(--peach)} .tag.menor{background:var(--lilac)} .tag.familia{background:var(--sage)}
.muted{color:var(--ink-3);font-size:.9rem}
.cred{background:var(--paper-2);border-radius:10px;padding:.8rem 1rem;font-family:ui-monospace,monospace;font-size:.95rem}
.qr{width:200px;height:200px;border:1px solid var(--line);border-radius:12px}
@media (max-width:640px){.topbar{padding:.75rem 1rem}main{width:min(1040px,100% - 1.25rem)}}