:root{
  --gold:#e6cf8b; --gold-2:#c9a85f; --cyan:#5fc8e8;
  --navy:#05080f; --panel:#0c111d; --panel-2:#121829;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.18);
  --ink:#f4f5fb; --muted:#a8adc4; --subtle:#8c91af;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --fs-xs:11px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:8px; --r-md:14px; --r-pill:999px; --ease:.15s ease;
  color-scheme:dark;
}
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:'Inter',system-ui,'Segoe UI',sans-serif; font-size:var(--fs-md);
      color:var(--ink); background:var(--navy); line-height:1.5; -webkit-font-smoothing:antialiased }
/* ⚠ 1280 quedaba chico desde que «Lo vendés a» muestra un precio grande
   en TODAS las filas: en pantallas de 1024-1100 la tabla se salía y
   aparecía una barra de scroll horizontal. Arrastrar para ver un precio,
   con un cliente enfrente, no es una opción. */
.wrap{ max-width:1560px; margin:0 auto; padding:var(--sp-4) }

/* ---------- encabezado ---------- */
.top{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
      padding-bottom:var(--sp-3); border-bottom:1px solid var(--line) }
.top svg{ width:34px; height:34px; flex-shrink:0 }

/* ---------- el menú de módulos ----------
   ⚠ En escritorio es una columna que se achica a íconos (64 px), no que
   desaparece: el ancho importa —la tabla de precios ya se salía en
   pantallas de 1024-1100, ver `.wrap`— pero un menú que se esconde del todo
   hace olvidar que hay otros módulos. Arranca PLEGADA por debajo de 1400 px
   por esa misma razón, y la elección se recuerda.
   En el celular (≤760) es un panel que entra desde la izquierda, encima del
   contenido, y se cierra al elegir o tocando afuera. */
.app{ display:flex; min-height:100vh }
.app > .wrap{ flex:1; min-width:0 }
.menu{ position:sticky; top:0; align-self:flex-start; height:100vh; flex:0 0 auto;
       width:240px; background:var(--panel); border-right:1px solid var(--line);
       padding:var(--sp-4) var(--sp-2); overflow-y:auto; overflow-x:hidden;
       transition:width var(--ease) }
.menu-lista{ display:flex; flex-direction:column; gap:2px }
.menu-cab{ display:flex; align-items:center; justify-content:space-between;
           gap:var(--sp-2); padding:0 0 var(--sp-3) var(--sp-3) }
.menu-tit{ font-family:'Rajdhani',sans-serif; font-size:var(--fs-xs); font-weight:700;
           letter-spacing:.18em; text-transform:uppercase; color:var(--subtle); white-space:nowrap }
/* la flechita que expande / pliega (solo en la PC) */
.menu-plegar{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
              width:32px; height:32px; cursor:pointer; color:var(--muted); background:none;
              border:1px solid var(--line-2); border-radius:var(--r-sm);
              transition:color var(--ease), border-color var(--ease) }
.menu-plegar svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
                  stroke-linecap:round; stroke-linejoin:round; transition:transform var(--ease) }
.menu-plegar:hover{ color:var(--gold); border-color:var(--gold) }
.menu-plegar:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
.app.plegado .menu-cab{ justify-content:center; padding-left:0 }
.app.plegado .menu-plegar svg{ transform:rotate(180deg) }
.mod{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:44px;
      padding:var(--sp-2) var(--sp-3); border:1px solid transparent; border-radius:var(--r-sm);
      background:none; color:var(--muted); font:inherit; font-weight:600; text-align:left;
      cursor:pointer; white-space:nowrap; transition:background var(--ease), color var(--ease) }
.mod svg{ width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor;
          stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.mod:hover{ background:rgba(255,255,255,.05); color:var(--ink) }
.mod:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px }
.mod.on{ background:rgba(230,207,139,.10); border-color:rgba(230,207,139,.35); color:var(--gold) }
.mod .pronto{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.06em;
              text-transform:uppercase; color:var(--subtle); border:1px solid var(--line-2);
              border-radius:var(--r-pill); padding:1px 7px }
.app.plegado .menu{ width:64px }
.app.plegado .menu-tit, .app.plegado .mod .nom, .app.plegado .mod .pronto{ display:none }
.app.plegado .mod{ justify-content:center; padding:var(--sp-2) 0 }

/* ⚠ La hamburguesa es SOLO del celular: en la PC no se muestra (se la
   prende el @media de ≤760 de abajo). */
.btn-menu{ display:none; flex-direction:column; justify-content:center; gap:4px;
           width:40px; height:40px; padding:0 10px; flex-shrink:0; cursor:pointer;
           background:none; border:1px solid var(--line-2); border-radius:var(--r-sm) }
.btn-menu span{ display:block; height:2px; border-radius:2px; background:var(--ink) }
.btn-menu:hover{ border-color:var(--gold) }
.btn-menu:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
.menu-velo{ display:none }

@media (max-width:760px){
  .menu{ position:fixed; left:0; top:0; z-index:70; width:260px; height:100vh;
         transform:translateX(-100%); transition:transform var(--ease);
         box-shadow:0 0 40px rgba(0,0,0,.5) }
  .app.plegado .menu{ width:260px }
  .app.plegado .menu-tit, .app.plegado .mod .nom, .app.plegado .mod .pronto{ display:revert }
  .app.plegado .mod{ justify-content:flex-start; padding:var(--sp-2) var(--sp-3) }
  .btn-menu{ display:inline-flex }
  .menu-plegar{ display:none }
  .app.plegado .menu-cab{ justify-content:space-between; padding-left:var(--sp-3) }
  .app.abierto .menu{ transform:none }
  .app.abierto .menu-velo{ display:block; position:fixed; inset:0; z-index:69;
                           background:rgba(0,0,0,.55) }
}
@media (prefers-reduced-motion:reduce){ .menu{ transition:none } }

/* un módulo que todavía no está */
.proximo{ text-align:center; padding:var(--sp-6) var(--sp-4); max-width:520px; margin:0 auto }
.proximo svg{ width:44px; height:44px; fill:none; stroke:var(--gold); stroke-width:1.6;
              stroke-linecap:round; stroke-linejoin:round; margin-bottom:var(--sp-3) }
.proximo h2{ margin-bottom:var(--sp-2) }
.proximo .chip-pronto{ display:inline-block; margin-bottom:var(--sp-4); font-size:var(--fs-xs);
                       font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                       color:var(--gold); border:1px solid rgba(230,207,139,.4);
                       border-radius:var(--r-pill); padding:2px 10px }
.sin-tabs .tabs{ display:none }
.sin-tabs .hoja{ margin-top:var(--sp-4) }

/* =====================================================================
 * PRESUPUESTOS · la pantalla
 * ===================================================================== */
.en-curso{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 12px;
           font:inherit; font-size:var(--fs-xs); font-weight:700; cursor:pointer; white-space:nowrap;
           color:var(--gold); background:rgba(230,207,139,.08); border:1px solid rgba(230,207,139,.45);
           border-radius:var(--r-pill) }
.en-curso:hover{ background:rgba(230,207,139,.16) }
.en-curso:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
.en-curso[hidden]{ display:none }
.presu-cab{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4) }
.presu-cab h2{ margin-right:auto }
.presu-num{ font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.06em; color:var(--gold) }
.t-presus td, .t-presus th{ vertical-align:middle }
.t-presus td.num{ white-space:nowrap }
.t-presus tbody tr{ cursor:pointer }
.t-presus tbody tr:hover td{ background:rgba(255,255,255,.03) }
.presu-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3) }
.presu-caja{ border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4);
             margin-top:var(--sp-4); background:rgba(255,255,255,.015) }
.presu-caja > h3{ font-size:var(--fs-md); margin-bottom:var(--sp-2) }
.campo textarea, .campo select{ width:100%; background:var(--navy); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; min-height:44px;
  font-family:inherit; font-size:var(--fs-md) }
/* la tabla de renglones: anchos medidos a mano, como todas las del repo */
.t-plinea{ table-layout:fixed; min-width:720px }
.t-plinea th:nth-child(1){ width:auto }
.t-plinea th:nth-child(2){ width:92px }
.t-plinea th:nth-child(3){ width:150px }
.t-plinea th.col-neto{ width:130px }
.t-plinea th.c-sub{ width:130px }
.t-plinea th.c-acc{ width:84px }
.t-plinea:not(.con-neto) .col-neto{ display:none }
.t-plinea td{ vertical-align:top }
.pl-texto{ width:100%; min-height:56px; resize:vertical; background:var(--navy); color:var(--ink);
           border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 10px;
           font-family:inherit; font-size:var(--fs-md); font-weight:600; line-height:1.35 }
.pl-det{ margin-top:6px; font-size:var(--fs-xs); color:var(--subtle); line-height:1.4 }
.pl-det label{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; cursor:pointer;
               color:var(--muted) }
.pl-num{ width:100%; background:var(--navy); color:var(--ink); border:1px solid var(--line-2);
         border-radius:var(--r-sm); padding:8px 10px; min-height:40px; font-family:inherit;
         font-size:var(--fs-md); text-align:right; font-variant-numeric:tabular-nums }
.pl-num.falta{ border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset }
.pl-sub{ padding-top:10px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums;
         white-space:nowrap }
.pl-sub.falta{ color:var(--warn); font-weight:600; font-size:var(--fs-xs); white-space:normal }
.presu-totales{ margin-left:auto; max-width:380px; font-variant-numeric:tabular-nums }
.presu-totales .fila{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:4px 0 }
.presu-totales .fila.total{ border-top:1px solid var(--line-2); margin-top:6px; padding-top:10px;
                            font-size:var(--fs-xl); font-weight:800; color:var(--gold) }
.presu-inter{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4) }
.segm{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden }
.segm button{ font:inherit; font-size:var(--fs-sm); font-weight:600; padding:8px 12px; min-height:40px;
              background:none; color:var(--muted); border:0; cursor:pointer }
.segm button + button{ border-left:1px solid var(--line-2) }
.segm button.on{ background:rgba(230,207,139,.14); color:var(--gold) }
.segm button:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px }
.en-vivo{ font-size:var(--fs-sm); color:var(--muted) }
.en-vivo b{ color:var(--ink); font-variant-numeric:tabular-nums }
.guardado{ font-size:var(--fs-xs); color:var(--subtle); min-width:120px; text-align:right }
.guardado.mal{ color:var(--bad) }
@media (max-width:820px){ .presu-grid{ grid-template-columns:1fr } }

/* ---------- la vista previa (en pantalla) ---------- */
body.previsualizando .app{ display:none }
body.previsualizando{ background:#3a3f4b }
.imp-barra{ position:sticky; top:0; z-index:60; display:flex; flex-wrap:wrap; align-items:center;
            gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--panel);
            border-bottom:1px solid var(--line-2); color:var(--ink) }
.imp-barra[hidden], #impresion[hidden]{ display:none }
.imp-barra .aviso{ flex-basis:100%; margin:0 }
.imp-barra .derecha{ margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap }
.chip-membrete{ font-size:var(--fs-xs); font-weight:700; padding:4px 10px; border-radius:var(--r-pill);
                border:1px solid; white-space:nowrap }
.chip-membrete.con{ color:#8ff0c8; border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.1) }
.chip-membrete.sin{ color:#fde9b0; border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.1) }

/* ---------- la hoja: SIEMPRE en claro, no usa las variables del tema ---------- */
#impresion{ width:210mm; max-width:calc(100% - 24px); min-height:297mm; margin:24px auto;
            padding:14mm 14mm 16mm; background:#fff; color:#111; box-shadow:0 10px 40px rgba(0,0,0,.4);
            font-family:'Inter',system-ui,sans-serif; font-size:12px; line-height:1.45 }
#impresion .imp-memb{ display:flex; justify-content:space-between; gap:16px; padding-bottom:10px;
                      border-bottom:2px solid #111; margin-bottom:14px }
#impresion .imp-memb .nom{ font-family:'Poppins',sans-serif; font-weight:800; font-size:20px }
#impresion .imp-memb .dat{ text-align:right; color:#333; font-size:11px }
#impresion .imp-tit{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
                     margin-bottom:12px }
