/* ============================================================
   ESTILO "CHAPA DE JUEGO"  (sep-2026)
   Los botones y paneles del juego móvil: fondo gris muy oscuro
   en degradado, tramado de puntos abajo que se van encogiendo
   hacia arriba, borde blanco con contorno negro por fuera y
   SOLO dos esquinas redondeadas (arriba-derecha y abajo-izquierda).

   ESTE ARCHIVO VA EL ÚLTIMO en index.html: pisa a los demás a
   propósito. Para volver al diseño anterior basta con quitar su
   <link>; no se ha tocado ninguna otra hoja.

   NO SE APLICA NADA (decisión de Anxo, sep-2026): barra de filtros de
   Jugadores, menú lateral, barra de pestañas de la ficha
   (Estadísticas/Técnicas/..., que llevará otro diseño), cajas de los
   modales y TODA la pantalla de Tier List (aviso, tabla y zona de
   revisión). Se dejaron tal y como estaban.

   SIN TRAMADO pero con marco (Anxo lo quitó al verlo): cabecera del
   jugador, cards de técnica y de pasiva, y toda la pantalla de
   Comparar (cartas y minicartas de compañero).

   Los puntos son un ::after: si algún elemento ya usa su propio
   ::after, hay que revisarlo aquí.
   ============================================================ */

:root {
  /* Chapa clara: botones y cajas con borde blanco */
  --chapa-1: #34363d; /* arriba */
  --chapa-2: #26282e; /* medio */
  --chapa-3: #131418; /* abajo */
  --chapa-borde: #ffffff; /* borde interior */
  --chapa-contorno: #05050a; /* contorno exterior (el "negro de fuera") */
  --chapa-punto: rgba(255, 255, 255, 0.16); /* tramado */
  --chapa-radio: 18px; /* paneles */
  --chapa-radio-boton: 12px; /* botones */

  /* Chapa oscura: los paneles grandes de la ficha (Estadísticas,
     Técnicas, Pasivas...). Sin borde blanco, fondo más apagado y el
     tramado apenas insinuado. */
  --chapa-osc-1: #1e1f25;
  --chapa-osc-2: #131418;
  --chapa-osc-3: #08080b;
  --chapa-osc-borde: #0a0a0e;
  --chapa-osc-punto: rgba(255, 255, 255, 0.065);
}

/* ------------------------------------------------------------
   1. FONDO + BORDES
   ------------------------------------------------------------ */

/* --- Chapa clara completa: fondo gris + borde blanco --- */
.detalle__volver,
.stats-toggle__boton,
.pasiva__nivel,
.compas__add,
.equipo__vaciar,
.panel-jug__boton,
.subir,
.comp-cond,
.resumen-bloque,
.pasiva-ent,
.equipo__campo {
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    var(--chapa-1) 0%,
    var(--chapa-2) 42%,
    var(--chapa-3) 100%
  );
  border: 2px solid var(--chapa-borde);
  box-shadow:
    0 0 0 2px var(--chapa-contorno),
    0 4px 14px rgba(0, 0, 0, 0.45);
  color: #f0f0f2;
}

/* --- Chapa OSCURA: paneles de sección de la ficha. Borde oscuro en
       vez de blanco y fondo más hundido. --- */
.panel {
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    var(--chapa-osc-1) 0%,
    var(--chapa-osc-2) 45%,
    var(--chapa-osc-3) 100%
  );
  border: 2px solid var(--chapa-osc-borde);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

/* --- Solo marco: conservan su fondo (color de elemento de la técnica,
       violeta de la pasiva). Borde oscuro, como los paneles. --- */
