:root{
  --ground:#EAF1F7; --surface:#FFFFFF; --surface-2:#F3F8FC; --surface-3:#E9F2F9;
  --ink:#0E2334; --muted:#5C7488; --border:#D3E0EC; --border-2:#C2D4E3;
  --blue:#0090D8; --cyan:#00A8E0; --navy:#184890;
  --violet:#604890; --green:#5FA02A; --yellow:#D99B00; --orange:#EF7A2A; --red:#D83030;
  --ok:#2E9E5B; --ok-bg:#E4F5EC; --warn:#E08A1E; --warn-bg:#FCEEDA; --crit:#D83030; --crit-bg:#FBE6E6;
  --com:#0090D8; --com-bg:#E1F1FB; --tec:#EF7A2A; --tec-bg:#FCEBDE;
  --shadow:0 1px 2px rgba(16,45,60,.06),0 8px 24px rgba(16,45,60,.06);
  --shadow-sm:0 1px 2px rgba(16,45,60,.08);
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --ground:#0A1521; --surface:#12283B; --surface-2:#0F2233; --surface-3:#173245; --ink:#E8F1F8;
  --muted:#94AABC; --border:#25415A; --border-2:#2F4E69;
  --blue:#2FB2EC; --cyan:#33C0E8; --navy:#5B86C8;
  --violet:#9F86D6; --green:#8FCB5A; --yellow:#F0C13E; --orange:#F79654; --red:#EC6A6A;
  --ok:#4FC07E; --ok-bg:#173a2a; --warn:#E9A94B; --warn-bg:#3a2c15; --crit:#EC6A6A; --crit-bg:#3a1d1d;
  --com:#2FB2EC; --com-bg:#123246; --tec:#F79654; --tec-bg:#3a2415;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.3);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0A1521; --surface:#12283B; --surface-2:#0F2233; --surface-3:#173245; --ink:#E8F1F8;
  --muted:#94AABC; --border:#25415A; --border-2:#2F4E69;
  --blue:#2FB2EC; --cyan:#33C0E8; --navy:#5B86C8;
  --violet:#9F86D6; --green:#8FCB5A; --yellow:#F0C13E; --orange:#F79654; --red:#EC6A6A;
  --ok:#4FC07E; --ok-bg:#173a2a; --warn:#E9A94B; --warn-bg:#3a2c15; --crit:#EC6A6A; --crit-bg:#3a1d1d;
  --com:#2FB2EC; --com-bg:#123246; --tec:#F79654; --tec-bg:#3a2415;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.3);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:var(--blue)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto;padding-inline:16px}
.muted{color:var(--muted)} .sub{color:var(--muted);font-size:13.5px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

/* Header */
header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.hbar{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{background:#fff;border-radius:12px;padding:6px 10px;display:flex;align-items:center;box-shadow:var(--shadow-sm);flex:none}
.logo img{height:38px;display:block}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:16px;letter-spacing:-.02em}
.brand span{font-size:12px;color:var(--muted);font-weight:600}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:10px;flex:none}
.who .ag{text-align:right;line-height:1.15;display:none}
@media(min-width:560px){.who .ag{display:block}}
.who .ag b{font-size:13px} .who .ag span{font-size:11px;color:var(--muted);font-weight:600}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--navy));flex:none}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);display:grid;place-items:center;font-size:16px;text-decoration:none}
nav.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid transparent;background:transparent;color:var(--muted);font-weight:700;padding:8px 14px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tab.active{background:var(--com-bg);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 25%,transparent)}
.tab .d{width:8px;height:8px;border-radius:50%}

main{padding-block:22px 60px}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.grid.two{grid-template-columns:1fr 340px}.grid.two.wide{grid-template-columns:1fr 1fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card h2{font-size:18px}

/* Stepper */
.stepper{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-weight:700;font-size:13px;color:var(--muted)}
.step .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--surface-3);color:var(--muted)}
.step.active{border-color:var(--blue);color:var(--ink);box-shadow:var(--shadow-sm)}
.step.active .n{background:var(--blue);color:#fff}
.step.done .n{background:var(--ok);color:#fff} .step.done{color:var(--ink)}

label.f{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.field{margin-bottom:14px}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:14.5px}
input:focus,select:focus,textarea:focus,button:focus-visible,.chip:focus-visible,a:focus-visible{outline:2.5px solid var(--cyan);outline-offset:1px}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:1fr 1fr 1fr}}

