/* ============================================================
   TIPOGRAFÍA
   La fuente está en la carpeta fonts/ del proyecto.
   ============================================================ */

@font-face {
  font-family: "Banana Slip";
  src: url("../fonts/KaiseiOpti-Regular.ttf") format("truetype");
  font-display: swap; /* muestra texto mientras carga la fuente */
}

/* ============================================================
   ESTILOS GENERALES
   Organización: cada bloque de la web tiene su sección.
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Los botones e inputs no heredan la fuente por defecto */
button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  font-family: "Banana Slip", Arial, Helvetica, sans-serif;
  color: #e8e8e8;
  /* La app ocupa exactamente la ventana: nunca scrollea el body,
     solo las zonas internas que lo necesiten.
     Dos columnas: menú lateral fijo + contenido */
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: linear-gradient(180deg, #29aaee 0%, #1670cc 50%, #0a3a8a 100%);
}

/* Patrón animado en diagonal por encima del gradiente.
   Va en position: fixed para que cubra toda la ventana. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/common/bg-pattern.png");
  background-size: 800px 400px;
  background-repeat: repeat;
  animation: fondo-diagonal 30s linear infinite;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0; /* por detrás del contenido, por delante del gradiente */
}

/* Mosaico infinito: se desplaza justo el tamaño de una baldosa,
   así el bucle no da tirón al reiniciarse. */
@keyframes fondo-diagonal {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 800px 400px;
  }
}

/* El menú y el contenido van por encima del patrón */
.menu,
#contenido {
  position: relative;
  z-index: 1;
}

#contenido {
  flex: 1;
  min-width: 0;
  min-height: 0; /* deja que los hijos con scroll funcionen */
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* scroll aquí en las páginas largas */
}

/* En el detalle de jugador el contenido va sin padding, para que
   la columna del personaje se pegue al menú lateral.
   Lleva el #contenido delante para ganar en especificidad. */
#contenido.contenido--sin-padding {
  padding: 0;
}

.pagina__titulo {
  margin-bottom: 20px;
}

/* ============================================================
   MENÚ LATERAL
   Fijo a la izquierda, visible en todas las páginas.
   ============================================================ */

