/* ============================================================
   Stock Central · Hollman · KIT v3  (HTML+CSS puro, sin JS)
   Marca sacada de hollman.com.mx: marino #000066, amarillo #F8B800,
   rojo #D21625, Rubik (títulos 700 cursiva).
   REGLA: las pantallas solo usan estas clases. Nada de style="" salvo
   anchos puntuales de barras (width:%).
   ============================================================ */
:root{
  --pista:#ECEEF7;        /* fondo general */
  --tarjeta:#FFFFFF;
  --linea:#E6E7F2;
  --linea-2:#F0F1F8;
  --tinta:#232323;        /* texto */
  --gris:#6E7191;         /* texto secundario */
  --gris-2:#A3A6BF;
  --marino:#000066;       /* principal Hollman */
  --marino-900:#000043;   /* títulos */
  --marino-soft:#ECECFB;
  --amarillo:#F8B800;     /* acento: selección y menú activo */
  --amarillo-soft:#FFF5D6;
  --amarillo-ink:#8A6400;
  --rojo:#D21625;         /* solo lo crítico */
  --rojo-soft:#FDECEE;
  --verde:#14804A;
  --verde-soft:#E3F4EA;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--pista);color:var(--tinta);font:14px/1.5 "Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;text-wrap:balance;color:var(--marino-900)}
p{margin:0}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:15px;height:15px}

