:root{
  --bg:#0f1720; --panel:#16212e; --card:#1b2836; --line:#27384a;
  --ink:#e8eef5; --muted:#93a7ba; --accent:#3aa0ff; --accent2:#2bb6cc;
  --up:#2bb6cc; --down:#ff5d6c; --flat:#93a7ba; --sep:#46617d;
  --field:#0c141c; --field-ink:#e8eef5;
  --ink-strong:#ffffff; --card2:#11202c; --card2-strong:#20364c;
  --on-accent:#04121f; --warn:#f3b23a; --hero-bg:linear-gradient(135deg,#16263a,#101a26);
}
:root[data-theme="light"]{
  --bg:#eef2f7; --panel:#ffffff; --card:#ffffff; --line:#c4cdd8;
  --ink:#12202c; --muted:#465563; --accent:#1657c8; --accent2:#0c7d92;
  --up:#0c7d92; --down:#cc2f36; --flat:#465563; --sep:#95a3b2;
  --field:#eef2f7; --field-ink:#12202c;
  --ink-strong:#0c1620; --card2:#e9eef5; --card2-strong:#d3e0f0;
  --on-accent:#ffffff; --warn:#b45309; --hero-bg:linear-gradient(135deg,#eef3fa,#e0e9f4);
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
a{color:var(--accent);text-decoration:none}
code{background:var(--field);border:1px solid var(--line);padding:1px 5px;border-radius:4px;color:var(--muted)}
/* Campos de formulario tematizables (anula estilos inline dark antiguos) */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{background:var(--field)!important;color:var(--field-ink)!important;border-color:var(--line)!important}

/* Topbar */
.topbar{display:flex;align-items:center;gap:18px;background:var(--panel);border-bottom:1px solid var(--line);padding:10px 18px;position:sticky;top:0;z-index:100}
.brand{font-weight:700;color:var(--ink-strong)}
.menu{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.menu a{padding:7px 11px;border-radius:7px;color:var(--muted)}
.menu a:hover{background:var(--card);color:var(--ink)}
.menu a.active{background:var(--accent);color:var(--on-accent)}
.menu small{opacity:.6;font-size:.7em}
/* Botón hamburguesa (solo móvil) */
.navtog{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;font-size:1.15rem;line-height:1;padding:5px 11px;cursor:pointer}
/* Grupo desplegable (Configuración) */
.menu-group{position:relative}
.mg-btn{padding:7px 11px;border-radius:7px;color:var(--muted);background:none;border:0;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:5px}
.mg-btn:hover{background:var(--card);color:var(--ink)}
.mg-btn.active{background:var(--accent);color:var(--on-accent)}
.mg-btn .caret{font-size:.7em;opacity:.7}
.mg-items{position:absolute;top:calc(100% + 4px);right:0;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;flex-direction:column;gap:2px;display:none;box-shadow:0 12px 34px rgba(0,0,0,.45);z-index:30}
.menu-group.open .mg-items{display:flex}
.mg-items a{padding:8px 11px;border-radius:7px;color:var(--muted);white-space:nowrap}
.mg-items a:hover{background:var(--card);color:var(--ink)}
.mg-items a.active{background:var(--accent);color:var(--on-accent)}
.tema-btn{background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;padding:5px 8px;color:var(--ink)}
.tema-btn:hover{border-color:var(--accent)}
.user{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9em}
.user b{color:var(--accent2)}
.logout{color:var(--down)}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:22px 18px 60px}
.page-head{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.page-head h1{font-size:1.4rem;margin:0}
.ej{color:var(--accent);font-weight:700}
.sel-tienda select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:240px;font-size:.95rem}
.ranks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rk{background:var(--card2);border:1px solid var(--line);border-left:4px solid var(--flat);border-radius:10px;padding:12px 14px}
.rk-l{color:var(--muted);font-size:.82rem}
.rk-p{font-size:1.7rem;font-weight:700;color:var(--ink-strong);line-height:1.1}
.rk-p span{font-size:.9rem;color:var(--muted);font-weight:400}
.rk-v{font-size:.78rem;color:var(--ink);margin-top:3px}
.rk-v small{color:var(--muted)}
.rk.rk-ok{border-left-color:var(--up)} .rk.rk-mid{border-left-color:var(--warn)} .rk.rk-bad{border-left-color:var(--down)}
@media(max-width:900px){.ranks{grid-template-columns:repeat(2,1fr)}}

/* Informe tienda v2 */
.hero{display:flex;align-items:center;gap:20px;background:var(--hero-bg);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:16px}
.hero-main{flex:1}
.hero-name{font-size:1.6rem;font-weight:800;color:var(--ink-strong);letter-spacing:.3px}
.hero-tags{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.hero-pos{display:flex;align-items:center;gap:12px;background:rgba(58,160,255,.12);border:1px solid var(--line);border-radius:12px;padding:10px 18px}
.hp-num{font-size:2.2rem;font-weight:800;color:var(--accent);line-height:1}
.hp-lbl{font-size:.74rem;color:var(--muted)}
.rankbars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rb-top{display:flex;justify-content:space-between;align-items:baseline}
.rb-l{color:var(--muted);font-size:.82rem}
.rb-p{font-weight:800;font-size:1.2rem}.rb-p small{font-size:.7rem;color:var(--muted);font-weight:400}
.rb-p.rk-ok{color:var(--up)}.rb-p.rk-mid{color:var(--warn)}.rb-p.rk-bad{color:var(--down)}
.rb-bar{height:7px;background:var(--field);border-radius:5px;overflow:hidden;margin:6px 0}
.rb-bar i{display:block;height:100%}
.rb-bar i.rk-ok{background:var(--up)}.rb-bar i.rk-mid{background:var(--warn)}.rb-bar i.rk-bad{background:var(--down)}
.rb-v{font-size:.76rem;color:var(--ink)}.rb-v small{color:var(--muted)}
.minib{display:inline-block;width:46px;height:6px;background:var(--field);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:6px}
.minib i{display:block;height:100%;background:var(--accent)}.minib.red i{background:var(--down)}
.modn{display:inline-block;min-width:22px;text-align:center;background:rgba(255,93,108,.18);color:var(--down);border-radius:5px;padding:1px 6px;font-weight:700}
.pedmes{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.pm{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.pm-bar{width:70%;background:linear-gradient(180deg,#3aa0ff,#1f5e9e);border-radius:4px 4px 0 0;min-height:2px}
.pm-v{font-size:.7rem;color:var(--ink);margin-top:3px}
.pm-l{font-size:.68rem;color:var(--muted)}
@media(max-width:900px){.rankbars{grid-template-columns:repeat(2,1fr)}.hero{flex-direction:column;align-items:flex-start}}
.chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:.82rem;color:var(--muted)}
.chip b{color:var(--ink)}
.badge-demo{background:var(--card2);color:var(--warn);border:1px solid var(--line);padding:4px 10px;border-radius:20px;font-size:.78rem;font-weight:600}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.filtros label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted)}
.filtros select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px;min-width:120px}
.btn-aplicar{padding:8px 14px;border:0;border-radius:7px;background:var(--accent);color:var(--on-accent);font-weight:700;cursor:pointer}
.btn-clear{padding:8px 12px;color:var(--muted);align-self:flex-end}

/* Bloques cockpit */
.block-h{font-size:.82rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:6px 0 10px;border-left:3px solid var(--accent);padding-left:9px}
.block-h small{font-weight:400;text-transform:none;letter-spacing:0}
.kpi.accent{border-color:var(--accent);background:linear-gradient(135deg,rgba(58,160,255,.1),var(--card))}
.kpi-main b.up{color:var(--up)} .kpi-main b.down{color:var(--down)}
.kpis.kpis-2{grid-template-columns:repeat(2,1fr);max-width:640px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi-label{color:var(--muted);font-size:.82rem}
.kpi-value{font-size:1.9rem;font-weight:700;margin:4px 0;color:var(--ink-strong)}
.kpi-sub{font-size:.82rem;color:var(--ink)}
.kpi-sub2{font-size:.75rem;color:var(--muted);margin-top:3px}
.kpi-unit{font-size:.75rem;color:var(--muted);font-weight:400}
.kpi-delta{font-size:.9rem;font-weight:600;margin:0 6px}
.kpi-vs{font-size:1rem;color:var(--muted);font-weight:600}
.kpi-value{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
.tbl small{color:var(--muted)}
.kpi-sub b{color:var(--ink-strong)}

/* Cards & grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h2{font-size:1rem;margin:0 0 12px}
.card h3{font-size:.9rem;color:var(--muted);margin:14px 0 6px}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{color:var(--muted);font-weight:600}
.tbl.small{font-size:.78rem;white-space:nowrap}
.scroll-x{overflow-x:auto}

/* ABC chips */
.abc{display:inline-block;min-width:22px;text-align:center;border-radius:5px;padding:1px 6px;font-weight:700;font-size:.8rem}
.abc-a{background:rgba(39,192,138,.18);color:var(--up)}
.abc-b{background:rgba(243,178,58,.18);color:var(--warn)}
.abc-c{background:rgba(255,93,108,.18);color:var(--down)}

/* Arrows */
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--flat)}

/* Alertas */
.alertas{list-style:none;margin:0;padding:0}
.alertas li{padding:9px 12px;border-radius:8px;margin-bottom:7px;border-left:4px solid var(--flat);background:var(--card2)}
.al-alta{border-color:var(--down)} .al-media{border-color:var(--warn)} .al-baja{border-color:var(--accent)}

/* Login / setup */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;width:360px}
.login-card h1{font-size:1.25rem;margin:0 0 2px}
.login-card label{display:block;margin:12px 0;color:var(--muted);font-size:.85rem}
.login-card input{width:100%;margin-top:5px;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
.login-card button{width:100%;margin-top:8px;padding:11px;border:0;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:700;cursor:pointer}
.demo-btn{display:block;text-align:center;margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}
.demo-btn:hover{background:var(--card);color:var(--ink)}
.muted{color:var(--muted)} .small{font-size:.8rem}
.alert{background:rgba(255,93,108,.12);color:var(--down);border:1px solid var(--line);padding:9px 12px;border-radius:8px;margin:8px 0}
.ok{background:rgba(39,192,138,.12);color:var(--up);border:1px solid var(--line);padding:9px 12px;border-radius:8px;margin:8px 0}

/* Loader */
.loader{position:fixed;inset:0;background:rgba(15,23,32,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:14px;color:var(--muted)}
.spin{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* KPI rediseño */
.kpi-main{display:flex;align-items:baseline;gap:10px}
.kpi-num{font-size:2rem;font-weight:700;color:var(--ink-strong);line-height:1}
.badge{font-size:.76rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.b-up{background:rgba(39,192,138,.16);color:var(--up)}
.b-down{background:rgba(255,93,108,.16);color:var(--down)}
.kpi-prev{font-size:.88rem;color:var(--muted);margin-top:7px}
.kpi-prev b{color:var(--ink)}
.kpi-foot{display:flex;gap:18px;margin-top:11px;padding-top:9px;border-top:1px solid var(--line);flex-wrap:wrap}
.kpi-foot .ff{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted)}
.kpi-foot .ff b{color:var(--ink);font-size:.92rem;font-weight:600;margin-top:2px}

/* Tabla comparativa transpuesta */
.tbl.comp td,.tbl.comp th{text-align:center}
.tbl.comp td.rl{text-align:left;color:var(--muted)}
.tbl .badge{font-size:.68rem;padding:1px 6px}

/* Panel objetivos */
.wrap.wide{max-width:1500px}
.wrap.full{max-width:none;padding-top:8px}
.filtros.mini{display:flex;gap:8px;align-items:center;background:none;border:0;padding:0;margin:0}
.filtros.mini select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.tbl.panel{font-size:.73rem;white-space:nowrap}
.tbl.panel td,.tbl.panel th{padding:3px 5px;text-align:right}
.tbl.panel td.fila{text-align:left}
.tbl.panel .grp th:nth-child(1),.tbl.panel .grp th:nth-child(2){text-align:left}
.tbl.panel.dual thead .grp th{text-align:center;color:var(--muted);font-weight:600;font-size:.72rem;border-bottom:1px solid var(--line)}
.tbl.panel.dual thead .sub th{font-size:.72rem;color:var(--muted)}
.tbl.panel tr.total{background:var(--card2-strong);font-weight:700;font-size:.8rem}
.tbl.panel tr.total td{border-bottom:2px solid var(--accent);color:var(--ink-strong)}
.tbl.panel tr.total td.muted{color:var(--muted)}
.tbl.panel .mc-now{background:rgba(243,178,58,.16)}
.tbl.panel th.mc-now{background:rgba(243,178,58,.24)}
.mcol .fut{color:var(--muted)}
.tbl.panel .mcol{display:none;color:var(--ink)}
.tbl.panel .mcol small{color:var(--muted)}
.tbl.panel.show-months .mcol{display:table-cell}
.tbl.panel tbody tr:hover{background:rgba(58,160,255,.06)}
.tbl.panel .gs{border-left:2px solid var(--sep)}
/* Año en curso (columnas 'gs') en negrita vs año anterior ('muted') */
.tbl.panel td.gs, .tbl.panel td.gs b{color:var(--ink-strong);font-weight:700}
.tbl.panel .jun{color:var(--warn)}
.tbl.panel td.muted{color:var(--muted)}
.leg{margin:-6px 0 12px}
.tbl.panel td.mc-down{color:var(--down);font-weight:600}
.tbl.panel td.mc-down small{color:var(--muted);opacity:1;font-weight:400}   /* el /2025 NO va en rojo, solo el 2026 */
.objm{color:var(--accent);font-size:.7rem}
.estados{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.est{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--muted);font-size:.85rem}
.est b{color:var(--ink-strong);font-size:1.1rem;margin-right:5px}
.est small{display:block;font-size:.7rem;color:var(--muted)}
.est.on{border-color:var(--accent);background:rgba(58,160,255,.12)}
.chip.sm{font-size:.7rem;padding:2px 8px}
.mid{color:var(--warn)}
.detfiltros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.detfiltros label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted)}
.detfiltros select,.detfiltros input{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px;min-width:130px}
.detfiltros .df-btn{display:flex;gap:8px;align-items:center}
.detfiltros button{padding:8px 16px;border:0;border-radius:7px;background:var(--accent);color:var(--on-accent);font-weight:700;cursor:pointer}
.statgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.stat-n{font-size:1.5rem;font-weight:800;color:var(--ink-strong)}
.stat-l{font-size:.72rem;color:var(--muted);margin-top:2px}
.stat.bad{border-color:var(--line)}.stat.bad .stat-n{color:var(--down)}
@media(max-width:900px){.statgrid{grid-template-columns:repeat(3,1fr)}}
.tbl.panel .pct{font-size:.66rem;color:var(--muted)}
.fl{display:flex;flex-direction:column;font-size:.7rem;color:var(--muted);gap:3px}
.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto}
.tg{font-size:.78rem;padding:6px 10px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--card);cursor:pointer}
.tg.on{background:var(--accent);color:var(--on-accent);font-weight:700;border-color:var(--accent)}
details.cols{position:relative}
details.cols .colmenu{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;z-index:20;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
details.cols .colmenu label{display:block;font-size:.85rem;padding:3px 0;color:var(--ink);cursor:pointer}
.fila a{color:var(--ink)} .fila a:hover{color:var(--accent)}
.ubar{display:inline-block;width:42px;height:7px;background:var(--field);border:1px solid var(--line);border-radius:4px;vertical-align:middle;overflow:hidden}
.ubar i{display:block;height:100%;background:var(--accent)}
.uval{font-size:.7rem;color:var(--muted)}
.rowtip{position:fixed;display:none;z-index:50;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.rowtip .tt-h{font-weight:700;color:var(--ink-strong);font-size:.82rem;margin-bottom:4px}
.rowtip .tt-f{font-size:.7rem;color:var(--muted);margin-top:4px}
.tbl.panel.hide-cerrado .b-cerrado,.tbl.panel.hide-mes .b-mes,.tbl.panel.hide-prev .b-prev,.tbl.panel.hide-obj .b-obj,.tbl.panel.hide-valor .b-valor,.tbl.panel.hide-crec .b-crec{display:none}

/* Toggle ABC */
.toggle{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:3px}
.toggle a{padding:6px 12px;border-radius:7px;color:var(--muted);font-size:.85rem}
.toggle a.on{background:var(--accent);color:var(--on-accent);font-weight:700}
.abc-counts{font-size:.78rem;font-weight:400;margin-left:8px}
.pot{font-size:.7rem;color:var(--warn);margin-left:4px}

/* Form usuarios */
.form-u label{display:block;margin:10px 0;font-size:.82rem;color:var(--muted)}
.form-u input[type=text],.form-u input[type=email],.form-u input[type=password],.form-u select{width:100%;margin-top:5px;padding:9px;border-radius:8px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
.form-u .row2{display:flex;gap:12px}.form-u .row2 label,.form-u .row2 button{flex:1}
.form-u .chk{display:flex;align-items:center;gap:8px}.form-u .chk input{width:auto;margin-top:0}
.form-u .cartera{height:auto}
.form-u button{margin-top:10px;padding:11px;border:0;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:700;cursor:pointer}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:6px 0 4px}
.mods .chk{font-size:.9rem;color:var(--ink)}
.acc a{margin-right:8px}
.link-danger{background:none;border:0;color:var(--down);cursor:pointer;padding:0;font:inherit}
.rolb{font-size:.72rem;padding:2px 7px;border-radius:5px;background:var(--line);color:var(--ink)}
.r-superadmin{background:rgba(58,160,255,.2);color:var(--accent)}
.r-central{background:rgba(39,192,138,.18);color:var(--up)}
.r-comercial{background:rgba(243,178,58,.18);color:var(--warn)}
.r-tienda{background:rgba(255,93,108,.16);color:var(--down)}

@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}

/* ─────────── Menú responsive (hamburguesa ≤820px) ─────────── */
@media(max-width:820px){
  .topbar{position:sticky;flex-wrap:wrap;gap:10px}
  .brand{flex:1;font-size:1rem}
  .navtog{display:block;order:2}
  .user{order:3}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 14px;max-height:78vh;overflow-y:auto;box-shadow:0 16px 34px rgba(0,0,0,.5);z-index:25}
  body.nav-open .menu{display:flex}
  .menu a{padding:11px 12px;border-radius:8px}
  .menu-group{position:static}
  .mg-btn{width:100%;justify-content:space-between;padding:11px 12px}
  .mg-items{position:static;box-shadow:none;border:0;min-width:0;background:rgba(255,255,255,.03);margin:2px 0 4px 10px;padding:2px}
}

