/*
 * Pescando a Pleno · tienda.css · páginas de la tienda pública.
 * El marco (encabezado, menú, franja, cajón, pie, modo mayorista) está en marco-tienda.css. Los componentes
 * (tarjeta, fila, precios, cenefa, migas, paginación, cantidad, chips, hoja, barra fija, medidor, avisos) están en base.css.
 * Guía: docs/areas/sistema-visual.md. Dirección: docs/03-direccion-visual.md. Correcciones de Pablo: diseno/feedback-pablo.md.
 * Ganchos por atributo que no son de estilo: data-precio (modo mayorista), data-solo-impresion y data-no-imprimir.
 * tienda.js no depende de ninguna clase. tienda-catalogo.js tampoco (data-hoja, data-filtros-*, data-pedido-*).
 *
 * Secciones: piezas compartidas (2A, las usan las páginas de texto) · catálogo (categoría, búsqueda y relacionados)
 * · categoría · búsqueda · ficha de producto · hoja "Agregado al carrito" · lista mayorista · impresión.
 */

/* ---------- Piezas compartidas (páginas de texto, contacto, preguntas) ---------- */
.seccion { margin-block: var(--esp-7); }
.seccion > * + * { margin-top: var(--esp-4); }
.cabecera { margin-block: var(--esp-3) var(--esp-4); }
.texto-largo { max-width: 70ch; }
.texto-largo > * + * { margin-top: var(--esp-3); }
.texto-largo h2, .texto-largo h3 { margin-top: var(--esp-5); }
.texto-largo ul, .texto-largo ol { padding-left: 1.25rem; }
.texto-pagina { max-width: 60rem; margin-bottom: var(--esp-7); }
.datos { display: grid; margin: 0; }
.datos > div { display: flex; gap: var(--esp-3); padding-block: var(--esp-2); border-bottom: 1px solid var(--gris-claro); }
.datos dt { flex: 0 0 40%; color: var(--gris); }
.datos dd { margin: 0; min-width: 0; }

.portada__foto img, .banner img, .bloque-foto__foto img, .texto-pagina__foto img, .categorias__foto img {
  width: 100%; height: auto; object-fit: cover;
}
.portada__foto img { max-height: 70vh; }
.banner img { height: clamp(140px, 28vw, 280px); }
.portada__texto { display: flex; flex-direction: column; gap: var(--esp-3); padding-block: var(--esp-5); }
.bloque-foto { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .bloque-foto { grid-template-columns: 1fr 1fr; align-items: center; } }
.beneficios { display: grid; gap: var(--esp-3); margin: 0; }
.beneficios dt { font-weight: 500; }
.beneficios dd { margin: 0; color: var(--gris); }