/* ---------- Esqueleto ---------- */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;padding:16px;min-height:100vh;align-items:start}
.side{position:sticky;top:16px;height:calc(100vh - 32px);background:linear-gradient(180deg,#000066 0%,#00004A 100%);color:#fff;border:0;box-shadow:0 10px 30px rgba(0,0,70,.25);border-radius:var(--r-lg);padding:16px 12px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 32px);overflow:auto}
.brand{display:flex;align-items:center;gap:12px;margin:-16px -12px 0;padding:18px 18px 16px;background:#fff;border-radius:18px 18px 0 0;border-bottom:3px solid var(--amarillo)}
.brand img{width:98px;height:auto}
.brand b{display:block;font-weight:700;font-style:italic;color:var(--marino-900);font-size:16px;line-height:1.1}
.brand small{color:var(--gris);font-size:12.5px}
.buscar{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;color:#C9CCF2;font-size:13px}
.buscar kbd{margin-left:auto;font:inherit;font-size:11px;border:1px solid rgba(255,255,255,.2);background:transparent;border-radius:5px;padding:0 5px}
.grupo{display:grid;gap:2px}
.grupo>span{font-size:12px;color:#7F86C9;padding:6px 10px 4px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#D5D8F5;font-weight:500;position:relative}
.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.nav .cnt{margin-left:auto;font-size:11px;background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:0 6px}
.nav .cnt.bad{background:var(--rojo);color:#fff}
.nav.on{background:var(--tarjeta);color:var(--marino);box-shadow:0 0 0 1px var(--linea),0 2px 6px rgba(0,0,50,.05)}
.nav.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--amarillo)}
.sync{margin-top:auto;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;padding:14px;display:grid;gap:8px;position:relative;overflow:hidden}
.sync::after{content:"";position:absolute;right:0;top:0;width:64px;height:100%;opacity:.16;
  background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 0 0/16px 16px}
.sync b{font-weight:600;display:flex;align-items:center;gap:8px}
.sync b i{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.25)}
.sync small{color:#C9CBF2;font-size:12px}
.sync .btn{position:relative;z-index:1;justify-content:center;background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.yo{display:flex;align-items:center;gap:10px;padding:6px}
.yo{color:#fff}.yo small{display:block;color:#AEB4F0;font-size:12px}
.main{min-width:0;min-height:calc(100vh - 32px)}

/* Navegación sin JS: cada pantalla es <section class="screen" id="...">.
   Se enciende con :target; sin hash se ve #tablero. */
.screen{display:none;padding:10px 12px 40px;scroll-margin-top:100px}
.screen:target{display:block}
body:not(:has(.screen:target)) #tablero{display:block}

/* ---------- Encabezado de pantalla ---------- */
.head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--linea)}
.t{font-size:28px;font-weight:700;font-style:italic;letter-spacing:-.01em;color:var(--marino-900)}
.sub{color:var(--gris);margin-top:4px;max-width:70ch}
.head .acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.demo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--amarillo-ink);background:var(--amarillo-soft);border:1px dashed var(--amarillo);border-radius:999px;padding:2px 10px;vertical-align:middle;margin-left:10px;font-style:normal}
.migas{display:flex;gap:6px;align-items:center;color:var(--gris);font-size:13px;margin-bottom:6px}
.migas a{color:var(--marino)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:500;font-size:13.5px;line-height:1;padding:10px 14px;border-radius:10px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--gris-2)}
.btn.pri{background:var(--marino);border-color:var(--marino);color:#fff}
.btn.pri:hover{background:var(--marino-900)}
.btn.peligro{color:var(--rojo);border-color:#F2B8BE;background:var(--tarjeta)}
.btn.sm{padding:7px 10px;font-size:12.5px;border-radius:8px}
.btn.fantasma{border-color:transparent;background:transparent;color:var(--marino)}
.btn:focus-visible,.nav:focus-visible,a:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}

/* ---------- Tarjetas y rejillas ---------- */
.panel{background:var(--tarjeta);border:1px solid #E3E5F1;border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(0,0,60,.04),0 10px 28px rgba(0,0,60,.05)}
.panel.suave{background:#F6F7FC;box-shadow:none}
.panel-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-h h2{font-size:17px;font-weight:600}
.panel-h p{color:var(--gris);font-size:13px}
.stack{display:grid;gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g-7-5{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px}
.nota{color:var(--gris);font-size:12.5px}
.sep{height:1px;background:var(--linea);margin:14px 0}

/* ---------- Franja de números (una sola tarjeta con divisiones) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid #E3E5F1;border-radius:16px;overflow:hidden;background:var(--tarjeta);box-shadow:0 1px 2px rgba(0,0,60,.04),0 10px 28px rgba(0,0,60,.05)}
.kpi{padding:16px 18px;border-right:1px solid var(--linea);display:grid;gap:4px;align-content:start}
.kpi:last-child{border-right:0}
.kpi-l{color:var(--gris);font-size:13px;display:flex;align-items:center;gap:6px}
.kpi-v{font-size:28px;font-weight:600;color:var(--marino-900);letter-spacing:-.01em}
.kpi-v small{font-size:15px;color:var(--gris);font-weight:400}
.kpi-s{color:var(--gris);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kpi.vivo{background:radial-gradient(120% 140% at 0% 0%,#2B35A8 0%,#000066 55%,#00004A 100%);color:#fff}
.kpi.vivo .kpi-l,.kpi.vivo .kpi-s{color:#C9CBF2}
.kpi.vivo .kpi-v{color:#fff}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:500;border-radius:6px;padding:1px 6px}
.delta.up{background:var(--verde-soft);color:var(--verde)}
.delta.down{background:var(--rojo-soft);color:var(--rojo)}
.delta.neutro{background:var(--pista);color:var(--gris)}

/* ---------- Estados (pastillas) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:7px;padding:3px 9px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--verde-soft);color:var(--verde)}
.pill.warn{background:var(--amarillo-soft);color:var(--amarillo-ink)}
.pill.bad{background:var(--rojo-soft);color:var(--rojo)}
.pill.info{background:var(--marino-soft);color:var(--marino)}
.pill.mute{background:var(--pista);color:var(--gris)}
.pill.solo::before{display:none}

/* ---------- Barra de herramientas / filtros ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.campo-busca{display:flex;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:10px;padding:8px 12px;color:var(--gris);min-width:240px;background:var(--tarjeta)}
.filtro{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);border-radius:999px;padding:6px 12px;font-size:13px;color:#3A3D55;background:var(--tarjeta)}
.filtro.on{border-color:var(--marino);background:var(--marino-soft);color:var(--marino);font-weight:500}
.vdiv{width:1px;height:26px;background:var(--linea)}

/* ---------- Tablas ---------- */
.tabla-wrap{border:1px solid #E3E5F1;border-radius:14px;overflow:auto;background:var(--tarjeta);box-shadow:0 1px 2px rgba(0,0,60,.04),0 10px 28px rgba(0,0,60,.04)}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{background:#F8F8FD;color:var(--gris);font-weight:500;text-align:left;padding:11px 14px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea-2);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla .n{text-align:right}
.tabla th.n{text-align:right}
.tabla tr.sel td{background:var(--amarillo-soft)}
.tabla tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
.tabla tr.alerta td{background:#FFF9F9}
.tabla .check{width:16px;height:16px;border:1.5px solid var(--gris-2);border-radius:4px;display:inline-block;vertical-align:middle}
.tabla .check.on{background:var(--marino);border-color:var(--marino);box-shadow:inset 0 0 0 3px var(--marino)}
.tabla .check.on::after{content:"";display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(4px,0) rotate(45deg)}
.cod{font-weight:500;color:var(--marino)}
.desc small{display:block;color:var(--gris);font-size:12px}
.cero{color:var(--gris-2)}
.fuerte{font-weight:600;color:var(--marino-900)}

/* Barra de seleccionados (flota sobre la tabla) */
.bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:max-content;max-width:100%;margin:-22px auto 0;position:relative;z-index:2;background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:6px 8px 6px 14px;box-shadow:0 8px 24px rgba(0,0,60,.12)}
.bulk b{font-weight:600}
.bulk span.nota{margin-right:6px}

/* Paginación */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;padding-top:16px;color:var(--gris);font-size:13px}
.pager .pags{display:flex;gap:4px}
.pager .pags a{min-width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:8px;color:var(--tinta)}
.pager .pags a.on{background:var(--marino);border-color:var(--marino);color:#fff}

/* ---------- Avisos ---------- */
.avisos{display:grid;gap:10px}
.aviso{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 14px;border-radius:10px;background:var(--pista)}
.aviso .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.aviso.bad .mk{background:var(--rojo-soft);color:var(--rojo)}
.aviso.warn .mk{background:var(--amarillo-soft);color:var(--amarillo-ink)}
.aviso.info .mk{background:var(--marino-soft);color:var(--marino)}
.aviso b{display:block;font-weight:600;color:var(--marino-900)}
.aviso p{color:var(--gris);font-size:13px}

/* ---------- Formularios (solo apariencia) ---------- */
.campo{display:grid;gap:6px}
.campo label{font-size:13px;font-weight:500;color:#3A3D55}
.input{border:1px solid var(--linea);border-radius:10px;padding:10px 12px;background:var(--tarjeta);color:var(--tinta);display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.input.vacio{color:var(--gris-2)}
.toggle{width:36px;height:20px;border-radius:999px;background:var(--linea);position:relative;display:inline-block;flex:none;vertical-align:middle}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on{background:var(--marino)}
.toggle.on::after{left:18px}
.seg{display:inline-flex;background:var(--pista);border-radius:10px;padding:3px;gap:2px}
.seg span{padding:6px 12px;border-radius:8px;font-size:13px;color:var(--gris)}
.seg span.on{background:var(--tarjeta);color:var(--marino);font-weight:500;box-shadow:0 1px 3px rgba(0,0,50,.08)}

/* ---------- Pasos (Cargar Excel) ---------- */
.pasos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.paso{display:flex;align-items:center;gap:8px;color:var(--gris);font-size:13px}
.paso i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:12px;border:1.5px solid var(--linea);background:var(--tarjeta)}
.paso.hecho i{background:var(--verde);border-color:var(--verde);color:#fff}
.paso.cur{color:var(--marino-900);font-weight:500}
.paso.cur i{background:var(--marino);border-color:var(--marino);color:#fff}
.paso-sep{width:28px;height:1.5px;background:var(--linea)}

/* ---------- Varios ---------- */
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--marino-soft);color:var(--marino);flex:none}
.avatar.am{background:var(--amarillo-soft);color:var(--amarillo-ink)}
.barra{height:8px;border-radius:999px;background:var(--linea-2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--marino);border-radius:999px}
.barra.am i{background:var(--amarillo)}
.barra.rojo i{background:var(--rojo)}
.lista{display:grid}
.lista>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea-2)}
.lista>div:last-child{border-bottom:0}
.lista dt,.lista .k{color:var(--gris)}
.formula{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:end;background:var(--pista);border-radius:10px;padding:14px 16px}
.formula div{display:grid}
.formula span{font-size:18px;font-weight:600;color:var(--marino-900)}
.formula small{color:var(--gris);font-size:12px}
.formula .res span{color:var(--verde)}
.mapa{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;gap:10px;align-items:stretch}
.flecha{display:grid;place-items:center;color:var(--amarillo);font-size:22px;font-weight:700}
.nodo{border:1px solid var(--linea);border-radius:var(--r-md);padding:14px;display:grid;gap:8px;align-content:start;background:var(--tarjeta)}
.nodo.centro{background:var(--marino);border-color:var(--marino);color:#fff}
.nodo.centro h3{color:#fff}

/* ---------- Barra superior ---------- */
.topbar{position:sticky;top:16px;z-index:5;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin:0 12px 8px;padding:10px 12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid #E3E5F1;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,60,.04),0 10px 28px rgba(0,0,60,.06)}
.buscar.top{background:var(--pista);color:var(--gris);min-width:200px;flex:1 1 260px;max-width:440px}
.buscar.top kbd{border-color:var(--linea);background:var(--tarjeta)}
.tb-der{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
.envio{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--verde);background:var(--verde-soft);border-radius:999px;padding:6px 12px}
.envio i{width:8px;height:8px;border-radius:50%;background:#22B563;box-shadow:0 0 0 3px rgba(34,181,99,.2)}
.envio small{color:var(--gris);font-weight:400;margin-left:2px}
.icono{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:10px;color:var(--marino);background:var(--tarjeta)}
.icono b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--rojo);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.usuario{display:inline-flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:12px;font-weight:500;color:var(--marino-900)}
.usuario small{display:block;color:var(--gris);font-size:12px;font-weight:400;line-height:1.1}
.side-pie{margin-top:auto;border-radius:12px;padding:12px;color:#fff;position:relative;overflow:hidden;background:rgba(255,255,255,.06)}
.side-pie::after{content:"";position:absolute;right:0;top:0;width:70px;height:100%;opacity:.18;background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 0 0/14px 14px}
.side-pie span{display:block;font-weight:600;font-style:italic;font-size:13px}
.side-pie small{color:#AEB4F0;font-size:11.5px}
.bandeja .aviso{grid-template-columns:auto 1fr auto auto}
.bandeja .cuanto{font-size:20px;font-weight:600;color:var(--marino-900);align-self:center;min-width:44px;text-align:right}
.mini-fuentes .lista>div{align-items:center}

/* ---------- Gráficas ---------- */
.viz{display:block;width:100%;height:auto;font-family:"Rubik",system-ui,sans-serif}
.panel.oscuro{background:radial-gradient(90% 120% at 50% 45%,#1A2390 0%,#000055 55%,#00003A 100%);border:0;color:#fff;box-shadow:0 18px 40px rgba(0,0,70,.28)}
.panel.oscuro h2{color:#fff}.panel.oscuro .panel-h p{color:#AEB4F0}
.panel.oscuro .pill.ok{background:rgba(61,220,132,.16);color:#7EF0B0}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--gris)}
.ley{display:inline-flex;align-items:center;gap:6px}
.ley i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ley b{color:var(--tinta);font-weight:600;margin-left:2px}
.rampa{display:inline-flex;gap:2px}.rampa i{width:22px;height:10px;border-radius:3px;display:inline-block}
.spark{width:120px;height:36px;display:block;margin-top:6px}
.kpi.vivo .spark polyline{stroke:#F8B800}.kpi.vivo .spark circle{fill:#F8B800}
@media (prefers-reduced-motion:reduce){.particulas{display:none}}

@media (max-width:1100px){.envio small{display:none}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g-7-5{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);padding:10px}
  .side{position:static;max-height:none;height:auto}
  .tb-der{flex-wrap:wrap}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .stack>*,.panel{min-width:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen{padding:18px 16px 32px}
  .mapa{grid-template-columns:minmax(0,1fr)}
  .topbar{position:static;margin:0 0 8px}.buscar.top{min-width:0;flex:1 1 100%}.usuario span:not(.avatar){display:none}
  .panel.oscuro{overflow-x:auto}.flujo-viz{min-width:680px}.flecha{transform:rotate(90deg)}
  .kpi{border-right:0;border-bottom:1px solid var(--linea)}
}