/* ─────────── Responsive · contenido en móvil ─────────── */
@media(max-width:680px){
  .topbar{gap:8px;padding:8px 12px}
  .user{font-size:.78em;gap:8px}
  .user span{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wrap,.wrap.wide{padding:14px 12px 46px}
  .page-head{flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .page-head h1{font-size:1.2rem}
  .kpis,.kpis.kpis-2{grid-template-columns:repeat(2,1fr);gap:10px;max-width:none}
  .grid-2{grid-template-columns:1fr}
  .ranks,.rankbars,.statgrid{grid-template-columns:repeat(2,1fr)}
  .hero{flex-direction:column;align-items:flex-start;padding:14px 16px}
  .card{padding:12px}
  .kpi-value{flex-wrap:wrap}
  .filtros,.detfiltros{padding:10px 12px}
  .filtros label,.detfiltros label{flex:1 1 42%}
  .toolbar{margin-left:0;width:100%;justify-content:flex-start}
  .tbl th,.tbl td{padding:7px 8px}
}
@media(max-width:420px){
  .kpis,.kpis.kpis-2,.ranks,.rankbars,.statgrid{grid-template-columns:1fr}
}

/* ─────────── Login Google ─────────── */
.login-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;margin:14px 0}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f2937;border:1px solid var(--line);border-radius:9px;padding:11px;font-weight:600;text-decoration:none}
.google-btn:hover{background:#f1f3f4}

/* ─────────── Diseñador de flujos ─────────── */
.designer{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.pal h4{margin:0 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pal-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);cursor:pointer;margin-bottom:6px;font-size:.85rem}
.pal-btn:hover{border-color:var(--accent)}
.canvas{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:200px}
.paso-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.paso-head{display:flex;align-items:center;gap:8px}
.paso-head .ico{font-size:1.1rem}
.paso-head .nom{font-weight:600;flex:1}
.paso-head .dh{cursor:grab;color:var(--muted)}
.paso-head .del{background:none;border:0;color:var(--down);cursor:pointer;font-size:1.1rem;padding:0 4px}
.paso-body{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.paso-body label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--muted)}
.paso-body input{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px;min-width:120px}
.paso-conn{text-align:center;color:var(--muted);margin:-4px 0 6px}
@media(max-width:680px){.designer{grid-template-columns:1fr}}

