/* ================= PALETAS POR ROL ================= */
body[data-theme="azul"]{
  --bg:#0d1220; --panel:#151c2e; --panel2:#1b2438; --line:#28324a; --line2:#334061;
  --txt:#e8ecf6; --mut:#8b96b0; --dim:#5d6a88;
  --acc:#f5a524; --acc-txt:#181000; --acc-soft:rgba(245,165,36,.14); --acc-line:rgba(245,165,36,.35);
  --glow1:rgba(245,165,36,.06); --glow2:rgba(77,141,255,.05);
}
body[data-theme="naranja"]{
  --bg:#160e07; --panel:#211509; --panel2:#2b1c0d; --line:#3d2a14; --line2:#553a1c;
  --txt:#f7ede2; --mut:#c29a72; --dim:#8a6a48;
  --acc:#ff7a1a; --acc-txt:#1f0d00; --acc-soft:rgba(255,122,26,.16); --acc-line:rgba(255,122,26,.4);
  --glow1:rgba(255,122,26,.09); --glow2:rgba(255,180,80,.05);
}
body[data-theme="negro"]{
  --bg:#070707; --panel:#121212; --panel2:#1b1b1b; --line:#262626; --line2:#3a3a3a;
  --txt:#f2f2f2; --mut:#9a9a9a; --dim:#606060;
  --acc:#f2f2f2; --acc-txt:#0a0a0a; --acc-soft:rgba(255,255,255,.09); --acc-line:rgba(255,255,255,.28);
  --glow1:rgba(255,255,255,.04); --glow2:rgba(255,255,255,.03);
}
body[data-theme="jade"]{ /* VERDE JADE */
  --bg:#07130f; --panel:#0d1e18; --panel2:#132a21; --line:#1d3a2e; --line2:#2b5443;
  --txt:#e9f6f0; --mut:#8fbcaa; --dim:#5b8271;
  --acc:#2dd4a7; --acc-txt:#04241a; --acc-soft:rgba(45,212,167,.15); --acc-line:rgba(45,212,167,.4);
  --glow1:rgba(45,212,167,.08); --glow2:rgba(45,212,167,.04);
}
body[data-theme="vino"]{ /* VINO */
  --bg:#170a10; --panel:#231018; --panel2:#2e1620; --line:#43202e; --line2:#5e2c40;
  --txt:#f8ecf1; --mut:#c491a6; --dim:#8a5f70;
  --acc:#e5537a; --acc-txt:#2b0512; --acc-soft:rgba(229,83,122,.16); --acc-line:rgba(229,83,122,.4);
  --glow1:rgba(229,83,122,.09); --glow2:rgba(229,83,122,.04);
}
body[data-theme="rojo"]{ /* ROJO Y ORO — buena fortuna, prosperidad (estilo hongbao) */
  --bg:#1a0605; --panel:#2b0d0a; --panel2:#3a130f; --line:#591f16; --line2:#7a2c1e;
  --txt:#fbe9df; --mut:#d9a98f; --dim:#a06b52;
  --acc:#d4af37; --acc-txt:#241800; --acc-soft:rgba(212,175,55,.16); --acc-line:rgba(212,175,55,.42);
  --glow1:rgba(196,30,30,.10); --glow2:rgba(212,175,55,.05);
}
body[data-theme="dorado"]{ /* DORADO — riqueza y éxito */
  --bg:#0f0b02; --panel:#1c1607; --panel2:#26200c; --line:#3a2f10; --line2:#524317;
  --txt:#f7f0dc; --mut:#c9b783; --dim:#8f7f4f;
  --acc:#f0b429; --acc-txt:#241a00; --acc-soft:rgba(240,180,41,.15); --acc-line:rgba(240,180,41,.4);
  --glow1:rgba(240,180,41,.08); --glow2:rgba(240,180,41,.04);
}
:root{
  --blue:#4d8dff; --blue-soft:rgba(77,141,255,.14);
  --green:#2dd4a7; --green-soft:rgba(45,212,167,.13);
  --red:#ff6b81; --red-soft:rgba(255,107,129,.13);
  --purple:#b58cff; --purple-soft:rgba(181,140,255,.14);
  --amber:#f5a524; --amber-soft:rgba(245,165,36,.14);
  --mono:'Consolas','SF Mono',monospace; --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Segoe UI','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;font-size:14px;min-height:100vh;transition:background .3s}
