/* =====================================================================
   publico/assets/publico.css
   ---------------------------------------------------------------------
   LA TIENDA Y LA FICHA DE PRODUCTO.

   ⚠ ESTA HOJA TODAVÍA NO ESTÁ EN EL MANUAL DE MARCA.

   La cabecera, el menú móvil y el pie se mudaron a layout.css y ya
   están migrados: consumen los tokens semánticos de tema.css. Lo que
   queda acá —catálogo, filtros, tarjetas, ficha— sigue en el sistema
   viejo: Space Grotesk, --tinta, --papel, --azul, --hot.

   Por eso el :root de abajo se conserva: es lo que mantiene viva a
   esta mitad hasta que le toque el turno. Cuando se migre, ese bloque
   desaparece entero y las reglas pasan a --ink, --bg y --accent.

   Al migrar hay una decisión pendiente que no es de color: el manual
   permite UN acento amarillo por vista, y una rejilla de 24 productos
   con ocho en oferta tendría ocho. Hoy eso lo resuelve el naranja
   --hot, que no existe en el manual.

   LA IDEA
   -------
   Acá se venden colores. Lo único que importa en pantalla es la foto
   del producto y el disco de color; todo lo demás se aparta.
   Por eso el fondo es neutro tibio, las tarjetas no tienen sombra en
   reposo, y no hay ni un degradado en toda la hoja: cualquier adorno
   compite con la bobina.

   El único guiño al oficio es la banda de líneas finas bajo los
   títulos de filtro — capas de impresión vistas de canto. Aparece
   pequeña y repetida, nunca como decoración grande.

   TIPOGRAFÍA
   ----------
   Space Grotesk en títulos y precios: tiene el corte técnico de un
   catálogo de máquinas sin caer en fuente de ciencia ficción.
   Inter para leer. IBM Plex Mono para SKU, cuentas y paginación — un
   código de producto se lee mejor en monoespaciada, sobre todo
   cuando alguien lo compara contra una etiqueta física.
   ===================================================================== */

:root{
  --tinta:#15171B;
  --tinta-media:#4A4F57;
  --tinta-suave:#6E737B;
  --papel:#F6F5F2;
  --blanco:#FFFFFF;
  --linea:#E4E2DD;
  --linea-fuerte:#D2CFC8;
  --azul:#2657C9;
  --azul-suave:#EEF3FD;
  --hot:#E5581F;          /* naranja de boquilla caliente: ofertas */
  --verde:#1F8A55;
  --ambar:#B47A0A;
  --wa:#25D366;

  --radio:10px;
  --radio-chico:7px;
  --sombra:0 1px 2px rgba(21,23,27,.05), 0 10px 28px rgba(21,23,27,.07);
  --ease:cubic-bezier(.23,1,.32,1);

  --ancho-filtros:248px;
}

/* EL BLOQUE BASE SE FUE A layout.css.

   Estaba pisando al sistema entero sin que se notara: publico.css
   carga DESPUÉS de layout.css, y `background:var(--papel)` en atajo
   borra cualquier background-image que layout.css hubiera puesto. Por
   eso el fondo se veía crema plano en vez de blanco tiza con
   cuadrícula, y la cuadrícula no aparecía por ningún lado.

   Es el patrón de siempre: la regla aplicada en casi todos los
   archivos, y el que falta ganándole a todos por orden de carga. */

/* El manual fija el ancho maximo de contenido en 1180px, y la
   cabecera y el pie ya lo respetan via .envoltura. Sin este cambio
   la tienda quedaria 220px mas ancha que su propia cabecera. */
.contenedor{width:100%; max-width:var(--maxw,1180px); margin:0 auto; padding:0 var(--s3,24px);}

/* Se navega esta tienda con teclado o no se navega: el outline no se
   quita sin poner otra cosa en su lugar. */
:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:4px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =====================================================================
   ESTRUCTURA DEL CATÁLOGO
   ---------------------------------------------------------------------
   MÁS ANCHO QUE EL RESTO DEL SITIO, A PROPÓSITO.

   El tope de 1180px del manual es una regla de medida de línea: existe
   para que un párrafo no pase de 75 caracteres. Una rejilla de
   productos no tiene renglón que proteger, y a 1180 dejaba en un
   monitor de 1920 casi 400px vacíos a cada lado mientras las tarjetas
   se apretaban de a cuatro. El texto que SÍ se lee acá —el párrafo de
   la landing— conserva su propio tope de 68 caracteres en .cat-intro.

   El ancho vive en tema.css (--maxw-catalogo) y no acá: es una medida
   del sistema, no de esta hoja.
   ===================================================================== */
.contenedor.catalogo{ max-width:var(--maxw-catalogo, 1600px); }

.catalogo{
  --ancho-filtros:272px;
  display:grid; grid-template-columns:var(--ancho-filtros) minmax(0,1fr);
  gap:28px; padding-top:28px; padding-bottom:80px; align-items:start;
}
/* Ningún hijo del catálogo puede estirar su columna. La grilla de
   categorías en el teléfono es una fila que se desliza (5 × 148px), y un
   hijo de grilla, por defecto, no se achica por debajo de su contenido:
   empujaba la columna a ~850px y el teléfono alejaba el zoom de la
   página entera para que entrara. Ver también la columna de ≤860px. */
.catalogo > *{ min-width:0; }
.pagina-simple{padding:80px 22px;}
.seccion-titulo{font-size:19px; margin:0 0 18px;}

/* CINCO POR FILA EN EL CATÁLOGO, FIJO.
   Mismo criterio que la rejilla base de layout.css: columnas contadas,
   no auto-fill, para que "de a cinco" sea una promesa y no dependa del
   ancho que sobre. Va con .catalogo delante para no tocar la portada,
   que sigue de a cuatro.

   Cinco solo desde 1440px: por debajo, con la columna de filtros al
   lado, cada tarjeta quedaría bajo los 190px y el disco de color del
   filamento —lo único que importa en esta rejilla— se vuelve un punto. */