/* ─────────── Reglas de objetivos ─────────── */
.reglas-grid{display:flex;gap:14px;flex-wrap:wrap}
.reglas-grid .fl{min-width:200px}
.reglas-grid select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px}
.rg-red{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px}

/* ─────────── Tablero Kanban ─────────── */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.kcol{flex:1;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.kcol h3{margin:0 0 10px;font-size:.85rem;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.03em}
.klist{min-height:60px;display:flex;flex-direction:column;gap:8px}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px;cursor:grab}
.kcard:active{cursor:grabbing}
.kcard .kt{font-weight:600;font-size:.85rem;margin-bottom:5px;line-height:1.3}
.kcard .km{font-size:.72rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.kcard .kprio{font-weight:700}
.kcard .tg{font-size:.72rem}
.sortable-ghost{opacity:.35}
.sortable-drag .kcard{transform:rotate(1deg)}

/* ─────────── Página Informes ─────────── */
.inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.inf-card{display:flex;flex-direction:column;gap:10px}
.inf-top{display:flex;align-items:flex-start;gap:12px}
.inf-ico{font-size:1.6rem;line-height:1}
.inf-card h3{margin:0;font-size:1.05rem}
.inf-desc{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.inf-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inf-actions form{margin:0}
.btn-ghost{padding:8px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--card)}
.btn-ghost:hover{border-color:var(--accent)}
.logbox{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:.78rem;color:var(--muted);overflow-x:auto;white-space:pre-wrap;margin:0}

/* ===================== PANEL OBJETIVOS · rediseño (tema7) ===================== */
/* Barra de estado compacta (sustituye título grande) */
.obj-bar{position:relative;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:0 2px 8px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:8px}
.ob-filtros select.filtered{border-color:var(--accent)!important;background:rgba(58,160,255,.14)!important;color:var(--ink-strong)!important;font-weight:600}
.ob-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ob-title{font-size:1.02rem;font-weight:700;color:var(--ink-strong);white-space:nowrap}
.ob-title b{color:var(--accent)}
.ob-title .ob-sub{font-size:.73rem;color:var(--muted);font-weight:500;margin-left:6px}
.ob-status{font-size:.78rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px 11px;white-space:nowrap}
.ob-status.neg{color:var(--down);border-color:var(--down)}
.ob-ia{border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;padding:2px 9px;font-size:.95rem;line-height:1.4}
.ob-ia:hover{border-color:var(--accent)}
.ob-ia:disabled{opacity:.6;cursor:wait}
.ob-iatxt{font-size:.8rem;color:var(--ink);max-width:560px}
.ob-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.ob-filtros select{background:var(--field,var(--card));border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 9px;font-size:.82rem}
.ob-vista{position:relative}
.ob-vista>summary{list-style:none;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 13px;font-size:.82rem;color:var(--ink);user-select:none}
.ob-vista>summary::-webkit-details-marker{display:none}
.ob-vista[open]>summary{border-color:var(--accent);color:var(--accent)}
.ob-vmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.34);padding:10px;min-width:220px;display:flex;flex-direction:column;gap:3px}
.ob-vmenu .vrow{display:flex;gap:6px;margin-bottom:4px}
.ob-vmenu .vrow .tg{flex:1;text-align:center}
.ob-vmenu .vck{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink);padding:5px 4px;cursor:pointer;border-radius:6px}
.ob-vmenu .vck:hover{background:var(--panel)}
.ob-vmenu .vlbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:4px 2px 2px}
.ob-vmenu .vsep{height:1px;background:var(--line);margin:5px 0}