body::before{content:"";position:fixed;inset:0;background:
  radial-gradient(900px 400px at 85% -10%,var(--glow1),transparent),
  radial-gradient(700px 400px at -10% 110%,var(--glow2),transparent);pointer-events:none}
h1,h2,h3{font-weight:700;letter-spacing:.2px}
button{font-family:inherit;cursor:pointer;border:none;border-radius:9px;transition:.15s}
input,select,textarea{font-family:inherit;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:13px;color:var(--txt);width:100%;outline:none;transition:.15s}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
input::placeholder{color:var(--dim)}
label{display:block;font-size:11px;color:var(--mut);margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}

/* ===== LOGIN ===== */
#login{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
#login.hide{display:none}
.loginbox{max-width:760px;width:100%;text-align:center}
.loginbox .logo{font-size:46px}
.loginbox h1{font-size:22px;margin:6px 0 2px}
.loginbox p{color:var(--mut);font-size:13px;margin-bottom:22px}
.users{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;text-align:left}
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.ucard:hover{transform:translateY(-3px);border-color:var(--uc)}
.ucard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--uc)}
.ucard .ic{font-size:26px}
.ucard .nm{font-weight:700;font-size:13.5px;margin-top:6px}
.ucard .rl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.ucard .ds{font-size:11.5px;color:var(--dim);margin-top:7px;line-height:1.45}

/* Cabecera en DOS renglones (en vez de un solo flex-wrap): el de arriba
   (.topRow) solo trae logo+nombre y el avatar — nunca más de 2 elementos,
   así el avatar JAMÁS se desplaza hacia abajo sin importar el ancho. Las
   tasas de cambio (.fx) bajan a su propio renglón completo, ya no
   compiten por espacio con el avatar (esa pelea era la causa del bug). */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 16px;display:flex;flex-direction:column;gap:8px}
.topRow{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand .logo{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#000));
  display:flex;align-items:center;justify-content:center;font-size:18px}
.brand h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* min-width:0 en el DIV envolvente (app.php: <div class="brand"><img>
   <div><h1>…</h1><small>…</small></div></div>) es EL fix, no decoración.
   .brand es el flex row, pero su hijo directo aquí es ese <div> sin
   clase — es ÉL quien necesita min-width:0 para poder encogerse por
   debajo de su contenido; el overflow:hidden+ellipsis del <h1> de
   arriba no sirve de nada si su contenedor nunca se achica (comportamiento
   estándar de flexbox, min-width:auto, que casi nadie espera). Se notaba
   poco antes porque .brand casi no competía por espacio; con la insignia
   de rol nueva al lado sí compite, y sin esto el texto largo se montaba
   ENCIMA del badge en vez de truncarse limpio con "…". */
.brand>div{min-width:0}
.brand small{display:block;font-size:10.5px;color:var(--mut);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langbar{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px}
.langbar button{background:transparent;color:var(--mut);font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px}
.langbar button.on{background:var(--acc);color:var(--acc-txt)}
.userchip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--acc-line);border-radius:11px;padding:6px 11px;font-size:12px}
.userchip b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userchip button{background:var(--panel2);border:1px solid var(--line2);color:var(--mut);font-size:11px;padding:4px 9px}
.userchip button:hover{color:var(--red);border-color:var(--red)}

/* Insignia de rol — SIEMPRE visible en la cabecera (nunca solo dentro del
   menú de perfil), pedido explícito de UX (2026-08-18) para no confundirse
   de portal al navegar. flex-shrink:0 para que NUNCA se aplaste ni
   desaparezca por falta de espacio — si algo cede, es el nombre de la app
   en .brand (ya trunca con ellipsis, ver arriba). Colores fijos por rol,
   independientes del tema de color que cada quien elige (identbar) — así
   se reconoce de un vistazo sin importar el tema activo. */
