/* ============================================================
   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: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  object-fit: contain;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(212, 168, 67, 0.16), transparent 70%);
}

.figura-item.glifo {
  font-size: 3rem;
  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; }
  .figura-item { width: 68px; height: 68px; }
  .figura-item.glifo { font-size: 2.4rem; }
  .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;
}