/* Sección «Amigos» (antes «Jugadores») */

/* ---------- Barra de arriba ---------- */

.barra-amigos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

/* La casilla y «Agregar» pegados en una sola tarjetita, como el buscador de «Crear equipo».
   El interruptor tarjetas/lista es el de «Mis equipos» (css/equipos.css, .vista-equipos) */
.amigos-buscador {
  display: flex;
  flex: 0 1 26rem;
  min-width: 0;
  border-radius: 0.45rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.amigos-correo {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem 0 0 0.45rem;
  font-size: 0.93rem;
}

/* Sin el contorno de color al escribir: con «Agregar» pegado queda raro */
.amigos-correo:focus-visible {
  outline: none;
}

.amigos-agregar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: none;
  border-left: 1px solid rgba(var(--t-oscurecer), 0.35);
  border-radius: 0 0.45rem 0.45rem 0;
  background: rgb(var(--color-vista));
  color: var(--t-tinta-2);
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

/* El único botón de color de la sección: el principal */
.amigos-agregar:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}

.amigos-agregar .icono {
  width: 1.05rem;
  height: 1.05rem;
}

.amigos-aviso {
  font-size: 0.85rem;
  font-weight: bold;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* ---------- Solicitudes ---------- */

.amigos-solicitudes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.solicitud {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-left: 0.3rem solid #7f8c8d;
  border-radius: 0.45rem;
  background: var(--t-panel);
  font-size: 0.9rem;
}

/* Las que te han mandado a ti se ven: son las que hay que contestar */
.solicitud.entrante {
  border-left-color: rgb(var(--color-vista));
}

.solicitud button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.solicitud button:hover {
  background: var(--t-control-2);
}

.solicitud .solicitud-aceptar {
  background: var(--t-bien-oscuro);
}

.solicitud .solicitud-aceptar:hover {
  background: var(--t-bien);
}

.solicitud .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Rejilla de fichas ---------- */

/* Sin max-width: ocupa todo el ancho del contenido, así no sobra hueco a la derecha.
   align-items: start evita que las fichas de una misma fila se estiren hasta la altura
   de la más larga (si no, a los que no tienen lockes les quedaba un hueco debajo). */
.jugadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 1.15rem;
}

@media (max-width: 1400px) {
  .jugadores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .jugadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .jugadores {
    grid-template-columns: 1fr;
  }
}

/* La ficha: la capa de color a la izquierda dice quién es (tú en el color de la sección, un amigo
   conectado en verde, el resto en azul pizarra). Dentro, de arriba abajo: foto y nombre, los
   números por tipo de locke y la lista. Su fondo con dibujo (más abajo) va por encima del color. */
