/* ============================================================
   DETALLE DE JUGADOR
   Cabecera ancha arriba (estética de las cartas del juego: rayo del
   elemento de fondo, retrato a la izquierda y nombre en grande) y
   debajo, a todo el ancho, las pestañas con su contenido.
   El color del elemento llega por las variables --color-elemento y
   --fondo-elemento, que pone PaginaJugador.js desde ELEMENTOS.
   ============================================================ */

.detalle {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
   CABECERA DEL PERSONAJE (banda ancha de arriba)
   ------------------------------------------------------------ */

.cabecera {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 48px; /* aire entre el retrato y la información */
  min-height: 268px;
  max-height: 460px; /* punto de partida de la animación de plegado */
  padding: 18px 26px 0 22px;
  overflow: hidden;
  border-bottom: 3px solid var(--color-elemento);
  /* Al scrollear se pliega hacia arriba (ver .detalle--compacto) */
  transition:
    max-height 0.28s ease,
    min-height 0.28s ease,
    padding 0.28s ease,
    opacity 0.2s ease;
  /* Fondo neutro y SEMITRANSPARENTE, como los paneles de las secciones:
     deja ver el azul del fondo de la web por detrás. */
  background: linear-gradient(
    180deg,
    rgba(22, 22, 22, 0.74) 0%,
    rgba(27, 27, 27, 0.74) 100%
  );
}

/* CABECERA PLEGADA: al scrollear un poco hacia abajo se esconde hacia
   arriba y deja la barra de botones arriba del todo; al volver al
   principio del scroll reaparece. La clase la pone/quita PaginaJugador.js
   (montarCabeceraColapsable) y SOLO en escritorio.
   OJO: hay que anular también min-height; si no, gana sobre max-height y
   la cabecera no se pliega. */
.detalle--compacto .cabecera {
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
}

/* Rayo del elemento: arranca en el borde izquierdo, por DETRÁS del
   personaje, y cruza toda la cabecera */
.cabecera__rayo {
  position: absolute;
  left: 0;
  /* Anclado abajo: el rayo es más alto que la cabecera y así se recorta
     por arriba, dejando ver la punta bajando hacia la derecha */
  bottom: 12%;
  width: 80%;
  height: auto;
  opacity: 1; /* a todo color: la transparencia va en el fondo, no aquí */
  pointer-events: none;
  user-select: none;
}

/* Retrato: pegado abajo a la izquierda, por encima del rayo */
.cabecera__retrato {
  position: relative;
  z-index: 1;
  height: 248px;
  width: auto;
  max-width: 32%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

.cabecera__info {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding-bottom: 22px;
}

.cabecera__estrellas {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.cabecera__estrella {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Nombre en dos capas: el ::before pinta el contorno grueso por
   detrás y el <span> el relleno con el degradado. Van separados
   porque background-clip:text y -webkit-text-stroke no se pueden
   combinar en el mismo elemento. */
.cabecera__nombre {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.cabecera__nombre::before {
  content: attr(data-nombre);
  position: absolute;
  left: 0;
  top: 0;
  color: #1b1b1b;
  -webkit-text-stroke: 9px #1b1b1b;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.55);
}

/* Relleno: fade MUY suave de blanco al color del elemento */
.cabecera__nombre-texto {
  position: relative;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 52%,
    var(--color-elemento) 112%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fila de elemento, posición, escudo y equipo */
.cabecera__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cabecera__icono {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.cabecera__icono--elemento {
  width: 40px;
  border-radius: 9px;
}

.cabecera__escudo {
  height: 46px;
  width: 46px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.cabecera__equipo {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* --- 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: 0;
}

/* TAMAÑO FIJO A PROPÓSITO: antes las columnas iban en fr y el campo se
   estiraba o encogía según el hueco que le tocara, así que cambiaba de
   tamaño al moverlo de sitio. Ahora las medidas están congeladas en px.
   CUIDADO CON LA CUENTA (aquí se falló una vez y las casillas se salían
   por la derecha): con box-sizing:border-box el width INCLUYE borde y
   padding, así que
     width = 2*borde(3) + 2*padding(7) + columnas + huecos
           = 6 + 14 + (46+76+46) + (2*4) = 196
   Si se retocan las columnas o el gap, recalcular el width con esa
   fórmula, si no el césped se queda corto por un lado. */
.campo__rejilla {
  display: grid;
  grid-template-columns: 46px 76px 46px;
  grid-template-rows: repeat(5, 32px);
  gap: 4px;
  padding: 7px;
  background-color: #2a2a2e; /* césped (tema negro) */
  border: 3px solid #141416;
  border-radius: 10px;
  width: 196px;
  max-width: 100%;
  margin: 0 auto;
}

.campo__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: #3d3d43; /* casilla vacía */
  border: 2px solid #1c1c20;
  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;
}

/* Los laterales de mediocentro ocupan 2 filas: se limita la letra a la
   altura de una casilla normal (24px) para que no salga gigante al lado
   de las demás */
.campo__celda--alta .campo__letra {
  max-height: 24px;
}

/* 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;
  flex: 1; /* ocupa lo que quede bajo la cabecera */
  min-height: 0;
  /* SIN padding abajo: dejaba una franja de fondo bajo el punto donde se
     corta el contenido y parecía un borde raro. El aire del final del
     scroll lo pone .detalle__zona con su padding-bottom, ya por dentro. */
  padding: 22px 26px 0;
  overflow: hidden;
}

/* Fila de arriba: botón de volver + minicabecera. La altura la marca el
   botón; la minicabecera se mete en el hueco sobrante sin agrandarla. */
.detalle__superior {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
}

.detalle__volver {
  align-self: center;
  flex-shrink: 0;
  padding: 8px 18px;
  background-color: rgba(18, 18, 18, 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(38, 38, 38, 0.8);
}

/* ------------------------------------------------------------
   MINICABECERA (resumen que sale al plegar la cabecera grande)
   Mismo contenido que la cabecera menos el retrato, en pequeño.
   ------------------------------------------------------------ */

.minicabecera {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px; /* la del botón de volver: la fila NO crece */
  padding: 0 14px;
  overflow: hidden;
  border-radius: 10px;
  border-bottom: 2px solid var(--color-elemento);
  background: linear-gradient(
    180deg,
    rgba(22, 22, 22, 0.74) 0%,
    rgba(27, 27, 27, 0.74) 100%
  );
  /* Oculta mientras la cabecera grande está desplegada */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
}

.detalle--compacto .minicabecera {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Rayo de fondo: igual que en la cabecera, pegado a la izquierda y por
   detrás de todo */
/* OJO: aquí se escala por ALTURA y no por anchura como en la cabecera
   grande. El png del rayo es muy apaisado (1333x378, ratio 3.5), así que
   un width en % sobre una barra de 1000px y pico lo hacía 4 veces más
   alto que la barra y se comía el nombre. Con height se controla lo que
   asoma; el ancho sale solo. */
.minicabecera__rayo {
  position: absolute;
  left: 0;
  bottom: 10%;
  height: 150%;
  width: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* Nombre: mismas dos capas que la cabecera (::before con el contorno y
   el <span> con el degradado), pero a escala pequeña */
.minicabecera__nombre {
  position: relative;
  z-index: 1;
  flex-shrink: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minicabecera__nombre::before {
  content: attr(data-nombre);
  position: absolute;
  left: 0;
  top: 0;
  color: #1b1b1b;
  -webkit-text-stroke: 4px #1b1b1b;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.minicabecera__nombre-texto {
  position: relative;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 52%,
    var(--color-elemento) 112%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.minicabecera__estrellas {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.minicabecera__estrella {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.minicabecera__icono {
  position: relative;
  z-index: 1;
  height: 22px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.minicabecera__icono--elemento {
  width: 22px;
  border-radius: 5px;
}

.minicabecera__escudo {
  position: relative;
  z-index: 1;
  height: 26px;
  width: 26px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.minicabecera__equipo {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pestañas: botones cuadrados juntos con icono y color del elemento.
   .pestanas es solo el contenedor (en móvil, además, la barra sticky con
   su fondo y su aire) y .pestanas__fila es la fila redondeada con los
   botones. Van separados para que el fondo del botón activo llegue hasta
   los bordes de la fila y no quede un recuadro suelto dentro de una caja
   mayor, que es lo que pasaba en móvil. */
.pestanas {
  margin-bottom: 16px;
}

.pestanas__fila {
  display: flex;
  gap: 0; /* pegados entre sí */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pestanas__boton {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  background-color: #171717; /* opaco: si no, se ve el azul del fondo */
  color: #d0d0d0;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06); /* separador */
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.15s;
}

.pestanas__boton:last-child {
  border-right: none;
}

/* Hover: simplemente se oscurece */
.pestanas__boton:hover {
  background-color: #101010;
}

/* Activo: fondo un poco más claro y línea del color del elemento.
   OJO: el fondo tiene que ser OPACO. Con un blanco translúcido se
   transparentaba el azul del fondo de la web y quedaba azul chillón. */
.pestanas__boton--activo {
  background-color: #292929;
  border-bottom-color: var(--color-elemento);
  color: #fff;
}

.pestanas__boton--activo:hover {
  background-color: #323232;
}

/* Cuadradito del icono, pintado con el color del elemento */
.pestanas__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: var(--color-elemento);
  color: #121212;
}

.pestanas__icono svg {
  width: 20px;
  height: 20px;
}

.pestanas__texto {
  text-align: center;
  line-height: 1.15;
}

/* Zona con scroll donde se apilan las secciones (la única que scrollea
   en escritorio) */
.detalle__zona {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 28px; /* aire para que Pasivas no quede pegada abajo */
}

.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, 18, 18, 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 debajo, del color del
   elemento del jugador */
.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: #a5a5a5;
}

/* ------------------------------------------------------------
   TÉCNICAS
   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: #2e2e2e; /* 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: #2e2e2e; /* azul marino */
  color: #ffffff;
  padding: 4px 9px;
  font-weight: bold;
}

.tecnica__atributo-valor {
  background-color: #f3efe4; /* crema */
  color: #1a1a1a;
  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: #1a1a1a;
  font-size: 13px;
  padding: 8px 12px;
  margin: 8px 8px 0;
  border-radius: 8px;
}

/* ------------------------------------------------------------
   PASIVAS
   ------------------------------------------------------------ */

/* Card de pasiva al estilo del juego: banda violeta con el nombre
   (con el patrón del fondo a poca escala) y cuerpo oscuro casi negro
   con la descripción. */
.pasiva {
  display: flex; /* [lomo?] [contenido] */
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden; /* recorta las esquinas de las bandas */
  background-color: #111111; /* casi negro */
}

/* Las de dupe llevan lomo lateral, así que se les fija una altura
   mínima para que quepa el texto girado */
.pasiva--dupe {
  min-height: 116px;
}

.pasiva__contenido {
  flex: 1;
  min-width: 0; /* que el texto pueda envolver */
  display: flex;
  flex-direction: column;
}

/* Banda violeta con el nombre, con el patrón del fondo a poca escala */
.pasiva__banda {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background-color: #5b34d6;
  background-image: url("../img/common/bg-pattern.png");
  background-size: 120px;
  background-blend-mode: soft-light;
}

.pasiva__nombre {
  font-weight: bold;
  color: #fff;
}

/* Cuerpo oscuro con la descripción */
.pasiva__cuerpo {
  padding: 12px 14px;
  background-color: #111111;
}

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

/* Lomo lateral de las de dupe: franja violeta gorda con el rango
   escrito en vertical (ADVANCED / ADVANCED+) */
.pasiva__lomo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  background-color: #5b34d6;
  background-image: url("../img/common/bg-pattern.png");
  background-size: 120px;
  background-blend-mode: soft-light;
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* se lee de abajo a arriba */
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}

/* Chapitas de atributo de la pasiva (Acumulativa / Debuff).
   Antes esto iba escrito dentro del nombre entre paréntesis; ahora es un
   dato (pasiva.atributos) y se pinta como etiqueta al lado del nombre. */
.pasiva__attr {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

/* Acumulativa: ámbar. Debuff: rojo. Sobre la banda violeta se leen bien. */
.pasiva__attr--acumulativa {
  background-color: rgba(255, 176, 32, 0.22);
  border-color: rgba(255, 196, 90, 0.8);
  color: #ffd79a;
}

.pasiva__attr--debuff {
  background-color: rgba(255, 70, 70, 0.22);
  border-color: rgba(255, 120, 120, 0.8);
  color: #ffbcbc;
}

/* Etiqueta "Nivel 10" de las base (a la derecha de la banda) */
.pasiva__nivel-base {
  margin-left: auto;
  font-size: 11px;
  color: #f0ecff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

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

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

.pasiva__nivel:hover {
  background-color: rgba(0, 0, 0, 0.45);
}

.pasiva__nivel--activo {
  background-color: #fff;
  border-color: #fff;
  color: #5b34d6;
  font-weight: bold;
}

/* ------------------------------------------------------------
   REVIEW
   ------------------------------------------------------------ */

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

.review__bloque {
  padding: 14px 16px;
  background-color: rgba(41, 41, 41, 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: #d0d0d0;
}

.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;
}

/* ---- Tabla de estadísticas ---- */
.stats-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.stats-toggle__boton {
  padding: 7px 18px;
  background-color: rgba(18, 18, 18, 0.6);
  color: #d0d0d0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
}

.stats-toggle__boton:hover {
  background-color: rgba(8, 8, 8, 0.85);
}

.stats-toggle__boton--activo {
  background-color: var(--color-elemento);
  border-color: var(--color-elemento);
  color: #121212;
  font-weight: bold;
}

/* La sección de Estadísticas va partida: tabla | campo de posiciones.
   Reparto 70/30 (antes 50/50): la tabla necesita el sitio y el campo
   tiene ancho fijo, así que con 30 le sobra. */
.stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
  gap: 24px;
  align-items: center;
}

.stats-layout__campo.campo {
  padding: 0;
}

/* Dos columnas para que quede compacto y el valor no quede lejísimos
   del nombre del stat */
.stats-tabla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stats-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background-color: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--color-elemento);
  border-radius: 8px;
}

.stats-fila__icono {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.stats-fila__nombre {
  color: #d0d0d0;
  font-weight: 600;
  font-size: 14px;
}

.stats-fila__valor {
  margin-left: auto;
  color: var(--color-elemento);
  font-weight: bold;
}

/* ---- Resumen de aportes (bajo las pasivas) ---- */
.aportes {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

.aportes__titulo {
  margin: 0 0 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}

.aportes__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.aportes__col {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
}

.aportes__cab {
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.aportes__vacio {
  color: #858585;
  text-align: center;
  margin: 0;
}

.aportes__bloque {
  margin-bottom: 10px;
}

.aportes__bloque--total {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
}

.aportes__sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a5a5a5;
  margin-bottom: 4px;
}

.aportes__bloque--total .aportes__sub {
  color: var(--color-elemento);
}

.aportes__cond {
  font-size: 11px;
  color: #c9b8ff;
  font-style: italic;
  margin: 6px 0 2px;
}

/* La condición puede llevar el icono del elemento en medio del texto */
.aportes__cond-texto {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.aportes__linea {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 1px 0;
}

/* Etiqueta de un efecto: texto + iconos de posición y elemento.
   La comparte la ficha con el comparador (la pinta PaginaJugador). */
.etiqueta-efecto {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.etiqueta-efecto__icono {
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

/* Los iconos de posición (DC/MC/DF/POR) son apaisados */
.etiqueta-efecto__icono--pos {
  width: 26px;
  height: 16px;
}

.etiqueta-efecto__icono--elem {
  width: 17px;
  height: 17px;
  border-radius: 4px;
}

/* Icono del atributo (stat o potencia de técnica). Sustituye al texto,
   así que va algo más grande que los de posición/elemento. */
.etiqueta-efecto__icono--stat {
  width: 21px;
  height: 21px;
}

.etiqueta-efecto__grupo {
  font-size: 11px;
  color: #a5a5a5;
}

/* Caja de lo que aportan las pasivas de dupe (Advanced / Advanced+):
   fondo violeta suave, igual que la banda de las pasivas */
.aportes__dupe {
  background: rgba(91, 52, 214, 0.18);
  border-left: 2px solid rgba(140, 105, 255, 0.55);
  border-radius: 6px;
  padding: 5px 8px 6px;
  margin: 4px 0 6px;
}

.aportes__rango {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c9b8ff;
  margin-bottom: 2px;
}

/* Marca de pasiva acumulativa (el efecto se apila cada vez que salta) */
.aportes__acumulable {
  font-size: 10px;
  font-style: italic;
  color: #c9b8ff;
}

.aportes__valor {
  font-weight: bold;
  color: #7fe0a8;
  white-space: nowrap;
}

.aportes__valor--neg {
  color: #f2887a;
}

/* ------------------------- MÓVIL ------------------------- */

@media (max-width: 900px) {
  .aportes__cols {
    grid-template-columns: 1fr;
  }
  /* Los botones de sección se quedan fijos arriba al scrollear.
     El padding superior es el aire que los separa del borde de la
     pantalla cuando la barra ya está pegada arriba: antes quedaban
     pegadísimos al header y se veía mal. El fondo cubre esa franja. */
  .pestanas {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: rgba(17, 17, 17, 0.97);
    padding: 12px 0 10px;
    margin: 0 0 12px;
  }

  .pestanas__fila {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  /* Al saltar a una sección, que no quede tapada por la barra */
  .detalle__zona .panel {
    scroll-margin-top: 96px;
  }

  /* Una sola columna: cabecera arriba, secciones debajo */
  .detalle {
    display: block;
    overflow-y: auto; /* scrollea la página entera */
    /* Aire abajo: que la info no quede pegada al borde ni la tapen
       los botones táctiles del móvil */
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  /* Cabecera: retrato e info uno al lado del otro, el campo debajo */
  .cabecera {
    flex-wrap: wrap;
    gap: 22px; /* aire entre retrato e info, como en escritorio */
    min-height: 0;
    max-height: none;
    padding: 12px 14px 0;
  }

  /* En móvil la cabecera no se pliega, así que la minicabecera no llega a
     verse nunca: fuera del todo, que no ocupe sitio en la fila. */
  .minicabecera {
    display: none;
  }

  /* En móvil NO se pliega: la cabecera ya se va sola al scrollear la
     página y la barra de botones se queda sticky. Si se plegara además,
     el contenido pegaría un salto bajo el dedo. */
  .detalle--compacto .cabecera {
    min-height: 0;
    max-height: none;
    padding: 12px 14px 0;
    border-bottom-width: 3px;
    opacity: 1;
  }

  .cabecera__rayo {
    width: 80%;
  }

  .cabecera__retrato {
    height: 168px;
    max-width: 42%;
  }

  .cabecera__info {
    padding-bottom: 12px;
  }

  .cabecera__estrella {
    width: 22px;
    height: 22px;
  }

  .cabecera__nombre {
    font-size: clamp(24px, 8vw, 40px);
    white-space: normal; /* que pueda partirse en dos líneas */
    margin-bottom: 8px;
  }

  .cabecera__nombre::before {
    -webkit-text-stroke-width: 7px;
  }

  .cabecera__meta {
    gap: 9px;
  }

  .cabecera__icono {
    height: 32px;
  }

  .cabecera__icono--elemento {
    width: 32px;
    border-radius: 7px;
  }

  .cabecera__escudo {
    height: 38px;
    width: 38px;
  }

  .cabecera__equipo {
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* Estadísticas: la tabla y el campo se apilan */
  .stats-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* El campo mantiene su tamaño fijo también en móvil (218px): así se ve
     siempre igual. No se toca grid-template-rows ni el ancho. */

  .detalle__secciones {
    padding: 16px 14px;
    overflow: visible;
  }

  /* En móvil no hay zona con scroll propio: scrollea todo junto */
  .detalle__zona {
    overflow-y: visible;
    padding-right: 0;
  }

  /* Que los 4 botones quepan siempre en el ancho del móvil
     (antes "REVIEW" se salía y quedaba cortado) */
  .pestanas__boton {
    min-width: 0;
    padding: 8px 4px 7px;
    gap: 5px;
    font-size: 11px;
    letter-spacing: 0;
  }

  .pestanas__icono {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .pestanas__icono svg {
    width: 16px;
    height: 16px;
  }

  /* Las columnas de pros/contras se apilan */
  .review {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESUMEN AGRUPADO (compartido por Comparar y Equipo)
   Jerarquía por TAMAÑO: total del grupo grande, técnica concreta
   mediano, desglose pequeño. Lo pinta PaginaJugador.nodoGrupo /
   .nodoDetalle, así que las dos vistas se ven igual.
   ============================================================ */

.grupo-res {
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.grupo-res:last-child {
  border-bottom: none;
}

.grupo-res__cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.grupo-res__titulo {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
}

.grupo-res__valor {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.grupo-res__valor--neg {
  color: #ff8a8a;
}

/* Sub-bloque por técnica: solo aparece cuando las técnicas del mismo
   tipo NO reciben lo mismo (p. ej. una es de bosque y la otra no) */
.grupo-res__sub {
  margin: 4px 0 0 10px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
}

.grupo-res__subcab {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.grupo-res__subtitulo {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #e2e2e2;
}

.grupo-res__subvalor {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

/* --- Desglose (la letra chica) --- */

.desglose {
  padding: 4px 0 0 2px;
}

/* Cada buffo es un BLOQUE de dos filas (valor+qué / condición+quién),
   con su cara a la izquierda. Van bien separados a propósito: antes se
   leían como una ristra de texto y no se sabía dónde acababa uno. */
.desglose__linea {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: #b9b9b9;
}

.desglose__linea + .desglose__linea {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Cara de quien aporta el buffo: el atajo visual para saber de qué
   support sale sin leer el nombre */
.desglose__cara {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.06);
}

.desglose__cuerpo {
  flex: 1;
  min-width: 0;
}

.desglose__arriba {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.desglose__abajo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1px;
}

.desglose__valor {
  font-weight: 700;
  color: #dcdcdc;
  white-space: nowrap;
}

.desglose__valor--neg {
  color: #ff9c9c;
}

/* La etiqueta con iconos (posición / elemento) del buffo concreto */
.desglose__que {
  font-size: 12px;
}

.desglose__que .etiqueta-efecto__icono--pos {
  width: 22px;
  height: 14px;
}

.desglose__que .etiqueta-efecto__icono--elem {
  width: 14px;
  height: 14px;
}

/* De quién sale, y bajo qué condición (asumida cumplida) */
.desglose__de {
  font-size: 11px;
  font-style: italic;
  color: #8f8f8f;
}

.desglose__cond {
  font-size: 11px;
  color: #9fb4d8;
}

/* Acumulaciones simuladas: "×3" */
.desglose__veces {
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 176, 32, 0.18);
  border: 1px solid rgba(255, 196, 90, 0.5);
  font-size: 11px;
  font-weight: 700;
  color: #ffd79a;
}