.catalogo .rejilla{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s2,16px); }
@media (max-width:1439px){ .catalogo .rejilla{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1100px){ .catalogo .rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){  .catalogo .rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
/* La de tres por fila en el teléfono está más abajo, en VISTA DE LA
   REJILLA EN EL TELÉFONO: es una elección del cliente, no un tramo. */

/* =====================================================================
   LA PRESENTACIÓN: FRANJA DE BANNERS Y GRILLA
   ---------------------------------------------------------------------
   Solo sale en la página 1 sin filtros (lo decide tienda/index.php).
   Las dos piezas ocupan el ancho completo del catálogo, encima de la
   columna de filtros y la rejilla.
   ===================================================================== */

/* ---------- La franja ----------
   Scroll nativo con snap, no transform: se desliza con el dedo y con la
   rueda sin código, y sin JavaScript sigue siendo una tira recorrible.
   El alto sale de la proporción de la imagen (4:1), así la página no
   salta cuando la foto termina de cargar. */
.presentacion{
  grid-column:1 / -1; position:relative; margin:0 0 20px;
  background-color:var(--bg-elev-2);
  border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  overflow:hidden;
}
.presentacion-pista{
  position:relative; display:flex; overflow-x:auto;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.presentacion-pista::-webkit-scrollbar{ display:none; }
.presentacion-slide{ flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4 / 1; }
.presentacion-slide a,
.presentacion-slide picture,
.presentacion-slide img{ display:block; width:100%; height:100%; }
.presentacion-slide img{ object-fit:cover; }
/* En teléfono, 3:2 SOLO si todos los banners traen su versión móvil
   (la clase la pone index.php). Sin eso se queda en 4:1: la franja
   no cambia de alto al rotar. */
@media (max-width:640px){
  .presentacion.con-movil .presentacion-slide{ aspect-ratio:3 / 2; }
}

/* Flechas: aparecen al pasar el mouse. En pantallas táctiles no se
   dibujan — ahí se desliza con el dedo, y dos botones encima de la
   foto solo tapan producto. */
.pres-flecha{
  position:absolute; top:50%; width:40px; height:40px; margin-top:-20px;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--bg-elev); color:var(--ink);
  border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  cursor:pointer; opacity:0;
  transition:opacity var(--dur-ui, 200ms) ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
}
.pres-flecha svg{ width:20px; height:20px; }
.pres-anterior{ left:12px; }
.pres-siguiente{ right:12px; }
.presentacion:hover .pres-flecha,
.pres-flecha:focus-visible{ opacity:1; }
.pres-flecha:active{ transform:scale(0.97); }
@media (hover:none){ .pres-flecha{ display:none; } }

/* Puntos: el botón mide 20px para acertarle con el dedo; el punto
   visible es el ::after. El actual se estira en vez de cambiar solo de
   color: se distingue también sin ver colores. */
.pres-puntos{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:2px; padding:2px 6px;
  background-color:rgba(38,43,51,0.45); border-radius:var(--radius-sm, 4px);
}
.pres-punto{
  width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pres-punto::after{
  content:''; width:7px; height:7px; border-radius:2px;
  background-color:rgba(255,255,255,0.55);
  transition:width var(--dur-ui, 200ms) var(--ease-out, ease), background-color var(--dur-ui, 200ms) ease;
}
.pres-punto[aria-current="true"]::after{ width:16px; background-color:#fff; }

/* ---------- La grilla ---------- */
.grilla{ grid-column:1 / -1; margin:0 0 24px; }
.grilla-titulo{
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  margin:0 0 10px;
}
/* auto-fill acá sí: la cantidad de tarjetas cambia de una categoría a
   otra y no hay una cuenta de columnas que prometer, como en la
   rejilla de productos. */
.grilla-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
  gap:var(--s2, 16px);
}
.grilla-item{
  display:flex; flex-direction:column; overflow:hidden;
  background-color:var(--bg-elev);
  border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  transition:border-color var(--dur-ui, 200ms) ease, transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
@media (hover:hover){
  .grilla-item:hover{ border-color:var(--ink); transform:translateY(-2px); }
}
.grilla-item:active{ transform:scale(0.98); }

/* Sin foto, la cuadrícula del sistema: se lee como "sin foto todavía",
   no como un error de carga. La tarjeta funciona igual. */
.grilla-foto{
  display:block; aspect-ratio:4 / 3; overflow:hidden;
  border-bottom:1px solid var(--panel-border);
  background:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 24px),
    var(--bg-elev-2);
}
.grilla-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.grilla-texto{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 12px 11px; }
.grilla-nombre{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--ink);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grilla-cuenta{ flex:none; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* En teléfono la grilla pasa a una fila que se desliza. Apilada, cinco
   tarjetas empujarían el primer producto dos pantallas más abajo. */
@media (max-width:640px){
  /* La tira sangra hasta el borde de la pantalla: el margen negativo es
     EXACTAMENTE el borde del catálogo (--borde-catalogo). Si fueran
     números distintos, la tira se saldría de la pantalla o no llegaría
     al borde. */
  .grilla-lista{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--borde-catalogo)); padding:0 var(--borde-catalogo) 4px;
    scroll-padding:0 var(--borde-catalogo); scrollbar-width:none;
  }
  .grilla-lista::-webkit-scrollbar{ display:none; }
  .grilla-item{ flex:0 0 148px; scroll-snap-align:start; }
  /* A 15px "IMPRESORAS 3D" no entraba en 148px y quedaba en
     "IMPRESORAS …". A 13px entra entera con su cuenta al lado. */
  .grilla-texto{ padding:8px 10px 9px; gap:6px; }
  .grilla-nombre{ font-size:13px; }
  .grilla-cuenta{ font-size:11px; }
}

/* =====================================================================
   FILTROS
   ---------------------------------------------------------------------
   UNA LÁMINA OPACA SOBRE LA CUADRÍCULA.

   PEGADA JUSTO DEBAJO DE LA CABECERA.
   El tope es --cab-alto (el alto real de la cabecera completa, medido
   por script — ver la nota junto a .cab en layout.css) más un respiro.
   Antes eran 92px fijos, calculados para una cabecera que en realidad
   nunca se pegaba: al bajar, la columna quedaba flotando con un hueco
   vacío encima. Si algún día cambia el alto de la cabecera, --cab-alto
   la sigue sola.

   Antes los filtros eran texto suelto sobre el fondo, y la cuadrícula
   pasaba por detrás de cada renglón: las cuentas grises y los títulos
   chicos se perdían entre las líneas. La cuadrícula se queda en la
   página —es identidad—, pero todo lo que tiene contenido va sobre
   superficie propia, igual que las tarjetas de producto.

   Ya usa los tokens del manual (--bg-elev, --ink, --panel-border), así
   que funciona igual en Vitela y en Plano Azul. Es la primera parte de
   esta hoja que migra; el resto sigue en el sistema viejo.
   ===================================================================== */
.filtros{
  --tope-filtros:calc(var(--cab-alto, 140px) + 2px + var(--s2, 16px));
  position:sticky; top:var(--tope-filtros);
  max-height:calc(100vh - var(--tope-filtros) - var(--s2, 16px)); overflow-y:auto;
  background-color:var(--bg-elev);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px);
  overscroll-behavior:contain;
}
/* Barra de scroll fina: la columna de filtros es larga y una barra
   gruesa se come el ancho útil. */
.filtros::-webkit-scrollbar{ width:6px; }
.filtros::-webkit-scrollbar-thumb{ background:var(--panel-border); border-radius:3px; }

.filtros-cabecera{ display:none; }

.quitar-filtros{
  display:block; margin:14px 18px 0;
  font-size:13px; font-weight:600; color:var(--danger);
}
.quitar-filtros:hover{ text-decoration:underline; }

/* Cada grupo es una sección de la lámina, separada por un filete. */
.filtro{ padding:16px 18px 18px; margin:0; border-top:1px solid var(--panel-border); }
.filtros > .filtro:first-of-type{ border-top:0; }

.filtro h2{
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  margin:0 0 10px;
}
.filtro-pista{ font-size:12.5px; color:var(--ink-faint); margin:10px 0 0; line-height:1.45; }
.filtro-vacio{ font-size:13px; color:var(--ink-faint); margin:10px 0 0; }

.filtro-buscador{
  width:100%; height:38px; padding:0 12px; margin-bottom:8px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  background-color:var(--bg); color:var(--ink); font-size:14px;
}
.filtro-buscador:focus{ outline:none; border-color:var(--ink); }

/* ---------- La fila: una sola forma para todos los grupos ----------
   Disponibilidad, tipo, color y marca comparten fila. Antes cada grupo
   tenía la suya (.color-fila, .marca-fila, .lista-simple a) con medidas
   casi iguales, y "casi" es lo que se nota al mirar la columna entera.

   36px de alto mínimo: es un blanco que se acierta con el pulgar dentro
   del panel móvil sin tener que hacer zoom. */
.filtro-lista{ display:flex; flex-direction:column; margin:0 -8px; }
.filtro-fila{
  display:flex; align-items:center; gap:10px;
  min-height:36px; padding:5px 8px; border-radius:var(--radius-sm, 4px);
  font-size:14px; color:var(--ink-dim);
  transition:background-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
.filtro-fila[hidden]{ display:none; }
@media (hover:hover){
  .filtro-fila:hover{ background-color:var(--bg-elev-2); color:var(--ink); }
}
.filtro-fila.on{ background-color:var(--bg-elev-2); color:var(--ink); font-weight:600; }
.filtro-texto{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* La cuenta a la derecha con cifras tabulares: así los números quedan
   alineados en columna aunque tengan distinta cantidad de dígitos. */
.cuenta{
  margin-left:auto; flex:none; padding-left:8px;
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-faint);
}
.filtro-fila.on .cuenta{ color:var(--ink-dim); }

/* La casilla de los grupos sin imagen (tipo de producto). Sin ella, la
   fila elegida solo se distingue por el fondo, y en Plano Azul ese
   fondo casi no se separa de la lámina. */
.filtro-marca{
  width:16px; height:16px; flex:none; position:relative;
  border:1.5px solid var(--ink-faint); border-radius:3px;
  transition:background-color var(--dur-ui, 200ms) ease, border-color var(--dur-ui, 200ms) ease;
}
.filtro-fila.on .filtro-marca{ background-color:var(--ink); border-color:var(--ink); }
.filtro-fila.on .filtro-marca::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--bg-elev); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---------- Disponibilidad ----------
   Un punto con el mismo color semántico que la etiqueta de la tarjeta:
   verde hay, azul se trae, gris no hay. */
.disp-punto{ width:10px; height:10px; flex:none; border-radius:50%; margin:0 3px; }
.disp-disponible{ background-color:var(--ok); }
.disp-pedido{ background-color:var(--info); }
.disp-agotado{ background-color:var(--ink-faint); }
.filtro-fila.on .disp-punto{ box-shadow:0 0 0 2px var(--bg-elev-2), 0 0 0 3.5px var(--ink); }

/* ---------- Color ----------
   El grupo que más se usa en una tienda de filamento, y el único que se
   elige MIRANDO: por eso tiene las filas más altas y los discos más
   grandes de la columna. A 24px la textura de la foto (mármol, seda,
   escarchado) no se distinguía; a 38px sí. El nombre sube un punto para
   acompañar al disco. */
.colores-lista{ max-height:340px; overflow-y:auto; gap:2px; }
.colores-lista::-webkit-scrollbar{ width:6px; }
.colores-lista::-webkit-scrollbar-thumb{ background:var(--panel-border); border-radius:3px; }
.color-fila{ min-height:36px; gap:10px; font-size:14px; }
/* Con mouse la fila puede ser baja; con el dedo necesita alto para
   tocarla sin errar, aunque la muestra de color sea chica. */
@media (pointer:coarse){ .color-fila{ min-height:42px; } }
.color-disco{
  width:24px; height:24px; border-radius:50%; overflow:hidden; flex:none;
  background-color:var(--bg-elev-2);
  box-shadow:0 0 0 1px var(--panel-border), 0 1px 3px var(--shadow);
  transition:transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
.color-disco img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:hover){
  .color-fila:hover .color-disco{ transform:scale(1.06); }
}
.filtro-fila.on .color-disco{ box-shadow:0 0 0 2px var(--bg-elev-2), 0 0 0 4px var(--ink); }

/* ---------- Marca ---------- */
.marca-logo{ width:32px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; }
.marca-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
/* Sin logo, la inicial: deja el hueco de la misma medida para que la
   lista no baile al mezclar marcas con y sin logo. */
.marca-inicial{
  width:22px; height:22px; border-radius:var(--radius-sm, 4px);
  background-color:var(--bg-elev-2); color:var(--ink-dim);
  font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Precio ---------- */
.precio-campos{ display:flex; gap:8px; margin-bottom:10px; }
.precio-campo{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.precio-campo span{ font-size:12px; color:var(--ink-dim); font-weight:600; }
.precio-campo input{
  width:100%; height:40px; padding:0 10px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  background-color:var(--bg); color:var(--ink); font-size:14px;
}
.precio-campo input:focus{ outline:none; border-color:var(--ink); }

/* ---------- Ofertas ----------
   Radio bajo y no píldora: la única píldora del sistema es el
   interruptor de tema. */
.chip-oferta{
  display:flex; align-items:center; width:100%; min-height:40px; padding:0 12px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  font-size:14px; font-weight:600; color:var(--ink-dim); background-color:var(--bg);
  transition:border-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease, background-color var(--dur-ui, 200ms) ease;
}
@media (hover:hover){ .chip-oferta:hover{ border-color:var(--ink); color:var(--ink); } }
.chip-oferta.on{ background-color:var(--ink); border-color:var(--ink); color:var(--bg-elev); }
.chip-oferta.on .cuenta{ color:inherit; }

/* =====================================================================
   BARRA SUPERIOR DEL LISTADO
   Misma lámina que los filtros: el conteo y el orden también se
   perdían sobre la cuadrícula.
   ===================================================================== */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:10px 16px; margin-bottom:16px;
  background-color:var(--bg-elev);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px);
}
.barra-conteo{ margin:0; font-size:14px; color:var(--ink-dim); }
.barra-conteo strong{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.barra-controles{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

.mostrar{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-dim); }
.mostrar a{
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-dim);
  padding:3px 8px; border-radius:var(--radius-sm, 4px);
  transition:background-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
@media (hover:hover){ .mostrar a:hover{ background-color:var(--bg-elev-2); color:var(--ink); } }
.mostrar a.on{ background-color:var(--ink); color:var(--bg-elev); }

.orden select{
  height:38px; padding:0 12px; border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  background-color:var(--bg); font-size:14px; color:var(--ink); cursor:pointer;
}
.orden select:focus{ outline:none; border-color:var(--ink); }

/* ---------- Fichas de filtros aplicados ---------- */
.aplicados{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px;}
.aplicado{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background-color:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-sm, 4px);
  font-size:12px; color:var(--ink-dim);
  transition:border-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
.aplicado span{font-size:10px; color:var(--ink-faint);}
@media (hover:hover){
  .aplicado:hover{ border-color:var(--ink); color:var(--ink); }
  .aplicado:hover span{ color:var(--ink); }
}

/* =====================================================================
   REJILLA Y TARJETA DE PRODUCTO
   Se mudaron a layout.css: las usan el catálogo Y la portada, y una
   sola tarjeta en un solo archivo es lo que evita que dentro de seis
   meses la de la portada tenga un dato que la del catálogo no.
   ===================================================================== */

/* =====================================================================
   FICHA DE PRODUCTO
   ===================================================================== */
.ficha{padding-top:24px; padding-bottom:84px;}
.miga{font-size:12.5px; color:var(--tinta-suave); margin-bottom:24px; display:flex; gap:8px; flex-wrap:wrap;}
.miga a:hover{color:var(--azul);}

.ficha-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:start;}

.galeria-principal{aspect-ratio:1; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;}
.galeria-principal img{width:100%; height:100%; object-fit:cover;}
.galeria-tiras{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.tira{
  all:unset; cursor:pointer; width:64px; height:64px; border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px var(--linea); transition:box-shadow .15s var(--ease);
}
.tira:hover{box-shadow:0 0 0 1px var(--azul);}
.tira.on{box-shadow:0 0 0 2px var(--azul);}
.tira img{width:100%; height:100%; object-fit:cover;}

.ficha-marca{display:inline-flex; align-items:center; gap:9px; margin-bottom:12px;}
.ficha-marca img{
  /* Misma placa blanca que en la página de marcas, en chico. */
  width:auto; height:22px; max-width:86px; object-fit:contain;
  background:#fff; padding:5px 8px; border:1px solid var(--panel-border); border-radius:4px;
  box-sizing:content-box;
}
.ficha-marca span{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);}
.ficha-marca:hover span{color:var(--azul);}

.ficha-datos h1{font-size:clamp(24px,3.2vw,32px); line-height:1.14; margin:0 0 8px;}
.ficha-sku{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--tinta-suave); margin:0 0 18px;}
.ficha-resumen{font-size:15px; color:var(--tinta-media); margin:0 0 26px; max-width:46ch;}

