:root{--f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--f-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
--brand:#1f5fbf;--brand-d:#174a96;--brand-l:#e8f0fc;--orange:#f08a24;--orange-l:#fff1e3;--navy:#13213c;--ink:#14213d;--muted:#5d6678;--line:#e1e5ee;--bg:#f4f6fa;--ok:#15803d;--ok-l:#e7f6ec;--bad:#b91c1c}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:15px/1.5 var(--f-body);background:var(--bg);color:var(--ink);padding-bottom:env(safe-area-inset-bottom)}
header{background:var(--navy);color:#fff;border-bottom:4px solid var(--orange);position:sticky;top:0;z-index:5}
header .in{max-width:900px;margin:0 auto;padding:12px 16px 0;padding-top:max(12px,env(safe-area-inset-top))}
.logo{font:800 20px var(--f-display)}.logo span{color:var(--orange)}
.lema{color:#b9c4d8;font-size:13px}
nav{display:flex;gap:4px;margin-top:8px}
nav button{flex:1;background:none;border:0;color:#b9c4d8;font:600 14px var(--f-body);padding:8px 3px 10px;border-bottom:3px solid transparent;cursor:pointer}
nav button.on{color:#fff;border-bottom-color:var(--orange)}
nav b{background:var(--orange);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:3px}
main{max-width:900px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(19,33,60,.05)}
h2{font:800 19px var(--f-display);margin:0 0 6px}h3{font:700 17px var(--f-display);margin:0 0 8px}
.sub{color:var(--muted);font-size:13.5px;margin:4px 0}
label{display:block;font-weight:600;font-size:13px;margin:10px 0 0}
input,select,textarea{display:block;width:100%;margin-top:4px;font:15px var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.chk{display:flex;gap:8px;align-items:center}.chk input{width:auto;margin:0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-block;border:0;border-radius:10px;background:var(--brand);color:#fff;font:600 14px var(--f-body);padding:9px 14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--brand-d)}.btn:disabled{opacity:.6}
.btn.grande{display:block;width:100%;margin-top:14px;padding:14px;font-size:16px;background:var(--orange)}
.btn.grande:hover{background:#d97716}
.btn.sec{background:var(--brand-l);color:var(--brand-d);margin-top:10px}
code{background:var(--brand-l);padding:1px 5px;border-radius:5px;font-size:13px}
.hook{display:block;word-break:break-all;padding:8px;margin:8px 0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi b{display:block;font:800 24px var(--f-display);color:var(--navy)}.kpi span{font-size:12.5px;color:var(--muted)}
.kpi.ok{background:var(--ok-l);border-color:#bfe5cb}.kpi.ok b{color:var(--ok)}
.vacio{text-align:center;color:var(--muted);padding:40px 16px;background:#fff;border:1px dashed var(--line);border-radius:16px}
.ficha{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ficha.resp{border-left-color:var(--orange)}
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.num{font:700 16px var(--f-display)}
.sms{font-size:13px;color:var(--muted);margin-top:6px}.bad{color:var(--bad)}
.dem{background:var(--orange-l);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:14px}
.msg{color:var(--ink);font-style:italic;margin-top:4px}
.espera{margin-top:6px}
.est{margin-top:8px}.est select{width:auto;padding:6px 10px;font-size:14px}
.sim{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:start}
.pasos{color:var(--muted);font-size:14px;padding-left:20px;margin:14px 0 0}
.tel{width:270px;height:540px;margin:0 auto;background:#0d1526;border-radius:40px;padding:14px;position:relative;box-shadow:0 10px 30px rgba(19,33,60,.25)}
.tel .notch{width:90px;height:20px;background:#0d1526;border-radius:0 0 14px 14px;position:absolute;left:50%;transform:translateX(-50%);top:14px;z-index:2}
.pant{background:#f2f2f7;height:100%;border-radius:28px;padding:42px 12px 12px;overflow:auto}
.llam{text-align:center;margin-top:120px;font-size:15px;color:var(--ink)}.llam.gris{color:#999}
.suena{animation:vib .15s infinite}
@keyframes vib{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
.de{text-align:center;font-size:12px;color:#777;margin-bottom:8px;font-weight:600}
.burbuja{background:#e5e5ea;border-radius:18px 18px 18px 4px;padding:10px 12px;font-size:14px;line-height:1.4;animation:sube .4s ease-out}
.burbuja a{color:#0a63d1;word-break:break-all}
.ahora{font-size:11px;color:#999;margin-top:4px}
.pista{font-size:13px;color:var(--brand-d);background:var(--brand-l);border-radius:10px;padding:8px;margin-top:16px}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;transition:.3s;z-index:9;max-width:90vw}
#aviso.on{transform:translate(-50%,0)}
/* Página del cliente */
body.cli main{max-width:480px}
.ent{font:700 13px var(--f-body);color:var(--brand-d);background:var(--brand-l);display:inline-block;padding:3px 10px;border-radius:999px;margin-bottom:10px}
.opc{display:grid;gap:10px;margin-top:14px}
.opc button{text-align:left;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;font:22px var(--f-body);cursor:pointer;color:var(--ink)}
.opc button:hover{border-color:var(--orange);background:var(--orange-l)}
.opc button b{font:700 16px var(--f-display);grid-column:2}.opc button span{font-size:13px;color:var(--muted);grid-column:2}
.trampa{position:absolute;left:-9999px;width:1px;height:1px}
.fin{text-align:center;padding:20px 0}.fin .ok{width:56px;height:56px;border-radius:50%;background:var(--ok-l);color:var(--ok);font-size:30px;line-height:56px;margin:0 auto 10px}
.pie{text-align:center;color:var(--muted);font-size:12px}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr}.sim{grid-template-columns:1fr}.kpi b{font-size:20px}}