/* ============================================================
   TIENDA RELPARTS — hoja de estilo única
   Modo claro obligatorio. Sin frameworks, sin CDN de CSS.
   Paleta congelada (un solo tema) según el destilado del prototipo v2.
   ============================================================ */

:root{
  /* ── Superficies ───────────────────────────────────────── */
  --bg:            #F5F5F7;
  --surface:       #FFFFFF;
  --surface-2:     #EEEFF1;
  --surface-3:     #E4E6EA;

  /* ── Bordes ────────────────────────────────────────────── */
  --line:          #D2D2D7;
  --line-strong:   #AEAEB2;

  /* ── Texto ─────────────────────────────────────────────── */
  --text:          #1D1D1F;
  --text-2:        #3A3A3C;
  --text-3:        #6E6E73;
  --text-faint:    #A1A1A6;   /* SOLO deshabilitado o decorativo */

  /* ── Marca: rojo (identidad, navegación, urgencia) ─────── */
  --brand:         #C8262C;
  --brand-strong:  #9C1D22;
  --brand-soft:    #F7DCDD;
  --brand-logo:    #EB0A0A;

  /* ── Comercio: verde (agregar, stock, filtros activos) ─── */
  --go:            #009164;
  --go-strong:     #006644;
  --go-soft:       #D9EFE7;
  --go-ring:       rgba(0,145,100,.12);

  /* ── Semánticos ────────────────────────────────────────── */
  --ok:            var(--go-strong);
  --warn:          #B8750B;
  --warn-soft:     #FBEAC9;
  --warn-vivid:    #F59E0B;
  --danger:        var(--brand);
  --danger-soft:   var(--brand-soft);
  --info:          #004AAD;   /* azul real del logotipo */
  --info-soft:     #DCE8F5;

  /* ── Superficies invertidas ────────────────────────────── */
  --slate:         #495E70;
  --slate-deep:    #2F3F4E;
  --slate-ink:     #E2E8EC;
  --slate-mint:    #7ED8B4;

  /* ── Tipografía ────────────────────────────────────────── */
  --font-ui:   'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-micro:  11px;
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-base:   14px;
  --fs-md:     16px;
  --fs-lg:     18px;
  --fs-xl:     22px;
  --fs-2xl:    32px;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.5;

  --tracking-tight:  -0.02em;
  --tracking-caps:    0.1em;

  /* ── Radios ────────────────────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ── Sombras ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(14,20,16,.04);
  --shadow:      0 2px 8px rgba(14,20,16,.06);
  --shadow-lg:   0 8px 24px rgba(14,20,16,.08);
  --shadow-card-hover: 0 8px 22px rgba(14,20,16,.08);
  --shadow-pop:  0 12px 32px rgba(0,0,0,.12);
  --focus-ring:  0 0 0 3px var(--go-ring);

  /* ── Espaciado (escala 4px) ────────────────────────────── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --gap-grid: 14px;

  /* ── Disposición ───────────────────────────────────────── */
  --container:      1440px;
  --container-wide: 1600px;
  --gutter: clamp(16px, 3vw, 32px);
  --header-utility-h: 30px;
  --header-main-h:    68px;
  --search-field-h:   52px;
  --row-min-h:        64px;
  --tap-min:          44px;

  /* ── Movimiento ────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --dur-fast:  120ms;
  --dur:       140ms;
  --dur-slow:  280ms;

  /* ── Capas ─────────────────────────────────────────────── */
  --z-header: 50;  --z-pop: 60;  --z-modal: 100;
}

/* ============================================================
   CLIENTES · MONITOR DE ADMINISTRACIÓN
   Interfaz operacional compacta. La tabla sólo existe en escritorio;
   en pantallas táctiles cada empresa se convierte en una tarjeta completa.
   ============================================================ */
.clientes-shell{
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
  padding-block:var(--sp-5) var(--sp-7);
}
.clientes-contenido{ min-width:0; display:grid; gap:var(--sp-4); }
.clientes-nav{
  position:sticky;
  top:calc(var(--search-field-h) + var(--sp-3));
  display:grid;
  gap:var(--sp-1);
  padding:var(--sp-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}
.clientes-nav__encabezado{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:52px;
  padding:8px 10px 10px;
  color:var(--text);
  border-radius:var(--radius-md);
}
a.clientes-nav__encabezado:hover{ background:var(--surface-2); }
.clientes-nav__encabezado > span:last-child{ min-width:0; display:grid; line-height:1.2; }
.clientes-nav__encabezado strong{ font-size:var(--fs-md); }
.clientes-nav__encabezado small{ margin-top:3px; color:var(--text-3); font-size:var(--fs-xs); }
.clientes-nav__icono{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  color:var(--go-strong);
  background:var(--go-soft);
  border-radius:10px;
}
.clientes-nav__enlaces{ display:grid; gap:2px; }
.clientes-nav__enlaces a,
.clientes-nav__enlace-secundario,
.clientes-nav__salir{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:var(--tap-min);
  padding:9px 11px;
  color:var(--text-2);
  background:transparent;
  border:0;
  border-radius:var(--radius-md);
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.clientes-nav__enlaces a:hover,
.clientes-nav__enlace-secundario:hover,
.clientes-nav__salir:hover{ color:var(--text); background:var(--surface-2); }
.clientes-nav__enlaces a[aria-current="page"]{
  color:var(--go-strong);
  background:var(--go-soft);
  box-shadow:inset 3px 0 0 var(--go);
}
.clientes-nav__enlaces svg,
.clientes-nav__enlace-secundario svg,
.clientes-nav__salir svg{ flex:none; }
.clientes-nav__separador{ height:1px; margin:var(--sp-1) var(--sp-2); background:var(--line); }

.clientes-cabecera{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-4);
  min-width:0;
}
.clientes-cabecera > div:first-child{ min-width:0; }
.clientes-sobrelinea{
  margin-bottom:3px;
  color:var(--go-strong);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.clientes-titulo{
  font-size:clamp(26px,3vw,var(--fs-2xl));
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
  overflow-wrap:anywhere;
}
.clientes-subtitulo{ margin-top:6px; color:var(--text-3); line-height:var(--lh-base); }
.clientes-ayuda-presencia{ display:block; margin-top:2px; font-size:var(--fs-xs); }
.clientes-contador{
  flex:none;
  padding:8px 11px;
  color:var(--text-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);
}
.clientes-cabecera--acciones{ align-items:center; }
.clientes-actualizacion{ display:grid; justify-items:end; gap:4px; flex:none; }
.clientes-refrescar{ min-width:126px; }
.clientes-refrescar svg{ transition:transform 280ms var(--ease-out); }
.clientes-refrescar[aria-busy="true"] svg{ animation:clientes-giro .8s linear infinite; }
.clientes-actualizacion__estado{ color:var(--text-3); font-size:var(--fs-micro); }
@keyframes clientes-giro{ to{ transform:rotate(360deg); } }

.clientes-kpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.clientes-kpis .kpi{ min-width:0; padding:13px 14px; border-radius:var(--radius-lg); }
.clientes-kpis .kpi__valor{ font-size:clamp(22px,2.1vw,28px); }
.clientes-kpi-dinero{ font-size:clamp(18px,1.7vw,25px) !important; white-space:nowrap; }
.clientes-kpis--inicio{ grid-template-columns:repeat(2,minmax(0,220px)); }
.clientes-kpis--detalle{ grid-template-columns:repeat(3,minmax(0,1fr)); align-self:stretch; }
.clientes-kpis--detalle .kpi{ height:100%; }

.clientes-inicio-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-grid); }
.clientes-inicio-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  min-height:104px;
  padding:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.clientes-inicio-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-1px); }
.clientes-inicio-card--destacada{ border-color:color-mix(in srgb,var(--go) 42%,var(--line)); }
.clientes-inicio-card__icono{ display:grid; place-items:center; width:42px; height:42px; color:var(--go-strong); background:var(--go-soft); border-radius:12px; }
.clientes-inicio-card strong{ display:block; font-size:var(--fs-md); }
.clientes-inicio-card small{ display:block; margin-top:4px; color:var(--text-3); line-height:1.35; }
.clientes-inicio-card__flecha{ color:var(--text-3); font-size:20px; }

.clientes-panel{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.clientes-panel__cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:14px var(--sp-4);
  border-bottom:1px solid var(--line);
}
.clientes-panel__cabeza h2{ font-size:var(--fs-lg); line-height:var(--lh-tight); }
.clientes-panel__cabeza p{ margin-top:3px; color:var(--text-3); font-size:var(--fs-xs); line-height:1.4; }
.clientes-panel--busqueda{ display:grid; gap:0; }
.clientes-aviso,
.clientes-cambio-aviso,
.clientes-online-aviso{ margin:0; border:1px solid currentColor; }
.clientes-cambio-aviso{ display:flex; align-items:center; gap:var(--sp-2); }
.clientes-cambio-aviso[hidden]{ display:none; }
.clientes-cambio-aviso a,
.clientes-enlace-texto{ color:var(--go-strong); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

.clientes-busqueda{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-2);
  margin:var(--sp-4);
  padding-left:12px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
}
.clientes-busqueda:focus-within{ border-color:var(--go); box-shadow:var(--focus-ring); }
.clientes-busqueda__icono{ display:grid; color:var(--text-3); }
.clientes-busqueda input{ min-width:0; height:var(--tap-min); padding:0; border:0; outline:0; background:transparent; color:var(--text); }
.clientes-busqueda .btn{ margin:3px; min-height:var(--tap-min); }
.clientes-vacio-compacto{ display:flex; align-items:center; gap:10px; min-height:64px; padding:var(--sp-4); color:var(--text-3); }
.clientes-vacio{ padding:var(--sp-6) var(--sp-4); }

.clientes-filtros{
  display:grid;
  grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(120px,.72fr)) auto;
  align-items:end;
  gap:10px;
  padding:var(--sp-3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
}
.clientes-filtros--auditoria{ grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr) repeat(2,minmax(140px,.72fr)) auto; }
.clientes-filtro{ min-width:0; display:grid; gap:5px; color:var(--text-2); font-size:var(--fs-xs); font-weight:600; }
.clientes-filtro input,
.clientes-filtro select{
  width:100%;
  min-width:0;
  height:var(--tap-min);
  padding:0 10px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.clientes-filtro__control{ display:flex; align-items:center; gap:8px; height:var(--tap-min); padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-md); }
.clientes-filtro__control:focus-within{ border-color:var(--go); box-shadow:var(--focus-ring); }
.clientes-filtro__control svg{ flex:none; color:var(--text-3); }
.clientes-filtro__control input{ height:100%; padding:0; border:0; outline:0; }
.clientes-filtros__acciones{ display:flex; gap:8px; }
.clientes-filtros__acciones .btn{ white-space:nowrap; }