#impresion .imp-tit h1{ font-family:'Poppins',sans-serif; font-size:18px; letter-spacing:.14em; margin:0 }
#impresion .imp-tit .num{ font-weight:700; font-size:13px; text-align:right }
#impresion .imp-cliente{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start;
                         gap:4px 28px; padding:8px 10px; border:1px solid #ccc; border-radius:4px;
                         margin-bottom:14px }
#impresion .imp-cliente span{ color:#666; margin-right:4px }
#impresion table.imp-tabla{ width:100%; border-collapse:collapse; font-size:12px; color:#111 }
#impresion .imp-tabla th{ text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
                          color:#444; border-bottom:1.5px solid #111; padding:6px 6px; background:none;
                          position:static }
#impresion .imp-tabla td{ padding:7px 6px; border-bottom:1px solid #ddd; vertical-align:top; color:#111 }
#impresion .imp-tabla .c{ width:48px; text-align:center }
#impresion .imp-tabla .m{ width:108px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
#impresion .imp-tabla .t{ font-weight:700 }
#impresion .imp-tabla .d{ display:block; font-weight:400; color:#555; font-size:10.5px; margin-top:2px }
#impresion .imp-totales{ margin:12px 0 0 auto; width:260px; font-variant-numeric:tabular-nums }
#impresion .imp-totales div{ display:flex; justify-content:space-between; padding:3px 0 }
#impresion .imp-totales .tot{ border-top:2px solid #111; margin-top:4px; padding-top:7px;
                              font-size:16px; font-weight:800 }
#impresion .imp-pie{ margin-top:22px; padding-top:10px; border-top:1px solid #ccc; font-size:11px; color:#333 }
#impresion .imp-pie .nf{ margin-top:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                         font-size:10px; color:#111 }
#impresion .imp-falta{ color:#b45309; font-weight:700 }

@media print{
  @page{ size:A4 portrait; margin:12mm }
  /* ⚠ sin esto el margen de la hoja salía OSCURO: el `color-scheme:dark` de
     la app se filtra a la impresión y Chrome pinta el lienzo con el tema.
     Se vio recién pasando el PDF a imagen; en pantalla no se nota. */
  :root{ color-scheme:light !important }
  html, body{ background:#fff !important; color:#111 !important }
  body > *{ display:none !important }
  body > #impresion{ display:block !important; width:auto; max-width:none; min-height:0;
                     margin:0; padding:0; box-shadow:none }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  #impresion .imp-tabla thead{ display:table-header-group }
  #impresion .imp-tabla tr, #impresion .imp-cliente{ break-inside:avoid }
  /* ⚠⚠ EL CIERRE (totales + pie) VA COMO ÚLTIMO RENGLÓN DE LA TABLA, entero y
     pegado al renglón de arriba. Como bloque suelto después de la tabla, con
     12 renglones Chrome cortaba entre los totales y el pie: la hoja 2 salía
     con «Documento no válido como factura» SOLO. Ninguna medición lo
     mostraba; se vio pasando el PDF a imagen. */
  #impresion .imp-cierre-tr{ break-inside:avoid; break-before:avoid }
  #impresion .imp-cierre{ break-inside:avoid }
  #impresion .imp-noimprime{ display:none !important }
}

/* el modo mostrador es para buscar con el cliente enfrente: sin menú */
body.mostrador .menu, body.mostrador .btn-menu, body.mostrador .menu-velo{ display:none !important }
.marca{ font-family:'Poppins',sans-serif; font-weight:800; font-size:var(--fs-xl); line-height:1 }
.marca b{ color:var(--gold); font-weight:800 }
.baj{ font-family:'Rajdhani',sans-serif; font-size:var(--fs-xs); font-weight:700;
      letter-spacing:.18em; text-transform:uppercase; color:var(--cyan) }
.demo{ margin-left:auto; font-size:var(--fs-xs); color:#fde9b0;
       background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.35);
       border-radius:var(--r-pill); padding:5px 12px }
/* ⭐ la tira de arriba es un BOTÓN (07/10/2026): con un proveedor nuevo por semana,
   la lista de nombres se estiraba y empujaba todo el encabezado. Dice el total y
   abre la lista con cada proveedor, sus artículos, sus fotos y su nota. */
button.demo{ font-family:inherit; cursor:pointer; min-height:32px; white-space:nowrap }
button.demo:active{ transform:scale(.97) }
.fila-prov{ display:grid; grid-template-columns:minmax(0,1fr) 92px 72px; gap:10px;
            padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm) }
.fila-prov > span:nth-child(n+2){ text-align:right; font-variant-numeric:tabular-nums }
.fila-prov.cab{ font-size:var(--fs-xs); color:var(--muted); padding-top:0 }
.nota-prov{ font-size:var(--fs-xs); color:#fde9b0; padding:0 0 7px; border-bottom:1px solid var(--line);
            margin-top:-4px }

/* ---------- el cartel del recolector ----------
   ⚠ Es un BOTÓN, no un adorno: se toca y cuenta qué pasa y qué hacer.
   El título solo (tooltip) no sirve en el mostrador, que es una pantalla
   táctil: ahí no hay «pasar el mouse por encima». */
.vivo{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
       font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
       border-radius:var(--r-pill); padding:5px 12px; border:1px solid;
       background:none; font-family:inherit; cursor:pointer;
       min-height:32px }