.ficha-precio{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.ficha-precio .antes{font-size:17px; color:var(--tinta-suave); text-decoration:line-through;}
.ficha-precio .ahora{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px; letter-spacing:-.02em;}
.ficha-precio .ahora.oferta{color:var(--hot);}
.ficha-precio .ahorro{width:100%; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--hot); font-weight:500;}

.ficha-nota{font-size:12.5px; color:var(--tinta-suave); margin:12px 0 0;}

.ficha-colores{margin-top:32px; padding-top:24px; border-top:1px solid var(--linea);}
.ficha-colores .etiqueta{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:14px;
}
.colores-linea{display:flex; gap:20px; flex-wrap:wrap;}
.color-suelto{display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11.5px; color:var(--tinta-suave); text-align:center;}
.color-suelto .color-disco{width:44px; height:44px; transition:transform .15s var(--ease);}
.color-suelto:hover .color-disco{transform:scale(1.06);}
.color-suelto:hover{color:var(--azul);}

.descripcion{margin-top:60px; padding-top:38px; border-top:1px solid var(--linea); max-width:70ch;}
.descripcion-cuerpo{font-size:15px; color:var(--tinta-media);}
.descripcion-cuerpo p{margin:0 0 15px;}
.descripcion-cuerpo h3{font-size:16px; color:var(--tinta); margin:26px 0 10px;}
.descripcion-cuerpo ul,.descripcion-cuerpo ol{margin:0 0 15px; padding-left:20px;}
.descripcion-cuerpo li{margin-bottom:5px;}
.descripcion-cuerpo img{border-radius:var(--radio); margin:16px 0;}
.descripcion-cuerpo table{border-collapse:collapse; width:100%; font-size:14px; margin:16px 0;}
.descripcion-cuerpo th,.descripcion-cuerpo td{border:1px solid var(--linea); padding:9px 12px; text-align:left;}
.descripcion-cuerpo th{background:var(--blanco); font-weight:600;}

.relacionados{margin-top:60px; padding-top:38px; border-top:1px solid var(--linea);}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 22px; border-radius:var(--radius-sm, 4px); font-size:14px; font-weight:600;
  cursor:pointer; border:none;
  transition:background-color var(--dur-ui, 200ms) ease, border-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
/* Con los tokens del tema y no con --blanco: en Plano Azul el botón de
   la paginación era un rectángulo blanco sobre la página oscura. */
.btn-linea{background-color:var(--bg-elev); border:1px solid var(--panel-border); color:var(--ink);}
@media (hover:hover){ .btn-linea:hover{ border-color:var(--ink); } }
.btn-wa{background:var(--wa); color:#06301A;}
.btn-wa:hover{background:#1EBE5A;}
.btn-wa svg{width:19px; height:19px;}
.btn-bloque{width:100%;}
.btn.grande{padding:16px 24px; font-size:15.5px;}
/* Un botón de paginación que no lleva a ningún lado se apaga en vez de
   desaparecer: si desapareciera, el resto de los botones se moverían
   de sitio al cambiar de página. */
.btn.apagado{opacity:.38; pointer-events:none;}

/* =====================================================================
   VACÍO Y PAGINACIÓN
   ===================================================================== */
.vacio{
  background-color:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  padding:54px 32px; text-align:center; max-width:520px; margin:20px auto;
}
.vacio h3{font-size:19px; margin:0 0 10px;}
.vacio p{color:var(--ink-dim); font-size:14px; margin:0 0 24px;}
.vacio-acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

.paginacion{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:44px;}
.pag-info{font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums;}

/* =====================================================================
   MÓVIL
   Los filtros pasan a un panel que entra desde la izquierda. No se
   apilan arriba: con precio, colores, marcas y tres bloques de
   subcategorías, apilarlos dejaría el primer producto a dos pantallas
   de scroll del borde superior.
   ===================================================================== */
.abrir-filtros{display:none;}
.filtros-fondo{
  position:fixed; inset:0; background:rgba(21,23,27,.42); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s var(--ease);
}
.filtros-fondo.visible{opacity:1; visibility:visible;}

@media (max-width:1000px){
  .ficha-grid{grid-template-columns:1fr; gap:32px;}
}

@media (max-width:860px){
  /* minmax(0,1fr) y NO 1fr. "1fr" a secas es minmax(auto,1fr): la
     columna nunca baja del ancho mínimo de su contenido, y la tira de
     categorías (que no se parte) la estiraba a ~850px. Resultado: la
     página entera más ancha que el teléfono, el navegador alejando el
     zoom, y la cabecera —que sí mide el ancho de la pantalla— viéndose
     angosta a la izquierda. Esto era lo que "rompía" la cabecera. */
  .catalogo{grid-template-columns:minmax(0,1fr); gap:0; padding-top:18px;}

  .abrir-filtros{
    display:inline-flex; align-items:center; gap:8px; position:relative;
    padding:10px 18px; margin-bottom:12px;
    border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
    background-color:var(--bg-elev); color:var(--ink);
    font-size:14px; font-weight:600; cursor:pointer;
  }
  .abrir-filtros svg{width:16px; height:16px;}
  .punto-activo{width:7px; height:7px; border-radius:50%; background-color:var(--ink); display:inline-block;}

  /* En móvil la lámina deja de ser tarjeta y pasa a ser el panel: sin
     radio ni borde alrededor, solo el filete del costado. */
  .filtros{
    position:fixed; top:0; left:0; bottom:0; width:min(320px,88vw); z-index:80;
    border:0; border-right:1px solid var(--panel-border); border-radius:0;
    padding:0 0 40px; max-height:none; overflow-y:auto;
    transform:translateX(-100%); transition:transform var(--dur-panel, 260ms) var(--ease-out, ease);
  }
  .filtros.abierto{transform:translateX(0);}

  .filtros-cabecera{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:1; padding:14px 18px;
    background-color:var(--bg-elev); border-bottom:1px solid var(--panel-border);
    font-family:var(--font-display); font-weight:600; font-size:17px;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
  }
  .filtros-cerrar{
    all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:var(--tinta-suave);
  }
  .filtros-cerrar{ color:var(--ink-dim); }
  .filtros-cerrar:hover{ background-color:var(--bg-elev-2); color:var(--ink); }

  .barra{gap:12px; padding:10px 12px;}
  .barra-controles{width:100%; justify-content:space-between;}
}

@media (max-width:420px){
  .mostrar{display:none;} /* en pantalla chica siempre conviene el tramo corto */
  .orden{width:100%;}
  .orden select{width:100%;}
}

/* =====================================================================
   VISTA DE LA REJILLA EN EL TELÉFONO: 2 O 3 POR FILA
   ---------------------------------------------------------------------
   El cliente elige con los dos botones de la barra; la elección queda
   guardada en su navegador. Solo existe hasta 640px: de ahí para
   arriba la cuenta de columnas la decide el ancho, como siempre.

   La vista de tres es para RECORRER, no para decidir: se sacrifica la
   línea de categoría (en 110px no entra ni "Filamentos · PLA") y se
   achica todo lo demás, pero se conservan las cuatro cosas que hacen
   falta para elegir qué abrir: foto, nombre, precio y disponibilidad.

   Va con .catalogo delante, igual que la de cinco: la portada y los
   relacionados siguen de a dos.
   ===================================================================== */
.catalogo{ --borde-catalogo:var(--s3, 24px); }
.vista{ display:none; }

@media (max-width:640px){
  /* El borde del catálogo se alinea con el de la cabecera
     (.envoltura-ancha: 20px en el teléfono). 24 dejaba el logo y la
     primera tarjeta a distinta distancia del borde, y en la vista de
     tres cada px de más es foto de menos. */
  .catalogo{ --borde-catalogo:20px; }
  .contenedor.catalogo{ padding-left:var(--borde-catalogo); padding-right:var(--borde-catalogo); }

  /* Los botones: aparecen solo si hay JavaScript (lo decide el script
     de tienda/index.php). Sin JS no podrían guardar nada y serían dos
     botones que no hacen nada. */
  .vista:not([hidden]){ display:flex; gap:2px; margin-left:auto; }
  .vista-boton{
    width:34px; height:34px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--ink-faint);
    border:1px solid transparent; border-radius:var(--radius-sm, 4px); cursor:pointer;
    transition:color var(--dur-ui, 200ms) ease, background-color var(--dur-ui, 200ms) ease;
  }
  .vista-boton svg{ width:18px; height:18px; }
  .vista-boton[aria-pressed="true"]{ color:var(--ink); background-color:var(--bg-elev-2); border-color:var(--panel-border); }
  .vista-boton:active{ transform:scale(0.95); }

  .catalogo .rejilla[data-vista="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }

  .rejilla[data-vista="3"] .producto-datos{ padding:8px 8px 10px; gap:4px; }
  .rejilla[data-vista="3"] .producto-nombre{ font-size:12px; line-height:1.3; }
  .rejilla[data-vista="3"] .producto-ruta{ display:none; }
  .rejilla[data-vista="3"] .producto-precio{ padding-top:2px; gap:4px; }
  .rejilla[data-vista="3"] .producto-precio .ahora{ font-size:14px; }
  .rejilla[data-vista="3"] .producto-precio .antes{ font-size:10.5px; }
  .rejilla[data-vista="3"] .distribuidor-etiqueta{ font-size:9px; }
  /* La etiqueta puede partirse en dos renglones: "Últimas unidades"
     no entra en una línea a este ancho, y cortada con … deja de decir
     lo que dice. */
  .rejilla[data-vista="3"] .disponibilidad{
    font-size:10px; line-height:1.2; padding:3px 6px 3px 5px; gap:4px;
    white-space:normal; max-width:100%;
  }
  .rejilla[data-vista="3"] .disponibilidad::before{ width:5px; height:5px; }
  .rejilla[data-vista="3"] .sello{ top:5px; font-size:9px; padding:2px 5px; letter-spacing:0.05em; }
  .rejilla[data-vista="3"] .sello-preventa{ right:5px; }
  .rejilla[data-vista="3"] .producto-agregar{ padding:0 8px 8px; }
  .rejilla[data-vista="3"] .btn-agregar{ min-height:32px; gap:3px; font-size:11px; letter-spacing:0.03em; }
  .rejilla[data-vista="3"] .btn-agregar svg{ width:13px; height:13px; }
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .grilla-item:hover,.grilla-item:active,.pres-flecha:active{transform:none;}
  .color-fila:hover .color-disco{transform:none;}
  .producto:hover{transform:none;}
  .color-suelto:hover .color-disco{transform:none;}
}

/* =====================================================================
   ENCABEZADO DE LANDING DE CATEGORÍA
   ---------------------------------------------------------------------
   Lo usan /tienda/{categoria}/ y /tienda/{categoria}/{subcategoria}/.
   Es lo único que esas páginas tienen y el catálogo completo no.

   El bloque entero es texto sobre fondo, sin recuadro ni lámina: es lo
   primero que se lee y compite con la rejilla que viene abajo. Una
   caja con borde acá empuja los productos fuera de la pantalla en
   móvil, que es donde entra la mayoría.
   ===================================================================== */
.cat-cab{ grid-column:1 / -1; margin:0 0 28px; }

.cat-titulo{ font-size:clamp(26px,3.6vw,38px); line-height:1.08; margin:6px 0 0; }

/* El párrafo de introducción. Ancho limitado a 68 caracteres: una
   línea más larga hace que el ojo pierda el renglón al volver. */
.cat-intro{
  margin:14px 0 0; max-width:68ch;
  font-size:15px; line-height:1.65; color:var(--tinta-suave);
}
.cat-intro p{ margin:0 0 10px; }
.cat-intro p:last-child{ margin-bottom:0; }
.cat-intro a{ color:var(--azul); text-decoration:underline; }

/* La miga en la landing respira un poco menos que en la ficha: acá
   abajo viene un título, no una galería. */
.cat-cab .miga{ margin-bottom:10px; }
.cat-cab .miga [aria-current]{ color:var(--tinta); }


/* =====================================================================
   INDICE DE MARCAS  ·  /marcas/
   ---------------------------------------------------------------------
   Rejilla de tarjetas agrupadas por letra inicial.
   La cuenta de productos es lo que separa esta pagina de un muro de
   logos: le dice al visitante donde hay profundidad y le da contenido
   propio a la pagina.
   ===================================================================== */

.marcas-indice{ margin-top:var(--s6); }

.marcas-grupo + .marcas-grupo{ margin-top:var(--s6); }

.marcas-letra{
  font-family:var(--font-display);
  font-size:20px; line-height:1;
  margin:0 0 var(--s3);
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  color:var(--ink-dim);
}

/* auto-fill y no auto-fit: con tres marcas en una letra, auto-fit las
   estira hasta llenar la fila y quedan enormes al lado de una letra con
   ocho. auto-fill las deja del mismo tamano siempre. */
.marcas-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:var(--s3);
}

.marca-tarjeta{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:var(--s3);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg-elev);
  text-decoration:none; color:inherit;
  transition:border-color var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out);
}
.marca-tarjeta:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* Alto fijo para la caja del logo: los logos de terceros vienen en
   proporciones distintas y sin esto cada tarjeta mide otra cosa, que es
   lo que hace que una rejilla se vea sucia. */
