/* Panel de Monitoreo — sistema de diseño (self-contained, light/dark) */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#fafbfc; --panel:#ffffff;
  --text:#1e2732; --text-2:#5a6472; --muted:#8b94a3; --border:#e6e8ec; --border-2:#d3d7de;
  --accent:#2563eb; --accent-bg:#eaf1fe; --accent-bd:#bcd3fb;
  --ok:#15a34a; --ok-bg:#e7f6ec; --warn:#c2760a; --warn-bg:#fdf2e2; --danger:#dc2626; --danger-bg:#fdeaea;
  --s1:#2563eb; --s2:#7c93b8;
  --radius:12px; --shadow:0 1px 2px rgba(20,30,50,.06),0 4px 16px rgba(20,30,50,.06);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"], html[data-theme="auto"]:root{ }
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --bg:#0e1014; --surface:#171a21; --surface-2:#1b1f27; --panel:#141820;
    --text:#e7eaf0; --text-2:#a7b0be; --muted:#727c8b; --border:#262c37; --border-2:#333a47;
    --accent:#4f8bf7; --accent-bg:#16233c; --accent-bd:#274267;
    --ok:#39b866; --ok-bg:#122a1c; --warn:#e0972f; --warn-bg:#2c2212; --danger:#f0605e; --danger-bg:#2e1717;
    --s1:#4f8bf7; --s2:#586b8f;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1014; --surface:#171a21; --surface-2:#1b1f27; --panel:#141820;
  --text:#e7eaf0; --text-2:#a7b0be; --muted:#727c8b; --border:#262c37; --border-2:#333a47;
  --accent:#4f8bf7; --accent-bg:#16233c; --accent-bd:#274267;
  --ok:#39b866; --ok-bg:#122a1c; --warn:#e0972f; --warn-bg:#2c2212; --danger:#f0605e; --danger-bg:#2e1717;
  --s1:#4f8bf7; --s2:#586b8f; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--sans); background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-weight:600; margin:0; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); }

/* ---------- login ---------- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:28px; width:340px; max-width:100%; display:flex; flex-direction:column; gap:14px; }
.login-brand{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }
.login-brand b{ display:block; font-size:16px; } .login-brand span{ font-size:12px; color:var(--muted); }
.login-card label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-2); }
.login-card input{ height:40px; border:1px solid var(--border-2); border-radius:9px; background:var(--surface-2); color:var(--text); padding:0 12px; font-size:15px; }
.login-card input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.login-err{ color:var(--danger); font-size:13px; min-height:16px; text-align:center; }
.brand-dot{ width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:600; flex-shrink:0; }

/* ---------- layout ---------- */
.app{ display:flex; min-height:100vh; }
.side{ width:224px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border); padding:16px 12px;
  display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; }
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
.brand b{ font-size:15px; } .brand span{ display:block; font-size:11px; color:var(--muted); }
.nav{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:14.5px;
  color:var(--text-2); cursor:pointer; border:1px solid transparent; }
.nav:hover{ background:var(--surface-2); }
.nav.on{ background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bd); font-weight:600; }
.nav .ic{ width:17px; text-align:center; opacity:.85; }
.side-foot{ margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:12px; }
.theme-toggle,.btn-logout{ font-family:inherit; font-size:13px; border:1px solid var(--border-2); background:var(--surface-2);
  color:var(--text-2); border-radius:8px; height:34px; cursor:pointer; }
.theme-toggle{ width:36px; } .btn-logout{ flex:1; }
.theme-toggle:hover,.btn-logout:hover{ background:var(--bg); color:var(--text); }
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:5; }
.top h1{ font-size:19px; } .top .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.content{ padding:22px 24px; }
.loading{ color:var(--muted); padding:40px; text-align:center; }