/* Scroll vertical interno: barra + cabecera + TOTAL quedan fijos */
.panel-scroll{overflow:auto;max-height:calc(100vh - 195px);overscroll-behavior:contain}
.tbl.panel{border-collapse:separate;border-spacing:0}   /* imprescindible para sticky sin fugas */
.tbl.panel thead th{position:sticky;z-index:6;background:var(--panel)}
.tbl.panel thead tr.grp th{top:0}
.tbl.panel tr.total td{position:sticky;z-index:5}

/* Tinte suave por bloque de concepto (solo celdas de datos) */
.tbl.panel td.b-cerrado{background:rgba(58,160,255,.06)}
.tbl.panel td.b-mes{background:rgba(243,178,58,.06)}
.tbl.panel td.mcol{background:rgba(128,148,168,.05)}
.tbl.panel td.b-prev{background:rgba(43,182,204,.06)}
.tbl.panel td.b-obj{background:rgba(150,120,255,.08)}
.tbl.panel td.b-valor{background:rgba(150,140,120,.07)}
.tbl.panel td.b-crec{background:rgba(120,140,160,.06)}
/* re-afirmar mes en curso por encima del tinte */
.tbl.panel td.mc-now{background:rgba(243,178,58,.16)}

/* Separación con ESPACIO entre bloques (no solo línea) */
.tbl.panel .bs,.tbl.panel .sepL{border-left:12px solid var(--bg)}