.categorias { display: grid; gap: var(--esp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
@media (min-width: 768px) { .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.categorias__enlace { display: flex; flex-direction: column; gap: var(--esp-2); color: inherit; text-decoration: none; }
.categorias__foto img { aspect-ratio: 3 / 2; border-radius: var(--radio); }
.categorias__nombre { font-size: var(--texto-l); }

/* Grilla simple de tarjetas (parciales/grilla.php sin disposición: la usa el inicio) */
.grilla-productos { display: grid; gap: var(--esp-5) var(--esp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .grilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grilla-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta > summary { display: flex; align-items: center; min-height: var(--toque); padding-block: var(--esp-2); font-weight: 500; cursor: pointer; }
.pregunta > p { padding-bottom: var(--esp-3); }
.preguntas { margin-top: var(--esp-5); }

/* ---------- Catálogo: tarjetas para los que tienen foto, filas para el resto (parciales/grilla.php, 'catalogo') ----------
   Celular: todo en filas. Desde 768, con 3 fotos o más, tarjetas (columnas = cantidad, hasta 4; con 4, 2 hasta 1023).
   Filas en 2 columnas desde 768 y 3 desde 1024, alineadas con las tarjetas de arriba. Nunca una columna vacía. */
.catalogo { display: grid; }
.catalogo__tarjetas { display: none; margin: 0; padding: 0; list-style: none; }
.catalogo__resto { margin: var(--esp-6) 0 var(--esp-2); }
.catalogo__filas { display: grid; align-content: start; }
/* La foto de la fila también lleva a la ficha (el nombre es el enlace con foco) */
.producto-fila__foto { display: block; align-self: start; border-radius: var(--radio); }
.producto-fila__foto:focus-visible { outline-offset: 2px; }
/* precios.php envuelve el precio y la cenefa: en la fila cada uno va a su lugar de la grilla */
.producto-fila__cuerpo .precios { display: contents; }
.producto-fila__cuerpo .sin-precio { grid-area: p; }
.producto-fila__cuerpo .insignias, .producto-fila__cuerpo .producto__stock { grid-column: 1 / -1; }
.producto-fila__cuerpo .insignias { margin-top: -2px; }
.producto-fila__cuerpo .boton { justify-self: end; }
@media (min-width: 768px) {
  .catalogo__tarjetas { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--esp-6) var(--esp-5); }
  .catalogo__tarjetas--3 { --cols: 3; }
  /* Con 4, cuatro columnas también en tablet: de a dos quedaban tarjetas de 350 px y las filas muy abajo */
  .catalogo__tarjetas--4 { --cols: 4; column-gap: var(--esp-4); }
  .catalogo__tarjetas + .catalogo__filas--solo-celular + .catalogo__resto { margin-top: var(--esp-7); }
  .catalogo__filas--solo-celular { display: none; }
  .catalogo__filas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-6); }
  /* El último de cada columna cierra con su línea */
  .catalogo__filas > .producto-fila:nth-last-child(-n+2) { border-bottom: 1px solid var(--linea); }
}
@media (min-width: 1024px) {
  .catalogo__tarjetas--4 { column-gap: var(--esp-5); }
  .catalogo__filas:not(.catalogo__filas--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--esp-5); }
  .catalogo__filas:not(.catalogo__filas--2) > .producto-fila:nth-last-child(-n+3) { border-bottom: 1px solid var(--linea); }
}

/* ---------- Categoría ---------- */
.categoria { padding-bottom: var(--esp-7); }
.categoria__cabeza { display: grid; }
.categoria__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-3); }
.categoria__cuenta, .buscar__cuenta { font: 400 var(--texto-b)/1.3 var(--fuente-cuerpo); letter-spacing: 0; text-transform: none; color: var(--gris); }
.categoria__bajada { display: none; }
@media (min-width: 768px) { .categoria__bajada { display: block; } }
.categoria__sub { margin-top: var(--esp-4); }
.filtros { margin-top: var(--esp-4); }
.filtros[aria-busy="true"] { opacity: 0.7; }
/* Celular: Filtrar y Ordenar a todo el ancho, entre dos líneas (como la maqueta). El select es de 16 px. */
.filtros__barra {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(-1 * var(--lado));
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--blanco);
}
.filtros__filtrar {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 52px; padding: 0 var(--esp-3);
  border-right: 1px solid var(--linea); color: var(--azul); font: 500 var(--texto-m)/1 var(--fuente-cuerpo); text-decoration: none;
}
.filtros__orden { position: relative; display: flex; min-width: 0; }
.filtros__orden select {
  min-height: 52px; height: 100%; padding: 0 44px 0 var(--esp-4); border: 0; border-radius: 0; background-color: transparent;
  color: var(--azul); font-weight: 500; text-align: center; text-align-last: center; background-position: right 16px center;
}
.filtros__orden select:focus { outline-offset: -3px; }
@media (hover: hover) { .filtros__filtrar:hover, .filtros__orden select:hover { background-color: var(--crema); } }
.filtros__filtrar:active { background: var(--arena-clara); }
.filtros__atajos { display: none; }
.filtros__activos { margin-top: var(--esp-3); align-items: center; }
.filtros__activos .chip .icono, .filtros__atajos .chip .icono { color: var(--azul); }
@media (min-width: 768px) {
  .filtros { margin-top: var(--esp-5); }
  .filtros__fila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
  .filtros__barra { order: -1; width: 26rem; margin: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; }
  .filtros__filtrar { border-right-color: var(--linea-fuerte); }
  .filtros__atajos { display: flex; }
  /* El atajo puesto ya se ve marcado en la fila de atajos: no se repite abajo */
  .filtros__activos--atajo, .filtros__activo--atajo { display: none; }
}
@media (min-width: 1024px) {
  .filtros__fila { flex-direction: row; justify-content: space-between; align-items: center; }
  .filtros__barra { order: 2; flex: none; }
}
.categoria__productos { margin-top: var(--esp-2); }
/* Debajo de la barra no van dos líneas seguidas */
@media (max-width: 767px) {
  .categoria__productos > .catalogo > .catalogo__filas:first-of-type > .producto-fila:first-child { border-top: 0; }
  .filtros__activos + * { margin-top: 0; }
}
@media (min-width: 768px) { .categoria__productos { margin-top: var(--esp-6); } }
.categoria__vacio { margin-top: var(--esp-5); }
/* Hoja de filtros: sin JS se abre con #filtros */
.hoja:target { display: flex; }
.hoja-filtros__atajos { margin-bottom: var(--esp-4); }
.hoja-filtros__rango { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.hoja-filtros .opcion small { margin-left: -4px; font-size: var(--texto-s); }
.hoja-filtros .hoja__pie .boton:not(.boton--texto) { flex: 1 1 12rem; }
/* Guía de la categoría (contenido/categorias): texto a la izquierda, 46 rem */
.guia { max-width: 46rem; margin-top: var(--esp-8); }
.guia > * + * { margin-top: var(--esp-3); }
.guia h2 { margin-bottom: var(--esp-2); }
.guia h3 { margin-top: var(--esp-5); font-size: var(--texto-l); }
.guia ul, .guia ol { display: grid; gap: var(--esp-2); margin-top: var(--esp-3); padding: 0; list-style: none; }
.guia li { position: relative; padding-left: 20px; }
.guia li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 9px; height: 2px; border-radius: 1px; background: var(--verde-agua); }
/* La consulta de la guía va suelta, con una línea arriba y su botón. Sin caja (docs/03, "Frase destacada") */
.guia .aviso { margin-top: var(--esp-6); padding: var(--esp-5) 0 0; border-top: 1px solid var(--arena); border-radius: 0; background: none; font-size: var(--texto-m); color: var(--carbon); }
.guia .aviso + p { margin-top: var(--esp-4); }
@media (max-width: 599px) { .guia .boton { width: 100%; } }