.tecnica,
.pasiva {
  position: relative;
  border: 2px solid var(--chapa-osc-borde);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Las minicartas de compañero sí llevan el marco blanco */
.compa {
  position: relative;
  border: 2px solid var(--chapa-borde);
  box-shadow:
    0 0 0 2px var(--chapa-contorno),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

/* La carta del comparador mantiene su color de bando (naranja P1 /
   verde P2), pero pasa a ser el ANILLO de fuera: blanco por dentro,
   color, y el negro cerrando. */
.comparar__carta {
  position: relative;
  border: 2px solid var(--chapa-borde);
}
.comparar__carta--izq {
  box-shadow:
    0 0 0 3px #ff7a3c,
    0 0 0 5px var(--chapa-contorno),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
.comparar__carta--der {
  box-shadow:
    0 0 0 3px #5fd97a,
    0 0 0 5px var(--chapa-contorno),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
.comparar__carta--vacio {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------
   2. ESQUINAS
   Solo arriba-derecha y abajo-izquierda. Las otras dos, en pico.
   ------------------------------------------------------------ */

.panel,
.comp-cond,
.resumen-bloque,
.pasiva-ent,
.equipo__campo,
.tecnica,
.pasiva,
.comparar__carta {
  border-radius: 0 var(--chapa-radio) 0 var(--chapa-radio);
}

.detalle__volver,
.stats-toggle__boton,
.pasiva__nivel,
.compas__add,
.equipo__vaciar,
.panel-jug__boton,
.subir,
.compa {
  border-radius: 0 var(--chapa-radio-boton) 0 var(--chapa-radio-boton);
}

/* ------------------------------------------------------------
   3. TRAMADO DE PUNTOS
   Filas de puntos apiladas desde abajo; cada fila más pequeña que
   la de debajo, así el tramado "se deshace" hacia arriba. Cada fila
   es una capa de radial-gradient con repeat-x; las impares van
   media celda desplazadas para que no queden en columnas.
   El ::after se recorta solo con su propio border-radius, así que
   NO hace falta overflow:hidden en el padre.
   ------------------------------------------------------------ */

/* --- Tramado GRANDE: paneles de sección y cajas anchas. Puntos
       gordos y muy tenues (en una card grande el tramado fino no se
       veía). --- */
.panel::after,
.resumen-bloque::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  pointer-events: none;
  border-radius: 0 0 0 var(--chapa-radio);
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle, var(--chapa-osc-punto) 5px, transparent 5.6px),
    radial-gradient(circle, var(--chapa-osc-punto) 4.1px, transparent 4.7px),
    radial-gradient(circle, var(--chapa-osc-punto) 3.2px, transparent 3.8px),
    radial-gradient(circle, var(--chapa-osc-punto) 2.4px, transparent 3px),
    radial-gradient(circle, var(--chapa-osc-punto) 1.6px, transparent 2.2px),
    radial-gradient(circle, var(--chapa-osc-punto) 1px, transparent 1.6px);
  background-size: 15px 15px;
  background-position:
    0 100%,
    7.5px calc(100% - 14px),
    0 calc(100% - 28px),
    7.5px calc(100% - 42px),
    0 calc(100% - 56px),
    7.5px calc(100% - 70px);
}

/* --- Tramado MEDIO: cards y cajas de tamaño normal.
   NO lo llevan (Anxo lo quitó al verlo): la cabecera del jugador, las
   cards de técnica y de pasiva (el tramado por dentro ensuciaba el
   texto) ni las cartas del comparador. --- */
.comp-cond::after,
.pasiva-ent::after,
.equipo__campo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  pointer-events: none;
  border-radius: 0 0 0 var(--chapa-radio);
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle, var(--chapa-punto) 3.1px, transparent 3.6px),
    radial-gradient(circle, var(--chapa-punto) 2.5px, transparent 3px),
    radial-gradient(circle, var(--chapa-punto) 1.95px, transparent 2.45px),
    radial-gradient(circle, var(--chapa-punto) 1.45px, transparent 1.95px),
    radial-gradient(circle, var(--chapa-punto) 1px, transparent 1.5px),
    radial-gradient(circle, var(--chapa-punto) 0.6px, transparent 1.1px);
  background-size: 9px 9px;
  background-position:
    0 100%,
    4.5px calc(100% - 8px),
    0 calc(100% - 16px),
    4.5px calc(100% - 24px),
    0 calc(100% - 32px),
    4.5px calc(100% - 40px);
}

/* --- Tramado CORTO: botones y cartas pequeñas --- */
.detalle__volver::after,
.stats-toggle__boton::after,
.pasiva__nivel::after,
.compas__add::after,
.equipo__vaciar::after,
.panel-jug__boton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  pointer-events: none;
  border-radius: 0 0 0 var(--chapa-radio-boton);
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle, var(--chapa-punto) 2.1px, transparent 2.5px),
    radial-gradient(circle, var(--chapa-punto) 1.55px, transparent 1.95px),
    radial-gradient(circle, var(--chapa-punto) 1.05px, transparent 1.45px),
    radial-gradient(circle, var(--chapa-punto) 0.6px, transparent 1px);
  background-size: 7px 7px;
  background-position:
    0 100%,
    3.5px calc(100% - 6px),
    0 calc(100% - 12px),
    3.5px calc(100% - 18px);
}

/* EL TRAMADO VA DETRÁS DEL CONTENIDO, con z-index -1: así se pinta
   encima del fondo de la caja pero por debajo de todo lo que lleve
   dentro. Para que ese -1 no se cuele por detrás del fondo de la
   página, la caja tiene que crear su propio contexto de apilado, y de
   eso se encarga isolation:isolate.
   OJO, TRAMPA YA PISADA: la primera versión ponía
   `.comparar__carta > * { position: relative }` para subir el
   contenido, y eso PISABA el position:absolute de .comparar__meta y
   .comparar__iconos -> la rareza y los iconos se caían al centro de la
   carta. No tocar la posición de los hijos. */
.panel::after,
.resumen-bloque::after,
.comp-cond::after,
.pasiva-ent::after,
.equipo__campo::after,
.detalle__volver::after,
.stats-toggle__boton::after,
.pasiva__nivel::after,
.compas__add::after,
.equipo__vaciar::after,
.panel-jug__boton::after {
  z-index: -1;
}

.panel,
.resumen-bloque,
.comp-cond,
.pasiva-ent,
.equipo__campo,
.detalle__volver,
.stats-toggle__boton,
.pasiva__nivel,
.compas__add,
.equipo__vaciar,
.panel-jug__boton {
  isolation: isolate;
}