.rolebadge{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;padding:7px 13px;border-radius:20px;border:1.5px solid transparent;white-space:nowrap}
.rolebadge:empty{display:none}   /* antes de que render() lo llene la primera vez, no deja un hueco vacío */
.rolebadge.r-admin{background:var(--purple-soft);color:var(--purple);border-color:rgba(181,140,255,.4)}
.rolebadge.r-prov{background:var(--amber-soft);color:var(--amber);border-color:rgba(245,165,36,.45)}
.rolebadge.r-cli{background:var(--blue-soft);color:var(--blue);border-color:rgba(77,141,255,.4)}

/* Monedas en "chips" (píldoras) que se acomodan (wrap) en vez de scroll
   horizontal o de aplastarse; el botón ⟳ es un círculo táctil aparte. */
.fx{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fx .chip{display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:5px 10px;font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.fx b{color:var(--acc)}
.fx .upd{color:var(--dim);font-size:9.5px}
.fx button{flex-shrink:0;margin-left:auto;background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line);
  width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;font-size:13px}

main{max-width:1280px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:15px}
.subnav{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch}
.subnav button{flex-shrink:0;background:var(--panel);border:1px solid var(--line);color:var(--mut);font-size:12px;font-weight:600;padding:9px 14px;border-radius:10px;display:flex;align-items:center;gap:7px}
.subnav button.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
body[data-theme="negro"] .subnav button.on{color:var(--txt)}
.subnav .cnt{background:var(--acc);color:var(--acc-txt);font-size:10px;font-weight:800;border-radius:20px;padding:1px 7px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.card .hd h2{font-size:14px;display:flex;align-items:center;gap:9px}
.card .hd p{font-size:12px;color:var(--mut);margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--acc))}
.kpi .v{font-size:21px;font-weight:800;font-family:var(--mono)}
.kpi .l{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.kpi .d{font-size:11px;color:var(--dim);margin-top:5px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.7px;text-align:left;
  padding:9px 10px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.22);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
.mono{font-family:var(--mono);font-size:12px}
.tt{font-weight:600}.ts{font-size:11.5px;color:var(--mut)}
.right{text-align:right}.center{text-align:center}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}

.thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;border:1px solid var(--line2);background:#000;display:block;cursor:zoom-in;transition:.15s}
.thumb:hover{border-color:var(--acc);transform:scale(1.06)}
.thumb.lg{width:100%;height:130px}
/* Placeholder de producto sin foto — ícono de su categoría (opción "C"
   acordada el 2026-08-18). Sin cursor:zoom-in ni :hover de zoom porque
   no hay foto que ampliar; fondo distinto a .thumb (que es negro) para
   que no se confunda con el cuadro negro que reemplaza. */
.thumb.ph{display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--panel2);cursor:default}
.thumb.ph:hover{border-color:var(--line2);transform:none}
.thumb.md{width:56px;height:56px}

/* lightbox para ampliar fotos */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:90;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px;cursor:zoom-out}
#lightbox.open{display:flex}
#lightbox img{max-width:92vw;max-height:78vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:pop .2s ease}
#lightbox .cap{color:#fff;font-size:14px;font-weight:600;text-align:center;max-width:90vw}
#lightbox .cls{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.12);color:#fff;font-size:18px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#lightbox .cls:hover{background:rgba(255,255,255,.25)}
/* flechas ‹ › + contador + tira de miniaturas — solo visibles cuando el
   producto tiene más de una foto (pintarGaleria() en app.js las oculta
   con display:none si hay una sola) */
/* Las flechas van SUPERPUESTAS a la imagen (position:absolute), no al
   lado en fila: en pantallas angostas (celular) ponerlas en fila con la
   imagen a 92vw hacía que la flecha derecha quedara fuera del viewport
   (encontrado con Playwright en pruebas a 390px de ancho). Superpuestas
   funcionan igual de bien en escritorio y nunca se salen de pantalla. */