.btn{border:1px solid transparent;border-radius:var(--r-sm);padding:11px 18px;font-weight:800;background:var(--surface-2);color:var(--ink);border-color:var(--border-2);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--blue),#0079C1);color:#fff;border-color:transparent;box-shadow:0 6px 16px color-mix(in srgb,var(--blue) 35%,transparent)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:8px 13px;font-size:13px}
.btn.block{width:100%;justify-content:center}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.script{background:var(--com-bg);border:1px dashed color-mix(in srgb,var(--blue) 45%,transparent);border-radius:var(--r-sm);padding:14px 16px}
.script b{color:var(--blue)}

.searchbox{position:relative;margin-bottom:14px}
.searchbox input{padding-left:40px}
.searchbox .mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--border-2);background:var(--surface-2);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-align:left}
.chip:hover{border-color:var(--blue)}
.tag{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.tag.com{background:var(--com-bg);color:var(--com)} .tag.tec{background:var(--tec-bg);color:var(--tec)} .tag.tr{background:var(--surface-3);color:var(--muted)}

.node{border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);padding:18px;margin-top:4px}
.kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.kind.ask{background:var(--com-bg);color:var(--blue)} .kind.act{background:var(--warn-bg);color:var(--warn)}
.node h3{font-size:17px;margin-bottom:6px}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.opt{text-align:left;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-sm);padding:13px 15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:11px;transition:transform .05s}
.opt:hover{border-color:var(--blue);transform:translateX(2px)}
.opt .ar{margin-left:auto;color:var(--muted)}
.capture{margin-top:12px}
.capture .field{margin:0}

.result{border-radius:var(--r);padding:18px;border:1px solid}
.result.asis{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.result.recl{background:var(--tec-bg);border-color:color-mix(in srgb,var(--tec) 45%,transparent)}
.result.com{background:var(--com-bg);border-color:color-mix(in srgb,var(--blue) 40%,transparent)}
.result .rt{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px}
.badge.asis{background:var(--ok);color:#fff} .badge.recl{background:var(--orange);color:#fff} .badge.com{background:var(--blue);color:#fff}

.side{position:sticky;top:130px}
.trace{list-style:none;margin:0;padding:0}
.trace li{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--border)}
.trace li:last-child{border-bottom:0}
.trace .dot{width:12px;height:12px;border-radius:50%;background:var(--blue);margin-top:4px;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.trace .tx{font-size:13px} .trace .tx b{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13.5px}
.kv:last-child{border-bottom:0} .kv span{color:var(--muted)} .kv b{font-weight:800;text-align:right}

.synth{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden}
.synth .top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--surface-3);border-bottom:1px solid var(--border)}
.synth .top b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.synth pre{margin:0;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap;color:var(--ink);max-height:360px;overflow:auto}

.pill{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--surface-3);color:var(--muted)}
.pill.sla{background:var(--warn-bg);color:var(--warn)}
.note{font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:8px;padding:10px 13px;margin-top:14px}
.demoflag{font-size:11px;font-weight:800;color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);padding:3px 9px;border-radius:6px}

/* KPIs / dashboard */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:720px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}
.kpi .n{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:2px}
.bars{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.bar{display:grid;grid-template-columns:190px 1fr 44px;gap:10px;align-items:center;font-size:13px}
@media(max-width:560px){.bar{grid-template-columns:120px 1fr 38px}}
.bar .track{height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar .fill{height:100%;border-radius:6px}
.bar b{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.bar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th,table.data td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border)}
table.data th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.stars{color:var(--yellow);letter-spacing:1px}
.tblwrap{overflow-x:auto}
.tagrol{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px}
.tagrol.sup{background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--violet)}
.tagrol.op{background:var(--com-bg);color:var(--blue)}
.dot-state{display:inline-block;width:9px;height:9px;border-radius:50%}
.dot-state.on{background:var(--ok)} .dot-state.off{background:var(--muted)}

/* quiz */
.q{border:1px solid var(--border);border-radius:var(--r);padding:18px;background:var(--surface-2);margin-bottom:14px}
.qn{font-size:11px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.05em}
.q h3{font-size:16px;margin:6px 0 12px}
.ans{display:flex;flex-direction:column;gap:8px}
.ans button{text-align:left;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-sm);padding:11px 14px;font-weight:600;color:var(--ink)}
.ans button:hover:not(:disabled){border-color:var(--blue)}
.ans button.ok{background:var(--ok-bg);border-color:var(--ok);font-weight:800}
.ans button.no{background:var(--crit-bg);border-color:var(--crit)}

.ic{width:1.05em;height:1.05em;flex:none;vertical-align:-2px}
.dom-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media(max-width:520px){.dom-grid{grid-template-columns:1fr}}