/* ------------------------------------------------------------
   4. AJUSTES POR ELEMENTO
   ------------------------------------------------------------ */

/* Botón de volver: ya no es píldora */
.detalle__volver {
  padding: 8px 20px;
  font-weight: 600;
}
.detalle__volver:hover {
  --chapa-1: #43454e;
  --chapa-2: #33353c;
}

/* Selector de nivel de stats y de nivel de pasiva */
.stats-toggle__boton--activo,
.pasiva__nivel--activo {
  --chapa-1: #4a4d57;
  --chapa-2: #383a43;
  --chapa-3: #1c1d23;
}

/* Las chapas de estos dos selectores quedan casi iguales entre sí y no se
   veía cuál estaba elegida: los NO elegidos se apagan con opacidad. El
   activo va a opacidad plena, también con el ratón encima (por eso lleva
   su propio :hover: misma especificidad que el :hover de arriba, gana
   porque va después). La opacidad va en el botón entero, así que el
   tramado de puntos del ::after se apaga con él y no queda descolgado. */
.stats-toggle__boton,
.pasiva__nivel {
  opacity: 0.38;
  transition: opacity 0.15s ease;
}

.stats-toggle__boton:hover,
.pasiva__nivel:hover {
  opacity: 0.7;
}

.stats-toggle__boton--activo,
.stats-toggle__boton--activo:hover,
.pasiva__nivel--activo,
.pasiva__nivel--activo:hover {
  opacity: 1;
}

/* Las técnicas y las pasivas ya recortaban sus bandas con overflow */
.tecnica,
.pasiva {
  overflow: hidden;
}

/* El botón de añadir compañero es de línea discontinua: se queda así,
   pero con las esquinas nuevas */
.compas__add {
  background-image: none;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 2px var(--chapa-contorno);
}
.compas__add::after {
  display: none;
}

/* El campo del simulador de equipo lleva su propio fondo de césped:
   solo marco y esquinas, sin degradado gris. */
.equipo__campo {
  background-image: none;
}
.equipo__campo::after {
  display: none;
}

/* ------------------------------------------------------------
   5. MÓVIL
   Menos radio y tramado más bajo, que las cajas son más estrechas.
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  :root {
    --chapa-radio: 14px;
    --chapa-radio-boton: 10px;
  }

  .panel::after,
  .resumen-bloque::after {
    height: 60px;
  }

  .comp-cond::after,
  .pasiva-ent::after {
    height: 34px;
  }
}

/* ------------------------------------------------------------
   6. COMPARADOR: SEPARADORES VERTICALES
   Pedido de Anxo: en la comparación cuesta ver de un vistazo dónde
   acaba lo de un jugador y empieza lo del otro. Se marcan con líneas
   finas verticales, del mismo tono que las horizontales que ya había.
   ------------------------------------------------------------ */

/* Las dos líneas que flanquean la columna del centro (el nombre del
   buffo): dejan cada valor claramente en su lado. */
.comp-fila__nom {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

/* En el desglose de los grupos no hay columna central, así que la
   línea se pinta al 50% con un ::before. */
.comp-desglose {
  position: relative;
}

.comp-desglose::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* Igual en los contadores de acumulaciones, que también van a dos
   columnas (una por jugador). */
.comp-acum__cols {
  position: relative;
}

.comp-acum__cols::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* ------------------------------------------------------------
   7. BOTÓN "AÑADIR" DE LOS MODALES
   Pedido de Anxo: el mismo tratamiento que el resto (borde blanco con
   contorno negro, esquinas arriba-derecha / abajo-izquierda y tramado
   de puntos) pero MANTENIENDO el amarillo. Es la única excepción a la
   regla de "los modales no llevan el estilo".
   Los puntos aquí van en NEGRO translúcido: sobre el amarillo, los
   blancos no se veían.
   ------------------------------------------------------------ */

.modal__panel-anadir {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #ffd75e 0%, #ffca28 45%, #e0a300 100%);
  border: 2px solid var(--chapa-borde);
  border-radius: 0 var(--chapa-radio-boton) 0 var(--chapa-radio-boton);
  box-shadow:
    0 0 0 2px var(--chapa-contorno),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

.modal__panel-anadir:hover {
  background: linear-gradient(180deg, #ffe184 0%, #ffd44f 45%, #edb100 100%);
}

.modal__panel-anadir::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  pointer-events: none;
  border-radius: 0 0 0 var(--chapa-radio-boton);
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.17) 2.1px, transparent 2.5px),
    radial-gradient(circle, rgba(0, 0, 0, 0.17) 1.55px, transparent 1.95px),
    radial-gradient(circle, rgba(0, 0, 0, 0.17) 1.05px, transparent 1.45px),
    radial-gradient(circle, rgba(0, 0, 0, 0.17) 0.6px, transparent 1px);
  background-size: 7px 7px;
  background-position:
    0 100%,
    3.5px calc(100% - 6px),
    0 calc(100% - 12px),
    3.5px calc(100% - 18px);
}