#lightbox .lbRow{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%}
#lightbox .lbNav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  background:rgba(0,0,0,.45);color:#fff;font-size:26px;width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;flex-shrink:0}
#lightbox .lbPrev{left:6px}
#lightbox .lbNext{right:6px}
#lightbox .lbNav:hover{background:rgba(0,0,0,.7)}
#lightbox .lbCounter{color:#fff;font-size:11.5px;font-family:var(--mono);opacity:.75}
#lightbox .lbThumbs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:92vw}
#lightbox .lbThumbs img{width:48px;height:48px;object-fit:cover;border-radius:7px;border:2px solid transparent;opacity:.55;cursor:pointer;transition:.15s}
#lightbox .lbThumbs img:hover{opacity:.85}
#lightbox .lbThumbs img.on{opacity:1;border-color:var(--acc)}
@media(max-width:640px){ #lightbox .lbNav{width:40px;height:40px;font-size:22px} #lightbox .lbThumbs img{width:38px;height:38px} }

.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.p-green{background:var(--green-soft);color:var(--green);border-color:rgba(45,212,167,.3)}
.p-amber{background:var(--amber-soft);color:var(--amber);border-color:rgba(245,165,36,.35)}
.p-red{background:var(--red-soft);color:var(--red);border-color:rgba(255,107,129,.3)}
.p-blue{background:var(--blue-soft);color:var(--blue);border-color:rgba(77,141,255,.3)}
.p-purple{background:var(--purple-soft);color:var(--purple);border-color:rgba(181,140,255,.14)}
.p-gray{background:rgba(139,150,176,.12);color:var(--mut);border-color:rgba(139,150,176,.25)}

.btn{font-size:12px;font-weight:600;padding:9px 14px;display:inline-flex;align-items:center;gap:7px}
.b-acc{background:var(--acc);color:var(--acc-txt)}.b-acc:hover{filter:brightness(1.12)}
.b-ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}.b-ghost:hover{border-color:var(--acc-line)}
.b-green{background:var(--green);color:#05261c}.b-red{background:var(--red);color:#2b0a10}
.b-blue{background:var(--blue);color:#04122e}
.icb{background:transparent;color:var(--mut);font-size:14px;padding:5px 7px;border-radius:7px}
.icb:hover{background:var(--panel2);color:var(--txt)}
.icb.ed:hover{color:var(--blue)}.icb.del:hover{color:var(--red)}.icb.ok:hover{color:var(--green)}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{background:var(--panel2);border:1px solid var(--line);color:var(--mut);font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:8px}
.tabs button.on{background:var(--blue-soft);border-color:rgba(77,141,255,.4);color:var(--blue)}

.flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:6px 0}
.flow .st{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);font-weight:600}
.flow .dot{width:21px;height:21px;border-radius:50%;background:var(--panel2);border:2px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim)}
.flow .st.done .dot{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.flow .st.done{color:var(--green)}
.flow .st.now .dot{background:var(--acc);border-color:var(--acc);color:var(--acc-txt);box-shadow:0 0 0 4px var(--acc-soft)}
.flow .st.now{color:var(--acc)}
body[data-theme="negro"] .flow .st.now{color:var(--txt)}
.flow .ln{width:26px;height:2px;background:var(--line2);margin:0 5px}
.flow .ln.done{background:var(--green)}

.grid-cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.prod:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.prod .nm{font-weight:700;font-size:13px;line-height:1.35}
.prod .nz{font-size:12px;color:var(--mut)}
.prod .pr{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--acc)}
body[data-theme="negro"] .prod .pr{color:var(--txt)}
.prod .meta{display:flex;gap:5px;flex-wrap:wrap}
.prod .specs{font-size:11px;color:var(--mut);font-family:var(--mono);background:rgba(0,0,0,.22);border-radius:7px;padding:6px 9px;line-height:1.6}

/* subir foto */
.photobox{border:2px dashed var(--line2);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.15s;position:relative;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.photobox:hover{border-color:var(--acc)}
.photobox img{max-width:100%;max-height:150px;border-radius:9px}
.photobox .hint{font-size:11.5px;color:var(--mut)}
.photobox input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* lote */
.lotegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.loteitem{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px;display:flex;flex-direction:column;gap:7px}
.loteitem img{width:100%;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--line2)}
.loteitem input{padding:7px 9px;font-size:12px}

