/* ---------- Filtros ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.filtro {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--linea-fuerte);
  background: none;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  cursor: pointer;
}

.filtro[aria-pressed="true"] {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--fondo);
}

/* ---------- Grilla de fichas ---------- */
.fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  align-items: start;
}

.ficha[hidden] { display: none; }

/* ---------- Ficha cerrada (toda la ficha es un solo botón) ---------- */
.ficha__abrir {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  padding: 0 0 0.25rem;
  border: 0;
  border-top: 1px solid var(--linea-fuerte);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ficha__abrir:active .ficha__foto { outline: 1px solid var(--linea-fuerte); }

.ficha__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  min-height: 1.6rem; /* mismo alto con o sin sello: las fichas quedan parejas */
  padding-top: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
}

/* Sello "Más pedido": un dato más de la ficha técnica, no un cartel de oferta */
.sello {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--azul-claro);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--azul-claro);
}

.sello[hidden] { display: none; }

.ficha__foto {
  --acento: var(--azul);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.5rem;
  /* Mientras no haya foto: capas del color de acento */
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--acento) 30%, transparent) 0 2px, transparent 2px 6px),
    rgb(0 0 0 / 0.18);
  overflow: hidden;
  text-align: center;
}

/* Con foto real: la foto llega al borde (sin el margen de las capas) */
.ficha__foto:has(.ficha__img) { padding: 0; }

.ficha__foto picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ficha__foto .ficha__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Producto sin foto (ficha y hoja): un cuadro de relleno con el azul de la marca, sin texto.
   Un tono apenas más claro que el fondo, un borde fino y el triángulo de la marca muy tenue al centro:
   se ve intencional (no como una foto que no cargó) y no compite con las fotos reales. */
.ficha__foto:has(.foto-relleno) {
  padding: 0;
  background: none;
}

.foto-relleno {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--fondo-alto), var(--fondo));
  box-shadow: inset 0 0 0 1px var(--linea);
}

/* El triángulo de la marca, casi transparente: solo una marca de agua */
.foto-relleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/triangulo.svg") center / 22% auto no-repeat;
  opacity: 0.12;
}

.ficha__nombre {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.ficha__precio {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  font-weight: 600;
}

.ficha__adelanto {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.ficha__adelanto i {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--filamento);
  box-shadow: 0 0 0 1px var(--linea-fuerte);
}

.ficha__adelanto b {
  margin-left: 0.2rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--texto-suave);
}

/* ---------- Hoja inferior (ficha abierta) ---------- */
html.con-hoja { overflow: hidden; }

.hoja {
  --acento: var(--azul);
  --margen: 1rem;
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 36rem;
  max-height: 92dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linea-fuerte);
  background-color: var(--fondo);
  background-image: var(--textura);
  color: var(--texto);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hoja--visible { transform: translateY(0); }
.hoja--arrastrando { transition: none; }

.hoja::backdrop { background: rgb(0 8 22 / 0.7); }

@media (prefers-reduced-motion: reduce) {
  .hoja { transition: none; }
}

.hoja__panel {
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
}

.hoja__barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.25rem var(--margen);
  border-bottom: 1px solid var(--linea);
  touch-action: none;
}

/* Rayita de agarre: indica que la hoja se puede bajar */
.hoja__agarre {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 2.5rem;
  height: 3px;
  margin-left: -1.25rem;
  background: var(--linea-fuerte);
}

.hoja__ref {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
}

.hoja__cerrar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.hoja__cerrar svg {
  width: 1.15rem;
  stroke: var(--blanco);
  stroke-width: 1.6;
}

.hoja__contenido {
  display: grid;
  gap: 0.9rem;
  padding: 0 var(--margen) 1.75rem; /* espacio abajo: lo último se lee completo sobre el botón */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Foto grande de lado a lado, con proporción fija para que nada salte al cargar.
   Toma el color elegido que JS pone en la hoja (las capas del fondo cambian con el color). */
/* Siempre cuadrado: de lado a lado en el celular; en pantallas bajas o anchas, más chico y centrado */
.hoja__medios {
  position: relative;
  justify-self: center;
  width: min(calc(100% + var(--margen) * 2), 48dvh);
  aspect-ratio: 1;
  margin-inline: calc(var(--margen) * -1);
}

.hoja__foto {
  --acento: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* ---------- Galería de fotos (js/galeria.js): se desliza con el dedo, una foto a la vez ---------- */
.hoja__foto { position: relative; }

.galeria__pista {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* al llegar a la última no arrastra la página */
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }

.galeria__foto {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* un deslizón = una foto */
}

/* Contador "02 / 05": un dato más de la ficha técnica, en la esquina de la foto */
.galeria__contador {
  position: absolute;
  right: var(--margen);
  bottom: 0.75rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blanco);
  pointer-events: none;
}

/* Flechas: solo con mouse (en el celular se desliza con el dedo) */
.galeria__flecha {
  position: absolute;
  top: 50%;
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo);
  cursor: pointer;
}