.vivo .pto{ width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.vivo:active{ transform:scale(.97) }

.vivo.verde{ color:#8ff0c8; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.45) }
.vivo.verde .pto{ background:#34d399; animation:latir 2.4s ease-in-out infinite }

.vivo.trabajando{ color:#a9e4f7; background:rgba(95,200,232,.10); border-color:rgba(95,200,232,.45) }
.vivo.trabajando .pto{ background:var(--cyan); animation:latir 1s ease-in-out infinite }

.vivo.roja{ color:#ffb4b4; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.55) }
.vivo.roja .pto{ background:#f87171; animation:latir 1.4s ease-in-out infinite }

/* ámbar: los precios están al día, pero un paso secundario de la corrida no
   terminó. Sin titilar: no es una alarma, es un aviso para leer. */
.vivo.ambar{ color:#fcd98a; background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.50) }
.vivo.ambar .pto{ background:#fbbf24 }

.vivo.gris{ color:var(--subtle); background:rgba(255,255,255,.04); border-color:var(--line) }
.vivo.gris .pto{ background:var(--subtle) }

@keyframes latir{
  0%,100%{ opacity:1;  box-shadow:0 0 0 0 currentColor }
  50%    { opacity:.35; box-shadow:0 0 0 4px transparent }
}
/* ⚠ La regla global de arriba apaga TRANSICIONES, no animaciones: un
   punto titilando sin parar es justo lo que molesta a quien pide menos
   movimiento, así que se apaga aparte. El color se mantiene, que es lo
   que lleva la información. */
@media (prefers-reduced-motion:reduce){ .vivo .pto{ animation:none !important } }

/* ---------- pestañas ---------- */
/* ⚠ Las solapas ENVUELVEN, no scrollean. Con `overflow-x:auto` en una
   notebook angosta quedaban tres solapas fuera de vista y había que
   arrastrar una barrita para llegar a «Proveedores». Una solapa que no se
   ve es una solapa que no existe. */
.tabs{ display:flex; flex-wrap:wrap; gap:2px; margin-top:var(--sp-4) }
.tab{ font-family:inherit; font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
      padding:10px 16px; min-height:44px; cursor:pointer; color:var(--muted);
      background:var(--panel-2); border:1px solid var(--line); border-bottom:none;
      border-radius:var(--r-sm) var(--r-sm) 0 0; transition:color var(--ease), background var(--ease) }
.tab:hover{ color:var(--ink) }
.tab.on{ background:var(--panel); color:var(--ink); border-color:var(--line-2) }
.tab .n{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--r-pill);
         font-size:var(--fs-xs); font-weight:700; background:rgba(255,255,255,.10); color:var(--muted) }
.tab .n.alerta{ background:rgba(251,191,36,.18); color:#fde9b0 }
.hoja{ background:var(--panel); border:1px solid var(--line-2);
       border-radius:0 var(--r-md) var(--r-md) var(--r-md); padding:var(--sp-4); min-height:420px }

h2{ font-family:'Poppins',sans-serif; font-size:var(--fs-xl); font-weight:600 }
.sub{ color:var(--muted); font-size:var(--fs-sm); margin-top:2px; max-width:80ch }

/* ---------- buscador ---------- */
.barra{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin:var(--sp-4) 0 }
.buscar{ flex:1 1 300px; min-width:0; background:var(--navy); color:var(--ink);
         border:1px solid var(--line-2); border-radius:var(--r-sm);
         padding:12px 14px; min-height:48px; font-family:inherit; font-size:var(--fs-lg) }
.buscar::placeholder{ color:var(--subtle) }
.buscar:focus{ outline:2px solid var(--cyan); outline-offset:1px }
.cuenta{ color:var(--subtle); font-size:var(--fs-sm); font-variant-numeric:tabular-nums }

/* ---------- LA GRILLA CON FOTOS ----------
   Belén pidió verlo como el catálogo del proveedor: la foto manda. En el
   mostrador se reconoce una pieza por la forma mucho antes que por el
   código, y la lista de texto obliga a leer.
   ⚠ La lista NO se va: para comparar ocho precios de un vistazo sigue
   siendo mejor. Se elige con un botón y la elección se recuerda. */
.grilla{ display:grid; gap:var(--sp-3);
         grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)) }
.tarj{ background:var(--panel-2); border:1px solid var(--line-2);
       border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column }
.tarj-foto{ aspect-ratio:1/1; background:#fff; display:flex; align-items:center;
            justify-content:center; overflow:hidden; cursor:zoom-in }
.tarj-foto img{ width:100%; height:100%; object-fit:contain }
/* ⚠ Una tarjeta sin foto tiene que verse DIGNA, no rota: 5.707 artículos
   de Rodamitre no traen imagen. Un recuadro vacío se lee como un error de
   carga; uno que lo dice, no. */
.tarj-sinfoto{ aspect-ratio:1/1; background:var(--navy); display:flex; flex-direction:column;
               align-items:center; justify-content:center; gap:6px; color:var(--subtle);
               font-size:var(--fs-xs); text-align:center; padding:var(--sp-3) }
.tarj-sinfoto .ico{ font-size:26px; opacity:.5 }
.tarj-prov{ display:flex; justify-content:space-between; align-items:center; gap:8px;
            padding:8px 10px; border-bottom:1px solid var(--line);
            font-size:var(--fs-xs); color:var(--subtle) }
.tarj-cuerpo{ padding:10px; display:flex; flex-direction:column; gap:6px; flex:1 }
.tarj-desc{ font-weight:600; line-height:1.3 }
.tarj-apl{ color:var(--subtle); font-size:var(--fs-xs); line-height:1.35;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           overflow:hidden }
.tarj-precio{ margin-top:auto; padding-top:6px }
.tarj-precio .venta{ font-size:var(--fs-2xl) }
.tarj-pie{ display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 10px }
.tarj-pie .btn{ flex:1 1 auto }
.vista-btns{ display:flex; gap:2px }
.vista-btns .btn{ min-height:48px }
.vista-btns .btn.on{ background:var(--gold); border-color:var(--gold); color:#241703 }
/* en el mostrador la tarjeta también crece */
body.mostrador .tarj-precio .venta{ font-size:34px }
body.mostrador .grilla{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) }
/* el stock de la tarjeta SÍ se ve en el mostrador (ver el comentario en
   `tarjetaItem`), y con el cuerpo que se lee de pie */
body.mostrador .tarj-stock{ display:block; font-size:var(--fs-md); color:var(--ink) }

/* ---------- Mis productos ----------
   ⚠ Los anchos se dan a mano: con cinco columnas y `table-layout:fixed`,
   el reparto parejo dejaba un hueco enorme entre el OEM y el número de
   proveedores, y empujaba los botones contra el borde derecho, donde no
   entraban en una línea y caían en dos. */
.t-prod th:nth-child(1), .t-prod td:nth-child(1){ width:30% }
.t-prod th:nth-child(2), .t-prod td:nth-child(2){ width:20% }
.t-prod th:nth-child(3), .t-prod td:nth-child(3){ width:14% }
.t-prod th:nth-child(4), .t-prod td:nth-child(4){ width:9%; text-align:left }
.t-prod th:nth-child(5), .t-prod td:nth-child(5){ width:27% }
/* los tres botones, en una sola línea */
.acc-prod{ display:flex; gap:6px; flex-wrap:wrap }
/* ---------- equivalencias, en la ficha ---------- */
.equiv{ border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden }
.equiv-tit{ width:100%; display:flex; justify-content:space-between; align-items:center;
            gap:10px; background:var(--panel-2); color:var(--ink); border:none;
            font-family:inherit; font-size:var(--fs-sm); text-align:left;
            padding:11px 12px; min-height:44px; cursor:pointer }
.equiv-tit:hover{ background:rgba(255,255,255,.05) }
.equiv-tit:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px }
.equiv-flecha{ color:var(--subtle); flex-shrink:0 }
.equiv-cuerpo{ padding:10px 12px 12px }
.equiv-cuerpo[hidden]{ display:none }
.t-equiv{ width:100% }
.t-equiv th, .t-equiv td{ padding:6px 8px }
.t-equiv th:nth-child(1), .t-equiv td:nth-child(1){ width:45% }
/* el descuento del proveedor, en su celda */
.desc-prov{ display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.desc-prov input{ width:62px; background:var(--navy); color:var(--ink);
                  border:1px solid var(--line-2); border-radius:var(--r-sm);
                  padding:7px 8px; font-family:inherit; font-size:var(--fs-sm);
                  min-height:38px; text-align:right }
.desc-prov input:focus{ outline:2px solid var(--cyan); outline-offset:1px }
/* bajar el catálogo entero.
   ⚠ Es un <a download>, no un <button>: así la descarga la maneja el
   navegador (barra de progreso, «Guardar como», reintento) en vez de
   tener que juntar 14 MB en memoria con fetch para después soltarlos.
   ⚠ Y por eso hace falta esto: `.btn` está escrito para <button>, y un
   <a> sin `display` ni `text-decoration:none` sale subrayado, angosto y
   con el texto pegado arriba. */
.bajar-cat{ display:flex; align-items:center; gap:var(--sp-3);
            flex-wrap:wrap; margin-top:var(--sp-4) }
.bajar-cat .btn{ display:inline-flex; align-items:center; justify-content:center;
                 text-decoration:none }
.bajar-cat .men{ flex:1 1 280px; min-width:0 }
/* ---------- la tabla de proveedores ----------
   ⚠ Con la columna del descuento pasaron a ser siete, y en pantalla
   angosta el botón «Guardar» se salía de su celda. Medido a 700, 560 y
   390 px. */
.t-prov th:nth-child(1), .t-prov td:nth-child(1){ width:20% }
.t-prov th:nth-child(2), .t-prov td:nth-child(2){ width:13% }
.t-prov th:nth-child(3), .t-prov td:nth-child(3){ width:9% }
.t-prov th:nth-child(4), .t-prov td:nth-child(4){ width:14% }
.t-prov th:nth-child(5), .t-prov td:nth-child(5){ width:20% }
.t-prov th:nth-child(6), .t-prov td:nth-child(6){ width:12% }
.t-prov th:nth-child(7), .t-prov td:nth-child(7){ width:12% }
/* ---------- Para revisar ----------
   ⚠ En 390 px sus seis columnas dejaban celdas de 28 px: ahí no entra
   NADA, ni un chip de dos letras. Se esconden las de apoyo —proveedor,
   código y el porqué— que además se ven entrando a la ficha; quedan la
   descripción, el precio y el botón, que es lo que se usa para decidir
   si vincular. El proveedor y el código bajan a la línea chica. */
@media (max-width:700px){
  .r-prov, .r-cod, .r-porque{ display:none }
}
@media (max-width:920px){
  /* «Cómo se baja» es informativo y no se toca nunca: es lo primero que
     sobra cuando falta lugar. El descuento, en cambio, se edita. */
  .t-prov .p-modo{ display:none }
  .t-prov th:nth-child(1), .t-prov td:nth-child(1){ width:22% }
  .t-prov th:nth-child(5), .t-prov td:nth-child(5){ width:26% }
  /* y el campo se apila arriba del botón, que es lo que evita que el
     botón se salga de la celda */
  .desc-prov{ flex-direction:column; align-items:stretch }
  .desc-prov input{ width:100%; text-align:left }
}
@media (max-width:820px){
  /* en angosto sí pueden envolver: mejor dos renglones que un botón cortado */
  .t-prod th:nth-child(2), .t-prod td:nth-child(2){ width:18% }
  .t-prod th:nth-child(5), .t-prod td:nth-child(5){ width:30% }
}

/* ---------- el filtro de proveedores (al lado del buscador) ----------
   Desplegable de selección múltiple. Escribir ya filtra por texto; esto
   filtra por QUIÉN lo vende, que es la otra pregunta del mostrador:
   «esto lo tiene Rodamitre?».
   ⚠ z-index 10: arriba del encabezado pegajoso de la tabla (2) y bien
   abajo del panel de la ficha (80), del aviso (90) y del visor (95).
   Si quedara arriba del panel, se vería el desplegable flotando sobre
   una ficha abierta. */
.filtro-prov{ position:relative }
.filtro-prov .btn{ min-height:48px }      /* la misma altura que el buscador */
.panel-prov{ position:absolute; z-index:10; top:calc(100% + 6px); left:0; min-width:236px;
     background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
     padding:var(--sp-1); box-shadow:0 14px 34px rgba(0,0,0,.5) }
.panel-prov[hidden]{ display:none }
.op-prov{ display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
     background:none; border:none; color:var(--ink); font-family:inherit; cursor:pointer;
     font-size:var(--fs-sm); padding:9px 10px; min-height:40px; border-radius:var(--r-sm) }
.op-prov:hover{ background:rgba(255,255,255,.05) }
.op-prov:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px }
.op-prov .tic{ flex:0 0 16px; color:var(--cyan); font-weight:700 }
.op-prov.todo{ border-bottom:1px solid var(--line); border-radius:var(--r-sm) var(--r-sm) 0 0;
     color:var(--subtle) }
@media (pointer:coarse){ .op-prov{ min-height:44px } }

/* ---------- tablas ---------- */
.scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm) }
/* ⚠⚠ LA TABLA NO PUEDE SER MÁS ANCHA QUE SU CAJA — EN NINGÚN ANCHO.
   Con `table-layout:auto` cada columna pide lo que le pide el contenido y
   la suma de los mínimos daba 980 px: abajo de ~1080 aparecía la barra
   horizontal y lo primero que quedaba afuera eran los botones y el
   precio. Esto ya estaba resuelto para el celular (≤700) y faltaba la
   franja del medio, que es justo la de una notebook.
   Con el ancho fijo las columnas se reparten la caja y el texto ENVUELVE
   en vez de empujar. Las medidas de abajo son las proporciones, no
   píxeles: se adaptan solas. */
.scroll table{ table-layout:fixed; width:100% }
/* Medido con la tabla viva a 1600/1366/1280/1152/1024/900/800: estos son
   los repartos con los que NADA queda cortado en ninguno. Si se tocan,
   hay que volver a medir — a ojo no se ve, son 3 y 7 píxeles. */
.c-prov{ width:11% } .c-cod{ width:9% }
th:nth-child(4){ width:16% }   /* Lo vendés a */
.c-cuesta{ width:10% } .c-stock{ width:5% } .c-prod{ width:8% }
thead th:last-child{ width:12% }
.desc{ min-width:0 }
/* el código y el precio no se parten, pero tampoco empujan: la columna
   que cede es la descripción, que es la única que puede envolver bien */
.cod{ overflow-wrap:anywhere }
/* ⚠ La franja de 700 a 920 px —tablet, o una ventana a medio ancho en la
   notebook— no la cubría nadie: abajo de 700 está el tratamiento de
   celular y arriba de 920 entra todo. Justo ahí el precio en cuerpo 2xl
   no entraba en su columna y se comía el último dígito. Medido: a 800 px
   el aire del precio daba -8.
   Un precio al que le falta un número es peor que un precio chico. */
@media (max-width:920px){
  /* ⚠⚠ ACÁ NO ENTRAN OCHO COLUMNAS, Y NO HAY REPARTO QUE LO ARREGLE.
     Estuve moviendo porcentajes de a uno: al ensanchar el costo se comía
     el precio, y al ensanchar el precio se comía el costo. La suma no da,
     y eso no se negocia con decimales.
     Es el mismo problema que ya estaba resuelto para el celular (≤700) y
     con la misma salida: se esconden las columnas de APOYO —el código y
     «Mi producto»— y el código baja a la línea chica de la descripción,
     donde se sigue leyendo. Quedan las que se usan con un cliente
     enfrente: qué es, a cuánto lo vendés, cuánto te cuesta, si hay, y qué
     hacer. */
  .venta{ font-size:var(--fs-xl) }
  .c-cod, .c-prod{ display:none }
  .solo-cel{ display:inline }
  /* ⚠ «Papierttei» es UNA palabra: no se puede partir, así que la columna
     tiene que darle los ~101 px que mide o se come las últimas letras.
     Partirla con `overflow-wrap` haría «Papiertt/ei», que en el nombre de
     un proveedor se lee como un error. Medido: 16 %. */
  .c-prov{ width:16% }
  th:nth-child(4){ width:22% }
  .c-cuesta{ width:16% } .c-stock{ width:7% }
  thead th:last-child{ width:14% }
}
table{ border-collapse:collapse; width:100%; font-size:var(--fs-sm) }
th,td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
thead th{ background:var(--panel-2); position:sticky; top:0; z-index:2;
          font-family:'Rajdhani',sans-serif; font-size:var(--fs-xs); font-weight:700;
          letter-spacing:.12em; text-transform:uppercase; color:var(--subtle) }
/* ⚠ EL ENCABEZADO ENVUELVE SIEMPRE. Tenía `white-space:nowrap`, y eso
   hacía que «Última actualización» o «Mi producto» se cortaran en cuanto
   su columna se achicaba —medido: pasaba desde 1024 px— y encima
   empujaban la tabla hasta sacarle una barra horizontal.
   Un título de columna partido en dos renglones se lee perfecto; uno
   cortado, no. Y `normal` sólo envuelve cuando hace falta: donde entra,
   sigue en una línea. */
tbody tr:hover{ background:rgba(255,255,255,.03) }
tbody tr:last-child td{ border-bottom:none }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
/* ⚠ EL TÍTULO de una columna numérica SÍ envuelve; el NÚMERO no.
   «Productos» no entra en una columna angosta y quedaba cortado. */
th.num{ white-space:normal }
/* ⚠ Y una palabra que no entra se PARTE, no se corta — en cualquier
   ancho. Sólo actúa cuando la palabra no entra de ninguna manera, así
   que en pantalla grande no cambia nada. Sin esto, «ARGENTINA» en una
   columna de 90 px se comía las últimas letras sin que se notara. */
th,td{ overflow-wrap:anywhere }
.cod{ font-family:ui-monospace,Consolas,monospace; color:var(--cyan); font-size:var(--fs-xs) }
.desc{ min-width:240px }
.men{ color:var(--subtle); font-size:var(--fs-xs) }
/* ⚠ Va ACÁ y no al final: si esta regla queda DESPUÉS del @media, lo
   pisa por ser más tardía con la misma especificidad, y el código del
   proveedor no aparece nunca en el celular — justo donde hace falta. */
.solo-cel{ display:none }

/* ⚠ El chip ENVUELVE si no entra. Con `white-space:nowrap` «lista, sin
   bonificar» y «sin código de fabricante» se salían de su celda y se
   metían abajo de la columna de al lado — sin que el navegador lo contara
   como texto cortado, porque técnicamente no lo estaba: estaba afuera.
   Un chip de dos renglones se lee perfecto. */
.chip{ display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:var(--fs-xs);
       font-weight:700; border:1px solid var(--line-2); color:var(--muted); white-space:normal;
       /* ⚠ y en 390 px «fabricante» sola no entra en una columna de 60:
          una palabra que no entra se parte, igual que en las celdas */
       overflow-wrap:anywhere; max-width:100% }
.chip.ok{ color:#8ff0c8; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.10) }
.chip.rev{ color:#fde9b0; border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.10) }
/* ⚠ clase PROPIA, no reusa .rev: si comparte clase con «sin vincular»,
   cualquier cuenta de .chip.rev pasa a contar las dos cosas y el número
   cambia sin que nadie lo haya tocado. */
.chip.base{ color:#bfe8f7; border-color:rgba(95,200,232,.4); background:rgba(95,200,232,.10) }
.chip.mal{ color:#fca5a5; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.10) }

.btn{ font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
      background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2);
      border-radius:var(--r-sm); padding:9px 14px; min-height:40px; white-space:nowrap;
      transition:border-color var(--ease), background var(--ease) }
.btn:hover{ border-color:var(--muted) }
.btn:active{ transform:scale(.985) }
.btn.oro{ background:var(--gold); border-color:var(--gold); color:#241703 }
.btn.chico{ min-height:34px; padding:6px 11px; font-size:var(--fs-xs) }
/* ⚠ Con el dedo, 34 px no alcanza: hay que apuntar, y estos son los
   botones que más se tocan (Vincular · Anotar · No lo tengo). En el mouse
   34 px está bien y mantiene la tabla compacta, así que el tamaño sube
   solo donde se toca. */
@media (pointer:coarse){
  /* ⚠⚠ ALTO **Y ANCHO**. Esto decía solo `min-height:44px`, y el botón
     «Ver» de cada fila quedaba en **36×44**: alto suficiente, ancho no.
     El dedo necesita las dos medidas — un botón de 36 px de ancho se
     falla, y en un mostrador con el cliente esperando eso es tocar dos
     veces cada vez.
     Lo cazó medir los botones con el táctil emulado, no mirar la
     pantalla: a ojo 36 y 44 son lo mismo. */
  .btn.chico{ min-height:44px; min-width:44px; padding:8px 12px }
  /* y los botones grandes de la ficha, que se tocan igual */
  .btn{ min-height:44px; min-width:44px }
  /* ⚠ El cartel del recolector es un <button> pero NO lleva `.btn`, así
     que ninguna de las dos reglas de arriba lo alcanzaba y quedaba en
     32 px. Va nombrado aparte, y también en el bloque de pantalla chica
     de más abajo: si va en uno solo, el otro lo pisa (ya pasó dos veces
     en este archivo, está contado ahí). */
  .vivo{ min-height:44px }
}
.btn:disabled{ opacity:.45; cursor:not-allowed }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }

.vacio{ padding:var(--sp-6); text-align:center; color:var(--subtle) }
.vacio b{ display:block; color:var(--muted); font-size:var(--fs-lg); margin-bottom:var(--sp-2) }

/* ---------- avisos ---------- */
.aviso{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-sm);
        margin-bottom:var(--sp-3); border:1px solid }
.aviso.warn{ background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.35); color:#fde9b0 }
.aviso.info{ background:rgba(95,200,232,.09); border-color:rgba(95,200,232,.30); color:#bfe8f7 }

/* ---------- modal ---------- */
.fondo{ position:fixed; inset:0; background:rgba(2,4,9,.72); display:none;
        align-items:center; justify-content:center; padding:var(--sp-4); z-index:80 }
.fondo.ver{ display:flex }
.modal{ background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md);
        padding:var(--sp-5); max-width:640px; width:100%; max-height:88vh; overflow:auto }
.modal h3{ font-family:'Poppins',sans-serif; font-size:var(--fs-lg); font-weight:600 }
.campo{ display:block; margin-top:var(--sp-3) }
.campo span{ display:block; font-size:var(--fs-xs); color:var(--subtle); margin-bottom:4px;
             font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.12em;
             text-transform:uppercase }
.campo input{ width:100%; background:var(--navy); color:var(--ink); border:1px solid var(--line-2);
              border-radius:var(--r-sm); padding:10px 12px; min-height:44px;
              font-family:inherit; font-size:var(--fs-md) }
.acciones{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-5);
           flex-wrap:wrap }
.sug{ display:flex; align-items:center; gap:var(--sp-3); padding:10px 12px; margin-top:var(--sp-2);
      background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm) }
.sug .por{ font-size:var(--fs-xs); color:var(--subtle) }
.sug .fuerza{ margin-left:auto }

/* ---------- fotos ----------
   La miniatura de la fila y el visor que la agranda al tocarla. */
.mini{ width:44px; height:44px; flex-shrink:0; border-radius:var(--r-sm);
       background:var(--navy); border:1px solid var(--line); object-fit:contain;
       cursor:zoom-in; transition:border-color var(--ease) }
.mini:hover{ border-color:var(--gold) }
.mini.vacia{ display:flex; align-items:center; justify-content:center; cursor:default;
             color:var(--subtle); font-size:var(--fs-xs) }
.con-mini{ display:flex; align-items:flex-start; gap:var(--sp-3) }
/* ⚠ `min-width:0` en el hijo de texto. Sin esto un hijo de flex no se
   achica por debajo de lo que mide su contenido: la descripción se
   desbordaba de su columna y el nombre del proveedor salía 25 px afuera,
   tapado por la celda de al lado. Lo cazó la prueba de recortes apenas
   se agregó la miniatura. */
.con-mini > div{ min-width:0 }
body.mostrador .mini{ width:64px; height:64px }

/* la foto grande de la ficha */
.foto-ficha{ width:120px; height:120px; border-radius:var(--r-md); background:var(--navy);
             border:1px solid var(--line-2); object-fit:contain; cursor:zoom-in; flex-shrink:0 }

/* ⚠ EL VISOR VA POR ENCIMA DEL PANEL (.fondo es z-index 80) y del aviso
   (#toast, 90). Si quedara abajo, al tocar una foto desde la ficha se
   abriría detrás de lo que ya está en pantalla: la persona toca, «no pasa
   nada», y en realidad pasó — solo que tapado. Es el error clásico de
   apilado, y por eso hay una prueba que lo abre CON la ficha abierta. */
.visor{ position:fixed; inset:0; z-index:95; display:none;
        align-items:center; justify-content:center; padding:var(--sp-4);
        background:rgba(2,4,9,.93); cursor:zoom-out }
.visor.ver{ display:flex }
/* ⚠ `width`, no solo `max-width`. Un SVG con sus propias medidas (200×150)
   NO se agranda con un max-width: se queda de su tamaño y el «visor» abre
   una imagen igual de chica que la miniatura. Se veía en la captura, y la
   aserción no lo cazaba porque pedía apenas 200 px. */
.visor img{ width:min(90vw,560px); height:auto; max-height:82vh;
            border-radius:var(--r-md); background:var(--navy);
            border:1px solid var(--line-2); padding:var(--sp-4) }
.visor .pie{ position:absolute; left:0; right:0; bottom:22px; text-align:center;
             color:var(--muted); font-size:var(--fs-sm); padding:0 var(--sp-4) }
.visor .pie b{ color:var(--ink) }

/* ⭐ el control de subir foto, debajo de la imagen de la ficha.
   ⚠ El <input type=file> de verdad va ESCONDIDO y el botón es un <label>
   que lo dispara: el input nativo no se puede estilar y en el celular se ve
   como un botón gris de sistema, distinto a todo lo demás. */
/* ⭐ LA COLUMNA DE LA FOTO, EN LA FICHA.
   ⚠⚠ Necesita su propia clase. `.con-mini > div{min-width:0}` —que está ahí
   para que la descripción no se desborde— también le pegaba a esta columna
   y la dejaba colapsar, así que el botón se salía y el texto se partía en
   dos líneas. Una regla puesta para un hijo le pegó al hermano nuevo. */
.col-foto{ position:relative; width:120px; flex-shrink:0 }
.col-foto .foto-ficha{ display:block }
.col-foto input[type=file]{ position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0) }

/* ⚠⚠ SE TOCA LA FOTO, NO UN BOTÓN AL LADO.
   La primera versión ponía un botón «Subir foto» debajo del recuadro. En
   120 px de ancho el texto se parte en dos líneas y queda un botón huérfano
   colgando de la esquina — el usuario lo vio y lo primero que dijo fue
   «mejorá eso». Tenía razón, y el problema no era el tamaño: era el lugar.
   Donde uno espera tocar para cambiar una foto es EN LA FOTO. */
.foto-chip{ position:absolute; right:6px; bottom:6px;
  width:44px; height:44px; border-radius:var(--r-pill); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  border:1px solid var(--line-2); background:rgba(5,8,15,.82); color:var(--ink);
  backdrop-filter:blur(3px);
  transition:transform .12s ease, background .12s ease }
.foto-chip:hover{ background:rgba(18,24,41,.95) }
.foto-chip:active{ transform:scale(.94) }
.foto-chip:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
.foto-chip.borrar{ right:auto; left:6px; font-size:15px }
/* ⚠⚠ LAS BURBUJAS SE ANCLAN A LA FOTO, NO A LA COLUMNA.
   Iban con `bottom:6px` contra `.col-foto`, que además de la foto tiene
   abajo el rótulo «Foto tuya / tapa la del catálogo». Resultado: la ✕ de
   borrar y el 📷 de cambiar quedaban colgando SOBRE ese rótulo, y como el
   rótulo tiene `opacity` (que lo pinta por encima), el toque se lo llevaba
   él: **no se podía borrar la foto propia**. Tocabas la ✕ y no pasaba nada,
   ni siquiera la pregunta. Medido con elementFromPoint en el recorrido total
   del 22/09/2026: en el centro de la ✕ estaba `.foto-marca`.
   Ahora van dentro de `.foto-marco`, que mide exactamente lo que la foto. */
.foto-marco{ position:relative }
.foto-chip{ z-index:1 }
.col-foto[aria-busy=true] .foto-chip{ opacity:.5; pointer-events:none }

/* cuando NO hay foto, el recuadro entero es el botón: es el caso en el que
   más importa que se note que se puede hacer algo */
.foto-vacia{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; width:120px; height:120px; border-radius:var(--r-md); cursor:pointer;
  border:1px dashed var(--line-2); background:var(--navy); color:var(--muted);
  text-align:center; padding:6px; font-size:var(--fs-xs); line-height:1.25;
  transition:border-color .12s ease, background .12s ease }
.foto-vacia:hover{ border-color:var(--gold); background:var(--panel) }
.foto-vacia:active{ transform:scale(.98) }
.foto-vacia:focus-within{ outline:2px solid var(--cyan); outline-offset:2px }
.foto-vacia .camara{ font-size:20px; line-height:1 }
.foto-marca{ font-size:var(--fs-xs); opacity:.75; margin-top:5px; text-align:center;
  line-height:1.3 }

/* el recuadro cuando todavia no hay foto. ⚠ NO se pone una imagen
   generica ni se deja un cuadro roto: se dice qué pasa. */
.sin-foto{ display:flex; align-items:center; justify-content:center; text-align:center;
           color:var(--subtle); font-size:var(--fs-xs); cursor:default;
           border-style:dashed }
.sin-foto small{ opacity:.7 }
.aviso.ok-suave{ background:rgba(52,211,153,.09); border-color:rgba(52,211,153,.30);
                 color:#b9f0d8 }
/* la descripcion se toca para abrir el producto */
td.desc{ cursor:pointer }
tbody tr[data-item]:hover td.desc{ color:#fff }

/* ---------- toast ---------- */
#toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
        background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2);
        border-radius:var(--r-sm); padding:12px 18px; font-size:var(--fs-sm); font-weight:600;
        z-index:90; display:none; max-width:92vw; text-align:center }
#toast.ver{ display:block }
#toast.bien{ border-color:rgba(52,211,153,.5) }
#toast.mal{ border-color:rgba(248,113,113,.5) }


/* ---------- MODO MOSTRADOR · para cuando hay fila ----------
   Todo más grande y menos cosas en pantalla. Se entra y se sale con un
   botón: no hay que aprender nada nuevo. */
.btn-mostrador{ margin-left:var(--sp-2) }
body.mostrador .tabs{ display:none }
body.mostrador .hoja{ border-radius:var(--r-md) }
body.mostrador .sub{ display:none }
body.mostrador .buscar{ font-size:26px; min-height:66px; padding:16px 18px }
body.mostrador h2{ font-size:var(--fs-2xl) }
body.mostrador .men, body.mostrador thead{ display:none }
/* ⚠ con el cliente enfrente no se ve CÓMO se armó el precio («tu ganancia
   de Tecnorep: 80 %…»): es el margen de ella. Ni el costo de la ficha. */
body.mostrador .venta .como, body.mostrador .ficha-costo{ display:none }
body.mostrador td{ padding:16px 12px; font-size:var(--fs-lg) }
body.mostrador .cod{ font-size:var(--fs-sm) }
/* ⚠ sin encabezado, un número suelto al lado de un precio se lee como
   plata. La palabra vuelve justo donde el encabezado ya no está. */
body.mostrador .stock::before{ content:'stock: '; color:var(--subtle); font-size:var(--fs-sm) }

/* el precio de venta, que es lo que dice en voz alta */
.venta{ font-family:'Poppins',sans-serif; font-weight:800; font-size:var(--fs-2xl);
        color:var(--gold); white-space:nowrap; line-height:1.1 }
/* ⚠ El renglón de abajo SÍ envuelve, el precio no. `.venta` lleva
   `white-space:nowrap` para que el número no se parta nunca, y `.como` lo
   heredaba: «costo + 45 % (el general)» se comía las últimas letras en
   cuanto la columna se achicaba. Un número no se parte; una aclaración
   sí. */
.venta .como{ display:block; font-family:'Inter',sans-serif; font-weight:500;
              font-size:var(--fs-xs); color:var(--subtle); letter-spacing:0;
              white-space:normal }
.venta.falta{ color:var(--subtle); font-size:var(--fs-md); font-weight:600 }
body.mostrador .venta{ font-size:40px }
/* =====================================================================
 * ⚠⚠ EL MOSTRADOR NECESITA SUS PROPIOS ANCHOS DE COLUMNA
 *
 * Hereda los repartos de la pantalla normal, pero acá la letra es mucho
 * más grande y el padding el doble: con los mismos porcentajes, en la
 * captura se veía «stock: sin stoc / k» —la palabra partida al medio— y
 * el chip de «Mi producto» quedaba debajo de los botones, ilegible.
 *
 * ⚠ Nada de esto lo cazó el barrido automático: no había desborde ni
 *   texto «cortado» según el navegador, porque partir una palabra es un
 *   salto de línea perfectamente válido. Lo vi mirando la captura.
 *
 * «Mi producto» se esconde: con un cliente enfrente no se decide nada con
 * eso, y está en la ficha. El stock, en cambio, se queda y con aire.
 * ===================================================================== */
body.mostrador .c-prod{ display:none }
body.mostrador .c-prov{ width:12% }
body.mostrador .c-cod{ width:10% }
body.mostrador th:nth-child(4){ width:22% }
/* ⚠ 12 % no alcanzaba: el renglón dice «stock: sin stock» —la etiqueta la
   agrega un ::before— y en cuerpo grande eso mide ~150 px. Con 12 % se
   metía abajo de los botones y se leía «stock: sin stoc». Medido: 16 %. */
body.mostrador .c-stock{ width:16% }
body.mostrador thead th:last-child{ width:19% }
/* ⚠ y el stock NO se parte: es una palabra corta, si no entra es que la
   columna está mal, no que haya que romperla */
body.mostrador .stock{ overflow-wrap:normal }
/* ⚠ El aviso NO crece con el precio. En modo mostrador «vinculalo primero»
   salía en 40 px, del mismo tamaño que un número de plata, y competía con
   lo único que ahí importa. Un aviso es un aviso. */
body.mostrador .venta.falta{ font-size:var(--fs-md); font-weight:600 }
/* los botones de la fila, en una sola línea: con fila de gente no hay
   tiempo de buscar cuál es cuál entre tres renglones */
body.mostrador .acc-fila{ flex-wrap:nowrap }
/* ⚠ …PERO NO EN PANTALLA CHICA. El `nowrap` de arriba está para que en el
   mostrador los tres botones queden en una línea y no haya que buscarlos;
   en 700 px o menos eso los aprieta hasta que «No lo tengo» y «Vincular»
   se cortan adentro de su propio botón. Medido en modo mostrador a 700,
   560 y 390. Un botón con el texto cortado no se toca: no se entiende. */
@media (max-width:760px){ body.mostrador .acc-fila{ flex-wrap:wrap } }
body.mostrador .acc-fila .btn{ min-height:44px; font-size:var(--fs-sm) }

/* ---------- calculadora ---------- */
.calc-pantalla{ width:100%; background:var(--navy); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:14px;
  font-family:ui-monospace,Consolas,monospace; font-size:26px; text-align:right;
  margin-top:var(--sp-3); min-height:58px }
.calc-res{ text-align:right; font-family:'Poppins',sans-serif; font-weight:800;
  font-size:var(--fs-2xl); color:var(--gold); margin-top:var(--sp-2); min-height:34px }
.calc-res.malo{ color:var(--bad); font-size:var(--fs-md) }
.calc-pad{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
           margin-top:var(--sp-3) }
.calc-t{ min-height:54px; font-size:var(--fs-xl); font-weight:700 }

/* ---------- elegir cómo se calcula el precio ---------- */
.opciones{ display:grid; gap:var(--sp-2); margin-top:var(--sp-4) }
.op{ display:block; cursor:pointer; background:var(--panel-2); border:1px solid var(--line);
     border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); min-height:56px }
.op.on{ border-color:var(--gold); background:rgba(230,207,139,.07) }
.op input{ margin-right:var(--sp-2); accent-color:var(--gold) }
.op b{ font-size:var(--fs-md) }
.op span{ display:block; color:var(--subtle); font-size:var(--fs-xs); margin-top:2px }
.con-boton{ display:flex; gap:var(--sp-2) }
.con-boton input{ flex:1; min-width:0 }
.previo{ margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); background:var(--navy);
         border:1px solid var(--line); border-radius:var(--r-sm);
         font-size:var(--fs-sm); color:var(--muted); display:flex;
         align-items:baseline; justify-content:space-between; gap:var(--sp-3) }