/* export bar */
.expbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:10px;padding:9px 13px;font-size:12px}
.selchk{width:18px;height:18px;accent-color:var(--acc);cursor:pointer}

.ovl{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.ovl.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:100%;max-width:540px;max-height:92vh;overflow:auto;padding:18px;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.fg{margin-bottom:11px}

#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:80;max-width:calc(100vw - 28px)}
.toast{background:var(--panel);border:1px solid var(--line2);border-left:4px solid var(--acc);border-radius:10px;
  padding:11px 15px;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:slide .25s ease;max-width:330px}
.toast.g{border-left-color:var(--green)}.toast.r{border-left-color:var(--red)}.toast.b{border-left-color:var(--blue)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

.note{background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:10px;padding:10px 13px;font-size:12px;display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap}
.note.warn{background:var(--red-soft);border-color:rgba(255,107,129,.35)}
.empty{padding:30px;text-align:center;color:var(--dim);font-size:13px}
.searchrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.searchrow input,.searchrow select{width:auto;min-width:150px;flex:1}

/* chips de categoría / filtros rápidos (Mis productos, buscador de
   partidas): mismo look que .tabs pero pensado para envolver en varias
   líneas sin verse apretado en celular */
.chiprow{display:flex;gap:7px;flex-wrap:wrap}
.chip2{background:var(--panel2);border:1px solid var(--line);color:var(--mut);font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:20px;white-space:nowrap}
.chip2.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
body[data-theme="negro"] .chip2.on{color:var(--txt)}

/* galería de miniaturas para subir hasta 6 fotos por producto (alta y
   edición) — ver MAX_FOTOS/imgGridHTML() en app.js */
.imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.imgitem{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:1/1;background:#000}
.imgitem img{width:100%;height:100%;object-fit:cover;display:block}
.imgitem .imgcover{position:absolute;top:4px;left:4px;padding:2px 6px}
.imgitem .imgacts{position:absolute;bottom:0;right:0;left:0;display:flex;justify-content:flex-end;gap:2px;background:linear-gradient(transparent,rgba(0,0,0,.65));padding:4px}
.imgitem .imgacts .icb{color:#fff;padding:4px 6px;min-height:0;font-size:12px}
.imgitem .imgacts .icb:hover{background:rgba(255,255,255,.2)}
.imgadd{border:2px dashed var(--line2);border-radius:9px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:var(--mut);font-size:10.5px;cursor:pointer;position:relative;text-align:center;padding:4px}
.imgadd:hover{border-color:var(--acc);color:var(--acc)}
.imgadd input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* barra de "deshacer" tras eliminar una partida (confirmación ligera:
   se quita de la vista al toque y se puede recuperar unos segundos) */
.undoBar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line2);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:12px;
  font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:75;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100vw - 24px)}
.undoBar.show{opacity:1;pointer-events:auto}
.undoBar button{background:var(--acc);color:var(--acc-txt);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:8px;flex-shrink:0}
.itemPendienteDel{opacity:.4}
.cotcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.cotcard .ch{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.calcbox{background:rgba(0,0,0,.25);border:1px dashed var(--line2);border-radius:10px;padding:11px;font-family:var(--mono);font-size:12px;color:var(--mut);line-height:1.8}
.calcbox b{color:var(--acc)}
body[data-theme="negro"] .calcbox b{color:var(--txt)}
.cbmbar{background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:10px;padding:10px 13px}
.cbmbar .lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut);margin-bottom:7px;font-family:var(--mono);flex-wrap:wrap;gap:4px}
.cbmbar .track{height:12px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.cbmbar .fill{height:100%;background:linear-gradient(90deg,var(--green),var(--acc));border-radius:8px;transition:width .4s}
.cbmbar .fill.over{background:linear-gradient(90deg,var(--acc),var(--red))}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:transparent;transition:.15s;background:transparent}
.chk.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.chk:hover{border-color:var(--acc)}
footer{padding:16px;text-align:center;font-size:11px;color:var(--dim)}
.hide{display:none!important}

