/* ============================================================
   PÁGINA DE JUGADORES
   Barra de filtros y rejilla de tarjetas.
   ============================================================ */

/* --- Filtros: todo en una fila (buscador + grupos) --- */

.filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background-color: rgba(18, 18, 18, 0.72);
  border: 2px solid #ffffff;
  border-radius: 42px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Cada grupo (rareza, elemento, posición) va junto */
.filtros__grupo {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Separador visual entre grupos */
.filtros__grupo + .filtros__grupo {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Línea blanca fina que separa el buscador del filtro de rareza */
.filtros__buscador + .filtros__grupo {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.filtros__boton {
  position: relative; /* referencia del bocadillo */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  background-color: transparent;
  color: #e8e8e8;
  border: none;
  border-radius: 7px;
  overflow: hidden; /* el radius recorta las esquinas del icono */
  cursor: pointer;
  font-size: 14px;
}

/* Hover: leve realce, sin caja oscura */
.filtros__boton:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.filtros__boton:hover .icono-elemento,
.filtros__boton:hover .icono-posicion {
  filter: brightness(1.15);
}

/* Activo: recuadrito blanco por DENTRO, no ocupa espacio ni desplaza nada.
   Se hace con OUTLINE + outline-offset negativo, y NO con:
   - box-shadow inset: se pinta por debajo del contenido y los iconos de
     elemento (que llenan el botón entero, 34x34) lo tapaban del todo.
   - ::after: el bocadillo de ayuda es [data-tooltip]::after (componentes.css)
     y se lo cargaba -> al pasar el ratón salía una caja negra dentro del
     botón en vez del bocadillo.
   El outline se pinta DESPUÉS del contenido (va por encima del icono), no
   ocupa espacio y respeta el border-radius. */
.filtros__boton--activo {
  background-color: rgba(255, 255, 255, 0.14);
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Elemento: botón cuadrado, el icono lo llena entero */
.filtros__boton--elemento {
  width: 34px;
  padding: 0;
}

/* Botón * (sin filtro) */
.filtros__boton--todo {
  width: 34px;
  padding: 0;
}

.filtros__asterisco {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  transform: translateY(5px); /* el asterisco se dibuja alto: se baja a ojo */
}

/* Rareza: estrellas superpuestas */
.filtros__boton--rareza {
  padding: 0 8px;
}

.filtros__estrellas {
  display: flex;
  align-items: center;
}

.filtros__estrella {
  width: 20px;
  height: 20px;
}

.filtros__estrella + .filtros__estrella {
  margin-left: -7px; /* muy juntas, solapadas */
}

/* Tamaño de los iconos dentro de los filtros */
.filtros__boton .icono-posicion {
  width: 30px;
  height: 19px;
}

.filtros__boton .icono-elemento {
  display: block;
  width: 34px;
  height: 34px;
}
/* Buscador por nombre: fundido con el fondo de la barra */
.filtros__buscador {
  width: 200px;
  height: 34px;
  padding: 0 6px;
  background-color: transparent;
  color: #ffffff;
  border: none;
  font-size: 15px;
}

.filtros__buscador::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.filtros__buscador:focus {
  outline: none;
}

/* Quita la X gris que Chrome mete en los input[type=search] */
.filtros__buscador::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.5;
}

/* --- Rejilla de tarjetas --- */

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

/* Mensaje e imagen cuando ningún jugador pasa los filtros */
.rejilla-jugadores__vacio {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 0;
  text-align: center;
}

.rejilla-jugadores__texto {
  font-size: 18px;
  color: #e8e8e8;
}

.rejilla-jugadores__imagen {
  width: 220px;
  max-width: 60%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

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

@media (max-width: 900px) {
  /* En móvil la barra deja de ser una píldora de una sola fila y pasa a
     ser una tarjeta en columna: buscador arriba y luego una fila por
     grupo (rareza / elemento / posición), separadas por líneas finas.
     Antes iba en flex-wrap y los grupos caían donde podían, con el
     radius de 42px quedaba deforme. */
  .filtros {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 4px 14px 10px;
    border-radius: 20px;
  }

  /* El buscador ocupa su propia línea completa */
  .filtros__buscador {
    width: 100%;
    max-width: 100%;
    height: 40px;
    font-size: 16px; /* menos de 16px hace que iOS haga zoom al enfocar */
  }

  /* Cada grupo es una fila de 5 columnas iguales (elemento y posición
     tienen 5 botones con el *; rareza tiene 4 y deja la última libre).
     En rejilla en vez de flex para que los botones de las tres filas
     queden alineados en columna y no bailando cada uno por su lado. */
  .filtros__grupo {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    gap: 4px;
    padding: 9px 2px 0;
    margin-top: 9px;
  }

  /* Las líneas de separación pasan de verticales a horizontales */
  .filtros__grupo + .filtros__grupo,
  .filtros__buscador + .filtros__grupo {
    padding-left: 2px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .filtros__buscador + .filtros__grupo {
    border-top-color: rgba(255, 255, 255, 0.55);
  }

  /* Un pelín más grandes: son objetivos táctiles */
  .filtros__boton {
    height: 38px;
  }

  .filtros__boton--elemento,
  .filtros__boton--todo {
    width: 38px;
  }

  .filtros__boton .icono-elemento {
    width: 38px;
    height: 38px;
  }

  .rejilla-jugadores {
    gap: 10px;
    justify-content: center;
  }
}

/* --- Botón redondo "volver arriba" (SOLO MÓVIL) ---
   Va en position:fixed aunque cuelgue de #contenido: #contenido no tiene
   transform, así que fixed sigue siendo respecto a la pantalla.
   z-index 30: por debajo del drawer del menú (45/50). */
.subir {
  display: none;
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(18, 18, 18, 0.9);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  /* Oculto hasta que se baja: se anima, no aparece de golpe */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}

.subir svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.subir:active {
  background-color: rgba(60, 60, 60, 0.95);
}

@media (max-width: 900px) {
  .subir {
    display: flex;
  }

  .subir--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}