.previo b{ font-family:'Poppins',sans-serif; font-weight:800; font-size:var(--fs-2xl);
           color:var(--gold) }
/* ⚠ La etiqueta va en su propia línea. Como `.previo` es flex con
   `align-items:baseline`, el rótulo y el número quedaban en el mismo
   renglón y el número —que es el doble de grande— se comía el final del
   rótulo: se leía «Te cuesta (sin IVA» sin cerrar el paréntesis. */
.previo .men{ display:block }
.previo b{ display:block; line-height:1.15 }

/* ---------- la lista para pedir ---------- */
.grupo{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md);
        padding:var(--sp-4); margin-bottom:var(--sp-3) }
.grupo-top{ display:flex; align-items:baseline; justify-content:space-between;
            gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap }
.grupo-total{ font-family:'Poppins',sans-serif; font-weight:800; font-size:var(--fs-xl);
              color:var(--gold); font-variant-numeric:tabular-nums }
.grupo-pie{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-3);
            flex-wrap:wrap }
.mejor-prov{ color:#fde9b0; font-size:var(--fs-xs); font-weight:600 }
.copiable{ width:100%; margin-top:var(--sp-3); background:var(--navy); color:var(--ink);
           border:1px solid var(--line-2); border-radius:var(--r-sm); padding:var(--sp-3);
           font-family:ui-monospace,Consolas,monospace; font-size:var(--fs-sm) }

/* los botones de cada fila, que no se amontonen */
.acc-fila{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }

/* ⚠ EN EL CELULAR LA TABLA NECESITA MENOS CUERPO Y MENOS AIRE.
   Las pantallas que no son el buscador —Para revisar, Mis productos,
   Proveedores— no esconden columnas, así que en 390 px los números y los
   nombres de proveedor se cortaban. Bajar el cuerpo y el padding da el
   espacio sin sacar ninguna columna, que es mejor: en esas pantallas se
   compara, y esconder una columna es esconder un dato de la comparación. */
@media (max-width:620px){
  table{ font-size:var(--fs-xs) }
  th,td{ padding:6px 7px }
  /* los botones de acción pueden envolver su texto antes que cortarse */
  .btn.chico{ white-space:normal }
  /* ⚠ LA RED DE SEGURIDAD DEL CELULAR.
     Con cinco columnas en 390 px cada una mide ~65 px, y ahí no entra una
     palabra sola: «ARGENTINA», «Proveedor», «Productos». Una palabra no
     se puede envolver salvo que se le permita partirse.
     Partir una palabra es feo; cortarla es peor —y encima no se ve que
     está cortada—. En el celular gana lo legible. */
  th,td{ overflow-wrap:anywhere }
  /* y los números dejan de ser intocables acá: «$ 1.008.225» partido en
     dos renglones se lee; cortado, miente */
  td.num, th.num{ white-space:normal }
}
@media (max-width:700px){
  .wrap{ padding:var(--sp-3) } th,td{ padding:8px 10px }
  /* ⚠ EN EL CELULAR, EL PRECIO NO PUEDE QUEDAR FUERA DE PANTALLA.
     La tabla entraba en su scroll horizontal —así que «no desborda» daba
     verde— pero «Lo vendés a», que es la única columna que se mira con un
     cliente enfrente, quedaba a la derecha y había que arrastrar para
     verla. Se esconden las tres columnas de apoyo; el costo y el vínculo
     se ven igual entrando a la ficha. */
  /* ⚠ En 390 px NO entran ocho columnas. Quedan las tres que se usan con
     un cliente enfrente —qué es, a cuánto lo vendés, y qué hago— y el
     resto (proveedor, código, costo, stock, vínculo) baja a la línea
     chica de la descripción o se ve entrando a la ficha.
     ⚠ Con solo tres escondidas el precio ENTRABA pero quedaba pegado al
     borde y se comía el final: «(el general» sin cerrar el paréntesis. */
  .c-cuesta, .c-stock, .c-prod, .c-cod, .c-prov{ display:none }
  .solo-cel{ display:inline }
  .desc{ min-width:0 }
  .venta{ font-size:var(--fs-xl) }
  /* y aire contra el borde, que es lo que evita que se coma un carácter */
  td.num, th.num{ padding-right:14px }
  /* ⚠ `table-layout:fixed` + `width:100%`: sin esto la tabla se ensancha
     hasta donde le pida el contenido y se sale por la derecha, y lo que
     queda afuera es la última columna — los botones. Esconder columnas no
     alcanzaba: movía el recorte del precio a los botones. Con el ancho
     fijo, las tres columnas se reparten la pantalla y el texto envuelve
     en vez de empujar. */
  .scroll table{ table-layout:fixed; width:100% }
  .acc-fila{ justify-content:flex-start; gap:4px }
  /* ⚠ con tres columnas a la vista, la de los botones necesita su parte:
     sin esto «No lo tengo» y «Vincular» quedaban cortados dentro de su
     propio botón. Medido a 700, 560 y 390 px. */
  th:nth-child(4){ width:30% }
  thead th:last-child{ width:34% }
  /* ⚠⚠ ACÁ DECÍA `min-height:40px` Y DESHACÍA EN SILENCIO LA REGLA DE
     ARRIBA. Más arriba hay un `@media (pointer:coarse){ .btn.chico{
     min-height:44px } }` puesto a propósito para el dedo; este bloque va
     DESPUÉS y tiene la misma especificidad, así que ganaba y los botones
     que más se tocan —Vincular · Anotar · No lo tengo— quedaban en 40 px
     justo en la pantalla chica, que es donde hacía falta el tamaño.
     Nadie lo ve leyendo: las dos reglas están bien escritas, y separadas
     por 200 líneas. Lo cazó medir el alto real con el táctil emulado. */
  /* ⚠ Y acá va TAMBIÉN el ancho, por lo mismo que el alto: este bloque
     viene después y con la misma especificidad, así que si no lo repite,
     lo pisa. Ya pasó una vez con `min-height`. */
  .btn.chico{ font-size:11px; padding:8px 8px; min-height:44px; min-width:44px }
  .vivo{ min-height:44px }
  /* ⚠ Con el ancho de columna fijo, `white-space:nowrap` ya no achica el
     texto: lo desborda, y el renglón de al lado se lo tapa. Se veía
     «vinculalo prime» y «costo + 45 % (el gene». En pantalla ancha el
     nowrap está bien (mantiene el precio en una línea); acá tiene que
     poder envolver. */
  .venta, .venta .como, .cod, .chip{ white-space:normal }
  td.num{ word-break:break-word }
  /* ⚠ La miniatura ARRIBA del texto, no al lado. Con tres columnas en
     390 px, la de la descripción mide ~110 px: una foto de 46 px al
     costado le deja 50 px al texto y «Distribuidora Sur» se desbordaba
     25 px por la derecha. Apilada, el texto se queda con los 110 px
     enteros y entra. (Medido por la prueba de recortes, no a ojo.) */
  .con-mini{ flex-direction:column; align-items:flex-start; gap:var(--sp-2) }
  .mini{ width:38px; height:38px }
}
/* =====================================================================
 * LA PUERTA · el login
 * z-index 100, arriba de todo (panel 80 · toast 90 · visor 95): mientras
 * no haya sesión no se puede tocar NADA de lo que hay atrás.
 * ===================================================================== */
.puerta{ position:fixed; inset:0; z-index:100; display:none;
         align-items:center; justify-content:center; padding:var(--sp-4);
         background:var(--navy);
         background-image:radial-gradient(760px 420px at 78% -10%, rgba(95,200,232,.10), transparent 62%),
                          radial-gradient(640px 380px at 8% 4%, rgba(230,207,139,.09), transparent 60%) }
.puerta.ver{ display:flex }
.puerta .caja{ width:100%; max-width:380px; background:var(--panel);
               border:1px solid var(--line-2); border-radius:var(--r-md); padding:var(--sp-5) }
.puerta .marca-p{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5) }
.puerta .marca-p svg{ width:38px; height:38px; flex-shrink:0 }
.puerta h2{ font-size:var(--fs-xl) }
.puerta .sub{ margin-bottom:var(--sp-4) }
.puerta .btn{ width:100%; margin-top:var(--sp-5); min-height:48px; font-size:var(--fs-md) }
.puerta .mal{ display:none; margin-top:var(--sp-4); padding:10px 12px; border-radius:var(--r-sm);
              font-size:var(--fs-sm); background:rgba(248,113,113,.10);
              border:1px solid rgba(248,113,113,.38); color:#ffc9c9 }
.puerta .mal.ver{ display:block }
.puerta .pie{ margin-top:var(--sp-5); font-size:var(--fs-xs); color:var(--subtle); text-align:center }
/* mientras no eligió su contraseña, el encabezado no ofrece nada más que salir */
body.sin-clave-propia #btn-clave,
body.sin-clave-propia #btn-mostrador,
body.sin-clave-propia #origen,
body.sin-clave-propia #vivo{ display:none }
/* el nombre de quien está adentro, arriba a la derecha */
.quien{ display:none; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); color:var(--muted) }
.quien.ver{ display:flex }
.quien b{ color:var(--ink); font-weight:600 }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }
/* =====================================================================
 * ⭐ EN CELULAR, LAS TABLAS DE 5 Y 7 COLUMNAS PASAN A SER TARJETAS
 *
 * «Mis productos» y «Proveedores» tienen los anchos de columna repartidos
 * a mano, y a 390 px no hay reparto que alcance: el título «PROVEEDORES»
 * quedaba escrito en vertical, letra por letra, y la marca se cortaba en
 * dos («INDUM AG»). Ninguna medición de «texto que se sale» lo veía,
 * porque el texto NO se salía: se apilaba. Lo encontró el recorrido total
 * del 22/09/2026 mirando las capturas.
 *
 * Debajo de 620 px cada fila es una tarjeta: el nombre como título y cada
 * dato con su rótulo arriba. Los rótulos van acá en el CSS, uno por
 * columna, así no hay que tocar cómo se arma la tabla en JavaScript.
 * ⚠ Van AL FINAL de la hoja a propósito: tienen que ganarle a los anchos
 *   en porcentaje de más arriba, y en este archivo el orden ya mordió.
 * ===================================================================== */