/* ---------- kpis ---------- */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:18px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:15px 16px; box-shadow:var(--shadow); }
.kpi .lab{ font-size:12.5px; color:var(--muted); margin-bottom:7px; }
.kpi .val{ font-size:27px; font-weight:600; line-height:1; }
.kpi .val small{ font-size:15px; color:var(--muted); font-weight:400; }
.kpi .foot{ font-size:11.5px; color:var(--text-2); margin-top:8px; }

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:11px; box-shadow:var(--shadow); }
.card .hd{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card .hd h3{ font-size:14.5px; } .card .hd .mut{ font-size:12px; color:var(--muted); font-weight:400; }
.card .bd{ padding:14px 16px; }
.grid2{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
.stack{ display:flex; flex-direction:column; gap:16px; }

/* ---------- alerts ---------- */
.alert{ display:flex; align-items:flex-start; gap:11px; border-radius:10px; padding:12px 15px; margin-bottom:14px; border:1px solid; }
.alert.pausa,.alert.warning{ background:var(--warn-bg); border-color:var(--warn); color:var(--text); }
.alert.muted{ background:var(--surface-2); border-color:var(--border-2); color:var(--text-2); }
.alert .ai{ font-size:16px; line-height:1.3; }
.alert b{ font-weight:600; } .alert p{ margin:2px 0 0; font-size:13px; color:var(--text-2); }
.alert .btn{ margin-left:auto; flex-shrink:0; }

/* ---------- tables ---------- */
.tw{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
td{ font-size:13.5px; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-2); }
.grouphdr td{ background:var(--surface-2); font-weight:600; font-size:12.5px; color:var(--text-2); }

/* ---------- chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.c-ok{ background:var(--ok-bg); color:var(--ok); } .c-wait{ background:var(--warn-bg); color:var(--warn); }
.c-off{ background:var(--surface-2); color:var(--muted); } .c-mat{ background:var(--accent-bg); color:var(--accent); }
.c-vesp{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--border-2); }
.c-inhabil{ background:var(--accent-bg); color:var(--accent); }

/* ---------- buttons / inputs ---------- */
.btn{ font-family:inherit; font-size:13.5px; height:36px; border-radius:9px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); padding:0 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.btn:hover{ background:var(--surface-2); }
.btn-p{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn-p:hover{ filter:brightness(1.06); background:var(--accent); }
.btn-sm{ height:30px; padding:0 10px; font-size:12.5px; }
.btn-danger{ color:var(--danger); border-color:var(--danger); background:transparent; }
.btn-danger:hover{ background:var(--danger-bg); }
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
select,input[type=text],input[type=time],input[type=date],input[type=number]{ font-family:inherit; font-size:13.5px; height:36px;
  border-radius:9px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); padding:0 11px; }
select:focus,input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.act{ color:var(--muted); cursor:pointer; font-size:14px; padding:4px 7px; border-radius:7px; }
.act:hover{ background:var(--surface-2); color:var(--text); }

/* switch */
.sw{ position:relative; width:36px; height:20px; border-radius:999px; background:var(--ok); display:inline-block; vertical-align:middle; cursor:pointer; transition:background .15s; }
.sw.off{ background:var(--border-2); }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.sw.off::after{ left:18px; }

/* template panel + school chips */
.tmpl{ background:var(--surface); border:1px solid var(--accent-bd); border-radius:11px; padding:15px 16px; margin-bottom:16px; box-shadow:var(--shadow); }
.tmpl h3{ font-size:14px; margin-bottom:4px; } .tmpl .d{ font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.times{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.time-tag{ font-family:var(--mono); font-size:13px; padding:5px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border-2); display:inline-flex; gap:7px; align-items:center; }
.time-tag .x{ cursor:pointer; color:var(--muted); }
.schools-pick{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.sc{ font-family:var(--mono); font-size:12.5px; padding:5px 10px; border-radius:999px; border:1px solid var(--border-2); cursor:pointer; user-select:none; color:var(--text-2); }
.sc.sel{ background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bd); font-weight:600; }

/* charts */
svg text{ fill:var(--text-2); }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:11px; font-size:11.5px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.lg-d{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* modal */
.modal-back{ position:fixed; inset:0; background:rgba(15,20,30,.45); display:none; place-items:center; z-index:50; padding:20px; }
.modal-back.on{ display:grid; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); width:420px; max-width:100%; padding:20px; }
.modal h3{ font-size:16px; margin-bottom:14px; }
.modal .frm{ display:flex; flex-direction:column; gap:12px; }
.modal label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--text-2); }
.modal .row{ display:flex; gap:10px; } .modal .row>*{ flex:1; }
.modal .foot{ display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.days-pick{ display:flex; gap:5px; flex-wrap:wrap; }
.day{ font-size:12px; padding:5px 9px; border-radius:8px; border:1px solid var(--border-2); cursor:pointer; color:var(--text-2); }
.day.sel{ background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bd); font-weight:600; }

/* toasts */
.toasts{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:9px; z-index:60; }
.toast{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px; box-shadow:var(--shadow); padding:11px 15px; font-size:13.5px; min-width:200px; animation:slidein .2s ease; }
.toast.ok{ border-left-color:var(--ok); } .toast.err{ border-left-color:var(--danger); }
@keyframes slidein{ from{ opacity:0; transform:translateX(12px);} to{ opacity:1; transform:none;} }

@media (max-width:820px){
  .app{ flex-direction:column; } .side{ width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; }
  .brand{ display:none; } .side-foot{ margin:0; padding:0; } nav#nav{ display:flex; flex-wrap:wrap; gap:4px; }
  .kpis{ grid-template-columns:repeat(2,1fr); } .grid2{ grid-template-columns:1fr; }
}