:root{--bg:#f5f6f8;--card:#fff;--ink:#1f2937;--mut:#6b7280;--pri:#0f6cbd;--ok:#107c10;--warn:#c27a00;--bad:#c4314b;--line:#e5e7eb}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
nav{position:fixed;inset:0 auto 0 0;width:200px;background:#13233a;color:#cbd5e1;padding:16px 0;overflow:auto}
nav h1{font-size:15px;color:#fff;margin:0 16px 6px}nav .who{margin:0 16px 12px;font-size:12px;color:#94a3b8}
nav a{display:block;padding:9px 16px;color:#cbd5e1;text-decoration:none}nav hr{border:0;border-top:1px solid #2a3f5f;margin:8px 0}
nav a:hover,nav a.on{background:#1e3a5f;color:#fff}main{margin-left:200px;padding:22px;max-width:1300px}
nav .ver{margin:14px 16px 0;font-size:11px;color:#64748b}
h2{margin:0 0 14px;font-size:20px}h3{margin:18px 0 8px;font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:16px}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.kpi b{display:block;font-size:26px}.kpi span{color:var(--mut)}
table{width:100%;border-collapse:collapse}th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;color:var(--mut);background:#fafafa}
input,select,textarea,button{font:inherit;padding:6px 8px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}
textarea{width:100%;min-height:70px}input[type=text],input[type=number],input[type=time],input[type=date],input[type=password],select{min-width:110px}
button,.btn{background:var(--pri);color:#fff;border:0;cursor:pointer;text-decoration:none;padding:7px 12px;border-radius:6px;display:inline-block}
button.sec,.btn.sec{background:#e5e7eb;color:#111}button.del{background:var(--bad)}
label{display:inline-block;margin:4px 12px 4px 0}label.b{display:block}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.row>div{display:flex;flex-direction:column}
.pill{padding:2px 8px;border-radius:99px;font-size:12px;color:#fff;background:#6b7280}
.on_time,.sent{background:var(--ok)}.late{background:var(--warn)}.excused{background:#5b5fc7}.absent{background:var(--bad)}.pending{background:#9ca3af}.no_records{background:#cbd5e1;color:#334155}
.msg{background:#e8f3ff;border:1px solid #b6d8f5;padding:8px 12px;border-radius:6px;margin-bottom:12px}
.mut{color:var(--mut)}.bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;min-width:70px}.bar i{display:block;height:100%;background:var(--ok)}
.qr img{width:300px;height:300px;image-rendering:pixelated;border:1px solid var(--line)}
.tag{display:inline-block;background:#e8f3ff;color:#0f4c81;border-radius:4px;padding:1px 6px;margin:0 3px 3px 0;font-size:12px}
.wa{background:#dcf8c6;border-radius:10px;padding:12px 14px;white-space:pre-wrap;max-width:460px;box-shadow:0 1px 1px #0002}
.locbox{border:1px solid #cbd5e1;border-radius:6px;padding:6px 10px;background:#fff}
@media(max-width:800px){nav{position:static;width:auto}main{margin:0}}
@media print{nav,.noprint{display:none!important}main{margin:0;padding:0;max-width:none}body{background:#fff}.card{border:0;padding:0}}