@media (max-width:620px){
  .t-prod, .t-prod tbody, .t-prod tr, .t-prod td,
  .t-prov, .t-prov tbody, .t-prov tr, .t-prov td{ display:block; width:auto !important }
  .t-prod thead, .t-prov thead{ display:none }
  .t-prod tr, .t-prov tr{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line) }
  .t-prod tbody tr:last-child, .t-prov tbody tr:last-child{ border-bottom:none }
  .t-prod td, .t-prov td{ border:none; padding:5px 0; text-align:left }
  .t-prod td::before, .t-prov td::before{ display:block; margin-bottom:2px;
    font-family:'Rajdhani',sans-serif; font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--subtle) }
  /* la primera celda es el título de la tarjeta: sin rótulo */
  .t-prod td:nth-child(1), .t-prov td:nth-child(1){ font-size:var(--fs-lg); padding-bottom:var(--sp-2) }
  .t-prod td:nth-child(2)::before{ content:'Marca' }
  .t-prod td:nth-child(3)::before{ content:'Código de fabricante (OEM)' }
  .t-prod td:nth-child(4)::before{ content:'Proveedores' }
  .t-prod td:nth-child(5){ padding-top:var(--sp-2) }
  .t-prov .p-modo{ display:none }
  .t-prov td:nth-child(3)::before{ content:'Productos' }
  .t-prov td:nth-child(4)::before{ content:'Qué precio trae' }
  .t-prov td:nth-child(5)::before{ content:'Tu descuento' }
  .t-prov td:nth-child(6)::before{ content:'Última actualización' }
  .t-prov td:nth-child(7)::before{ content:'Estado' }
  .t-prov td br{ display:none }
  .t-prov td:nth-child(1) .men{ display:block; font-size:var(--fs-sm) }
  /* «Qué cambió»: la misma tarjeta. Con la pantalla VACÍA (la copia de
     prueba no tenía cambios) esto no se veía; al sembrar un cambio de precio
     el título «PRODUCTO» salió en vertical, igual que las otras dos. */
  .t-camb, .t-camb tbody, .t-camb tr, .t-camb td{ display:block; width:auto !important }
  .t-camb thead{ display:none }
  .t-camb tr{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line) }
  .t-camb tbody tr:last-child{ border-bottom:none }
  .t-camb td{ border:none; padding:4px 0; text-align:left }
  .t-camb td::before{ display:block; margin-bottom:2px;
    font-family:'Rajdhani',sans-serif; font-size:var(--fs-xs); font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--subtle) }
  .t-camb td:nth-child(1){ font-size:var(--fs-lg); padding-bottom:var(--sp-2) }
  .t-camb td:nth-child(2)::before{ content:'Proveedor' }
  .t-camb td:nth-child(3)::before{ content:'Antes' }
  .t-camb td:nth-child(4)::before{ content:'Ahora' }
  .t-camb td:nth-child(5)::before{ content:'Cambio' }
}
/* las filas de «Qué cambió» abren la ficha: que se note que se pueden tocar */
tr[data-cambio]{ cursor:pointer }
tr[data-cambio]:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px }
/* =====================================================================
 * CONTROL DE STOCK · la pantalla
 * Mismos tokens que el resto de la app: el módulo vino de otra app, pero
 * tiene que verse como uno más de acá, no como algo pegado.
 * ===================================================================== */