/* Fila TOTAL empresa más llamativa (opaca para el sticky) */
.tbl.panel tr.total td{background:var(--card2-strong);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.tbl.panel tr.total td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
.tbl.panel tr.total td, .tbl.panel tr.total td b{color:var(--ink-strong)}
.tbl.panel tr.total td.muted{color:var(--muted)}

/* Diagnóstico ABC */
.diagb{font-weight:600;font-size:.82rem;white-space:nowrap;cursor:help;border-bottom:1px dotted currentColor}
.filtros.mini .fsep{display:inline-block;width:1px;height:20px;background:var(--line);margin:0 4px;vertical-align:middle}

/* Δ = valor absoluto (columna propia) + columna % ocultable (toggle "Mostrar %") — todo a la derecha como el resto de números */
/* Se colapsa a ANCHO CERO (no display:none) para que el colspan de las cabeceras siga cuadrando */
.tbl.panel .col-pct{width:0;max-width:0;padding-left:0;padding-right:0;border-left:0;overflow:hidden;font-size:0;line-height:0}
.tbl.panel.show-pct .col-pct{width:auto;max-width:none;padding:3px 5px;overflow:visible;font-size:.66rem;line-height:normal}
/* En el TOTAL, los meses del año en curso por debajo del anterior también van en rojo (gana al color del total) */
.tbl.panel tr.total td.mc-down{color:var(--down);font-weight:700}

/* Informe tienda: desglose de la "posición media en su grupo" */
.hp-side{display:flex;flex-direction:column;gap:3px}
.hp-brk{font-size:.68rem;color:var(--muted);line-height:1.35;max-width:240px}

/* ===== ABC de tiendas unificado (tabla ordenable/filtrable) ===== */
.tbl.abcx{border-collapse:separate;border-spacing:0;font-size:.82rem;white-space:nowrap}
.tbl.abcx td,.tbl.abcx th{padding:6px 9px;text-align:right;border-bottom:1px solid var(--line)}
.tbl.abcx .c-id{text-align:left}
.tbl.abcx .c-clase{text-align:center}
.tbl.abcx thead th{position:sticky;top:0;z-index:5;background:var(--panel);color:var(--muted);font-weight:600;cursor:pointer;user-select:none}
.tbl.abcx thead th:hover{color:var(--ink)}
.tbl.abcx .gs{border-left:2px solid var(--sep)}
.tbl.abcx th[data-idx].sorted-a::after{content:' ▲';color:var(--accent);font-size:.8em}
.tbl.abcx th[data-idx].sorted-d::after{content:' ▼';color:var(--accent);font-size:.8em}
.tbl.abcx tbody tr:hover{background:rgba(58,160,255,.06)}
.tbl.abcx td.c-id a{font-weight:600}
.tbl.abcx .pot{color:var(--warn)}
.tbl.abcx.hide-fact .c-fact,.tbl.abcx.hide-coc .c-coc,.tbl.abcx.hide-precio .c-precio,.tbl.abcx.hide-clase .c-clase,.tbl.abcx.hide-rank .c-rank,.tbl.abcx.hide-crec .c-crec,.tbl.abcx.hide-lead .c-lead{display:none}

/* Icono de tienda consolidada (fusión) */
.fusion-ico{color:var(--accent2);cursor:pointer;font-weight:700;font-size:.95em}
.fusion-ico:hover{color:var(--accent)}