/* ===== Menú de perfil unificado (idioma / color / ayuda / guía / salir) =====
   Reemplaza los 5 controles sueltos que antes saturaban la cabecera por un
   solo botón circular; el panel abre como un desplegable anclado a la
   esquina superior derecha, igual en PC y en celular. */
.perfilWrap{position:relative}
.avatarBtn{width:38px;height:38px;border-radius:50%;border:2px solid var(--acc-line);flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#000));
  color:var(--acc-txt);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0}
.perfilPanel{position:absolute;top:calc(100% + 10px);right:0;width:250px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:70;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:.16s ease}
.perfilPanel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.pp-who{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:8px;border-bottom:1px solid var(--line);font-size:13px}
.pp-who span{font-size:17px}
.pp-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:700;margin:9px 0 6px}
.perfilPanel .pp-lbl:first-of-type{margin-top:0}
.perfilPanel .langbar,.perfilPanel .identbar{width:fit-content}
.pp-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
  color:var(--txt);font-size:12.5px;font-weight:600;padding:10px 8px;border-radius:9px;margin-top:2px}
.pp-opt:hover{background:var(--panel2)}
.pp-opt.out{color:var(--red);margin-top:8px;border-top:1px solid var(--line);padding-top:12px}
/* z-index:35, NO 65 — a propósito, y a contracorriente de lo que uno
   esperaría con solo mirar este número contra el 70 de .perfilPanel de
   arriba. Motivo: header.top es position:sticky con su propio z-index
   (40), así que crea su PROPIO contexto de apilamiento — todo lo que
   vive dentro de <header> (incluido .perfilPanel, aunque ya no aparente,
   por su position:absolute, seguir "dentro" de la caja visual del
   header) se pinta como un solo bloque a la altura z=40 del documento,
   sin importar qué z-index interno le pongas a sus hijos. Con
   .ovlPerfil en 65 (bug real, ya encontrado y confirmado con Playwright:
   Chromium reporta "ovlPerfil intercepts pointer events" en CADA botón
   del panel — idioma, color, Modo ayuda, Recorrido guiado y Salir),
   la capa quedaba POR ENCIMA de todo ese bloque y se comía el clic antes
   de que llegara a cualquier botón del panel; visualmente no se nota
   nada raro (el overlay es transparente y el panel sí se ve abierto),
   así que el usuario solo percibe "no me deja seleccionar nada". Con 35
   (por debajo del 40 de header.top) el panel vuelve a ganar el clic
   sobre su propio contenido; sigue por encima de <main id="app"> (sin
   z-index, nivel 0) para seguir cerrando el panel al tocar fuera. */
.ovlPerfil{display:none;position:fixed;inset:0;z-index:35;background:transparent}
.ovlPerfil.open{display:block}