.st-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4) }
.st-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:2px }
.st-kpi b{ font-size:var(--fs-2xl); color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.1 }
.st-kpi span{ font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--subtle) }
.st-kpi.mal b{ color:var(--bad) }
.st-kpi.ok b{ color:var(--ok) }

.st-barra{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-4) }
.st-vistas{ display:flex; gap:var(--sp-1); flex-wrap:wrap }
.btn.st-btn-ingresar{ background:var(--ok); border-color:var(--ok); color:#052e1c; font-weight:700;
  margin-right:var(--sp-3) }
.btn.st-btn-ingresar:hover{ filter:brightness(1.08); border-color:var(--ok) }
.st-cuenta{ margin-left:4px; font-weight:700; color:var(--subtle) }
.btn.on .st-cuenta{ color:inherit }
.st-filtro{ margin:0 0 var(--sp-3); color:var(--muted); font-size:var(--fs-sm) }

.t-stock .st-cod{ font-weight:700; color:var(--gold); letter-spacing:.02em; white-space:nowrap }
.t-stock .st-marca{ color:var(--muted); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.st-ubi{ display:inline-block; padding:2px 9px; border-radius:var(--r-pill);
  border:1px solid rgba(95,200,232,.3); background:rgba(95,200,232,.08); color:var(--cyan);
  font-weight:700; font-size:var(--fs-sm); letter-spacing:.04em; white-space:nowrap }
.t-stock tbody tr{ cursor:pointer }
.st-cant{ white-space:nowrap }
.st-cant b{ display:inline-block; min-width:36px; text-align:center; font-size:var(--fs-lg);
  font-variant-numeric:tabular-nums }
.st-mini{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); cursor:pointer; font-size:15px; line-height:1;
  vertical-align:middle; transition:background var(--ease), border-color var(--ease) }
.st-mini:hover:not(:disabled){ background:rgba(255,255,255,.07); border-color:var(--gold-2) }
.st-mini:disabled{ opacity:.3; cursor:default }
.st-pag{ display:flex; gap:var(--sp-3); align-items:center; justify-content:center; margin-top:var(--sp-4) }

/* La grilla de posiciones: auto-fill, así a medida que se numeran lugares se
   reacomoda sola y llena los renglones sin tocar nada. */
.st-grilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-3) }
.st-tarjeta{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; transition:border-color var(--ease) }
.st-tarjeta:hover{ border-color:rgba(95,200,232,.4) }
.st-tarjeta header{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); background:rgba(95,200,232,.07); border-bottom:1px solid var(--line) }
.st-ubi-g{ font-size:var(--fs-lg); color:var(--cyan); letter-spacing:.05em }
.st-tarjeta ul{ list-style:none; margin:0; padding:var(--sp-2) 0; flex:1 }
.st-tarjeta li{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-2); align-items:baseline;
  padding:4px var(--sp-4); font-size:var(--fs-sm) }
.st-tarjeta .st-cod{ font-weight:700; color:var(--gold) }
.st-tarjeta .st-desc{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.st-tarjeta li b{ font-variant-numeric:tabular-nums }
/* lo que está en el mínimo o abajo se ve en rojo: es la pregunta que uno se
   hace parado frente al cajón */
.st-tarjeta li.flojo b{ color:var(--bad) }
.st-tarjeta .st-resto{ display:block; color:var(--subtle); font-style:italic }
.st-ver{ border:0; border-top:1px solid var(--line); background:transparent; padding:var(--sp-3);
  color:var(--muted); font:inherit; font-weight:600; cursor:pointer; width:100% }
.st-ver:hover{ background:rgba(230,207,139,.08); color:var(--gold) }

/* la ficha y el conteo, dentro del modal de la app */
.st-ficha-cant{ display:flex; gap:var(--sp-2); align-items:center; margin:var(--sp-3) 0 var(--sp-4) }
.st-ficha-cant input{ width:90px; text-align:center; font-size:var(--fs-xl); font-weight:700 }
.st-h4{ font-size:var(--fs-sm); color:var(--muted); margin:var(--sp-4) 0 var(--sp-2) }
.st-hist{ list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:300px; overflow:auto }
.st-hist li{ display:grid; grid-template-columns:48px 1fr auto; gap:var(--sp-2); align-items:baseline;
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm) }
.st-delta{ font-weight:700; font-variant-numeric:tabular-nums }
.st-delta.mas{ color:var(--ok) }
.st-delta.menos{ color:var(--bad) }
.st-acc{ display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; margin-top:var(--sp-4) }
.st-sug{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--sp-2) }
.st-res{ list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:320px; overflow:auto }
.st-res button{ width:100%; text-align:left; padding:9px 11px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font:inherit; cursor:pointer }
.st-res button:hover{ border-color:var(--gold-2) }

