/* Una presentación distinta de los mismos componentes y controles de compra. */
.cargando[hidden] { display: none; }
.ficha, .ficha:visited { color: var(--texto); text-decoration: none; }
/* Reserva el espacio durante la espera real; el anuncio usa el indicador común. */
.carga-tienda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  width: 100%;
  margin-block: 1rem;
}
.carga-tienda__tarjeta {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--fondo-elevado);
}
.carga-tienda__foto,
.carga-tienda__lineas {
  background: var(--fondo-hundido);
  animation: tienda-espera 1.4s ease-in-out infinite alternate;
}
.carga-tienda__foto { aspect-ratio: 1; }
.carga-tienda__lineas { height: 2.5rem; margin: 1rem; border-radius: .35rem; }
.carga-tienda--producto .carga-tienda__tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  background: transparent;
  border: 0;
}
.carga-tienda--producto .carga-tienda__lineas { height: 12rem; }
.carga-catalogo { grid-column: 1 / -1; list-style: none; }
#productos[aria-busy="true"] > :not(.carga-catalogo) { opacity: .45; }
@keyframes tienda-espera { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 600px) {
  .carga-tienda--producto .carga-tienda__tarjeta { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .carga-tienda__foto, .carga-tienda__lineas, .cargando::before { animation: none; }
}
/* Misma utilidad que el panel: se anuncia sin pintar texto debajo del catálogo. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.negocio__inicio {
  display: inline-flex;
  flex: none;
  border-radius: var(--radio-chico);
}
.negocio__inicio[hidden] {
  display: none;
}
.tienda-en-pagina #contenido > :not(.tienda-pagina) {
  display: none;
}
.tienda-pagina.modal {
  position: static;
  padding: 0;
  background: transparent;
  display: block;
  z-index: auto;
}
.tienda-pagina[hidden] {
  display: none;
}
.tienda-pagina > .modal__panel {
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: none;
}
.tienda-pagina .modal__cerrar {
  position: static;
  width: auto;
  height: auto;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.tienda-pagina .modal__titulo {
  padding-right: 0;
}
.tienda-pagina #modal-cuerpo {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.tienda-pagina .galeria__pieza {
  min-width: 0;
}
.ficha-producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.ficha-producto__informacion,
.galeria-producto,
.ficha-datos {
  min-width: 0;
}
.galeria-producto__principal {
  position: relative;
}
.galeria-producto__medio {
  aspect-ratio: 1;
  object-fit: contain;
}
.galeria-producto__principal .galeria__ampliar {
  width: 44px;
  height: 44px;
}
.galeria-producto__miniaturas {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.25rem;
  margin-top: 0.75rem;
}
.galeria-producto__miniatura {
  flex: 0 0 80px;
  position: relative;
  height: 96px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--borde);
  border-radius: 0.65rem;
  background: var(--fondo-hundido);
  color: var(--texto);
  cursor: pointer;
}
.galeria-producto__miniatura[aria-pressed="true"] {
  border-color: var(--accion);
  box-shadow: 0 0 0 1px var(--accion);
}
.galeria-producto__miniatura img,
.galeria-producto__fotograma {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.galeria-producto__tipo {
  position: absolute;
  inset: auto 0 0;
  padding: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.25;
  background: #211a1d;
  color: #fff;
}
.galeria-producto__reproducir {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #211a1de6;
  color: #fff;
}
.galeria-producto__contador {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--texto-tenue);
}
.ficha-resenas,
.ficha-relacionados {
  grid-column: 1 / -1;
  margin-top: 2rem;
  min-width: 0;
}
.ficha-relacionados .productos {
  margin-top: 1rem;
}
.resenas__resumen {
  display: flex;
  gap: 1.5rem;
  align-items: start;
  flex-wrap: wrap;
}
.resenas__promedio {
  font-size: 1.3rem;
  font-weight: 650;
}
.resenas__distribucion {
  min-width: min(100%, 18rem);
}
.resenas__distribucion > div {
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  gap: 0.5rem;
  align-items: center;
}
.resenas__distribucion dd {
  margin: 0;
  text-align: end;
}
.resenas__distribucion meter {
  width: 100%;
}
.resenas__acceso {
  padding-block: 1rem;
}
.resena {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--borde, currentColor);
  overflow-wrap: anywhere;
}
.resena h3 {
  margin: 0 0 0.4rem;
}
.resena__verificada {
  font-weight: 600;
}
.resena__texto {
  white-space: pre-wrap;
}
.resenas__medios {
  max-width: 34rem;
}
.resena-editor {
  max-width: 42rem;
}
.resena-editor fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}
.resena-editor legend {
  font-size: 1.2rem;
  font-weight: 600;
  margin-block: 1rem;
}
.resena-editor .campo {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.resena-editor textarea,
.resena-editor select {
  width: 100%;
  font: inherit;
  padding: 0.75rem;
  color: inherit;
  background: var(--fondo);
  border: 1px solid var(--borde, currentColor);
  border-radius: 0.5rem;
}
.resena-rating__opciones { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.resena-rating__estrella {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  font-size: 2rem;
  cursor: pointer;
}
.resena-rating__estrella input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.resena-rating__estrella:focus-within,
.resena-subida__accion:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.resena-rating__llena { color: var(--accion); background: var(--accion-suave); border-color: var(--accion); }
.resena-rating__estrella:has(input:checked) { outline: 2px solid var(--accion); outline-offset: -3px; }
.resena-rating__cero { font-size: 1rem; margin-right: 0.5rem; }
.resena-rating__valor { margin-block: 0.5rem; }
.resena-rating > .boton { margin-bottom: 1.25rem; }
/* GaleriaMedios del panel: selector nativo etiquetado, zona de arrastre y
   miniaturas. Se conserva el transporte de reseñas ya existente. */
.resena-subida {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--borde-control);
  border-radius: var(--radio-chico);
}
.resena-subida--arrastrando { background: var(--accion-suave); border-color: var(--accion); }
.resena-subida__accion { position: relative; width: fit-content; max-width: 100%; text-align: center; white-space: normal; }
.resena-subida__accion input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.resena-subida__accion:has(input:disabled) { opacity: 0.65; cursor: not-allowed; }
.resena-subida__pista { margin: 0; }
.resena-editor__archivos {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
}
.resena-editor__archivos li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  overflow-wrap: anywhere;
}
.resena-editor__miniatura { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: var(--radio-chico); background: var(--fondo-hundido); }
.resena-editor__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 0;
  background: var(--fondo);
}
@media (min-width: 900px) {
  .ficha-producto--con-medios {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  #carrito.tienda-pagina > .modal__panel {
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* TIENDA-BUSCADOR-01: cabecera compartida por catálogo, ficha y compra. */
.busqueda-tienda {
  width: 100%;
  min-width: 0;
}
.busqueda-tienda .barra {
  margin-bottom: var(--esp-1);
}
.busqueda-tienda .pista {
  margin: 0;
}

/* CLIENTE-CANALES-01 · La cartera conserva los controles y colores de Mi cuenta. */
.puntos-tienda {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
.puntos-tienda > .cuenta-tienda__titulo,
.puntos-tienda > p {
  margin: 0;
}
.puntos-tienda__seccion,
.puntos-tienda .cuenta-tienda__tarjeta {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.puntos-tienda__seccion > *,
.puntos-tienda .cuenta-tienda__tarjeta > * {
  margin-block: 0;
}
.puntos-tienda__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.puntos-tienda__acciones > .boton {
  margin: 0;
}
/* El mismo patrón de «En esta página» del panel, sin dependencias de Angular.
   La cabecera pública no es fija: la tira se pega al borde de la pantalla. */
.puntos-tienda__indice {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  align-self: start;
  gap: 0.5rem;
  min-width: 0;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.puntos-tienda__indice-rotulo {
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-tenue);
}
.puntos-tienda__indice-lista {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.puntos-tienda__indice-lista::-webkit-scrollbar { display: none; }
.puntos-tienda__indice-lista > li { flex: none; }
.puntos-tienda__indice-enlace,
.puntos-tienda__indice-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  background: var(--fondo-elevado);
  color: var(--texto);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.puntos-tienda__indice-enlace[aria-current="location"] {
  border-color: var(--accion);
  color: var(--accion);
  box-shadow: inset 0 0 0 1px var(--accion);
}
.puntos-tienda__indice-flecha {
  flex: none;
  padding: 0;
  font-size: 1.5rem;
  cursor: pointer;
}
.puntos-tienda__seccion > h2:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 4px;
  border-radius: 0.25rem;
}
.puntos-tienda__saldo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 1rem;
  align-items: baseline;
}
.puntos-tienda__saldo dd {
  margin: 0;
  text-align: end;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.puntos-tienda__progreso {
  font-size: 1.2rem;
  font-weight: 600;
}
.puntos-tienda__actividad {
  padding-inline-start: 1.2rem;
}
.puntos-tienda__actividad li {
  margin-block: 0.8rem;
  overflow-wrap: anywhere;
}
.puntos-tienda__selector {
  display: grid;
  gap: 1rem;
  max-width: 32rem;
}
.puntos-tienda__selector label {
  display: grid;
  gap: 0.4rem;
}
.puntos-tienda__selector input,
.puntos-tienda__selector select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}
.puntos-tienda__vale {
  overflow-wrap: anywhere;
}
.puntos-tienda__qr {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-block: 1rem;
  background: #fff;
}
@media (max-width: 420px) {
  .puntos-tienda__saldo { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .puntos-tienda__saldo dd { text-align: start; margin-bottom: 0.75rem; }
}

.bloque--coleccion { display: grid; gap: 1rem; }
.bloque--coleccion > .rejilla { width: 100%; }
.coleccion-cabecera { display: grid; gap: 1rem; margin-block: 1.5rem; }
.coleccion-cabecera__portada { width: 100%; max-height: 24rem; object-fit: cover; border-radius: var(--radio-chico); }
.coleccion-cabecera[hidden] { display: none; }

.tienda-en-coleccion #escaparate, .tienda-en-coleccion #destacados { display: none; }