.galeria__flecha--antes { left: 0.75rem; }
.galeria__flecha--despues { right: 0.75rem; }
.galeria__flecha svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--blanco); stroke-width: 2; }
.galeria__flecha:disabled { opacity: 0.3; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .galeria__flecha { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__pista { scroll-behavior: auto; }
}

.hoja__titulo {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding-top: 0.35rem;
}

.hoja__nombre {
  font-size: clamp(1.15rem, 5.4vw, 1.6rem);
}

.hoja__precio {
  font-family: var(--f-mono);
  font-size: clamp(1.6rem, 7.5vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
}

.hoja__datos {
  margin: 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.hoja__datos div {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
}

.hoja__datos dt {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.hoja__datos dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.9rem;
}

.hoja__colores {
  margin: 0;
  padding: 0;
  border: 0;
}

.hoja__colores legend {
  padding: 0;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

.hoja__pie {
  padding: 0.75rem var(--margen) max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--fondo);
}

/* Siempre visible abajo (fuera de la parte que se desplaza), de lado a lado y de 60 px */
.hoja__pedir {
  width: 100%;
  min-height: 3.75rem;
  font-size: 1.05rem;
}

/* ---------- Colores (rollos de filamento) ---------- */
.muestras {
  display: grid;
  grid-template-columns: repeat(5, 2.75rem);
  justify-content: space-between;
  gap: 0.75rem 0;
}

.muestra {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  /* Rollo visto de frente: filamento con el hueco del carrete */
  background:
    radial-gradient(circle, var(--fondo) 0 22%, rgb(0 0 0 / 0.25) 22% 26%, transparent 26%),
    repeating-radial-gradient(circle, var(--filamento) 0 2px, color-mix(in srgb, var(--filamento) 82%, black) 2px 3px);
  box-shadow: 0 0 0 1px var(--linea-fuerte);
  cursor: pointer;
}

.muestra:has(input:checked) {
  box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--blanco);
}

.muestra:has(input:focus-visible) {
  outline: 2px solid var(--azul-claro);
  outline-offset: 5px;
}

.muestra input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Mientras llegan los productos se reserva espacio: el pie no salta (CLS) */
.fichas:has(> .cargando) { min-height: 150vh; }

.cargando {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* ---------- Pantallas más anchas: misma ficha, más columnas ---------- */
@media (min-width: 600px) {
  .fichas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }
  .ficha__nombre { font-size: 1rem; }
  .hoja { --margen: 1.5rem; }
}

@media (min-width: 1000px) {
  .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Producto agotado (js/agotados.js) ---------- */
/* Etiqueta en el lenguaje de la ficha técnica: mono, recta, con borde. Nada de círculos ni rojo de oferta */
.sello--agotado {
  border-color: var(--blanco);
  background: var(--blanco);
  color: var(--fondo);
}

.sello--agotado[hidden] { display: none; }

/* La ficha se apaga: capas grises, foto y colores desteñidos, nombre y precio en tono suave.
   Los textos no se transparentan: siguen leyéndose con buen contraste */
.ficha--agotada .ficha__foto { --acento: rgb(255 255 255 / 0.35); }
.ficha--agotada .foto-relleno { opacity: 0.45; }
.ficha--agotada .ficha__img,
.ficha--agotada .ficha__adelanto i { opacity: 0.35; filter: grayscale(1); }
.ficha--agotada .ficha__nombre,
.ficha--agotada .ficha__precio { color: var(--texto-suave); }
.ficha--agotada .ficha__precio { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Hoja de un producto agotado: el aviso ocupa el lugar de los botones */
.hoja__pie[hidden] { display: none; }

.hoja__agotado {
  display: grid;
  gap: 0.2rem;
  min-height: 3.75rem;
  align-content: center;
  border-top: 2px solid var(--blanco);
}

.hoja__agotado-titulo {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hoja__agotado-nota {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}