/* La vitrina de logros del panel.
 *
 * Hoja aparte y no `tienda.css`: el panel no carga la tienda, y traerla entera
 * para seis tarjetas serían 200 líneas de estilos de compra en una pantalla
 * donde no se compra nada. Las clases se parecen porque las tarjetas se
 * parecen, pero los estados son otros — acá no hay "no alcanza". */

.rejilla-logros {
  display: grid;
  /* 160px es lo que mide una tarjeta con su condición en dos líneas sin que se
     parta una palabra. `auto-fill` acomoda seis en una pantalla grande y dos
     en un teléfono, sin puntos de corte escritos a mano. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.logro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 12px 14px;
  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);
}

/* Ganada: filo de oro. Puesta: además, brilla. Son dos estados distintos y
   tienen que distinguirse de un vistazo — "la tengo" no es "la llevo". */
.logro.ganado {
  border-color: rgba(212, 168, 67, 0.4);
}

.logro.puesto {
  border-color: rgba(212, 168, 67, 0.75);
  box-shadow: 0 0 0 1px rgba(212, 168, 67, 0.25), 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* Las que faltan se apagan, pero NO se esconden ni se vuelven ilegibles: la
   condición es justamente lo que hay que poder leer. Bajar la opacidad de la
   tarjeta entera dejaría el texto en gris sobre gris, así que se apaga sólo la
   figura. */
.logro.pendiente .figura-logro {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.75;
}

.figura-logro {
  width: 76px;
  height: 76px;
  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-logro.glifo {
  font-size: 2.6rem;
  line-height: 1;
}

.logro h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto);
}

.condicion-logro {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--texto-tenue);
  min-height: 2.2em;
}

/* La barra sólo aparece en las condiciones que se cuentan. Las de puesto de
   ranking no la tienen, porque entre "puesto 40" y "puesto 6" no hay una
   fracción que signifique algo: el puesto depende de los demás. */
.barra-logro {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.barra-logro i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b98f2f, var(--oro, #d4a843));
  transition: width 0.35s ease;
}

.estado-logro {
  font-size: 0.72rem;
  color: var(--texto-tenue);
  min-height: 1.1em;
}

.logro.ganado .estado-logro {
  color: var(--oro, #d4a843);
  font-weight: 600;
}

.logro .accion {
  width: 100%;
  margin-top: 2px;
  /* El relleno lateral y el tamaño bajan respecto del botón común. En un
     teléfono la tarjeta mide 132px y «Ponérmela» necesitaba 128 de texto: el
     botón la recortaba a la mitad de la última sílaba. Con esto entra, y
     entra también «Sacármela», que es la más larga. */
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  /* Al achicar la letra el botón quedaba en 43px de alto. 44 es el objetivo
     táctil por debajo del cual el dedo empieza a fallar, y no vale la pena
     ahorrar un pixel en un botón que se toca. */
  min-height: 44px;
}

/* La cinta de "En uso" se reusa de la tienda; el panel no carga esa hoja, así
   que se define acá también. Dos definiciones de la misma clase en hojas que
   nunca se cargan juntas no chocan, y compartirla obligaría a una tercera hoja
   para dos reglas. */
.vitrina-logros .cinta-item {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1200;
  background: linear-gradient(180deg, #f0cd76, #c99a2e);
}

@media (max-width: 420px) {
  .rejilla-logros {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
  }
  .figura-logro {
    width: 60px;
    height: 60px;
  }
  .logro {
    padding: 13px 9px 12px;
  }
}

/* ------------------------------------------------ cartelera de torneos
 *
 * Vive en esta hoja y no en una propia porque son quince reglas y las dos
 * secciones aparecen juntas en el mismo panel. Una hoja más sería un pedido
 * más en la carga de la página para eso.
 */

.fila-torneo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde-suave);
}

.fila-torneo + .fila-torneo {
  margin-top: 8px;
}

.datos-torneo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* `min-width: 0` para que un nombre largo se corte en vez de empujar al
     botón fuera de la fila. Sin esto, en un teléfono el botón se sale. */
  min-width: 0;
  flex: 1 1 200px;
}