.ficha-jugador {
  position: relative;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1rem 1rem 0.9rem;
  border-left: 0.35rem solid var(--t-azulado);
  border-radius: 0.9rem;
  background: var(--t-panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}

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

.ficha-jugador.arrastrando {
  opacity: 0.4;
  cursor: grabbing;
  transform: none;
}

.ficha-jugador.mia {
  border-left-color: rgb(var(--color-vista));
}

.ficha-jugador.conectado {
  border-left-color: var(--t-bien);
}

/* Foto y nombre */
.ficha-cabeza {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ficha-quien {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

/* «Tú» o «Conectado», en pequeño bajo el nombre */
.jugador-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ficha-jugador.mia .jugador-estado {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.ficha-jugador.conectado .jugador-estado {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

/* El punto verde que late: la web abierta ahora mismo */
.punto-conectado {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--t-bien);
  animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--t-bien-rgb), 0.6); }
  50%      { opacity: 0.45; box-shadow: 0 0 0 0.35rem rgba(var(--t-bien-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .punto-conectado {
    animation: none;
  }
}

/* ---------- Fondos de la tarjeta (js/comun/fondos.js) ----------
   Cada fondo es opaco y se ve igual con cualquier tema, como los títulos y los marcos (no deja ver
   el color de la tarjeta, que cambia con el tema). Valen igual para la tarjeta y para las muestras
   del perfil. */

/* Lo que va escrito encima: con los colores de Atardecer (css/base.css, .con-fondo) y con sombra,
   para que se lea sobre el dibujo (la sombra se hereda). Sin especificidad: lo que diga cada sitio
   sigue mandando. */
:where(.con-fondo) {
  color: var(--t-texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Menos en los botones, campos y plaquitas de título, que ya llevan su propio fondo */
:where(.con-fondo) :where(button, input, select, textarea, .perfil-titulo) {
  text-shadow: none;
}

/* Los de metal (plata, oro, platino) son pixel art: css/fondos-pixel.css (GENERADO) */

/* De tipo: del color del tipo (más claro arriba a la izquierda, más hondo abajo), con un resplandor
   arriba y, encima, un mosaico con su icono (el SVG de img/fondos/ hace de máscara y se pinta de
   un tono más claro del tipo). --color-tipo y --patron los pone js/comun/fondos.js en el propio
   elemento. */
.ficha-jugador.fondo-tipo,
.perfil-fondo.fondo-tipo,
.perfil-cabeza.fondo-tipo,
.lleva-fondo.fondo-tipo,
.logro-premio.fondo-tipo {
  isolation: isolate; /* el mosaico (z-index -1) queda encima del fondo y debajo del contenido */
  background-image:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, color-mix(in srgb, var(--color-tipo) 60%, white) 40%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--color-tipo) 74%, #1c1a19), color-mix(in srgb, var(--color-tipo) 44%, #1c1a19));
}

.ficha-jugador.fondo-tipo::before,
.perfil-fondo.fondo-tipo::before,
.perfil-cabeza.fondo-tipo::before,
.lleva-fondo.fondo-tipo::before,
.logro-premio.fondo-tipo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--color-tipo) 45%, white);
  opacity: 0.2;
  -webkit-mask: var(--patron) 0 0 / 3.4rem 3.4rem repeat;
  mask: var(--patron) 0 0 / 3.4rem 3.4rem repeat;
  pointer-events: none;
}

.ficha-jugador.fondo-tipo:not(.mia):not(.conectado) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--color-tipo) 65%, transparent);
}

/* El borde, del color del metal (la tuya y los conectados ya tienen el suyo) */
.ficha-jugador.fondo-plata:not(.mia):not(.conectado) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(195, 202, 214, 0.5);
}

.ficha-jugador.fondo-oro:not(.mia):not(.conectado) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(241, 196, 15, 0.55);
}

.ficha-jugador.fondo-platino:not(.mia):not(.conectado) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(214, 206, 246, 0.7);
}

/* Al pulsar en la ficha se esconde la lista y queda solo la foto, el nombre y el recuento.
   Sin lockes, la lista no ocupa nada (ni el hueco de encima) */
.ficha-jugador.plegada .lockes-ganados,
.lockes-ganados:empty {
  display: none;
}

/* ---------- Botones de la esquina ---------- */

.ficha-acciones {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
}

.ficha-jugador:hover .ficha-acciones {
  opacity: 1;
}

.ficha-acciones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.ficha-acciones button:hover {
  background: var(--t-control-2);
}

.ficha-acciones .accion-quitar:hover {
  background: var(--t-rojo-oscuro);
}

.ficha-acciones .accion-estadisticas:hover,
.ficha-acciones .accion-chat:hover {
  background: rgb(var(--color-vista));
  color: var(--t-tinta-2);
}

/* Si te ha escrito y no lo has leído, el botón se ve siempre, en amarillo */
.ficha-acciones:has(.accion-chat.sin-leer) {
  opacity: 1;
}

.ficha-acciones .accion-chat.sin-leer {
  background: #f1c40f;
  color: var(--t-tinta-2);
}