.marca-tarjeta-logo{
  /* PLACA BLANCA. Los logos de terceros son monocromos oscuros sobre
     fondo transparente: sobre la lámina clara se leen, pero en Plano
     Azul desaparecían. Van sobre blanco siempre, en los dos temas, que
     además es como las marcas piden que se use su logo. */
  height:86px; width:100%; padding:12px 16px;
  background:#fff; border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
.marca-tarjeta-logo img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}

.marca-tarjeta-inicial{
  font-family:var(--font-display);
  font-size:30px; line-height:1;
  color:var(--ink-faint);
}

.marca-tarjeta-nombre{ font-weight:600; font-size:14px; text-align:center; }
.marca-tarjeta-cuenta{ font-size:12px; color:var(--ink-faint); }

@media (max-width:520px){
  /* Dos por fila en telefono. Una sola columna obligaria a recorrer
     quince pantallazos para ver el indice entero. */
  .marcas-rejilla{ grid-template-columns:repeat(2, 1fr); gap:var(--s2); }
  .marca-tarjeta-logo{ height:66px; padding:10px 12px; }
}


/* =====================================================================
   PAGINAS DE CONTENIDO  ·  bloques
   ---------------------------------------------------------------------
   Ancho de lectura acotado: una linea de texto de 1180px obliga al ojo
   a saltar de renglon y se pierde. La rejilla de producto puede usar
   todo el ancho; un parrafo no.
   ===================================================================== */

.pagina{ padding-bottom:var(--s8); }
.pagina-cab{ margin:var(--s6) 0 var(--s4); }
.pagina-cab .miga{ margin-bottom:10px; }

.aviso-borrador{
  margin-top:var(--s3); padding:10px 14px;
  border:1px dashed var(--accent);
  border-radius:var(--radius-sm);
  font-size:13px; color:var(--ink-dim);
}

.bloque{ max-width:70ch; margin:0 0 var(--s5); }
.bloque h2{ font-family:var(--font-display); font-size:22px; margin:0 0 var(--s2); }
.bloque p{ margin:0 0 var(--s2); line-height:1.65; }
.bloque p:last-child{ margin-bottom:0; }
.bloque a{ color:var(--accent-text); text-underline-offset:3px; }

.bloque-titulo{ font-size:26px; margin:var(--s6) 0 var(--s3); }

/* Imagen y texto: dos columnas en escritorio, apiladas en telefono.
   El orden del HTML pone la imagen primero, asi que en columna siempre
   queda arriba — que es lo que se quiere leyendo en un celular. */
.bloque-imagen-texto{
  display:grid; gap:var(--s4);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  max-width:var(--maxw);
}
.bloque-imagen-texto.lado-derecha .bloque-imagen{ order:2; }
.bloque-imagen img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-md);
}

.bloque-preguntas{ max-width:70ch; }
.pregunta{
  border-bottom:1px solid var(--line);
  padding:var(--s2) 0;
}
.pregunta summary{
  cursor:pointer; font-weight:600; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; gap:var(--s2);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{ content:"+"; color:var(--ink-faint); font-weight:400; }
.pregunta[open] summary::after{ content:"−"; }
.pregunta .respuesta{ padding-top:var(--s2); color:var(--ink-dim); }

.contacto-datos{ margin:0; }
.contacto-datos dt{
  font-family:var(--font-display); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:var(--s2);
}
.contacto-datos dd{ margin:2px 0 0; }

@media (max-width:760px){
  .bloque-imagen-texto{ grid-template-columns:1fr; }
  .bloque-imagen-texto.lado-derecha .bloque-imagen{ order:0; }
}


/* =====================================================================
   FORMULARIO DEL LIBRO DE RECLAMACIONES
   ---------------------------------------------------------------------
   Ancho de lectura, campos altos y errores al lado del campo que
   fallo. Un resumen de errores arriba obliga a buscar cual era.
   ===================================================================== */

.form-reclamo{ max-width:70ch; }
.form-reclamo h2{ font-family:var(--font-display); font-size:18px; margin:var(--s6) 0 var(--s2); }
.form-reclamo h2:first-of-type{ margin-top:var(--s4); }

.campo-f{ margin-bottom:var(--s3); }
.campo-f label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.campo-f input, .campo-f select, .campo-f textarea{
  width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
  color:var(--ink); background:var(--bg-elev);
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
/* 15px y no 14: por debajo de 16px iOS hace zoom al enfocar un campo y
   deja la pagina corrida. 15 con el alto de 44px queda en el limite
   comodo sin disparar el zoom en la mayoria de los casos. */
.campo-f textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.campo-f input:focus, .campo-f select:focus, .campo-f textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
}
.campo-f.mal input, .campo-f.mal select, .campo-f.mal textarea{ border-color:var(--danger); }
.campo-f .msg{ display:block; font-size:12.5px; color:var(--danger); margin-top:5px; }
.campo-f .ayuda-f{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:5px; }

.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }

.campo-check-f{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s3); }
.campo-check-f input{ width:20px; height:20px; accent-color:var(--accent); }
.campo-check-f label{ font-size:14px; }

/* La trampa para robots: fuera de pantalla, no display:none. Algunos
   robots saltean lo que esta oculto con display, y entonces la trampa
   no atrapa a nadie. */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-error-general{
  padding:11px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--danger); color:var(--danger);
  font-size:14px; max-width:70ch;
}

.nota-datos{ font-size:12.5px; color:var(--ink-faint); max-width:70ch; }

.constancia-numero{
  font-family:var(--font-display); font-size:34px; letter-spacing:.04em;
  margin:var(--s2) 0; color:var(--accent-text);
}
.constancia-acciones{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4); }

@media (max-width:560px){
  .campo-fila{ grid-template-columns:1fr; }
}

/* Impresion de la constancia: se va todo menos el numero y los datos.
   Es el papel que el consumidor guarda. */
@media print{
  .cab, .pie, .constancia-acciones, .menu-movil, .menu-fondo{ display:none !important; }
  .constancia{ max-width:none; }
}

/* =====================================================================
   COMPRAS: EL CARRITO, SUS BOTONES Y SUS PÁGINAS
   ---------------------------------------------------------------------
   Todo sobre láminas opacas (--bg-elev), igual que filtros y tarjetas:
   la cuadrícula del fondo no pasa por detrás de ningún precio.

   UN SOLO BOTÓN SÓLIDO POR VISTA (tema.css): en cada página de compra
   el sólido es el paso siguiente —Continuar, Confirmar, Enviar
   comprobante—. Todo lo demás es ghost o texto.
   ===================================================================== */

/* ---------- Carrito en la cabecera ----------
   Toma la forma de Acceder (btn-sistema btn-ghost) y solo agrega el
   contador. El número va en el amarillo del acento: es lo único que
   cambia en la cabecera cuando el cliente hace algo. */
