/* Plataforma de Gestión Directiva · De La Sotta Education Group
   Layout: barra superior (marca, colegio, usuario) + pestañas; contenido en columna de hasta 1180px;
   panel lateral para registrar gestiones y editar. */
:root{
  --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#EFEEE8; --ink:#141B33; --muted:#5C6176; --line:#DEDCD3;
  --accent:#1B2B5E; --accent-ink:#FFFFFF; --accent-soft:#E4E8F3;
  --bad:#B3242D; --bad-soft:#FBE6E7; --warn:#9A5800; --warn-soft:#FCEFD9; --ok:#1E7A4C; --ok-soft:#E0F2E8; --info:#1B2B5E; --info-soft:#E4E8F3;
  --navy:#030E26; --navy-2:#0F1B3F; --gold:#D4AA5C; --gold-deep:#9C7426; --on-navy:#F3F1EA; --on-navy-muted:#B9BFD3;
  --f-brand:"Cinzel","Trajan Pro",Georgia,serif;
  --f-ui:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:10px; --shadow:0 1px 2px rgb(20 24 40 / .06),0 8px 24px rgb(20 24 40 / .06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#080D1F; --surface:#10172E; --surface-2:#18203B; --ink:#ECEAE3; --muted:#A3A9BE; --line:#26304F;
  --accent:#E0BC72; --accent-ink:#0B1430; --accent-soft:#2A2A2E;
  --bad:#FF8288; --bad-soft:#3A1B20; --warn:#F3B65C; --warn-soft:#3A2B13; --ok:#62D59E; --ok-soft:#153222; --info:#A9B6EE; --info-soft:#1F2850;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 8px 24px rgb(0 0 0 / .25); color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* Barra superior */
header.top{background:var(--navy);color:var(--on-navy);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:20}
.top-row{display:flex;align-items:center;gap:16px;padding-block:12px 8px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.brand img{height:38px;width:auto;max-width:160px;object-fit:contain}
.brand .txt{display:flex;flex-direction:column;min-width:0}
.brand .org{font-family:var(--f-brand);font-size:.78rem;letter-spacing:.14em;color:var(--gold);font-weight:600;text-transform:uppercase}
.brand h1{margin:0;font-size:1.1rem;color:var(--on-navy);font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{font-size:.82rem;color:var(--on-navy-muted);display:flex;align-items:center;gap:8px}
.who .rol{background:var(--navy-2);color:var(--gold);border-radius:999px;padding:2px 8px;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.bell{display:inline-flex;align-items:center;gap:6px;border:1px solid rgb(212 170 92 / .5);background:var(--navy-2);border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:600;font-size:.85rem;text-decoration:none;color:var(--on-navy)}
.bell b{background:var(--bad);color:#fff;border-radius:999px;padding:0 7px;font-family:var(--f-mono);font-size:.78rem}
.bell.clear b{background:var(--ok)}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{padding:10px 14px;color:var(--on-navy-muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
nav.tabs a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}
nav.tabs a:hover{color:#fff}
.who .salir{color:var(--on-navy-muted)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
main{padding-block:20px 60px}
h2{font-size:1.15rem;margin:0;font-weight:700;text-wrap:balance}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-weight:700}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:.88rem;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
@media (prefers-color-scheme: dark){.btn.ok{color:#0F121B}}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:5px 10px;font-size:.8rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=url],select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
textarea{width:100%;min-height:80px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);font-weight:600}
label.f>input,label.f>select,label.f>textarea{color:var(--ink);font-weight:400;font-size:.92rem}
label.chk{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;cursor:pointer}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.note{font-size:.82rem;color:var(--muted)}

/* Indicadores */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;color:var(--ink)}
.stat .n{font-family:var(--f-mono);font-size:1.9rem;font-weight:500;line-height:1.1}
.stat .l{font-size:.82rem;color:var(--muted);font-weight:600}
.stat.bad{border-top:3px solid var(--bad)}.stat.bad .n{color:var(--bad)}
.stat.warn{border-top:3px solid var(--warn)}.stat.warn .n{color:var(--warn)}
.stat.info{border-top:3px solid var(--info)}.stat.info .n{color:var(--info)}
.stat.okk{border-top:3px solid var(--ok)}.stat.okk .n{color:var(--ok)}
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ok);border-radius:99px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input[type=text]{flex:1 1 220px}
.filters select{flex:0 1 220px;max-width:100%}
@media (max-width:640px){.filters select{flex:1 1 45%}}

/* Listas */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-b{padding:16px}
.panel-h .count{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.list{list-style:none;margin:0;padding:0}
.it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);cursor:pointer}
.list>.it:first-child{border-top:0}
.it:hover{background:var(--surface-2)}
.it .t{font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.it .m{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.it .d{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);text-align:right;white-space:nowrap}
.it.done .t{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.s-vencido{--c:var(--bad);--cs:var(--bad-soft)}.s-hoy{--c:var(--warn);--cs:var(--warn-soft)}.s-proximo{--c:var(--warn);--cs:var(--warn-soft)}
.s-plazo{--c:var(--muted);--cs:var(--surface-2)}.s-proceso{--c:var(--info);--cs:var(--info-soft)}.s-hecho{--c:var(--ok);--cs:var(--ok-soft)}
.dot{background:var(--c)}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:.74rem;font-weight:700;background:var(--cs);color:var(--c);white-space:nowrap}
.more{padding:10px 16px;border-top:1px solid var(--line);font-size:.85rem}
.empty{padding:24px 16px;color:var(--muted);text-align:center}
.datehdr{padding:8px 16px;background:var(--surface-2);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.list>.datehdr:first-child{border-top:0}

/* Calendario */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.cal .wd{padding:6px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2)}
.cal .day{min-height:92px;padding:6px 8px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;border-radius:0}
.cal .day.out{background:var(--bg);cursor:default}
.cal .day.we{background:var(--bg)}
.cal .day .num{font-family:var(--f-mono);font-size:.85rem}
.cal .day.today .num{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:0 6px;align-self:flex-start}
.cal .day.sel{outline:2px solid var(--accent);outline-offset:-2px}
.cal .chips{display:flex;flex-wrap:wrap;gap:3px}
.cal .chip{font-family:var(--f-mono);font-size:.7rem;padding:0 6px;border-radius:5px;background:var(--cs);color:var(--c);font-weight:500}
@media (max-width:640px){.cal .day{min-height:58px;padding:4px}.cal .chip{font-size:.62rem;padding:0 4px}.cal .wd{padding:4px;font-size:.62rem}}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legend span{display:inline-flex;gap:5px;align-items:center}

/* Áreas */
.month-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.month-chips a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:600;font-size:.82rem;white-space:nowrap;color:var(--muted);text-decoration:none}
.month-chips a[aria-current="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.month-chips a.off{opacity:.45}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
@media (max-width:400px){.areas{grid-template-columns:minmax(0,1fr)}}
.area{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:0}
.area-h{padding:12px 14px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.area-h .row{justify-content:space-between;flex-wrap:nowrap}
.area-h h4{margin:0;font-size:.95rem;min-width:0}
.area-h .pct{font-family:var(--f-mono);font-weight:500}
.ck{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 14px;border-top:1px solid var(--line);cursor:pointer;font-size:.86rem}
.ck:first-child{border-top:0}
.ck:hover{background:var(--surface-2)}
.box{width:18px;height:18px;border-radius:5px;border:2px solid var(--line);margin-top:1px;display:grid;place-items:center}
.ck.s-hecho .box{background:var(--ok);border-color:var(--ok)}
.ck.s-hecho .box::after{content:"";width:5px;height:9px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ck.s-proceso .box{border-color:var(--info)}
.ck.s-vencido .box{border-color:var(--bad)}
.ck .clip{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* Tablas */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.heat{display:inline-block;min-width:46px;text-align:center;border-radius:5px;padding:2px 6px;font-family:var(--f-mono);font-size:.78rem}
.h0{background:var(--bad-soft);color:var(--bad)}.h1{background:var(--warn-soft);color:var(--warn)}.h2{background:var(--ok-soft);color:var(--ok)}.hn{color:var(--muted)}
.num-in{width:70px;text-align:right;font-family:var(--f-mono);padding:5px 6px}

/* Panel lateral */
.scrim{position:fixed;inset:0;background:rgb(10 12 20 / .45);z-index:50;display:flex;justify-content:flex-end}
.drawer{background:var(--surface);width:min(580px,100%);height:100%;overflow-y:auto;box-shadow:var(--shadow);display:flex;flex-direction:column}
.drawer-h{padding:18px 20px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:sticky;top:0;background:var(--surface);z-index:1}
.drawer-b{padding:16px 20px 28px;display:flex;flex-direction:column;gap:16px}
.drawer-h .x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.drawer-h h2{padding-right:30px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 12px;font-size:.86rem;margin:0}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;overflow-wrap:anywhere}
.resp-list{display:flex;flex-direction:column;gap:6px}
.resp{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.86rem}
.resp .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.resp .meta{font-size:.74rem;color:var(--muted)}
.resp button.del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.1rem}
.banner{border-radius:var(--r);padding:12px 16px;background:var(--bad-soft);color:var(--bad);font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner.ok{background:var(--ok-soft);color:var(--ok)}
.banner.info{background:var(--info-soft);color:var(--info)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:.88rem;z-index:80;max-width:calc(100% - 32px)}
details.cfg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.cfg>summary{padding:12px 16px;cursor:pointer;font-weight:700;display:flex;gap:10px;align-items:center}
details.cfg>summary .muted{font-weight:400;font-size:.85rem}
details.cfg .body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px}
.mchk{display:flex;flex-wrap:wrap;gap:6px}
.mchk label{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.8rem;cursor:pointer}
.irow{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,180px) auto auto;gap:8px;align-items:center}
@media (max-width:640px){.irow{grid-template-columns:minmax(0,1fr) 64px auto}.irow .ir{display:none}}
@media (prefers-reduced-motion:no-preference){.drawer{animation:slide .18s ease-out}@keyframes slide{from{transform:translateX(24px);opacity:.6}}}

/* Ingreso */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(120% 80% at 50% 0%,#16245A 0%,var(--navy) 60%)}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:min(420px,100%);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.login-card .logo{width:100%;border-radius:8px;display:block}
.login-card .sub{font-family:var(--f-brand);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--gold-deep);font-weight:600;text-align:center}
.login-card h1{margin:0;font-size:1.3rem;text-align:center;text-wrap:balance}
@media (prefers-color-scheme: dark){.login-card .sub{color:var(--gold)}}
.login-card .btn.primary{justify-content:center;padding:10px 14px}
.cargando{padding:48px 16px;text-align:center;color:var(--muted)}

/* Ajustes para celular */
@media (max-width:640px){
  .top-row{flex-wrap:nowrap;gap:10px}
  .brand{gap:8px}
  .brand img{height:30px}
  .brand .org{font-size:.66rem}
  .brand h1{font-size:.98rem}
  .who a,.who .rol{display:none}
  .bell{padding:5px 10px}
  .it{grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:10px 14px}
  .it .d{grid-column:2;text-align:left}
}