/* La lista pasa a tarjetas debajo de 960 px, no de 760 como el resto: con
   seis columnas, entre 760 y 960 la descripción quedaba en 26 px. */
@media (max-width:960px){
  /* ⚠ En el celular la tabla se aplastaba: las columnas que no pueden
     partirse (posición, cantidad con sus botones) se quedaban con el ancho y
     las de texto quedaban de una letra, con el encabezado cortado «CÓ/DI/GO».
     Y el celular es justo donde se cuenta. Cada renglón pasa a ser una
     tarjeta: arriba el código, abajo la pieza, a la derecha la cantidad. */
  .t-stock thead{ display:none }
  .t-stock, .t-stock tbody{ display:block; width:100% }
  .t-stock tbody tr{ display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"foto cod cant" "foto desc cant" "foto marca ubi";
    gap:4px var(--sp-3); padding:var(--sp-3); border-bottom:1px solid var(--line) }
  .t-stock tbody tr:last-child{ border-bottom:0 }
  .t-stock td{ display:block; padding:0; border:0 }
  .t-stock td:nth-child(1){ grid-area:foto; align-self:start; width:auto }
  .t-stock td:nth-child(2){ grid-area:cod }
  .t-stock td:nth-child(3){ grid-area:desc; min-width:0 }
  .t-stock td:nth-child(4){ grid-area:marca; min-width:0; max-width:none }
  .t-stock td:nth-child(5){ grid-area:ubi; justify-self:end }
  .t-stock td:nth-child(6){ grid-area:cant; align-self:center; text-align:right }
  /* en el celular el aviso va en su renglón, arriba del número, como estaba */
  /* ⚠ con .t-stock adelante: la regla general de .st-cant-in está más abajo
     en la hoja y, con la misma especificidad, le ganaba a ésta */
  .t-stock .st-cant-in{ display:grid; grid-template-columns:auto auto auto; align-items:center; gap:6px }
  .t-stock .st-cant-in .st-aviso{ grid-column:1 / -1; justify-self:end; margin:0 }
}

@media (max-width:760px){
  .st-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .st-vistas{ width:100% }
  .st-vistas .btn{ flex:1 1 calc(33% - 4px) }
  .btn.st-btn-ingresar{ width:100%; margin-right:0; min-height:48px }

}

/* =====================================================================
 * CONTROL DE STOCK · Contar a pantalla completa
 * Es la misma pantalla que tenía la app de stock, con los tokens de acá:
 * pensada para usar de pie en el depósito, con una mano y el celular.
 * ===================================================================== */

.stc {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(230, 207, 139, .08), transparent 60%),
    var(--navy);
}

.stc-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 15, .86);
}
.stc-ubi { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stc-ubi label {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--subtle); font-weight: 600;
}
.stc-ubi input {
  width: 100%; background: none; border: 0; outline: none; padding: 0;
  font-family: 'Rajdhani',sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: 1px; color: var(--cyan);
}
.stc-ubi input::placeholder { color: rgba(95, 200, 232, .35); }

.stc-marcador { text-align: right; line-height: 1.1; }
.stc-marcador b {
  display: block; font-family: 'Rajdhani',sans-serif; font-size: 24px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stc-marcador small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--subtle); }

.stc-cuerpo {
  flex: 1; overflow: auto;
  padding: 24px 16px;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; width: 100%; margin: 0 auto;
}

.stc-rotulo {
  display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--subtle); font-weight: 600; margin: 0 0 8px;
}

.stc-grande {
  width: 100%; background: var(--panel); border: 1px solid rgba(230,207,139,.35);
  border-radius: var(--r-md); outline: none; padding: 16px 18px;
  font-family: 'Rajdhani',sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 1px;
  text-align: center;
}
.stc-grande:focus { box-shadow: 0 0 0 4px rgba(230,207,139,.10); }
.stc-grande::placeholder { font-size: 20px; letter-spacing: 0; color: var(--subtle); }
.stc-grande::-webkit-outer-spin-button,
.stc-grande::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stc-grande[type=number] { -moz-appearance: textfield; }

.stc-ayuda { text-align: center; font-size: 12px; color: var(--subtle); margin: 10px 0 0; }

.stc-ficha {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px;
}
.stc-ficha img {
  width: 64px; height: 64px; object-fit: contain; flex: none;
  background: rgba(255, 255, 255, .05); border-radius: var(--r-sm);
}
.stc-cod {
  display: block; font-family: 'Rajdhani',sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: .6px; color: var(--gold);
}
.stc-desc { display: block; font-size: 13px; margin-top: 2px; }
.stc-meta { display: block; font-size: 11px; color: var(--subtle); margin-top: 3px; }

.stc-numero { display: flex; align-items: center; gap: 10px; }
.stc-numero .stc-nb { width: 60px; height: 64px; font-size: 26px; flex: none; }

.stc-acc { display: flex; gap: 10px; margin-top: 20px; }
.stc-acc .btn { flex: 1; padding: 15px 16px; font-size: 14px; }

.stc-opciones { display: grid; gap: 10px; }
.stc-opciones button {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px; cursor: pointer; color: var(--ink);
  transition: border-color var(--ease), background var(--ease);
}
.stc-opciones button:hover { border-color: rgba(230,207,139,.35); background: rgba(230,207,139,.10); }
.stc-opciones img { width: 46px; height: 46px; object-fit: contain; border-radius: var(--r-sm); flex: none; }
.stc-opciones b { display: block; font-size: 14px; }
.stc-opciones small { display: block; font-size: 12px; color: var(--subtle); margin-top: 2px; }

/* lo que hay en la posición */
.stc-adentro { margin-bottom: 22px; }
.stc-adentro[hidden] { display: none; }
.stc-adentro .stc-opciones { max-height: 46vh; overflow: auto; padding-right: 2px; }
.stc-que { min-width: 0; flex: 1; }
.stc-sinfoto { width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); background: rgba(255,255,255,.05); }
.stc-hay { margin-left: auto; flex: none; white-space: nowrap; font-size: 13px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.stc-opciones button.hecho { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06); }
.stc-opciones button.hecho .stc-hay { color: var(--ok); }
/* ⚠ con la lista larga, centrado a secas corta lo de arriba y no deja
   subir: «safe» centra sólo cuando entra */
.stc-cuerpo { justify-content: safe center; }

.stc-aviso {
  margin: 0 0 16px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 12px;
  background: rgba(95, 200, 232, .08); border: 1px solid rgba(95, 200, 232, .28); color: var(--cyan);
}
.stc-error {
  margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-sm); font-size: 13px; text-align: center;
  background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .3); color: #fca5a5;
}

.stc-ultimos {
  list-style: none; margin: 0; padding: 10px 16px 18px;
  border-top: 1px solid var(--line); display: grid; gap: 6px;
  max-height: 32vh; overflow: auto;
}
.stc-ultimos li {
  display: flex; align-items: baseline; gap: 10px; font-size: 12px;
  color: var(--muted); padding: 7px 10px;
  background: rgba(255, 255, 255, .03); border-radius: var(--r-sm);
}
.stc-ultimos b { font-family: 'Rajdhani',sans-serif; font-size: 14px; color: var(--gold); }
.stc-ultimos span { margin-left: auto; font-family: 'Rajdhani',sans-serif; font-size: 15px; color: var(--ok); }

/* La posición pasa a ser el primer paso del conteo, no un campo escondido
   arriba: si no está puesta, no hay dónde guardar lo que se cuenta. */
.stc-ubi {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  border-radius: var(--r-sm);
}
.stc-ubi span {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--subtle); font-weight: 600;
}
.stc-ubi b {
  font-family: 'Rajdhani',sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: 1px; color: var(--cyan);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stc-ubi:hover b { text-decoration: underline; }

.stc-recientes { margin-top: 22px; }
.stc-recientes > .stc-rotulo { margin-bottom: 8px; }
#stc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#stc-chips button {
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(95, 200, 232, .3); background: rgba(95, 200, 232, .08);
  color: var(--cyan); font-family: 'Rajdhani',sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .8px; cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
#stc-chips button:hover { background: rgba(95, 200, 232, .18); border-color: var(--cyan); }


.stc[hidden]{ display:none }
.stc{ z-index:300 }
body.stc-abierto{ overflow:hidden }
.stc-x{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:transparent;
  color:var(--ink); font-size:22px; line-height:1; cursor:pointer; flex:none }
.stc-x:hover{ border-color:var(--gold) }
.stc-grande{ color:var(--ink) }
.stc-nb{ border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--panel-2);
  color:var(--ink); cursor:pointer }
.stc-nb:hover{ border-color:var(--gold) }
.stc-acc .btn{ justify-content:center }

/* Ingresar mercadería */
.sti-elegido{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-2) 0 var(--sp-3);
  padding:var(--sp-3); border:1px solid rgba(230,207,139,.35); border-radius:var(--r-md); background:rgba(230,207,139,.06) }
.sti-elegido > div{ flex:1; min-width:0 }
.sti-campos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3) }
.sti-campos .campo{ margin-top:0 }
.st-res li button{ display:flex; align-items:center; gap:var(--sp-2) }
.st-res li button img, .sti-sinfoto{ width:36px; height:36px; object-fit:contain; flex:none;
  border-radius:var(--r-sm); background:var(--navy); border:1px solid var(--line) }
.st-err{ margin:var(--sp-3) 0 0; padding:10px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm);
  background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.3); color:#fca5a5 }
.st-err[hidden], .stc-aviso[hidden]{ display:none }

/* Importar y bajar el Excel */
.modal.st-ancho{ max-width:1000px }
.st-soltar{ display:grid; justify-items:center; gap:8px; text-align:center; padding:var(--sp-5) var(--sp-4);
  margin-top:var(--sp-3); border:1.5px dashed var(--line-2); border-radius:var(--r-md); background:var(--panel-2);
  color:var(--muted); cursor:pointer; transition:border-color var(--ease) }
.st-soltar:hover, .st-soltar:focus-visible, .st-soltar.encima{ border-color:var(--gold); color:var(--ink); outline:none }
.st-soltar b{ color:var(--ink) }
.st-soltar small{ color:var(--subtle); font-size:var(--fs-xs) }
.st-soltar[hidden], .st-imp-ayuda[hidden]{ display:none }
.st-imp-ayuda{ margin-top:var(--sp-2) }
.st-imp-arch{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; justify-content:space-between;
  margin:var(--sp-3) 0; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2) }
.st-modos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); border:0; margin:var(--sp-3) 0 var(--sp-1); padding:0; min-width:0 }
.st-modos legend{ font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:var(--fs-xs); color:var(--subtle); margin-bottom:6px; padding:0 }
.st-modos label{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer }
.st-modos label:has(input:checked){ border-color:var(--gold); background:rgba(230,207,139,.07) }
.st-modos input{ margin-top:3px; accent-color:var(--gold) }
.st-modos small{ display:block; color:var(--subtle); font-size:var(--fs-xs); margin-top:2px }
.campo select{ min-height:44px }
.st-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--sp-4) 0 var(--sp-2) }
.st-chip{ font:inherit; font-size:var(--fs-xs); padding:6px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted) }
.st-chip b{ color:var(--ink); margin-left:4px }
.st-chip.ok{ border-color:rgba(74,222,128,.35) }
.st-chip.warn{ border-color:rgba(251,191,36,.45) }
.st-chip.mal{ border-color:rgba(248,113,113,.45) }
.st-chip.on{ background:rgba(230,207,139,.14); border-color:var(--gold); color:var(--ink) }
.st-imp-lista{ max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm) }
.t-imp{ width:100%; border-collapse:collapse; font-size:var(--fs-sm) }
.t-imp th{ position:sticky; top:0; z-index:1; background:var(--panel); text-align:left; font-weight:600;
  font-size:var(--fs-xs); color:var(--subtle); padding:8px 10px; border-bottom:1px solid var(--line) }