/* ---------- Búsqueda ---------- */
.buscar { padding-bottom: var(--esp-7); }
.buscar__cabeza { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-5); }
.buscar__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-3); font: 700 var(--texto-2xl)/1.15 var(--fuente-titulos); text-transform: none; overflow-wrap: anywhere; }
.buscador--pagina { max-width: 40rem; }
/* En escritorio el buscador del encabezado ya tiene el texto buscado: el de la página se va (vuelve sin término) */
@media (min-width: 1024px) { .buscar__cabeza--con-q .buscador--pagina { display: none; } }
.buscador--pagina > .boton { padding: 0 18px; }
/* En celular el botón queda con la lupa sola: el ejemplo del campo entra entero */
@media (max-width: 479px) {
  .buscador--pagina > .boton { width: 52px; padding: 0; }
  .buscar__boton-texto { display: none; }
}
/* Cierre de 2B: categorías con su cuenta y Ordenar. Sin "Filtrar": la barra lleva solo el select, a todo el ancho en celular. */
.buscar__filtros { margin: 0; }
.buscar__barra { grid-template-columns: minmax(0, 1fr); }
/* Como en la categoría: debajo de la barra no van dos líneas seguidas */
@media (max-width: 767px) { .buscar__filtros + .catalogo > .catalogo__filas:first-of-type > .producto-fila:first-child { border-top: 0; } }
@media (min-width: 768px) {
  .buscar__filtros { margin-bottom: var(--esp-5); }
  .buscar__barra { order: 0; width: auto; min-width: 16rem; }
}
.buscar__vacio .chips { margin-top: -4px; }
.buscar__probar { font-size: var(--texto-s); color: var(--gris); }
.buscar__vacio .botones { margin-top: var(--esp-2); }
.buscar__parecidos { margin-top: var(--esp-7); }
.buscar__parecidos > .titulo-chico { margin-bottom: var(--esp-2); }
.buscar__parecidos > p { margin-top: var(--esp-3); }
@media (min-width: 768px) {
  .buscar__titulo { font-size: 2rem; }
  .buscar__cabeza { margin-bottom: var(--esp-6); }
}
@media (min-width: 1024px) { .buscar, .categoria, .mayoristas__preguntas { padding-bottom: var(--esp-8); } }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; gap: var(--esp-5); padding-bottom: var(--esp-7); }
/* Celular: foto a sangre, miniaturas de 64 px abajo */
.ficha__galeria { min-width: 0; margin-inline: calc(-1 * var(--lado)); }
.ficha__foto { position: relative; margin: 0; }
.ficha__foto .foto-pozo { border-radius: 0; }
.ficha__foto--sin .foto-pozo { aspect-ratio: 3 / 2; }
.ficha__foto-n {
  position: absolute; right: var(--esp-3); bottom: var(--esp-3); padding: 3px 10px; border-radius: var(--radio-chico);
  background: var(--blanco); color: var(--carbon); font-size: var(--texto-s); font-variant-numeric: tabular-nums;
}
.ficha__miniaturas { position: relative; display: flex; gap: var(--esp-2); margin: var(--esp-3) 0 0; padding: 0 var(--lado); list-style: none; overflow-x: auto; scrollbar-width: none; }
.ficha__miniatura {
  display: block; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); background: var(--pozo); box-shadow: inset 0 0 0 1px transparent; cursor: pointer;
}
.ficha__miniatura:hover { border-color: var(--azul); }
.ficha__miniatura[aria-current="true"] { border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); }
.ficha__miniatura img { width: 100%; height: 100%; padding: 6px; object-fit: contain; mix-blend-mode: multiply; }
.ficha__info { display: grid; gap: var(--esp-4); align-content: start; min-width: 0; }
.ficha__marca { font-size: var(--texto-b); color: var(--gris); }
.ficha__marca b { font-weight: 500; color: var(--carbon); }
.ficha__nombre { margin-top: -8px; font: 700 var(--texto-2xl)/1.15 var(--fuente-titulos); text-transform: none; }
.ficha__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-3); margin-top: var(--esp-1); }
.ficha__precio .precio { font-size: 2.125rem; line-height: 1.1; }
.ficha__precio .precio--tachado { font-size: var(--texto-m); }
.ficha__precio-tipo { font-size: var(--texto-b); color: var(--gris); }
.ficha__sin-precio { font: 500 var(--texto-xl)/1.3 var(--fuente-cuerpo); color: var(--carbon); }
.ficha__kraft { margin-top: 0; }
.ficha__kraft p:last-child { line-height: 1.45; }
/* Modo mayorista: manda la etiqueta kraft, el minorista queda chico y gris */
html[data-modo="mayorista"] .ficha__precio .precio:not(.precio--tachado) { font-size: var(--texto-xl); color: var(--gris); }
.ficha__compra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
.ficha__agregar { width: 100%; }
/* Con la columna angosta (celular y tablet) el botón al lado de la cantidad mide 170 a 180 px:
   sin el ícono y con menos relleno, "Agregar al carrito" entra con aire */
