:root{--red:#c62828;--red-d:#9f1d1d;--red-l:#fdecea;--ink:#1d232b;--ink2:#4b5563;--mut:#6b7480;--line:#e2e6eb;--bg:#f4f6f8;--card:#fff;--ok:#2e7d32;--ok-l:#e8f5e9;--warn:#ed6c02;--warn-l:#fff4e5;--info:#1565c0;--info-l:#e3f0fd;--danger:#b71c1c;--radius:10px;--shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04)}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:20px;margin:0}h2{font-size:16px;margin:0 0 10px}h3{font-size:14px;margin:0 0 8px}
.muted{color:var(--mut)}.small{font-size:12px}.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}.right{text-align:right}.nowrap{white-space:nowrap}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:#14181d;color:#cfd5dc;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{font-weight:800;letter-spacing:.08em;color:#fff;font-size:20px;padding:4px 10px 2px}.side .logo span{color:var(--red)}
.side .tag{font-size:11px;color:#8b95a1;padding:0 10px 14px}
.side a{display:flex;align-items:center;gap:10px;color:#cfd5dc;padding:8px 10px;border-radius:7px;font-size:13.5px}
.side a:hover{background:#222830;text-decoration:none}.side a.on{background:var(--red);color:#fff}
.side .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#6b7480;margin:14px 10px 4px}
.main{min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 22px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .grow{flex:1}.top .who{text-align:right;font-size:12.5px;line-height:1.2}.top .who b{display:block;font-size:13px}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer}
.content{padding:20px 22px 60px;max-width:1400px}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.head .grow{flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.card.tight{padding:0;overflow:hidden}.card .card-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}.card .card-h h2{margin:0;flex:1}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .v{font-size:26px;font-weight:700;line-height:1.1}.kpi .l{color:var(--mut);font-size:12.5px}.kpi.red .v{color:var(--danger)}.kpi.warn .v{color:var(--warn)}.kpi.ok .v{color:var(--ok)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{text-align:left;font-weight:600;color:var(--ink2);background:#f8f9fb;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
.t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.t tr.click{cursor:pointer}.t tr.click:hover td{background:#fafbfc}
.scroll{overflow:auto;max-height:70vh}
.b{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:#eef1f4;color:var(--ink2)}
.b.ok{background:var(--ok-l);color:var(--ok)}.b.warn{background:var(--warn-l);color:#b45309}.b.red{background:var(--red-l);color:var(--danger)}.b.info{background:var(--info-l);color:var(--info)}.b.dark{background:#2b3138;color:#fff}.b.purple{background:#f1e8fd;color:#6a1b9a}
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:13px;padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:#f6f7f9;text-decoration:none}.btn.p{background:var(--red);border-color:var(--red);color:#fff}.btn.p:hover{background:var(--red-d)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn.ghost{border-color:transparent;background:transparent}.btn.sm{padding:4px 9px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.lg{padding:12px 18px;font-size:15px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:10px}
label.f>input,label.f>select,label.f>textarea{margin-top:4px}
input,select,textarea{font:inherit;width:100%;padding:7px 9px;border:1px solid #cfd5dc;border-radius:7px;background:#fff;color:var(--ink)}
textarea{min-height:70px;resize:vertical}input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(198,40,40,.25);border-color:var(--red)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.filters>*{width:auto;min-width:150px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 14px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs a{padding:9px 14px;color:var(--ink2);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}.tabs a.on{color:var(--red);border-color:var(--red)}.tabs a:hover{text-decoration:none}
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 12px;font-size:13px}.kv>div:nth-child(odd){color:var(--mut)}
.modal-bg{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:12px;width:min(720px,100%);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal.wide{width:min(1050px,100%)}
.modal .mh{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.modal .mh h2{margin:0;flex:1}
.modal .mb{padding:16px 18px;max-height:72vh;overflow:auto}.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.toast{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast div{background:#1f2937;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:var(--shadow);max-width:380px;font-size:13px}.toast div.err{background:var(--danger)}.toast div.ok{background:var(--ok)}
.empty{padding:26px;text-align:center;color:var(--mut)}
.tree ul{list-style:none;margin:0;padding-left:20px;border-left:1px dashed #d0d6dd}.tree>ul{padding-left:0;border:0}
.tree li{margin:6px 0}.tree .node{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:8px;background:#fafbfc;border:1px solid var(--line)}
.tree .lvl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);min-width:78px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cal .dh{background:#f8f9fb;font-weight:600;font-size:12px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cal .d{min-height:108px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;background:#fff;overflow:hidden}
.cal .d.out{background:#fafbfc}.cal .d.today{box-shadow:inset 0 0 0 2px var(--red)}.cal .d .n{font-size:11.5px;color:var(--mut);margin-bottom:2px}
.cal.week .d{min-height:420px}
.chip{display:block;font-size:11px;padding:2px 5px;border-radius:5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid #90a4ae;background:#eef1f4}
.chip.programada{border-color:#90a4ae}.chip.asignada{border-color:var(--info);background:var(--info-l)}.chip.en_ejecucion{border-color:#6a1b9a;background:#f1e8fd}.chip.completada{border-color:var(--ok);background:var(--ok-l)}.chip.aprobada{border-color:#1b5e20;background:#c8e6c9}.chip.vencida{border-color:var(--danger);background:var(--red-l)}.chip.cancelada{opacity:.5;text-decoration:line-through}
.chip.critica::before{content:"● ";color:var(--danger)}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px}.legend .chip{display:inline-block;margin:0}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}.steps span{font-size:12px;padding:4px 10px;border-radius:999px;background:#eef1f4;color:var(--mut)}.steps span.on{background:var(--red);color:#fff}.steps span.done{background:var(--ok-l);color:var(--ok)}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:12px;font-size:13px;border:1px solid}
.alert.info{background:var(--info-l);border-color:#bcd8f7;color:#0d47a1}.alert.warn{background:var(--warn-l);border-color:#ffd8a8;color:#8a4b00}.alert.red{background:var(--red-l);border-color:#f5c2c0;color:var(--danger)}.alert.ok{background:var(--ok-l);border-color:#b9dfbb;color:#1b5e20}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#14181d 0%,#2a0f0f 100%);padding:16px}
.login .box{background:#fff;border-radius:14px;padding:28px;width:min(400px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login .logo{font-weight:800;font-size:28px;letter-spacing:.08em}.login .logo span{color:var(--red)}
.demo-users{font-size:12px;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.demo-users button{margin:2px}
/* Técnico (móvil) */
.tech{max-width:640px;margin:0 auto;padding:12px 12px 90px}
.tech .item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.tech .item.click{cursor:pointer}
.bottom{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:10;padding-bottom:env(safe-area-inset-bottom)}
.bottom a{flex:1;text-align:center;padding:9px 4px;font-size:12px;color:var(--ink2);font-weight:600}.bottom a .i{display:block;font-size:20px}.bottom a.on{color:var(--red)}
.ck{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:#fff}
.ck.nc{border-color:#f5c2c0;background:#fffafa}.ck .opts{display:flex;gap:6px;margin-top:8px}
.ck .opts button{flex:1;padding:10px 4px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.ck .opts button.on.c{background:var(--ok);color:#fff;border-color:var(--ok)}.ck .opts button.on.n{background:var(--danger);color:#fff;border-color:var(--danger)}.ck .opts button.on.a{background:#607d8b;color:#fff;border-color:#607d8b}
canvas.sig{width:100%;height:150px;border:1px dashed #9aa4af;border-radius:8px;background:#fff;touch-action:none}
.offline{background:#fff4e5;color:#8a4b00;text-align:center;padding:6px;font-size:12.5px;font-weight:600}
video.scan{width:100%;border-radius:12px;background:#000;max-height:50vh}
.qrbox{display:flex;gap:16px;align-items:center}.qrbox img{width:130px;height:130px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .app{grid-template-columns:1fr}.side{position:fixed;left:-260px;width:240px;z-index:30;transition:left .2s}.side.open{left:0}.burger{display:block}
  .g2,.g3{grid-template-columns:1fr}.content{padding:14px 12px 60px}.top{padding:8px 12px}.kv{grid-template-columns:120px 1fr}.cal .d{min-height:70px}.chip{font-size:10px}
  .filters>*{min-width:0;flex:1 1 140px}
}