.t-imp th.num{ text-align:right }
.t-imp td{ padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle }
.t-imp td:nth-child(3){ width:130px } .t-imp td:nth-child(4){ width:90px } .t-imp td:nth-child(5){ width:120px }
.t-imp .t-imp-foto{ width:56px; padding-right:0 }
.t-imp input, .t-imp select{ width:100%; min-height:36px; background:var(--navy); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:6px 8px; font:inherit; font-size:var(--fs-sm) }
.t-imp td:nth-child(4) input{ text-align:right }
.t-imp-art{ margin-top:2px; min-width:0 }
.t-imp-pdf{ margin-top:3px; font-style:italic }
.t-imp-queda{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.st-imp-mal{ color:#fca5a5 }
tr.imp-noesta td{ background:rgba(248,113,113,.05) }
tr.imp-varios td, tr.imp-sinpos td, tr.imp-sincant td{ background:rgba(251,191,36,.05) }
tr.imp-sinpos input[data-imp-pos], tr.imp-sincant input[data-imp-cant], tr.imp-varios select{ border-color:rgba(251,191,36,.7) }
.st-imp-mas{ padding:8px 10px }
.st-imp-afuera{ margin-right:auto; align-self:center }
.st-prog{ height:6px; margin-top:var(--sp-3); background:var(--line); border-radius:3px; overflow:hidden }
.st-prog[hidden]{ display:none }
.st-prog div{ height:100%; width:0; background:var(--gold); transition:width .25s }
.st-imp-listo{ margin-top:var(--sp-3) }
@media (max-width:700px){
  .st-modos{ grid-template-columns:1fr }
  .t-imp .t-imp-foto{ display:none }
  .t-imp td:nth-child(3){ width:96px } .t-imp td:nth-child(4){ width:70px } .t-imp td:nth-child(5){ width:auto }
  .t-imp th:first-child{ display:none }
}

/* la foto en la lista y en la ficha */
/* ⚠ La foto va en una columna del ancho justo de la miniatura. Con width:1%
   se achicaba a 13 px y las fotos se montaban sobre el código, porque la app
   pone max-width:100% a las imágenes y eso las deja encogerse con la celda. */
/* ⚠⚠ La app pone `table-layout:fixed` a toda tabla dentro de .scroll: las
   columnas NO crecen con lo que tienen adentro, se reparten según el ancho
   del encabezado. Sin anchos, quedaban todas iguales y la de cantidad —con
   «repone», los dos botones y el número— no entraba: el + se salía de la
   caja. Así que cada columna dice cuánto necesita y la descripción se queda
   con el resto. */
/* En porcentajes, salvo la foto y la cantidad, que miden lo mismo siempre:
   con anchos fijos en píxeles, a 1024 la descripción quedaba en 25 px. */
.t-stock th:nth-child(1){ width:56px }
.t-stock th:nth-child(2){ width:13% }
.t-stock th:nth-child(4){ width:15% }
.t-stock th:nth-child(5){ width:12% }
/* border-box: el ancho incluye los 12+12 de relleno. El contenido («repone»,
   −, número, +) mide 172. */
.t-stock th:nth-child(6){ width:204px }
.t-stock td.st-foto{ padding-right:0 }
.t-stock td.st-foto .mini{ max-width:none }
.st-aviso{ margin-right:var(--sp-1); flex-shrink:0; white-space:nowrap }
/* ⚠ El aviso, los dos botones y el número van en UN bloque inline-flex. Sueltos
   dentro de la celda, la tabla no medía bien el renglón que tenía «repone» y
   el + quedaba afuera de la caja, con barra horizontal. */
.st-cant-in{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.st-f-foto{ float:right; width:84px; height:84px; object-fit:contain; margin:0 0 var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm); background:var(--navy); border:1px solid var(--line); cursor:zoom-in }
@media (max-width:760px){ .sti-campos{ grid-template-columns:1fr 1fr } .sti-campos .campo:first-child{ grid-column:1 / -1 } }
/* ⭐ la cantidad al presupuestar (08/10/2026, pedido de Belén): «− 1 +» pegado al botón, como el
   carrito de Distrimar. Un solo recuadro con los tres, para que se lea como UNA cosa. */
.cant-presu{ display:inline-flex; align-items:stretch; flex:0 0 auto; overflow:hidden;
             border:1px solid var(--line-2); border-radius:var(--r-sm) }
.cant-presu .btn{ border:0; border-radius:0; min-width:30px; padding:4px 8px; font-size:var(--fs-sm) }
.cant-presu input{ width:44px; border:0; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
                   background:var(--navy); color:var(--ink); text-align:center; font:inherit;
                   font-size:var(--fs-sm); padding:0 2px; -moz-appearance:textfield; appearance:textfield }
.cant-presu input::-webkit-outer-spin-button,
.cant-presu input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cant-presu input:focus{ outline:2px solid var(--cyan); outline-offset:-2px }
.tarj-presu{ display:flex; gap:5px; flex:1 1 100% }
.fila-presu{ display:inline-flex; gap:5px; flex-wrap:nowrap }
.tarj-presu .btn[data-presu]{ flex:1 1 auto }
/* ⚠ con el dedo, el − y el + también necesitan 44 px de ancho (la regla de `.btn.chico` de arriba
   la pisaría el min-width de 30 px de acá: va de nuevo, después) */
@media (pointer:coarse){ .cant-presu .btn{ min-width:44px } .cant-presu input{ width:48px } }

/* ⭐ ORDEN POR DESCRIPCIÓN y APLICACIÓN VEHICULAR COMPLETA (16/10/2026) */
th.th-orden{ cursor:pointer; user-select:none; white-space:nowrap }
th.th-orden:hover, th.th-orden:focus-visible{ color:var(--oro, #e6cf8b); outline:none }
th.th-orden[aria-sort="none"]::after{ content:" ⇅"; opacity:.45 }
.orden-barra{ display:flex; justify-content:flex-end; align-items:center; gap:var(--sp-2, 8px); flex-wrap:wrap; margin:0 0 var(--sp-2, 8px) }
.orden-barra .btn.on{ border-color:var(--gold) }
.apl-det{ margin-top:8px }
.apl-det summary{ cursor:pointer; font-weight:600 }
.apl-lista{ max-height:320px; overflow:auto; margin-top:8px; padding:8px 10px;
            border:1px solid var(--line); border-radius:8px; background:var(--panel-2) }
.apl-marca{ margin-bottom:8px }
.apl-marca ul{ margin:4px 0 0; padding-left:18px; columns:2; column-gap:24px }
.apl-marca li{ break-inside:avoid; font-size:var(--fs-xs); line-height:1.4 }
@media (max-width:640px){ .apl-marca ul{ columns:1 } }

/* filtro por auto (marca, modelo, motor, año) */
.filtro-auto{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin:0 0 var(--sp-4) }
.filtro-auto:empty{ display:none }
.filtro-auto .fa-tit{ font-weight:600; margin-right:var(--sp-1) }
.filtro-auto select, .filtro-auto input{ min-height:44px; padding:0 var(--sp-3); border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--navy); color:var(--ink); font:inherit; font-size:var(--fs-md) }
.filtro-auto select:focus, .filtro-auto input:focus{ outline:2px solid var(--cyan); outline-offset:1px }
.filtro-auto select:disabled{ opacity:.5 }
.filtro-auto select{ min-width:140px; max-width:100% }
.filtro-auto #fa-motor{ width:190px }
.filtro-auto #fa-anio{ width:96px }
.filtro-auto .fa-nota{ flex-basis:100%; min-height:1em }

/* precio neto editable y el aviso del original */
.t-plinea td.col-neto input{ color:var(--gold) }
.pl-orig{ margin-top:4px; font-size:var(--fs-xs); color:var(--muted); text-align:left }
.pl-orig:empty{ display:none }
.pl-orig b{ color:var(--ink); font-weight:600 }
.pl-orig .btn{ margin-left:4px; padding:2px 8px; min-height:0 }
.t-plinea:not(.con-neto) .col-neto-txt{ display:none }
/* el neto de Distrimar es lo que ella paga: con el cliente enfrente no se ve */
body.mostrador .t-plinea .neto-costo{ visibility:hidden }
body.mostrador .pl-orig .col-neto-txt{ display:none }
/* con Neutro se puede ocultar «Precio unit.»: sólo con la tabla en modo neutro (con-neto) */
.t-plinea.con-neto.sin-unit .col-unit{ display:none }
.ocultar-unit{ display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer }
.ocultar-unit[hidden]{ display:none }

/* Pinky · descuentos por marca: columnas fijas, campos con el estilo de la app, sin barra horizontal */
.t-pinky{ width:100%; table-layout:fixed; border-collapse:collapse; min-width:0 }
.t-pinky th:nth-child(1), .t-pinky td:nth-child(1){ width:auto; overflow-wrap:anywhere }
.t-pinky th:nth-child(2), .t-pinky td:nth-child(2), .t-pinky th:nth-child(3), .t-pinky td:nth-child(3){ width:130px }
.t-pinky th, .t-pinky td{ padding:6px var(--sp-3); vertical-align:middle }
.t-pinky th.num{ text-align:right }
.t-pinky input{ width:100%; min-height:40px; padding:0 var(--sp-3); box-sizing:border-box; text-align:right;
  background:var(--navy); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); font:inherit; font-size:var(--fs-md) }
.t-pinky input.pk-nom{ text-align:left }
.t-pinky input:focus{ outline:2px solid var(--cyan); outline-offset:1px }
.t-pinky + .acciones, #pk-filas{ min-width:0 }

/* «Listas que cargás vos»: columnas fijas y los botones en UNA fila (antes se cortaban y salía una barra horizontal) */
.t-listas{ width:100%; table-layout:fixed }
.t-listas th:nth-child(1){ width:24% }
.t-listas th:nth-child(2){ width:96px }
.t-listas th:nth-child(4){ width:340px }
.t-listas td{ vertical-align:middle; overflow-wrap:anywhere }
.t-listas .acc-lista{ display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap }
.t-listas .acc-lista .btn{ white-space:nowrap }
@media (max-width: 900px){ .t-listas th:nth-child(4){ width:190px } }
/* los campos de ganancia de Tecnorep (general y por categoría): el estilo de la app, no el gris del navegador */
.gan-in{ min-height:36px; padding:0 var(--sp-2); box-sizing:border-box; background:var(--navy); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); font:inherit; font-size:var(--fs-md) }
.gan-in:focus{ outline:2px solid var(--cyan); outline-offset:1px }
.gan-in:disabled{ opacity:.45 }
/* la tabla de ganancia por categoría de Tecnorep: columnas fijas, todo a la misma altura, el «%» entero */
.t-gan{ width:100%; table-layout:fixed }
.t-gan th:nth-child(2){ width:100px }
.t-gan th:nth-child(3){ width:150px }
.t-gan td{ vertical-align:middle }
.t-gan td:nth-child(3){ white-space:nowrap }
/* la tabla de renglones del presupuesto: que entre en una pantalla de 1024 sin barra horizontal (20/10/2026) */
.t-plinea{ width:100%; min-width:0 }
.t-plinea th:nth-child(2){ width:72px }
.t-plinea th.col-unit{ width:128px }
.t-plinea th.col-neto{ width:124px }
.t-plinea th.c-sub{ width:120px }
.t-plinea th.c-acc{ width:76px }
/* el subtotal de cada renglón, a la altura del texto de los campos (40 px de alto): estaba 10 px más arriba */
.t-plinea td.pl-sub{ padding-top:20px }