.cab-carrito{ flex:none; position:relative; gap:8px; }
.cab-carrito svg{ width:19px; height:19px; }
.cab-carrito-cuenta{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:var(--accent); color:var(--accent-ink);
  font-family:var(--font-body, inherit); font-size:12px; font-weight:700;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
.cab-carrito-cuenta[hidden]{ display:none; }
.cab-carrito-cuenta.pulso{ animation:carrito-pulso 420ms var(--ease-out, ease); }
@keyframes carrito-pulso{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
/* En el celular el carrito de la cabecera se esconde: vive en la
   barra de abajo (layout.css, .atajos-cuenta). */

/* ---------- Aviso flotante al agregar ---------- */
.aviso-carrito{
  position:fixed; left:50%; bottom:24px; z-index:90;
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; max-width:calc(100vw - 32px);
  background-color:var(--ink); color:var(--bg);
  border-radius:var(--radius-md, 8px); box-shadow:0 8px 24px var(--shadow);
  font-size:14px;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  transition:opacity var(--dur-ui, 200ms) ease, transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
.aviso-carrito.visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.aviso-carrito.mal{ background-color:var(--danger); color:#fff; }
.aviso-carrito a{ color:inherit; font-weight:700; text-decoration:underline; white-space:nowrap; }
/* En el celular sale encima de la barra de abajo, no detrás de ella. */
@media (max-width:900px){
  .aviso-carrito{ bottom:calc(var(--atajos-alto, 60px) + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Agregar en la tarjeta ----------
   La tarjeta pasa a columna para que el botón quede siempre al pie,
   alineado entre tarjetas de alturas distintas. */
.producto{ display:flex; flex-direction:column; }
.producto-enlace{ flex:1; }
.producto-agregar{ padding:0 14px 14px; }
.btn-agregar{
  width:100%; min-height:38px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;
  transition:border-color var(--dur-ui, 200ms) ease, background-color var(--dur-ui, 200ms) ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
}
.btn-agregar svg{ width:16px; height:16px; }
@media (hover:hover){ .btn-agregar:hover{ border-color:var(--ink); background-color:var(--bg-elev-2); } }
.btn-agregar:active{ transform:scale(0.97); }
.btn-agregar:disabled{ opacity:.55; cursor:progress; }

/* ---------- Agregar en la ficha ---------- */
.ficha-comprar{ display:flex; gap:10px; align-items:flex-end; margin:0 0 12px; }
.ficha-cantidad{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--ink-dim); }
.ficha-cantidad input{
  width:78px; height:48px; padding:0 10px; text-align:center;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  background-color:var(--bg); color:var(--ink); font-size:16px;
}
.ficha-comprar .btn-sistema{ flex:1; min-height:48px; }
.btn-sistema.apagado{ opacity:.4; pointer-events:none; }

/* ---------- Páginas de compra ---------- */
.compra{ padding-top:28px; padding-bottom:80px; }
.compra-cab{ margin-bottom:18px; }
.compra-cab h1{ font-size:clamp(28px, 4vw, 40px); margin:0 0 6px; }
.compra-paso{ font-size:13px; color:var(--ink-faint); margin:0 0 8px; }
.compra-paso a{ color:var(--ink-dim); text-decoration:underline; }
.compra-paso b{ color:var(--ink); }
.compra-sede, .compra-guardar{ font-size:14px; color:var(--ink-dim); margin:0; }
.compra-sede-cambio a{ text-decoration:underline; }

.compra-aviso{
  padding:12px 16px; margin:0 0 16px; border-radius:var(--radius-sm);
  font-size:14px; border:1px solid currentColor;
}
.compra-aviso a{ font-weight:700; text-decoration:underline; }
.compra-aviso.ok{   color:var(--ok);     background-color:color-mix(in srgb, var(--ok) 10%, var(--bg-elev)); }
.compra-aviso.mal{  color:var(--danger); background-color:color-mix(in srgb, var(--danger) 10%, var(--bg-elev)); }
.compra-aviso.info{ color:var(--info);   background-color:color-mix(in srgb, var(--info) 10%, var(--bg-elev)); }

/* Dos columnas: lo que se edita a la izquierda, el resumen pegado a
   la derecha. El resumen se queda a la vista al bajar: el total es lo
   que el cliente vuelve a mirar después de cada cambio. */
.compra-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.compra-resumen{
  position:sticky; top:calc(var(--cab-alto, 140px) + 18px);
  background-color:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px); padding:20px;
}
.compra-resumen h2, .bloque-compra h2{
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; margin:0 0 14px; color:var(--ink);
}
.resumen-sub{ font-size:13px; font-weight:700; margin:18px 0 6px; color:var(--ink-dim); }
.resumen-items{ list-style:none; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--panel-border); }
.resumen-items li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:4px 0; color:var(--ink-dim); }
.resumen-items b{ color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.resumen-fila{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:6px 0; color:var(--ink-dim); }
.resumen-fila b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.resumen-fila.descuento b{ color:var(--ok); }
.resumen-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:10px; padding-top:12px; border-top:1px solid var(--panel-border);
  font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink);
}
.resumen-total b{ font-variant-numeric:tabular-nums; }
.resumen-igv{ font-size:12.5px; color:var(--ink-faint); margin:4px 0 16px; }
.resumen-nota{ font-size:12.5px; color:var(--ink-faint); margin:10px 0 0; line-height:1.5; }
.resumen-bloqueo{ font-size:13px; color:var(--danger); margin:0 0 10px; }
.compra-resumen .btn-sistema{ min-height:50px; }

/* ---------- Las líneas del carrito ---------- */
.compra-lineas{
  background-color:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px); padding:6px 18px 18px;
}
.linea{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto 96px 40px;
  align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--panel-border);
}
.linea-foto{ width:72px; height:72px; border-radius:var(--radius-sm); overflow:hidden; background-color:#fff; border:1px solid var(--panel-border); }
.linea-foto img{ width:100%; height:100%; object-fit:contain; }
.linea-datos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.linea-nombre{ font-weight:600; color:var(--ink); line-height:1.35; }
@media (hover:hover){ .linea-nombre:hover{ text-decoration:underline; } }
.linea-unitario{ font-size:13px; color:var(--ink-faint); }
.linea-unitario s{ margin-left:6px; }
.linea-problema{ font-size:13px; font-weight:600; color:var(--danger); }
.linea.con-problema .linea-foto{ opacity:.5; }
.linea-subtotal{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

.linea-cantidad{
  display:flex; align-items:center;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.linea-cantidad button{
  width:36px; height:36px; border:0; background:transparent; color:var(--ink);
  font-size:18px; cursor:pointer;
}
.linea-cantidad button:disabled{ color:var(--ink-faint); cursor:default; }
@media (hover:hover){ .linea-cantidad button:not(:disabled):hover{ background-color:var(--bg-elev-2); } }
.linea-cantidad .cant-valor{
  width:46px; height:36px; border:0; background:none; color:var(--ink);
  text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.linea-cantidad .cant-valor::-webkit-outer-spin-button,
.linea-cantidad .cant-valor::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.linea-cantidad .cant-valor:focus{ outline:none; background-color:var(--bg-elev-2); }

.linea-quitar button{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--ink-faint); cursor:pointer; border-radius:var(--radius-sm);
}
.linea-quitar svg{ width:20px; height:20px; }
@media (hover:hover){ .linea-quitar button:hover{ color:var(--danger); background-color:var(--bg-elev-2); } }

.cupon{ display:flex; gap:10px; margin-top:16px; align-items:center; }
.cupon input{
  flex:1; max-width:260px; height:42px; padding:0 12px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  background-color:var(--bg); color:var(--ink); font-size:14px; text-transform:uppercase;
}
.cupon-puesto{ font-size:14px; color:var(--ok); }
.btn-texto{ background:none; border:0; padding:4px 0; color:var(--ink-dim); text-decoration:underline; cursor:pointer; font-size:13.5px; }
@media (hover:hover){ .btn-texto:hover{ color:var(--ink); } }

/* ---------- Métodos de entrega ---------- */
.envios fieldset{ border:0; margin:10px 0 0; padding:12px 0 0; border-top:1px solid var(--panel-border); }
.envios legend{ font-size:13px; font-weight:700; color:var(--ink); padding:0; margin-bottom:8px; }
.envio{
  display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:start;
  padding:9px 10px; margin:0 -10px; border-radius:var(--radius-sm); cursor:pointer;
  transition:background-color var(--dur-ui, 200ms) ease;
}
.envio input{ margin-top:3px; accent-color:var(--ink); }
.envio.on{ background-color:var(--bg-elev-2); }
@media (hover:hover){ .envio:hover{ background-color:var(--bg-elev-2); } }
.envio-texto{ display:flex; flex-direction:column; gap:2px; }
.envio-nombre{ font-size:14px; color:var(--ink); line-height:1.35; }
.envio-plazo{ font-size:12.5px; color:var(--ink-faint); }
.envio-precio{ font-size:14px; font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.envio-precio small{ display:block; font-size:11.5px; font-weight:400; color:var(--ink-faint); }

/* ---------- Bloques del formulario ---------- */
.compra-form{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.bloque-compra, .orden-estado{
  background-color:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px); padding:20px 22px;
}
.bloque-compra .campo-f:last-child{ margin-bottom:0; }
.bloque-elegido{ font-size:14.5px; color:var(--ink); margin:0 0 12px; }
.bloque-elegido a{ margin-left:8px; font-size:13px; color:var(--ink-dim); text-decoration:underline; }
.bloque-nota{ font-size:13.5px; color:var(--ink-dim); margin:0 0 12px; line-height:1.55; }
.bloque-nota a{ text-decoration:underline; }
.campo-f small{ font-weight:400; color:var(--ink-faint); }

.pagos-eleccion{ display:flex; flex-direction:column; gap:6px; }
.pago-opcion{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm); cursor:pointer;
}
.pago-opcion input{ accent-color:var(--ink); }
.pago-opcion span{ flex:1; font-size:14.5px; font-weight:600; }
.pago-opcion img{ max-height:24px; max-width:160px; object-fit:contain; }
.pago-opcion:has(input:checked){ border-color:var(--ink); background-color:var(--bg-elev-2); }

/* ---------- La página de la orden ---------- */
.orden-estado p{ margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink); }
.orden-ampliar{ font-size:13.5px !important; color:var(--ink-dim) !important; }
.orden-ampliar a{ font-weight:700; text-decoration:underline; }

.medios{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.medio{ border:1px solid var(--panel-border); border-radius:var(--radius-sm); background-color:var(--bg); }
.medio[open]{ border-color:var(--ink); }
.medio summary{
  display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;
  font-weight:600; list-style:none;
}
.medio summary::-webkit-details-marker{ display:none; }
.medio summary::before{
  content:''; width:8px; height:8px; flex:none;
  border-right:2px solid var(--ink-dim); border-bottom:2px solid var(--ink-dim);
  transform:rotate(-45deg); transition:transform var(--dur-ui, 200ms) ease;
}
.medio[open] summary::before{ transform:rotate(45deg); }
.medio summary span{ flex:1; }
.medio summary img{ max-height:24px; max-width:170px; object-fit:contain; }
.medio-cuerpo{ display:flex; gap:20px; padding:4px 16px 16px; align-items:flex-start; }
.medio-datos{ flex:1; font-size:14px; line-height:1.55; }
.medio-datos p{ margin:0 0 10px; color:var(--ink-dim); }
.medio-datos dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; }
.medio-datos dt{ color:var(--ink-faint); font-size:13px; }
.medio-datos dd{ margin:0; font-variant-numeric:tabular-nums; word-break:break-all; }
/* El QR sobre blanco siempre, también en Plano Azul: un QR invertido
   no lo leen todas las billeteras. */
.medio-qr{ width:190px; height:auto; background:#fff; padding:8px; border-radius:var(--radius-sm); border:1px solid var(--panel-border); }

.form-pago{ padding-top:18px; border-top:1px solid var(--panel-border); }
.form-pago h3{ font-size:15px; margin:0 0 12px; }
.orden-cancelar{ text-align:right; }
.form-rastreo{ max-width:420px; }

@media (max-width:960px){
  .compra-cuerpo{ grid-template-columns:1fr; }
  .compra-resumen{ position:static; }
}
@media (max-width:640px){
  .linea{ grid-template-columns:60px minmax(0,1fr) auto; grid-template-areas:"foto datos quitar" "foto cant subtotal"; row-gap:10px; }
  .linea-foto{ grid-area:foto; width:60px; height:60px; align-self:start; }
  .linea-datos{ grid-area:datos; }
  .linea-quitar{ grid-area:quitar; }
  .linea-cantidad{ grid-area:cant; justify-self:start; }
  .linea-subtotal{ grid-area:subtotal; }
  .linea-quitar{ justify-self:end; }
  .medio-cuerpo{ flex-direction:column; }
  .medio-qr{ align-self:center; }
  .ficha-comprar{ flex-wrap:wrap; }
  .bloque-compra, .orden-estado{ padding:16px; }
}
@media (prefers-reduced-motion:reduce){
  .cab-carrito-cuenta.pulso{ animation:none; }
  .aviso-carrito{ transition:none; }
}

/* ---------- Seguimiento del despacho ----------
   Pasos en fila con una línea que los une; la parte recorrida va
   llena. En teléfono pasan a columna: cinco pasos en 380px no entran
   con su texto. */
.despacho{ list-style:none; margin:0; padding:0; display:flex; }
.despacho-paso{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:0 4px; font-size:13px; color:var(--ink-faint); }
.despacho-paso::before{ content:''; position:absolute; top:9px; left:-50%; width:100%; height:2px; background-color:var(--panel-border); }
.despacho-paso:first-child::before{ display:none; }
.despacho-punto{ position:relative; z-index:1; width:20px; height:20px; border-radius:50%; background-color:var(--bg-elev); border:2px solid var(--panel-border); }
.despacho-paso b{ color:inherit; font-weight:600; margin-top:4px; }
.despacho-paso small{ font-size:11.5px; }
.despacho-paso.hecha, .despacho-paso.actual{ color:var(--ink); }
.despacho-paso.hecha::before, .despacho-paso.actual::before{ background-color:var(--ok); }
.despacho-paso.hecha .despacho-punto{ background-color:var(--ok); border-color:var(--ok); }
.despacho-paso.actual .despacho-punto{ border-color:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.despacho-paso.actual b{ font-weight:800; }
.despacho-datos{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--panel-border); font-size:14px; }
.despacho-datos dt{ color:var(--ink-faint); }
.despacho-datos dd{ margin:0; }
.despacho-datos small{ display:block; color:var(--ink-faint); font-size:12px; }
.orden-rechazo{ color:var(--danger) !important; font-weight:600; }

/* ---------- Rastreo ---------- */
.rastreo{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:24px; align-items:start; }
.rastreo-resultado h2{ font-family:var(--font-display); font-size:16px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px; }
.rastreo-orden{
  display:grid; grid-template-columns:120px 90px 1fr auto; gap:12px; align-items:center;
  padding:14px 16px; margin-bottom:8px; background-color:var(--bg-elev);
  border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px); color:var(--ink);
  transition:border-color var(--dur-ui, 200ms) ease;
}
@media (hover:hover){ .rastreo-orden:hover{ border-color:var(--ink); } }
.rastreo-folio{ font-weight:700; font-variant-numeric:tabular-nums; }
.rastreo-fecha{ font-size:13px; color:var(--ink-faint); }
.rastreo-estado{ font-size:13.5px; }

@media (max-width:760px){
  .rastreo{ grid-template-columns:1fr; }
  .rastreo-orden{ grid-template-columns:1fr auto; }
  .despacho{ flex-direction:column; gap:14px; }
  .despacho-paso{ flex-direction:row; text-align:left; gap:10px; align-items:center; flex-wrap:wrap; }
  .despacho-paso::before{ top:-14px; left:9px; width:2px; height:14px; }
  .despacho-paso b{ margin:0; }
}
/* Acceder y Carrito van juntos, más cerca entre sí que del buscador:
   son un solo grupo. */
.cab-acceso + .cab-carrito{ margin-left:calc(10px - var(--s3, 24px)); }


/* =====================================================================
   LA FAMILIA EN LA FICHA
   ---------------------------------------------------------------------
   Los otros productos de la misma familia, entre el precio y la
   disponibilidad. Miniaturas con la FOTO COMPLETA (contain sobre
   blanco): las familias también son de impresoras.

   Las clases son familia-* y no linea-*: .linea ya es la fila del
   carrito, y compartir el nombre metía su grilla de cinco columnas acá.

   Columnas contadas y no auto-fill: siete por fila en computadora, para
   que la familia se lea como una tira de opciones y no como una columna
   de fichas sueltas.
   ===================================================================== */
.familia{ margin:6px 0 24px; }
.familia-cab{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.familia-titulo{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);
}
.familia-cuenta{ font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.familia-lista{ display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:8px; }
@media (max-width:1500px){ .familia-lista{ grid-template-columns:repeat(8, minmax(0,1fr)); } }
@media (max-width:1000px){ .familia-lista{ grid-template-columns:repeat(8, minmax(0,1fr)); } }
@media (max-width:760px){  .familia-lista{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; } }
@media (max-width:480px){  .familia-lista{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.familia-item{
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:6px; border:1.5px solid var(--panel-border); border-radius:var(--radius-sm);
  background:var(--bg-elev); color:var(--ink-dim);
  transition:border-color var(--dur-ui, 200ms) ease, transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
.familia-foto{ position:relative; display:block; aspect-ratio:1 / 1; border-radius:3px; overflow:hidden; background:#fff; }
.familia-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.familia-nombre{
  font-size:12.5px; line-height:1.25; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){
  .familia-item:hover{ border-color:var(--ink-dim); transform:translateY(-1px); }
}
.familia-item:active{ transform:scale(0.97); }

.familia-item.actual{ border-color:var(--ink); color:var(--ink); }
.familia-item.actual .familia-nombre{ font-weight:700; }

/* Preventa: apagada y cruzada por una diagonal. Se abre igual. */
.familia-item.preventa .familia-foto img{ opacity:.45; }
.familia-item.preventa .familia-foto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top right, transparent calc(50% - 1px), var(--danger) calc(50% - 1px), var(--danger) calc(50% + 1px), transparent calc(50% + 1px));
}
/* Bajo pedido: un punto azul en la esquina. */
.familia-item.pedido::after{
  content:''; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%;
  background:var(--info); box-shadow:0 0 0 2px #fff;
}


@media (prefers-reduced-motion:reduce){
  .familia-item:hover, .familia-item:active{ transform:none; }
}


/* =====================================================================
   LA FICHA A LO ANCHO
   ---------------------------------------------------------------------
   Mismo ancho que el catálogo (--maxw-catalogo): a 1180 la ficha
   quedaba como una columna angosta en medio de un monitor de 1920, con
   la foto chica y la familia apretada. La foto toma algo más de la
   mitad; la columna de compra, el resto.
   ===================================================================== */
.contenedor.ficha{ max-width:var(--maxw-catalogo, 1600px); }
/* La foto a la izquierda, más angosta; los productos de la familia
   toman el protagonismo en la columna ancha. La foto queda pegada al
   bajar: con una familia de 40 muestras, el cliente sigue viendo qué
   producto tiene abierto mientras recorre los colores. */
@media (min-width:1001px){
  .ficha-grid{ grid-template-columns:minmax(300px, 0.75fr) minmax(0, 1.25fr); gap:40px; }
  .ficha-grid > .galeria{ position:sticky; top:calc(var(--cab-alto, 140px) + 18px); }
}

/* =====================================================================
   CARRIL DESLIZABLE (relacionados)
   Scroll nativo con snap: dedo, rueda y teclado sin código. Las
   flechas solo avanzan una pantalla del carril.
   ===================================================================== */
.carril-cab{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.carril-cab .seccion-titulo{ margin:0; }
.carril-flechas{ display:flex; gap:8px; }
.carril-flecha{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev); color:var(--ink); cursor:pointer;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  transition:border-color var(--dur-ui, 200ms) ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
}
.carril-flecha svg{ width:18px; height:18px; }
@media (hover:hover) and (pointer:fine){ .carril-flecha:hover{ border-color:var(--ink); } }
.carril-flecha:active{ transform:scale(0.95); }
@media (hover:none){ .carril-flechas{ display:none; } }

.carril-pista{
  display:grid; grid-auto-flow:column;
  /* Cinco a la vista en computadora; la sexta asoma para decir "hay más". */
  grid-auto-columns:calc((100% - 4 * 16px) / 5.3);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:thin; overscroll-behavior-x:contain;
}
.carril-pista > *{ scroll-snap-align:start; }
@media (max-width:1100px){ .carril-pista{ grid-auto-columns:calc((100% - 3 * 16px) / 4.3); } }
@media (max-width:760px){  .carril-pista{ grid-auto-columns:calc((100% - 2 * 12px) / 2.4); gap:12px; } }


/* =====================================================================
   SUGERENCIAS DEL BUSCADOR
   ---------------------------------------------------------------------
   Cuelgan de la caja de búsqueda (el formulario es el que tiene
   position:relative). Una lámina opaca, como el resto: lo que hay
   detrás es la página, y un listado semitransparente sobre productos
   no se lee.

   REJILLA EN COMPUTADORA, LISTA EN EL CELULAR.
   Con el buscador de 760px de ancho, una columna desperdiciaba dos
   tercios del panel y obligaba a hacer scroll para ver ocho productos;
   en cuatro columnas entran doce de un vistazo. En el celular no hay
   ancho que repartir, así que vuelve a ser una lista.
   ===================================================================== */
.cab-buscador{ position:relative; }
.sug{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:78;
  max-height:min(70vh, 560px); overflow-y:auto; padding:8px;
  background-color:var(--bg-elev); color:var(--ink);
  border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  box-shadow:0 20px 40px -22px var(--shadow);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px;
}
.sug[hidden]{ display:none; }
.sug-item{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; align-items:center;
  padding:8px; border-radius:var(--radius-sm); color:var(--ink);
}
.sug-foto{ width:56px; height:56px; border-radius:4px; overflow:hidden; background:#fff; border:1px solid var(--panel-border); }
.sug-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.sug-datos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
/* Dos renglones: en una celda de rejilla el nombre completo no entra
   en uno, y cortarlo con puntos suspensivos esconde justo el color,
   que es lo que distingue a un producto del de al lado. */
.sug-nombre{
  font-size:13.5px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sug-precio{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.sug-item .disponibilidad{ font-size:10.5px; padding:2px 7px 2px 6px; align-self:flex-start; }
.sug-item .disponibilidad::before{ width:5px; height:5px; }
/* El resaltado es el mismo para el mouse y para las flechas del
   teclado: quien navega con teclado ve exactamente lo que vería con el
   mouse encima. */
.sug-item.on, .sug-todos.on{ background-color:var(--bg-elev-2); }
@media (hover:hover) and (pointer:fine){ .sug-item:hover{ background-color:var(--bg-elev-2); } }
.sug-todos{
  grid-column:1 / -1;
  display:block; margin-top:4px; padding:11px 10px; border-top:1px solid var(--panel-border);
  font-size:13.5px; font-weight:600; color:var(--ink); text-align:center;
}
.sug-vacio{ grid-column:1 / -1; margin:0; padding:16px 12px; font-size:13.5px; color:var(--ink-faint); text-align:center; }

@media (max-width:1280px){ .sug{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1000px){ .sug{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px){
  .sug{ grid-template-columns:1fr; }
  .sug-item{ grid-template-columns:44px minmax(0,1fr); }
  .sug-foto{ width:44px; height:44px; }
  .sug-nombre{ -webkit-line-clamp:1; }
}


/* Logo de marca en la columna de filtros: la misma placa blanca, para
   que en Plano Azul no desaparezcan los logos oscuros. */
.marca-logo img{ background:#fff; padding:2px 3px; border-radius:3px; }


/* =====================================================================
   FICHA: NOMBRE A LA IZQUIERDA, MARCA A LA DERECHA
   El logo entra a 1200×600 y se muestra contenido en una placa blanca
   de proporción 2:1, así cualquier logo cabe sin recortarse y sin
   deformarse.
   ===================================================================== */
.ficha-encabezado{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:10px; }
.ficha-encabezado-texto{ min-width:0; }
.ficha-encabezado h1{ margin:0; }
.ficha-encabezado .ficha-sku{ margin:6px 0 0; }
.ficha-marca{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:clamp(120px, 16vw, 190px); aspect-ratio:2 / 1; padding:10px 14px;
  background:#fff; border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  transition:border-color var(--dur-ui, 200ms) ease, transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
.ficha-marca img{ width:100%; height:100%; object-fit:contain; background:none; padding:0; border:0; }
.ficha-marca.sin-logo{
  aspect-ratio:auto; width:auto; background:none; border-color:var(--panel-border);
  padding:8px 14px;
}
.ficha-marca.sin-logo span{
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);
}
@media (hover:hover) and (pointer:fine){ .ficha-marca:hover{ border-color:var(--ink); transform:translateY(-1px); } }
@media (max-width:640px){
  .ficha-encabezado{ flex-direction:column-reverse; align-items:flex-start; gap:14px; }
  .ficha-marca{ width:140px; }
}

/* La familia, centrada en el espacio que tiene: celdas de medida fija
   y la rejilla al centro. Con 8 colores en una fila de 10 columnas, el
   bloque ya no queda pegado a la izquierda con un hueco al lado. */
.familia-cab{ justify-content:center; }
.familia-lista{ grid-template-columns:repeat(auto-fill, 104px) !important; justify-content:center; }
@media (max-width:760px){ .familia-lista{ grid-template-columns:repeat(auto-fill, 92px) !important; } }
@media (max-width:480px){ .familia-lista{ grid-template-columns:repeat(auto-fill, 78px) !important; } }


/* =====================================================================
   PÁGINA DE MARCAS
   ---------------------------------------------------------------------
   Rejilla a todo el ancho, con las marcas agrupadas por letra y un
   selector de letras arriba. Solo logos: el nombre debajo de un
   logotipo que ya lo dice es ruido, y hace que 20 marcas se lean como
   20 fichas en vez de un muro de marcas.
   ===================================================================== */
.pagina-marcas{ padding-top:28px; padding-bottom:80px; max-width:var(--maxw-catalogo, 1600px); }

/* El selector de letras se queda a la vista al bajar: es la forma de
   saltar de la A a la X sin recorrer todo. */
.marcas-letras{
  position:sticky; top:calc(var(--cab-alto, 140px) + 12px); z-index:20;
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 28px; padding:10px;
  background-color:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
}
.marcas-letras a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--ink-dim);
  font-family:var(--font-display); font-size:15px; font-weight:600;
  transition:background-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
@media (hover:hover) and (pointer:fine){ .marcas-letras a:hover{ background-color:var(--ink); color:var(--bg); } }
.marcas-letras a:target, .marcas-letras a:focus-visible{ background-color:var(--bg-elev-2); color:var(--ink); }

.marcas-grupo{ margin-bottom:34px; scroll-margin-top:110px; }
.marcas-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:14px;
}
.marca-tarjeta{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px;
  background-color:var(--bg-elev); border:1px solid var(--panel-border); border-radius:var(--radius-md, 8px);
  transition:border-color var(--dur-ui, 200ms) ease, transform var(--dur-ui, 200ms) var(--ease-out, ease);
}
/* En reposo, el logo en escala de grises; en color al pasar el mouse.
   Es la única vez que el sistema toca el color de una marca ajena, y
   es a propósito: con veinte logos de veinte paletas juntos, el muro
   se veía como una bolsa de stickers. Al tocar o pasar el mouse vuelve
   a su color real, que es como la marca pide que se la vea. */
.marca-tarjeta-logo img{ filter:grayscale(1); opacity:.72; transition:filter var(--dur-ui, 200ms) ease, opacity var(--dur-ui, 200ms) ease; }
@media (hover:hover) and (pointer:fine){
  .marca-tarjeta:hover{ border-color:var(--ink); transform:translateY(-2px); }
  .marca-tarjeta:hover .marca-tarjeta-logo img{ filter:none; opacity:1; }
}
.marca-tarjeta:focus-visible .marca-tarjeta-logo img{ filter:none; opacity:1; }
/* En pantallas táctiles no hay "pasar el mouse": los logos van a color. */
@media (hover:none){ .marca-tarjeta-logo img{ filter:none; opacity:1; } }

.marca-tarjeta-cuenta{ font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.marca-tarjeta-inicial{
  font-family:var(--font-display); font-size:17px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--ink-dim); text-align:center;
}
@media (max-width:640px){
  .marcas-rejilla{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
  .marcas-letras{ gap:4px; padding:8px; }
  .marcas-letras a{ width:34px; height:34px; font-size:14px; }
}

/* ---------- Contador de la ficha ---------- */
.ficha-cantidad{ display:flex; flex-direction:column; gap:4px; }
.ficha-cantidad-rotulo{ font-size:12px; font-weight:600; color:var(--ink-dim); }
.contador{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.contador button{
  width:40px; height:48px; border:0; background:transparent; color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
}
.contador button:disabled{ color:var(--ink-faint); cursor:default; }
@media (hover:hover) and (pointer:fine){ .contador button:not(:disabled):hover{ background-color:var(--bg-elev-2); } }
.contador .cant-valor{
  width:52px; height:48px; border:0; background:none; color:var(--ink);
  text-align:center; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.contador .cant-valor::-webkit-outer-spin-button,
.contador .cant-valor::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.contador .cant-valor:focus{ outline:none; background-color:var(--bg-elev-2); }
/* =====================================================================
   MI CUENTA (/cuenta/) — menú lateral + panel de contenido
   ===================================================================== */
.cuenta-grid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; }

.cuenta-nav{
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:calc(var(--cab-alto, 140px) + 24px);
  /* Antes sin fondo: las letras del menú se perdían contra el patrón
     de cuadrícula del fondo de la página. Misma tarjeta que .cuenta-panel,
     para que las dos mitades pesen igual en vez de que una flote sobre
     el fondo y la otra no. */
  background-color:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px); padding:10px;
}
.cuenta-nav a{
  display:block; padding:10px 14px; border-radius:var(--radius-sm, 4px);
  font-size:14px; color:var(--ink-dim);
  transition:background-color var(--dur-ui, 200ms) ease, color var(--dur-ui, 200ms) ease;
}
@media (hover:hover){ .cuenta-nav a:hover{ background-color:var(--bg-elev-2); color:var(--ink); } }
.cuenta-nav a.on{
  background-color:var(--bg-elev); color:var(--ink); font-weight:600;
  border:1px solid var(--panel-border);
}
.cuenta-nav .cab-acceso-linea{ margin:8px 14px; }

.cuenta-panel{
  background-color:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md, 8px); padding:28px;
}
.cuenta-panel h2{ font-size:18px; margin:0 0 16px; }
.cuenta-proximamente{ color:var(--ink-dim); font-size:14px; margin:0; }
.cuenta-separador{ height:1px; background-color:var(--panel-border); margin:28px 0; }
.cuenta-form .campo-f:last-of-type{ margin-bottom:18px; }

.cuenta-form-envoltura{ max-width:420px; margin:0 auto; }
.cuenta-alterna{ margin:16px 0 0; font-size:13.5px; color:var(--ink-dim); text-align:center; }
.cuenta-alterna a{ color:var(--ink); font-weight:600; text-decoration:underline; }

/* LA INSIGNIA DE NIVEL (junto al saludo)
   Tinta con estrella y texto en el acento: se lee como un distintivo,
   no como una etiqueta de precio amarilla. */
.nivel-insignia{
  display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  padding:5px 12px 5px 10px; border-radius:999px;
  background-color:#1B1F26; color:var(--p-amarillo, #F2B705);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; vertical-align:middle;
}
.nivel-insignia svg{ width:13px; height:13px; flex:none; }

/* =====================================================================
   PERFIL COMO TARJETA DE PRESENTACIÓN
   Se lee primero; se edita solo al pedirlo (?editar=datos / clave).
   ===================================================================== */
.perfil-cabeza{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--panel-border);
}
.perfil-inicial{
  width:64px; height:64px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--ink); color:var(--bg);
  font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:0.04em;
}
.perfil-identidad{ flex:1; min-width:200px; }
.perfil-nombre{ font-family:var(--font-display); font-size:clamp(22px, 2.6vw, 30px); line-height:1.15; margin:0; }
.perfil-usuario{ margin:4px 0 0; color:var(--ink-dim); font-size:14px; }
.perfil-editar{ flex:none; }

/* Cuatro datos, cuatro columnas: con auto-fit la contraseña quedaba
   sola en una segunda fila. En tablet dos y dos; en celular, uno. */
.perfil-datos{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px 20px; margin:0; padding-top:20px;
}
@media (max-width:1100px){ .perfil-datos{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .perfil-datos{ grid-template-columns:1fr; } }
.perfil-datos dt{
  font-family:var(--font-display); font-size:11.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;
}
.perfil-datos dd{ margin:0; font-size:15px; color:var(--ink); overflow-wrap:anywhere; }
.perfil-vacio{ color:var(--ink-faint); font-style:italic; }
.perfil-clave{ display:flex; align-items:center; gap:14px; }
.perfil-clave span{ letter-spacing:0.12em; }
.perfil-clave a{ font-size:13.5px; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; }

/* LA CREDENCIAL DE DISTRIBUIDOR
   Oscura en los dos temas —es un objeto, como una tarjeta física—, con
   el sello y el nivel en el acento, y un rayado fino que le da textura
   de documento sin distraer. */
.credencial{
  --credencial-fondo:#1B1F26;
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:22px 0 4px; padding:20px 24px;
  border-radius:var(--radius-md, 8px);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(120deg, #262B33 0%, var(--credencial-fondo) 60%);
  color:#EEF1F4;
  box-shadow:inset 0 0 0 1px rgba(242,183,5,.35), 0 14px 30px -18px rgba(0,0,0,.55);
}
.credencial::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background-color:var(--p-amarillo, #F2B705);
}
.credencial-sello{ width:52px; height:52px; flex:none; color:var(--p-amarillo, #F2B705); }
.credencial-texto{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:180px; }
.credencial-rotulo{
  font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(238,241,244,.62);
}
.credencial-nivel{
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px, 3vw, 30px);
  letter-spacing:0.08em; text-transform:uppercase; line-height:1.05;
  color:var(--p-amarillo, #F2B705);
}
.credencial-enlace{
  flex:none; font-size:13px; color:#EEF1F4; opacity:.8;
  text-decoration:underline; text-underline-offset:3px;
}
@media (hover:hover){ .credencial-enlace:hover{ opacity:1; } }

/* El formulario, cuando se pide: dos columnas en pantallas anchas. */
.perfil-edicion-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.perfil-edicion-cab h2{ margin:0; }
.perfil-edicion-cab a{ font-size:13.5px; color:var(--ink-dim); text-decoration:underline; }
.perfil-form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px; }
.perfil-form .campo-f:last-of-type{ margin-bottom:var(--s3); }
.perfil-form-acciones{ grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; }
.perfil-edicion-clave .cuenta-form{ max-width:420px; }
@media (max-width:760px){
  .perfil-form{ grid-template-columns:1fr; }
  .perfil-cabeza{ gap:14px; }
  .perfil-inicial{ width:52px; height:52px; font-size:20px; }
  .perfil-editar{ width:100%; }
  .credencial{ padding:16px 18px 16px 20px; gap:14px; }
  .credencial-sello{ width:42px; height:42px; }
}

.campo-documento{ display:flex; gap:8px; }
.campo-documento select{ flex:0 0 88px; }
.campo-documento input{ flex:1; min-width:0; }

@media (max-width:760px){
  .cuenta-grid{ grid-template-columns:1fr; }
  .cuenta-nav{
    position:static; flex-direction:row; overflow-x:auto; gap:6px;
    padding-bottom:6px; margin-bottom:4px;
  }
  .cuenta-nav a{ flex:none; white-space:nowrap; }
  .cuenta-nav .cab-acceso-linea{ display:none; }
  .cuenta-panel{ padding:18px; }
}
/* =====================================================================
   OJITO PARA VER LA CONTRASEÑA — login, registro, cambio de contraseña
   ===================================================================== */
.campo-clave{ position:relative; }
.campo-clave input{ padding-right:44px; }
.clave-ojo{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background-color:transparent; border:1px solid transparent; border-radius:var(--radius-sm, 4px);
  color:var(--ink-faint); cursor:pointer;
  transition:color var(--dur-ui, 200ms) ease, background-color var(--dur-ui, 200ms) ease;
}
.clave-ojo svg{ width:19px; height:19px; }
/* layout.css le pone display:block a TODOS los <svg> del sitio (evita
   el hueco que deja un svg inline por defecto) — pero eso también le
   gana al atributo hidden del navegador, que se apoya en display:none.
   Sin esta línea los dos ojos (abierto y tachado) se veían siempre
   juntos: ninguno se ocultaba de verdad. */
.clave-ojo svg[hidden]{ display:none; }
@media (hover:hover){
  .clave-ojo:hover{ color:var(--ink); background-color:var(--bg-elev-2); }
}

/* =====================================================================
   SEÑAL DE STOCK (solo distribuidores)
   Cuatro barras como las de señal del celular, la letra del nivel y su
   palabra. Nunca un número. Ver t_senal_stock() en _comun.php.

   Mismo lenguaje que .disponibilidad: el color acompaña (verde en A y
   B, ámbar en D, contorno punteado en E) pero la forma —cuántas barras
   llenas— y la palabra dicen lo mismo sin él.
   ===================================================================== */
.senal-stock{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap;
  padding:4px 10px 4px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border); color:var(--ink);
}
.senal-stock b{ font-family:var(--font-display); font-weight:600; letter-spacing:0.04em; }
.senal-barras{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.senal-barras i{ width:3px; border-radius:1px; background-color:currentColor; opacity:.22; }
.senal-barras i:nth-child(1){ height:4px; }
.senal-barras i:nth-child(2){ height:7px; }
.senal-barras i:nth-child(3){ height:10px; }
.senal-barras i:nth-child(4){ height:12px; }
.senal-barras i.on{ opacity:1; }

.senal-stock.nivel-a,
.senal-stock.nivel-b{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.senal-stock.nivel-d{
  color:var(--accent-text); border-color:transparent;
  background-color:color-mix(in srgb, var(--accent) 22%, transparent);
}
/* E: no hay. Rojo, para que se note de lejos que no se puede vender
   hoy. P: a pedido, en el azul que ya usa "Bajo pedido" en público. */
.senal-stock.nivel-e{
  color:var(--danger); border-color:transparent;
  background-color:color-mix(in srgb, var(--danger) 12%, transparent);
}
.senal-stock.nivel-p{
  color:var(--info); border-color:transparent;
  background-color:color-mix(in srgb, var(--info) 12%, transparent);
}

.senal-stock.grande{ font-size:13.5px; padding:7px 14px 7px 12px; gap:8px; }
.senal-stock.grande .senal-barras{ height:15px; }
.senal-stock.grande .senal-barras i{ width:4px; }
.senal-stock.grande .senal-barras i:nth-child(1){ height:5px; }
.senal-stock.grande .senal-barras i:nth-child(2){ height:9px; }
.senal-stock.grande .senal-barras i:nth-child(3){ height:12px; }
.senal-stock.grande .senal-barras i:nth-child(4){ height:15px; }

.ficha-senal{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 var(--s3); }
.ficha-senal a{ font-size:13px; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; }

/* El manual en Mi cuenta. */
.manual-texto{ max-width:62ch; margin:0 0 var(--s3); line-height:1.6; color:var(--ink-dim); }
.tabla-niveles-envoltura{ overflow-x:auto; margin:0 0 var(--s2); }
.tabla-niveles{ width:100%; min-width:520px; border-collapse:collapse; font-size:14px; }
.tabla-niveles th{
  text-align:left; font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim);
  padding:8px 10px; border-bottom:1.5px solid var(--panel-border);
}
.tabla-niveles td{ padding:10px; border-bottom:1px solid var(--panel-border); vertical-align:middle; }
.tabla-niveles td:nth-child(2){ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* LA SEÑAL DENTRO DE LA FOTO DE LA TARJETA (distribuidores)
   Solo barras y letra, en grande: se lee de un vistazo en la rejilla y
   ninguna palabra la estira ("Últimas unidades" no entraba bien). La
   palabra queda para lectores de pantalla (recortada visualmente, no
   borrada), en el title al pasar el mouse, y completa en la ficha.

   Fondo propio y sombra corta: las fotos de producto suelen ser
   blancas y una etiqueta sin fondo se perdería. */
.foto-senal{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  pointer-events:none;
}
.foto-senal .senal-stock{
  gap:9px; padding:8px 14px 8px 12px;
  background-color:var(--bg-elev);
  box-shadow:0 4px 14px -6px var(--shadow);
}
.foto-senal .senal-stock b{ font-size:22px; line-height:1; }
.foto-senal .senal-stock .senal-barras{ height:24px; gap:3px; }
.foto-senal .senal-stock .senal-barras i{ width:5px; border-radius:1.5px; }
.foto-senal .senal-stock .senal-barras i:nth-child(1){ height:8px; }
.foto-senal .senal-stock .senal-barras i:nth-child(2){ height:13px; }
.foto-senal .senal-stock .senal-barras i:nth-child(3){ height:19px; }
.foto-senal .senal-stock .senal-barras i:nth-child(4){ height:24px; }
.foto-senal .senal-texto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
/* El ámbar y el rojo translúcidos se mezclan sobre el fondo de la
   tarjeta, no sobre la foto: sobre la imagen quedaban sucios. */
.foto-senal .senal-stock.nivel-d{
  background:linear-gradient(color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 26%, transparent)), var(--bg-elev);
}
.foto-senal .senal-stock.nivel-e{
  background:linear-gradient(color-mix(in srgb, var(--danger) 12%, transparent), color-mix(in srgb, var(--danger) 12%, transparent)), var(--bg-elev);
}
.foto-senal .senal-stock.nivel-p{
  background:linear-gradient(color-mix(in srgb, var(--info) 12%, transparent), color-mix(in srgb, var(--info) 12%, transparent)), var(--bg-elev);
}

/* Celular: la rejilla de 3 columnas deja fotos de unos 110px. */
@media (max-width:640px){
  .foto-senal{ bottom:7px; }
  .foto-senal .senal-stock{ gap:5px; padding:4px 8px 4px 7px; }
  .foto-senal .senal-stock b{ font-size:14px; }
  .foto-senal .senal-stock .senal-barras{ height:15px; gap:2px; }
  .foto-senal .senal-stock .senal-barras i{ width:3.5px; }
  .foto-senal .senal-stock .senal-barras i:nth-child(1){ height:5px; }
  .foto-senal .senal-stock .senal-barras i:nth-child(2){ height:8px; }
  .foto-senal .senal-stock .senal-barras i:nth-child(3){ height:12px; }
  .foto-senal .senal-stock .senal-barras i:nth-child(4){ height:15px; }
}