.menu {
  width: 230px;
  flex-shrink: 0;
  padding: 20px 14px;
  background-color: rgba(12, 14, 20, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
}

.menu__titulo {
  font-size: 19px;
  line-height: 1.2;
  padding: 0 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Encabezado de grupo del menú ("Base de datos", "Tier lists"...) */
.menu__seccion {
  font-size: 11px;
  color: #7a8091;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px 8px 6px;
}

.menu__boton {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background-color: transparent;
  color: #e8e8e8;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.15s;
}

.menu__boton:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.menu__boton--activo {
  background-color: #4a6cf7;
}

/* ============================================================
   FILTROS (página de jugadores)
   ============================================================ */

.filtros {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background-color: rgba(18, 20, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.filtros__grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filtros__etiqueta {
  width: 80px;
  font-size: 14px;
  color: #9aa0b0;
}

.filtros__boton {
  padding: 6px 12px;
  background-color: rgba(44, 47, 58, 0.7);
  color: #e8e8e8;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  text-transform: capitalize;
}

.filtros__boton:hover {
  background-color: #3a3e4d;
}

.filtros__boton--activo {
  background-color: #4a6cf7;
}

/* Los botones de posición y elemento son solo el icono, sin fondo */
.filtros__boton:has(.icono-posicion),
.filtros__boton:has(.icono-elemento) {
  background-color: transparent;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 8px;
}

.filtros__boton--activo:has(.icono-posicion),
.filtros__boton--activo:has(.icono-elemento) {
  background-color: transparent;
  border-color: #ffffff; /* el activo se marca con el borde */
}

.filtros__boton .icono-posicion {
  width: 30px;
  height: 19px;
}

/* Buscador por nombre */
.filtros__buscador {
  flex: 1;
  max-width: 280px;
  padding: 7px 14px;
  background-color: rgba(44, 47, 58, 0.7);
  color: #e8e8e8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 14px;
}

.filtros__buscador::placeholder {
  color: #7a8091;
}

.filtros__buscador:focus {
  outline: none;
  border-color: #4a6cf7;
}

/* ============================================================
   TARJETA DE JUGADOR (componente reutilizable)
   Carta cuadrada: imagen a sangre, iconos superpuestos en
   columna arriba a la izquierda y nombre debajo.
   ============================================================ */

.tarjeta-jugador {
  width: 130px;
  background-color: rgba(18, 20, 26, 0.8);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}

.tarjeta-jugador:hover {
  transform: translateY(-2px);
}

/* Marco cuadrado donde va la imagen con los iconos encima.
   El borde grueso es del color de la rareza, algo más saturado
   que el fondo. */
.tarjeta-jugador__marco {
  position: relative;
  aspect-ratio: 1 / 1; /* siempre cuadrado, mida lo que mida */
  border: 5px solid;
  border-radius: 12px;
}

/* Fondos y bordes del marco según la rareza del jugador */
.tarjeta-jugador__marco--1 {
  background: linear-gradient(160deg, #b9bdc7 0%, #878c99 100%);
  border-color: #7b808d;
}

.tarjeta-jugador__marco--2 {
  background: linear-gradient(160deg, #ffe98a 0%, #f6b73c 55%, #ffd75e 100%);
  border-color: #e39c1f;
}

/* Las de 3★ llevan el borde en arcoíris, como en el juego */
.tarjeta-jugador__marco--3 {
  background: linear-gradient(
    160deg,
    #ffd9e8 0%,
    #ffeccb 20%,
    #fdffc4 40%,
    #cfffdd 60%,
    #c9e9ff 80%,
    #e6d4ff 100%
  );
  border-image: linear-gradient(
      160deg,
      #f9a8c8 0%,
      #ffd08a 20%,
      #f2f07a 40%,
      #8fe3a8 60%,
      #8ec9f0 80%,
      #c3a3f0 100%
    )
    1;
  border-radius: 0; /* border-image no admite esquinas redondeadas */
}

.tarjeta-jugador__imagen {
  width: 100%;
  height: 100%;
  object-fit: contain; /* se ve la imagen entera, sin zoom */
  object-position: center bottom; /* apoyada en la base */
  display: block;
  padding: 10px 10px 0; /* aire alrededor: no toca los bordes */
}

/* Columna de iconos superpuesta: elemento, posición, estrellas */
.tarjeta-jugador__iconos {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* todo alineado a la izquierda */
  gap: 3px;
}
.tarjeta-jugador__icono {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tarjeta-jugador__posicion {
  width: 20px;
  height: 12px;
  object-fit: contain;
  object-position: left;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.tarjeta-jugador__estrella {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tarjeta-jugador__nombre {
  padding: 6px 4px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* nombres largos: "Riccardo Di R..." */
}

/* ============================================================
   REJILLA DE JUGADORES (página de jugadores)
   ============================================================ */

.rejilla-jugadores {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.rejilla-jugadores__vacio {
  color: #e8e8e8;
}

/* ============================================================
   TIER LIST
   Estructura: rejilla de 5 columnas
   (etiqueta lateral + una columna por posición DL, MD, DF, PR).
   La cabecera usa la misma rejilla para que las columnas
   queden alineadas con las filas.
   ============================================================ */

/* Rejilla compartida por la cabecera y por cada fila de tier */
.tier-cabecera,
.tier {
  display: grid;
  grid-template-columns: 60px repeat(4, 1fr);
}

/* --- Cabecera con las posiciones --- */

.tier-cabecera {
  margin-bottom: 10px;
}

.tier-cabecera__hueco {
  /* Celda vacía encima de las etiquetas S, A, B... */
}

.tier-cabecera__columna {
  padding: 8px;
  text-align: center;
  font-weight: bold;
  background-color: rgba(18, 20, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin: 0 3px;
}

/* --- Filas de tiers --- */

.tier {
  margin-bottom: 10px;
  background-color: rgba(18, 20, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.tier__etiqueta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  font-size: 24px;
  font-weight: bold;
  color: #1c1e26;
}

.tier__columna {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.08); /* separador */
}

/* --- Efecto "líquido" de la etiqueta de un tier ---
   Dos capas de degradados radiales (una más clara y otra más
   oscura que el color base) que se mueven lentamente en bucle,
   como manchas flotando en un líquido. El color base lo sigue
   poniendo datos.js, así que el efecto vale para cualquier color. */

.tier__etiqueta--liquido {
  background-image:
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.35) 0%,
      /* mancha clara */ transparent 55%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(0, 0, 0, 0.35) 0%,
      /* mancha oscura */ transparent 55%
    );
  background-size: 200% 200%;
  animation: liquido 6s ease-in-out infinite;
  color: #ffffff; /* con este fondo el texto se lee mejor en blanco */
}

@keyframes liquido {
  0% {
    background-position:
      0% 0%,
      100% 100%;
  }
  50% {
    background-position:
      100% 100%,
      0% 0%;
  }
  100% {
    background-position:
      0% 0%,
      100% 100%;
  }
}

/* ============================================================
   DETALLE DE JUGADOR
   Dos columnas: panel del personaje pegado al menú lateral y,
   a la derecha, las pestañas con su contenido.
   El color del elemento llega por la variable --color-elemento,
   que pone PaginaJugador.js a partir de ELEMENTOS (datos.js).
   ============================================================ */

.detalle {
  display: grid;
  grid-template-columns: 300px 1fr; /* personaje | secciones */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Columna izquierda: panel del personaje ---
   Fondo como el del menú lateral, a todo el alto y pegado a él,
   para que se funda con el menú sin dejar de distinguirse */

.personaje {
  background-color: rgba(16, 19, 27, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0; /* pegada al menú: sin esquinas redondeadas */
  height: 100%;
  overflow-y: auto;
}

/* Cabecera: fondo oscuro, solo con los iconos y el personaje */
.personaje__cabecera {
  background-color: rgba(0, 0, 0, 0.25);
  padding: 18px 0 0 18px;
}

.personaje__estrellas {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.personaje__estrella {
  width: 30px;
  height: 30px;
}

/* Iconos a la izquierda, imagen del personaje a la derecha */
.personaje__cuerpo {
  display: flex;
  gap: 8px;
}

.personaje__iconos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personaje__icono {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: contain;
  object-position: left;
}

.personaje__imagen {
  flex: 1;
  min-width: 0;
  height: 230px;
  object-fit: contain; /* imagen completa, sin recortes */
  object-position: right bottom; /* pegada a la esquina inferior derecha */
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

/* Zona de datos: la banda del nombre lleva el color del elemento */
.personaje__info {
  padding: 0;
}

.personaje__nombre {
  padding: 14px 18px 4px;
  background-color: var(--fondo-elemento);
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  /* Contorno negro alrededor de las letras */
  -webkit-text-stroke: 3px #12141a;
  paint-order: stroke fill; /* el contorno va por detrás del relleno */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.personaje__equipo {
  padding: 0 18px 14px;
  background-color: var(--fondo-elemento);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* --- Posición en el campo ---
   Plantilla de 11 casillas: 3 columnas (la del medio más ancha)
   por 5 filas. Los laterales de mediocentro ocupan 2 filas.
   La colocación de cada casilla la pone PaginaJugador.js. */

.campo {
  padding: 16px 18px 18px;
}

.campo__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-rows: repeat(5, 34px);
  gap: 3px;
  padding: 6px;
  background-color: #2b7de0; /* césped azul del juego */
  border: 3px solid #14418f;
  border-radius: 10px;
}

.campo__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: #3b8ef0; /* casilla vacía */
  border: 2px solid #1f63b8;
  border-radius: 5px;
}

/* La letra es un asset de img/common (rankingS/A/B.png) */
.campo__letra {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Casillas con valoración: solo cambia el fondo, la letra la
   pone el asset */
.campo__celda--S {
  background: linear-gradient(180deg, #ffe14d 0%, #f2b705 100%);
  border-color: #b57e00;
}

.campo__celda--A {
  background: linear-gradient(180deg, #b6f24d 0%, #7ed321 100%);
  border-color: #4f9c11;
}

.campo__celda--B {
  background: linear-gradient(180deg, #4de08a 0%, #22b45f 100%);
  border-color: #14803f;
}

/* --- Columna derecha: volver, pestañas y contenido --- */

.detalle__secciones {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 26px;
  overflow: hidden;
}

.detalle__volver {
  align-self: flex-start;
  padding: 8px 18px;
  margin-bottom: 16px;
  background-color: rgba(18, 20, 26, 0.65);
  color: #e8e8e8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; /* botón tipo píldora */
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s;
}

.detalle__volver:hover {
  background-color: rgba(40, 44, 56, 0.8);
}

/* Pestañas: Técnicas / Pasivas / Review */
.pestanas {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.pestanas__boton {
  padding: 9px 20px;
  background-color: rgba(18, 20, 26, 0.6);
  color: #c8ccd8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.pestanas__boton:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.pestanas__boton--activo {
  background-color: var(--color-elemento);
  border-color: var(--color-elemento);
  color: #12141a;
  font-weight: bold;
}

/* Zona donde se pinta la pestaña activa: la única que scrollea */
.detalle__zona {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.detalle__zona::-webkit-scrollbar {
  width: 8px;
}

.detalle__zona::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.detalle__zona::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

/* --- Panel de sección (técnicas, pasivas, review...) --- */

.panel {
  padding: 22px;
  background-color: rgba(18, 20, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Título con cuadradito delante y línea de separación debajo,
   ambos del color del elemento */
.panel__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 18px;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-elemento);
}

.panel__titulo::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--color-elemento);
}

.panel__vacio {
  color: #9aa0b0;
}

/* ============================================================
   TÉCNICAS (detalle de jugador)
   Tarjeta al estilo del juego: fondo del color del elemento de
   la técnica, banda con el nombre, atributos y descripción.
   ============================================================ */

.tecnica {
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden; /* la banda oscura llega a los bordes */
  padding-bottom: 8px; /* el color base asoma bajo la franja blanca */
  /* el background-color lo pone PaginaJugador.js
     según el elemento de la técnica */
}

/* Banda superior: icono del elemento + nombre, sobre el color base */
.tecnica__cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
}

.tecnica__elemento {
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 2px;
}

.tecnica__nombre {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Banda oscura a todo el ancho: tipo + PT + atributos */
.tecnica__cuerpo {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background-color: #16255c; /* azul marino del juego */
}

/* Icono del tipo (el asset ya es circular) */
.tecnica__tipo {
  width: 38px;
  height: 38px;
}

.tecnica__pt {
  font-size: 19px;
  font-weight: bold;
  color: #ffffff;
  margin-right: 4px;
}

/* Zona clara: empieza donde acaban los PT y llega hasta el final.
   El clip-path recorta la esquina inferior izquierda, así la
   diagonal baja de arriba-izquierda a abajo-derecha. */
.tecnica__atributos {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  align-self: stretch;
  margin: -6px -10px -6px 0; /* se come el padding de la banda */
  padding: 8px 12px 8px 28px; /* hueco para la diagonal */
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%);
}

/* Chip de atributo: etiqueta oscura + valor crema */
.tecnica__atributo {
  display: inline-flex;
  font-size: 13px;
  border-radius: 5px;
  overflow: hidden;
}

.tecnica__atributo-etiqueta {
  background-color: #16255c; /* azul marino */
  color: #ffffff;
  padding: 4px 9px;
  font-weight: bold;
}

.tecnica__atributo-valor {
  background-color: #f3efe4; /* crema */
  color: #1c1e26;
  padding: 4px 10px;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Franja blanca de descripción, con el color base como margen */
.tecnica__descripcion {
  background-color: #ffffff;
  color: #1c1e26;
  font-size: 13px;
  padding: 8px 12px;
  margin: 8px 8px 0;
  border-radius: 8px;
}

/* ============================================================
   PASIVAS (detalle de jugador)
   ============================================================ */

.pasiva {
  padding: 14px 16px;
  margin-bottom: 12px;
  background-color: rgba(44, 47, 58, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(255, 255, 255, 0.18); /* marca lateral */
  border-radius: 12px;
}

/* Las de dupe se distinguen con la marca lateral morada */
.pasiva--dupe {
  border-left-color: #6135f2;
}

.pasiva__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pasiva__nombre {
  font-weight: bold;
}

/* Etiqueta "Advanced" / "Advanced+" de las pasivas de dupe */
.pasiva__rango {
  padding: 2px 8px;
  font-size: 12px;
  background-color: #6135f2;
  border-radius: 999px;
}

/* Etiqueta "Nivel 10" de las pasivas base */
.pasiva__nivel-base {
  font-size: 11px;
  color: #9aa0b0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Selector de nivel (1 / 2 / 3), pegado a la derecha */
.pasiva__niveles {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pasiva__nivel {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.07);
  color: #c8ccd8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.pasiva__nivel:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.pasiva__nivel--activo {
  background-color: #6135f2;
  border-color: #6135f2;
  color: #ffffff;
}

.pasiva__descripcion {
  font-size: 14px;
  color: #c8ccd8;
  white-space: pre-line; /* respeta los saltos de línea (\n) del texto */
}

/* ============================================================
   REVIEW (detalle de jugador)
   ============================================================ */

.review {
  display: grid;
  grid-template-columns: 1fr 1fr; /* pros | contras */
  gap: 14px;
}

.review__bloque {
  padding: 14px 16px;
  background-color: rgba(44, 47, 58, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid;
  border-radius: 12px;
}

.review__bloque--pros {
  border-left-color: #4ade80;
}

.review__bloque--contras {
  border-left-color: #ff6b6b;
}

.review__titulo {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.review__bloque--pros .review__titulo {
  color: #4ade80;
}

.review__bloque--contras .review__titulo {
  color: #ff6b6b;
}

.review__lista {
  padding-left: 18px;
  font-size: 14px;
  color: #c8ccd8;
}

.review__lista li {
  margin-bottom: 5px;
}

/* Conclusión final, debajo de pros y contras */
.review__veredicto {
  margin-top: 14px;
  padding: 14px 16px;
  font-size: 14px;
  background-color: rgba(97, 53, 242, 0.18);
  border: 1px solid rgba(97, 53, 242, 0.5);
  border-radius: 12px;
}

/* ============================================================
   ETIQUETAS (posición, elemento, rareza)
   ============================================================ */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.25);
}

/* El color del texto y del borde de la posición los pone
   EtiquetaPosicion.js a partir de POSICIONES (datos.js) */
.etiqueta--posicion {
  font-weight: bold;
}

.etiqueta--rareza {
  color: #facc15;
}

/* ============================================================
   ICONOS DE ELEMENTO Y POSICIÓN
   (filtros, tarjetas, ficha de jugador, tier list...)
   ============================================================ */

.icono-elemento {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.icono-posicion {
  width: 38px; /* hueco fijo, la imagen se ajusta dentro */
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* En la cabecera de la tier list, algo más grandes */
.tier-cabecera__columna .icono-posicion {
  width: 46px;
  height: 28px;
}