.ficha__compra { container: compra / inline-size; }
@container compra (max-width: 400px) {
  .ficha__agregar { padding: 0 12px; }
  .ficha__agregar .icono { display: none; }
}
.ficha__stock { grid-column: 1 / -1; font-size: var(--texto-b); font-weight: 500; color: var(--aviso); }
.ficha__compra--sin { grid-template-columns: minmax(0, 1fr); }
.ficha__compra--sin .aviso { margin-top: 0; }
.ficha__consulta { display: grid; gap: var(--esp-2); }
.ficha__consulta-nota { font-size: var(--texto-b); color: var(--gris); }
.ficha__condiciones { display: grid; gap: 6px; padding-top: var(--esp-4); border-top: 1px solid var(--linea); font-size: var(--texto-b); }
.ficha__datos { margin-top: var(--esp-4); }
.ficha__datos > .titulo-chico { padding-bottom: var(--esp-3); border-bottom: 1px solid var(--arena); }
.ficha__descripcion { padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); }
.ficha__tabla { margin: 0; }
.ficha__tabla > div { display: grid; grid-template-columns: minmax(6.5rem, 32%) minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); }
.ficha__tabla dt { color: var(--gris); overflow-wrap: anywhere; }
.ficha__tabla dd { display: grid; gap: 2px; margin: 0; }
.ficha__tabla dd b { font-weight: 500; color: var(--carbon); }
.ficha__tabla dd span { font-size: var(--texto-b); color: var(--gris); }
.ficha__nota { margin-top: var(--esp-3); font-size: var(--texto-s); color: var(--gris); }
.ficha__relacionados { padding-bottom: var(--esp-7); }
.ficha__relacionados .separador { margin-top: var(--esp-2); }
/* Barra fija de compra: en modo mayorista manda el precio por mayor, como en la ficha */
.ficha__barra .ficha__barra-may { display: none; }
html[data-modo="mayorista"] .ficha__barra .ficha__barra-min { display: none; }
html[data-modo="mayorista"] .ficha__barra b.ficha__barra-may { display: block; }
html[data-modo="mayorista"] .ficha__barra span.ficha__barra-may { display: inline; }
@media (max-width: 1023px) {
  /* La página deja libre el alto de la barra: el pie crema crece (un relleno en el body dejaba una franja blanca) */
  body:has(.ficha__barra:not([hidden])) > .pie, body:has(.lista-may__barra:not([hidden])) > .pie { padding-bottom: calc(var(--esp-5) + 72px); }
  /* El aviso flotante ("Ahora ves precios mayoristas") va arriba de la barra: no tapa "Ver pedido" ni "Agregar" */
  body:has(.ficha__barra:not([hidden])) > .aviso-flotante, body:has(.lista-may__barra:not([hidden])) > .aviso-flotante {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) {
  .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--esp-6); align-items: start; }
  /* La galería queda a la vista mientras se lee la columna de la derecha */
  .ficha__galeria { position: sticky; top: 84px; margin: 0; }
  .ficha__foto .foto-pozo { border-radius: var(--radio); }
  .ficha__foto--sin .foto-pozo { aspect-ratio: 4 / 3; }
  .ficha__miniaturas { padding: 0; }
  .ficha__nombre { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .ficha { column-gap: 56px; padding-bottom: var(--esp-8); }
  .ficha__relacionados { padding-bottom: var(--esp-8); }
}
@media (min-width: 1100px) { .ficha__nombre { font-size: 2.125rem; } }