/* identidad de color + íconos */
.identbar{display:flex;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:5px}
.identbar button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;padding:0}
.identbar button.on{border-color:#fff;box-shadow:0 0 0 2px var(--acc-soft)}
.i-naranja{background:#ff7a1a}.i-negro{background:#1c1c1c;border:1px solid #555!important}
.i-azul{background:#f5a524}.i-jade{background:#2dd4a7}.i-vino{background:#e5537a}
.i-rojo{background:linear-gradient(135deg,#c81d1d 50%,#d4af37 50%)}.i-dorado{background:#f0b429}
.iconrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.iconopt{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:13px;cursor:pointer;text-align:center;transition:.15s;width:120px}
.iconopt:hover{border-color:var(--acc-line)}
.iconopt.on{border-color:var(--acc);background:var(--acc-soft)}
.iconopt svg{width:64px;height:64px;border-radius:14px}
.iconopt .in{font-size:11px;font-weight:700;margin-top:7px}
.iconopt .id2{font-size:10px;color:var(--mut)}
.cotrow{cursor:pointer}
.cotrow:hover td{background:var(--acc-soft)!important}

/* ===== RESPONSIVO: celular / tablet / PC ===== */
@media(max-width:900px){ /* tablet y celular: tablas → tarjetas apiladas */
  .f3{grid-template-columns:1fr 1fr}
  .users{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

  /* ===== Tablas → tarjetas (elimina el scroll horizontal por completo) =====
     app.js (ver responsiveTablas() al final de app.js) copia el texto de
     cada <th> como data-label en la columna de <td> correspondiente, de
     forma automática para CUALQUIER tabla dentro de .tblwrap — así cubre
     TODAS las tablas de la app (Maestros, Usuarios, Auditoría, Mis
     productos, Cotizaciones, Asignaciones, etc.) sin tener que tocar cada
     vista una por una. */
  .tblwrap{overflow-x:visible;border:none}
  .tblwrap table{display:block;width:100%}
  .tblwrap table thead{display:block}
  .tblwrap table thead tr{display:flex;justify-content:flex-end;gap:8px;margin-bottom:6px}
  .tblwrap table thead th{display:none;border:none;background:transparent;padding:0}
  /* excepción: encabezados con un control real (ej. "seleccionar todo")
     se conservan visibles y compactos, en vez de perderse junto al texto */
  .tblwrap table thead th:has(input),
  .tblwrap table thead th:has(button){display:flex;align-items:center;white-space:nowrap}
  .tblwrap table tbody{display:block}
  .tblwrap table tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:12px;padding:4px 12px;margin-bottom:9px}
  .tblwrap table tr:hover td{background:transparent}
  .tblwrap table td{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px dashed color-mix(in srgb,var(--line) 55%,transparent);
    white-space:normal;text-align:right}
  .tblwrap table td:last-child{border-bottom:none}
  .tblwrap table td::before{content:attr(data-label);font-size:9.5px;color:var(--mut);
    text-transform:uppercase;letter-spacing:.4px;font-weight:700;text-align:left;flex-shrink:0}
  .tblwrap table td:not([data-label])::before{content:none}
  .tblwrap table td.empty{display:block;text-align:center;padding:24px 0}
}
@media(max-width:640px){ /* celular — comportamiento tipo app nativa Android */
  main{padding:11px;gap:12px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  header.top{padding:8px 10px}
  .brand small{display:none}
  .rolebadge{padding:6px 10px;font-size:10px}
  .f2,.f3{grid-template-columns:1fr}
  .card{padding:13px}
  .grid-cat{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .lotegrid{grid-template-columns:1fr 1fr}
  th,td{padding:8px 7px;font-size:12px}
  .kpi .v{font-size:18px}

  /* La botonera de navegación fija de abajo (.subnav) se desactiva por
     completo: se reemplaza por el botón flotante (FAB) + hoja inferior
     de más abajo, que ya no sufre desborde/scroll con muchas opciones. */
  .subnav{display:none}

  /* Áreas táctiles mínimas 48x48px (Material Design) en los controles que
     el usuario toca con más frecuencia en pantallas chicas. */
  .btn{padding:12px 14px;font-size:12.5px;min-height:48px}
  .icb{padding:10px;min-height:44px;min-width:44px}
  .chk{width:26px;height:26px}
  .langbar button{padding:11px 13px;min-height:44px}
  .userchip button{padding:9px 12px;min-height:40px}
  input,select,textarea{padding:12px 12px;font-size:14px}   /* evita zoom automático de iOS y facilita el toque */

  /* Avisos flotantes (toasts) y la burbuja de ayuda al vuelo: en celular
     suben lo suficiente para no quedar tapados por el botón flotante. */
  #toasts{right:10px;left:10px;bottom:calc(90px + env(safe-area-inset-bottom) + 10px);align-items:center}
  .toast{max-width:420px}
  #tooltipAyuda{max-width:calc(100vw - 32px)}

  /* ===== Botón flotante (FAB) + hoja inferior (bottom sheet) =====
     Reemplaza la barra de navegación fija de abajo. El contenido del menú
     es el MISMO HTML que arma render() por rol (app.js copia ese string
     dentro de #sheetNavBody, ver espejarSubnavMovil()): cero lógica de
     navegación duplicada. Se cierra sola al elegir una opción. */
  .fabNav{display:flex;position:fixed;right:18px;z-index:52;
    bottom:calc(18px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;
    align-items:center;justify-content:center;background:var(--acc);color:var(--acc-txt);
    font-size:22px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
  .fabNav:active{transform:scale(.93)}
  .sheetNavOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:53}
  .sheetNavOverlay.open{display:block}
  .sheetNav{position:fixed;left:0;right:0;bottom:0;z-index:54;background:var(--panel);
    border:1px solid var(--line2);border-top-left-radius:20px;border-top-right-radius:20px;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:.25s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -12px 30px rgba(0,0,0,.5);max-height:70vh;overflow-y:auto}
  .sheetNav.open{transform:translateY(0)}
  .sheetNav .handle{width:38px;height:4px;background:var(--line2);border-radius:3px;margin:2px auto 12px}
  #sheetNavBody{display:flex;flex-direction:column;gap:3px}
  #sheetNavBody button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
    background:transparent;color:var(--mut);font-size:13.5px;font-weight:600;padding:12px 10px;
    border-radius:10px;min-height:48px}
  #sheetNavBody button.on{background:var(--acc-soft);color:var(--acc)}
  body[data-theme="negro"] #sheetNavBody button.on{color:var(--txt)}
  #sheetNavBody button:active{background:var(--panel2)}
  #sheetNavBody .cnt{margin-left:auto;background:var(--acc);color:var(--acc-txt);font-size:10px;font-weight:800;border-radius:20px;padding:1px 7px}
}
@media(min-width:641px){ .fabNav,.sheetNavOverlay,.sheetNav{display:none!important} }
@media(max-width:420px){ .lotegrid{grid-template-columns:1fr} .userchip b{max-width:90px} }

/* Transición suave al cambiar de vista/tarjeta (contenido insertado por
   app.js vía innerHTML): cada tarjeta nueva entra con un fundido leve. */
.card,.cotcard,.prod,.kpi{animation:tbaFadeIn .22s ease}
@keyframes tbaFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== ÁREA DE IMPRESIÓN PDF ===== */
#printArea{display:none}
@media print{
  body>*{display:none!important}
  #printArea{display:block!important;background:#fff;color:#111}
  #printArea .ph{display:flex;justify-content:space-between;border-bottom:3px solid #f5a524;padding-bottom:10px;margin-bottom:14px}
  #printArea table{width:100%;border-collapse:collapse;font-size:11px}
  #printArea th{background:#f4f4f4;border:1px solid #ccc;padding:6px;text-align:left;color:#111}
  #printArea td{border:1px solid #ccc;padding:6px;vertical-align:middle;color:#111}
  #printArea img{width:70px;height:70px;object-fit:cover;border-radius:6px}
}


/* ============================================================
   SISTEMA DE AYUDA Y GUÍA (autodidacta)
============================================================ */
body.modo-ayuda button:not(.guia-btn), body.modo-ayuda .chk { outline:2px dashed var(--acc); outline-offset:2px; cursor:help!important }
#tooltipAyuda{position:fixed;z-index:95;background:var(--panel);border:1px solid var(--acc-line);
  border-radius:10px;padding:10px 13px;font-size:12px;max-width:280px;box-shadow:0 12px 30px rgba(0,0,0,.5);
  pointer-events:none;display:none;line-height:1.5}
#tooltipAyuda b{color:var(--acc)}
#guiaCapa{position:fixed;inset:0;z-index:94;display:none}
#guiaCapa.abierta{display:block}
.guia-sombra{position:fixed;inset:0;background:rgba(0,0,0,.72)}
.guia-foco{position:fixed;border:3px solid var(--acc);border-radius:12px;
  box-shadow:0 0 0 6px var(--acc-soft), 0 0 0 9999px rgba(0,0,0,.72);pointer-events:none;transition:.25s}
.guia-caja{position:fixed;background:var(--panel);border:1px solid var(--acc-line);border-radius:14px;
  padding:16px;max-width:330px;z-index:96;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.guia-caja h4{font-size:13px;margin-bottom:7px;color:var(--acc)}
.guia-caja p{font-size:12.5px;color:var(--txt);line-height:1.55;margin-bottom:12px}
.guia-caja .paso{font-size:10.5px;color:var(--mut);font-family:var(--mono)}
.guia-caja .botones{display:flex;justify-content:space-between;gap:8px;align-items:center}