:root{
  --bg:#f4f6f9;--panel:#fff;--ink:#14213d;--ink-2:#4b5563;--muted:#6b7280;--line:#e5e7eb;
  --brand:#1f3864;--brand-2:#2f5597;--accent:#e8702a;
  --ok:#2e8b57;--warn:#d98e04;--bad:#c0392b;--info:#2f5597;
  --r:12px;--shadow:0 1px 2px rgba(20,33,61,.06),0 4px 16px rgba(20,33,61,.06);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
a{color:var(--brand-2)}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
h1{font-size:22px;margin:0 0 4px;font-weight:700} h2{font-size:15px;margin:0 0 10px;font-weight:600;color:var(--ink-2)}
.sub{color:var(--muted);margin:0 0 16px}

/* layout */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.sidebar{background:var(--brand);color:#fff;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:18px}
.brand small{font-weight:500;opacity:.75;font-size:12px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block}
nav a{display:block;color:#dbe3f3;text-decoration:none;padding:9px 10px;border-radius:8px;font-weight:500;margin-bottom:2px}
nav a:hover{background:rgba(255,255,255,.08);color:#fff} nav a.active{background:rgba(255,255,255,.16);color:#fff}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;color:#dbe3f3}
main{padding:22px 26px;min-width:0}
.login{min-height:100vh;display:grid;place-items:center;background:var(--brand)}
.login-card{background:#fff;padding:28px;border-radius:14px;width:340px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.login-card .brand{color:var(--ink)}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);font-weight:500}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #c7d4ee;border-color:var(--brand-2)}

/* buttons */
.btn{font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{background:#f3f4f6} .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)} .btn.primary:hover{background:var(--brand-2)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff} .btn.small{padding:5px 10px;font-size:12px}
.btn.danger{color:var(--bad);border-color:#f1c4bf}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* toolbar / filters */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.toolbar label{min-width:120px}
.spacer{flex:1}

/* cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500} .kpi .v{font-size:24px;font-weight:700;margin-top:2px;letter-spacing:-.02em}
.kpi .d{font-size:12px;margin-top:2px} .kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)}
.card{background:var(--panel);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.card .head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .card .head h2{margin:0} .card .head .spacer{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}}
.chart-wrap{position:relative;height:280px} .chart-wrap.tall{height:360px}

/* tables */
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
th{position:sticky;top:0;background:#f8fafc;text-align:left;padding:8px 10px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td{padding:7px 10px;border-bottom:1px solid #f0f2f5;white-space:nowrap}
tr:hover td{background:#f8fafc}
tr.clickable{cursor:pointer}
td.wrap{white-space:normal;min-width:260px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.tag.PERDIDO,.tag.bad{background:#fde3dc;color:#9b2c1c} .tag.INACTIVO{background:#e5e7eb;color:#374151}
.tag.CAYENDO{background:#fff3c4;color:#8a5a00} .tag.CF{background:#fde3dc;color:#9b2c1c}
.tag.REACTIVADO{background:#dbeafe;color:#1e4ea1}
.tag.NUEVO,.tag.ok{background:#dcefe4;color:#1d6b40} .tag.OK{background:#eef2f7;color:#4b5563} .tag.ALERTA{background:#c0392b;color:#fff}
.tag.info{background:#dde7f7;color:#1f3864}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:8px;font-size:12px;color:var(--muted)}

/* misc */
.loading{color:var(--muted);padding:30px;text-align:center}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:1000;max-width:90vw}
.toast.err{background:var(--bad)}
.dropzone{border:2px dashed #c7d4ee;border-radius:12px;padding:26px;text-align:center;color:var(--muted);background:#fbfcfe}
.dropzone.over{background:#eef3fb;border-color:var(--brand-2)}
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:10px} .progress > div{height:100%;background:var(--brand-2);width:0;transition:width .2s}
.log{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#0f172a;color:#d1e3ff;padding:10px 12px;border-radius:8px;max-height:220px;overflow:auto;white-space:pre-wrap}
#map{height:calc(100vh - 150px);min-height:480px;border-radius:12px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)} .legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;background:var(--c)}
.comment{border-left:3px solid var(--brand-2);padding:6px 10px;margin:6px 0;background:#f8fafc;border-radius:0 8px 8px 0}
.comment .meta{font-size:11px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{background:#eef2f7;border-radius:8px;padding:4px 8px;font-size:12px}
.bar{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;min-width:80px} .bar > i{display:block;height:100%;background:var(--brand-2)}
.leaflet-popup-content{font-family:Inter,system-ui,sans-serif;font-size:13px}
@media (max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.sidebar nav{display:flex;flex-wrap:wrap;gap:2px}.sidebar-foot{margin-left:auto;flex-direction:row}main{padding:14px}.kpi .v{font-size:20px}}
@media print{.sidebar,.toolbar,.btn{display:none!important}.shell{grid-template-columns:1fr}main{padding:0}.tbl-wrap{max-height:none;overflow:visible}}

/* filtros por columna */
th{position:relative;white-space:nowrap}
.fbtn{margin-left:6px;cursor:pointer;color:#9aa5b5;font-size:11px;padding:1px 3px;border-radius:4px}
.fbtn:hover{background:#e6ebf2;color:#1f3864}
.fbtn.on{background:#e8702a;color:#fff}
.fpop{position:absolute;z-index:1000;width:250px;background:#fff;border:1px solid #d5dbe5;border-radius:10px;box-shadow:0 8px 28px rgba(20,30,60,.18);padding:10px;font-size:13px}
.fpop .fsort{display:flex;gap:6px;margin:6px 0;flex-wrap:wrap}
.fpop .frow{display:flex;gap:8px;margin:8px 0}.fpop .frow label{flex:1;display:flex;flex-direction:column;font-size:12px;color:#6b7280}
.fpop input[type=number],.fpop input[type=date],.fpop input[type=text]{width:100%;padding:5px 6px;border:1px solid #d5dbe5;border-radius:6px;font-size:13px}
.fpop .flist{max-height:200px;overflow:auto;margin:6px 0;border:1px solid #eef1f6;border-radius:6px;padding:4px}
.fpop .fopt{display:flex;align-items:center;gap:6px;padding:2px 4px;cursor:pointer;font-size:13px}
.fpop .fopt:hover{background:#f3f6fb}

.tag.COB{background:#fff1d6;color:#8a5a00;border:1px solid #f0c36d}
.tag.G-contactado{background:#dbeafe;color:#1e4ea1}.tag.G-recuperado{background:#dcefe4;color:#1d6b40}.tag.G-descartado{background:#eef2f7;color:#6b7280}.tag.G-pendiente{background:#fff3c4;color:#8a5a00}
.cobnote{margin:-8px 0 14px;padding:8px 12px;background:#fff8e6;border:1px solid #f0c36d;border-radius:8px;font-size:13px;color:#6b4a00}

.frases{margin:0;padding-left:18px;line-height:1.7;font-size:14px}
.puente{width:100%;border-collapse:collapse;font-size:14px}
.puente td{padding:7px 6px;border-bottom:1px solid var(--line,#e5e7eb)}
.puente td.n{color:#6b7280;white-space:nowrap}.puente td.m{text-align:right;font-weight:600;white-space:nowrap}
.puente td.pbar{width:30%}.puente td.pbar i{display:block;height:10px;border-radius:3px}
.puente i.pos{background:#2f855a}.puente i.neg{background:#c0392b}.puente .pos{color:#2f855a}.puente .neg{color:#c0392b}
.puente tr.tot td{font-weight:700;background:#f8fafc}
.kpis.small{grid-template-columns:repeat(2,1fr)}

.prodbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.prodbar .lbl{font-size:12px;color:#6b7280;margin-right:2px}
.prodbar .sep{width:1px;height:20px;background:#d1d5db;margin:0 4px}
.prodbar button{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;color:#374151}
.prodbar button:hover{border-color:#1f3864}
.prodbar button.on{background:#1f3864;border-color:#1f3864;color:#fff;font-weight:600}
.cuadre{width:100%;border-collapse:collapse;font-size:14px}.cuadre td{padding:6px;border-bottom:1px solid #e5e7eb}.cuadre td:last-child{text-align:right;font-weight:600}.cuadre tr.tot td{font-weight:700;background:#f8fafc}

.prodbar button small{opacity:.7;font-weight:400;margin-left:4px}

.heat{border-collapse:separate;border-spacing:3px;font-size:13px;width:100%}
.heat th{font-weight:600;color:#6b7280;font-size:12px;padding:4px 6px;text-align:center;white-space:nowrap}
.heat td{text-align:center;padding:9px 4px;border-radius:5px;min-width:54px;font-variant-numeric:tabular-nums}
.heat td.rl{text-align:left;font-weight:600;background:none;color:#374151;white-space:nowrap;padding-left:0}
.hl{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px}.hl.az{background:#1f3864}.hl.na{background:#e8702a}

.tag.CLAUSURADO,.tag.G-clausurado{background:#374151;color:#fff}
.pos{color:#2f855a}.neg{color:#c0392b}

.tfull{position:fixed;inset:0;z-index:60;background:#fff;padding:14px 18px;display:flex;flex-direction:column;overflow:hidden}
.tfull .tbl-wrap{max-height:none;flex:1;min-height:0}
.tfull .pager{flex:none;margin-top:8px}
body.tfull-open{overflow:hidden}
.map-rank{background:transparent;border:0;box-shadow:none;color:#fff;font:700 10px Inter,sans-serif;text-shadow:0 0 3px rgba(0,0,0,.8)}

/* ── v23: barra global, menú agrupado, ayudas "?", tablas con encabezado fijo, etiquetas más suaves ── */
.content{min-width:0;display:flex;flex-direction:column}
.gbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);padding:8px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.gbar-grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gbar .lbl{font-size:12px;color:#6b7280;margin-right:2px}
.gbar button[data-r]{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;color:#374151}
.gbar button[data-r].on,.gbar .prodbar button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.gbar input[type=date],.gbar select{padding:4px 8px;font-size:12.5px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
.gbar .prodbar{margin:0}
.gbar .prodbar button{padding:4px 10px;font-size:12.5px}
.gsearch input{padding:5px 10px;border:1px solid #d1d5db;border-radius:8px;min-width:210px;font-size:12.5px}
.gbar-corte{margin-left:auto;white-space:nowrap}
.nav-grp{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fa3c7;margin:14px 10px 4px;font-weight:600}
.nav-grp:first-child{margin-top:4px}
button.help{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #c7cfdb;background:#fff;color:#6b7280;font-size:12px;font-weight:700;cursor:pointer;margin-left:8px;vertical-align:middle;flex:none}
button.help:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.card .head button.help{margin-left:auto}
.card.has-help{position:relative}.card.has-help>button.help{position:absolute;top:12px;right:12px}
.ayuda{display:none!important}.ayuda.open{display:block!important;background:#f5f7fb;border-left:3px solid var(--brand-2);padding:8px 12px;border-radius:0 8px 8px 0;margin:6px 0 12px}
h1 .ayuda{display:none}
.tbl-wrap thead th{position:sticky;top:0;z-index:2;background:#fff;box-shadow:inset 0 -1px 0 var(--line)}
.tag{font-weight:600;border:1px solid transparent}
.tag.ALERTA{background:#fff;color:#c0392b;border-color:#c0392b}
.tag.PERDIDO,.tag.bad{background:#fff;color:#9b2c1c;border-color:#f1b9ad}
.tag.CF{background:#fff;color:#9b2c1c;border-color:#f1b9ad}
.tag.CAYENDO{background:#fff;color:#8a5a00;border-color:#f0d58a}
.tag.INACTIVO{background:#fff;color:#4b5563;border-color:#d1d5db}
.tag.OK{background:transparent;color:#9ca3af;border-color:#e5e7eb}
@media (max-width:860px){.gbar{padding:8px 14px;position:static;gap:6px 10px}.gbar-corte{display:block;margin-left:0;white-space:normal;width:100%}.gsearch{display:none}.gbar .lbl{display:none}.sidebar{padding:8px 12px}.sidebar nav a{padding:5px 8px;font-size:13px}.nav-grp{display:none}.kpis{grid-template-columns:repeat(2,1fr)}}
@media print{.gbar{display:none!important}}