/* ============================================================
   Memorie Legends — la sección de personalización de la tienda.

   Se apoya en lo que ya existe: `.rejilla`, `.accion`, `.vacio` y los colores
   de `tema.css` vienen de `app.css`. Acá está sólo lo que no había — la ficha
   de un artículo y sus estados— para que la tienda se vea como el resto del
   sitio sin repetir medio archivo de estilos.
   ============================================================ */

/* ------------------------------------------------------ las pestañas */

.pestanas-tienda {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pestanas-tienda button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  /* Alto de dedo: la tienda se mira sobre todo desde el teléfono. */
  min-height: 44px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.pestanas-tienda button:hover {
  color: var(--oro-claro);
  border-color: rgba(212, 168, 67, 0.45);
}

.pestanas-tienda button.activa {
  color: var(--oro-claro);
  background: rgba(212, 168, 67, 0.12);
  border-color: var(--oro);
}

/* La segunda fila: cuál de las cosas del grupo.

   Hereda todo de la primera y se distingue por tamaño, no por color: es la
   misma clase de control y una diferencia de color se leería como una
   diferencia de función. Va pegada a la de arriba —el margen de aquélla se
   anula cuando ésta existe— para que se lean como dos filas de lo mismo y no
   como dos controles sueltos.

   Sin subpestañas el contenedor va con `hidden` y no ocupa nada, así que en
   Avatares y en Paños la tienda se ve exactamente como antes. */
.pestanas-tienda:has(+ .subpestanas-tienda:not([hidden])) {
  margin-bottom: 8px;
}

.subpestanas-tienda {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding-left: 14px;
  border-left: 2px solid rgba(212, 168, 67, 0.25);
}

.subpestanas-tienda button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  min-height: 40px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.subpestanas-tienda button:hover {
  color: var(--oro-claro);
  border-color: rgba(212, 168, 67, 0.45);
}

.subpestanas-tienda button.activa {
  color: var(--oro-claro);
  background: rgba(212, 168, 67, 0.12);
  border-color: var(--oro);
}

/* ------------------------------------------------- la ficha de un artículo */

.rejilla-tienda {
  display: grid;
  /* 170px es lo que mide una ficha con su botón sin que el nombre se parta.
     Con `auto-fill` entran cuatro en una pantalla grande y dos en un teléfono,
     sin un solo punto de corte escrito a mano. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.item-tienda {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 16px;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--panel-alto), rgba(12, 12, 14, 0.92));
  border: 1px solid var(--borde-suave);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.item-tienda:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 168, 67, 0.35);
}

/* Lo que ya es tuyo lleva filo de oro; lo que llevás puesto, además, brilla.
   Son dos estados distintos y tienen que distinguirse de un vistazo: "lo
   tengo" no es lo mismo que "lo tengo puesto". */
.item-tienda.mio {
  border-color: rgba(212, 168, 67, 0.4);
}

.item-tienda.puesto {
  border-color: var(--oro);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 24px -8px var(--oro);
}

.cinta-item {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1206;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
}

/* La figura: una imagen o un glifo, con el mismo hueco para las dos.
   Sin alto fijo, una rejilla con emojis y PNG mezclados queda escalonada. */
.figura-item {
  width: 120px;
  height: 120px;
  /* Aire alrededor del dibujo.

     Desde C2 los avatares llenan su cuadro de punta a punta, y pegados al
     borde de la tarjeta se leen como un recorte y no como una pieza. Con
     `border-box` el relleno se come de los 88 px, así que la caja no
     cambia de tamaño y la rejilla no se mueve: lo único que pasa es que el
     fondo radial dorado se ve alrededor en vez de quedar tapado. */
  box-sizing: border-box;
  padding: 6px;

  display: grid;
  place-items: center;
  object-fit: contain;
  border-radius: 14px;
  /* Un marco fino en vez del esfumado dorado que había.

     El `radial-gradient` existía para despegar del panel un MEDALLÓN que
     ocupaba un tercio de su cuadro. Con bustos que lo llenan, el dibujo tiene
     masa propia y el esfumado sólo ensuciaba las esquinas: a este tamaño
     queda tapado casi entero, así que iluminaba lo que ya no se ve.

     El marco, en cambio, dice dónde termina la pieza. Va sólo acá y en la
     colección —las dos vistas en tarjeta— y NO en los cuatro contenedores
     circulares: ésos ya tienen su propio aro, y un segundo borde sería un
     marco adentro de otro, que es justo lo que el arte nuevo vino a sacar.

     El `border-box` de abajo es lo que hace que el borde se coma de adentro y
     la caja siga midiendo lo mismo: sin eso la rejilla se correría un píxel
     por tarjeta. */
  border: 1px solid rgba(212, 168, 67, 0.35);
}

.figura-item.glifo {
  font-size: 4rem;
  line-height: 1;
}

.item-tienda h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--texto);
}

.descripcion-item {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--texto-tenue);
  /* Dos renglones como máximo: las descripciones las escribe el administrador
     y una larga descuadraría toda la fila de la rejilla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.precio-item {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

.item-tienda .accion {
  width: 100%;
  margin-top: auto;
  padding: 11px 12px;
  font-size: 0.72rem;
}

/* ---------------------------------------------------------- el aviso */