.datos-torneo b {
  color: var(--texto);
  font-size: 0.95rem;
}

.datos-torneo span {
  font-size: 0.78rem;
  color: var(--texto-tenue);
}

.fila-torneo .accion {
  flex: 0 0 auto;
  /* 44px de alto mínimo: es el objetivo táctil por debajo del cual el dedo
     falla, y este botón cobra Leyendas. */
  min-height: 44px;
}

/* ---------------------------------------------------------- mi inventario
 *
 * Vive en esta hoja y no en una propia porque comparte página con la vitrina
 * de logros y con la cartelera de torneos: una hoja más sería un pedido más en
 * la carga del panel para tres bloques que siempre aparecen juntos.
 */

.grupo-inv + .grupo-inv {
  margin-top: 22px;
}

.titulo-grupo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--texto-tenue);
  margin-bottom: 10px;
}

.rejilla-inv {
  display: grid;
  /* 150px es lo que mide una tarjeta con el nombre, la rareza y el botón sin
     que se parta una palabra. `auto-fill` acomoda seis en una pantalla grande
     y dos en un teléfono, sin puntos de corte escritos a mano. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.item-inv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--panel-alto), rgba(12, 12, 14, 0.92));
  border: 1px solid var(--borde-suave);
}

/* Lo que se lleva puesto brilla. Es la diferencia que hay que ver de un
   vistazo en una rejilla de doce cosas iguales. */
.item-inv.puesto {
  border-color: rgba(212, 168, 67, 0.7);
  box-shadow: 0 0 0 1px rgba(212, 168, 67, 0.22);
}

.figura-inv {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  object-fit: contain;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(212, 168, 67, 0.16), transparent 70%);
}

.figura-inv.glifo {
  font-size: 2.3rem;
  line-height: 1;
}

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

/* La rareza lleva su color por atributo `style`, desde el JS: viene del
   catálogo, que se edita desde el panel, y una clase por rareza obligaría a
   tocar esta hoja cada vez que se invente una. */
.rareza {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
}

.desc-inv {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--texto-tenue);
}

.estado-inv {
  font-size: 0.72rem;
  color: var(--texto-tenue);
}

.item-inv.puesto .estado-inv {
  color: var(--oro, #d4a843);
  font-weight: 600;
}

.item-inv .accion {
  width: 100%;
  margin-top: 2px;
  /* Mismo tratamiento que los botones de la vitrina: el relleno lateral y el
     tamaño bajan para que «Desequipar» entre en una tarjeta de teléfono. */
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  min-height: 44px;
}

.vacio-inv {
  font-size: 0.82rem;
  color: var(--texto-tenue);
  padding: 8px 0;
}

@media (max-width: 420px) {
  .rejilla-inv {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
  }
  .figura-inv {
    width: 56px;
    height: 56px;
  }
}

/* ----------------------------------------------------- la tira de sellos

   Va arriba de las insignias y se lee distinto a propósito: son constancias,
   no metas. Sin barra de progreso, sin botón y sin las que no se tienen.

   El `display` lleva su excepción para `[hidden]`: una regla de autor con
   `display` le gana al `[hidden]` de la hoja del navegador, y la tira quedaba
   visible y vacía con el atributo puesto. */
.tira-sellos[hidden] {
  display: none;
}

.tira-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.tira-sellos .sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 168, 67, 0.45);
  background: rgba(212, 168, 67, 0.1);
  font-size: 0.86rem;
}

/* La figura hereda el tamaño de la de una insignia, más chica: acá acompaña
   al nombre en vez de ser el centro de una tarjeta. */
.tira-sellos .figura-logro {
  width: 24px;
  height: 24px;
  font-size: 1.2rem;
  line-height: 1;
}