.clientes-tabla{ border:0; border-radius:0; box-shadow:none; }
.clientes-panel > .clientes-tabla{ border-top:0; }
.clientes-tabla table{ min-width:0; }
.clientes-tabla th{ padding:9px 11px; font-size:10px; }
.clientes-tabla td{ min-width:0; padding:11px; font-size:var(--fs-xs); line-height:1.35; }
.clientes-tabla tbody tr{ transition:background var(--dur) var(--ease-out); }
.clientes-tabla--monitor table{ table-layout:fixed; }
.clientes-tabla--monitor th:nth-child(1){ width:17%; }
.clientes-tabla--monitor th:nth-child(2){ width:18%; }
.clientes-tabla--monitor th:nth-child(3){ width:10%; }
.clientes-tabla--monitor th:nth-child(4){ width:13%; }
.clientes-tabla--monitor th:nth-child(5){ width:11%; }
.clientes-tabla--monitor th:nth-child(6){ width:13%; }
.clientes-tabla--monitor th:nth-child(7){ width:18%; }
.clientes-empresa strong,
.clientes-empresa small,
.clientes-celda-secundaria{ display:block; min-width:0; overflow-wrap:anywhere; }
.clientes-empresa strong{ font-size:var(--fs-sm); }
.clientes-empresa small,
.clientes-celda-secundaria{ margin-top:3px; color:var(--text-3); font-size:var(--fs-micro); }
.clientes-contacto{ display:grid; gap:4px; }
.clientes-contacto__dato{ display:flex; align-items:center; gap:6px; min-width:0; }
.clientes-contacto__dato > span:nth-child(2){ min-width:0; overflow-wrap:anywhere; }
.clientes-contacto__marca{ width:7px; height:7px; flex:none; border-radius:50%; background:var(--line-strong); }
.clientes-contacto__dato.es-completo .clientes-contacto__marca{ background:var(--go); }
.clientes-contacto__dato.es-incompleto{ color:var(--brand-strong); font-weight:600; }
.clientes-contacto__dato.es-incompleto .clientes-contacto__marca{ background:var(--brand); }
.clientes-contacto small{ color:var(--text-3); overflow-wrap:anywhere; }
.clientes-presencia{ display:inline-flex; align-items:center; gap:7px; min-width:0; color:var(--text-2); font-weight:700; white-space:normal; }
.clientes-presencia__punto{ width:9px; height:9px; flex:none; border:2px solid transparent; border-radius:50%; background:var(--line-strong); }
.clientes-presencia--en_linea{ color:var(--go-strong); }
.clientes-presencia--en_linea .clientes-presencia__punto{ background:var(--go); box-shadow:0 0 0 3px var(--go-soft); }
.clientes-presencia--reciente{ color:#805006; }
.clientes-presencia--reciente .clientes-presencia__punto{ background:var(--warn-vivid); box-shadow:0 0 0 3px var(--warn-soft); }
.clientes-presencia--desconectado{ color:var(--text-3); }
.clientes-carrito-resumen strong,
.clientes-carrito-resumen small{ display:block; }
.clientes-carrito-resumen small{ margin-top:4px; color:var(--text-3); font-family:var(--font-ui); white-space:normal; }
.clientes-alertas{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:5px; }
.clientes-alerta{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 7px;
  color:var(--text-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
}
.clientes-alerta--alto_valor{ color:var(--info); background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 25%,var(--line)); }
.clientes-alerta--abandono,
.clientes-alerta--abandonado,
.clientes-alerta--corte{ color:#744804; background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 30%,var(--line)); }
.clientes-alerta--stock{ color:var(--brand-strong); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 25%,var(--line)); }
.clientes-alerta--contacto_incompleto{ color:#744804; background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 30%,var(--line)); }
.clientes-sin-alertas{ color:var(--text-3); font-size:var(--fs-micro); }
.clientes-acciones-celda{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.clientes-acciones-celda form{ display:inline-flex; }
.clientes-acciones-celda .btn{ min-height:var(--tap-min); padding:7px 9px; font-size:var(--fs-xs); white-space:nowrap; }
.clientes-btn-control{
  min-height:var(--tap-min);
  padding:8px 12px;
  color:#fff;
  background:var(--slate-deep);
  border:1px solid var(--slate-deep);
  border-radius:var(--radius-md);
  font-weight:700;
  cursor:pointer;
}
.clientes-btn-control:hover{ background:var(--slate); border-color:var(--slate); }
.clientes-tabla--accesos .crear-acceso{ width:min(100%,440px); }
.clientes-tabla--accesos .crear-acceso > summary{ width:max-content; list-style:none; cursor:pointer; }
.clientes-tabla--accesos .crear-acceso > summary::-webkit-details-marker{ display:none; }
.crear-acceso__formulario{ display:grid; gap:var(--sp-3); margin-top:var(--sp-3); padding:var(--sp-3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); }
.crear-acceso__formulario .campo{ margin:0; }
.crear-acceso__formulario .campo > span{ font-weight:700; }
.crear-acceso__formulario .campo > span small{ color:var(--text-3); font-weight:400; }

.clientes-volver{ display:inline-flex; align-items:center; gap:7px; width:max-content; min-height:var(--tap-min); color:var(--text-2); font-size:var(--fs-sm); font-weight:700; }
.clientes-volver svg{ transform:rotate(180deg); }
.clientes-cabecera--detalle{ align-items:center; }
.clientes-detalle-acciones{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.clientes-detalle-acciones form{ display:inline-flex; }
.clientes-online-aviso{ display:flex; align-items:center; gap:var(--sp-3); }
.clientes-online-aviso > span:last-child{ color:var(--text-2); }
.clientes-detalle-resumen{ display:grid; grid-template-columns:minmax(270px,.75fr) minmax(0,1.25fr); gap:var(--gap-grid); }
.clientes-contacto-card{ padding-bottom:var(--sp-2); }
.clientes-datos{ margin:0; padding:0 var(--sp-4); }
.clientes-datos > div{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:var(--sp-3); padding:9px 0; border-bottom:1px solid var(--line); }
.clientes-datos > div:last-child{ border-bottom:0; }
.clientes-datos dt{ color:var(--text-3); font-size:var(--fs-xs); }
.clientes-datos dd{ min-width:0; margin:0; font-size:var(--fs-sm); font-weight:600; overflow-wrap:anywhere; }
.clientes-datos dd.es-incompleto{ color:var(--brand-strong); }
.clientes-carritos-lista{ display:grid; gap:var(--sp-3); padding:var(--sp-3); background:var(--bg); }
.clientes-carrito{ min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.clientes-carrito__cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); }
.clientes-carrito__numero{ color:var(--go-strong); }
.clientes-carrito__cabeza h3{ margin-top:2px; font-size:var(--fs-md); overflow-wrap:anywhere; }
.clientes-carrito__cabeza p{ margin-top:3px; color:var(--text-3); }
.clientes-carrito__totales{ display:grid; justify-items:end; flex:none; text-align:right; }
.clientes-carrito__totales strong{ font-size:var(--fs-lg); }
.clientes-carrito__totales span,
.clientes-carrito__totales small{ color:var(--text-3); font-size:var(--fs-xs); }
.clientes-tabla--items{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clientes-tabla--items th:first-child{ width:46%; }
.clientes-carrito__sin-items{ padding:var(--sp-4); color:var(--text-3); border-top:1px solid var(--line); }
.clientes-carrito__acciones{ display:flex; justify-content:flex-end; gap:8px; padding:var(--sp-3) var(--sp-4); }
.clientes-carrito__acciones form{ display:inline-flex; }
.clientes-credenciales-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); padding:var(--sp-3); }
.clientes-credencial{ display:grid; justify-items:start; gap:4px; min-width:0; padding:var(--sp-3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); }
.clientes-credencial strong,
.clientes-credencial span{ max-width:100%; overflow-wrap:anywhere; }
.clientes-credencial > span:not(.estado){ color:var(--text-3); font-size:var(--fs-xs); }
.clientes-credencial .estado{ margin-top:5px; }
.clientes-actividad{ padding:0 var(--sp-4); }
.clientes-actividad li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.clientes-actividad li:last-child{ border-bottom:0; }
.clientes-actividad__marca{ width:9px; height:9px; margin-top:5px; background:var(--go); border-radius:50%; box-shadow:0 0 0 3px var(--go-soft); }
.clientes-actividad strong{ font-size:var(--fs-sm); }
.clientes-actividad p{ margin-top:2px; color:var(--text-3); font-size:var(--fs-xs); }
.clientes-actividad time{ color:var(--text-3); font-size:var(--fs-micro); text-align:right; }
.clientes-evento{ display:inline-flex; padding:4px 7px; color:var(--text-2); background:var(--surface-2); border-radius:var(--radius-xs); font-size:var(--fs-micro); font-weight:700; }
.clientes-evento--lectura{ color:var(--info); background:var(--info-soft); }
.clientes-evento--control{ color:#744804; background:var(--warn-soft); }
.clientes-auditoria-detalle{ max-width:360px; overflow-wrap:anywhere; }
.clientes-paginacion{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); }
.clientes-paginacion > :last-child{ justify-self:end; }

.clientes-supervision-error{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--sp-2) var(--sp-3);
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));
}
.clientes-supervision-error strong{ white-space:nowrap; }
.clientes-stock-aviso{
  margin:0 var(--sp-4) var(--sp-3);
  padding:9px 12px;
  color:#744804;
  background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));
  border-radius:var(--radius-md);
  font-size:var(--fs-xs);
  font-weight:700;
}
.clientes-item--riesgo{ background:color-mix(in srgb,var(--warn-soft) 48%,var(--surface)); }
.clientes-stock-estado{
  display:block;
  margin-top:3px;
  font-size:var(--fs-micro);
  font-weight:700;
}
.clientes-stock-estado.es-disponible{ color:var(--go-strong); }
.clientes-stock-estado.es-riesgo{ color:#744804; }
.clientes-credencial__datos{ display:grid; width:100%; margin:6px 0 0; }
.clientes-credencial__datos > div{
  display:grid;
  grid-template-columns:minmax(86px,.8fr) minmax(0,1.2fr);
  gap:8px;
  padding:5px 0;
  border-top:1px solid var(--line);
}
.clientes-credencial__datos dt{ color:var(--text-3); font-size:var(--fs-micro); }
.clientes-credencial__datos dd{ margin:0; font-size:var(--fs-xs); font-weight:600; overflow-wrap:anywhere; }
.clientes-diff{ margin-top:6px; }
.clientes-diff summary{
  width:max-content;
  color:var(--info);
  cursor:pointer;
  font-size:var(--fs-xs);
  font-weight:700;
}
.clientes-diff dl{
  display:grid;
  gap:6px;
  min-width:270px;
  margin:8px 0 0;
  padding:9px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.clientes-diff dl > div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; }
.clientes-diff dt{ color:var(--text-3); font-size:var(--fs-micro); }
.clientes-diff dd{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:6px; margin:0; font-size:var(--fs-xs); overflow-wrap:anywhere; }
.clientes-diff dd strong{ color:var(--text); }

.supervision-banner{
  position:sticky;
  top:0;
  z-index:calc(var(--z-modal) - 1);
  isolation:isolate;
  color:var(--slate-ink);
  background:var(--slate-deep);
  border-block:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow);
}
.supervision-banner--control{ background:#263B39; }
.supervision-banner__interior{ display:flex; align-items:center; gap:var(--sp-4); min-height:58px; padding-block:7px; }
.supervision-banner__estado{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.supervision-banner__modo{ display:inline-flex; align-items:center; gap:7px; flex:none; min-height:32px; padding:5px 9px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:700; }
.supervision-banner__cliente{ min-width:0; display:grid; line-height:1.2; }
.supervision-banner__cliente strong{ overflow-wrap:anywhere; }
.supervision-banner__cliente span{ color:rgba(255,255,255,.72); font-size:var(--fs-micro); }
.supervision-banner__acciones{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.supervision-banner__abrir{ min-height:var(--tap-min); color:var(--slate-deep); background:#fff; border:1px solid #fff; }
.supervision-banner__abrir:hover{ background:var(--slate-ink); }
.supervision-banner__ficha{ min-height:var(--tap-min); color:#fff; background:transparent; border-color:rgba(255,255,255,.52); }
.supervision-banner__ficha:hover{ color:#fff; background:rgba(255,255,255,.12); border-color:#fff; }
.supervision-banner__actor{ min-width:0; display:grid; font-size:var(--fs-xs); text-align:right; line-height:1.25; }
.supervision-banner__actor span{ color:rgba(255,255,255,.7); }
.supervision-banner__salir{ min-height:var(--tap-min); color:var(--slate-deep); background:#fff; border:1px solid #fff; }
.supervision-banner__salir:hover{ background:var(--slate-ink); }

@media (max-width:1200px){
  .clientes-shell{ grid-template-columns:190px minmax(0,1fr); gap:var(--sp-4); }
  .clientes-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .clientes-filtros{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .clientes-filtro--buscar{ grid-column:span 2; }
  .clientes-filtros__acciones{ align-self:end; }
  .clientes-tabla--monitor table{ min-width:980px; table-layout:auto; }
  .clientes-tabla--monitor .tabla-desplazable{ overflow-x:auto; }
  .clientes-tabla--monitor th{ width:auto !important; }
  .clientes-tabla--monitor th:first-child{ min-width:170px; }
  .clientes-tabla--monitor th:nth-child(2){ min-width:190px; }
  .clientes-tabla--monitor th:last-child{ min-width:190px; }
  .clientes-inicio-grid{ grid-template-columns:1fr; }
}

@media (max-width:960px){
  .clientes-shell{ grid-template-columns:minmax(0,1fr); padding-top:var(--sp-3); }
  .clientes-nav{ position:static; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--sp-2); }
  .clientes-nav__encabezado{ min-height:var(--tap-min); padding:4px 6px; }
  .clientes-nav__encabezado small{ display:none; }
  .clientes-nav__enlaces{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .clientes-nav__enlaces a{ justify-content:center; }
  .clientes-nav__enlaces a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--go); }
  .clientes-nav__separador{ display:none; }
  .clientes-nav__enlace-secundario,
  .clientes-nav__salir{ width:var(--tap-min); padding:0; justify-content:center; font-size:0; }
  .clientes-tabla--monitor table{ min-width:0; width:100%; }
  .clientes-tabla--monitor .tabla-desplazable{ overflow:visible; background:none; }
  .clientes-tabla--monitor thead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
  .clientes-tabla--monitor tbody{ display:grid; gap:var(--sp-3); padding:var(--sp-3); background:var(--bg); }
  .clientes-tabla--monitor tbody tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--sp-4); padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
  .clientes-tabla--monitor tbody tr:last-child{ border-bottom:1px solid var(--line); }
  .clientes-tabla--monitor tbody td{ display:grid; grid-template-columns:110px minmax(0,1fr); align-items:start; justify-content:initial; gap:var(--sp-2); min-width:0; padding:8px 0; border-bottom:1px solid var(--line); text-align:left; }
  .clientes-tabla--monitor tbody td::before{ content:attr(data-rotulo); display:block; color:var(--text-3); font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
  .clientes-tabla--monitor tbody td.clientes-empresa{ grid-column:1 / -1; display:block; padding-top:0; }
  .clientes-tabla--monitor tbody td.clientes-empresa::before{ display:none; }
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{ grid-column:1 / -1; display:flex; justify-content:flex-end; padding-bottom:0; border-bottom:0; }
  .clientes-tabla--monitor tbody td.clientes-acciones-celda::before{ display:none; }
  .clientes-contacto{ display:grid !important; }
  .clientes-detalle-resumen{ grid-template-columns:1fr; }
}

  @media (max-width:720px){
  .clientes-shell{ gap:var(--sp-3); padding-bottom:var(--sp-5); }
  .clientes-nav{ grid-template-columns:1fr auto auto; padding:var(--sp-1); }
  .clientes-nav__encabezado{ grid-column:1; }
  .clientes-nav__enlaces{ grid-column:1 / -1; grid-row:2; order:4; }
  .clientes-nav__enlaces a{ min-width:0; gap:5px; padding-inline:5px; font-size:var(--fs-xs); }
  .clientes-cabecera,
  .clientes-cabecera--acciones,
  .clientes-cabecera--detalle{ align-items:flex-start; flex-direction:column; }
  .clientes-contador{ align-self:flex-start; }
  .clientes-actualizacion{ width:100%; grid-template-columns:auto minmax(0,1fr); align-items:center; justify-items:start; }
  .clientes-actualizacion__estado{ text-align:left; }
  .clientes-kpis,
  .clientes-kpis--inicio,
  .clientes-kpis--detalle{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clientes-kpis .kpi:last-child:nth-child(odd){ grid-column:1 / -1; }
  .clientes-filtros,
  .clientes-filtros--auditoria{ grid-template-columns:1fr; }
  .clientes-filtro--buscar{ grid-column:auto; }
  .clientes-filtros__acciones{ display:grid; grid-template-columns:1fr 1fr; }
  .clientes-filtros__acciones .btn{ width:100%; }
  .clientes-filtro input,
  .clientes-filtro select,
  .clientes-busqueda input{ font-size:16px; }
  .clientes-busqueda{ grid-template-columns:auto minmax(0,1fr); padding:6px 8px 6px 12px; }
  .clientes-busqueda .btn{ grid-column:1 / -1; width:100%; margin:0; min-height:var(--tap-min); }
  .clientes-tabla--monitor tbody tr{ grid-template-columns:1fr; padding:var(--sp-3); }
  .clientes-tabla--monitor tbody td{ grid-template-columns:100px minmax(0,1fr); }
  .clientes-tabla--monitor tbody td.clientes-empresa,
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{ grid-column:auto; }
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{ display:grid; grid-template-columns:1fr; gap:8px; }
  .clientes-acciones-celda form,
  .clientes-acciones-celda .btn{ width:100%; }
  .clientes-acciones-celda .btn{ justify-content:center; min-height:var(--tap-min); }
  .clientes-detalle-acciones{ width:100%; display:grid; grid-template-columns:1fr; }
  .clientes-detalle-acciones form,
  .clientes-detalle-acciones .btn{ width:100%; }
  .clientes-online-aviso{ align-items:flex-start; flex-direction:column; }
  .clientes-carrito__cabeza{ flex-direction:column; }
  .clientes-carrito__totales{ justify-items:start; text-align:left; }
  .clientes-carrito__acciones{ display:grid; grid-template-columns:1fr; }
  .clientes-carrito__acciones form,
  .clientes-carrito__acciones .btn{ width:100%; }
  .clientes-credenciales-grid{ grid-template-columns:1fr; }
  .clientes-actividad li{ grid-template-columns:auto minmax(0,1fr); }
  .clientes-actividad time{ grid-column:2; text-align:left; }
  .clientes-datos > div{ grid-template-columns:80px minmax(0,1fr); }
  .clientes-paginacion{ grid-template-columns:1fr 1fr; }
  .clientes-paginacion > span{ grid-column:1 / -1; grid-row:1; text-align:center; }
  .clientes-supervision-error{ grid-template-columns:1fr; }
  .clientes-supervision-error strong{ white-space:normal; }
  .clientes-diff dl{ min-width:0; }
  .clientes-diff dl > div{ grid-template-columns:1fr; }
  .supervision-banner__interior{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-block:8px; }
  .supervision-banner__estado{ align-items:flex-start; flex-direction:column; gap:5px; }
  .supervision-banner__acciones{ grid-column:1; grid-row:2; margin:0; flex-wrap:wrap; }
  .supervision-banner__actor{ grid-column:1; grid-row:3; margin:0; text-align:left; }
  .supervision-banner form{ grid-column:2; grid-row:1 / span 3; align-self:stretch; }
  .supervision-banner__salir{ width:var(--tap-min); height:100%; padding:0; font-size:0; justify-content:center; }
}

@media (max-width:420px){
  .clientes-nav__encabezado strong{ font-size:var(--fs-sm); }
  .clientes-nav__icono{ width:30px; height:30px; }
  .clientes-kpis,
  .clientes-kpis--inicio,
  .clientes-kpis--detalle{ grid-template-columns:1fr; }
  .clientes-kpis .kpi:last-child:nth-child(odd){ grid-column:auto; }
  .clientes-inicio-card{ grid-template-columns:auto minmax(0,1fr); }
  .clientes-inicio-card__flecha{ display:none; }
  .clientes-tabla--monitor tbody td{ grid-template-columns:1fr; gap:4px; }
  .clientes-tabla--monitor tbody td::before{ margin-bottom:2px; }
  .supervision-banner__modo{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  .clientes-refrescar[aria-busy="true"] svg{ animation:none; }
  .clientes-inicio-card:hover{ transform:none; }
}

/* ── Reinicio acotado ────────────────────────────────────── */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
table{ border-collapse: collapse; width:100%; }

/* Cifras tabulares para todo dato numérico o código */
.mono{
  font-family: var(--font-mono);
  /* El cero alternativo de JetBrains Mono lleva un punto central y puede
     confundirse con un 8. Conservamos cifras tabulares, pero usamos el cero
     simple de la familia en toda la interfaz. */
  font-feature-settings:"tnum" 1,"zero" 0;
  font-variant-numeric: tabular-nums;
}
.caps{
  font-size: var(--fs-micro); font-weight:700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar-al-contenido{
  position:absolute; left:-9999px; top:0; z-index: var(--z-modal);
  background: var(--go-strong); color:#fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-md) 0; font-weight:700;
}
.saltar-al-contenido:focus{ left:0; }

/* Foco visible: obligatorio en todo lo interactivo */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--go-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ── Contenedor ──────────────────────────────────────────── */
.contenedor{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   CABECERA — 3 pisos, pegajosa
   ============================================================ */
.cabecera{
  position:relative;
  z-index:1;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* PISO 1 · franja utilitaria */
.franja{
  background: var(--slate);
  color: var(--slate-ink);
  min-height: var(--header-utility-h);
  font-size: var(--fs-xs);
}
.franja__interior{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4); min-height: var(--header-utility-h);
}
.franja__izq,.franja__der{ display:flex; align-items:center; gap: var(--sp-3); }
.franja__dato{ display:inline-flex; align-items:center; gap:6px; }
.franja__dato svg{ width:12px; height:12px; flex:none; opacity:.85; }
.franja__sep{ opacity:.45; }
.franja__rut{ font-size: var(--fs-micro); opacity:.75; }
.franja__estado{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-micro); }
.franja__punto{
  width:6px; height:6px; border-radius:50%;
  background: var(--slate-mint);
  box-shadow: 0 0 0 2px rgba(126,216,180,.25);
}
.franja a:hover{ text-decoration: underline; }

/* PISO 2 · barra principal */
.barra{
  min-height: var(--header-main-h);
  display:flex; align-items:center; gap: clamp(12px, 2vw, 32px);
  padding-block: 8px;
}
.marca{ display:flex; align-items:center; gap: var(--sp-2); flex:none; }
.marca__glifo{ width:34px; height:28px; flex:none; }
.marca__texto{ display:flex; flex-direction:column; line-height:1; }
.marca__nombre{
  font-size: var(--fs-xl); font-weight:900;
  letter-spacing: var(--tracking-tight); color: var(--text);
}
.marca__lema{
  font-size: var(--fs-micro); font-weight:600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--go-strong); margin-top:3px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-1);
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
}
.nav__enlace{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding: 10px var(--sp-3); min-height: var(--tap-min);
  font-size: 14.5px; font-weight:600; color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__enlace:hover{ background: var(--surface-2); color: var(--text); }
.nav__enlace[aria-current="page"]{ color: var(--brand); }
.nav__enlace[aria-current="page"]::after{
  content:""; position:absolute; left: var(--sp-3); right: var(--sp-3); bottom:-1px;
  height:2px; background: var(--brand); border-radius: 2px 2px 0 0;
}
.nav__hot{
  font-size: 9px; font-weight:800; letter-spacing:.08em;
  background: var(--brand); color:#fff; padding:2px 4px; border-radius: var(--radius-xs);
}

.acciones{ display:flex; align-items:center; gap: var(--sp-2); flex:none; }

.pastilla-cuenta{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  background: var(--go-soft); border:1px solid transparent;
  border-radius: var(--radius-md); padding:6px 12px 6px 6px;
  min-height: var(--tap-min);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pastilla-cuenta:hover{ border-color: var(--go); }
.pastilla-cuenta__avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background: var(--go-strong); color:#fff;
  display:grid; place-items:center;
  font-size: var(--fs-xs); font-weight:800;
}
.pastilla-cuenta__txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.pastilla-cuenta__rol{ font-size: 11.5px; color: var(--text-3); }
.pastilla-cuenta__nombre{
  font-size: var(--fs-sm); font-weight:700; color: var(--go-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22ch;
}

.btn-cromado{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 0 var(--sp-3);
  min-height: var(--tap-min); font-size: var(--fs-sm); font-weight:600;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-cromado:hover{ border-color: var(--line-strong); background: var(--surface-2); }

.btn-carrito{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  background: var(--brand); color:#fff;
  border:0; border-radius: var(--radius-md); padding: 5px var(--sp-4);
  min-height: var(--tap-min); font-size: var(--fs-sm); font-weight:700; cursor:pointer;
  box-shadow: 0 2px 6px rgba(200,38,44,.25);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-carrito:hover{ background: var(--brand-strong); }
.btn-carrito:active{ transform: scale(.98); }
.btn-carrito--consulta{
  border:1px solid color-mix(in srgb, var(--go) 35%, var(--line));
  background:var(--go-soft);
  color:var(--go-strong);
  box-shadow:none;
}
.btn-carrito--consulta:hover{ background:#dff2ea; }
.btn-carrito__resumen{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:0; line-height:1;
}
.btn-carrito__linea{ display:flex; align-items:center; gap:6px; }
.btn-carrito__neto{
  color:rgba(255,255,255,.88); font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.btn-carrito__n{
  min-width:20px; height:20px; padding:0 5px; border-radius: var(--radius-pill);
  background:#fff; color: var(--brand);
  display:grid; place-items:center; font-size: var(--fs-micro); font-weight:800;
}

/* PISO 3 · barra de búsqueda */
.buscador{
  position:relative;
  z-index:calc(var(--z-pop) + 2);
  background:#F2F3F5;
  border-top:1px solid var(--line);
  border-bottom:1px solid #D9DADE;
  box-shadow:0 1px 0 rgba(18,24,31,.05);
}
/* Las sugerencias deben pasar por delante del menú de familias. Elevamos la
   barra solo mientras contiene el foco para no interferir con la cabecera
   pegajosa cuando la persona ya siguió navegando. */
.buscador:focus-within{ z-index:calc(var(--z-pop) + 3); }
.buscador__interior{
  max-width:1320px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-top:18px;
  padding-bottom:18px;
}
.buscador__forma{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
  flex:1 1 auto;
  min-width:0;
}
.buscador__campo{
  position:relative; flex:1 1 720px; min-width:0;
  display:flex; align-items:center;
  background: var(--surface);
  border:2px solid var(--line-strong);
  border-radius: var(--radius-lg);
  height: var(--search-field-h);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.buscador__campo:focus-within{
  border-color: var(--go);
  box-shadow: 0 0 0 4px var(--go-ring);
}
.buscador__modo-wrap{
  position:relative;
  flex:0 0 142px;
  align-self:stretch;
  border-right:1px solid var(--line);
  border-radius:calc(var(--radius-lg) - 2px) 0 0 calc(var(--radius-lg) - 2px);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding:5px 10px 5px 12px;
}
.buscador__modo-wrap::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:14px;
  width:7px;
  height:7px;
  border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);
  transform:rotate(45deg);
  pointer-events:none;
}
.buscador__modo-etiqueta{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.buscador__modo{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  height:29px;
  padding:0 30px 0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  outline:0;
  background:var(--surface);
  color:var(--text-2);
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.buscador__modo:hover{
  border-color:var(--line-strong);
  background:#fff;
}

/* Selector de intención de búsqueda: mejora progresiva sobre el select nativo. */
.buscador__modo-wrap--mejorado{
  flex-basis:164px;
  padding:0;
  isolation:isolate;
}
.buscador__modo-wrap--mejorado::after{
  display:none;
}
.buscador__modo-wrap--mejorado .buscador__modo{
  display:none;
}
.buscador__modo-wrap--mejorado .buscador__modo-etiqueta{
  position:absolute;
  z-index:2;
  top:8px;
  left:14px;
  pointer-events:none;
}
.buscador__modo-disparador{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  grid-template-columns:8px minmax(0,1fr) 10px;
  align-items:end;
  column-gap:8px;
  width:100%;
  min-height:44px;
  padding:21px 14px 7px;
  border:0;
  border-radius:calc(var(--radius-lg) - 2px) 0 0 calc(var(--radius-lg) - 2px);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:750;
  line-height:1;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  transition:background var(--dur-fast) var(--ease-out);
}
.buscador__modo-disparador:hover,
.buscador__modo-disparador[aria-expanded="true"]{
  background:var(--surface);
}
.buscador__modo-disparador:focus-visible{
  outline:2px solid var(--go-strong);
  outline-offset:-3px;
}
.buscador__modo-indicador{
  width:7px;
  height:7px;
  margin-bottom:1px;
  border-radius:50%;
  background:var(--go);
  box-shadow:0 0 0 3px var(--go-ring);
}
.buscador__modo-chevron{
  align-self:center;
  width:8px;
  height:8px;
  margin-bottom:-1px;
  border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);
  transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out);
}
.buscador__modo-disparador[aria-expanded="true"] .buscador__modo-chevron{
  transform:translateY(3px) rotate(225deg);
}
.buscador__modo-menu{
  position:absolute;
  z-index:calc(var(--z-pop) + 5);
  top:calc(100% + 10px);
  left:0;
  width:min(310px,calc(100vw - 24px));
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:0 18px 46px rgba(18,24,31,.18), 0 2px 8px rgba(18,24,31,.08);
  animation:modo-menu-entrada 160ms var(--ease-out);
}
.buscador__modo-menu[hidden]{
  display:none;
}
.buscador__modo-opcion{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:56px;
  padding:7px 10px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.buscador__modo-opcion:hover,
.buscador__modo-opcion:focus-visible{
  outline:0;
  background:var(--surface-2);
}
.buscador__modo-opcion:focus-visible{
  box-shadow:inset 0 0 0 2px var(--go-strong);
}
.buscador__modo-opcion[aria-selected="true"]{
  background:var(--go-soft);
  color:var(--go-strong);
}
.buscador__modo-opcion-icono{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
}
.buscador__modo-opcion[aria-selected="true"] .buscador__modo-opcion-icono{
  border-color:var(--go-ring);
  color:var(--go-strong);
}
.buscador__modo-opcion strong,
.buscador__modo-opcion small{
  display:block;
}
.buscador__modo-opcion strong{
  font-size:var(--fs-sm);
  line-height:1.2;
}
.buscador__modo-opcion small{
  margin-top:2px;
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.2;
}
.buscador__modo-check{
  display:none;
  justify-self:center;
  width:9px;
  height:15px;
  border-right:2px solid var(--go-strong);
  border-bottom:2px solid var(--go-strong);
  transform:rotate(42deg) translateY(-2px);
}
.buscador__modo-opcion[aria-selected="true"] .buscador__modo-check{
  display:block;
}
@keyframes modo-menu-entrada{
  from{ opacity:0; transform:translateY(-5px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .buscador__modo-menu{ animation:none; }
  .buscador__modo-chevron{ transition:none; }
}

.buscador__texto{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:160px;
  height:100%;
}
.buscador__texto[hidden],
.buscador__vehiculo[hidden],
.buscador__avanzada[hidden]{ display:none !important; }
.buscador__lupa{
  position:absolute; left:14px; width:20px; height:20px;
  color: var(--text-3); pointer-events:none;
}
.buscador__input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  padding: 0 var(--sp-3) 0 44px;
  height:100%; font-size: var(--fs-md); font-weight:500; color: var(--text);
  font-family: var(--font-ui);
}
.buscador__input::placeholder{ color: var(--text-3); }
.buscador__vehiculo{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr);
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  padding:6px 8px;
}
.buscador-combo{
  position:relative;
  min-width:0;
}
.buscador-combo__input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
}
.buscador-combo__input::placeholder{ color:var(--text-3); }
.buscador-combo__input:disabled{
  background:var(--surface-2);
  color:var(--text-3);
  cursor:not-allowed;
}
.buscador-combo__lista{
  position:absolute;
  z-index:calc(var(--z-header) + 2);
  top:calc(100% + 6px);
  left:0;
  width:max(100%,280px);
  max-height:min(50vh,340px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:5px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:0 14px 34px rgba(18,24,32,.18);
}
.buscador-combo__lista[hidden]{ display:none; }
.buscador-combo__opcion{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text);
  font:600 var(--fs-sm)/1.25 var(--font-ui);
  text-align:left;
  cursor:pointer;
}
.buscador-combo__opcion:hover,
.buscador-combo__opcion.is-active{
  background:var(--surface-2);
  color:var(--brand-strong);
}
.buscador-combo__opcion-n{
  color:var(--text-3);
  font:600 var(--fs-xs)/1 var(--font-ui);
  white-space:nowrap;
}
.buscador-combo__vacio{
  margin:0;
  padding:12px;
  color:var(--text-2);
  font-size:var(--fs-sm);
}
/* el contorno del navegador se conserva: es la unica senal de foco que cumple contraste */
.buscador__avanzada{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  height:var(--search-field-h); padding:0 16px;
  border:1px solid var(--line-strong); cursor:pointer;
  background: var(--surface); color: var(--text-2);
  border-radius: var(--radius-lg); font-size: var(--fs-xs); font-weight:700;
  box-shadow:var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.buscador__avanzada:hover{ border-color:var(--text-3); background: var(--surface-2); }
.buscador__avanzada[aria-expanded="true"]{
  border-color:var(--go);
  background:var(--go-soft);
  color:var(--go-strong);
}
.buscador__enviar{
  flex:none; align-self:stretch; min-width:112px; padding:0 var(--sp-5);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--brand); color:#fff; border:0; cursor:pointer;
  border-radius:0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0;
  font-size: var(--fs-base); font-weight:700;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.buscador__enviar svg{ width:18px; height:18px; }
.buscador__enviar:hover{ background: var(--brand-strong); }
.buscador__enviar:active{ transform: scale(.98); }
.buscador__acciones-publicas{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.buscador__acciones-publicas .btn-cromado{
  min-height:46px;
  white-space:nowrap;
}

@media (min-width:900px){
  .cabecera--publica .btn-cromado--publica-cabecera{ display:none; }
}

@media (max-width:899px){
  .buscador__acciones-publicas{ display:none; }
}

/* Resultados exactos: unidades y despiece son dos intenciones distintas. */
.pestanas-referencia{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,260px));
  gap:8px;
  margin:0 0 var(--sp-4);
}
.pestanas-referencia a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:48px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text-2);
  font-weight:700;
}
.pestanas-referencia a[aria-current="page"]{
  border-color:var(--go);
  background:var(--go-soft);
  color:var(--go-strong);
  box-shadow:0 0 0 2px var(--go-ring);
}
.pestanas-referencia strong{
  display:grid;
  place-items:center;
  min-width:30px;
  height:26px;
  padding:0 7px;
  border-radius:999px;
  background:var(--surface-3);
  font-size:var(--fs-xs);
}

/* Búsqueda dimensional exclusiva de la familia Rodamientos. */
.medidas-rodamiento{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:-4px 0 var(--sp-4);
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.medidas-rodamiento__titulo{
  display:flex;
  flex-direction:column;
  flex:1 1 220px;
  min-width:190px;
}
.medidas-rodamiento__titulo strong{ font-size:var(--fs-base); }
.medidas-rodamiento__titulo span{
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.medidas-rodamiento label{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:0 1 105px;
  color:var(--text-2);
  font-size:var(--fs-xs);
  font-weight:600;
}
.medidas-rodamiento input{
  width:100%;
  height:42px;
  padding:0 10px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-mono);
}
.medidas-rodamiento .btn{ min-height:42px; white-space:nowrap; }

/* Panel avanzado */
.panel-avanzado{
  flex:1 0 100%;
  background: var(--surface-2);
  border-radius: var(--radius-xl);
  padding: 18px;
  animation: desplegar var(--dur-slow) var(--ease-out);
}
.panel-avanzado[hidden]{ display:none; }
.panel-avanzado__grilla{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3);
}
.panel-avanzado__grilla[hidden]{ display:none; }
.faceta{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.faceta__etiqueta{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-xs); font-weight:600; color: var(--text-2);
}
.faceta__punto{ width:6px; height:6px; border-radius:50%; background: var(--line-strong); }
.faceta select, .faceta input{
  height:38px; border:1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding:0 10px; font-size: var(--fs-sm);
  font-family: var(--font-ui); color: var(--text); width:100%;
}
.faceta select:focus-visible, .faceta input:focus-visible{
  border-color: var(--go); box-shadow: var(--focus-ring);
}
.faceta-multiple__control{ position:relative; min-width:0; }
.faceta-multiple__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.faceta-multiple__chips:empty{ display:none; }
.faceta-multiple__chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  max-width:100%;
  padding:3px 8px 3px 10px;
  border:1px solid color-mix(in srgb, var(--go) 28%, var(--line));
  border-radius:999px;
  background:var(--go-soft);
  color:var(--go-strong);
  font:600 var(--fs-xs)/1.2 var(--font-ui);
  cursor:pointer;
}
.faceta-multiple__chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.faceta-multiple__chip b{ font-size:16px; line-height:1; }
.faceta-multiple__chip:hover{ border-color:var(--go); }
.faceta-multiple__lista{
  position:absolute;
  z-index:40;
  inset:calc(100% + 4px) 0 auto;
  max-height:260px;
  overflow:auto;
  padding:5px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.faceta-multiple__lista[hidden]{ display:none; }
.faceta-multiple__opcion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--text);
  text-align:left;
  font:500 var(--fs-sm)/1.2 var(--font-ui);
  cursor:pointer;
}
.faceta-multiple__opcion:hover,
.faceta-multiple__opcion:focus-visible{ background:var(--surface-2); outline:none; }
.faceta-multiple__opcion small{ color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ── FACETAS BUSCABLES ────────────────────────────────────────────────
   Producto, Marca y Sistema son listas de cientos de valores. El
   desplegable del navegador no deja buscar dentro y obliga a arrastrar la
   barra a ciegas, así que encima del <select> se dibuja un buscador. Todo
   lo de abajo vive detrás de `.faceta-combo--activo`, que sólo pone
   `tienda.js` cuando consigue construirlo: sin JavaScript, o si algo
   falla, no se aplica nada y queda el desplegable de siempre. */
.faceta-combo{ position:relative; }
.faceta-combo--activo > select{ display:none; }
.faceta-combo__disparador{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 10px;
  align-items:center;
  gap:8px;
  width:100%;
  height:38px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font:var(--fs-sm)/1.2 var(--font-ui);
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.faceta-combo__disparador:hover:not(:disabled){ border-color:var(--line-strong); }
.faceta-combo__disparador[aria-expanded="true"]{
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.faceta-combo__disparador:disabled{
  opacity:.45;
  cursor:not-allowed;
  background:var(--surface-2);
}
.faceta-combo__valor{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.faceta-combo--elegida .faceta-combo__valor{ font-weight:600; color:var(--go-strong); }
.faceta-combo__conteo{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
}
.faceta-combo__chevron{
  justify-self:end;
  width:7px;
  height:7px;
  margin-bottom:-2px;
  border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);
  transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out);
}
.faceta-combo__disparador[aria-expanded="true"] .faceta-combo__chevron{
  transform:translateY(3px) rotate(225deg);
}
.faceta-combo__panel{
  position:absolute;
  z-index:calc(var(--z-pop) + 5);
  inset:calc(100% + 4px) 0 auto;
  display:flex;
  flex-direction:column;
  max-height:min(340px,60vh);
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  animation:faceta-combo-entrada 140ms var(--ease-out);
}
.faceta-combo__panel[hidden]{ display:none; }
.faceta-combo__buscar{ position:relative; flex:0 0 auto; margin-bottom:6px; }
.faceta-combo__panel .faceta-combo__input{
  width:100%;
  height:40px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text);
  font:var(--fs-sm)/1.2 var(--font-ui);
}
.faceta-combo__panel .faceta-combo__input:focus-visible{
  outline:0;
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.faceta-combo__panel .faceta-combo__input::placeholder{ color:var(--text-3); }
.faceta-combo__lista{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.faceta-combo__opcion{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 14px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--text);
  font:500 var(--fs-sm)/1.25 var(--font-ui);
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}
.faceta-combo__opcion:hover,
.faceta-combo__opcion.es-activa{ background:var(--surface-2); }
.faceta-combo__opcion[aria-selected="true"]{
  background:var(--go-soft);
  color:var(--go-strong);
  font-weight:600;
}
.faceta-combo__opcion-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.faceta-combo__opcion-nombre mark{
  background:transparent;
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.faceta-combo__opcion-n{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.faceta-combo__opcion[aria-selected="true"] .faceta-combo__opcion-n{ color:var(--go-strong); }
.faceta-combo__marca{
  justify-self:center;
  width:0;
  height:0;
}
.faceta-combo__opcion[aria-selected="true"] .faceta-combo__marca{
  width:7px;
  height:12px;
  border-right:2px solid var(--go-strong);
  border-bottom:2px solid var(--go-strong);
  transform:rotate(42deg) translateY(-2px);
}
/* «Todas» quita el filtro: se separa del resto con una línea, pero dibujada
   sobre la propia fila. Un separador aparte sería un nodo más dentro del
   role="listbox" y descuadraría la navegación con flechas. */
.faceta-combo__opcion--todas{
  margin-bottom:6px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  border-radius:6px 6px 0 0;
  color:var(--text-2);
}
.faceta-combo__vacio{
  padding:14px 10px;
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:1.45;
}
.faceta-combo__vacio b{ color:var(--text); }
.faceta-combo__estado{
  flex:0 0 auto;
  margin:5px 4px 1px;
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.faceta-combo__velo{ display:none; }
@keyframes faceta-combo-entrada{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
/* En teléfono el panel flotante quedaría fuera de pantalla: se convierte en
   una hoja anclada abajo, que es donde llega el pulgar. Los 720px son el
   mismo corte con el que la tienda pasa las facetas a una sola columna. */
@media (max-width: 720px){
  .faceta-combo__velo{
    position:fixed;
    inset:0;
    z-index:calc(var(--z-modal) + 4);
    display:block;
    background:rgba(18,24,31,.45);
    animation:faceta-combo-velo 140ms var(--ease-out);
  }
  .faceta-combo__velo[hidden]{ display:none; }
  .faceta-combo__panel{
    position:fixed;
    z-index:calc(var(--z-modal) + 5);
    inset:auto 0 0 0;
    max-height:min(74dvh,74vh);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--line);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    animation:faceta-combo-hoja 180ms var(--ease-out);
  }
  .faceta-combo__panel .faceta-combo__input{ height:46px; font-size:16px; }
  .faceta-combo__opcion{ min-height:46px; }
  .faceta-combo__disparador{ height:44px; }
}
@keyframes faceta-combo-hoja{
  from{ transform:translateY(14px); }
  to{ transform:translateY(0); }
}
@keyframes faceta-combo-velo{
  from{ opacity:0; }
  to{ opacity:1; }
}
.panel-avanzado__pie{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--sp-3);
  min-height:24px;
  margin-top:var(--sp-2);
}
.panel-avanzado__estado{
  min-width:0;
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.panel-avanzado[aria-busy="true"] .panel-avanzado__estado::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:7px;
  border-radius:50%;
  background:var(--go);
  animation:faceta-pulso 900ms ease-in-out infinite alternate;
}
@keyframes faceta-pulso{
  from{ opacity:.35; transform:scale(.8); }
  to{ opacity:1; transform:scale(1); }
}
.filtro-stock-disponible{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:4px 6px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.faceta .filtro-stock-disponible__control{
  width:auto;
}
.filtro-stock-disponible__control{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.filtro-stock-disponible__interruptor{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:20px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filtro-stock-disponible__interruptor::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--text-3);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.filtro-stock-disponible__control:checked + .filtro-stock-disponible__interruptor{
  border-color:var(--go);
  background:var(--go);
}
.filtro-stock-disponible__control:checked + .filtro-stock-disponible__interruptor::after{
  transform:translateX(14px);
  background:#fff;
}
.filtro-stock-disponible__control:focus-visible + .filtro-stock-disponible__interruptor{
  box-shadow:var(--focus-ring);
}
.filtro-stock-disponible__texto{
  font-size:var(--fs-xs);
  font-weight:600;
}
.filtro-stock-disponible__control:checked ~ .filtro-stock-disponible__texto{
  color:var(--go-strong);
}
.filtro-stock-disponible--barra{
  flex:none;
  align-self:center;
  min-height:var(--search-field-h);
  padding:0 4px;
  color:var(--text-2);
}
.modo-mostrador-control{
  flex:none;
  align-self:center;
  min-height:var(--search-field-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--surface);
  color:var(--text-2);
  box-shadow:var(--shadow-sm);
  font:700 var(--fs-xs)/1 var(--font-ui);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modo-mostrador-control:hover{ border-color:var(--go); background:var(--go-soft); color:var(--go-strong); }
.modo-mostrador-control:active{ transform:scale(.98); }
.modo-mostrador-control:focus-visible{ box-shadow:var(--focus-ring); outline:0; }
.modo-mostrador-control--activo{ border-color:var(--go); background:var(--go); color:#fff; }
.modo-mostrador-control--activo:hover{ background:var(--go-strong); color:#fff; }
.modo-mostrador-control--cabecera{
  align-self:auto;
  min-height:var(--tap-min);
  white-space:nowrap;
}
.modo-mostrador-banner{
  border-bottom:1px solid color-mix(in srgb,var(--go) 32%,var(--line));
  background:var(--go-soft);
}
.modo-mostrador-banner__interior{
  min-height:47px;
  display:flex;
  align-items:center;
  gap:9px;
  padding-top:7px;
  padding-bottom:7px;
}
.modo-mostrador-banner__icono{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:#fff;
  color:var(--go-strong);
}
.modo-mostrador-banner p{ margin:0; min-width:0; color:var(--go-strong); font-size:var(--fs-xs); line-height:1.3; }
.modo-mostrador-banner p strong{ margin-right:7px; }
.modo-mostrador-banner p span{ color:var(--text-2); }
.modo-mostrador-banner form{ margin-left:auto; }
.modo-mostrador-banner button{
  min-height:32px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--go) 45%,var(--line));
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--go-strong);
  font:700 var(--fs-xs)/1 var(--font-ui);
  cursor:pointer;
}
.modo-mostrador-banner button:focus-visible{ box-shadow:var(--focus-ring); outline:0; }
.panel-avanzado__lote{
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px dashed var(--line-strong);
  display:flex; gap: var(--sp-2); flex-wrap:wrap; align-items:center;
}
.panel-avanzado__lote input{
  flex:1 1 320px; min-width:0; height:38px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:0 10px; background: var(--surface);
}

/* ============================================================
   BOTONES GENERALES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height: var(--tap-min); padding: 0 var(--sp-4);
  border:1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight:600; cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: scale(.98); }
.btn--agregar{ background: var(--go-strong); color:#fff; font-size:12.5px; }
.btn--agregar:hover{ background:#005538; }
.btn--agregar.esta-agregado{ background: var(--go); }
.btn--marca{ background: var(--brand); color:#fff; }
.btn--marca:hover{ background: var(--brand-strong); }
.btn--linea{ background: var(--surface); border-color: var(--line); color: var(--text-2); }
.btn--linea:hover{ border-color: var(--line-strong); background: var(--surface-2); }
.btn--icono{
  width:32px; height:32px; min-height:32px; padding:0;
  position:relative; background: var(--surface); border-color: var(--line);
}
/* área táctil ampliada sin cambiar el tamaño visual */
.btn--icono::after{
  content:""; position:absolute; inset:-6px;
}
.btn--bloque{ width:100%; }

/* ============================================================
   RIEL DE CATEGORÍAS
   ============================================================ */
.riel{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(148px,1fr));
  gap: var(--gap-grid);
}
.riel__mosaico{
  display:flex; flex-direction:column; gap: var(--sp-2);
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  min-height:104px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.riel__mosaico:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}
.riel__glifo{
  width:32px; height:32px; border-radius: var(--radius-sm);
  display:grid; place-items:center; color:#fff; flex:none;
}
.riel__glifo svg{ width:18px; height:18px; }
.riel__nombre{ font-size: var(--fs-sm); font-weight:600; line-height: var(--lh-snug); }
.riel__n{ font-size: var(--fs-micro); color: var(--text-3); margin-top:auto; }

/* ============================================================
   MENÚ DEL CATÁLOGO — una sola línea en escritorio
   La profundidad aparece a pedido; no consume pantalla permanentemente.
   ============================================================ */
.barra-familias{
  position:relative;
  z-index:var(--z-pop);
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.linea-familias{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  min-height:58px;
}
.linea-familias__item{
  position:relative;
  min-width:0;
  border-left:1px solid var(--line);
}
.linea-familias__item:first-child{ border-left:0; }
.linea-familias__principal{
  display:flex;
  height:100%;
  min-width:0;
}
.linea-familias__acceso{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 auto;
  min-width:0;
  min-height:58px;
  padding:8px 12px;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:700;
  line-height:var(--lh-tight);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.linea-familias__item:hover > .linea-familias__principal,
.linea-familias__item:focus-within > .linea-familias__principal,
.linea-familias__item.is-open > .linea-familias__principal{
  background:var(--surface-2);
}
.linea-familias__item:hover .linea-familias__acceso,
.linea-familias__item:focus-within .linea-familias__acceso,
.linea-familias__item.is-open .linea-familias__acceso{ color:var(--brand-strong); }
.linea-familias__icono{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--brand);
}
.linea-familias__acceso--unidad .linea-familias__icono{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
}
.linea-familias__nombre{ min-width:0; }
.linea-familias__desplegar{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  min-height:44px;
  margin:auto 4px auto 0;
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
}
.linea-familias__desplegar:hover{ background:var(--surface-3); color:var(--brand-strong); }
.linea-familias__desplegar svg{ transition:transform var(--dur) var(--ease-out); }
.linea-familias__item:hover .linea-familias__desplegar svg,
.linea-familias__item:focus-within .linea-familias__desplegar svg,
.linea-familias__item.is-open .linea-familias__desplegar svg{ transform:rotate(180deg); }

.linea-familias__submenu{
  position:absolute;
  top:100%;
  left:-1px;
  width:min(440px,calc(100vw - 32px));
  padding:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-pop);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.linea-familias__item:nth-last-child(-n+2) .linea-familias__submenu{
  right:-1px;
  left:auto;
}
.linea-familias__item:hover .linea-familias__submenu,
.linea-familias__item:focus-within .linea-familias__submenu,
.linea-familias__item.is-open .linea-familias__submenu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.linea-familias__submenu-titulo{
  margin-bottom:9px;
  color:var(--brand-strong);
}
.linea-familias__submenu-rejilla{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 12px;
}
.linea-familias__submenu-rejilla a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:7px 9px;
  border-radius:var(--radius-sm);
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:600;
}
.linea-familias__submenu-rejilla a:hover,
.linea-familias__submenu-rejilla a:focus-visible{
  background:var(--surface-2);
  color:var(--brand-strong);
}
.linea-familias__submenu-rejilla small{
  flex:none;
  color:var(--text-3);
  font-size:var(--fs-micro);
  font-weight:400;
}

/* Escritorio angosto (900-1099px): la línea de familias son 6 columnas fijas,
   así que a 910px cada una mide ~150px y "Partes de motor de partida" se parte
   en tres renglones. Se le quita el ícono y se achica el nombre: los seis
   accesos siguen a la vista en una sola fila, que es de lo que se trata. */
@media (min-width:900px) and (max-width:1099px){
  .linea-familias__icono{ display:none; }
  .linea-familias__nombre{ font-size:13px; }
}

/* El botón y el panel lateral reemplazan la línea al estrecharse la pantalla. */
.btn-menu-movil,
.menu-categorias{ display:none; }
.menu-categorias[hidden]{ display:none !important; }
body.menu-categorias-abierto{ overflow:hidden; }

@media (max-width:899px){
  .barra-familias{ display:none; }
  .nav{ display:none; }
  .btn-menu-movil{
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:var(--surface);
    color:var(--text-2);
    cursor:pointer;
  }
  .btn-menu-movil:hover,
  .btn-menu-movil[aria-expanded="true"]{
    border-color:var(--brand);
    color:var(--brand-strong);
    background:var(--brand-soft);
  }
  .menu-categorias{
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:block;
  }
  .menu-categorias__fondo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(20,24,28,.48);
    cursor:pointer;
    animation:aparecer var(--dur) var(--ease-out);
  }
  .menu-categorias__panel{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(88vw,400px);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--surface);
    box-shadow:-12px 0 32px rgba(0,0,0,.18);
    animation:menu-entrar var(--dur-slow) var(--ease-out);
  }
  .menu-categorias__cabecera{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:72px;
    padding:14px 18px;
    background:var(--slate-deep);
    color:#fff;
  }
  .menu-categorias__cabecera h2{
    font-size:var(--fs-xl);
    line-height:1;
  }
  .menu-categorias__cerrar{
    position:relative;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:transparent;
    color:#fff;
    cursor:pointer;
  }
  .menu-categorias__cerrar::before,
  .menu-categorias__cerrar::after{
    content:"";
    position:absolute;
    top:20px;
    left:10px;
    width:22px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transform:rotate(45deg);
  }
  .menu-categorias__cerrar::after{ transform:rotate(-45deg); }
  .menu-categorias__vista{ padding:18px; }
  .menu-categorias__entrada,
  .menu-categorias__subfamilia{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-height:56px;
    padding:10px 4px;
    border:0;
    border-bottom:1px solid var(--line);
    background:transparent;
    color:var(--text);
    text-align:left;
    font-family:inherit;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
  }
  .menu-categorias__entrada:hover,
  .menu-categorias__subfamilia:hover{ color:var(--brand-strong); }
  .menu-categorias__secundarios{
    display:grid;
    gap:2px;
    margin-top:22px;
    padding-top:12px;
    border-top:2px solid var(--line);
  }
  .menu-categorias__secundarios a{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:8px 4px;
    color:var(--text-2);
    font-size:16px;
    font-weight:600;
  }
  .menu-categorias__secundarios a:hover{ color:var(--brand-strong); }
  .menu-categorias__volver{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    margin:-4px 0 10px;
    padding:0 6px;
    border:0;
    background:transparent;
    color:var(--text-2);
    font-size:var(--fs-base);
    font-weight:700;
    cursor:pointer;
  }
  .menu-categorias__rama{
    padding:0 4px 10px;
    font-size:24px;
    line-height:var(--lh-tight);
  }
  .menu-categorias__rama:focus{ outline:0; }
  .menu-categorias__todos{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin:0 4px 8px;
    color:var(--brand-strong);
    font-weight:700;
  }
  .menu-categorias__subfamilia{
    min-height:52px;
    font-size:16px;
    font-weight:600;
  }
  .menu-categorias__subfamilia small{
    color:var(--text-3);
    font-size:var(--fs-xs);
    font-weight:400;
  }
}

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{ padding-block: var(--sp-6); }
.seccion__cabeza{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap:wrap;
}
.seccion__titulo{
  font-size: var(--fs-xl); font-weight:700;
  letter-spacing: -0.01em; line-height: var(--lh-tight);
}
.seccion__sub{ font-size: var(--fs-xs); color: var(--text-3); }
.titulo-pantalla{
  font-size: var(--fs-2xl); font-weight:700;
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
}

/* ============================================================
   GRILLA DE TARJETAS
   ============================================================ */
.grilla-productos{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(244px,1fr));
  gap: var(--gap-grid);
}

.tarjeta{
  position:relative; display:flex; flex-direction:column;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.tarjeta:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}
.tarjeta__figura{
  position:relative; aspect-ratio: 1.4 / 1;
  background: var(--surface-2); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.tarjeta__figura img{ width:100%; height:100%; object-fit:contain; }
.tarjeta__chips{
  position:absolute; top: var(--sp-2); left: var(--sp-2);
  display:flex; flex-direction:column; gap: var(--sp-1); align-items:flex-start;
}
.chip{
  font-size: var(--fs-micro); font-weight:700; line-height:1;
  padding:4px 6px; border-radius: var(--radius-xs);
}
.chip--desc{ background: var(--brand); color:#fff; }
.chip--bajo{ background: var(--warn-vivid); color:#3A2A00; }
.chip--pedido{ background: var(--surface); color: var(--text-3); border:1px solid var(--line); }
.insignia-marca{
  position:absolute; top: var(--sp-2); right: var(--sp-2);
  font-size: var(--fs-micro); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color:#fff;
  padding:4px 6px; border-radius: var(--radius-xs);
  background: var(--slate);
}
.tarjeta__cuerpo{
  display:flex; flex-direction:column; gap:6px;
  padding: 10px 12px 12px; flex:1 1 auto;
}
.tarjeta__sku-fila{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-2); }
.tarjeta__sku{ font-size: var(--fs-micro); font-weight:700; color: var(--go-strong); }
.tarjeta__aplic{ display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-micro); color: var(--text-3); }
.tarjeta__aplic svg{ width:13px; height:13px; }
.tarjeta__nombre{
  font-size: var(--fs-sm); font-weight:500; line-height: var(--lh-snug);
  color: var(--text); min-height:36px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tarjeta__specs{ display:flex; flex-wrap:wrap; gap:4px; }
.spec{
  font-size: var(--fs-micro); color: var(--text-3);
  border:1px solid var(--line); border-radius: var(--radius-xs);
  padding:2px 5px; line-height:1.3;
}
.tarjeta__stock{
  margin-top:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size: var(--fs-xs); color: var(--text-3);
}
.semaforo{ width:8px; height:8px; border-radius:50%; flex:none; }
.semaforo--alto{ background: var(--go); box-shadow:0 0 0 2px var(--go-ring); }
.semaforo--bajo{ background: var(--warn-vivid); box-shadow:0 0 0 2px rgba(245,158,11,.18); }
.semaforo--nulo{ background: var(--brand); box-shadow:0 0 0 2px rgba(200,38,44,.15); }
.tarjeta__entrega{ display:inline-flex; align-items:center; gap:4px; }
.tarjeta__entrega svg{ width:13px; height:13px; }
.tarjeta__pie{
  display:flex; align-items:flex-end; justify-content:space-between; gap: var(--sp-2);
  padding-top: var(--sp-2); margin-top: var(--sp-1);
  border-top:1px dashed var(--line);
}
.precio{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.precio__encabezado{
  display:block;
  color:var(--text-2);
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.2;
}
/* .precio__tachado se define junto al resto del bloque de precio, al final. */
.precio__valor{
  font-size: var(--fs-lg); font-weight:700; letter-spacing: var(--tracking-tight);
  color: var(--text);
}
/* En el listado, el precio final es la cifra principal de compra. Usa la
   negrita moderada de la tipografía de interfaz para distinguirlo del stock,
   sin alterar el precio de lista tachado ni otras vistas de precio. */
.fila__precio .precio__valor{
  font-family:var(--font-ui);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.precio__nota{ font-size: var(--fs-micro); color: var(--text-3); }

/* ============================================================
   FILA DE PRODUCTO — la vista por defecto
   ============================================================ */
.tabla-envoltorio{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); overflow:hidden;
}
.tabla-desplazable{ overflow-x:auto; }
.filas{ min-width: 1080px; }
.fila,
.filas__cabeza{
  display:grid;
  grid-template-columns: 52px 108px minmax(180px,1fr) minmax(220px,1.4fr) 96px 116px 132px 152px;
  gap: var(--gap-grid);
  padding: 10px var(--sp-4);
  align-items:center;
}
.filas__cabeza{
  position: sticky; top:0; z-index:2;
  background: var(--surface-2);
  border-bottom:1px solid var(--line);
  color: var(--text-2);
}
.filas__cabeza .caps{ color: var(--text-2); }
.filas__orden{
  background:none; border:0; padding:2px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.filas__orden:hover{ color: var(--text); }
.fila{
  position:relative; min-height: var(--row-min-h);
  border-bottom:1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.fila:last-child{ border-bottom:0; }
.fila:hover{ background: var(--surface-2); }
.fila:hover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--go);
}
.fila__mini{
  width:52px; height:48px; border-radius: var(--radius-sm);
  background: var(--surface-2); overflow:hidden; flex:none;
}
.fila__mini img{ width:100%; height:100%; object-fit:contain; }
.fila__sku{ font-size:12.5px; font-weight:700; color: var(--text); }
.fila__oe{ font-size: var(--fs-micro); color: var(--text-3); margin-top:2px; }
.fila__oe .mono{ color: var(--text-2); }
.fila__categoria{ color: var(--text-3); }
.fila__nombre{
  font-size:13.5px; font-weight:600; line-height: var(--lh-snug); color: var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.coincidencia-busqueda{
  display:flex; align-items:flex-start; gap:5px;
  margin:4px 0 0;
  color: var(--text-3);
  font-size: var(--fs-xs); font-weight:600; line-height:1.3;
}
.coincidencia-busqueda > span{
  flex:0 0 auto; color: var(--brand); line-height:1.15;
}
.coincidencia-busqueda--tarjeta{ min-height:2.1em; }
.fila__desc{
  font-size:12.5px; color: var(--text-3); line-height: var(--lh-snug);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fila__specs{ display:flex; gap: var(--sp-2); margin-top:4px; flex-wrap:wrap; }
.fila__specs span{ font-size: var(--fs-micro); color: var(--text-3); display:inline-flex; gap:3px; align-items:center; }
.fila__stock{ display:flex; flex-direction:column; gap:2px; font-size: var(--fs-xs); color: var(--text-3); }
.fila__stock-linea{ display:inline-flex; align-items:center; gap:6px; }
.fila-stock-total{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  align-items:center;
  column-gap:7px;
  margin-bottom:7px;
}
.fila-stock-total > .semaforo{
  grid-row:1 / span 2;
  align-self:start;
  margin-top:6px;
  width:9px;
  height:9px;
}
.fila-stock-total__cantidad{
  display:flex;
  align-items:baseline;
  gap:4px;
  min-width:0;
}
.fila-stock-total__valor{
  color:var(--text);
  font-size:var(--fs-lg);
  font-weight:750;
  line-height:1;
  letter-spacing:var(--tracking-tight);
}
.fila-stock-total__unidad{
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
}
.fila-stock-total__leyenda{
  grid-column:2;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.15;
}
.fila__stock-entrega{
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.25;
}
.fila__precio{ text-align:right; }
.fila__precio .valor{ font-size:15px; font-weight:700; color: var(--text); }
.fila__precio .caps{ color: var(--text-3); display:block; margin-top:2px; }
.fila__acciones{ display:flex; align-items:center; justify-content:flex-end; gap: var(--sp-2); }

/* ── Conmutador de densidad ──────────────────────────────── */
.barra-resultados{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-3); flex-wrap:wrap; margin-bottom: var(--sp-3);
}
.barra-resultados__conteo{ font-size: var(--fs-xs); color: var(--text-3); }
.conmutador{
  display:inline-flex; background: var(--surface-2);
  border-radius: var(--radius-sm); padding:3px; gap:3px;
}
.conmutador a{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 12px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight:600; color: var(--text-3);
}
.conmutador a[aria-current="true"]{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.conmutador svg{ width:14px; height:14px; }

.catalogo-herramientas{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.ordenador-catalogo{
  display:flex;
  align-items:center;
  gap:8px;
}
.ordenador-catalogo label{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:600;
  white-space:nowrap;
}
.ordenador-catalogo select{
  height:38px;
  min-width:190px;
  padding:0 34px 0 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-2);
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  font-weight:600;
  cursor:pointer;
}
.ordenador-catalogo select:hover{ border-color:var(--line-strong); }
.ordenador-catalogo select:focus-visible{
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.catalogo-pdf{
  position:relative;
}
.catalogo-pdf > summary{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-2);
  font-size:var(--fs-xs);
  font-weight:700;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.catalogo-pdf > summary::-webkit-details-marker{ display:none; }
.catalogo-pdf > summary::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-fast) var(--ease-out);
}
.catalogo-pdf[open] > summary{
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.catalogo-pdf[open] > summary::after{
  transform:rotate(225deg) translate(-1px,-1px);
}
.catalogo-pdf__panel{
  position:absolute;
  z-index:25;
  top:calc(100% + 8px);
  right:0;
  width:min(340px, calc(100vw - 32px));
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.catalogo-pdf__cabeza{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}
.catalogo-pdf__cabeza strong{
  font-size:var(--fs-sm);
  color:var(--text);
}
.catalogo-pdf__cabeza span,
.catalogo-pdf__cliente{
  color:var(--text-3);
  font-size:var(--fs-micro);
}
.catalogo-pdf__cliente{
  margin:0 0 11px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.catalogo-pdf__cliente strong{ color:var(--text-2); }
.catalogo-pdf__limite{
  margin:0 0 11px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:var(--fs-micro);
  line-height:1.35;
}
.catalogo-pdf__limite strong{ color:var(--text-2); }
.catalogo-pdf__limite--activo{
  border-color:rgba(181, 112, 0, .34);
  background:var(--warn-soft);
  color:var(--warn);
}
.catalogo-pdf__form{
  display:grid;
  gap:8px;
}
.catalogo-pdf__opcion{
  width:100%;
  min-height:55px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.catalogo-pdf__opcion:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.catalogo-pdf__opcion--principal{
  border-color:var(--go);
  background:var(--go-soft);
}
.catalogo-pdf__opcion strong{ font-size:var(--fs-xs); }
.catalogo-pdf__opcion span{
  color:var(--text-3);
  font-size:var(--fs-micro);
}
.catalogo-pdf__opcion:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.catalogo-pdf__aviso{
  display:grid;
  gap:4px;
  padding-top:6px;
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.catalogo-pdf__aviso strong{ color:var(--text); }
.catalogo-pdf__aviso a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  border-radius:var(--radius-sm);
  background:var(--go);
  color:#fff;
  font-weight:700;
}

/* ── Chips de filtro activo ──────────────────────────────── */
.filtros-activos{ display:flex; gap: var(--sp-2); flex-wrap:wrap; align-items:center; }
.chip-filtro{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--go-soft); color: var(--go-strong);
  border-radius: var(--radius-xs); min-height:44px; padding:8px 12px;
  font-size: var(--fs-sm); font-weight:650;
  position:relative;
}
.chip-filtro::after{ content:""; position:absolute; inset:-8px; }
.chip-filtro__x{ margin-left:2px; font-size:1.15em; line-height:1; font-weight:800; }
.limpiar-todos{
  display:inline-flex; align-items:center;
  background:none; border:0; cursor:pointer;
  color: var(--brand); min-height:44px; font-size: var(--fs-sm); font-weight:650;
  padding:8px; position:relative;
}
.limpiar-todos::after{ content:""; position:absolute; inset:-6px; }
.limpiar-todos:hover{ color: var(--brand-strong); text-decoration: underline; }

/* ── Paginación ──────────────────────────────────────────── */
.paginacion{
  display:flex; align-items:center; justify-content:center; gap: var(--sp-2);
  margin-top: var(--sp-5); flex-wrap:wrap;
}
.paginacion a, .paginacion span{
  min-width: var(--tap-min); min-height: var(--tap-min);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border-radius: var(--radius-sm);
  border:1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sm); font-weight:600;
}
.paginacion a:hover{ border-color: var(--line-strong); background: var(--surface-2); }
.paginacion [aria-current="page"]{ background: var(--brand); border-color: var(--brand); color:#fff; }
.paginacion .inhabil{ color: var(--text-faint); border-style:dashed; }
.paginacion__paginas{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); }
.paginacion .paginacion__elipsis{
  min-width:24px;
  padding:0;
  border-color:transparent;
  background:transparent;
  color:var(--text-3);
}

@media (max-width: 760px){
  .paginacion{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .paginacion__paginas{
    grid-column:1 / -1;
    grid-row:1;
    gap:6px;
  }
  .paginacion__paginas a,
  .paginacion__paginas span{
    min-width:40px;
    min-height:40px;
    padding-inline:8px;
  }
  .paginacion__direccion{ width:100%; }
  .paginacion__direccion--anterior{ grid-column:1; grid-row:2; }
  .paginacion__direccion--siguiente{ grid-column:2; grid-row:2; }
}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.migas{ font-size: var(--fs-xs); color: var(--text-3); padding-top: var(--sp-4); }
.migas a:hover{ color: var(--text); text-decoration: underline; }
.migas span{ margin-inline:6px; opacity:.6; }

.ficha{
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-6); padding-block: var(--sp-5); align-items:start;
}
.ficha__medios{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  position:relative; align-self:start; min-width:0;
}
.ficha__foto{
  aspect-ratio: 4/3; background: var(--surface-2);
  border-radius: var(--radius-lg); overflow:hidden;
  display:grid; place-items:center; position:relative;
}
.ficha__foto img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
}
.ficha__datos{ display:flex; flex-direction:column; gap: var(--sp-4); min-width:0; }
.ficha__encabezado{ display:flex; flex-direction:column; gap: var(--sp-2); }
/* El código es el dato con el que el cliente cotiza, pide por teléfono y
   compara con la competencia: iba a 13px, más chico incluso que la tira
   técnica de abajo. Varios clientes reclamaron que no se leía. */
.ficha__sku{
  font-size: 21px; font-weight:700; color: var(--go-strong);
  letter-spacing:.01em; line-height:1.2;
}
.ficha__titulo{
  font-size: var(--fs-2xl); font-weight:700;
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
}
.ficha__marca{ display:inline-flex; align-items:center; gap: var(--sp-2); }
.ficha__tira-tecnica{ display:flex; flex-wrap:wrap; gap:6px; }
.ficha__tira-tecnica > span{
  display:inline-flex; align-items:center; min-height:26px;
  padding:4px 9px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-sm); font-weight:600;
}
.ficha__tira-tecnica .ficha__spec-vacio{
  border-style:dashed; background:transparent; color:var(--text-3); font-weight:500;
}

.ficha__descripcion{
  display:grid; gap:6px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  padding:var(--sp-3) var(--sp-4);
}
.ficha__descripcion-titulo{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  line-height:1.2;
  text-transform:uppercase;
}
/* La descripción trae códigos OE y aplicaciones: se lee carácter por carácter,
   no de corrido. A 13px los clientes reclamaron que no se distinguía un 0 de
   una O. Al subir la letra se sube también el alto de la caja, para que no se
   vea MENOS texto de una vez. */
.ficha__descripcion-cuerpo{
  max-height:150px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:var(--sp-2);
  color:var(--text-2);
  font-size:15px;
  line-height:1.6;
  overflow-wrap:anywhere;
  scrollbar-width:thin;
}
.ficha__descripcion-cuerpo:focus-visible{
  outline:2px solid var(--go-strong);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.ficha__descripcion--larga .ficha__descripcion-cuerpo{
  box-shadow:inset 0 -12px 10px -14px rgba(18, 24, 28, .35);
}
.ficha__descripcion-ayuda{
  display:none;
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:600;
}

.caja-precio{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  display:flex; flex-direction:column; gap: var(--sp-3);
}
.caja-precio__resumen{
  display:grid;
  grid-template-columns:minmax(150px,.78fr) minmax(250px,1.22fr);
  gap:var(--sp-4);
  align-items:center;
}
.caja-precio__comercial{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  min-width:0;
}
.caja-precio__disponibilidad{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
.caja-precio__disponibilidad .tarjeta__stock{
  justify-content:flex-end;
  margin:0;
  text-align:right;
}
.caja-precio__monto{
  font-size: var(--fs-2xl); font-weight:700;
  letter-spacing: var(--tracking-tight); line-height:1;
}
.caja-precio__linea{ display:flex; align-items:baseline; gap: var(--sp-2); flex-wrap:wrap; }
.caja-precio__acciones{ display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.caja-precio__acciones .btn--agregar{ flex:1 1 200px; font-size: var(--fs-base); }
.cantidad{
  display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius: var(--radius-sm); overflow:hidden; background: var(--surface);
}
.cantidad button{
  width:38px; min-height: var(--tap-min); border:0; background: var(--surface-2);
  cursor:pointer; font-size: var(--fs-md); font-weight:700; color: var(--text-2);
}
.cantidad button:hover{ background: var(--surface-3); }
.cantidad input{
  width:56px; border:0; text-align:center; font-family: var(--font-mono);
  font-size: var(--fs-base); font-weight:600; background: var(--surface);
}
.cantidad input:focus-visible{ box-shadow: var(--focus-ring); }

.especificaciones{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); overflow:hidden;
}
.especificaciones caption{
  text-align:left; padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-bottom:1px solid var(--line);
  color: var(--text-2);
}
.especificaciones th,.especificaciones td{
  text-align:left; padding: 10px var(--sp-4);
  border-bottom:1px solid var(--line); font-size: var(--fs-sm);
  vertical-align: top;
}
.especificaciones tr:last-child th,.especificaciones tr:last-child td{ border-bottom:0; }
.especificaciones th{ font-weight:600; color: var(--text-3); width:38%; }
.especificaciones td{ color: var(--text); }

/* PANEL TÉCNICO RELMOTOR: una especificación es una ficha corta; aplicaciones,
   usado en y referencias son conjuntos extensos. No se les fuerza el mismo
   ancho ni se duplica su navegación. */
.ficha-tecnica-resumen{
  display:grid;
  grid-template-columns:minmax(0, 680px) minmax(280px, 1fr);
  gap:var(--sp-4);
  align-items:start;
  margin-bottom:var(--sp-3);
}
.ficha-tecnica-resumen--solo{ grid-template-columns:minmax(0, 680px); }
.ficha-tecnica-resumen .ficha-bloque{ margin-bottom:0; }

.ficha-relaciones{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.ficha-relaciones__cabeza{
  padding:var(--sp-4);
  border-bottom:1px solid var(--line);
  background:linear-gradient(110deg, var(--surface-2), var(--surface));
}
.ficha-relaciones__cabeza h2{
  margin-top:4px;
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
}
.ficha-relaciones__cabeza p{
  margin-top:6px;
  color:var(--text-3);
  font-size:var(--fs-sm);
}
.ficha-relaciones__lista{ display:grid; }
.ficha-relaciones__lista a{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) auto 8px;
  align-items:center;
  gap:var(--sp-3);
  min-height:64px;
  padding:10px var(--sp-4);
  border-bottom:1px solid var(--line);
  color:var(--text-2);
}
.ficha-relaciones__lista a:last-child{ border-bottom:0; }
.ficha-relaciones__lista a::after{
  content:"";
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  opacity:.55;
  transform:rotate(45deg);
  transition:transform .15s ease, opacity .15s ease;
}
.ficha-relaciones__lista a:hover,
.ficha-relaciones__lista a:focus-visible{
  color:var(--text);
  background:var(--surface-2);
}
.ficha-relaciones__lista a:hover::after,
.ficha-relaciones__lista a:focus-visible::after{
  opacity:1;
  transform:translateX(2px) rotate(45deg);
}
.ficha-relaciones__icono{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface-2);
  color:var(--brand);
}
.ficha-relaciones__texto{
  display:grid;
  gap:2px;
  min-width:0;
}
.ficha-relaciones__texto strong{
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:1.25;
}
.ficha-relaciones__texto small{
  overflow:hidden;
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ficha-relaciones__n{
  min-width:28px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:var(--fs-xs);
  text-align:center;
}

.ficha-bloque,
.panel[id]{ scroll-margin-top:210px; }
.ficha-bloque{
  margin-bottom:var(--sp-3); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface);
}
.ficha-bloque__cabeza{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, var(--surface-2), var(--surface));
}
.ficha-bloque__cabeza h2{
  margin-top:4px; font-size:var(--fs-xl); line-height:var(--lh-tight);
}
.ficha-bloque__fuente{ color:var(--text-3); font-size:var(--fs-xs); }
.ficha-bloque__cuerpo{ padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.ficha-bloque .especificaciones{
  width:100%; border:0; border-radius:0; background:transparent;
}
.ficha-bloque .especificaciones th{
  width:32%; background:var(--surface-2); color:var(--text-2);
}
.ficha-bloque .especificaciones tr:nth-child(even) td{ background:#FAFAF8; }

.aplicaciones-herramientas{
  display:grid; gap:7px; padding:var(--sp-3) 0 var(--sp-4);
}
.aplicaciones-herramientas label{
  color:var(--text-2); font-size:var(--fs-sm); font-weight:700;
}
.aplicaciones-herramientas__fila{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.aplicaciones-herramientas input{
  flex:1 1 320px; min-width:0; min-height:var(--tap-min);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); padding:9px 12px; color:var(--text);
}
.aplicaciones-herramientas input:focus-visible{
  border-color:var(--go); box-shadow:var(--focus-ring); outline:0;
}
.aplicaciones-herramientas__estado{
  color:var(--text-3); font-size:var(--fs-sm); white-space:nowrap;
}
.aplicaciones-aviso-movil{
  display:none; margin:0 0 var(--sp-2);
  color:var(--text-3); font-size:var(--fs-xs);
}
.tabla-ficha-contenedor{
  max-width:100%; overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.aplicaciones-tabla{ min-width:680px; }
.aplicaciones-tabla th{
  padding:11px 14px; background:#F3F1EB; color:var(--text-2);
  border-bottom:1px solid var(--line);
}
.aplicaciones-tabla td{ padding:11px 14px; color:var(--text); }
.aplicaciones-tabla tbody tr:nth-child(even){ background:#F7F5EF; }
.aplicaciones-tabla tbody tr:hover{ background:#F1F5F3; }
.aplicaciones-tabla tr[hidden]{ display:none; }
.aplicaciones-tabla th:first-child,
.aplicaciones-tabla td:first-child{ width:24%; font-weight:650; }
.aplicaciones-tabla th:nth-child(2),
.aplicaciones-tabla td:nth-child(2){ width:30%; }
.aplicaciones-tabla th:nth-child(3),
.aplicaciones-tabla td:nth-child(3){ width:28%; }
.aplicaciones-pie{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  flex-wrap:wrap; padding-top:var(--sp-4);
}
.aplicaciones-pie .panel__nota{ margin:0; }

/* ============================================================
   MI CUENTA
   ============================================================ */
.cuenta{
  display:grid; grid-template-columns: 232px minmax(0,1fr);
  gap: var(--sp-5); padding-block: var(--sp-5);
}
.cuenta__menu{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-2);
  align-self:start; position: sticky; top: calc(var(--header-main-h) + var(--header-utility-h) + var(--sp-3));
}
.cuenta__menu a{
  display:flex; align-items:center; gap: var(--sp-2);
  padding: 10px var(--sp-3); min-height: var(--tap-min);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight:600;
  color: var(--text-2);
}
.cuenta__menu a:hover{ background: var(--surface-2); color: var(--text); }
.cuenta__menu a[aria-current="page"]{ background: var(--go-soft); color: var(--go-strong); }
.cuenta__menu svg{ width:16px; height:16px; flex:none; }

.tarjetas-kpi{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: var(--gap-grid); margin-bottom: var(--sp-5);
}
.kpi{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display:flex; flex-direction:column; gap:6px;
}
.kpi__etiqueta{ color: var(--text-3); }
.kpi__valor{ font-size: var(--fs-2xl); font-weight:700; letter-spacing: var(--tracking-tight); line-height:1; }
.kpi__pie{ font-size: var(--fs-xs); color: var(--text-3); }
.kpi--alerta .kpi__valor{ color: var(--brand); }
.kpi--bien .kpi__valor{ color: var(--go-strong); }

.tarjetas-kpi--cuenta{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cuenta-aviso{ margin-bottom:var(--sp-4); }
.cuenta-alerta-vencida{
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap-min); margin-bottom:var(--sp-4); padding:10px var(--sp-3);
  color:var(--brand-strong); background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius:var(--radius-md);
}
.cuenta-alerta-vencida strong{ margin-left:auto; white-space:nowrap; }
.cuenta-ejecutivo{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-xl); padding:var(--sp-4);
}
.cuenta-ejecutivo__icono{
  display:grid; place-items:center; width:48px; height:48px;
  color:var(--go-strong); background:var(--go-soft); border-radius:50%;
}
.cuenta-ejecutivo__contenido p{ margin:0; color:var(--text-3); font-size:var(--fs-sm); }
.cuenta-ejecutivo__contenido .caps{ font-size:var(--fs-micro); }
.cuenta-ejecutivo__contenido h2{ margin:2px 0; font-size:var(--fs-lg); }

.cuenta-perfil-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--sp-4);
}
.cuenta-bloque{
  min-width:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-xl); padding:var(--sp-5);
}
.cuenta-seguridad{ align-self:start; }
.cuenta-bloque__cabeza{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.cuenta-bloque__cabeza svg{ color:var(--text-3); flex:none; }
.cuenta-bloque__cabeza h2{ margin:2px 0 0; font-size:var(--fs-xl); }
.cuenta-bloque__sobrelinea{ margin:0; color:var(--text-3); font-size:var(--fs-micro); }
.cuenta-bloque__nota{ color:var(--text-3); font-size:var(--fs-sm); line-height:var(--lh-base); }
.cuenta-datos{ margin:0; }
.cuenta-dato{
  display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);
  gap:var(--sp-3); padding:12px 0; border-bottom:1px solid var(--line);
}
.cuenta-dato:first-child{ padding-top:0; }
.cuenta-dato:last-child{ border-bottom:0; }
.cuenta-dato dt{ color:var(--text-3); font-size:var(--fs-sm); }
.cuenta-dato dd{ min-width:0; margin:0; font-weight:600; overflow-wrap:anywhere; }
.cuenta-form-grid{ display:grid; gap:var(--sp-3); }
.cuenta-campo{ display:grid; gap:6px; color:var(--text-2); font-size:var(--fs-sm); font-weight:600; }
.cuenta-campo input{
  width:100%; min-height:var(--tap-min); padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--text); background:var(--surface);
}
.cuenta-campo input:focus-visible{
  outline:3px solid color-mix(in srgb, var(--go) 35%, transparent);
  outline-offset:1px; border-color:var(--go-strong);
}
.cuenta-form-clave__accion{ min-height:var(--tap-min); margin-top:var(--sp-3); }

/* Guía voluntaria de la nueva tienda. Se muestra dentro de Mi cuenta y nunca
   interrumpe la navegación con una apertura automática. */
.cuenta-guia-tienda{
  flex:0 0 auto;
  min-height:var(--tap-min);
}
.cuenta-guia-tienda__icono{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  padding-left:2px;
  border-radius:50%;
  background:var(--brand-soft);
  color:var(--brand-strong);
  font-size:10px;
}
.onboarding-cuenta{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);
  margin-bottom:var(--sp-5);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.onboarding-cuenta[hidden]{ display:none !important; }
.onboarding-cuenta::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--brand);
}
.onboarding-cuenta__contenido{
  min-width:0;
  padding:clamp(20px,3vw,32px) clamp(20px,3.5vw,40px);
}
.onboarding-cuenta__sobrelinea{
  margin-bottom:6px;
  color:var(--brand-strong);
}
.onboarding-cuenta h2{
  max-width:24ch;
  font-size:clamp(24px,2.5vw,32px);
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
}
.onboarding-cuenta__texto{
  max-width:66ch;
  margin-top:var(--sp-3);
  color:var(--text-2);
  font-size:var(--fs-md);
}
.onboarding-cuenta__acciones{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.onboarding-cuenta__video span:first-child{
  font-size:10px;
  transform:translateX(1px);
}
.onboarding-cuenta__ruta{
  position:relative;
  min-width:0;
  padding:clamp(20px,3vw,32px);
  background:var(--slate-deep);
  color:var(--slate-ink);
}
.onboarding-cuenta__ruta > .caps{
  color:var(--slate-mint);
  font-size:var(--fs-xs);
}
.onboarding-cuenta__ruta ol{
  position:relative;
  display:grid;
  gap:var(--sp-3);
  margin:var(--sp-4) 0 0;
  padding:0;
  list-style:none;
}
.onboarding-cuenta__ruta ol::before{
  content:"";
  position:absolute;
  top:17px;
  bottom:17px;
  left:17px;
  width:2px;
  background:var(--brand);
}
.onboarding-cuenta__ruta li{
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:var(--sp-3);
  min-height:36px;
}
.onboarding-cuenta__ruta li span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:2px solid color-mix(in srgb,var(--brand) 72%,white);
  border-radius:50%;
  background:var(--slate-deep);
  color:#fff;
  font-size:var(--fs-micro);
}
.onboarding-cuenta__ruta li strong{
  color:#fff;
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}

.onboarding-dialogo.stock-detalle{
  width:min(1040px,calc(100vw - 32px));
  max-width:1040px;
  max-height:calc(100dvh - 32px);
}
.onboarding-dialogo__cuerpo{
  padding:var(--sp-5);
}
.onboarding-dialogo__cabeza{
  padding-bottom:var(--sp-3);
}
.onboarding-dialogo__descripcion{
  margin:var(--sp-3) 0 var(--sp-4);
  color:var(--text-2);
  font-size:var(--fs-md);
}
.onboarding-dialogo__video{
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#111;
}
.onboarding-dialogo__video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.onboarding-dialogo__capitulos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-2);
  margin:var(--sp-4) 0 0;
  padding:0;
  list-style:none;
}
.onboarding-dialogo__capitulos li{
  display:grid;
  gap:2px;
  min-width:0;
  padding:9px 10px;
  border-left:2px solid var(--brand);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
}
.onboarding-dialogo__capitulos .mono{
  color:var(--brand-strong);
  font-size:var(--fs-micro);
  font-weight:700;
}
.onboarding-dialogo__transcripcion{
  margin-top:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.onboarding-dialogo__transcripcion summary{
  min-height:var(--tap-min);
  padding:11px var(--sp-3);
  color:var(--text-2);
  font-weight:600;
  cursor:pointer;
}
.onboarding-dialogo__transcripcion[open] summary{
  border-bottom:1px solid var(--line);
}
.onboarding-dialogo__transcripcion > div{
  display:grid;
  gap:var(--sp-3);
  max-width:78ch;
  padding:var(--sp-4);
  color:var(--text-2);
}
.onboarding-dialogo__pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  color:var(--text-3);
  font-size:var(--fs-xs);
}

@media (max-width:1024px){
  .tarjetas-kpi--cuenta{ grid-template-columns:repeat(3,minmax(170px,1fr)); }
  .cuenta-perfil-grid{ grid-template-columns:1fr; }
  .onboarding-cuenta{ grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr); }
}
@media (max-width:720px){
  .tarjetas-kpi--cuenta{ grid-template-columns:1fr; }
  .cuenta-ejecutivo{ grid-template-columns:auto minmax(0,1fr); }
  .cuenta-ejecutivo .btn{ grid-column:1 / -1; width:100%; min-height:var(--tap-min); }
  .cuenta-alerta-vencida{ align-items:flex-start; flex-wrap:wrap; }
  .cuenta-alerta-vencida strong{ width:100%; margin-left:26px; }
  .cuenta-bloque{ padding:var(--sp-4); }
  .cuenta-dato{ grid-template-columns:1fr; gap:4px; }
  .cuenta-guia-tienda{ width:100%; }
  .onboarding-cuenta{ grid-template-columns:1fr; }
  .onboarding-cuenta__contenido{ padding:var(--sp-5) var(--sp-4); }
  .onboarding-cuenta h2{ font-size:var(--fs-xl); }
  .onboarding-cuenta__texto{ font-size:var(--fs-base); }
  .onboarding-cuenta__acciones{ align-items:stretch; flex-direction:column; }
  .onboarding-cuenta__acciones .btn{ width:100%; }
  .onboarding-cuenta__ruta{ padding:var(--sp-4); }
  .onboarding-cuenta__ruta ol{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-3);
  }
  .onboarding-cuenta__ruta ol::before{ display:none; }
  .onboarding-cuenta__ruta li{
    grid-template-columns:32px minmax(0,1fr);
    gap:var(--sp-2);
  }
  .onboarding-cuenta__ruta li span{ width:32px; height:32px; font-size:var(--fs-micro); }
  .onboarding-cuenta__ruta li strong{ font-size:var(--fs-xs); }
  .onboarding-dialogo.stock-detalle{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
  }
  .onboarding-dialogo__cuerpo{ padding:var(--sp-3); }
  .onboarding-dialogo__descripcion{ font-size:var(--fs-sm); }
  .onboarding-dialogo__capitulos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .onboarding-dialogo__pie{ align-items:stretch; flex-direction:column; }
  .onboarding-dialogo__pie .btn{ width:100%; }
}

.tabla-datos{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); overflow:hidden;
}
.tabla-datos .tabla-desplazable{ overflow-x:auto; }
.tabla-datos table{ min-width: 720px; }
.tabla-datos th{
  background: var(--surface-2); text-align:left;
  padding: 10px var(--sp-4); border-bottom:1px solid var(--line);
  color: var(--text-2); white-space:nowrap;
}
.tabla-datos td{
  padding: 12px var(--sp-4); border-bottom:1px solid var(--line);
  font-size: var(--fs-sm); vertical-align:middle;
}
.tabla-datos tr:last-child td{ border-bottom:0; }
.tabla-datos tbody tr:hover{ background: var(--surface-2); }
.num{ text-align:right; }
.cuenta-documentos__tabla .cuenta-documentos__total{ text-align:center; }

.estado{
  display:inline-flex; align-items:center; gap:5px;
  font-size: var(--fs-micro); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 7px; border-radius: var(--radius-xs);
}
.estado--pagado{ background: var(--go-soft); color: var(--go-strong); }
.estado--vencido{ background: var(--brand-soft); color: var(--brand-strong); }
.estado--pendiente{ background: var(--warn-soft); color: var(--warn); }
.estado--info{ background: var(--info-soft); color: var(--info); }

/* Formulario de acceso */
.acceso{
  max-width: 420px; margin-inline:auto; padding-block: var(--sp-7);
}
.acceso__caja{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-5);
  box-shadow: var(--shadow);
}
.acceso__titulo{ margin-bottom:var(--sp-5); }
.acceso__introduccion{
  margin:calc(var(--sp-3) * -1) 0 var(--sp-4); color:var(--text-2);
  font-size:var(--fs-sm); line-height:1.5;
}
.campo{ display:flex; flex-direction:column; gap:6px; margin-bottom: var(--sp-4); }
[data-acceso-usuario][hidden]{ display:none !important; }
.campo label{ font-size: var(--fs-xs); font-weight:600; color: var(--text-2); }
.campo input{
  height: var(--tap-min); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:0 12px; font-size: var(--fs-base); font-family: var(--font-ui);
  background: var(--surface); color: var(--text);
}
.campo input:focus-visible{ border-color: var(--go); box-shadow: var(--focus-ring); }
.campo__ayuda{ font-size: var(--fs-micro); color: var(--text-3); }
.acceso-clave{ position:relative; }
.acceso-clave input{ width:100%; padding-right:52px; }
.acceso-clave__boton{
  position:absolute; inset:0 0 0 auto;
  display:grid; place-items:center; width:48px; height:var(--tap-min);
  border:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:transparent; color:var(--text-3); cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.acceso-clave__boton[hidden]{ display:none; }
.acceso-clave__boton:hover{ background:var(--surface-2); color:var(--text); }
.acceso-clave__boton:focus-visible{
  outline:0; color:var(--go-strong);
  box-shadow:inset 0 0 0 2px var(--go-strong);
}
.acceso-clave__boton[aria-pressed="true"]{ color:var(--go-strong); }
.acceso-clave__icono[hidden]{ display:none; }

/* Información financiera separada del acceso comercial de los compradores. */
.cuenta-finanzas-bloqueo{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.cuenta-finanzas-bloqueo__icono{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  color:var(--go-strong);
  background:var(--go-soft);
}
.cuenta-finanzas-bloqueo__contenido{ max-width:720px; }
.cuenta-finanzas-bloqueo__contenido > .caps{
  margin:0 0 3px;
  color:var(--go-strong);
}
.cuenta-finanzas-bloqueo__contenido h2{
  margin:0;
  font-size:clamp(1.25rem,2vw,1.55rem);
}
.cuenta-finanzas-bloqueo__contenido > p:not(.caps){
  margin:7px 0 0;
  color:var(--text-3);
  line-height:1.55;
}
.cuenta-finanzas-bloqueo__form{
  display:grid;
  grid-template-columns:minmax(220px,360px) auto;
  gap:12px;
  align-items:end;
  margin-top:18px;
}
.cuenta-finanzas-bloqueo__form .campo{ margin:0; }
@media (max-width:680px){
  .cuenta-finanzas-bloqueo{grid-template-columns:1fr;padding:20px}
  .cuenta-finanzas-bloqueo__form{grid-template-columns:1fr}
  .cuenta-finanzas-bloqueo__form .btn{width:100%}
}
.acceso__ayuda-clave{ margin:calc(var(--sp-2) * -1) 0 var(--sp-4); }
.acceso__recuperacion-enlace{
  display:flex; justify-content:center; margin-top:var(--sp-2);
}
.acceso__recuperacion-abrir{
  display:inline-flex; align-items:center;
  min-height:var(--tap-min); border:0; padding:0 var(--sp-2);
  background:transparent; color:var(--text-2); cursor:pointer;
  font:600 var(--fs-xs)/1.3 var(--font-ui); text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:3px;
}
.acceso__recuperacion-abrir:hover{
  color:var(--go-strong); text-decoration-color:currentColor;
}
.acceso__recuperacion-abrir:focus-visible{
  border-radius:var(--radius-xs); outline:0; box-shadow:var(--focus-ring);
}
.acceso-dialogo{
  width:min(420px, calc(100vw - 32px)); max-width:none; margin:auto;
  border:1px solid var(--line); border-radius:var(--radius-xl); padding:0;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg);
}
.acceso-dialogo::backdrop{ background:rgba(20, 31, 39, .48); }
.acceso-dialogo[data-dialog-fallback="1"]{
  position:fixed; inset:50% auto auto 50%; z-index:1000;
  transform:translate(-50%, -50%);
}
.acceso-dialogo__panel{ padding:var(--sp-5); }
.acceso-dialogo__cabecera{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-2);
}
.acceso-dialogo__cabecera h2{ margin:0; font-size:var(--fs-lg); }
.acceso-dialogo__cerrar{
  display:grid; place-items:center; flex:0 0 var(--tap-min);
  width:var(--tap-min); height:var(--tap-min); margin:calc(var(--sp-2) * -1);
  border:0; border-radius:50%; background:transparent; color:var(--text-2);
  cursor:pointer; font:400 28px/1 var(--font-ui); text-decoration:none;
}
.acceso-dialogo__cerrar:hover{ background:var(--surface-2); color:var(--text); }
.acceso-dialogo__cerrar:focus-visible{ outline:0; box-shadow:var(--focus-ring); }
.acceso-dialogo__descripcion{
  margin:0 0 var(--sp-4); color:var(--text-2); font-size:var(--fs-sm); line-height:1.5;
}
.acceso-dialogo__formulario .campo:last-of-type{ margin-bottom:var(--sp-4); }
.acceso-dialogo__trampa{
  position:absolute!important; width:1px!important; height:1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important; white-space:nowrap!important;
}
.acceso__alternativas{
  display:grid; gap:var(--sp-3);
  margin-top:var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.acceso__alternativas h2{
  margin:0; color:var(--text-2); font-size:var(--fs-sm); text-align:center;
}
.acceso__alternativas-acciones{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-2);
}
.acceso__whatsapp{
  border-color:var(--go); background:var(--surface); color:var(--go-strong);
}
.acceso__whatsapp:hover{
  border-color:var(--go-strong); background:var(--go-soft);
}
.acceso__whatsapp svg{ flex:0 0 auto; }
.acceso__equipo{
  display:block; margin-top:var(--sp-4); color:var(--go-strong);
  font-size:var(--fs-xs); font-weight:600; text-align:center;
}
@media (max-width:420px){
  .acceso__alternativas-acciones{ grid-template-columns:minmax(0, 1fr); }
}
.aviso{
  border-radius: var(--radius-sm); padding: var(--sp-3);
  font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}
.aviso--error{ background: var(--brand-soft); color: var(--brand-strong); }
.aviso--info{ background: var(--info-soft); color: var(--info); }

/* ============================================================
   ESTADOS VACÍOS / ERROR
   ============================================================ */
.vacio{
  background: var(--surface); border:1px dashed var(--line-strong);
  border-radius: var(--radius-xl); padding: var(--sp-7) var(--sp-5);
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap: var(--sp-3);
}
.vacio__icono{ width:44px; height:44px; color: var(--text-3); }
.vacio__titulo{ font-size: var(--fs-lg); font-weight:700; }
.vacio__texto{ font-size: var(--fs-sm); color: var(--text-3); max-width: 46ch; }
.vacio__acciones{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2);
}

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie{
  background: var(--slate);
  color: var(--slate-ink);
  margin-top: var(--sp-7);
  border-top:2px solid var(--brand);
}
.pie__grilla{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: var(--sp-5); padding-block: var(--sp-6);
}
.pie__titulo{
  font-size: var(--fs-xs); font-weight:700;
  letter-spacing: var(--tracking-caps); text-transform:uppercase;
  color:#fff; margin-bottom: var(--sp-4);
}
.pie li{ margin-bottom:10px; }
.pie a{
  color:var(--slate-ink);
  font-size:var(--fs-sm);
  opacity:1;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out);
}
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie a:focus-visible{
  color:#fff;
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.pie__dato{
  color:var(--slate-ink);
  font-size:var(--fs-sm);
  line-height:var(--lh-base);
}
.pie__dato + .pie__dato{ margin-top:4px; }
.pie__dato--nombre{ color:#fff; font-weight:700; }
.pie__legal{
  background: var(--slate-deep);
  border-top:1px solid rgba(255,255,255,.14);
  font-size: var(--fs-xs);
}
.pie__legal-interior{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-3); flex-wrap:wrap; padding-block: var(--sp-4);
  color:var(--slate-ink);
}
.pie__pagos{ display:flex; gap: var(--sp-2); align-items:center; }
.pie__pago{
  border:1px solid rgba(255,255,255,.25); border-radius: var(--radius-xs);
  padding:3px 7px; font-size: var(--fs-micro); font-weight:700; letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVO DE VERDAD
   ============================================================ */
@media (max-width: 1100px){
  .nav__enlace--secundario{ display:none; }
  .ficha{ grid-template-columns: 1fr; }
  .ficha__descripcion-cuerpo{ max-height:190px; }
  .ficha__descripcion-ayuda{ display:block; }
}

/* ============================================================
   EL LISTADO EN TRES FORMAS — una por dispositivo
   ------------------------------------------------------------
   Escritorio (>1024px): tabla densa de 8 columnas. Es lo que quiere
     un comprador experto: barrer codigos y precios con la vista.
   Tablet (621-1024px): tabla compacta de 6 columnas. Se sacrifican
     descripcion y marca, que es lo prescindible; sigue siendo tabla,
     no una tarjeta de celular estirada.
   Celular (<=620px): tarjeta apilada. CADA dato en su propia celda
     de la rejilla — el codigo y el nombre ya no comparten celda, que
     es lo que los encimaba cuando el nombre ocupaba dos lineas.

   OJO — el 2026-08-20 la CABECERA y la rejilla de fotos bajaron su corte
   de escritorio de 1025px a 900px (clientes en notebooks de 1366px con el
   zoom de Windows al 150% veian el sitio "en modo celular"). Este listado
   NO se movio a proposito: `.filas` tiene min-width:1080px y solo el tramo
   tablet lo anula, asi que a 900px la tabla densa obligaria a desplazarse
   en horizontal justo sobre los precios. Cada corte esta donde su propio
   contenido deja de caber, que no tiene por que ser el mismo numero.
   ============================================================ */
@media (max-width: 1024px){
  /* minmax(0,1fr) y no "1fr" a secas: 1fr equivale a minmax(auto,1fr) y NO
     encoge, asi que la tabla del resumen estiraba la columna y desbordaba el
     checkout 38 px en celular — justo donde se confirma la compra. */
  .cuenta{ grid-template-columns: minmax(0, 1fr); }
  .cuenta__menu{ position:static; display:flex; gap: var(--sp-1); overflow-x:auto; }
  .cuenta__menu a{ white-space:nowrap; }
  .panel-avanzado__grilla{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Sin ancho minimo: el listado deja de exigir desplazamiento lateral. */
  .filas{ min-width:0; }
  .filas__cabeza{ display:none; }
  .tabla-desplazable{ overflow-x: visible; }
}

/* --- Tablet: una linea por producto --- */
@media (min-width: 721px) and (max-width: 1024px){
  .fila{
    grid-template-columns: 52px minmax(94px, .85fr) minmax(0, 2.2fr) 84px 112px 118px;
    grid-template-areas: "mini codigo nombre stock precio acc";
    align-items:center;
    padding: var(--sp-3) var(--sp-4);
  }
  .fila > .celda-mini{ grid-area: mini; }
  .fila > .celda-codigo{ grid-area: codigo; }
  .fila > .celda-producto{ grid-area: nombre; }
  .fila > .celda-stock{ grid-area: stock; }
  .fila > .celda-precio{ grid-area: precio; text-align:right; }
  .fila > .celda-acciones{ grid-area: acc; justify-content:flex-end; }
  .fila > .celda-desc,
  .fila > .celda-marca{ display:none; }
  .fila__stock-linea{ white-space:nowrap; }
}

/* --- Celular: tarjeta apilada --- */
@media (max-width: 720px){
  .fila{
    grid-template-columns: 56px minmax(0,1fr);
    grid-template-areas:
      "mini  codigo"
      "mini  nombre"
      "desc  desc"
      "stock precio"
      "acc   acc";
    row-gap: 6px;
    column-gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    align-items:start;
  }
  .fila > .celda-mini{ grid-area: mini; }
  .fila > .celda-codigo{ grid-area: codigo; }
  .fila > .celda-producto{ grid-area: nombre; }
  .fila > .celda-desc{ grid-area: desc; }
  .fila > .celda-marca{ display:none; }
  .fila > .celda-stock{ grid-area: stock; align-self:center; }
  .fila > .celda-precio{ grid-area: precio; text-align:right; align-self:center; }
  .fila > .celda-acciones{ grid-area: acc; justify-content:stretch; margin-top:2px; }
  .fila > .celda-acciones .btn--agregar{ flex:1 1 auto; }
  .fila__mini{ width:56px; height:52px; }
  /* "0 un." y "Bajo pedido" ocupan una linea cada uno, sin partirse. */
  .fila__stock-linea{ white-space:nowrap; }
}

@media (max-width: 720px){
  :root{ --fs-base: 16px; }
  /* 16px evita que iOS haga zoom automatico al enfocar un campo. */
  input, select, textarea{ font-size: 16px; }

  .franja__der,
  .franja__dato--direccion{ display:none; }

  /* Encabezado: logo y acciones en una linea; el menu, deslizable debajo. */
  .barra{ flex-wrap:wrap; row-gap: var(--sp-2); padding-block: var(--sp-2); }
  .nav{
    order:3; flex-basis:100%; overflow-x:auto; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{ display:none; }
  /* Sin esto "Por vehiculo" se partia en dos lineas. */
  .nav__enlace{ white-space:nowrap; flex:none; }
  .nav__enlace--secundario{ display:inline-flex; }

  /* Los botones del encabezado quedan en modo icono: el ancho se lo
     lleva el buscador, que es lo que de verdad usa el mostrador.
     (Antes se apuntaba a .pastilla-cuenta__txt, clase que no existe
     en el marcado, asi que la regla no hacia nada.) */
  .btn-cromado__txt,
  .btn-carrito__txt,
  .pastilla-cuenta__txt{ display:none; }
  .btn-cromado{ padding-inline: var(--sp-2); }
  .btn-carrito{ padding-inline: var(--sp-3); }
  .btn-carrito__resumen{ align-items:center; }
  .btn-carrito__neto{ font-size:10px; }
  .btn-carrito__neto-etiqueta{
    position:absolute !important;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .pastilla-cuenta{ padding:6px; }
  .modo-mostrador-control--cabecera{
    width:var(--tap-min);
    padding-inline:0;
    justify-content:center;
  }
  .modo-mostrador-control--cabecera span{
    position:absolute !important;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* Buscador protagonista. */
  .buscador__forma{ flex-wrap:wrap; }
  .buscador__enviar{ flex:none; }
  .buscador__avanzada span{ display:none; }
  .buscador__avanzada{
    width:var(--search-field-h);
    padding-inline:0;
    justify-content:center;
  }

  .panel-avanzado__grilla{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grilla-productos{ grid-template-columns: 1fr; }
  .riel{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .titulo-pantalla{ font-size: 26px; }
}

@media (max-width:720px){
  .buscador__interior{ padding:10px 0; }
  .buscador__forma{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:start;
    width:100%;
  }
  .buscador__campo{
    grid-column:1;
    width:100%;
    max-width:100%;
    min-width:0;
    flex-wrap:wrap;
    height:auto;
    min-height:var(--search-field-h);
    padding:5px;
    gap:5px;
  }
  .buscador__modo{
    height:29px;
    padding-left:8px;
  }
  .buscador__modo-wrap{
    order:1;
    flex:0 0 120px;
    height:46px;
    padding:3px 6px 3px 8px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
  }
  .buscador__modo-wrap--mejorado{
    flex-basis:132px;
    padding:0;
  }
  .buscador__modo-wrap--mejorado .buscador__modo-etiqueta{
    top:6px;
    left:10px;
  }
  .buscador__modo-disparador{
    padding:18px 10px 5px;
    border-radius:var(--radius-sm);
  }
  .buscador__modo-menu{
    top:calc(100% + 7px);
    width:min(300px,calc(100vw - 20px));
  }
  .buscador__modo-wrap::after{
    right:14px;
    bottom:12px;
  }
  .buscador__texto{
    order:2;
    flex:1 1 0;
    height:42px;
    min-width:0;
  }
  .buscador__enviar{
    order:3;
    align-self:auto;
    flex:0 0 44px;
    min-width:44px;
    height:42px;
    padding:0;
    margin-left:auto;
    border-radius:var(--radius-sm);
  }
  .buscador__enviar span{
    position:absolute !important;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .buscador__avanzada{
    grid-column:2;
    grid-row:1;
    width:44px;
    height:var(--search-field-h);
  }
  .filtro-stock-disponible--barra{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:end;
    min-height:44px;
    padding:0 4px;
  }
  .panel-avanzado{
    grid-column:1 / -1;
    grid-row:3;
  }
  .buscador__vehiculo{
    order:4;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    flex:1 1 100%;
    padding:0;
  }
  .buscador-combo__input{ padding:0 9px; }
  .buscador-combo:last-child .buscador-combo__lista{
    right:0;
    left:auto;
    width:min(330px,calc(100vw - 20px));
  }
  .pestanas-referencia{ grid-template-columns:1fr 1fr; }
  .pestanas-referencia a{
    align-items:flex-start;
    min-height:58px;
    padding:8px 10px;
    line-height:1.15;
  }
  .medidas-rodamiento{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
  }
  .medidas-rodamiento__titulo,
  .medidas-rodamiento .btn{
    grid-column:1 / -1;
  }
  .medidas-rodamiento__titulo{ min-width:0; }
  .medidas-rodamiento label{ min-width:0; }
}

@media(max-width:620px){
  .modo-mostrador-banner__interior{ align-items:flex-start; flex-wrap:wrap; }
  .modo-mostrador-banner p{ flex:1 1 190px; }
  .modo-mostrador-banner p strong,
  .modo-mostrador-banner p span{ display:block; }
  .modo-mostrador-banner form{ margin-left:39px; }
}

@media (min-width: 721px) and (max-width: 899px){
  .grilla-productos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* A 1440px el contenido mide 1376px: con 272px de mínimo caben exactamente 4.
   El prototipo pedía 244px, que a ese ancho daba 5 columnas demasiado estrechas. */
@media (min-width: 900px){
  .grilla-productos{ grid-template-columns: repeat(auto-fill, minmax(272px,1fr)); }
}

@keyframes desplegar{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@keyframes aparecer{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes menu-entrar{
  from{ transform:translateX(100%); }
  to{ transform:none; }
}

/* ============================================================
   FICHA TÉCNICA AMPLIADA — aplicación, despiece, usado en, cruces.
   Densidad de mostrador: tabla compacta, jerarquía por tipografía,
   color sólo para estado. Se abre con <details> nativo (sin JS).
   ============================================================ */

.saber { margin-top: 40px; }

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

.panel__cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  transition: background .12s ease;
}
.panel__cabeza::-webkit-details-marker { display: none; }
.panel__cabeza:hover { background: var(--bg); }

.panel__cabeza::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.panel[open] > .panel__cabeza::after { transform: rotate(-135deg); }

.panel__titulo { display: inline-flex; align-items: center; gap: 8px; }

.panel__n {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-3);
  font-weight: 600;
}

.panel__cuerpo { padding: 4px 16px 18px; border-top: 1px solid var(--line); }

.panel__nota {
  font-size: 13px;
  color: var(--text-3);
  margin: 12px 0;
}

/* --- Aplicación vehicular, agrupada por marca --- */
.aplic { margin-top: 18px; }
.aplic__marca,
.cruces__marca {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}

/* --- Tabla de datos compacta --- */
.tabla-ficha {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabla-ficha th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.tabla-ficha td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  vertical-align: top;
}
.tabla-ficha tr:last-child td { border-bottom: 0; }
.celda-tenue { color: var(--text-3); }
.col-años, .col-pos { white-space: nowrap; width: 1%; }
.col-accion { width: 1%; white-space: nowrap; text-align: right; }

.btn--mini { padding: 4px 10px; font-size: 12px; }

/* --- Despiece visual: cada componente se identifica antes de comprar --- */
.despiece-grilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:var(--sp-4);
}
.despiece-tarjeta{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.despiece-tarjeta__figura{
  position:relative;
  min-height:190px;
  margin:0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.despiece-tarjeta__imagen-enlace{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:190px;
  padding:var(--sp-2);
}
a.despiece-tarjeta__imagen-enlace{
  transition:background var(--dur-fast) var(--ease-out);
}
a.despiece-tarjeta__imagen-enlace:hover{ background:var(--surface); }
a.despiece-tarjeta__imagen-enlace:focus-visible{
  outline:3px solid var(--go-strong);
  outline-offset:-3px;
}
.despiece-tarjeta__imagen-enlace img{
  display:block;
  width:100%;
  height:100%;
  max-height:220px;
  object-fit:contain;
}
.despiece-tarjeta__posicion{
  position:absolute;
  top:var(--sp-2);
  left:var(--sp-2);
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.despiece-tarjeta__cuerpo{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:var(--sp-2);
  min-width:0;
  padding:var(--sp-3);
}
.despiece-tarjeta__codigo{
  color:var(--go-strong);
  font-size:var(--fs-xs);
  font-weight:750;
  overflow-wrap:anywhere;
}
.despiece-tarjeta__nombre{
  margin:0;
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.despiece-tarjeta__precio{
  min-width:0;
  padding-top:var(--sp-2);
  border-top:1px solid var(--line);
}
.despiece-tarjeta__accion{
  width:100%;
  min-height:var(--tap-min);
  margin-top:var(--sp-1);
}
.despiece-tarjeta__consulta{
  display:grid;
  gap:var(--sp-2);
  margin-top:auto;
  padding-top:var(--sp-2);
  border-top:1px solid var(--line);
}
.despiece-tarjeta__consulta > span{
  display:grid;
  gap:2px;
}
.despiece-tarjeta__consulta small{
  color:var(--text-3);
  font-size:12px;
}
.despiece-tarjeta__consulta strong{
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:1.3;
}

@media (min-width:641px) and (max-width:980px){
  .despiece-grilla{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px){
  .despiece-grilla{ grid-template-columns:1fr; }
  .despiece-tarjeta{
    display:grid;
    grid-template-columns:minmax(126px,40%) minmax(0,1fr);
  }
  .despiece-tarjeta__figura{
    min-height:100%;
    border-right:1px solid var(--line);
    border-bottom:0;
  }
  .despiece-tarjeta__imagen-enlace{
    min-height:190px;
    padding:6px;
  }
  .despiece-tarjeta__cuerpo{ padding:var(--sp-3); }
  .despiece-tarjeta__nombre{ font-size:var(--fs-sm); }
}

/* --- Códigos cruzados: rejilla densa, fácil de barrer con la vista --- */
.cruces { margin-top: 16px; }
.cruces__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 10px;
}
.cruces__lista li {
  font-size: 13px;
  padding: 3px 0;
  color: var(--text);
}

@media (max-width: 640px) {
  .panel__cuerpo { padding: 4px 12px 14px; }
  .tabla-ficha { font-size: 13px; }
  .cruces__lista { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ficha-tecnica-resumen{ display:block; }
  .ficha-tecnica-resumen .ficha-bloque{ margin-bottom:var(--sp-3); }
  .ficha-relaciones__cabeza{ padding:var(--sp-3); }
  .ficha-relaciones__lista{ grid-template-columns:1fr; }
  .ficha-relaciones__lista a{
    min-height:58px;
    padding:8px var(--sp-3);
  }
  .ficha-bloque__cabeza{ align-items:flex-start; padding:var(--sp-3); }
  .ficha-bloque__fuente{ display:none; }
  .ficha-bloque__cuerpo{ padding:0; }
  .ficha-bloque .especificaciones{ border:0; }
  .ficha-bloque .especificaciones th,
  .ficha-bloque .especificaciones td{ padding:10px 12px; }
  .ficha-bloque .especificaciones th{ width:39%; }
  .panel--aplicaciones .panel__cuerpo{ max-height:none; overflow:visible; }
  .aplicaciones-herramientas__estado{ width:100%; }
  .aplicaciones-aviso-movil{ display:block; }
  .aplicaciones-tabla{ min-width:620px; }
  .aplicaciones-tabla th,
  .aplicaciones-tabla td{ padding:10px 12px; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .ficha-tecnica-resumen{ grid-template-columns:1fr; }
  .ficha-relaciones__lista{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ficha-relaciones__lista a:nth-child(odd){ border-right:1px solid var(--line); }
}


/* ============================================================
   CORRECCIONES DE LA AUDITORIA DE FUNDAMENTOS (2026-07-26)
   ============================================================ */

/* Los botones del encabezado en celular quedan en modo icono, pero su nombre
   sigue existiendo para un lector de pantalla. `display:none` no oculta: borra.
   (Regresion introducida el mismo dia en el commit 32b0e13.) */
@media (max-width: 720px){
  .btn-cromado__txt,
  .btn-carrito__txt,
  .buscador__avanzada span,
  .pastilla-cuenta__txt{
    position:absolute !important;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
    display:inline !important;
  }
  .panel-avanzado__grilla{ grid-template-columns:1fr; }
  .panel-avanzado__pie{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .panel-avanzado__estado{
    flex:1 1 180px;
    min-height:20px;
  }
  .filtro-stock-disponible{
    width:auto;
    margin-left:auto;
  }
  .catalogo-herramientas{
    width:100%;
    justify-content:space-between;
  }
  .ordenador-catalogo{
    flex:1 1 100%;
    justify-content:space-between;
  }
  .ordenador-catalogo select{
    flex:1 1 auto;
    min-width:0;
    font-size:16px;
  }
  .catalogo-pdf{
    margin-left:auto;
  }
  .catalogo-pdf > summary{
    min-height:44px;
  }
  .catalogo-pdf__panel{
    position:fixed;
    top:auto;
    right:16px;
    bottom:16px;
    left:16px;
    width:auto;
    max-height:calc(100vh - 32px);
    overflow:auto;
  }
  .catalogo-pdf__opcion{
    min-height:58px;
  }
}

/* iOS hace zoom automatico al enfocar un campo de menos de 16px y la pantalla
   salta. La regla global existia pero la pisaban reglas mas especificas, justo
   en el panel de pegar codigos: la funcion de mas valor para un mostrador. */
@media (max-width: 720px){
  .panel-avanzado input,
  .panel-avanzado select,
  .panel-avanzado textarea,
  .buscador__input,
  .campo input,
  .campo select,
  input[type="search"],
  input[type="text"],
  input[type="number"],
  input[type="password"],
  select,
  textarea{
    font-size: 16px !important;
  }
}

/* El color de MARCA nunca dice "esto esta mal": el estado tiene su propia
   paleta. Regla de la casa, ya aprendida en el ERP. Este rojo de estado es
   ademas mas oscuro, para cumplir contraste sobre blanco. */
:root{
  --estado-malo:      #B4232A;
  --estado-malo-soft: #FBE9EA;
}
.semaforo--nulo{ background: var(--estado-malo); }
.aviso--error{ background: var(--estado-malo-soft); color: var(--estado-malo); }
.estado--vencido{ background: var(--estado-malo-soft); color: var(--estado-malo); }

/* Una factura pagada se pintaba con el color de "pendiente": el cliente entraba
   a su cartola, veia "Pagado" en color de deuda y llamaba a preguntar. */
.estado--pagado{ background: var(--go-soft); color: var(--go-strong); }

/* Lo que se desplaza de lado tiene que decirlo. Sin pista visual, el contenido
   de la derecha simplemente no existe para el cliente. */
.tabla-desplazable,
.riel,
.nav{
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--surface) 70%),
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}


/* ------------------------------------------------------------
   TABLAS DE DATOS EN CELULAR — el total del pedido tiene que verse
   ------------------------------------------------------------
   `.tabla-datos table` declara min-width:720px. En un telefono de 390 px eso
   esconde 330 px a la derecha, y ahi viven la cantidad, el subtotal y el TOTAL:
   el cliente no podia ver cuanto iba a pagar antes de confirmar el pedido.

   Cada fila pasa a ser una tarjeta y cada dato lleva su rotulo (viene del
   marcado en `data-rotulo`, porque CSS no puede leer el encabezado de otra
   celda). Recien entonces se suelta el ancho minimo: soltarlo sin apilar
   esconde el total tras un desplazamiento que nadie descubre.
   ------------------------------------------------------------ */
@media (max-width: 720px){
  .tabla-datos table{ min-width: 0; width: 100%; }
  .tabla-datos .tabla-desplazable{ overflow-x: visible; }

  .tabla-datos thead{
    position:absolute; width:1px; height:1px;
    margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  }
  .tabla-datos tbody tr{
    display:block;
    padding: var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .tabla-datos tbody tr:last-child{ border-bottom:0; }
  .tabla-datos tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3);
    padding: 5px 0; border:0; text-align:left;
  }
  .tabla-datos tbody td[data-rotulo]::before{
    content: attr(data-rotulo);
    flex:none;
    font-size: 12px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color: var(--text-3);
  }
  /* La primera celda es el titulo de la tarjeta: sin rotulo y destacada. */
  .tabla-datos tbody td:first-child{
    font-weight:600; padding-bottom: var(--sp-2);
  }
  .tabla-datos tbody td.num{ text-align:right; }
  /* Los botones de accion ocupan el ancho de la tarjeta. */
  .tabla-datos tbody td:last-child:not([data-rotulo]){
    justify-content:flex-end; padding-top: var(--sp-2);
  }
}


/* ------------------------------------------------------------
   Hallazgos del verificador corregido (2026-07-26)
   ------------------------------------------------------------ */

/* La celda de stock caia en la columna de 56 px de la tarjeta (la de la foto)
   y con `nowrap` recortaba 17 px de "Bajo pedido" sin posibilidad de
   desplazar: el dato quedaba inalcanzable. Se le da a esa columna el ancho
   que el texto necesita de verdad. Defecto propio, introducido al arreglar
   el corte de palabras. */
@media (max-width: 720px){
  .fila{ grid-template-columns: 82px minmax(0,1fr); }
  .fila__mini{ width:56px; height:52px; }
  .fila__stock{ font-size: 11.5px; }
}

/* En tablet, el nombre del cliente conectado empujaba el menu hasta pisarlo
   (solape medido de 42x44 px). Se acota el ancho del boton de cuenta. */
@media (min-width: 721px) and (max-width: 899px){
  .btn-cromado{ max-width: 190px; }
  .btn-cromado__txt{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* (Aqui hubo un parche para un recorte de las pastillas de filtro que resulto
   ser un falso positivo del verificador: lo que "sobresalia" era el ampliador
   de zona tactil `.chip-filtro::after{inset:-8px}`, que es intencional.
   El verificador ya mide por hijos en flujo y no vuelve a delatarlo.) */

/* En tablet el encabezado no daba el ancho para logo + menu + nombre del
   cliente + carrito: el menu escondia 38 px y pisaba el boton de cuenta
   (solape medido). Se le da al menu su propia linea, como en celular. */
@media (min-width: 721px) and (max-width: 899px){
  .barra{ flex-wrap:wrap; row-gap: var(--sp-2); }
  .nav{
    order:3; flex-basis:100%;
    overflow-x:auto; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__enlace{ white-space:nowrap; flex:none; }
}

/* Cierre de los dos ultimos recortes medidos (2026-07-26) */

/* En la tabla apilada, un codigo largo sin espacios estiraba la fila mas alla
   del ancho del telefono y `.tabla-datos{overflow:hidden}` lo recortaba sin
   posibilidad de desplazar: 54 px perdidos en el resumen del CHECKOUT. */
@media (max-width: 720px){
  .tabla-datos tbody td{ min-width:0; overflow-wrap:anywhere; }
  .tabla-datos tbody td > *{ min-width:0; }
}

/* Las cifras grandes de los indicadores (cupo, deuda) se recortaban dentro de
   su tarjeta en tablet. Que encojan con la tarjeta en vez de desbordarla. */
.kpi__valor{ min-width:0; overflow-wrap:anywhere; }
.tarjetas-kpi > *{ min-width:0; }


/* ============================================================
   TANDA B — devolver pantalla, lectura y foco (2026-07-26)
   ============================================================ */

/* --- Contraste: 8 pares no llegaban al minimo legible (4,5:1). Un mostrador
   con luz de galpon y el brillo bajo, literalmente no los lee. Solo se oscurecen
   tonos de APOYO: el rojo #C8262C y el verde #006644 de la marca no se tocan. */
:root{
  --text-3:    #5A5A5F;   /* era #6E6E73 -> 2,57:1. Ahora 6,4:1 sobre blanco */
  --warn:      #8A5600;   /* era #B8750B -> 3,76:1. Ahora 6,2:1 */
  --line:      #C2C2C7;   /* era #D2D2D7 -> 2,21:1. Ahora 3,1:1 (minimo grafico) */
}
/* El blanco sobre el verde de stock daba 4,01:1: se usa el verde fuerte. */
.semaforo--alto,
.chip--desc{ background: var(--go-strong); }
.franja__rut{ opacity: 1; }            /* la opacidad .75 lo dejaba en 3,88:1 */
.pie a{ color: var(--slate-ink); }     /* contraste 5,45:1 sobre el fondo del pie */

/* --- El foco no puede quedar tapado por la cabecera pegajosa al saltar con
   el teclado. Son TRES valores porque la cabecera mide distinto en cada ancho:
   un valor global sobre-desplaza 106 px en tablet. */
html{ scroll-padding-top: 160px; }
@media (min-width: 721px) and (max-width: 899px){ html{ scroll-padding-top: 205px; } }
@media (min-width: 900px){ html{ scroll-padding-top: 200px; } }

/* ------------------------------------------------------------
   CELULAR: devolver la pantalla
   ------------------------------------------------------------
   La cabecera pegajosa ocupaba 292 px sin sesion y 336 con sesion, de 664
   utiles: el cliente veia UNA ficha por pantalla. Se condensa a los tres
   pisos lo prescindible, sin perder ninguna funcion:
   el piso utilitario entero (telefono y despacho estan en el pie), el lema
   de la marca, y el aire sobrante de los otros dos pisos.
   ------------------------------------------------------------ */
@media (max-width: 720px){
  .franja{ display:none; }
  .barra{ min-height:0; padding-block: 8px; }
  .marca__lema{ display:none; }
  .marca__nombre{ font-size: 17px; }
  .marca__glifo{ width:28px; height:23px; }
  .buscador__interior{ padding: 9px 0; }
  .nav__enlace{ padding-block: 7px; }

  /* Nada de texto por debajo de 12 px en el telefono. Se sube SOLO aqui: en
     global reflota la tabla densa de 8 columnas del escritorio. */
  :root{ --fs-micro: 12px; --fs-xs: 13px; }
  .caps{ font-size: 12px; }
  .nav__hot{ font-size: 11px; }        /* la unica excepcion: es una insignia */

  /* El codigo del producto es la accion principal del listado y medía 17 px de
     alto: dedo grande, mostrador apurado, se tocaba al lado. Sube a 44 px de
     zona tactil sin agrandar la letra (el area crece con relleno). */
  .fila__sku{
    display:inline-flex; align-items:center;
    min-height: var(--tap-min); padding-block: 4px;
  }

  /* Separacion entre objetivos tocables: habia 4 px en el menu y 0 px entre el
     buscador y su boton de filtro. Bajo 8 px el dedo toca el de al lado. */
  .nav{ gap: 8px; }
  .buscador__forma{ gap: 10px; }
  .pie a{ display:inline-block; padding-block: 8px; }
}

/* ------------------------------------------------------------
   BARRA DE ACCION FIJA EN LA FICHA (celular)
   ------------------------------------------------------------
   Habia que bajar 1,8 pantallas para llegar a "Agregar al carrito": la accion
   que da plata estaba escondida. Va JUNTO con la cabecera condensada de
   arriba: sola, esta barra de 142 px dejaba menos contenido visible que antes.
   ------------------------------------------------------------ */
.barra-accion{ display:none; }

@media (max-width: 720px){
  .barra-accion{
    display:flex; align-items:center; gap: var(--sp-3);
    position: fixed; left:0; right:0; bottom:0; z-index: 60;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding: 10px var(--sp-4);
    /* El borde seguro del telefono: sin esto la barra de gestos tapa el boton. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .barra-accion__precio{ display:flex; flex-direction:column; line-height:1.15; }
  .barra-accion__rotulo{ color:var(--text-2); font-size:11px; font-weight:700; }
  .barra-accion__monto{ font-size: 17px; font-weight:700; }
  .barra-accion__nota{ font-size: 11px; color: var(--text-3); }
  .barra-accion .btn{ flex:1 1 auto; min-height: var(--tap-min); }

  /* Que la barra no tape el final del contenido. */
  body:has(.barra-accion){ padding-bottom: 84px; }
  body:has(.barra-accion .producto-en-carrito:not([hidden])){ padding-bottom:112px; }
}

/* ------------------------------------------------------------
   Paneles de la ficha cerrados en celular
   ------------------------------------------------------------
   La ficha medía 19 pantallas de alto con dos paneles abiertos por omision: el
   de aplicaciones solo mide 11,8. En el telefono se abren a pedido.
   ------------------------------------------------------------ */
@media (max-width: 720px){
  .panel__cuerpo{ max-height: 70vh; overflow-y: auto; }
  .panel__cuerpo.panel__cuerpo--despiece{ max-height:none; overflow:visible; }
}

/* En el telefono, encabezado, buscador y familias recorren juntos la pagina. */
@media (max-width: 720px){
  .cabecera{ position: static; }
  #buscador-fijo{
    position: relative; top: auto;
    box-shadow: 0 1px 0 var(--line);
  }
}

/* Invitacion a entrar en el lugar del precio (decision D8: el visitante sin
   cuenta no ve precios). Tiene que verse como una accion, no como un aviso de
   error: es la puerta de entrada de un distribuidor nuevo. */
.precio__pedir{
  display:inline-flex; align-items:center; gap:6px;
  min-height: var(--tap-min);
  color: var(--go-strong); font-weight:600; font-size: var(--fs-sm);
  text-decoration:none;
}
.precio__pedir:hover{ text-decoration:underline; }

/* ============================================================
   EL PRECIO Y SU PORQUÉ  (2026-07-28)
   ------------------------------------------------------------
   La tienda dejó de calcular precios: los resuelve el motor del ERP y aquí solo
   se presentan. Lo que hay que hacer visible es TRES cosas y en este orden:
   la lista tachada, el neto que paga, y el motivo del descuento.

   REGLA DE COLOR APLICADA (tema ≠ estado)
   El rojo #C8262C es la IDENTIDAD de la marca y el azul #004AAD viene del
   logotipo: ninguno de los dos puede significar "esto está rebajado", porque
   entonces la marca dejaría de leerse como marca. La jerarquía se construye con
   los colores que SÍ son de estado y con el PESO visual:

     · Tu descuento / Precio acordado → verde de comercio, en tono suave.
       Es la condición NORMAL del cliente, no una urgencia: no debe gritar.
     · Oferta y Liquidación           → ámbar SÓLIDO, mayúsculas y contorno en
       la tarjeta. Son las dos únicas cosas que el dueño pidió destacar, y se
       destacan por peso, no por un color nuevo.

   Ámbar sobre texto oscuro (#3A2A00) y no blanco: el blanco sobre #F59E0B da
   2,1:1 y en un mostrador con luz de galpón no se lee.
   ============================================================ */

/* ── Lista tachada ─────────────────────────────────────────
   Solo se dibuja si de verdad hay rebaja (lo decide precio_vista()).
   Va en tono apagado y más chica que el neto: es el precio que NO paga. */
.precio__tachado{
  font-size: var(--fs-xs); color: var(--text-3);
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* ── La etiqueta del motivo ────────────────────────────── */
.etiqueta-precio{
  display:inline-block; align-self:flex-start; margin-top:3px;
  /* 12px y no 11px como el resto de los chips: este texto es el MOTIVO del
     precio, lo que el cliente cita cuando reclama. La propia auditoría de
     contraste de esta tienda ya había subido tonos por ser ilegibles en un
     mostrador con luz de galpón; el tamaño va en la misma dirección. */
  font-size: var(--fs-xs); font-weight:700; line-height:1.25;
  padding:2px 6px; border-radius: var(--radius-xs);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Condición normal del cliente: presente pero tranquila. */
.etiqueta-precio--base{
  background: var(--go-soft); color: var(--go-strong);
}
/* Acuerdo negociado: informativo, ni urgente ni de campaña. */
.etiqueta-precio--especial{
  background: var(--info-soft); color: var(--info);
}
/* Campaña vigente y liquidación: lo que hay que ver desde lejos. */
.etiqueta-precio--oferta,
.etiqueta-precio--liquidacion{
  background: var(--warn-vivid); color:#3A2A00;
  text-transform: uppercase; letter-spacing:.03em;
}

/* ── Chips de oferta/liquidación sobre la foto ─────────── */
.chip--oferta,
.chip--liquidacion{
  background: var(--warn-vivid); color:#3A2A00;
  text-transform: uppercase; letter-spacing:.03em;
}
.chip--nuevo{
  background:#dbeafe; color:#174a8b; border:1px solid #93c5fd;
  text-transform:uppercase; letter-spacing:.03em;
}

/* ── El producto rebajado se distingue del resto ────────
   Un contorno ámbar, no un fondo: el fondo de color hace ilegible la ficha y
   además compite con la foto del repuesto, que es lo que el cliente mira. */
.tarjeta--rebaja{
  border-color: var(--warn-vivid);
  box-shadow: 0 0 0 1px var(--warn-vivid) inset;
}
.fila--rebaja{
  box-shadow: inset 3px 0 0 var(--warn-vivid);
}
.caja-precio--rebaja{
  border-color: var(--warn-vivid);
  box-shadow: 0 0 0 1px var(--warn-vivid) inset;
}

/* ── Caja de precio de la ficha ────────────────────────── */
.caja-precio__antes{
  display:flex; align-items:baseline; gap: var(--sp-2);
}

/* ── Sin precio disponible ─────────────────────────────
   No es un error del cliente ni una alarma: es una invitación a llamar. Por eso
   va en tono de texto y no en rojo. Un rojo aquí parece "producto con problema"
   y frena la compra de un código que sí se vende. */
.precio__consulta{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-sm); color: var(--text-2); font-weight:600;
}

/* ── Carrito: foto y precio ────────────────────────────── */
.carrito-foto__encabezado,
.carrito-foto{
  width:96px;
  text-align:center;
}
.carrito-foto__enlace{
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:68px;
  margin-inline:auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.carrito-foto__enlace img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.carrito-producto{ min-width:260px; }

.celda-precio-carrito{
  font-variant-numeric:tabular-nums;
}
.celda-precio-carrito__valores{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.celda-precio-carrito__valores .precio__tachado{ line-height:1.1; }
.celda-precio-carrito__final{
  color:var(--text-1);
  font-weight:650;
  line-height:1.2;
}

@media (min-width:721px){
  .carrito-tabla .carrito-columna--precio,
  .carrito-tabla .carrito-columna--cantidad,
  .carrito-tabla .carrito-columna--subtotal{
    text-align:center;
  }
  .carrito-tabla .carrito-columna--precio .celda-precio-carrito__valores{
    align-items:center;
  }
  .carrito-tabla .carrito-columna--cantidad .carrito-cantidad{
    justify-content:center;
    justify-items:center;
    margin-inline:auto;
  }
}

/* ============================================================
   MEMORIA DE COMPRA
   La señal vive junto al SKU y no compite con marca, precio ni campañas.
   ============================================================ */
.memoria-compra-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:2px 8px;
  border:1px solid color-mix(in srgb, var(--go) 28%, var(--line));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--go-soft) 68%, var(--surface));
  color:var(--go-strong);
  font-size:var(--fs-micro);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.memoria-compra-badge:hover{
  border-color:var(--go);
  background:var(--go-soft);
}
.memoria-compra-badge span{
  font-size:12px;
  line-height:1;
}

.compras-historial{ min-width:0; }
.compras-historial__cabeza{
  align-items:flex-end;
  gap:var(--sp-4);
}
.compras-historial__sobrelinea{ color:var(--go-strong); }
.compras-historial__sku{
  color:var(--go-strong);
  font-weight:700;
}
.compras-historial__sku:hover{ text-decoration:underline; }
.compras-historial__tabla{ margin-top:var(--sp-4); }
.compras-historial__tabla .compras-historial__cantidad{ text-align:center; }

@media (max-width:720px){
  .memoria-compra-badge{ min-height:44px; }
  .compras-historial__cabeza{
    align-items:stretch;
    flex-direction:column;
  }
  .compras-historial__cabeza .btn{ width:100%; }
}

/* Carrito: cantidad autoactualizable y resumen compacto. */
.carrito-cantidad{
  display:grid;
  grid-template-columns:84px;
  gap:3px;
  justify-items:start;
}
.carrito-cantidad__input{
  width:84px;
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-1);
  font:inherit;
  font-variant-numeric:tabular-nums;
}
.carrito-cantidad__input:focus{
  outline:3px solid var(--go-soft);
  border-color:var(--go);
}
.carrito-cantidad__estado{
  min-height:14px;
  color:var(--go-strong);
  font-size:10.5px;
  line-height:1.25;
}
.carrito-cantidad__estado.es-error{ color:var(--brand); }
.carrito-cantidad__reintentar[hidden]{ display:none; }
.carrito-cantidad.esta-guardando .carrito-cantidad__input{
  border-color:var(--go);
}
.carrito__resumen{
  display:grid;
  grid-template-columns:minmax(330px,1fr) auto;
  align-items:center;
  gap:var(--sp-5);
  width:min(100%,720px);
  margin:var(--sp-4) 0 0 auto;
  padding:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.carrito__resumen-cifras{
  display:grid;
  grid-template-columns:repeat(3,minmax(90px,1fr));
  gap:var(--sp-4);
  margin:0;
}
.carrito__resumen-cifras div{
  display:grid;
  gap:2px;
}
.carrito__resumen-cifras dt{
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.carrito__resumen-cifras dd{
  margin:0;
  color:var(--text-2);
  font-size:var(--fs-sm);
}
.carrito__resumen-total{
  padding-left:var(--sp-4);
  border-left:1px solid var(--line);
}
.carrito__resumen-cifras .carrito__resumen-total dd{
  color:var(--text-1);
  font-size:var(--fs-xl);
  font-weight:750;
  letter-spacing:var(--tracking-tight);
}
.carrito__resumen-accion{
  display:grid;
  justify-items:stretch;
  gap:5px;
  min-width:190px;
}
.carrito__continuar{
  width:auto;
  min-width:190px;
  padding-inline:var(--sp-5);
  white-space:nowrap;
}
.carrito__resumen-nota{
  max-width:260px;
  margin:0;
  color:var(--text-3);
  font-size:var(--fs-micro);
  line-height:1.35;
  text-align:center;
}

@media (max-width:720px){
  .carrito-tabla tbody tr{
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    column-gap:var(--sp-3);
  }
  .carrito-tabla tbody td{
    grid-column:1 / -1;
  }
  .carrito-tabla tbody .carrito-foto{
    display:block;
    grid-column:1;
    grid-row:1;
    align-self:start;
    width:auto;
    padding:0;
  }
  .carrito-tabla tbody .carrito-producto{
    display:block;
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:2px 0 var(--sp-3);
  }
  .carrito-tabla tbody .carrito-producto::before{ display:none; }
  .carrito-tabla .carrito-foto__enlace{
    width:68px;
    height:68px;
  }
  .carrito__resumen{
    grid-template-columns:1fr;
    gap:var(--sp-4);
    width:100%;
  }
  .carrito__resumen-accion{ width:100%; }
  .carrito__continuar{ width:100%; }
  .carrito__resumen-nota{ max-width:none; }
}

@media (max-width:420px){
  .carrito__resumen-cifras{ gap:var(--sp-2); }
  .carrito__resumen-total{ padding-left:var(--sp-2); }
}

/* Disponibilidad detallada: solo se renderiza para clientes autorizados. */
.disponibilidad-retiro{
  display:grid;
  gap:6px;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-left:3px solid var(--success);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.3;
}
.disponibilidad-retiro__linea{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.disponibilidad-retiro__linea strong{
  color:var(--text-1);
  font-size:11px;
  line-height:1.2;
}
.disponibilidad-retiro__linea--inmediata strong{
  color:var(--success);
}
.disponibilidad-retiro__linea--adicional{
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.disponibilidad-retiro__linea--adicional strong{
  color:var(--go-strong);
  font-size:11.5px;
  font-weight:750;
}
.disponibilidad-retiro__linea > span:last-child{
  color:var(--text-1);
  font-weight:700;
  white-space:nowrap;
}
.disponibilidad-retiro__promesa{
  padding-top:5px;
  border-top:1px dashed var(--line-strong);
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.25;
}
.disponibilidad-retiro__promesa--cliente{
  display:grid;
  gap:4px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-2);
  line-height:1.4;
}
.disponibilidad-retiro__promesa--cliente strong{
  color:var(--text-1);
  font-size:12px;
  font-weight:750;
}
.disponibilidad-retiro__promesa--cliente span{
  font-size:11px;
  line-height:1.45;
}
.disponibilidad-retiro--fila{
  width:100%;
  min-width:0;
  margin:0;
  padding:7px 8px;
  gap:5px;
  border-left:0;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.disponibilidad-retiro--fila .disponibilidad-retiro__linea{
  gap:6px;
}
.disponibilidad-retiro--fila .disponibilidad-retiro__linea strong{
  color:var(--text-2);
  font-weight:600;
  overflow-wrap:anywhere;
}
.disponibilidad-retiro--fila .disponibilidad-retiro__promesa{
  font-size:10px;
}
.disponibilidad-retiro--vendedor .disponibilidad-retiro__linea--inmediata strong{
  color:var(--text-1);
}
.disponibilidad-retiro__bodega{
  justify-self:start;
  min-width:30px;
  padding:2px 5px;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:var(--surface);
  color:var(--text-1);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.04em;
  line-height:1;
  text-align:center;
}

/* Stock consolidado limpio; el desglose vive en un diálogo sólo autorizado. */
.stock-resumen{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  align-items:center;
  column-gap:7px;
  min-width:0;
  color:var(--text-3);
  line-height:1.15;
}
.stock-resumen > .semaforo{
  grid-row:1 / span 3;
  align-self:start;
  width:9px;
  height:9px;
  margin-top:6px;
}
.stock-resumen__cantidad{
  display:flex;
  align-items:baseline;
  gap:4px;
  min-width:0;
}
.stock-resumen__valor{
  color:var(--text);
  font-size:var(--fs-lg);
  font-weight:750;
  letter-spacing:var(--tracking-tight);
  line-height:1;
}
.stock-resumen__unidad{
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
}
.stock-resumen__leyenda,
.stock-resumen__detalle{
  grid-column:2;
  font-size:10.5px;
}
.stock-resumen__detalle{
  margin-top:2px;
  color:var(--go-strong);
  font-weight:700;
}
.stock-resumen--accion{
  appearance:none;
  width:100%;
  min-height:44px;
  margin:-4px;
  padding:4px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  transition:background var(--dur-fast) var(--ease-out);
}
.stock-resumen--accion:hover{
  background:var(--surface-2);
}
.stock-resumen--accion:focus-visible{
  outline:2px solid var(--go-strong);
  outline-offset:2px;
}
.stock-resumen--tarjeta{
  margin-top:auto;
}
.stock-resumen--ficha{
  width:min(100%,220px);
  justify-self:end;
}

.stock-detalle{
  width:min(420px,calc(100vw - 32px));
  max-width:420px;
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 24px 64px rgba(17,24,39,.28);
}
.stock-detalle::backdrop{
  background:rgba(17,24,39,.52);
}
.stock-detalle__cuerpo{
  padding:var(--sp-4);
}
.stock-detalle__cabeza{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.stock-detalle__cabeza .caps{
  color:var(--go-strong);
}
.stock-detalle__cabeza h2{
  margin:2px 0 0;
  font-size:var(--fs-xl);
  line-height:var(--lh-snug);
}
.stock-detalle__cerrar{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:44px;
  min-height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.stock-detalle__cerrar:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
  color:var(--text);
}
.stock-detalle__cerrar:focus-visible{
  outline:2px solid var(--go-strong);
  outline-offset:2px;
}
.stock-detalle__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-3) 0 2px;
  color:var(--text-2);
}
.stock-detalle__total strong{
  color:var(--text);
  font-size:var(--fs-lg);
}
.stock-detalle .disponibilidad-retiro{
  margin-top:var(--sp-3);
  gap:9px;
  padding:11px 12px;
}

.disponibilidad-retiro--ficha{
  width:min(100%,220px);
  max-width:220px;
  margin:0;
}
.disponibilidad-retiro--ficha .disponibilidad-retiro__linea{
  grid-template-columns:124px max-content;
  gap:8px;
  justify-content:start;
}
.tarjeta .disponibilidad-retiro{
  margin-inline:0;
}
.tabla-datos .disponibilidad-retiro{
  min-width:290px;
  max-width:420px;
}

@media (max-width: 720px){
  .disponibilidad-retiro__linea{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }
  .tabla-datos .disponibilidad-retiro{
    min-width:0;
  }
}

@media (max-width:520px){
  .caja-precio__resumen{ grid-template-columns:1fr; }
  .caja-precio__disponibilidad{ justify-content:flex-start; }
  .caja-precio__disponibilidad{ align-items:flex-start; }
  .caja-precio__disponibilidad .tarjeta__stock{
    justify-content:flex-start;
    text-align:left;
  }
  .disponibilidad-retiro--ficha{ width:min(100%,220px); }
  .stock-resumen--ficha{
    width:100%;
    justify-self:start;
  }
  .stock-detalle{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
  }
  .stock-detalle__cuerpo{
    padding:var(--sp-3);
  }
}

/* ── Portada de la vitrina de liquidación ──────────────── */
.portada-liquidacion{
  background: var(--warn-soft);
  border:1px solid var(--warn-vivid);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.portada-liquidacion .titulo-pantalla{ margin-bottom: var(--sp-2); }
.portada-liquidacion__texto{
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base);
  max-width: 68ch;
}
.portada-liquidacion__conteo{
  margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); font-weight:600;
}

/* En la fila, el precio es una columna angosta: la etiqueta se alinea a la
   derecha con el número y se le permite bajar de línea sin romper la grilla. */
.fila__precio{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.fila__precio .etiqueta-precio{ align-self:flex-end; }

/* La barra fija del celular también muestra el tachado: es donde se aprieta
   "Agregar", y es el último número que ve el cliente antes de comprometerse. */
@media (max-width: 720px){
  .barra-accion__precio .precio__tachado{ font-size: 11px; }
}

/* ============================================================
   VITRINA ALIMENTADA POR EL SACO (2026-07-29)
   Una fila responde sin abrir la ficha: qué es, cuál es su código, qué dato
   técnico lo distingue, cuándo llega, cuánto vale y cómo se compra.
   ============================================================ */
.filas{ min-width:940px; }
.fila,
.filas__cabeza{
  grid-template-columns:124px minmax(260px,1fr) 190px 126px 168px;
}
.fila{ min-height:130px; }
.fila__mini{ display:flex; width:112px; height:104px; }
.fila__identidad{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:3px;
}
.fila__categoria{ color:var(--text-3); }
.fila__marca{ font-size:10px; line-height:1; padding:4px 6px; }
.fila__nombre{ font-size:14px; }
.fila__desc{
  margin:4px 0 0;
  color:var(--text-2);
  font-size:12px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fila__specs{ gap:5px; }
.fila__specs > span,
.tarjeta__specs .spec{
  display:inline-flex; align-items:center;
  min-height:22px; padding:3px 7px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-xs); font-weight:600; line-height:1.2;
}
.fila__specs .fila__spec-vacio,
.tarjeta__specs .spec--vacio{
  border-style:dashed; background:transparent; color:var(--text-3); font-weight:500;
}
.fila__acciones{ flex-wrap:nowrap; }
.cantidad-listado{
  width:48px; min-height:var(--tap-min);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
  text-align:center; font-size:var(--fs-sm); font-weight:700;
}
.cantidad-listado:focus-visible{ outline:0; box-shadow:var(--focus-ring); }
.fila__acciones,
.tarjeta__pie,
.caja-precio__acciones{ position:relative; }
.cantidad-aviso{
  position:absolute;
  z-index:8;
  inset-inline-end:0;
  bottom:calc(100% + 5px);
  display:none;
  width:max-content;
  max-width:min(260px, 80vw);
  padding:6px 9px;
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--brand);
  box-shadow:var(--shadow-sm);
  font-size:var(--fs-xs);
  font-weight:650;
  line-height:1.25;
}
.cantidad-aviso.es-visible{ display:block; }
.tarjeta__compra{ display:flex; align-items:center; gap:6px; }

/* Cantidad ya pedida: pertenece al carrito, no a la disponibilidad. */
.producto-en-carrito{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  min-height:24px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb, var(--info) 30%, var(--line));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--info) 8%, var(--surface));
  color:var(--info);
  font-size:11px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}
.producto-en-carrito[hidden]{ display:none; }
.producto-en-carrito strong{
  min-width:18px;
  padding:2px 5px;
  border-radius:var(--radius-pill);
  background:var(--info);
  color:#fff;
  font-size:11px;
  text-align:center;
}
.fila__acciones > .producto-en-carrito,
.caja-precio__acciones > .producto-en-carrito{
  flex:0 0 100%;
  justify-content:center;
  margin-inline:auto;
}
.fila__acciones{ flex-wrap:wrap; }
.tarjeta__cuerpo > .producto-en-carrito{ margin-top:2px; }
.barra-accion__precio > .producto-en-carrito{
  margin-top:3px;
  padding:2px 6px;
}

/* Ficha: el carrito se presenta como estado contextual junto al stock. */
.producto-en-carrito--ficha{
  min-height:28px;
  padding:5px 9px;
  gap:6px;
  border-color:color-mix(in srgb, var(--go) 26%, var(--line));
  background:color-mix(in srgb, var(--go) 8%, var(--surface));
  color:var(--go-strong);
  text-decoration:none;
  box-shadow:none;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.producto-en-carrito--ficha:hover{
  border-color:color-mix(in srgb, var(--go) 42%, var(--line));
  background:color-mix(in srgb, var(--go) 12%, var(--surface));
  transform:translateY(-1px);
}
.producto-en-carrito--ficha:focus-visible{
  outline:0;
  box-shadow:var(--focus-ring);
}
.producto-en-carrito--ficha svg{
  flex:0 0 auto;
  color:var(--go-strong);
}
.producto-en-carrito--ficha .producto-en-carrito__estado{
  display:inline-flex;
  align-items:baseline;
  gap:3px;
}
.producto-en-carrito--ficha strong{
  min-width:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:inherit;
  font-weight:800;
}
.producto-en-carrito__ver{
  padding-inline-start:7px;
  border-inline-start:1px solid color-mix(in srgb, var(--go) 25%, var(--line));
  font-weight:750;
}
.barra-accion__precio > .producto-en-carrito--ficha{
  min-height:20px;
  margin-top:3px;
  padding:2px 6px;
  font-size:10.5px;
}
.barra-accion__precio > .producto-en-carrito--ficha .producto-en-carrito__ver{
  display:none;
}

@media (min-width:721px) and (max-width:1024px){
  .fila{
    grid-template-columns:112px minmax(0,1fr) 184px 120px 164px;
    grid-template-areas:"mini nombre stock precio acc";
  }
  .fila > .celda-mini{ grid-area:mini; }
  .fila__mini{ width:104px; height:96px; }
  .fila > .celda-producto{ grid-area:nombre; }
  .fila > .celda-stock{ grid-area:stock; }
  .fila > .celda-precio{ grid-area:precio; }
  .fila > .celda-acciones{ grid-area:acc; }
}

@media (max-width:720px){
  /* La regla base de la vitrina exige 900 px para la tabla de escritorio.
     En celular la fila ya es una tarjeta: conservar ese mínimo hacía que el
     botón Agregar midiera más de 800 px y quedara recortado por el contenedor. */
  .filas{ min-width:0; }
  .fila{
    grid-template-columns:108px minmax(0,1fr);
    grid-template-areas:
      "mini nombre"
      "stock stock"
      "precio precio"
      "acc acc";
    row-gap:9px;
  }
  .fila > .celda-mini{ grid-area:mini; }
  .fila__mini{ width:100px; height:93px; }
  .fila > .celda-producto{ grid-area:nombre; }
  .fila > .celda-stock{ grid-area:stock; }
  .fila > .celda-precio{
    grid-area:precio; align-items:flex-start; text-align:left;
    padding-top:7px; border-top:1px dashed var(--line);
  }
  .fila__precio .etiqueta-precio{ align-self:flex-start; }
  .fila > .celda-acciones{ grid-area:acc; justify-content:stretch; }
  .fila > .celda-acciones .btn--agregar{ flex:1 1 auto; }
  .fila__identidad{ align-items:flex-start; }
  .fila__categoria{ flex-basis:100%; }
  .fila__specs > span{ font-size:12px; }
  .tarjeta__pie{ align-items:stretch; flex-direction:column; }
  .tarjeta__compra .btn--agregar{ flex:1 1 auto; }
}

/* FICHA SACO: CONTENCION MOVIL
   Las tablas técnicas de fuentes maestras pueden traer nombres y valores
   extensos. Cada bloque puede encogerse sin ampliar el lienzo del celular. */
@media (max-width:720px){
  .ficha,
  .ficha > *,
  .ficha__datos,
  .ficha__encabezado,
  .caja-precio,
  .seccion,
  .grilla-productos,
  .tarjeta{
    min-width:0;
    max-width:100%;
  }
  .ficha__titulo{ overflow-wrap:anywhere; }
  .especificaciones{ width:100%; table-layout:fixed; }
  .especificaciones th,
  .especificaciones td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .caja-precio__acciones{ flex-direction:column; align-items:stretch; }
  .caja-precio__acciones .cantidad{ width:100%; }
  .caja-precio__acciones .btn--agregar{
    width:100%; min-height:52px; flex:0 0 52px;
  }
  .cantidad input{ flex:1 1 auto; min-width:0; }
}
/* --------------------------------------------------------------------------
   Capa pública Relmotor · 2026-08-03
   ----------------------------------------------------------------------- */
.marca__logo-relmotor {
  /* El logo deja de determinar una franja de 100 px. A 118 px conserva su
     lectura y, con 8 px de aire vertical, lleva la barra a unos 76 px. */
  width: 118px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.btn-cromado--cliente {
  border-color: #007452;
  background: #007452;
  color: #fff;
}

.btn-cromado--cliente:hover {
  border-color: #005f43;
  background: #005f43;
}

.tarjeta__pie--publico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fila__acciones--publicas {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.producto-publico {
  padding-block: clamp(20px, 4vw, 52px) clamp(48px, 7vw, 92px);
}

.producto-publico__principal {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.producto-publico__foto {
  min-height: 480px;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9dadd;
  border-radius: 12px;
  background: #fff;
}

.producto-publico__foto img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}

.producto-publico__comercial {
  position: sticky;
  top: 104px;
  border: 1px solid #d9dadd;
  border-radius: 12px;
  background: #fff;
  padding: clamp(24px, 4vw, 44px);
}

.producto-publico__comercial h1 {
  max-width: 19ch;
  margin: 8px 0 18px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: .98;
}

.producto-publico__sku {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 10px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Mismo criterio que .ficha__sku: el código manda. */
.producto-publico__sku strong {
  color: var(--go-strong);
  font-size: 21px;
  letter-spacing: .01em;
}

.producto-publico__descripcion {
  margin-top: 22px;
  color: #5d5f65;
  font-size: 18px;
  line-height: 1.5;
}

.producto-publico__disponibilidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 18px;
  border-block: 1px solid #e2e3e5;
  padding-block: 18px;
  font-size: 18px;
}

.producto-publico__acciones {
  display: grid;
  gap: 10px;
}

.producto-publico__acciones .btn {
  min-height: 48px;
}

.producto-publico__nota {
  margin: 18px 0 0;
  color: #6d6f75;
  font-size: 14px;
}

@media (max-width: 900px) {
  .producto-publico__principal {
    grid-template-columns: 1fr;
  }

  .producto-publico__foto {
    min-height: 320px;
  }

  .producto-publico__comercial {
    position: static;
  }
}

@media (max-width: 680px) {
  .marca__logo-relmotor {
    width: 96px;
    height: auto;
  }

  .producto-publico__foto {
    min-height: 260px;
  }

  .producto-publico__comercial h1 {
    font-size: 34px;
  }

  .fila--publica .celda-precio {
    display: none;
  }

  .tarjeta__pie--publico {
    grid-template-columns: 1fr;
  }
}

.filas--publicas {
  min-width: 0;
}

@media (min-width: 721px) and (max-width: 1024px) {
  .fila--publica {
    grid-template-columns: 112px minmax(0, 1fr) 112px 150px;
    grid-template-areas: "mini nombre stock acc";
  }

  .fila--publica > .celda-precio {
    display: none;
  }

  .fila--publica > .celda-acciones {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .cabecera--publica .barra {
    gap: 7px;
  }

  .cabecera--publica .marca__logo-relmotor {
    width: 96px;
    height: auto;
  }

  .cabecera--publica .acciones {
    gap: 4px;
  }

  .cabecera--publica .btn-cromado {
    gap: 4px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .cabecera--publica .btn-cromado__txt {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}

/* En 320–360 px el alta y el acceso no caben junto al logo y al menú. La
   acción de alta se conserva dentro del drawer móvil; aquí queda la primaria. */
@media (max-width: 360px) {
  .cabecera--publica .btn-cromado--cliente.btn-cromado--publica-cabecera {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Venta asistida · identidad interna separada del cliente
   ----------------------------------------------------------------------- */
.btn-cromado--venta {
  border-color: color-mix(in srgb, var(--go) 35%, var(--line));
  background: var(--go-soft);
  color: var(--go-strong);
}

.contexto-venta {
  border-bottom: 1px solid #b8d9cd;
  background: #edf8f4;
  color: #27473d;
}

.contexto-venta__interior {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 6px;
  font-size: 13px;
}

.contexto-venta__actor,
.contexto-venta__cliente {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.contexto-venta__marca {
  border-radius: 999px;
  background: var(--go-strong);
  color: #fff;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contexto-venta__cliente {
  margin-left: auto;
}

.contexto-venta__cliente > span:first-child {
  color: #658178;
}

.contexto-venta__cliente strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contexto-venta__acciones {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.contexto-venta__acciones form {
  display: flex;
  margin: 0;
}

.contexto-venta__accion {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 9px;
  background: transparent;
  color: var(--go-strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.contexto-venta__accion:hover,
.contexto-venta__accion:focus-visible {
  background: rgba(0, 109, 74, .09);
}

.contexto-venta__accion--lista {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contexto-venta__modo-consulta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
}

.contexto-venta__modo-consulta span {
  color: #55756b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contexto-venta__accion--elegir {
  border: 1px solid #aac8bd;
  margin-left: 4px;
}

.contexto-venta__accion-corta { display: none; }

.acceso-vendedor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  min-height: min(720px, calc(100vh - 230px));
  padding-block: clamp(36px, 7vw, 88px);
}

.acceso-vendedor__presentacion {
  max-width: 660px;
}

.acceso-vendedor__sobre,
.vendedor__sobre {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .12em;
}

.acceso-vendedor__presentacion h1 {
  max-width: 9ch;
  margin: 10px 0 18px;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .9;
}

.acceso-vendedor__presentacion > p {
  max-width: 590px;
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 23px);
}

.acceso-vendedor__beneficios {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.acceso-vendedor__beneficios li {
  position: relative;
  padding-left: 25px;
  color: var(--text-2);
}

.acceso-vendedor__beneficios li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--go-strong);
  font-weight: 800;
}

.acceso-vendedor__formulario {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 18px 48px rgba(21, 31, 38, .08);
}

.acceso-vendedor__formulario h2 {
  margin: 0;
  font-size: 30px;
}

.acceso-vendedor__formulario .aviso {
  margin-block: 18px;
}

.acceso-vendedor__volver {
  display: block;
  margin-top: 18px;
  color: var(--go-strong);
  text-align: center;
  font-weight: 600;
}

.acceso__pie--equipo {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.acceso__pie--equipo a {
  color: var(--go-strong);
  font-weight: 700;
}

.vendedor {
  padding-block: clamp(28px, 5vw, 62px) 80px;
}

.vendedor__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.vendedor__cabecera h1 {
  margin-top: 5px;
}

.aviso--exito {
  background: var(--go-soft);
  color: var(--go-strong);
}

.vendedor-cliente {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(420px, 1.5fr);
  gap: 24px 36px;
  align-items: center;
  border: 1px solid #b8d9cd;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #f2faf7 100%);
  padding: clamp(20px, 3vw, 34px);
}

.vendedor-cliente__identidad h2 {
  margin: 9px 0 3px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.vendedor-cliente__identidad p {
  margin: 0;
  color: var(--text-3);
}

.vendedor-cliente__condiciones {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d5e5df;
  border-radius: 10px;
  background: #d5e5df;
}

.vendedor-cliente__condiciones > div {
  min-width: 0;
  background: #fff;
  padding: 13px 14px;
}

.vendedor-cliente__condiciones dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vendedor-cliente__condiciones dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 700;
}

.vendedor-cliente__acciones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.vendedor-cliente__modo-lista {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.vendedor-cliente__modo-lista small {
  color: var(--text-3);
  line-height: 1.25;
}

.vendedor-cliente__alerta {
  grid-column: 1 / -1;
  margin: -7px 0 0;
  color: var(--brand-strong);
  font-weight: 600;
}

.vendedor-sin-cliente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px dashed #aac8bd;
  border-radius: 14px;
  background: #f5faf8;
  padding: 24px;
}

.vendedor-sin-cliente__contenido {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
}

.vendedor-sin-cliente__icono {
  grid-row: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--go-soft);
  color: var(--go-strong);
}

.vendedor-sin-cliente h2,
.vendedor-sin-cliente p {
  margin: 0;
}

.vendedor-sin-cliente__sobre {
  display: block;
  margin-bottom: 4px;
  color: var(--go-strong);
}

.vendedor-sin-cliente p {
  max-width: 650px;
  color: var(--text-2);
}

.vendedor-sin-cliente .vendedor-sin-cliente__resguardo {
  margin-top: 7px;
  color: var(--go-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.vendedor-sin-cliente__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.vendedor-carritos {
  margin-top: clamp(28px, 4vw, 44px);
}

.vendedor-carritos h2 {
  margin: 0;
  font-size: 24px;
}

.vendedor-carritos__total {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--go-soft);
  color: var(--go-strong);
  font-family: var(--font-mono);
  font-weight: 800;
}

.vendedor-carritos__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.vendedor-carrito {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 14px 18px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.vendedor-carrito--actual {
  border-color: #9bc8b8;
  background: linear-gradient(135deg, #fff 0%, #f4faf8 100%);
}

.vendedor-carrito__identidad {
  min-width: 0;
}

.vendedor-carrito__identidad h3 {
  margin: 5px 0 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.vendedor-carrito__identidad p {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.vendedor-carrito__resumen {
  display: flex;
  gap: 16px;
  margin: 0;
}

.vendedor-carrito__resumen > div {
  min-width: 58px;
}

.vendedor-carrito__resumen dt {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vendedor-carrito__resumen dd {
  margin: 2px 0 0;
  font-weight: 750;
  white-space: nowrap;
}

.vendedor-carrito form,
.vendedor-carrito .btn {
  justify-self: end;
}

.vendedor__selector,
.vendedor__pedidos {
  margin-top: clamp(34px, 5vw, 58px);
}

.vendedor__selector h2,
.vendedor__pedidos h2 {
  margin: 0;
  font-size: 26px;
}

.vendedor__buscar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  padding: 6px 7px 6px 14px;
}

.vendedor__buscar:focus-within {
  border-color: var(--go);
  box-shadow: var(--focus-ring);
}

.vendedor__buscar input {
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
}

.vendedor__clientes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.vendedor__paginacion-resumen {
  margin: 18px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

.vendedor__paginacion-resumen strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.selector-cartera {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 3px;
}

.selector-cartera__opcion {
  min-height: 44px;
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.selector-cartera__opcion:hover {
  color: var(--text);
}

.selector-cartera__opcion:focus-visible {
  outline: 2px solid var(--go-strong);
  outline-offset: 2px;
}

.selector-cartera__opcion--activa {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  color: var(--text);
}

.cliente-seleccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 15px 16px;
}

.cliente-seleccion__datos {
  flex: 1 1 auto;
  min-width: 0;
}

.cliente-seleccion__encabezado {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cliente-seleccion__encabezado h3 {
  flex: 1 1 220px;
  min-width: 0;
}

.cliente-seleccion h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.cliente-seleccion p {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 13px;
}

.cliente-cuenta-web {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.cliente-cuenta-web::before {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.cliente-cuenta-web--activa {
  border-color: var(--go);
  background: var(--go-soft);
  color: var(--go-strong);
}

.cliente-cuenta-web--sin-cuenta {
  background: var(--surface-2);
  color: var(--text-2);
}

.cliente-descuentos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.cliente-descuentos__modo,
.cliente-descuentos__item,
.cliente-descuentos__vacio {
  display: inline-flex;
  align-items: baseline;
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  line-height: 1.25;
}

.cliente-descuentos__modo {
  border-color: var(--go);
  background: var(--go-soft);
  color: var(--go-strong);
  font-weight: 750;
}

.cliente-descuentos__item {
  gap: 4px;
  background: var(--surface-2);
  color: var(--text-2);
}

.cliente-descuentos__item b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cliente-descuentos__item--isis {
  border-color: #c9bdf5;
  background: #f4f1ff;
  color: #554399;
}

.cliente-descuentos__vacio {
  background: var(--surface-2);
  color: var(--text-3);
}

.vendedor-cliente__descuentos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vendedor-cliente__descuentos span {
  line-height: 1.3;
}

@media (min-width: 1121px) {
  .vendedor__clientes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .acceso-vendedor {
    grid-template-columns: 1fr;
  }

  .acceso-vendedor__presentacion h1 {
    max-width: none;
  }

  .vendedor-cliente {
    grid-template-columns: 1fr;
  }

  .vendedor-cliente__condiciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vendedor-carritos__lista {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contexto-venta__interior {
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    padding-block: 8px;
  }

  .contexto-venta__actor > span:last-child {
    display: none;
  }

  .contexto-venta__cliente {
    order: 2;
    flex: 1 1 150px;
    width: auto;
    margin-left: 0;
  }

  .contexto-venta__cliente > span:first-child,
  .contexto-venta__cliente .mono {
    display: none;
  }

  .contexto-venta__acciones {
    order: 2;
    margin-left: auto;
  }

  .contexto-venta__accion {
    min-width: 44px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .contexto-venta__accion-larga { display: none; }
  .contexto-venta__accion-corta { display: inline; }

  .contexto-venta__modo-consulta {
    flex: 1 1 170px;
    justify-content: flex-end;
  }

  .contexto-venta__accion--elegir {
    margin-left: auto;
  }

  .acceso-vendedor {
    min-height: 0;
    padding-block: 28px 52px;
  }

  .acceso-vendedor__presentacion h1 {
    font-size: 48px;
  }

  .acceso-vendedor__beneficios {
    display: none;
  }

  .vendedor__cabecera,
  .vendedor-sin-cliente,
  .cliente-seleccion,
  .vendedor-carrito {
    align-items: stretch;
    flex-direction: column;
  }

  .selector-cartera {
    width: 100%;
  }

  .vendedor__cabecera form,
  .vendedor__cabecera button,
  .vendedor-sin-cliente__acciones,
  .vendedor-sin-cliente__acciones > *,
  .cliente-seleccion form,
  .cliente-seleccion button {
    width: 100%;
  }

  .cliente-descuentos {
    align-items: stretch;
    flex-direction: column;
  }

  .cliente-descuentos__modo,
  .cliente-descuentos__item,
  .cliente-descuentos__vacio {
    justify-content: space-between;
  }

  .vendedor-cliente__condiciones {
    grid-template-columns: 1fr 1fr;
  }

  .vendedor-cliente__acciones {
    align-items: stretch;
    flex-direction: column;
  }

  .vendedor-cliente__acciones > *,
  .vendedor-cliente__acciones .btn {
    width: 100%;
  }

  .vendedor-cliente__modo-lista {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .vendedor__buscar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vendedor__buscar .btn {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .vendedor-carrito {
    grid-template-columns: 1fr;
  }

  .vendedor-carrito__resumen {
    justify-content: space-between;
  }

  .vendedor-carrito form,
  .vendedor-carrito form .btn,
.vendedor-carrito > .btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* ============================================================
   CHECKOUT — entrega y destino
   ============================================================ */
.solo-lector{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.checkout{
  max-width: 1240px;
  padding-block: var(--sp-6) var(--sp-8);
}
.checkout__cabecera{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-5);
}
.checkout__paso{
  display:block;
  color:var(--brand);
  margin-bottom:var(--sp-1);
}
.checkout__form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,380px);
  gap:var(--sp-5);
  align-items:start;
}
.checkout__flujo{
  display:grid;
  gap:var(--sp-4);
}
.checkout__seccion,
.checkout-resumen{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}
.checkout__seccion{
  padding:var(--sp-5);
}
.checkout__seccion-cabeza{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.checkout__numero{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--slate-deep);
  color:#fff;
  font:700 12px/1 var(--font-mono);
}
.checkout__seccion-cabeza h2,
.checkout-resumen__cabeza h2{
  font-size:var(--fs-lg);
  line-height:var(--lh-tight);
}
.checkout__seccion-cabeza p{
  color:var(--text-3);
  font-size:var(--fs-sm);
  margin-top:3px;
}
.checkout__opciones{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--sp-2);
  margin:0;
  padding:0;
  border:0;
}
.checkout-opcion,
.checkout-destino,
.checkout-transporte{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  min-height:76px;
  padding:var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.checkout-opcion:hover,
.checkout-destino:hover,
.checkout-transporte:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.checkout-opcion:has(input:focus-visible),
.checkout-destino:has(input:focus-visible),
.checkout-transporte:has(input:focus-visible){
  outline:2px solid var(--go-strong);
  outline-offset:2px;
}
.checkout-opcion:has(input:checked),
.checkout-destino:has(input:checked),
.checkout-transporte:has(input:checked){
  border-color:var(--go);
  background:var(--go-soft);
  box-shadow:0 0 0 1px var(--go);
}
.checkout-opcion--urgente:has(input:checked){
  border-color:var(--brand);
  background:var(--brand-soft);
  box-shadow:0 0 0 1px var(--brand);
}
.checkout-opcion input,
.checkout-destino input,
.checkout-transporte input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.checkout-opcion__icono,
.checkout-destino__icono{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  color:var(--text-2);
  background:var(--surface-2);
}
.checkout-opcion:has(input:checked) .checkout-opcion__icono,
.checkout-destino:has(input:checked) .checkout-destino__icono,
.checkout-transporte:has(input:checked) .checkout-destino__icono{
  color:var(--go-strong);
  background:#fff;
}
.checkout-opcion--urgente:has(input:checked) .checkout-opcion__icono{
  color:var(--brand-strong);
}
.checkout-opcion__texto,
.checkout-destino__texto{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:var(--fs-sm);
  color:var(--text-3);
}
.checkout-opcion__titulo{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  color:var(--text);
  font-size:var(--fs-base);
  font-weight:700;
}
.checkout-opcion__titulo strong{
  border-radius:var(--radius-pill);
  background:var(--brand);
  color:#fff;
  padding:2px 7px;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.checkout-opcion__marca{
  width:17px;
  height:17px;
  flex:none;
  margin-left:auto;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:#fff;
  box-shadow:inset 0 0 0 4px #fff;
}
.checkout-opcion:has(input:checked) .checkout-opcion__marca,
.checkout-destino:has(input:checked) .checkout-opcion__marca,
.checkout-transporte:has(input:checked) .checkout-opcion__marca{
  border-color:var(--go);
  background:var(--go);
}
.checkout-opcion--urgente:has(input:checked) .checkout-opcion__marca{
  border-color:var(--brand);
  background:var(--brand);
}
.checkout__destinos,
.checkout__transportes{
  display:grid;
  gap:var(--sp-2);
  margin:0;
  padding:0;
  border:0;
}
.checkout-destino{
  min-height:68px;
}
.checkout-transporte{
  min-height:64px;
}
.checkout-transporte-selector{
  display:grid;
  gap:8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.checkout-transporte-selector__rotulo{
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:700;
}
.checkout-transporte-selector__control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.checkout-transporte-selector select{
  width:100%;
  min-width:0;
  min-height:var(--tap-min);
  padding:0 40px 0 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font:inherit;
}
.checkout-transporte-selector select:focus-visible{
  border-color:var(--go);
  outline:3px solid color-mix(in srgb,var(--go) 18%,transparent);
  outline-offset:1px;
}
.checkout-transporte-selector small{
  color:var(--text-2);
  line-height:1.45;
}
.checkout-destino__texto strong{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  color:var(--text);
  font-size:var(--fs-base);
}
.checkout-destino__texto strong small{
  border-radius:var(--radius-pill);
  background:var(--surface-3);
  color:var(--text-2);
  padding:2px 7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.checkout__sin-destino,
.checkout__retiro{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:64px;
  padding:var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:var(--text-2);
  background:var(--surface-2);
}
.checkout__sin-destino svg{
  flex:none;
  color:var(--warn);
}
.checkout__retiro > span:last-child{
  display:flex;
  flex-direction:column;
}
.checkout__seccion--retiro .checkout__destinos,
.checkout__seccion--retiro .checkout__sin-destino{
  display:none;
}
.checkout [hidden]{
  display:none !important;
}
.checkout__campos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--sp-3);
}
.checkout__campo-notas{
  grid-column:1/-1;
}
.checkout .campo{
  min-width:0;
}
.checkout .campo input,
.checkout .campo select{
  width:100%;
  min-height:var(--tap-min);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0 12px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
}
.checkout .campo input:focus-visible,
.checkout .campo select:focus-visible{
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.checkout-resumen{
  position:sticky;
  top:calc(var(--search-field-h) + var(--sp-5));
  overflow:hidden;
}
.checkout-resumen__cabeza{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.checkout-resumen__cabeza .caps{
  color:var(--text-3);
}
.checkout-resumen__cabeza a{
  min-height:var(--tap-min);
  display:inline-flex;
  align-items:center;
  color:var(--go-strong);
  font-weight:700;
}
.checkout-resumen__items{
  max-height:260px;
  overflow:auto;
  padding:0 var(--sp-4);
}
.checkout-resumen__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-3);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.checkout-resumen__item > span:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  color:var(--text-3);
}
.checkout-resumen__item > span:first-child strong{
  color:var(--text);
}
.checkout-resumen__item > span:last-child{
  white-space:nowrap;
  font-family:var(--font-mono);
}
.checkout-resumen__item small{
  color:var(--text-3);
}
.checkout-resumen__totales{
  display:grid;
  gap:var(--sp-2);
  margin:0;
  padding:var(--sp-4);
}
.checkout-resumen__totales div{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-4);
}
.checkout-resumen__totales dt,
.checkout-resumen__totales dd{
  margin:0;
}
.checkout-resumen__totales div:last-child{
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  font-size:var(--fs-lg);
  font-weight:700;
}
.checkout__confirmar{
  width:calc(100% - (var(--sp-4) * 2));
  margin:0 var(--sp-4);
  min-height:48px;
}
.checkout__estado-envio{
  min-height:1.4em;
  margin:8px var(--sp-4) 0;
  color:var(--go-strong);
  font-size:var(--fs-sm);
  font-weight:600;
  text-align:center;
}
.checkout__cotizar{
  width:calc(100% - (var(--sp-4) * 2));
  margin:var(--sp-2) var(--sp-4) 0;
  min-height:46px;
}
.checkout-resumen__nota{
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  color:var(--text-3);
  font-size:var(--fs-xs);
  text-align:center;
}
.checkout__orden-compra{
  display:grid;
  gap:var(--sp-2);
  max-width:560px;
}
.checkout__orden-compra-campos{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(160px,.65fr);
  gap:var(--sp-3);
}
.checkout__orden-compra label{
  font-weight:700;
}
.checkout__orden-compra input{
  width:100%;
  min-height:var(--tap-min);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0 12px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  text-transform:uppercase;
}
.checkout__orden-compra input:focus-visible{
  border-color:var(--go);
  box-shadow:var(--focus-ring);
}
.checkout__orden-compra input[type="date"]{
  text-transform:none;
}
.checkout__orden-compra small{
  color:var(--text-3);
  font-size:var(--fs-xs);
}
@media(max-width:560px){
  .checkout__orden-compra-campos{
    grid-template-columns:1fr;
  }
}
.pedido-entrega{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-4);
  margin-bottom:var(--sp-4);
  padding:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
}
.pedido-entrega > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pedido-entrega .caps,
.pedido-entrega small{
  color:var(--text-3);
}

/* Confirmación inequívoca del cierre: un comprobante, no un aviso pasajero. */
.pedido-confirmado{
  display:grid;
  place-items:start center;
  padding-block:clamp(32px,7vw,88px);
}
.pedido-confirmado__tarjeta{
  width:min(760px,100%);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:5px solid var(--go-strong);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.pedido-confirmado__cabecera{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
}
.pedido-confirmado__sello{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  color:#fff;
  background:var(--go-strong);
  border-radius:50%;
  font-size:30px;
  font-weight:700;
  line-height:1;
}
.pedido-confirmado__sobre{ color:var(--go-strong); }
.pedido-confirmado__cabecera h1{
  margin:3px 0 4px;
  font-size:clamp(28px,5vw,42px);
  line-height:1.05;
}
.pedido-confirmado__cabecera p{
  margin:0;
  color:var(--text-2);
  font-size:var(--fs-md);
}
.pedido-confirmado__folio{
  display:grid;
  justify-items:center;
  gap:4px;
  margin-inline:var(--sp-6);
  padding:var(--sp-5);
  background:var(--go-soft);
  border:1px solid color-mix(in srgb,var(--go-strong) 28%,var(--line));
  border-radius:var(--radius-lg);
  text-align:center;
}
.pedido-confirmado__folio span,
.pedido-confirmado__folio small{ color:var(--go-strong); }
.pedido-confirmado__folio strong{
  color:var(--text);
  font-size:clamp(30px,7vw,52px);
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}
.pedido-confirmado__datos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:var(--sp-5) var(--sp-6) 0;
  border-block:1px solid var(--line);
}
.pedido-confirmado__datos div{
  min-width:0;
  padding:var(--sp-4) 0;
}
.pedido-confirmado__datos div:nth-child(odd){ padding-right:var(--sp-4); }
.pedido-confirmado__datos div:nth-child(even){
  padding-left:var(--sp-4);
  border-left:1px solid var(--line);
}
.pedido-confirmado__datos dt{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.pedido-confirmado__datos dd{
  margin:4px 0 0;
  color:var(--text);
  font-size:var(--fs-md);
  font-weight:600;
  overflow-wrap:anywhere;
}
.pedido-confirmado__acciones{
  display:flex;
  justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-6) var(--sp-6);
}
.pedido-confirmado__despacho{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 var(--sp-5) var(--sp-5);
  padding:13px 15px;
  border:1px solid #b8ddcf;
  border-radius:var(--radius-md);
  background:#eef8f4;
  color:var(--go-strong);
}
.pedido-confirmado__despacho > span{display:grid;place-items:center;flex:none;}
.pedido-confirmado__despacho p{display:grid;gap:2px;margin:0;}
.pedido-confirmado__despacho strong{font-size:var(--fs-sm);}
.pedido-confirmado__despacho p span{color:var(--text-2);font-size:var(--fs-sm);}

@media (max-width:640px){
  .pedido-confirmado{ padding-block:var(--sp-5) var(--sp-7); }
  .pedido-confirmado__cabecera{
    grid-template-columns:1fr;
    padding:var(--sp-5) var(--sp-4) var(--sp-4);
  }
  .pedido-confirmado__sello{ width:46px; height:46px; font-size:26px; }
  .pedido-confirmado__folio{ margin-inline:var(--sp-4); padding:var(--sp-4); }
  .pedido-confirmado__despacho{ margin-inline:var(--sp-4); }
  .pedido-confirmado__datos{
    grid-template-columns:1fr;
    margin:var(--sp-4) var(--sp-4) 0;
  }
  .pedido-confirmado__datos div{
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--line);
  }
  .pedido-confirmado__datos div:nth-child(odd),
  .pedido-confirmado__datos div:nth-child(even){ padding-inline:0; border-left:0; }
  .pedido-confirmado__datos div:last-child{ border-bottom:0; }
  .pedido-confirmado__acciones{
    flex-direction:column;
    padding:var(--sp-4);
  }
  .pedido-confirmado__acciones .btn{ width:100%; }
}

@media (max-width: 920px){
  .checkout__form{
    grid-template-columns:1fr;
  }
  .checkout-resumen{
    position:static;
  }
}
@media (max-width: 640px){
  .checkout{
    padding-block:var(--sp-5) var(--sp-7);
  }
  .checkout__cabecera{
    align-items:flex-start;
    flex-direction:column;
  }
  .checkout__seccion{
    padding:var(--sp-4);
  }
  .checkout__opciones,
  .checkout__campos{
    grid-template-columns:1fr;
  }
  .checkout__campo-notas{
    grid-column:auto;
  }
  .checkout-opcion,
  .checkout-destino,
  .checkout-transporte{
    min-height:72px;
  }
  .pedido-entrega{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   CATALOGO LISTA: PROXIMIDAD STOCK Y PRECIO
   En escritorio ancho, la descripción deja de absorber todo el espacio:
   Stock y Precio forman un bloque comparable, mientras Compra conserva
   el espacio sobrante y permanece alineada al borde derecho.
   ============================================================ */
@media (min-width:1200px){
  .filas:not(.filas--publicas) > .fila,
  .filas:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:124px minmax(320px, 620px) 180px 136px minmax(240px, 1fr);
  }
  .filas:not(.filas--publicas) > .filas__cabeza > :nth-child(5){
    width:240px;
    justify-self:end;
    text-align:center;
  }
}

@media (min-width:721px){
  .filas:not(.filas--publicas) > .filas__cabeza > :nth-child(4){
    width:100%;
    text-align:center;
  }
  .filas:not(.filas--publicas) > .fila > .celda-precio{
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .filas:not(.filas--publicas) .fila__precio .etiqueta-precio{
    align-self:center;
  }
}

/* CATÁLOGO LISTA: FOTO CON MAYOR JERARQUÍA VISUAL
   Solo aplica al catálogo autenticado. Liquidación, catálogo público,
   vista Fotos y ficha de producto conservan sus dimensiones. */
@media (min-width:1025px){
  [data-catalogo-lista]:not(.filas--publicas) .fila__mini{
    width:128px;
    height:118px;
  }
}
@media (min-width:1025px) and (max-width:1199px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(260px,1fr) 190px 126px 168px;
  }
}
@media (min-width:1200px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(320px, 620px) 180px 136px minmax(240px, 1fr);
  }
}
@media (min-width:721px) and (max-width:1024px){
  [data-catalogo-lista]:not(.filas--publicas) .fila__mini{
    width:112px;
    height:104px;
  }
}
@media (max-width:720px){
  [data-catalogo-lista]:not(.filas--publicas) .fila__mini{
    width:108px;
    height:100px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Avísame (avisos de stock de importación, 2026-08-16)
   El resultado conserva una huella mínima: estado AGOTADO + botón.
   El formulario vive en el <dialog> compartido de la tienda y no altera
   la altura de filas, tarjetas, ficha ni barra móvil.
   ══════════════════════════════════════════════════════════════════ */
.aviso-stock{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
[data-catalogo-lista]:not(.filas--publicas) .fila__acciones{
  width:100%;
  justify-self:stretch;
  justify-content:center;
  text-align:center;
}
.fila__acciones > .aviso-stock{
  width:100%;
  align-items:center;
  text-align:center;
}
.chip-agotado{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--estado-malo); background: var(--estado-malo-soft);
  border:1px solid var(--estado-malo); border-radius: var(--radius-pill);
  padding:2px 10px; line-height:1.6;
}
.chip-agotado::before{
  content:""; width:7px; height:7px; border-radius:50%; background: var(--estado-malo);
}
.aviso-stock__abrir{
  min-height:36px;
  justify-content:center;
}
.aviso-dialogo{
  width:min(440px, calc(100vw - 32px));
  max-width:440px;
}
.aviso-dialogo__intro{
  margin:var(--sp-3) 0;
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-base);
}
.aviso-dialogo .aviso-panel{
  margin:0; padding:0;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  text-align:left; width:auto;
}
.aviso-panel__campo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; color: var(--text-2);
}
.aviso-panel__campo input{ width:80px; }
.aviso-panel__check{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color: var(--text-2); cursor:pointer;
}
.aviso-consumo{ display:none; }
.aviso-panel__check:has(input:checked) + .aviso-consumo{ display:flex; }
.aviso-panel__nota{ margin:0; font-size:11.5px; color: var(--text-3); }
.aviso-dialogo__acciones{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin-top:2px;
}
.aviso-dialogo__acciones .btn{ min-height:44px; }
.aviso-stock__hecho{ font-size:13px; font-weight:600; color: var(--ok); }
@media (max-width:520px){
  .aviso-dialogo__acciones{ display:grid; grid-template-columns:1fr 1fr; }
  .aviso-dialogo__acciones .btn{ width:100%; }
}

/* ══════════════════════════════════════════════════════════════════
   FICHA DE UNIDAD: DESPIECE EN MODO LISTA
   Conserva el patrón de lectura del catálogo sin incorporar compra directa.
   La posición técnica es la única firma propia de este listado.
   ══════════════════════════════════════════════════════════════════ */
.lista-comercial-envoltorio{
  margin-top:var(--sp-3);
  border-radius:var(--radius-md);
}
.fila__contexto{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}
.fila__contexto-nota{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.3;
}
.lista-solo-referencia{ margin-top:var(--sp-2); }
.despiece-lista-envoltorio{
  margin-top:var(--sp-3);
  border-radius:var(--radius-md);
}
[data-despiece-lista].despiece-lista{
  min-width:880px;
}
[data-despiece-lista] > .despiece-lista__fila,
[data-despiece-lista] > .filas__cabeza{
  grid-template-columns:128px minmax(280px,1fr) 180px 136px 140px;
  gap:var(--sp-4);
}
[data-despiece-lista] > .despiece-lista__fila{
  min-height:116px;
}
[data-despiece-lista] .despiece-lista__foto{
  display:grid;
  place-items:center;
  width:112px;
  height:96px;
  border:1px solid var(--line);
  background:var(--surface);
}
[data-despiece-lista] .despiece-lista__foto img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.despiece-lista__identidad{
  min-width:0;
}
.despiece-lista__posicion{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}
.despiece-lista__referencia{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.3;
}
[data-despiece-lista] .despiece-lista__stock,
[data-despiece-lista] .despiece-lista__precio,
[data-despiece-lista] .despiece-lista__acciones{
  align-items:center;
  justify-content:center;
  text-align:center;
}
[data-despiece-lista] .despiece-lista__acciones{
  width:100%;
  justify-self:stretch;
}
[data-despiece-lista] .despiece-lista__acciones .btn{
  min-width:112px;
}
.despiece-lista__no-disponible,
.despiece-lista__consulta-precio,
.despiece-lista__solo-referencia{
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:650;
  line-height:1.35;
}

@media (min-width:721px) and (max-width:1024px){
  [data-despiece-lista].despiece-lista{ min-width:0; }
  [data-despiece-lista] > .despiece-lista__fila{
    grid-template-columns:108px minmax(0,1fr) 154px 116px 118px;
    grid-template-areas:"mini nombre stock precio acc";
  }
  [data-despiece-lista] .despiece-lista__foto{
    width:96px;
    height:86px;
  }
}

@media (max-width:720px){
  [data-despiece-lista].despiece-lista{ min-width:0; }
  [data-despiece-lista] > .despiece-lista__fila{
    grid-template-columns:94px minmax(0,1fr);
    grid-template-areas:
      "mini nombre"
      "stock stock"
      "precio acc";
    row-gap:8px;
  }
  [data-despiece-lista] .despiece-lista__foto{
    width:86px;
    height:78px;
  }
  [data-despiece-lista] .despiece-lista__stock{
    align-items:flex-start;
    text-align:left;
  }
  [data-despiece-lista] .despiece-lista__precio{
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
  }
  [data-despiece-lista] .despiece-lista__acciones{
    justify-content:flex-end;
    text-align:right;
  }
  [data-despiece-lista] .despiece-lista__acciones .btn{
    width:100%;
    min-width:0;
  }
  .despiece-lista__posicion{
    min-height:22px;
    padding-inline:7px;
  }
}

/* ============================================================
   MI CUENTA — AVISOS DE REPOSICIÓN
   ============================================================ */
.avisos-cuenta__cabecera{
  display:grid;
  gap:6px;
  margin-bottom:var(--sp-4);
}
.avisos-cuenta__cabecera h1,
.avisos-cuenta__cabecera p{ margin:0; }
.avisos-cuenta__cabecera p{
  max-width:760px;
  color:var(--text-3);
  font-size:var(--fs-sm);
  line-height:var(--lh-base);
}
.avisos-cuenta{
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
}
.aviso-registro{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) minmax(220px,250px);
  grid-template-areas:
    "foto producto lateral"
    "foto metas lateral";
  gap:12px var(--sp-5);
  min-width:0;
  padding:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.aviso-registro:last-child{ border-bottom:0; }
.aviso-registro__foto{
  grid-area:foto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:112px;
  height:104px;
  align-self:start;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.aviso-registro__foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.aviso-registro__foto:focus-visible{
  outline:0;
  box-shadow:var(--focus-ring);
}
.aviso-registro__producto{
  grid-area:producto;
  min-width:0;
}
.aviso-registro__sku{
  display:inline-block;
  color:var(--go-strong);
  font-size:var(--fs-sm);
  font-weight:750;
  line-height:var(--lh-snug);
  overflow-wrap:anywhere;
}
.aviso-registro__sku:hover{ color:var(--go); }
.aviso-registro__descripcion{
  max-width:720px;
  margin:4px 0 0;
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  overflow-wrap:anywhere;
}
.aviso-registro__lateral{
  grid-area:lateral;
  display:grid;
  align-content:start;
  justify-items:end;
  gap:12px;
  min-width:0;
}
.aviso-registro__estado{
  display:grid;
  justify-items:end;
  gap:4px;
  min-width:0;
  color:var(--text-2);
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  text-align:right;
}
.aviso-registro__estado .estado{ white-space:nowrap; }
.aviso-registro__estado small{
  color:var(--text-3);
  font-size:var(--fs-micro);
}
.aviso-registro__metas{
  grid-area:metas;
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(150px,1.2fr) minmax(120px,.8fr);
  gap:var(--sp-3) var(--sp-5);
  max-width:620px;
  min-width:0;
  margin:0;
}
.aviso-registro__metas div{ min-width:0; }
.aviso-registro__metas dt{
  color:var(--text-3);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  line-height:var(--lh-snug);
  text-transform:uppercase;
}
.aviso-registro__metas dd{
  margin:3px 0 0;
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  overflow-wrap:anywhere;
}
.aviso-registro__acciones{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:var(--sp-2);
}
.aviso-registro__acciones form{
  display:flex;
  margin:0;
}
.aviso-registro__acciones .btn{ white-space:nowrap; }
.aviso-edicion-dialogo{
  width:min(480px,calc(100vw - 32px));
  max-width:480px;
}
.aviso-edicion-dialogo__intro{
  margin:var(--sp-3) 0 0;
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-base);
}
.aviso-editar{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-3);
  margin:var(--sp-4) 0 0;
  padding:0;
  background:transparent;
}
.aviso-editar__campo{
  display:grid;
  gap:5px;
  min-width:0;
  color:var(--text-2);
  font-size:var(--fs-xs);
  font-weight:650;
}
.aviso-editar__campo input{
  width:100%;
  min-height:var(--tap-min);
  padding:0 10px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-size:var(--fs-base);
}
.aviso-editar__campo input:focus-visible{
  outline:0;
  border-color:var(--go-strong);
  box-shadow:var(--focus-ring);
}
.aviso-editar__check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--tap-min);
  color:var(--text-2);
  cursor:pointer;
  font-size:var(--fs-sm);
  font-weight:600;
}
.aviso-editar__check input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--go-strong);
}
.aviso-editar__campo--mensual{ display:none; }
.aviso-editar__check:has(input:checked) + .aviso-editar__campo--mensual{ display:grid; }
.aviso-edicion-dialogo .aviso-dialogo__acciones{ margin-top:var(--sp-1); }

@media (max-width:720px){
  .avisos-cuenta__cabecera p{ font-size:var(--fs-xs); }
  .aviso-registro{
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:
      "foto producto"
      "estado estado"
      "metas metas"
      "acciones acciones";
    gap:var(--sp-3);
  }
  .aviso-registro__foto{
    width:96px;
    height:90px;
  }
  .aviso-registro__lateral{
    display:contents;
  }
  .aviso-registro__estado{
    grid-area:estado;
    justify-items:start;
    text-align:left;
  }
  .aviso-registro__acciones{
    grid-area:acciones;
    justify-content:flex-start;
  }
  .aviso-registro__metas{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-3);
    width:100%;
    max-width:none;
  }
  .aviso-registro__metas div:last-child{ grid-column:1 / -1; }
  .aviso-editar__campo input{ font-size:16px; }
}

@media (max-width:480px){
  .aviso-registro{
    grid-template-columns:96px minmax(0,1fr);
    padding:var(--sp-3);
  }
  .aviso-registro__metas{ grid-template-columns:minmax(0,1fr); }
  .aviso-registro__metas div:last-child{ grid-column:auto; }
  .aviso-registro__acciones{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .aviso-registro__acciones > *{
    min-width:0;
  }
  .aviso-registro__acciones > :only-child{ grid-column:1 / -1; }
  .aviso-registro__acciones .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   Solicitud interna de stock · flujo de staff separado de ventas
   ----------------------------------------------------------------------- */
.vendedor-stock-entrada{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-4);
  align-items:center;
  margin-bottom:var(--sp-5);
  border:1px solid #a8bed1;
  border-left:5px solid var(--info);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#fff 0%,#f1f6fb 100%);
  padding:var(--sp-4) var(--sp-5);
}
.vendedor-stock-entrada__icono{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--info-soft);
  color:var(--info);
}
.vendedor-stock-entrada__sobre{ color:var(--info); }
.vendedor-stock-entrada h2{ margin:2px 0 0; font-size:var(--fs-xl); }
.vendedor-stock-entrada p{ color:var(--text-2); }

.vendedor-control-activo{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-4);
  align-items:center;
  margin-bottom:var(--sp-4);
  border:1px solid #71b9a4;
  border-left:5px solid var(--go);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#f5fcf9 0%,#e8f6f0 100%);
  padding:var(--sp-4) var(--sp-5);
}
.vendedor-control-activo__icono{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--go-soft);
  color:var(--go-strong);
}
.vendedor-control-activo__sobre{ color:var(--go-strong); }
.vendedor-control-activo h2{ margin:2px 0 0; font-size:var(--fs-xl); }
.vendedor-control-activo p{ margin:4px 0 0; color:var(--text-2); }
.vendedor-control-activo__acciones{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.vendedor-control-activo__acciones form{ display:contents; }

.solicitud-stock{ padding-block:clamp(26px,4vw,54px) var(--sp-8); }
.solicitud-stock__cabecera{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-5);
  margin-bottom:var(--sp-4);
}
.solicitud-stock__cabecera h1{ margin-top:var(--sp-2); }
.solicitud-stock__etiqueta{
  display:inline-flex;
  border:1px dashed var(--brand);
  border-radius:var(--radius-xs);
  background:var(--brand-soft);
  color:var(--brand-strong);
  padding:4px 8px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.solicitud-stock__limite{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
  border:1px solid #b8d9cd;
  border-radius:var(--radius-md);
  background:#edf8f4;
  color:#27473d;
  padding:var(--sp-3) var(--sp-4);
}
.solicitud-stock__limite svg{ flex:0 0 auto; }
.solicitud-stock > .aviso{ margin-bottom:var(--sp-4); }
.solicitud-stock__trabajo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,400px);
  gap:var(--sp-5);
  align-items:start;
}
.solicitud-stock__catalogo,
.solicitud-stock__bandeja,
.solicitud-stock__historial{
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.solicitud-stock__catalogo{ padding:clamp(16px,2.4vw,28px); }
.solicitud-stock__seccion-cabeza h2{ margin:0; font-size:var(--fs-xl); }
.solicitud-stock__buscar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-2);
  margin-top:var(--sp-3);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:6px 6px 6px var(--sp-3);
}
.solicitud-stock__buscar:focus-within{ border-color:var(--go); box-shadow:var(--focus-ring); }
.solicitud-stock__buscar input{
  min-width:0;
  min-height:42px;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
}
.solicitud-stock__catalogo .aviso{ margin-top:var(--sp-3); }
.solicitud-stock__resultados{ margin-top:var(--sp-6); }
.solicitud-stock__lista-productos{ display:grid; gap:var(--sp-3); margin-top:var(--sp-3); }
.solicitud-stock-producto{
  display:grid;
  grid-template-columns:104px minmax(160px,1fr) minmax(220px,.8fr) minmax(170px,auto);
  gap:var(--sp-4);
  align-items:center;
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--sp-3);
}
.solicitud-stock-producto__foto{
  width:104px;
  height:92px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.solicitud-stock-producto__identidad{ min-width:0; }
.solicitud-stock-producto__sku{ color:var(--info); font-size:var(--fs-xs); font-weight:700; }
.solicitud-stock-producto__identidad h3{
  display:-webkit-box;
  overflow:hidden;
  margin:3px 0;
  font-size:var(--fs-md);
  line-height:var(--lh-snug);
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.solicitud-stock-producto__identidad p{ color:var(--text-3); font-size:var(--fs-xs); }
.solicitud-stock-producto__stock{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--line);
}
.solicitud-stock-producto__stock div{ min-width:0; background:var(--surface); padding:8px; }
.solicitud-stock-producto__stock dt{
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}
.solicitud-stock-producto__stock dd{
  margin:2px 0 0;
  overflow-wrap:anywhere;
  font-weight:700;
}
.solicitud-stock-producto__agregar{
  display:grid;
  grid-template-columns:64px minmax(112px,1fr);
  gap:6px;
  align-items:end;
}
.solicitud-stock-producto__agregar label{ color:var(--text-3); font-size:var(--fs-xs); }
.solicitud-stock-producto__agregar input{
  grid-row:2;
  width:64px;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:6px;
  font-family:var(--font-mono);
  font-size:16px;
}
.solicitud-stock-producto__agregar .btn{ grid-column:2; grid-row:2; white-space:nowrap; }
.solicitud-stock-producto__agregar small{ grid-column:1 / -1; color:var(--go-strong); }
.solicitud-stock__vacio{ margin-top:var(--sp-3); }

.solicitud-stock__bandeja{
  position:sticky;
  top:var(--sp-4);
  overflow:hidden;
}
.solicitud-stock__bandeja-cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
  padding:var(--sp-4);
}
.solicitud-stock__bandeja-cabeza h2{ margin:2px 0 0; }
.solicitud-stock__conteo{
  display:grid;
  min-width:34px;
  height:34px;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--info);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:700;
}
.solicitud-stock__borrador-vacio{
  display:flex;
  gap:var(--sp-3);
  align-items:center;
  color:var(--text-2);
  padding:var(--sp-5) var(--sp-4);
}
.solicitud-stock__items{ max-height:420px; overflow:auto; }
.solicitud-stock-item{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:var(--sp-3);
  border-bottom:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4);
}
.solicitud-stock-item--invalido{ background:var(--brand-soft); }
.solicitud-stock-item > img{
  width:58px;
  height:58px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.solicitud-stock-item__identidad{ display:flex; min-width:0; flex-direction:column; }
.solicitud-stock-item__identidad > span{
  overflow:hidden;
  color:var(--text-2);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.solicitud-stock-item__identidad small{ color:var(--text-3); }
.solicitud-stock-item__error{ color:var(--brand-strong) !important; font-weight:700; }
.solicitud-stock-item__acciones{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-2);
}
.solicitud-stock-item__acciones form:first-child{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:var(--sp-2);
}
.solicitud-stock-item__acciones input{
  width:72px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:6px;
  font-family:var(--font-mono);
  font-size:16px;
}
.solicitud-stock__quitar{
  min-height:40px;
  border:1px solid var(--brand-soft);
  background:#fff;
  color:var(--brand-strong);
}
.solicitud-stock__confirmar{ display:grid; gap:var(--sp-2); padding:var(--sp-4); }
.solicitud-stock__confirmar label{ font-weight:700; }
.solicitud-stock__confirmar label span{ color:var(--text-3); font-size:var(--fs-xs); font-weight:400; }
.solicitud-stock__confirmar select,
.solicitud-stock__confirmar textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  padding:10px;
  font:inherit;
}
.solicitud-stock__confirmar textarea{ resize:vertical; }
.solicitud-stock__confirmar :where(select,textarea):focus{ border-color:var(--go); box-shadow:var(--focus-ring); outline:0; }
.solicitud-stock__permiso{
  margin:var(--sp-1) 0;
  border-radius:var(--radius-sm);
  background:var(--warn-soft);
  color:var(--warn);
  padding:var(--sp-2);
  font-size:var(--fs-xs);
}
.solicitud-stock__permiso--denegado{ background:var(--brand-soft); color:var(--brand-strong); }
.solicitud-stock__confirmar button:disabled{ cursor:not-allowed; opacity:.5; }
.solicitud-stock__vaciar{ padding:0 var(--sp-4) var(--sp-4); }

.solicitud-stock__historial{ margin-top:var(--sp-5); padding:clamp(16px,2.4vw,28px); }
.solicitud-stock__sin-historial{ margin-top:var(--sp-3); color:var(--text-3); }
.solicitud-stock__historial-lista{ display:grid; gap:var(--sp-2); margin-top:var(--sp-3); }
.solicitud-stock-historial{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) auto minmax(220px,1fr) minmax(280px,1.2fr);
  gap:var(--sp-4);
  align-items:center;
  border-top:1px solid var(--line);
  padding:var(--sp-3) 0;
}
.solicitud-stock-historial:first-child{ border-top:0; }
.solicitud-stock-historial > div:first-child{ display:flex; flex-direction:column; }
.solicitud-stock-historial__folio{ color:var(--info); font-weight:700; }
.solicitud-stock-historial small,
.solicitud-stock-historial__detalle span{ color:var(--text-3); }
.solicitud-stock-historial__detalle{ display:flex; flex-direction:column; }
.solicitud-stock-historial > p{ color:var(--text-2); }

/* Resultado por línea. Antes esta columna era un párrafo con los tres primeros
   códigos y un «+N más»: decía QUÉ se pidió pero nunca QUÉ PASÓ con cada cosa.
   Ahora es una lista, cada línea con su desenlace al lado. */
.solicitud-stock-historial__lineas{
  list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--text-2);
}
.solicitud-stock-historial__lineas li{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-sm); line-height:1.3;
}
.solicitud-stock-historial__cant{ color:var(--text-3); font-variant-numeric:tabular-nums; }

@media (max-width:1180px){
  .solicitud-stock-producto{
    grid-template-columns:88px minmax(0,1fr) minmax(180px,.8fr);
  }
  .solicitud-stock-producto__foto{ width:88px; height:82px; }
  .solicitud-stock-producto__agregar{ grid-column:2 / -1; }
  .solicitud-stock-historial{ grid-template-columns:minmax(150px,1fr) auto minmax(220px,1.4fr); }
  .solicitud-stock-historial__lineas{ grid-column:1 / -1; }
}

@media (max-width:980px){
  .solicitud-stock__trabajo{ grid-template-columns:minmax(0,1fr); }
  .solicitud-stock__bandeja{ position:static; }
  .solicitud-stock__items{ max-height:none; }
}

@media (max-width:720px){
  .vendedor-stock-entrada{
    grid-template-columns:auto minmax(0,1fr);
    padding:var(--sp-4);
  }
  .vendedor-control-activo{
    grid-template-columns:auto minmax(0,1fr);
    padding:var(--sp-4);
  }
  .vendedor-control-activo__acciones{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr;
  }
  .vendedor-control-activo__acciones .btn{ width:100%; }
  .vendedor-stock-entrada .btn{ grid-column:1 / -1; width:100%; }
  .solicitud-stock__cabecera{ align-items:stretch; flex-direction:column; }
  .solicitud-stock__cabecera .btn{ width:100%; }
  .solicitud-stock__buscar{ grid-template-columns:auto minmax(0,1fr); }
  .solicitud-stock__buscar .btn{ grid-column:1 / -1; min-height:var(--tap-min); }
  .solicitud-stock-producto{ grid-template-columns:88px minmax(0,1fr); align-items:start; }
  .solicitud-stock-producto__stock,
  .solicitud-stock-producto__agregar{ grid-column:1 / -1; }
  .solicitud-stock-producto__agregar{ grid-template-columns:80px minmax(0,1fr); }
  .solicitud-stock-producto__agregar input{ width:80px; }
  .solicitud-stock-historial{ grid-template-columns:minmax(0,1fr) auto; }
  .solicitud-stock-historial__detalle,
  .solicitud-stock-historial__lineas{ grid-column:1 / -1; }
}

@media (max-width:420px){
  .solicitud-stock__limite{ align-items:flex-start; }
  .solicitud-stock-producto__stock{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solicitud-stock-producto__stock div:last-child{ grid-column:1 / -1; }
  .solicitud-stock-item__acciones{ grid-template-columns:minmax(0,1fr); }
  .solicitud-stock-item__acciones form:last-child .btn{ width:100%; }
}

/* Estos selectores cierran la cascada de las tablas históricas. El monitor
   usa tarjetas desde tablet y no debe heredar el ancho mínimo de 720 px. */
.clientes-tabla table{ min-width:0; }
@media (min-width:961px) and (max-width:1200px){
  .clientes-tabla--monitor table{ min-width:980px; }
}
@media (max-width:960px){
  .clientes-tabla--monitor table{ min-width:0; width:100%; }
  .clientes-tabla--monitor .tabla-desplazable{ overflow:visible; background:none; }
  .clientes-tabla--monitor thead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
  .clientes-tabla--monitor tbody{ display:grid; gap:var(--sp-3); padding:var(--sp-3); background:var(--bg); }
  .clientes-tabla--monitor tbody tr{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--sp-4);
    padding:var(--sp-4);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
  }
  .clientes-tabla--monitor tbody td{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    align-items:start;
    justify-content:initial;
    gap:var(--sp-2);
    min-width:0;
    padding:8px 0;
    border:0;
    border-bottom:1px solid var(--line);
    text-align:left;
  }
  .clientes-tabla--monitor tbody td::before{
    content:attr(data-rotulo);
    display:block;
    color:var(--text-3);
    font-size:var(--fs-micro);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .clientes-tabla--monitor tbody td.clientes-empresa{
    grid-column:1 / -1;
    display:block;
    padding-top:0;
    font-weight:400;
  }
  .clientes-tabla--monitor tbody td.clientes-empresa::before,
  .clientes-tabla--monitor tbody td.clientes-acciones-celda::before{ display:none; }
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    padding-bottom:0;
    border-bottom:0;
  }
  .clientes-tabla--monitor tbody td.clientes-contacto{ display:grid; }
}
@media (max-width:720px){
  .clientes-tabla--monitor tbody tr{ display:grid; grid-template-columns:1fr; padding:var(--sp-3); }
  .clientes-tabla--monitor tbody td{ display:grid; grid-template-columns:100px minmax(0,1fr); padding:8px 0; border:0; border-bottom:1px solid var(--line); }
  .clientes-tabla--monitor tbody td.clientes-empresa,
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{ grid-column:auto; }
  .clientes-tabla--monitor tbody td.clientes-acciones-celda{ display:grid; grid-template-columns:1fr; gap:8px; }
  .clientes-tabla--monitor tbody td.clientes-contacto{ display:grid; }
}
@media (max-width:420px){
  .clientes-tabla--monitor tbody td{ grid-template-columns:1fr; gap:4px; }
}

/* Monitor de clientes: filas continuas y orden de alto valor. El separador se
   pinta una sola vez por registro en escritorio; Contacto y Acciones pueden
   conservar sus layouts internos sin fragmentar visualmente la fila. */
.clientes-tabla-orden-movil{ display:none; }
.clientes-orden-boton{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
  min-height:30px;
  margin:-4px;
  padding:4px;
  color:inherit;
  background:transparent;
  border:0;
  border-radius:var(--radius-xs);
  font:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  text-transform:inherit;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.clientes-orden-boton:hover{
  color:var(--go-strong);
  background:color-mix(in srgb,var(--go-soft) 62%,transparent);
}
.clientes-orden-boton:focus-visible{
  outline:2px solid var(--go-strong);
  outline-offset:2px;
}
.clientes-orden-indicador{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:none;
  color:var(--text-3);
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.clientes-orden-cabecera[aria-sort="ascending"] .clientes-orden-boton,
.clientes-orden-cabecera[aria-sort="descending"] .clientes-orden-boton{
  color:var(--go-strong);
  background:var(--go-soft);
}
.clientes-orden-cabecera[aria-sort="ascending"] .clientes-orden-indicador,
.clientes-orden-cabecera[aria-sort="descending"] .clientes-orden-indicador{ color:var(--go-strong); }

@media (min-width:961px){
  .clientes-tabla--monitor tbody td{ border-bottom:0; }
  .clientes-tabla--monitor tbody tr:not(:last-child){ border-bottom:1px solid var(--line); }
  .clientes-tabla--monitor tbody tr:hover,
  .clientes-tabla--monitor tbody tr:focus-within{ background:var(--surface-2); }
  .clientes-tabla--monitor .clientes-acciones-cabecera{ text-align:right; }
  .clientes-tabla--monitor .clientes-acciones-celda .btn{
    min-width:116px;
    justify-content:center;
  }
}

@media (max-width:960px){
  .clientes-tabla--monitor tbody tr:last-child{ border-bottom:1px solid var(--line); }
  .clientes-tabla-orden-movil{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-3);
    padding:10px var(--sp-3);
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .clientes-tabla-orden-movil > span{
    color:var(--text-3);
    font-size:var(--fs-micro);
  }
  .clientes-tabla-orden-movil .clientes-orden-boton{
    width:auto;
    min-height:var(--tap-min);
    margin:0;
    padding:7px 10px;
    color:var(--text-2);
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    font-size:var(--fs-xs);
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
  }
  .clientes-tabla--monitor thead .clientes-orden-boton{ display:none; }
}

/* ============================================================
   CATÁLOGO AUTENTICADO: MARCA VISUAL Y STOCK SIN SEMÁFOROS
   El logo identifica al fabricante sin competir con el producto. La
   disponibilidad usa texto y cantidad; el rojo queda reservado a Agotado.
   ============================================================ */
.marca-lista{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:36px;
  overflow:hidden;
}
.marca-lista__logo{
  display:block;
  width:auto;
  height:auto;
  max-width:88px;
  max-height:34px;
  object-fit:contain;
}
.marca-lista__logo--lienzo-horizontal{
  width:88px;
  height:88px;
  max-width:none;
  max-height:none;
  flex:none;
}
.marca-lista__logo--as-parts{
  width:76px;
  height:76px;
}
.marca-lista__logo--wai{
  width:54px;
  height:54px;
  max-width:none;
  max-height:none;
  flex:none;
}
.marca-lista__texto{
  max-width:100%;
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  overflow-wrap:anywhere;
  text-align:center;
  text-transform:uppercase;
}
.marca-lista__sin-dato{
  color:var(--text-3);
  font-size:var(--fs-sm);
}

/* El resumen privado ya no codifica nivel de stock mediante colores. */
.stock-resumen{
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
}
.stock-resumen > .semaforo{ display:none; }
.stock-resumen__leyenda,
.stock-resumen__detalle{ grid-column:1; }
.stock-resumen__detalle{ color:var(--text-2); }
.stock-resumen--sin-stock{
  display:flex;
  align-items:center;
  min-height:36px;
  color:var(--brand);
}
.stock-resumen__agotado{
  color:var(--brand);
  font-size:var(--fs-sm);
  font-weight:400;
  line-height:1.2;
}
.stock-resumen--fila .stock-resumen__agotado{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--brand-strong);
  font-size:var(--fs-md);
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
}
.stock-resumen--fila .stock-resumen__agotado::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent);
}

/* Escritorio: sexta columna sobria, inmediatamente antes de Stock. */
@media (min-width:1025px) and (max-width:1199px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(220px,1fr) 92px 136px 112px 156px;
  }
}
@media (min-width:1200px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(300px,620px) 108px 150px 128px minmax(220px,1fr);
  }
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza > :nth-child(5){
    width:100%;
    justify-self:auto;
    text-align:center;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza > :nth-child(6){
    width:240px;
    max-width:100%;
    justify-self:end;
    text-align:center;
  }
}
@media (min-width:1025px){
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza > :nth-child(3){
    text-align:center;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza > :nth-child(4){
    width:auto;
    text-align:left;
  }
}

/* Tablet: la marca conserva una celda propia bajo el producto, sin forzar
   desplazamiento horizontal ni encoger precio/compra. */
@media (min-width:721px) and (max-width:1024px){
  [data-catalogo-lista]:not(.filas--publicas){ min-width:0; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila{
    grid-template-columns:112px minmax(0,1fr) 120px 150px;
    grid-template-areas:
      "mini nombre stock acc"
      "mini marca  precio acc";
    min-height:142px;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-mini{ grid-area:mini; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-producto{ grid-area:nombre; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    display:flex;
    grid-area:marca;
    justify-content:flex-start;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-stock{ grid-area:stock; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-precio{ grid-area:precio; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-acciones{ grid-area:acc; }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo{
    max-width:80px;
    max-height:30px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--lienzo-horizontal{
    width:80px;
    height:80px;
    max-width:none;
    max-height:none;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--as-parts{
    width:70px;
    height:70px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--wai{
    width:50px;
    height:50px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__texto{ text-align:left; }
}

/* Celular: no hay columnas horizontales; la marca queda bajo la identidad y
   sobre el resumen de stock, siempre dentro del ancho disponible. */
@media (max-width:720px){
  [data-catalogo-lista]:not(.filas--publicas){ min-width:0; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila{
    grid-template-areas:
      "mini nombre"
      "mini marca"
      "stock stock"
      "precio precio"
      "acc acc";
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > *{ min-width:0; }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    display:flex;
    grid-area:marca;
    justify-content:flex-start;
    min-height:24px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo{
    max-width:72px;
    max-height:24px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--lienzo-horizontal{
    width:72px;
    height:72px;
    max-width:none;
    max-height:none;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--as-parts{
    width:64px;
    height:64px;
  }
  [data-catalogo-lista]:not(.filas--publicas) .marca-lista__logo--wai{
    width:42px;
    height:42px;
  }
    [data-catalogo-lista]:not(.filas--publicas) .marca-lista__texto{
      font-size:10.5px;
      text-align:left;
    }
  }

/* ============================================================
   CONTACTO COMERCIAL FLOTANTE
   La franja roja conecta el canal WhatsApp con la identidad Relmotor; el
   verde queda reservado a la acción comercial. Se esconde bajo el aviso de
   cookies, que tiene prioridad legal y visual sobre cualquier conversión.
   ============================================================ */
.whatsapp-flotante{
  position:fixed;
  z-index:90; /* debajo de modal y del aviso de cookies (z-index 9000) */
  right:max(var(--sp-4), calc(env(safe-area-inset-right) + var(--sp-2)));
  bottom:max(var(--sp-4), calc(env(safe-area-inset-bottom) + var(--sp-2)));
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  max-width:calc(100vw - (var(--sp-4) * 2));
  padding:6px 16px 6px 6px;
  color:#fff;
  background:var(--go-strong);
  border:1px solid rgba(255,255,255,.24);
  border-left:3px solid var(--brand);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-pop);
  text-decoration:none;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.whatsapp-flotante:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,102,68,.25);
}
.whatsapp-flotante:focus-visible{
  outline:3px solid var(--info);
  outline-offset:3px;
}
.whatsapp-flotante__icono{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  color:var(--go-strong);
  background:#fff;
  border-radius:50%;
}
.whatsapp-flotante__icono svg{ width:23px; height:23px; }
.whatsapp-flotante__texto{
  display:grid;
  min-width:0;
  line-height:1.05;
}
.whatsapp-flotante__sobrelinea{
  margin-bottom:2px;
  color:rgba(255,255,255,.78);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.whatsapp-flotante__titulo{
  overflow:hidden;
  color:#fff;
  font-size:var(--fs-md);
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@supports selector(body:has(#aviso-cookies[data-visible="1"])){
  body:has(#aviso-cookies[data-visible="1"]) .whatsapp-flotante{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px);
  }
}
@media (max-width:540px){
  .whatsapp-flotante{
    width:56px;
    min-width:56px;
    padding:6px;
    border-left-width:3px;
  }
  .whatsapp-flotante__texto{ display:none; }
}
/* En la ficha móvil la compra ya tiene una barra fija. El contacto sigue en
   el pie; el flotante no debe cubrir Agregar ni el desglose de estas unidades. */
@media (max-width:720px){
  body:has(.barra-accion) .whatsapp-flotante{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-flotante{ transition:none; }
}

/* ============================================================
   GALERÍA DE LA FICHA
   El fabricante da la pieza de frente, de lado y por detrás. Con una sola foto
   el cliente no ve el anclaje ni la polea, que es lo que mira para decidir.
   Con una sola foto no aparece nada de esto: la ficha queda igual que antes.
   ============================================================ */
.ficha__foto-paso{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.92);
  color:var(--text-1); font-size:24px; line-height:1;
  display:grid; place-items:center; cursor:pointer; padding:0;
  opacity:0; transition:opacity .15s ease, background .15s ease;
}
.ficha__foto-paso--antes{ left:10px; }
.ficha__foto-paso--despues{ right:10px; }
/* En el escritorio las flechas aparecen al acercar el puntero, para no tapar la
   pieza. En pantallas táctiles no hay puntero: ahí van siempre visibles. */
.ficha__foto:hover .ficha__foto-paso,
.ficha__foto-paso:focus-visible{ opacity:1; }
@media (hover:none){ .ficha__foto-paso{ opacity:1; } }
.ficha__foto-paso:hover{ background:#fff; }

.ficha__foto-cuenta{
  position:absolute; right:10px; bottom:10px;
  background:rgba(15,23,42,.72); color:#fff;
  font-size:12px; font-variant-numeric:tabular-nums;
  padding:3px 9px; border-radius:999px; pointer-events:none;
}

.ficha__miniaturas{
  display:flex; gap:8px; margin:10px 0 0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:thin;
}
.ficha__miniaturas > li{ flex:0 0 auto; }
.ficha__miniatura{
  width:64px; height:64px; padding:2px; cursor:pointer;
  background:var(--surface-2); border:2px solid transparent;
  border-radius:var(--radius-md, 8px); display:block;
}
.ficha__miniatura img{ width:100%; height:100%; object-fit:contain; display:block; }
.ficha__miniatura.es-activa{ border-color:var(--go-strong, #0f766e); }
.ficha__miniatura:focus-visible{ outline:2px solid var(--go-strong, #0f766e); outline-offset:2px; }

/* Catálogo autenticado: marca, stock y precio se leen como un bloque continuo.
   Se conserva el espacio para las cifras, pero se elimina el vacío visual entre
   el logo y el precio; el listado público y el móvil no cambian. */
@media (min-width:1025px) and (max-width:1199px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(220px,1fr) 88px 112px 108px 156px;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
}
@media (min-width:1200px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila,
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza{
    grid-template-columns:140px minmax(300px,620px) 92px 112px 120px minmax(220px,1fr);
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
}
@media (min-width:721px) and (max-width:1024px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    justify-content:flex-end;
    padding-right:var(--sp-3);
  }
}

/* Catálogo autenticado: la marca se acerca a la disponibilidad y el stock se
   apoya al lado del precio. La celda conserva todo su ancho clickeable. */
@media (min-width:1025px){
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-marca{
    justify-content:flex-end;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-stock .stock-resumen{
    justify-items:end;
    text-align:right;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-stock .stock-resumen__cantidad{
    justify-content:flex-end;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .fila > .celda-stock .stock-resumen--sin-stock{
    justify-content:flex-end;
  }
  [data-catalogo-lista]:not(.filas--publicas) > .filas__cabeza > :nth-child(4){
    text-align:right;
  }
}

/* ── Galería en la ficha pública (2026-08-23) ───────────────────────────────
   La ficha pública mostraba UNA foto. Desde la carga de AS-PL hay hasta 6 por
   producto y el visitante anónimo —el que llega por WhatsApp o por Google— no
   veía ninguna salvo la primera.
   Reusa los controles ya estilados de la ficha con sesión (.ficha__foto-paso,
   .ficha__foto-cuenta, .ficha__miniaturas): aquí sólo hace falta el contenedor
   que envuelve el marco y las miniaturas, y que el marco sea posicionado para
   que las flechas se anclen a ÉL y no a la página. */
.producto-publico__medios { display: grid; align-content: start; min-width: 0; }
.producto-publico__foto   { position: relative; }
.producto-publico__medios .ficha__miniaturas { margin-top: 10px; }

/* ── Ficha técnica y aplicaciones en la ficha pública (2026-08-23) ──────────
   La ficha pública sólo tenía foto y un párrafo igual en las 4.660 páginas:
   dos productos distintos daban páginas idénticas al 99,3 %. Ahora lleva los
   datos del fabricante —con SUS nombres, que son los del plano— y los vehículos
   compatibles.
   Reusa .ficha-bloque y .especificaciones, ya estilados para la ficha con
   sesión; esto es sólo lo que falta. */
.producto-publico .ficha-bloque { margin-top: clamp(28px, 4vw, 48px); }

.ficha-tecnica__grupo + .ficha-tecnica__grupo { margin-top: 22px; }
.ficha-tecnica__titulo {
  margin: 0 0 8px; font-size: 15px; font-weight: 600;
  letter-spacing: .01em; color: var(--text-1, #0f172a);
}
/* Con dos grupos —un trasero CON rectificador, por ejemplo— la misma etiqueta
   aparece dos veces con valores distintos. La línea separa a cuál pertenece. */
.ficha-tecnica__grupo + .ficha-tecnica__grupo .ficha-tecnica__titulo {
  padding-top: 18px; border-top: 1px solid var(--line, #e2e8f0);
}
.ficha-tecnica__nota {
  margin: 18px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-2, #64748b);
}

.aplicaciones-marca + .aplicaciones-marca { margin-top: 18px; }
.aplicaciones-marca__titulo {
  margin: 0 0 6px; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2, #64748b);
}
.aplicaciones-lista { margin: 0; padding: 0; list-style: none; }
.aplicaciones-lista > li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line, #e2e8f0);
}
.aplicaciones-lista > li:last-child { border-bottom: 0; }
.aplicaciones-lista__modelo { font-weight: 500; }
.aplicaciones-lista__motor,
.aplicaciones-lista__anios { font-size: 13px; color: var(--text-2, #64748b); }
.aplicaciones-mas {
  margin: 16px 0 0; font-size: 13px; color: var(--text-2, #64748b);
}

@media (max-width: 680px) {
  .aplicaciones-lista > li { gap: 2px 10px; }
}

/* ============================================================
   PORTAL COMERCIAL
   Un solo acceso superior y una navegación local: los modos comerciales no
   compiten con Administración ni crean una segunda identidad de sesión.
   ============================================================ */
.portal-nav-contenedor{ margin-top:24px; }
.portal-nav{
  display:flex; gap:6px; align-items:center; overflow-x:auto;
  padding:6px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2,#f5f7fa); scrollbar-width:thin;
}
.portal-nav__enlace{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:9px 15px; border:1px solid transparent;
  border-radius:9px; color:var(--text-2,#475569); font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.portal-nav__form{ display:flex; margin:0; }
.portal-nav__form .portal-nav__enlace{
  appearance:none; background:transparent; font:inherit; cursor:pointer;
}
.portal-nav__enlace:hover{ background:#fff; color:var(--text-1,#0f172a); }
.portal-nav__enlace:focus-visible{ outline:3px solid rgba(6,78,174,.25); outline-offset:2px; }
.portal-nav__enlace--activo{
  background:#fff; border-color:var(--line); color:var(--brand,#064eae);
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

.portal-comercial{ padding-top:34px; padding-bottom:60px; }
.portal-comercial__cabecera{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  margin-bottom:20px;
}
.portal-comercial__sobre{ display:block; margin-bottom:5px; color:var(--brand,#064eae); }
.portal-comercial__cabecera .titulo-pantalla{ margin-bottom:3px; }
.portal-comercial > .portal-nav{ margin-bottom:22px; }

.portal-resumen{
  margin-top:20px; padding:24px; border:1px solid #c8d8ea; border-radius:14px;
  background:linear-gradient(135deg,#f7fbff 0%,#fff 62%);
}
.portal-resumen__cabeza{
  display:flex; justify-content:space-between; align-items:center; gap:22px;
  margin-bottom:20px;
}
.portal-resumen__cabeza h2{ margin:3px 0 1px; font-size:clamp(24px,3vw,34px); }
.portal-resumen__cabeza p{ margin:0; color:var(--text-2,#64748b); }
.portal-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.portal-kpis article{
  display:grid; gap:2px; min-width:0; padding:16px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
}
.portal-kpis span{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2,#64748b); }
.portal-kpis strong{ font-size:clamp(24px,3vw,34px); line-height:1.05; overflow-wrap:anywhere; }
.portal-kpis small{ color:var(--text-2,#64748b); line-height:1.3; }
.portal-kpis .portal-kpi--bien strong{ color:#07835c; }
.portal-clientes-vivos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin-top:14px;
}
.portal-clientes-vivos a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:11px 13px; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:inherit; text-decoration:none;
}
.portal-clientes-vivos a:hover{ border-color:#9ebfe1; box-shadow:0 2px 8px rgba(15,23,42,.06); }
.portal-clientes-vivos a > span:nth-child(2){ display:grid; min-width:0; }
.portal-clientes-vivos strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-clientes-vivos small{ color:var(--text-2,#64748b); }
.portal-clientes-vivos__estado{ width:9px; height:9px; border-radius:50%; background:#94a3b8; }
.portal-clientes-vivos__estado.es-online{ background:#059669; box-shadow:0 0 0 4px rgba(5,150,105,.12); }
.portal-separacion{
  display:flex; gap:12px; align-items:flex-start; padding:16px;
  border:1px dashed #aebed0; border-radius:10px; background:rgba(255,255,255,.72);
}
.portal-separacion p{ margin:0; line-height:1.45; }

.portal-acciones{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.portal-accion{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:21px; border:1px solid var(--line); border-radius:13px; background:#fff;
}
.portal-accion--venta{ border-left:4px solid #07835c; }
.portal-accion--stock{ border-left:4px solid #064eae; }
.portal-accion--consulta{ grid-column:1/-1; border-left:4px solid #718096; }
.portal-accion__icono{
  display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:#eaf3fb; color:#064eae;
}
.portal-accion h2{ margin:2px 0; font-size:21px; }
.portal-accion p{ margin:0; color:var(--text-2,#64748b); line-height:1.4; }
.portal-accion small{ display:block; margin-top:5px; color:#4b647b; font-weight:600; }
.portal-accion__consulta-form{ margin:0; }

.clientes-shell--portal{ grid-template-columns:minmax(0,1fr); margin-top:18px; }
.clientes-shell--portal .clientes-contenido{ min-width:0; }

@media (max-width:1000px){
  .portal-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-acciones{ grid-template-columns:1fr; }
  .portal-accion--consulta{ grid-column:auto; }
}
@media (max-width:680px){
  .portal-comercial{ padding-top:22px; }
  .portal-comercial__cabecera,.portal-resumen__cabeza{ align-items:stretch; flex-direction:column; }
  .portal-nav{ margin-left:-2px; margin-right:-2px; justify-content:flex-start; }
  .portal-nav__enlace{ padding:8px 12px; min-height:40px; }
  .portal-resumen{ padding:17px; }
  .portal-kpis,.portal-clientes-vivos{ grid-template-columns:1fr; }
  .portal-accion{ grid-template-columns:auto minmax(0,1fr); align-items:start; padding:17px; }
  .portal-accion > .btn,.portal-accion > .portal-accion__consulta-form{ grid-column:1/-1; width:100%; }
  .portal-accion__consulta-form .btn{ width:100%; }
}
.pedidos-sucursales{
  display:grid;
  grid-template-columns:minmax(180px,.72fr) minmax(0,1.8fr);
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,#fff 0%,#f6fbf9 100%);
}
.pedidos-sucursales h2{margin:0;font-size:1rem}
.pedidos-sucursales p{margin:4px 0 0;color:var(--text-3);font-size:.85rem;line-height:1.45}
.pedidos-sucursales__filtros{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.pedidos-sucursales__filtros a{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:8px 11px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);
  font-size:.82rem;text-decoration:none;transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.pedidos-sucursales__filtros a:hover{border-color:var(--go);color:var(--go-strong)}
.pedidos-sucursales__filtros a[aria-current="page"]{border-color:#8bc7b2;background:#e8f6f0;color:#006e4e}
.pedidos-sucursales__filtros b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#edf1f3;font-size:.74rem}
.pedidos-sucursales__filtros a[aria-current="page"] b{background:#ccebdd}
.pedidos-sucursales__historico{color:var(--text-3);font-size:.82rem}
@media(max-width:760px){
  .pedidos-sucursales{grid-template-columns:1fr;gap:12px;padding:14px}
  .pedidos-sucursales__filtros{justify-content:flex-start}
}

/* COMEX comercial: una capa informativa, separada de stock y compra. */
.comex-llegada{
  display:grid;
  gap:2px;
  min-width:0;
  margin-top:9px;
  padding:9px 11px;
  border:1px solid #bad3ee;
  border-radius:10px;
  background:#f2f8fe;
  color:#173a5e;
  font-size:.78rem;
  line-height:1.35;
}
.comex-llegada__rotulo{
  color:#075ea9;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.comex-llegada strong{overflow-wrap:anywhere;color:#102f4e;font-size:.84rem}
.comex-llegada small{color:#506b84;line-height:1.35}
/* Disponibilidad futura: dos líneas discretas bajo el stock actual. */
.comex-llegada--fila{
  display:grid;
  gap:2px;
  width:100%;
  max-width:100%;
  margin-top:6px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:11px;
  line-height:1.35;
}
.comex-llegada--fila .comex-llegada__rotulo{
  color:#506b84;
  font-size:10px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
.comex-llegada--fila strong{
  font-size:11px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  overflow-wrap:normal;
}
.comex-llegada--fila .comex-llegada__fecha{
  color:#506b84;
  font-size:10px;
}
@media (min-width:1025px){
  .fila__stock .comex-llegada--fila{text-align:right;justify-items:end}
}
.comex-llegada--ficha{max-width:430px;margin-top:12px;padding:12px 14px}
.comex-llegada--ficha strong{font-size:.94rem}
.comex-llegada--aviso{margin:8px 0 0}

.comex-portal{padding-top:28px;padding-bottom:52px}
.comex-portal .portal-comercial__cabecera{align-items:flex-start}
.comex-portal__actualizacion{
  display:grid;
  gap:4px;
  flex:0 1 330px;
  padding:14px 16px;
  border:1px solid #b9d2e9;
  border-radius:12px;
  background:#f3f8fd;
  color:#385571;
  line-height:1.4;
}
.comex-portal__actualizacion strong{color:#123a61;font-size:.83rem;text-transform:uppercase;letter-spacing:.045em}
.comex-portal__actualizacion span{font-size:.86rem}
.comex-filtros{
  display:grid;
  grid-template-columns:minmax(230px,1.6fr) minmax(150px,.7fr) minmax(150px,.7fr) auto;
  gap:12px;
  align-items:end;
  margin:18px 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.comex-filtros label{display:grid;gap:6px;min-width:0;color:#43566a;font-size:.78rem;font-weight:750}
.comex-filtros input,.comex-filtros select{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 11px;
  border:1px solid #bdc9d6;
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font:inherit;
}
.comex-filtros__acciones{display:flex;gap:8px;align-items:center}
.comex-filtros :is(input,select):focus-visible,
.comex-paginacion a:focus-visible,
.comex-fila a:focus-visible{
  outline:3px solid #86bdf1;
  outline-offset:2px;
}
.comex-resultados{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.comex-resultados__cabecera{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.comex-resultados__cabecera h2{margin:0;font-size:1.25rem}
.comex-resultados__cabecera p,.comex-resultados__cabecera > span{margin:3px 0 0;color:var(--text-2,#64748b);font-size:.84rem}
.comex-tabla{display:grid;min-width:0}
.comex-tabla__cabecera,.comex-fila{
  display:grid;
  grid-template-columns:minmax(230px,2fr) minmax(110px,.65fr) minmax(135px,.75fr) minmax(190px,1fr);
  gap:16px;
  align-items:center;
}
.comex-tabla__cabecera{
  padding:10px 20px;
  background:#f6f8fa;
  color:#536476;
  font-size:.71rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.comex-fila{padding:16px 20px;border-top:1px solid #e7ebef}
.comex-tabla__cabecera + .comex-fila{border-top:0}
.comex-fila__producto{display:grid;gap:3px;min-width:0}
.comex-fila__producto a{width:max-content;max-width:100%;color:#084f90;font-size:.94rem;font-weight:800;overflow-wrap:anywhere}
.comex-fila__producto span{color:#405266;font-size:.84rem;line-height:1.38;overflow-wrap:anywhere}
.comex-fila__cantidad{display:grid;gap:1px}
.comex-fila__cantidad strong{font-size:1.12rem}
.comex-fila__cantidad span,.comex-fila__eta small{color:var(--text-2,#64748b);font-size:.73rem}
.comex-fila__eta{display:grid;gap:4px}
.comex-fila__eta strong{font-size:.84rem;line-height:1.35}
.comex-estado,.comex-confianza{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:#edf3f8;
  color:#38546d;
  font-size:.72rem;
  font-weight:750;
}
.comex-estado--en_transito{background:#eeeafb;color:#503ca4}
.comex-estado--en_puerto,.comex-estado--en_aduana{background:#fff3d9;color:#7b5100}
.comex-estado--proxima_recepcion{background:#e6f6ef;color:#087051}
.comex-confianza--confirmada{background:#e5f5ed;color:#06704d}
.comex-confianza--estimada{background:#eef2f6;color:#536476}
.comex-vacio{
  display:grid;
  justify-items:start;
  gap:7px;
  margin-top:18px;
  padding:28px;
  border:1px dashed #b9c7d5;
  border-radius:14px;
  background:#fafcfe;
}
.comex-vacio h2,.comex-vacio p{margin:0}
.comex-vacio p{color:var(--text-2,#64748b)}
.comex-vacio--error{border-style:solid;border-color:#e8cba4;background:#fffaf3}
.comex-paginacion{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}

@media (max-width:1000px){
  .comex-filtros{grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(140px,1fr))}
  .comex-filtros__acciones{grid-column:1/-1;justify-content:flex-end}
  .comex-tabla__cabecera,.comex-fila{grid-template-columns:minmax(200px,1.6fr) minmax(95px,.55fr) minmax(120px,.7fr) minmax(170px,1fr);gap:12px}
}

@media (max-width:760px){
  .comex-portal{padding-top:20px;padding-bottom:36px}
  .comex-portal__actualizacion{flex-basis:auto;width:100%}
  .comex-filtros{grid-template-columns:1fr;padding:14px}
  .comex-filtros__acciones{grid-column:auto;justify-content:stretch}
  .comex-filtros__acciones .btn{flex:1}
  .comex-resultados__cabecera{align-items:flex-start;padding:16px;flex-direction:column}
  .comex-tabla__cabecera{display:none}
  .comex-fila{
    grid-template-columns:1fr 1fr;
    gap:14px 18px;
    padding:17px 16px;
  }
  .comex-fila__producto{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid #edf0f3}
  .comex-fila [data-etiqueta]::before{
    display:block;
    margin-bottom:5px;
    color:#68798a;
    content:attr(data-etiqueta);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
  }
  .comex-fila__eta{grid-column:1/-1}
  .comex-vacio{padding:22px 18px}
}

@media (max-width:420px){
  .comex-portal{overflow-x:clip}
  .comex-filtros__acciones{display:grid;grid-template-columns:1fr}
  .comex-fila{grid-template-columns:1fr}
  .comex-fila__producto,.comex-fila__eta{grid-column:auto}
  .comex-paginacion{justify-content:space-between;gap:7px}
  .comex-paginacion .paginacion__direccion{min-width:0;padding-inline:10px}
  .comex-llegada:not(.comex-llegada--fila){padding:8px 9px}
}

@media (forced-colors:active){
  .comex-llegada,.comex-portal__actualizacion,.comex-resultados,.comex-vacio{border:1px solid CanvasText}
  .comex-estado,.comex-confianza{border:1px solid CanvasText}
}

/* ============================================================
   RECORDATORIO DE DESPACHO · carrito activo de cliente real
   ============================================================ */
.aviso-despacho{
  border-block:1px solid #bfd4ec;
  background:#eef5fc;
  color:var(--text);
}
.aviso-despacho__interior{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--sp-3);
  min-height:58px;
  padding-block:7px;
}
.aviso-despacho__icono{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-md);
  background:#dbeafa;
  color:var(--info);
}
.aviso-despacho__texto{
  display:flex;
  min-width:0;
  margin:0;
  gap:8px;
  align-items:baseline;
  line-height:var(--lh-snug);
}
.aviso-despacho__texto strong{
  flex:none;
  color:#003f91;
  font-size:var(--fs-sm);
  font-weight:700;
}
.aviso-despacho__texto span{
  min-width:0;
  color:var(--text-2);
  font-size:var(--fs-sm);
}
.aviso-despacho__accion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding-inline:14px;
  border:1px solid #9bbce0;
  border-radius:var(--radius-md);
  background:var(--surface);
  color:#003f91;
  font-size:var(--fs-sm);
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.aviso-despacho__accion:hover{border-color:var(--info);background:#f8fbff;}
.aviso-despacho__accion:focus-visible,
.aviso-despacho__cerrar:focus-visible{outline:2px solid var(--info);outline-offset:2px;}
.aviso-despacho__interior > form{margin:0;}
.aviso-despacho__cerrar{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.aviso-despacho__cerrar:hover{background:#dbeafa;color:#003f91;}
.aviso-despacho[hidden]{display:none;}

@media (max-width:720px){
  .aviso-despacho__interior{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px 10px;
    padding-block:10px;
  }
  .aviso-despacho__texto{display:grid;gap:2px;align-items:start;}
  .aviso-despacho__accion{
    grid-column:2;
    width:max-content;
    max-width:100%;
  }
  .aviso-despacho__interior > form{grid-column:3;grid-row:1;}
}

@media (prefers-reduced-motion:reduce){
  .aviso-despacho__accion,.aviso-despacho__cerrar{transition:none;}
}

@media (forced-colors:active){
  .aviso-despacho,.aviso-despacho__icono,.aviso-despacho__accion{border:1px solid CanvasText;}
}

/* Habilitación acotada de cuentas por vendedores. */
.habilitar-cuentas > .portal-nav{ margin-bottom:22px; }
.habilitar-cuentas__alcance{
  display:flex; gap:8px 14px; align-items:baseline; flex-wrap:wrap;
  margin:18px 0; padding:14px 16px; border:1px solid #b9d7c9;
  border-radius:10px; background:#f2fbf7; color:#174c38;
}
.habilitar-cuentas__resultado{
  display:grid; grid-template-columns:minmax(220px,.8fr) minmax(320px,1.4fr);
  gap:24px; margin:18px 0; padding:20px; border:1px solid var(--go);
  border-radius:12px; background:var(--go-soft);
}
.habilitar-cuentas__resultado h2{ margin:3px 0 5px; }
.habilitar-cuentas__resultado p{ margin:0; color:var(--text-2); }
.habilitar-cuentas__copiar label{ display:block; margin-bottom:6px; font-weight:700; }
.habilitar-cuentas__copiar > div{ display:flex; gap:8px; }
.habilitar-cuentas__copiar input{
  min-width:0; flex:1; border:1px solid var(--line); border-radius:8px;
  background:#fff; padding:10px 12px; font:inherit;
}
.habilitar-cuentas__copiar [data-copiar-estado]{ display:block; min-height:20px; margin-top:5px; color:var(--go-strong); font-size:13px; }
.habilitar-cuentas__total{
  display:grid; place-items:center; min-width:48px; min-height:40px;
  border-radius:999px; background:var(--surface-2); font-weight:800;
}
.habilitar-cuenta__bloqueo{ color:#9a3412 !important; font-weight:650; }
.habilitar-cuenta button:disabled{ cursor:not-allowed; opacity:.65; }
.habilitar-cuentas__paginacion{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
@media (max-width:720px){
  .habilitar-cuentas__resultado{ grid-template-columns:1fr; gap:16px; }
  .habilitar-cuentas__copiar > div{ align-items:stretch; flex-direction:column; }
  .habilitar-cuentas__copiar .btn{ width:100%; }
}


/* Transporte del checkout: empresa una vez, modalidad visible y resumen completo. */
.checkout-transporte-selector[hidden]{display:none!important}
.checkout-transporte-eleccion{display:grid;gap:18px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.checkout-transporte-empresa{display:grid;gap:8px;min-width:0}.checkout-transporte-empresa strong,.checkout-transporte-modalidades legend{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.checkout-transporte-empresa select{box-sizing:border-box;width:100%;min-width:0;min-height:var(--tap-min);padding:10px 36px 10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
.checkout-transporte-empresa select:focus-visible{outline:3px solid color-mix(in srgb,var(--go) 22%,transparent);outline-offset:2px}
.checkout-transporte-modalidades{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin:0;min-width:0}.checkout-transporte-modalidades[hidden]{display:none!important}.checkout-transporte-modalidades legend{padding:0;margin-bottom:8px}
.checkout-transporte-modalidad{display:flex;align-items:center;gap:10px;flex:1 1 180px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);min-height:var(--tap-min);cursor:pointer}.checkout-transporte-modalidad:has(input:checked){border-color:var(--go);background:color-mix(in srgb,var(--go) 8%,var(--surface))}.checkout-transporte-modalidad input{accent-color:var(--go);width:18px;height:18px;flex:none}.checkout-transporte-modalidad:focus-within{outline:2px solid var(--go);outline-offset:2px}
.checkout-transporte-resumen{margin:0;padding:12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;overflow-wrap:anywhere}

/* ============================================================
   GIRO 360 DE LA FICHA
   Automarco fotografía algunas piezas girando sobre una base: doce o veintidós
   cuadros del mismo repuesto. Con las fotos sueltas el cliente ve tres caras;
   con el giro ve el anclaje, la polea y la salida del cable desde donde quiera.
   Sólo aparece en los productos que tienen los cuadros: en el resto la ficha
   queda exactamente igual que antes.
   ============================================================ */
.ficha__giro-boton{
  position:absolute; left:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 9px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--text-1);
  font-size:13px; font-weight:600; line-height:1;
  box-shadow:0 1px 3px rgba(15,23,42,.12);
  transition:background .15s ease, border-color .15s ease;
}
.ficha__giro-boton:hover{ background:#fff; border-color:var(--go-strong, #0f766e); }
.ficha__giro-boton:focus-visible{ outline:2px solid var(--go-strong, #0f766e); outline-offset:2px; }
.ficha__giro-icono{
  font-size:11px; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--go-strong, #0f766e);
}
/* Con el giro puesto el botón se invierte: es el interruptor de un modo, no una
   acción que se dispara y se olvida. */
.es-girando .ficha__giro-boton{
  background:var(--go-strong, #0f766e); border-color:var(--go-strong, #0f766e); color:#fff;
}
.es-girando .ficha__giro-icono{ color:#fff; }

.ficha__giro-pista{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2;
  background:rgba(15,23,42,.72); color:#fff;
  font-size:12px; padding:4px 11px; border-radius:999px; pointer-events:none;
}

/* Mientras se gira, el puntero dice que se puede arrastrar y el navegador no
   intenta “llevarse” la imagen como si fuera un enlace. En el móvil se corta el
   desplazamiento horizontal para que el dedo gire la pieza en vez de mover la
   página; el vertical se conserva para poder seguir bajando por la ficha. */
.es-girando [data-galeria-principal]{
  cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:pan-y;
}
.es-girando [data-galeria-principal]:active{ cursor:grabbing; }

@media (max-width:540px){
  .ficha__giro-boton{ padding:5px 10px 5px 8px; font-size:12px; }
  .ficha__giro-texto{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ficha__giro-boton{ transition:none; }
}


/* ── Estado del pedido · línea de vida del cliente (2026-09-08) ─────────── */
.linea-vida{ background:#fff; border:1px solid var(--slate-ink); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); }
.linea-vida__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.linea-vida__cabeza .caps{ display:block; font-size:var(--fs-micro); color:var(--text-3); }
.linea-vida__actual{ font-size:var(--fs-lg); }
.linea-vida__paso{ margin-left:8px; font-size:var(--fs-micro); color:var(--text-3); }
.linea-vida__ayuda{ font-size:var(--fs-sm); }
.linea-vida__pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; }
.linea-vida__hito{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 6px; }
.linea-vida__hito::before{ content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:var(--slate-ink); z-index:0; }
.linea-vida__hito:first-child::before{ display:none; }
.linea-vida__hito.es-hecho::before{ background:var(--go-strong); }
.linea-vida__numero{ position:relative; z-index:1; width:28px; height:28px; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:#fff; border:2px solid var(--slate-ink); color:var(--text-3); font:700 12px/1 var(--font-mono); }
.linea-vida__hito.es-hecho .linea-vida__numero{ background:var(--go-strong); border-color:var(--go-strong); color:#fff; }
.linea-vida__hito.es-actual .linea-vida__numero{ background:var(--info); border-color:var(--info); color:#fff; box-shadow:0 0 0 4px rgba(0,74,173,.15); }
.linea-vida__nombre{ font-size:var(--fs-sm); font-weight:700; color:var(--text-3); line-height:1.2; }
.linea-vida__hito.es-hecho .linea-vida__nombre, .linea-vida__hito.es-actual .linea-vida__nombre{ color:var(--text); }
.linea-vida__fecha{ font-size:var(--fs-micro); color:var(--text-3); }
.linea-vida__explica{ margin:14px 0 0; padding:12px 14px; background:#F5F7F9; border-radius:var(--radius-sm); display:grid; gap:8px; }
.linea-vida__explica[hidden]{ display:none; }
.linea-vida__explica dt{ font-weight:700; font-size:var(--fs-sm); }
.linea-vida__explica dd{ margin:0; font-size:var(--fs-sm); color:var(--text-2); }
.linea-vida__cambios{ margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--warn-soft); color:var(--text); }
.linea-vida__cambios p{ margin:4px 0 8px; font-size:var(--fs-sm); }
.linea-vida__cambios ul{ margin:0; padding-left:18px; font-size:var(--fs-sm); display:grid; gap:4px; }
.linea-vida__cambios em{ color:var(--warn); font-style:normal; font-weight:600; }
.linea-vida__doc{ margin:14px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--text-3); }
.linea-vida__mini{ display:inline-flex; gap:3px; margin-left:8px; vertical-align:middle; }
.linea-vida__mini i{ width:7px; height:7px; border-radius:50%; background:var(--slate-ink); display:inline-block; }
.linea-vida__mini i.es-hecho{ background:var(--go-strong); }
@media (max-width:640px){
  .linea-vida__pasos{ grid-template-columns:1fr; gap:10px; }
  .linea-vida__hito{ flex-direction:row; text-align:left; align-items:center; }
  .linea-vida__hito::before{ display:none; }
}
.linea-vida__comprobante{ margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--go-soft, #ECFDF5); border:1px solid var(--go-strong, #166534); }
.linea-vida__comprobante-cabeza{ display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; font-size:var(--fs-sm); color:var(--go-strong, #166534); }
.linea-vida__comprobante-cabeza span{ color:var(--text-2); }
.linea-vida__comprobante-lista{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.linea-vida__comprobante-item{ display:grid; gap:6px; justify-items:start; text-decoration:none; color:inherit; max-width:280px; }
.linea-vida__comprobante-item img{ width:200px; height:140px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--slate-ink); background:#fff; }
.linea-vida__comprobante-item:hover img{ box-shadow:0 2px 10px rgba(15,23,42,.18); }
.linea-vida__comprobante-doc{ width:200px; height:140px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px dashed var(--slate-ink); background:#fff; color:var(--text-3); font-weight:700; }
.linea-vida__comprobante-item small{ color:var(--text-3); font-size:var(--fs-micro); }
.linea-vida__comprobante-item.is-pendiente{ color:var(--text-2); font-size:var(--fs-sm); }
.linea-vida__clip{ margin-left:6px; font-size:12px; vertical-align:middle; }

/* Precios marginales: cada unidad conserva su precio visible antes de comprar. */
.precio-tramos { margin-top:4px; font-size:13px; line-height:1.5; font-weight:400; color:var(--texto); }
.precio-tramos > summary { cursor:pointer; width:fit-content; padding:5px 0; text-decoration:underline; text-underline-offset:3px; }
.precio-tramos > summary:focus-visible, .checkout-productos-detalle > summary:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }
.precio-tramos__fila { display:block; padding:2px 0; white-space:normal; }
.precio-tramos-seleccion { flex-basis:100%; font-size:13px; line-height:1.5; }
.precio-tramos-seleccion:empty { display:none; }
.precio-tramos-seleccion > strong { font-weight:600; }
.checkout-productos-detalle > summary { cursor:pointer; padding:12px 16px; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.checkout-tramos-producto { padding:10px 0; border-bottom:1px solid var(--borde); font-size:13px; }
.checkout-tramos-producto > span { display:block; }

/* Checkout: empresa → vía habilitada → forma de entrega. */
.checkout__opciones--despacho-retiro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-transporte-vias { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-transporte-vias legend { font-weight: 700; margin-bottom: 8px; }
.checkout-transporte-vias .checkout-transporte-modalidad { flex: 1; min-width: 130px; }
.checkout-transporte-vias[hidden], .checkout-transporte-modalidades[hidden] { display: none !important; }
.checkout-transporte-via-nota { font-size: 13px; color: var(--texto-secundario, #5b626c); margin: 0; }
@media (max-width: 640px) { .checkout__opciones--despacho-retiro { grid-template-columns: 1fr; } }

/* OC opcional: selector nativo alineado y tipografía coherente con el checkout. */
.checkout .checkout-oc-archivo{margin-top:18px;display:grid;gap:7px;min-width:0}
.checkout .checkout-oc-archivo>label{margin:0;font-size:13px;line-height:1.4}
.checkout .checkout-oc-archivo>label .tenue{font-weight:400}
.checkout .checkout-oc-archivo input[type="file"]{
  box-sizing:border-box;width:100%;max-width:100%;height:46px;min-height:46px;
  margin:0;padding:5px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text-3);font-family:inherit;font-size:13px;
  font-weight:400;line-height:34px;text-transform:none;cursor:pointer;
}
.checkout .checkout-oc-archivo input[type="file"]::file-selector-button{
  height:34px;margin:0 12px 0 0;padding:0 14px;border:0;border-radius:5px;
  background:#eaf5ef;color:var(--go-strong);font-family:inherit;font-size:13px;
  font-weight:600;line-height:34px;vertical-align:middle;cursor:pointer;
}
.checkout .checkout-oc-archivo input[type="file"]:hover::file-selector-button{background:#dcefe4}
.checkout .checkout-oc-archivo input[type="file"]:focus-visible{outline:2px solid #00875a;outline-offset:3px}
.checkout .checkout-oc-archivo>small{margin:0;color:var(--text-3);font-size:12px;line-height:1.5}
.checkout .checkout-oc-archivo__listo{margin:3px 0 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.checkout .checkout-oc-archivo .checkout-oc-archivo__quitar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:400}
.checkout .checkout-oc-archivo__quitar input[type="checkbox"]{width:16px;height:16px;min-height:16px;margin:0;padding:0;flex:0 0 16px}
/* El detalle de productos comparte los márgenes del encabezado y los totales. */
.checkout-resumen .checkout-tramos-producto{padding:14px 16px;margin:0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.checkout-resumen .checkout-tramos-producto>strong{display:block;margin-bottom:2px;font-size:14px;font-weight:600}
.checkout-resumen .checkout-tramos-producto>span{color:var(--text-3)}
.checkout-resumen .checkout-tramos-producto .precio-tramos{margin-top:6px}

/* Selección de productos completos para el siguiente pedido. */
.carrito-seleccion__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.carrito-seleccion__barra p{margin:.25rem 0 0;color:var(--color-texto-tenue,#52606d)}
.carrito-seleccion__controles{display:flex;gap:.5rem;flex-wrap:wrap}
.carrito-seleccion__columna{width:76px;text-align:center}
.carrito-seleccion__casilla{display:flex;align-items:center;justify-content:center;gap:.3rem;flex-direction:column;min-width:60px;min-height:44px;cursor:pointer;font-size:.75rem}
.carrito-seleccion__casilla input{width:20px;height:20px;accent-color:var(--color-marca,#bf2026);cursor:pointer}
.carrito-seleccion--despues{background:#f5f7f8}
.carrito-seleccion--despues .carrito-seleccion__casilla{color:#52606d}
.carrito__continuar:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:640px){.carrito-seleccion__barra{align-items:stretch}.carrito-seleccion__controles{width:100%}.carrito-seleccion__controles .btn{flex:1}.carrito-tabla td.carrito-seleccion__columna{display:flex;grid-column:1 / -1;width:auto;justify-content:flex-start}.carrito-seleccion__casilla{flex-direction:row;gap:.5rem}}