.ficha-acciones .icono {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---------- Foto y nombre ---------- */

/* Borde de la foto y nombre: azul pizarra, oscuro pero legible sobre la ficha; en la tuya, el
   color de la sección; si el amigo está conectado, verde, como la capa de su ficha */
.jugador-foto {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  border: 0.25rem solid var(--t-azulado);
  background: var(--t-fondo);
  overflow: hidden;
}

.ficha-jugador .jugador-foto {
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  border-width: 0.2rem;
}

/* Si la foto no carga (se quita el <img>), queda la inicial del nombre */
.jugador-foto::before {
  content: attr(data-inicial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  font-weight: bold;
  color: rgba(var(--t-tinte), 0.35);
}

.ficha-jugador .jugador-foto::before {
  font-size: 2rem;
}

.jugador-foto img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jugador-nombre {
  margin: 0.7rem 0 0;
  font-size: 1.35rem;
  color: var(--t-azulado);
  text-align: center;
}

.ficha-jugador .jugador-nombre {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: left;
  overflow-wrap: anywhere;
}

.ficha-jugador.mia .jugador-foto {
  border-color: rgb(var(--color-vista));
}

.ficha-jugador.conectado .jugador-foto {
  border-color: var(--t-bien);
}

.ficha-jugador.conectado .jugador-nombre {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.ficha-jugador.mia .jugador-nombre {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* ---------- Contadores por tipo de locke ---------- */

/* Una sola tira maciza (que se lea sobre cualquier fondo) con los números en grande, uno por
   tipo, separados por rayas de puntos */
.contadores-locke {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.contadores-locke:empty {
  display: none;
}

.contador-locke {
  display: flex;
  flex: 1 1 4.2rem;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem 0.45rem;
}

.contador-locke:not(:last-child) {
  border-right: 1px dashed rgba(var(--t-tinte), 0.18);
}

.contador-numero {
  font-family: var(--letra-titulos);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--color-locke, #3498db) var(--t-vivo), black);
}

.contador-tipo {
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0.8;
}

/* Debajo del tipo, cuántos de esos jugados ganó */
.contador-ganados {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  white-space: nowrap;
  opacity: 0.7;
}

.contador-ganados .icono {
  width: 0.7rem;
  height: 0.7rem;
  color: #f1c40f;
}

/* ---------- Lista de lockes ganados ---------- */

.lockes-ganados {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.locke-ganado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  padding: 0.45rem 0.7rem;
  /* Línea de puntos por todo el contorno (menos la capa de color), para que no se funda con la ficha */
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  border-left: 0.25rem solid var(--color-locke, #3498db);
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  /* Se pueden pulsar: abren el recuadro con sus datos */
  cursor: pointer;
}

/* Más claro que el fondo de cualquier ficha: si no, al pasar el ratón el locke se fundía con ella */
.locke-ganado:hover,
.locke-ganado.abierto {
  background: #41455e;
}

.locke-nombre {
  font-weight: bold;
  font-size: 0.93rem;
}

/* Los ganados, con su corona delante; los que no, sin ella y un poco más apagados */
.locke-corona {
  display: inline-flex;
  margin-right: 0.3rem;
  vertical-align: -0.1em;
  color: #f1c40f;
}

.locke-corona .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.locke-ganado.perdido .locke-nombre {
  font-weight: 600;
  opacity: 0.8;
}

/* ---------- Modo lista: una fila por amigo, de lado a lado ----------
   Foto pequeña y nombre, los contadores en una tira baja y los botones siempre a la vista.
   Al pulsar la fila, sus lockes se despliegan debajo, a todo lo ancho. */

.jugadores.modo-lista {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.jugadores.modo-lista .ficha-jugador {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.55rem 0.85rem 0.55rem 0.75rem;
  border-radius: 0.7rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.jugadores.modo-lista .ficha-jugador:hover {
  transform: none;
}

/* Ancho fijo para que los contadores de todas las filas empiecen a la misma altura */
.jugadores.modo-lista .ficha-cabeza {
  flex: 0 0 15rem;
  min-width: 0;
  gap: 0.7rem;
}

.jugadores.modo-lista .ficha-jugador .jugador-foto {
  width: 2.9rem;
  height: 2.9rem;
  border-width: 0.15rem;
}

.jugadores.modo-lista .ficha-jugador .jugador-foto::before {
  font-size: 1.3rem;
}

.jugadores.modo-lista .ficha-jugador .jugador-nombre {
  font-size: 1.1rem;
}

/* Ajustados a lo que tienen y pegados a la izquierda (estirados quedaban larguísimos) */
.jugadores.modo-lista .contadores-locke {
  flex: 0 1 auto;
  min-width: 0;
  box-shadow: none;
}

.jugadores.modo-lista .contador-locke {
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.1rem 0.4rem;
  padding: 0.35rem 0.75rem;
}

.jugadores.modo-lista .contador-numero {
  font-size: 1.25rem;
}

.jugadores.modo-lista .ficha-acciones {
  position: static;
  order: 1;
  margin-left: auto;
  opacity: 1;
}

.jugadores.modo-lista .lockes-ganados {
  order: 2;
  flex-basis: 100%;
}

@media (max-width: 34rem) {
  /* En el móvil, foto y nombre con los botones arriba, y los contadores debajo (sin estirar) */
  .jugadores.modo-lista .ficha-cabeza {
    flex: 1 1 60%;
  }

  .jugadores.modo-lista .contadores-locke {
    order: 1;
  }
}

/* ---------- Listas que enseñan los 5 últimos (fichas y cara a cara) ---------- */

.lista-plegable:not(.todos) > .extra {
  display: none;
}

.ver-todos-fila {
  list-style: none;
}

.ver-todos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px dashed rgba(var(--t-tinte), 0.25);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
}

.ver-todos:hover {
  border-color: rgba(var(--color-vista), 0.7);
  background: rgba(var(--color-vista), 0.08);
}

.ver-todos .icono {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---------- Recuadro flotante con los datos de un locke ---------- */

.flotante-locke {
  position: fixed;
  z-index: 90;
  width: 17rem;
  padding: 0.8rem 0.9rem;
  border-left: 0.3rem solid var(--color-locke, #3498db);
  border-radius: 0.6rem;
  background: var(--t-panel);
  color: var(--t-texto);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
}

.flotante-cabecera {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}

.flotante-tipo {
  align-self: flex-start;
  padding: 0.12rem 0.45rem;
  border-radius: 0.3rem;
  background: var(--color-locke, #3498db);
  color: var(--t-tinta);
  font-size: 0.66rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flotante-nombre {
  font-size: 1.02rem;
  font-weight: bold;
}

.flotante-nota {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.flotante-fila {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem 0;
}

.flotante-fila .icono {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.7;
}

.flotante-fila.ganador .icono {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
  opacity: 1;
}

.flotante-titulo {
  margin: 0.7rem 0 0.35rem;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.flotante-participantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flotante-participantes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--t-fondo-2);
}

.flotante-participantes li > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.flotante-participantes li.gano {
  box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.45);
}

.flotante-participantes .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.flotante-participantes li.gano .icono {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.flotante-vidas {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: bold;
  color: #e74c3c;
}

/* El ganador, todo en dorado: el número de vidas y su corazón */
.flotante-participantes li.gano .flotante-vidas,
.flotante-participantes li.gano .flotante-vidas .icono {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.flotante-vacio {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  opacity: 0.6;
}

.locke-nota {
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  opacity: 0.85;
}

/* ---------- Cara a cara ---------- */

.cara-a-cara {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
}

.luchador {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.1rem 0.7rem 0.9rem;
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
  transition: opacity 0.2s;
}

.luchador .jugador-foto {
  width: 6.5rem;
  height: 6.5rem;
}

.luchador .jugador-foto::before {
  font-size: 2.6rem;
}

.luchador.mio .jugador-foto {
  border-color: rgb(var(--color-vista));
}

.luchador-nombre {
  margin-top: 0.35rem;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--t-azulado);
  text-align: center;
  overflow-wrap: anywhere;
}

.luchador.mio .luchador-nombre {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.luchador-victorias {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.1;
}

.luchador-etiqueta {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* El que va ganando: resaltado, con corona y el número en verde */
.luchador.gana {
  background: var(--t-panel-3);
  box-shadow: 0 0 0 2px var(--t-bien), 0 0 18px rgba(var(--t-bien-rgb), 0.35);
}

.luchador.gana .luchador-victorias {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.luchador.pierde {
  opacity: 0.6;
}

.luchador-corona {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--t-panel);
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.luchador-corona .icono {
  width: 1.4rem;
  height: 1.4rem;
}

.comparar-vs {
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  color: #e74c3c;
}

.comparar-resumen,
.comparar-empate {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.95rem;
}

.comparar-empate {
  margin-top: 0.3rem;
  font-weight: bold;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

/* Lista de los lockes jugados juntos, del más reciente al más antiguo */
.comparar-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 40vh;
  margin: 1rem 0 0;
  padding: 0;
  overflow-y: auto;
}

.comparar-locke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-left: 0.3rem solid var(--color-locke, #3498db);
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
}

.comparar-locke-nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: bold;
  font-size: 0.92rem;
}

.comparar-fecha {
  font-size: 0.75rem;
  font-weight: normal;
  opacity: 0.6;
}

.comparar-resultado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  font-size: 0.82rem;
  font-weight: bold;
  opacity: 0.75;
}

.comparar-resultado .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.comparar-resultado.mia {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  opacity: 1;
}

.comparar-resultado.suya {
  color: var(--t-azulado);
  opacity: 1;
}

.comparar-resultado.marcha {
  font-style: italic;
}

/* ---------- Estadísticas de una persona (js/amigos/estadisticas.js) ---------- */

#dialogo-estadisticas {
  width: min(42rem, 94vw);
}

#dialogo-estadisticas h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#dialogo-estadisticas h2 .icono {
  width: 1.2rem;
  height: 1.2rem;
}

#dialogo-estadisticas .estadisticas-cerrar {
  background: var(--t-control);
  color: var(--t-texto);
}

/* El scroll recorta lo que sobresale de las tarjetas (el brillo y la corona de quien va ganando,
   el MVP...): se les deja sitio por dentro, y el margen negativo lo compensa por fuera */
.estadisticas-cuerpo {
  max-height: 65vh;
  margin: -1.3rem -1rem 0;
  padding: 1.3rem 1rem 0.3rem;
  overflow-y: auto;
}

.stats-cabecera:first-child {
  margin-top: 0;
}

/* En esta ventana la lista del cara a cara no tiene su propio scroll: se desplaza todo junto */
.estadisticas-cuerpo .comparar-lista {
  max-height: none;
  overflow: visible;
}

.stats-nota {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  opacity: 0.65;
}

@media (max-width: 34rem) {
  .estadisticas-cuerpo .cara-a-cara {
    gap: 0.4rem;
  }

  .estadisticas-cuerpo .luchador {
    padding: 1rem 0.4rem 0.7rem;
  }

  .estadisticas-cuerpo .luchador .jugador-foto {
    width: 4.2rem;
    height: 4.2rem;
  }

  .estadisticas-cuerpo .luchador-nombre {
    font-size: 1rem;
  }

  .estadisticas-cuerpo .luchador-victorias {
    font-size: 2rem;
  }
}

.estadisticas-cuerpo h3 {
  margin: 1.2rem 0 0.5rem;
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
}

.stats-sub {
  margin: 1.2rem 0 0.7rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

.estadisticas-cuerpo > .stats-sub:first-child {
  margin-top: 0;
}

.stats-cifras {
  padding: 0.7rem 0.85rem;
  border-left: 3px solid rgb(var(--color-vista));
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
}

.stats-pokemones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.stats-pokemon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5.4rem;
  margin: 0;
  text-align: center;
}

.stats-cara {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
}

.stats-cuenta {
  position: absolute;
  top: -0.2rem;
  right: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 0.6rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.stats-pokemon figcaption {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.15;
  word-break: break-word;
}

.stats-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stats-tipo {
  padding: 0.2rem 0.7rem;
  border-left: 4px solid var(--color-tipo);
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  font-size: 0.9rem;
}

.stats-juegos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.stats-juegos th,
.stats-juegos td {
  padding: 0.3rem 0.5rem;
  text-align: right;
}

.stats-juegos th:first-child,
.stats-juegos td:first-child {
  text-align: left;
}

.stats-juegos th {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
}

.stats-juegos tbody tr {
  border-top: 1px solid rgba(var(--t-tinte), 0.15);
}

.stats-amigos {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-amigos li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  font-size: 0.92rem;
}

.stats-amigo-nombre {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.stats-amigo-juntos {
  opacity: 0.7;
  font-size: 0.82rem;
}

.stats-amigo-marcador {
  min-width: 3.2rem;
  font-family: var(--letra-titulos);
  text-align: right;
}

.stats-amigo-marcador.gana {
  color: #7ac74c;
}

.stats-amigo-marcador.pierde {
  color: var(--t-mal);
}

/* ---------- Diálogos de tipos y de palmarés ---------- */

.tipos-lista,
.palmares-lista {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 55vh;
  overflow-y: auto;
}

.fila-tipo,
.fila-palmares-principal {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* «Lo gané» y, si no, quién ganó */
.fila-palmares-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin-top: 0.4rem;
}

.fila-palmares-resultado .palmares-gane {
  align-self: center;
  padding-bottom: 0;
}

.palmares-gane .icono {
  width: 0.85rem;
  height: 0.85rem;
  color: #f1c40f;
  vertical-align: -0.1em;
}

.palmares-ganador {
  flex: 1 1 12rem;
  min-width: 0;
}

.fila-palmares.gano .palmares-ganador {
  display: none;
}

/* Cada locke: la fila de siempre y, debajo, sus detalles plegables */
.fila-palmares {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
}

#dialogo-palmares {
  width: min(52rem, 94vw);
}

.fila-tipo input[type="text"],
.fila-palmares input[type="text"],
.fila-palmares input[type="date"],
.fila-palmares input[type="number"],
.fila-palmares select {
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.9rem;
}

.fila-tipo input[type="text"] {
  flex: 1;
}

.fila-palmares .palmares-nombre {
  flex: 2;
}

.fila-palmares .palmares-nota {
  flex: 1;
}

.fila-palmares .palmares-tipo {
  flex: 0 0 9rem;
}

/* ---------- Detalles de cada locke (juego, fecha, participantes) ---------- */

.palmares-mas {
  margin-top: 0.4rem;
}

.palmares-mas summary {
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.75;
  user-select: none;
}

.palmares-mas summary:hover {
  opacity: 1;
}

.palmares-resumen {
  font-weight: normal;
  opacity: 0.8;
}

.palmares-detalles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  margin-top: 0.5rem;
}

.palmares-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.palmares-campo > span:first-child {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.palmares-campo.participantes {
  flex-basis: 100%;
}

.participante {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(var(--t-tinte), 0.03);
}

.participante-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* ROM superada: casilla con forma de chip */
.participante-rom {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.participante-rom input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.participante-rom span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-gris);
  font-size: 0.78rem;
  font-weight: bold;
}

.participante-rom input:checked + span {
  background: rgba(var(--t-bien-rgb), 0.2);
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
  box-shadow: inset 0 0 0 1px rgba(var(--t-bien-rgb), 0.5);
}

.participante-rom input:focus-visible + span {
  outline: 2px solid rgb(var(--color-vista));
}

.participante-rom .icono {
  width: 0.95rem;
  height: 0.95rem;
}

/* Equipo final y MVP */
.participante-equipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.participante-mvp {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

button.cara-equipo {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

button.cara-equipo:hover img {
  box-shadow: 0 0 0 2px rgba(var(--color-vista), 0.5);
}

button.cara-equipo.mvp:hover img {
  box-shadow: 0 0 0 2px #f1c40f;
}

.palmares-elegir-equipo,
.palmares-anadir-combate {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: bold;
  cursor: pointer;
}

.palmares-anadir-combate {
  align-self: flex-start;
}

.palmares-elegir-equipo:hover,
.palmares-anadir-combate:hover {
  background: var(--t-control-2);
}

.palmares-elegir-equipo .icono,
.palmares-anadir-combate .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Combates */
.palmares-campo.palmares-combates {
  flex-basis: 100%;
}

.palmares-combate {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(var(--t-tinte), 0.03);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.palmares-combate-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.palmares-combate-nombre {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 16rem;
}

.palmares-combate-ganador,
.palmares-combate-marcador {
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.8rem;
}

.palmares-quitar-combate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.palmares-quitar-combate:hover {
  background: var(--t-rojo-oscuro);
}

.palmares-quitar-combate .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.palmares-combate-equipos {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.palmares-combate-equipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.palmares-combate-quien {
  min-width: 5rem;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0.8;
}

.palmares-combate-equipo .cara-equipo img {
  width: 1.5rem;
  height: 1.5rem;
}

/* En el recuadro de un locke: ROM, equipo final y combates */
.flotante-participantes li {
  flex-wrap: wrap;
}

.flotante-quien {
  margin-right: auto;
}

.flotante-rom {
  display: inline-flex;
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.flotante-participantes li .flotante-rom .icono {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.flotante-equipo {
  flex-basis: 100%;
}

/* En el locke de un amigo en el que sales: poner tu equipo final */
.flotante-mi-equipo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border: none;
  border-radius: 0.35rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: bold;
  cursor: pointer;
}

.flotante-mi-equipo:hover {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

.flotante-mi-equipo .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.flotante-equipo .cara-equipo img,
.flotante-combate-equipo .cara-equipo img {
  width: 1.45rem;
  height: 1.45rem;
}

.flotante-combates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flotante-combates li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--t-fondo-2);
}

.flotante-combate-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.flotante-combate-cabeza .icono {
  width: 0.8rem;
  height: 0.8rem;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.flotante-combate-equipos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.participante .participante-nombre {
  flex: 1;
  max-width: 16rem;
}

.participante .participante-vidas {
  width: 4.5rem;
}

.participante-corazon {
  display: inline-flex;
  color: #e74c3c;
}

.participante-corazon .icono {
  width: 1rem;
  height: 1rem;
}

.participante-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.participante-quitar:hover {
  background: var(--t-rojo-oscuro);
}

.participante-quitar .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Desplegable con tus amigos para meterlos como participantes (o «Otra persona») */
.participante-elegir {
  align-self: flex-start;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.participante-elegir:hover {
  background: var(--t-control-2);
}

/* Casilla «Vidas ilimitadas» */
.palmares-casilla {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.4rem;
  padding-bottom: 0.45rem;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

/* Con vidas ilimitadas no hay vidas que apuntar: se esconden y sale ∞ */
.palmares-detalles.ilimitadas .numero:has(.participante-vidas),
.palmares-detalles.ilimitadas .con-vidas {
  display: none;
}

.palmares-detalles.ilimitadas .participante-corazon::after {
  content: "∞";
  margin-left: 0.2rem;
  font-weight: bold;
}

.fila-tipo input[type="color"] {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: none;
  cursor: pointer;
}

.tipo-quitar,
.palmares-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.tipo-quitar .icono,
.palmares-quitar .icono {
  width: 1rem;
  height: 1rem;
}

.tipo-quitar:hover,
.palmares-quitar:hover {
  background: var(--t-rojo-oscuro);
}

.tipos-anadir,
.palmares-anadir {
  margin-top: 0.6rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.tipos-anadir:hover,
.palmares-anadir:hover {
  background: var(--t-control-2);
}

#tipos-guardar,
#palmares-guardar {
  background: var(--t-bien-oscuro);
  color: #fff;
}

#tipos-cancelar,
#palmares-cancelar {
  background: var(--t-control);
  color: var(--t-texto);
}

/* De Eevee (una por Eeveelution y la de Eevee): el dibujo es pixel art (css/fondos-pixel.css, de
   herramientas/generar-fondos-pixel.mjs); aquí, sus dos colores (--c1, --c2) para el borde y el nombre. */
.ficha-jugador.fondo-eevee:not(.mia):not(.conectado) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--c1) 60%, transparent);
}

.perfil-cabeza.fondo-eevee,
.lleva-fondo.fondo-eevee,
.logro-premio.fondo-eevee {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 65%, transparent);
}

.perfil-fondo.fondo-eevee .perfil-fondo-nombre {
  color: color-mix(in srgb, var(--c1) 65%, #fff);
}

.fondo-eevee.fondo-eevee-eevee {
  --c1: #c8955a;
  --c2: #f3e3b8;
}

.fondo-eevee.fondo-eevee-vaporeon {
  --c1: #4fa3e0;
  --c2: #a8e0ff;
}

.fondo-eevee.fondo-eevee-jolteon {
  --c1: #f5d23a;
  --c2: #fff3a0;
}

.fondo-eevee.fondo-eevee-flareon {
  --c1: #f2733a;
  --c2: #ffd27a;
}

.fondo-eevee.fondo-eevee-espeon {
  --c1: #d48fd6;
  --c2: #ff5c7a;
}

.fondo-eevee.fondo-eevee-umbreon {
  --c1: #f1c40f;
  --c2: #3b3f5c;
}

.fondo-eevee.fondo-eevee-leafeon {
  --c1: #7bc96f;
  --c2: #f3e7a6;
}
.fondo-eevee.fondo-eevee-glaceon {
  --c1: #7fd6e8;
  --c2: #ffffff;
}

.fondo-eevee.fondo-eevee-sylveon {
  --c1: #f6a5c0;
  --c2: #7fc4f0;
}


/* ---------- Mis lockes ganados: con el estilo de la ventana de crear un locke ---------- */

#dialogo-palmares {
  width: min(56rem, 94vw);
  padding: 1.5rem 1.6rem 1.3rem;
  border-top: 4px solid rgb(var(--color-vista));
  border-radius: 1rem;
}

#dialogo-palmares h2 {
  margin: 0 0 0.4rem;
  font-size: 1.9rem;
  line-height: 1.05;
}

#dialogo-palmares > p {
  margin: 0 0 1rem;
  opacity: 0.7;
}

#dialogo-palmares .palmares-lista {
  gap: 0.7rem;
  padding-right: 0.3rem;
}

/* Cada locke ganado, como un bloque con borde de línea de puntos */
#dialogo-palmares .fila-palmares {
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px dashed rgba(var(--t-tinte), 0.24);
  border-radius: 0.9rem;
}

#dialogo-palmares .dialogo-botones {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.24);
}

#dialogo-palmares .dialogo-botones button {
  padding: 0.6rem 1.3rem;
  font-family: inherit;
  font-size: 1rem;
}

/* Cada combate: una fila por participante, con sus combates ganados, y el que gana marcado */
.palmares-combate-equipo {
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  box-shadow: inset 3px 0 0 rgba(var(--t-tinte), 0.15);
}

.palmares-combate-equipo.gana {
  background: color-mix(in srgb, #f1c40f 10%, var(--t-fondo-2));
  box-shadow: inset 3px 0 0 #f1c40f;
}

.palmares-combate-quien {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 7rem;
  font-size: 0.9rem;
  opacity: 1;
}

.palmares-corona {
  display: inline-flex;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.palmares-corona .icono {
  width: 1rem;
  height: 1rem;
}

.palmares-combate-equipo .numero {
  flex: none;
  width: 4.6rem;
}

.palmares-combate-equipo .palmares-combate-puntos {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

/* «En directo»: está jugando desde «Jugar» y se le puede ver (js/jugar/directo.js) */
.ver-directo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.ver-directo:hover {
  background: var(--t-control-2);
}

.ver-directo[hidden] {
  display: none;
}