/* segmented control (Comercial / Técnica) */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.segbtn{border:0;background:transparent;color:var(--muted);font-weight:800;padding:9px 18px;border-radius:9px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.segbtn.active{background:var(--surface);color:var(--blue);box-shadow:var(--shadow-sm)}
.segbtn:hover:not(.active){color:var(--ink)}

/* outcome buttons (solucionado / no) */
.outcome-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:520px){.outcome-btns{grid-template-columns:1fr}}
.obtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--border-2);
  background:var(--surface);border-radius:var(--r);padding:15px 16px;font-weight:800;font-size:15px;color:var(--ink)}
.obtn span{font-weight:600;font-size:12px;color:var(--muted)}
.obtn .ot{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--ink)}
.obtn.ok:hover,.obtn.ok.sel{border-color:var(--ok);background:var(--ok-bg)}
.obtn.no:hover,.obtn.no.sel{border-color:var(--orange);background:var(--tec-bg)}
.obtn.sel{box-shadow:var(--shadow-sm)}

/* switch / perilla */
.switch{position:relative;display:inline-block;width:52px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:var(--border-2);border-radius:999px;transition:.2s}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track .knob{transform:translateX(22px)}
.switch input:focus-visible + .track{outline:2.5px solid var(--cyan);outline-offset:2px}
.toggle-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.badge-state{font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px}
.badge-state.on{background:var(--ok-bg);color:var(--ok)} .badge-state.off{background:var(--warn-bg);color:var(--warn)}

/* flash + toast */
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:12px;font-weight:700;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.flash.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.flash.crit{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* login */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--blue) 18%,var(--ground)),var(--ground))}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px}
.login-card .logo{margin:0 auto 6px;width:max-content}
.login-card h1{font-size:20px;text-align:center;margin-top:8px}
.login-card .sub{text-align:center;margin-bottom:18px}
.arc{display:flex;gap:6px;justify-content:center;margin:14px 0 4px}
.arc i{width:9px;height:9px;border-radius:50%;display:block}
/* campanita */
.bell{position:relative}
.bell-badge{position:absolute;top:-4px;right:-4px;background:var(--crit);color:#fff;font-size:10px;font-weight:800;
  min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 3px}

/* alertas / notificaciones */
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--border)}
.alert.info{background:var(--com-bg);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.alert.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.alert.critico{background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.alert-ico{font-size:16px;line-height:1.4}
.ndot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:5px;background:var(--blue)}
.ndot.warn{background:var(--warn)} .ndot.critico{background:var(--crit)} .ndot.info{background:var(--blue)}
.notif{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px dashed var(--border)}
.notif:last-child{border-bottom:0}
.notif.unread{background:color-mix(in srgb,var(--yellow) 8%,transparent);border-radius:8px;padding:12px 10px}

/* autocompletado domicilio */
.dom-sug{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-sm);box-shadow:var(--shadow);margin-top:4px;max-height:260px;overflow:auto}
.dom-item{padding:10px 13px;cursor:pointer;border-bottom:1px solid var(--border);font-size:14px}
.dom-item:last-child{border-bottom:0}
.dom-item:hover{background:var(--surface-2)}

/* encuesta: escalas */
.scale{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.scitem{position:relative;cursor:pointer}
.scitem input{position:absolute;opacity:0;inset:0}
.scitem span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:9px 12px;border:1.5px solid var(--border-2);
  border-radius:10px;font-weight:800;color:var(--ink);background:var(--surface-2)}
.scitem input:checked + span{background:var(--com-bg);border-color:var(--blue);color:var(--blue)}
.scitem input:focus-visible + span{outline:2.5px solid var(--cyan);outline-offset:1px}

/* filtros mapa */
.chk{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;cursor:pointer}
.dot-map{width:11px;height:11px;border-radius:50%;display:inline-block}
#map{height:460px;width:100%;border-radius:var(--r);border:1px solid var(--border);z-index:0}
@media(max-width:560px){#map{height:340px}}

/* manual: documentos colapsables */
.docitem{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden}
.docitem>summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none}
.docitem>summary::-webkit-details-marker{display:none}
.docitem>summary::before{content:"▸";color:var(--muted);font-size:12px;margin-right:8px}
.docitem[open]>summary::before{content:"▾"}
.docitem[open]>summary{border-bottom:1px solid var(--border);color:var(--blue)}
.doctext{padding:14px 16px;white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--ink);max-height:520px;overflow:auto}
.editlink{cursor:pointer;list-style:none;display:inline-block;border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink);border-radius:var(--r-sm);padding:6px 12px;font-weight:700;font-size:13px}
.editlink::-webkit-details-marker{display:none}
.editlink:hover{border-color:var(--blue);color:var(--blue)}

/* manual (prosa) */
.prose{font-size:14.5px;line-height:1.65}
.prose ul,.prose ol{margin:8px 0;padding-left:20px}
.prose li{margin:4px 0}
.prose p{margin:8px 0}
.prose table{margin-top:10px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}