.aviso-tienda {
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.88rem;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.aviso-tienda.visible {
  opacity: 1;
  padding: 12px 16px;
  border-radius: 12px;
}

.aviso-tienda.bien {
  background: rgba(61, 139, 107, 0.14);
  border: 1px solid rgba(61, 139, 107, 0.45);
  color: #9fe0c4;
}

.aviso-tienda.error {
  background: rgba(192, 57, 43, 0.14);
  border: 1px solid rgba(192, 57, 43, 0.45);
  color: #f0b0a8;
}

@media (max-width: 480px) {
  .rejilla-tienda { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  /* 92 y no 120: la tarjeta más angosta de esta rejilla mide 140 y deja 120
     útiles, así que a 120 el dibujo tocaría los dos bordes. */
  .figura-item { width: 92px; height: 92px; }
  .figura-item.glifo { font-size: 3.2rem; }
  .item-tienda { padding: 14px 10px 12px; }
}

/* ---------------------------------------------------------- packs
 *
 * Llevar dos o tres avatares de una descuenta 15% y 25%. La barra aparece sólo
 * cuando hay algo seleccionado: vacía diría "0 artículos, 0 Leyendas", que
 * ocupa el mismo lugar sin decir nada.
 */

.acciones-tienda {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 4px;
}

.acciones-tienda .accion {
  font-size: 0.76rem;
  padding: 9px 14px;
  min-height: 44px;
}

/* El `[hidden]` va explícito porque `display: flex` lo pisa: la regla del
   navegador —`[hidden] { display: none }`— tiene la misma especificidad que
   esta clase, y en un empate gana la hoja del autor. Sin esto, `hidden = true`
   no esconde nada y la barra del pack queda visible y vacía. Esta hoja ya
   tropezó con lo mismo siete veces en otros archivos. */
.resumen-pack[hidden] {
  display: none;
}

.resumen-pack {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(212, 168, 67, 0.07);
  border: 1px solid rgba(212, 168, 67, 0.35);
}

.cuenta-pack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Que el nombre largo se corte en vez de empujar el total y los botones
     fuera de la caja. */
  min-width: 0;
  flex: 1 1 180px;
}

.cuenta-pack b {
  color: var(--oro, #d4a843);
  font-size: 0.85rem;
}

.cuenta-pack span {
  font-size: 0.76rem;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.total-pack {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.total-pack s {
  color: var(--texto-tenue);
  font-size: 0.8rem;
}

.total-pack b {
  color: var(--texto);
  font-size: 1.02rem;
}

.total-pack em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7bd88f;
}

.resumen-pack .accion {
  flex: 0 0 auto;
  min-height: 44px;
  font-size: 0.76rem;
}

/* ═══════════════════════════════════════════ el avatar, en grande

   La ventana la arma `modulos/zoom-avatar.js`. El estilo vive acá y no en
   `app.css` porque hoy sólo la abre la tienda; el día que la abra una segunda
   pantalla, esto se muda con ella. */

/* El botón que envuelve la figura.

   Tiene que no verse: lo que se toca es el dibujo, y un botón con su relleno
   y su borde propios cambiaría el tamaño de la tarjeta. Pero SÍ se ve cuando
   llega el foco por teclado, que es lo único que delata que es tocable para
   quien no usa el mouse. */
.lupa-avatar {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
  border-radius: 14px;
}

.lupa-avatar:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

/* El velo.

   `backdrop-filter` desenfoca lo que hay detrás en vez de taparlo con un negro
   plano: la tienda sigue reconociéndose, y la imagen de arriba se separa sola
   sin tener que oscurecer tanto. El `background` que lo acompaña es apenas un
   velo; el que hace el trabajo es el desenfoque. */
.zoom-avatar {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Sin desenfoque, un fondo oscuro sólido.

   Safari viejo y Firefox con la opción apagada no lo soportan, y ahí el velo
   de 0,45 deja la tienda legible DETRÁS de la imagen, que es exactamente lo
   que el desenfoque venía a evitar. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .zoom-avatar { background: rgba(0, 0, 0, 0.7); }
}

.zoom-caja {
  position: relative;
  /* 320 de PANTALLA, con un archivo de 512: en un teléfono de 3× estos 320
     CSS son 960 píxeles reales, así que el archivo más denso es lo que evita
     que el dibujo se vea blando. Lo que no cambia es este número — subirlo
     agrandaría la ventana, que es otra decisión. Ver `modulos/zoom-avatar.js`. */
  width: min(320px, 100%);
  animation: entrarZoom 0.15s ease-out;
}

.zoom-caja:focus { outline: none; }

.zoom-caja img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes entrarZoom {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Quien pidió menos movimiento no recibe el salto de escala. La ventana
   aparece igual: lo que se saca es el camino, no el destino. */
@media (prefers-reduced-motion: reduce) {
  .zoom-caja { animation: none; }
}

/* La cruz, chica y fuera de la imagen para no taparle una esquina. */
.cerrar-zoom {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: rgba(12, 12, 14, 0.92);
  color: var(--texto-tenue);
  cursor: pointer;
}

.cerrar-zoom:hover { color: var(--oro-claro); border-color: var(--oro); }

.cerrar-zoom:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}