:root{--paper:#F2EFE6;--paper-2:#E9E5D8;--ink:#0F2238;--ink-2:#2B3B50;--ink-3:#3D4E63;--line:rgba(15,34,56,.18);--accent:#A3127F;--chart:#1D5FA8;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--sans:'Archivo',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:15px;color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.w{font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:1}
.m{font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--accent)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 7px;border:1px solid var(--ink);display:inline-block;white-space:nowrap}
.vivo{background:var(--accent);border-color:var(--accent);color:#fff}.pres{background:var(--ink);color:var(--paper)}.exa{background:var(--chart);border-color:var(--chart);color:#fff}
.card{border:1.5px solid var(--ink);background:var(--paper)}
.bar{height:6px;background:#D6D1C0}.bar i{display:block;height:6px;background:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;font-weight:700;font-stretch:112%;font-size:14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:2px;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.field{display:flex;flex-direction:column;gap:8px}.field input,.field textarea{height:50px;border:1.5px solid var(--ink);background:transparent;padding:0 14px}
.field textarea{height:110px;padding:12px;resize:none}
.screen{display:flex;flex-direction:column;min-height:100vh}

/* Top bar */
.top{height:68px;background:var(--ink);color:var(--paper);padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top .brand{display:flex;align-items:center;gap:14px}.top .brand span.lg{background:var(--paper);padding:5px 10px;display:flex}.top .brand img{height:22px}
.top nav{display:flex;gap:28px}.top nav a{color:#B9C4D2;padding:19px 0;border-bottom:3px solid transparent;font-size:14px;font-weight:600}.top nav a.on{color:#fff;border-color:#E85BC4}
.av{width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

/* Login */
#login .grid{display:grid;grid-template-columns:1.1fr 1fr;flex:1}
.sky{padding:56px 64px;background:linear-gradient(180deg,#5E9BD6 0%,#8DBBE6 35%,#BBD8EE 70%,#E4EBEA 100%);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.sky h1{font-size:clamp(40px,5vw,60px);letter-spacing:-.01em;line-height:.96}
.feat{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}.feat div{padding:16px 12px 0;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}.feat div:first-child{border-left:0;padding-left:0}.feat b{font-stretch:125%;font-size:17px}
.loginbox{padding:0 clamp(32px,7vw,96px);display:flex;flex-direction:column;justify-content:center;gap:20px}

/* Dashboard */
.wrap{flex:1;width:100%;max-width:1480px;margin:0 auto;padding:44px 40px 56px;display:grid;grid-template-columns:1.55fr 1fr;gap:32px;align-content:start}
.col{display:flex;flex-direction:column;gap:28px}
.next{background:var(--ink);color:var(--paper);padding:34px 36px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.ag{display:flex;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--line)}.ag .d{width:60px;display:flex;flex-direction:column}.ag .d b{font-stretch:112%;font-size:16px}.ag .t{flex:1;display:flex;flex-direction:column;gap:2px}.ag .t{gap:4px}.ag .t span{font-size:14px;color:var(--ink-3)}
.prog{display:flex;flex-direction:column;gap:9px;cursor:pointer;padding:4px 0}.prog .r{display:flex;justify-content:space-between;font-size:14px}.prog:hover .r b{color:var(--accent)}
.kpi{padding:26px 26px;display:flex;flex-direction:column;gap:10px}.kpi b{font-size:40px;font-stretch:125%;line-height:1}.kpi small{font-size:13px;color:var(--ink-3)}

/* Subject */
.crumb{height:72px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid var(--ink)}
.sub{flex:1;display:grid;grid-template-columns:330px 1fr 290px;min-height:0}
.units{border-right:1.5px solid var(--ink);padding:18px 0;display:flex;flex-direction:column;gap:4px;overflow:auto}
.units .h{padding:10px 17px 6px;color:var(--ink-3)}
.it{display:flex;gap:12px;align-items:center;padding:14px 16px;border-left:3px solid transparent;width:100%;text-align:left;background:none;border-top:0;border-right:0;border-bottom:0}
.it:hover{background:var(--paper-2)}.it.on{border-left-color:var(--accent);background:var(--paper-2)}
.it .ic{width:34px;color:var(--ink-3)}.it .n{flex:1;display:flex;flex-direction:column;gap:1px}.it .n b{font-size:14px;font-weight:600}.it .n span{font-size:12px;color:var(--ink-3)}.it .st{color:#1B7A4B}
.viewer{background:#D6D1C0;display:flex;flex-direction:column;min-width:0}
.vbar{height:48px;background:var(--ink);color:var(--paper);padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.page{flex:1;display:flex;justify-content:center;padding:24px 0 0;overflow:hidden}
.paper{width:min(520px,90%);background:#fff;padding:48px 52px;display:flex;flex-direction:column;gap:16px;border:1px solid #B9B4A3}
.paper i{display:block;height:10px;background:#E4E1D8}
.video{width:min(760px,92%);aspect-ratio:16/9;background:#0F2238;color:#F2EFE6;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;align-self:center;margin-top:24px}
.side{border-left:1.5px solid var(--ink);padding:26px 22px 90px;display:flex;flex-direction:column;gap:20px}

/* Exam */
.ehead{height:72px;background:var(--ink);color:var(--paper);padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.clock{font-family:var(--mono);font-size:34px;font-weight:600;min-width:120px;text-align:right}
.tbar{height:6px;background:#D6D1C0}.tbar i{display:block;height:6px;background:var(--accent);transition:width 1s linear}
.ebody{flex:1;display:grid;grid-template-columns:1fr 320px}
.q{padding:56px 72px;display:flex;flex-direction:column;gap:32px;max-width:980px}.q h1{font-size:28px;line-height:1.25;font-weight:700;max-width:760px}
.opt{width:100%;min-height:66px;padding:0 20px;display:flex;align-items:center;gap:16px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:2px;font-size:17px;text-align:left}
.opt:hover{background:var(--paper-2)}.opt.on{background:var(--ink);color:var(--paper)}
.map{border-left:1.5px solid var(--ink);padding:36px 26px;display:flex;flex-direction:column;gap:18px;background:var(--paper-2)}
.cells{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.cells button{height:38px;font-family:var(--mono);font-size:13px;border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.cells .done{background:var(--ink);color:var(--paper)}.cells .flag{background:#F2A9DE;border-color:var(--accent)}.cells .cur{border-color:var(--accent);border-width:2.5px}
.leg{display:flex;flex-direction:column;gap:8px;font-size:13px}.leg div{display:flex;gap:10px;align-items:center}.leg span{width:14px;height:14px;border:1.5px solid var(--ink);display:inline-block}

/* Instructor */
.ibody{flex:1;display:grid;grid-template-columns:1fr 400px;min-height:0}
.imain{padding:40px 40px;display:flex;flex-direction:column;gap:28px;min-width:0;max-width:1180px;width:100%}
.drop{border:1.5px dashed var(--ink);padding:30px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--paper-2)}
.drop.over{background:#F2A9DE55}
.row{display:grid;grid-template-columns:52px 1fr 150px 130px;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--line);font-size:14px}
.row.h{border-top:0}.row.h span{color:var(--ink-3)}
.chat{border-left:1.5px solid var(--ink);display:flex;flex-direction:column;background:var(--paper-2);min-height:0}
.chat .ch{padding:18px 22px;border-bottom:1.5px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
.msgs{flex:1;padding:24px 22px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.msg{max-width:82%;display:flex;flex-direction:column;gap:4px;align-self:flex-start}.msg .b{padding:12px 14px;font-size:14px;line-height:1.45;background:var(--paper);border:1.5px solid var(--ink)}
.msg.me{align-self:flex-end}.msg.me .b{background:var(--ink);color:var(--paper)}.msg .m{color:var(--ink-3)}.msg.me .m{align-self:flex-end}
.cin{padding:16px 22px;border-top:1.5px solid var(--ink);display:flex;gap:10px}.cin input{flex:1;height:48px;border:1.5px solid var(--ink);background:var(--paper);padding:0 14px;min-width:0}

/* Nubes en el login */
.sky{position:relative;overflow:hidden}.sky>*{position:relative}
.cl{position:absolute;top:0;left:0;height:var(--h);width:calc(100% + var(--tile));background-repeat:repeat-x;background-size:var(--tile) 100%;animation:drift var(--dur) linear infinite;will-change:transform;pointer-events:none}
.cl.far{--tile:1500px;--dur:150s;--h:62%;opacity:.8}.cl.mid{--tile:2300px;--dur:95s;--h:88%;opacity:.95}.cl.near{--tile:3400px;--dur:55s;--h:120%;top:-22%;opacity:.55;filter:blur(3px)}
@keyframes drift{to{transform:translate3d(calc(var(--tile) * -1),0,0)}}
@media (prefers-reduced-motion:reduce){.cl{animation:none}}
/* Tablas y paneles administrativos */
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:500;color:var(--ink-3);text-align:left;padding:10px 10px;border-bottom:1.5px solid var(--ink)}
.tbl td{padding:14px 10px;border-top:1px solid var(--line);vertical-align:middle}.tbl tr.sel td{background:var(--paper-2)}.tbl tbody tr{cursor:pointer}.tbl tbody tr:hover td{background:var(--paper-2)}
.tbl .num{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.ok{background:#1B7A4B;border-color:#1B7A4B;color:#fff}.mora{background:#B3261E;border-color:#B3261E;color:#fff}.pend{background:var(--paper-2)}
.tabs2{display:flex;gap:0;border-bottom:1.5px solid var(--ink)}.tabs2 button{background:none;border:0;padding:14px 18px;font-size:14px;font-weight:600;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-1.5px}.tabs2 button.on{color:var(--ink);border-color:var(--accent)}
.pane{display:none}.pane.on{display:flex;flex-direction:column;gap:20px}
.abody{flex:1;display:grid;grid-template-columns:1fr 420px;min-height:0}
.aside{border-left:1.5px solid var(--ink);padding:32px 26px 90px;display:flex;flex-direction:column;gap:18px;background:var(--paper-2);overflow:auto}
.aside select,.aside input{height:48px;border:1.5px solid var(--ink);background:var(--paper);padding:0 12px;width:100%}
.recibo{background:#fff;border:1px solid #B9B4A3;padding:22px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.recibo .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.stu{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.note{border-left:3px solid var(--ink);padding:10px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px;background:var(--paper-2)}.note .m{color:var(--ink-3)}
@media (max-width:1000px){.abody,.stu{grid-template-columns:1fr}.aside{border-left:0;border-top:1.5px solid var(--ink)}}

/* Plan de estudios */
.pbody{flex:1;padding:40px 40px 90px;max-width:1280px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.cpick{display:flex;gap:10px}.cpick button{border:1.5px solid var(--ink);background:transparent;padding:12px 18px;font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:200px}.cpick button.on{background:var(--ink);color:var(--paper)}.cpick small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;opacity:.8}
.mod{border:1.5px solid var(--ink);background:var(--paper)}.mod summary{list-style:none;cursor:pointer;padding:16px 22px;display:grid;grid-template-columns:44px 1fr 90px 130px;gap:14px;align-items:center;font-weight:600}.mod summary::-webkit-details-marker{display:none}.mod summary:hover{background:var(--paper-2)}
.mod[open] summary{border-bottom:1.5px solid var(--ink);background:var(--paper-2)}
.mod ol{margin:0;padding:10px 22px 16px 22px;list-style:none;display:flex;flex-direction:column}.mod li{display:grid;grid-template-columns:44px 60px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}.mod li:first-child{border-top:0}
.lvl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:3px 6px;white-space:nowrap;border:1px solid var(--ink);text-align:center;height:fit-content}.lvl.l3{background:var(--ink);color:var(--paper)}.lvl.l2{background:var(--paper-2)}
.att{display:grid;grid-template-columns:1fr 90px 90px 70px 60px 110px;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.att.h{border-top:0}.att.h span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}.att .num{font-family:var(--mono);font-size:13px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;border-radius:2px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.demo-off{position:fixed;right:16px;bottom:16px;display:flex;gap:6px;background:var(--paper);border:1.5px solid var(--ink);padding:6px}
.demo button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:0;background:transparent;padding:6px 8px}.demo button:hover{background:var(--paper-2)}
@media (min-width:1700px){body{zoom:1.18}}
@media (max-width:1000px){#login .grid,.wrap,.ebody,.ibody{grid-template-columns:1fr}.sub{grid-template-columns:1fr}.units,.side{border:0;border-bottom:1.5px solid var(--ink)}.top nav{display:none}.viewer{min-height:60vh}.map{border-left:0;border-top:1.5px solid var(--ink)}.chat{border-left:0;border-top:1.5px solid var(--ink)}.q{padding:28px 20px}}

.err{background:#B3261E;color:#fff;padding:12px 14px;font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:span 2}
.top nav a{cursor:pointer}