/* ---------- Hoja "Agregado al carrito" (parciales/hoja-agregado.php) ---------- */
.agregado__producto { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.agregado__producto .foto-pozo { width: 72px; }
.agregado__producto .foto-pozo > img.imagen-sin-foto { width: 64%; }
.agregado__linea { margin-top: 4px; font-size: var(--texto-b); color: var(--gris); }
.agregado__carrito { display: grid; gap: 6px; margin-top: var(--esp-4); padding: 14px var(--esp-4); border-radius: var(--radio); background: var(--crema); font-size: var(--texto-b); }
.agregado__carrito b { font-weight: 500; }
.agregado__minimo { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tinta); }
.agregado__minimo.es-listo { color: var(--ok); }
.agregado__minimo .icono { width: 18px; height: 18px; }
.hoja-agregado .hoja__pie .boton { flex: 1 1 0; }
/* Hasta 419 px "Seguir comprando" no entra en media hoja: los dos a todo el ancho, el principal abajo, bajo el pulgar */
@media (max-width: 419px) { .hoja-agregado .hoja__pie .boton { flex: 1 1 100%; } }

/* ---------- Lista mayorista ---------- */
.mayoristas { padding-bottom: var(--esp-7); }
.mayoristas__cabeza { display: grid; gap: 4px; }
.mayoristas__cabeza .bajada { margin-top: var(--esp-2); }
.mayoristas__fecha { max-width: 40em; font-size: var(--texto-b); color: var(--gris); }
.lista-may { margin-top: var(--esp-5); }
.lista-may__principal { min-width: 0; }
.lista-may__filtros { display: grid; }
.lista-may__filtros .buscador { max-width: 40rem; }
/* ul[role=list] de base.css le saca el relleno a .chips: acá se repone (corre de costado en celular) */
.lista-may__filtros .lista-may__chips { padding: var(--esp-3) var(--lado) var(--esp-2); }
.lista-may__estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--esp-3); }
.lista-may__conteo { font-size: var(--texto-s); color: var(--gris); }
.lista-may__estado .boton--texto { margin-right: -8px; }
.lista-may__encabezado { display: none; }
.lista-may__grupo { margin-top: var(--esp-5); }
.lista-may__grupo > .titulo-chico { padding-bottom: var(--esp-2); }
.lista-may__filas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
/* Fila: foto chica, nombre y código; abajo precio mayorista, minorista y cantidad; el subtotal cuando hay cantidad */
.lista-may__fila {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "f n n" ". p c" ". m m" ". s s";
  gap: 6px 12px; align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--linea);
}
/* Cargada: verde claro, sin raya al costado (Pablo, 20/10/2026) */
.lista-may__fila.es-cargada { background: var(--verde-claro); }
.lista-may__foto { grid-area: f; align-self: start; width: 56px; }
.lista-may__nombre { grid-area: n; display: grid; gap: 2px; min-width: 0; }
.lista-may__nombre a { padding-block: 12px; margin-block: -12px; color: var(--carbon); font: 500 var(--texto-m)/1.3 var(--fuente-cuerpo); text-decoration: none; text-wrap: balance; }
.lista-may__nombre a:hover { text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lista-may__codigo { font-size: var(--texto-s); color: var(--gris); }
.lista-may__quedan { font-weight: 500; color: var(--aviso); }
/* Celular: el precio mayorista al lado de la cantidad y "Minorista $X" en su renglón, sin partir */
.lista-may__precios { display: contents; }
.lista-may__precios .precio { grid-area: p; font-size: var(--texto-l); }
.lista-may__minorista { grid-area: m; margin-top: -4px; font-size: var(--texto-s); color: var(--gris); white-space: nowrap; }
.lista-may__cant { grid-area: c; justify-self: end; }
.lista-may__sin { display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; border: 2px dashed var(--linea-fuerte); border-radius: var(--radio); color: var(--gris); font-size: var(--texto-b); white-space: nowrap; }
.lista-may__fila.es-sin-stock .precio { color: var(--gris); }
.lista-may__sub { grid-area: s; font-size: var(--texto-b); color: var(--ok); }
.lista-may__sub b { font-weight: 500; }
.lista-may__sub:empty { display: none; }
.lista-may__vacia { margin-top: var(--esp-5); }
/* Columna "Tu pedido mayorista" (desde 1024) y barra fija (celular y tablet) */
.lista-may__pedido { display: none; }
.lista-may__items { display: grid; margin: 0; padding: 0; list-style: none; }
.lista-may__items li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding: 6px 0; font-size: var(--texto-b); }
.lista-may__items li span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.lista-may__pedido-vacio { font-size: var(--texto-b); color: var(--gris); }
.lista-may__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linea); font-weight: 500; }
.lista-may__total b { font: 500 var(--texto-l)/1.2 var(--fuente-cuerpo); font-variant-numeric: tabular-nums; }
.lista-may__pedido .medidor__falta { font-size: var(--texto-m); }
.lista-may__pedido-nota { font-size: var(--texto-s); color: var(--gris); }
.lista-may__barra b.es-listo { color: var(--ok); }
@media (min-width: 768px) {
  .lista-may__filtros .lista-may__chips { padding: var(--esp-3) 0 0; }
  .lista-may__estado { margin-top: var(--esp-2); }
  .lista-may__encabezado, .lista-may__fila {
    grid-template-columns: 56px minmax(0, 1fr) 8.5rem 9.25rem 7rem; grid-template-areas: "f n p c s"; column-gap: var(--esp-4);
  }
  .lista-may__encabezado {
    display: grid; margin-top: var(--esp-4); padding: 0 8px var(--esp-2); border-bottom: 1px solid var(--linea-fuerte);
    font-size: var(--texto-s); color: var(--gris);
  }
  .lista-may__encabezado span:first-child { grid-column: 1 / 3; padding-left: 72px; }
  .lista-may__encabezado span:nth-child(2), .lista-may__encabezado span:last-child { text-align: right; }
  .lista-may__encabezado span:nth-child(3) { text-align: center; }
  .lista-may__grupo { margin-top: var(--esp-6); }
  .lista-may__filas { border-top: 0; }
  .lista-may__precios { grid-area: p; display: grid; gap: 2px; justify-items: end; text-align: right; min-width: 0; }
  .lista-may__precios .precio, .lista-may__minorista { grid-area: auto; margin: 0; }
  .lista-may__cant { justify-self: center; }
  .lista-may__sub { justify-self: end; color: var(--carbon); font-size: var(--texto-m); }
  .lista-may__sub .lista-may__calc { display: none; }
  .lista-may__sub:empty { display: block; }
}
@media (min-width: 1024px) {
  .lista-may { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
  .lista-may__pedido {
    display: grid; gap: var(--esp-3); position: sticky; top: 84px; margin-top: 0; padding: 20px;
    border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco);
  }
  .lista-may__pedido > .boton { margin-top: var(--esp-2); }
}
@media (min-width: 1100px) { .lista-may { grid-template-columns: minmax(0, 1fr) 340px; } }
/* Abajo: Cómo pedir (crema), Visitas al local con el formulario (blanco) y Preguntas (blanco, línea arriba) */
.mayoristas__como .titulo-bloque { margin-bottom: var(--esp-5); }
.mayoristas__pasos { display: grid; gap: var(--esp-3); max-width: 46rem; margin: 0; padding: 0; }
.mayoristas__pasos li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.mayoristas__paso-n { font: 700 var(--texto-m)/1.55 var(--fuente-titulos); color: var(--azul); }
.mayoristas__condiciones { max-width: 46rem; margin-top: var(--esp-5); padding-top: var(--esp-5); border-top: 1px solid var(--arena); }
.mayoristas__modo { margin-top: var(--esp-5); }
@media (max-width: 599px) { .mayoristas__modo .boton { width: 100%; } }
.mayoristas__visita-dentro { display: grid; gap: var(--esp-6); }
.mayoristas__visita-texto { display: grid; gap: var(--esp-4); align-content: start; }
.mayoristas__visita-texto p { max-width: 34em; }
.mayoristas__visita-foto { display: none; }
.mayoristas__visita-foto img { width: 100%; max-width: 360px; height: auto; border-radius: var(--radio); }
.mayoristas__visita .formulario-seccion { max-width: none; }
.mayoristas__visita .formulario-seccion > h2 { font: 700 var(--texto-xl)/1.25 var(--fuente-titulos); text-transform: none; }
@media (min-width: 600px) {
  .mayoristas__visita .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-4); }
  .mayoristas__visita .formulario > * { grid-column: 1 / -1; }
  .mayoristas__visita .formulario > .campo:not([data-campo="pesca"]):not([data-campo="mensaje"]) { grid-column: auto; }
}
@media (min-width: 900px) {
  .mayoristas__visita-dentro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .mayoristas__visita-foto { display: block; margin-top: var(--esp-2); }
}
.mayoristas__preguntas { padding-bottom: var(--esp-7); }
.mayoristas__preguntas > h2 { padding-top: var(--esp-7); margin-bottom: var(--esp-3); border-top: 1px solid var(--arena); }
.mayoristas__pregunta { max-width: 56rem; border-bottom: 1px solid var(--linea); }
.mayoristas__pregunta > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 56px; padding: var(--esp-3) 0;
  color: var(--tinta); font: 700 var(--texto-m)/1.35 var(--fuente-titulos); list-style: none; cursor: pointer;
}
.mayoristas__pregunta > summary::-webkit-details-marker { display: none; }
.mayoristas__pregunta > summary .icono { color: var(--azul); transition: transform var(--transicion); }
.mayoristas__pregunta[open] > summary .icono { transform: rotate(180deg); }
.mayoristas__pregunta > p { max-width: 46em; padding-bottom: var(--esp-4); }

/* ---------- Impresión de la lista mayorista (Imprimir lista) ---------- */
@media print {
  .migas { display: none !important; }
  .lista-may { display: block; margin: 0; }
  .lista-may__encabezado, .lista-may__fila { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 7rem; grid-template-areas: "n p p"; padding: 3px 0; }
  .lista-may__encabezado span:first-child { padding: 0; }
  .lista-may__fila { break-inside: avoid; font-size: 10pt; }
  .lista-may__fila.es-cargada { background: none; box-shadow: none; }
  .lista-may__precios { grid-template-columns: 1fr 1fr; justify-items: end; }
  .lista-may__nombre a { color: inherit; text-decoration: none; }
  .lista-may__grupo { margin-top: 10pt; break-inside: auto; }
}