:root{
  --paper:#EEF2F9;--sheet:#FFFFFF;--ink:#141B33;--muted:#535B76;--line:#D9DEEB;
  --navy:#324B9B;--navy-d:#1F3270;--cyan:#00ABF0;--cyan-t:#006E9E;--sky:#6FCDF1;--soft:#E6F4FC;--zebra:#F4F9FD;
  --red:#C62828;--red-t:#A11B1B;--red-bg:#FDE8E8;--amb:#D98300;--amb-t:#7A4300;--amb-bg:#FFF1DB;
  --ok-t:#1F6B3A;--ok-bg:#E3F4EA;
  --display:"Saira","Arial Narrow",Arial,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5}
a{color:var(--navy)}a:hover{color:var(--navy-d)}
h1,h2,h3{font-family:var(--display);margin:0;color:var(--navy);line-height:1.15}
h1{font-size:28px;font-weight:800;font-stretch:85%}
h2{font-size:15px;font-weight:700;font-stretch:90%;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cyan);flex:none}
p{margin:0}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:12px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-t)}
/* barra superior */
.top{background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:10px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand .logo{background:#fff;border-radius:8px;width:46px;height:50px;display:flex;align-items:center;justify-content:center}
.brand img{width:38px}
.brand b{display:block;font-family:var(--display);font-weight:800;font-stretch:85%;font-size:20px;letter-spacing:.02em}
.brand span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#BFE9FA}
nav.menu{display:flex;flex-wrap:wrap;gap:2px}
nav.menu a{color:#fff;text-decoration:none;padding:11px 12px;border-radius:6px;font-family:var(--display);font-weight:600;font-stretch:90%;text-transform:uppercase;letter-spacing:.05em;font-size:13px;position:relative}
nav.menu a:hover{background:rgba(255,255,255,.14);color:#fff}
nav.menu a.on{background:#fff;color:var(--navy)}
nav.menu a .badge{position:absolute;top:2px;right:0;background:var(--red);color:#fff;border-radius:9px;font-size:11px;padding:0 6px;font-family:var(--body)}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.who .t{display:grid;text-align:right}.who .t small{color:#BFE9FA;font-family:var(--mono);font-size:12px}
.band{height:6px;background:linear-gradient(90deg,var(--navy) 0 45%,var(--cyan) 45% 75%,var(--sky) 75%)}
main{max-width:1500px;margin:0 auto;padding:22px 24px 48px;display:grid;gap:18px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.head>div:first-child{display:grid;gap:4px}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.grow{flex:999 1 560px;min-width:0}.side{flex:1 1 360px;min-width:0}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:16px 18px;display:grid;gap:12px;align-content:start}
.card.flush{padding:0;overflow:hidden;gap:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:12px 16px;display:grid;gap:2px}
.kpi span{font-size:12px;color:var(--muted)}.kpi b{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;color:var(--navy)}
.kpi.r b{color:var(--red-t)}.kpi.a b{color:var(--amb-t)}
/* controles */
.btn{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:13px;min-height:44px;padding:0 16px;border-radius:6px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.p{background:var(--navy);color:#fff}.btn.p:hover{background:var(--navy-d)}
.btn.d{border-color:var(--red-t);color:var(--red-t)}.btn.d.p{background:var(--red-t);color:#fff}
.btn.w{border-color:#fff;background:transparent;color:#fff}.btn.w:hover{background:rgba(255,255,255,.14)}
.btn.s{min-height:36px;padding:0 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:8px}
label.f{display:grid;gap:4px;font-size:12px;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:9px 12px;min-height:44px;background:#fff;width:100%}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:0;border-color:var(--cyan)}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--navy)}
.chk{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}
.pill{font-size:12px;font-weight:500;padding:3px 8px;border-radius:4px;white-space:nowrap;display:inline-block}
.pill.r{background:var(--red-bg);color:var(--red-t)}.pill.a{background:var(--amb-bg);color:var(--amb-t)}
.pill.i{background:var(--paper);color:var(--muted)}.pill.g{background:var(--ok-bg);color:var(--ok-t)}.pill.b{background:var(--soft);color:#1E3F73}
/* tablas */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12px;text-align:left;padding:9px 12px;white-space:nowrap}
td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--zebra)}
tr.click{cursor:pointer}tr.click:hover td{background:var(--soft)}
/* cascada */
.ev{display:grid;grid-template-columns:6px 78px minmax(0,1fr) 120px auto;gap:12px;align-items:center;padding:10px 14px 10px 0;border-top:1px solid var(--line);cursor:pointer}
.ev:hover,.ev.sel{background:var(--soft)}
.ev .bar{align-self:stretch;background:#B9C2D8}
.ev.p1 .bar{background:var(--red)}.ev.p2 .bar{background:var(--amb)}
.ev .t{font-family:var(--mono);font-size:13px;color:var(--muted)}
.ev .d{display:grid;gap:1px;min-width:0}
.ev .d b{font-family:var(--display);font-weight:700;font-size:16px}
.ev.p1 .d b{color:var(--red-t)}
.ev .d span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab{display:grid;grid-template-columns:6px 78px minmax(0,1fr) 120px auto;gap:12px;padding:9px 14px 9px 0;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.vacio{padding:28px 18px;text-align:center;color:var(--muted)}
.alerta-sonido{background:var(--red-bg);color:var(--red-t);border:1px solid #F2B8B8;border-radius:6px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* caso */
.casohead{border-top:4px solid var(--navy)}.casohead.p1{border-top-color:var(--red)}.casohead.p2{border-top-color:var(--amb)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12px}
.steps li{padding:9px 6px;border-radius:4px;text-align:center;background:var(--paper);color:var(--muted)}
.steps li.ok{background:var(--ok-bg);color:var(--ok-t)}.steps li.on{background:var(--navy);color:#fff}
.log{display:grid}
.log>div{display:grid;grid-template-columns:150px 14px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.log .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--navy)}
.log .evento .dot{background:var(--red)}.log .ot .dot{background:var(--amb)}.log .cierre .dot{background:#2E8B57}
.contacto{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft);border-radius:4px;padding:8px 12px;flex-wrap:wrap}
.meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;font-size:13px;background:var(--soft);border-radius:4px;padding:10px 12px}
.meta span:nth-child(odd){color:var(--muted)}
.reservado{background:var(--amb-bg);color:var(--amb-t);border-radius:4px;padding:10px 12px;white-space:pre-wrap;font-size:13px}
.map{height:260px;border-radius:4px;border:1px solid var(--line);background:#E8EEF5}
.map.big{height:420px}
/* árbol */
.tree{display:grid;gap:1px;max-height:70vh;overflow:auto}
.tree button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:13px}
.tree button:hover{background:var(--soft)}
.tree button.sel{background:var(--navy);color:#fff}
.tree button.sel .muted{color:#D8E2F7}
.tree .n0{font-weight:600;color:var(--navy)}.tree .n1{padding-left:24px;font-weight:500}.tree .n2{padding-left:42px}.tree .n3{padding-left:60px}
.tree .off{text-decoration:line-through;opacity:.7}
.lista{display:grid;gap:8px}
.lista .it{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}.lista .it label{flex:1 1 140px}.lista .it>.btn,.lista .it>span{flex:none;width:44px;min-height:44px}
/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:min(420px,100%);padding:28px;gap:16px}
.login .logo{width:120px;justify-self:center}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:6px;font-size:14px;display:none;z-index:2000;max-width:90vw}
#toast.err{background:var(--red-t)}
.bars{display:grid;gap:8px}
.bars div{display:grid;grid-template-columns:220px minmax(0,1fr) 60px;gap:10px;align-items:center;font-size:13px}
.bars i{display:block;height:16px;background:var(--sky);border-radius:3px}
@media (max-width:700px){
  .ev,.cab{grid-template-columns:6px 64px minmax(0,1fr)}
  .ev>:nth-child(4),.ev>:nth-child(5),.cab>:nth-child(4),.cab>:nth-child(5){grid-column:3}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .log>div{grid-template-columns:1fr}.log .dot{display:none}
  .who{margin-left:0}
}

/* agenda y módulo técnico */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calh{background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px;padding:8px 10px}
.cald{min-height:118px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:6px 6px 8px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.cald:nth-child(7n+1){border-left:0}
.cald.fuera{background:#F6F8FC}.cald.fuera .num{color:var(--muted)}
.cald.hoy .num{background:var(--cyan);color:#fff;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.cald.sel{outline:2px solid var(--navy);outline-offset:-2px;background:var(--soft)}
.cald .num{font-family:var(--display);font-weight:700;color:var(--navy);font-size:14px}
.calt{font-size:12px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.calt:hover{text-decoration:underline}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;background:var(--navy);vertical-align:0}
.dot.r{background:var(--red)}.dot.a{background:var(--amb)}.dot.g{background:#2E8B57}.dot.i{background:#B9C2D8}.dot.b{background:var(--navy)}
.tcard{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:6px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.tcard:hover{background:var(--soft);color:var(--ink)}
h3.secc{background:var(--navy);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-radius:4px;margin-top:6px}
fieldset.campo{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin:0;display:grid;gap:6px}
fieldset.campo legend{font-size:12px;color:var(--muted);padding:0 4px}
.chk.opt{border:1px solid var(--line);border-radius:6px;padding:0 16px;min-height:44px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}.thumb{position:relative}.thumb img{width:110px;height:110px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.thumb .btn{position:absolute;top:4px;right:4px;min-height:28px;width:28px;padding:0;background:#fff}
canvas.firma{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;border:1px dashed var(--navy);border-radius:4px;background:#fff;touch-action:none}
.firmaimg{max-width:300px;border-bottom:1px solid var(--ink)}
details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}
@media (max-width:700px){.cald{min-height:70px;padding:4px}.calt{font-size:10px}.calh{padding:6px 4px;font-size:10px}
  main{padding:14px 12px 40px}.top{padding:8px 12px}.brand span span{display:none}}

[hidden]{display:none!important}
