/* ANÁLISIS — la base de datos de jugadores.
   Es una pantalla de CONSULTA: se viene a buscar, comparar y salir. Manda la densidad y la
   legibilidad, no el lucimiento — el oro se guarda para lo que hay que localizar de un vistazo
   (el overall) y para lo que se mueve (subidas y bajadas). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { background: var(--negro); color: var(--crema); font-family: "Barlow Condensed", system-ui, sans-serif; }

.app { width: 100%; max-width: var(--ancho-app); padding-bottom: 24px; }

/* ── Cabecera ───────────────────────────────────────────────────────────────────── */
.an-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 12px 10px;
}
.an-titulo {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.an-cuantos { font-size: 13px; letter-spacing: 0.5px; color: var(--crema-suave); }

/* ── Buscador ───────────────────────────────────────────────────────────────────── */
.an-buscador { padding: 0 12px 14px; }
.an-buscar-campo {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  /* 16px o iOS hace zoom al enfocar y deja la pantalla torcida. */
  font-size: 16px;
}
.an-buscar-campo:focus { outline: none; border-color: var(--oro); }
.an-buscar-campo::placeholder { color: var(--crema-tenue); }

/* ── LO QUE HAY QUE SABER ─────────────────────────────────────────────────────────
   Ronda 2 de diseño (Jepi, 16-oct-2026). Tres tarjetas que se deslizan de lado y se paran cada
   una en su sitio (`scroll-snap`). Cada tarjeta lleva su color: azul la racha (el tramo "alto"
   de los puntos), verde lo que sube, rojo las bajas. */
.an-destacados {
  display: flex;
  gap: 10px;
  padding: 0 12px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.an-destacados::-webkit-scrollbar { display: none; }
.an-dest {
  --dest-color: var(--pts-alto);
  flex: 0 0 272px;
  scroll-snap-align: start;
  padding: 12px 12px 4px;
  border: 1px solid color-mix(in srgb, var(--dest-color) 40%, transparent);
  border-radius: 14px;
  background: var(--panel);
}
.an-dest--suben { --dest-color: var(--pts-bueno); }
.an-dest--bajas { --dest-color: var(--rojo); }
.an-dest-titulo {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--dest-color);
}
.an-dest-sub { font-size: 13px; color: var(--crema-suave); margin: 2px 0 6px; }
.an-dest-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 5px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.an-dest-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.an-dest-nombre { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-dest-detalle { font-size: 12px; color: var(--crema-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-dest-dato { font-family: "Bebas Neue", Impact, sans-serif; font-size: 22px; line-height: 1; color: var(--dest-color); }

/* ── LA FOTO, REDONDA Y CON EL COLOR DE SU POSICIÓN ───────────────────────────────
   El borde dice la posición —los mismos colores que el campo— y ahorra la pastilla "DL". La foto
   es un recorte de la cabeza y los hombros: se encaja por arriba para que no se corte la cara. */
.an-retrato {
  --retrato: 52px;
  position: relative;
  flex: 0 0 auto;
  width: var(--retrato);
  height: var(--retrato);
  border-radius: 50%;
  border: 2px solid var(--pos-dl);
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2a2a2a, var(--tinta));
}
.an-retrato img {
  position: absolute;
  left: 0;
  top: 6%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.an-retrato.pt { border-color: var(--pos-pt); }
.an-retrato.df { border-color: var(--pos-df); }
.an-retrato.mc { border-color: var(--pos-mc); }
.an-retrato.dl { border-color: var(--pos-dl); }
.an-retrato--peque { --retrato: 40px; }
.an-retrato--grande { --retrato: 88px; border-width: 3px; }

/* ── FILTROS EN PASTILLAS ─────────────────────────────────────────────────────────
   Todas a la vista y de un toque (Jepi, 16-oct-2026), en vez de tres desplegables. La activa, en
   oro lleno. */
.an-posiciones { display: flex; gap: 6px; padding: 0 12px 8px; }
.an-pos-boton,
.an-chip {
  border: 1px solid color-mix(in srgb, var(--oro) 25%, transparent);
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.an-pos-boton { flex: 1; min-height: 44px; border-radius: 10px; font-size: 15px; letter-spacing: 0.5px; }
/* El color de la posición asoma en el borde de abajo, para unir la pastilla con la foto. */
.an-pos-boton.pt { box-shadow: inset 0 -3px 0 var(--pos-pt); }
.an-pos-boton.df { box-shadow: inset 0 -3px 0 var(--pos-df); }
.an-pos-boton.mc { box-shadow: inset 0 -3px 0 var(--pos-mc); }
.an-pos-boton.dl { box-shadow: inset 0 -3px 0 var(--pos-dl); }
.an-chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.an-chips::-webkit-scrollbar { display: none; }
.an-chips-grupo { display: flex; gap: 6px; flex: 0 0 auto; }
.an-chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; white-space: nowrap; }
.an-pos-boton.activa,
.an-chip.activa,
.an-orden-boton.activa { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--tinta); }

/* ── ORDENAR POR ──────────────────────────────────────────────────────────────── */
.an-ordenar { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; }
.an-ordenar-etq { flex: 0 0 auto; font-size: 13px; color: var(--crema-suave); }
.an-orden {
  flex: 1;
  display: flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.an-orden-boton {
  flex: 1;
  min-height: 38px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--crema-suave);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ── LA LISTA ─────────────────────────────────────────────────────────────────────
   Una fila que cabe entera en el móvil: foto, overall, quién es y su forma, y la cifra del orden. */
.an-lista-cab {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px 2px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--crema-suave);
}
.an-lista { display: flex; flex-direction: column; padding: 0 12px; }

.an-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.an-fila:active { background: rgba(255, 255, 255, 0.04); }
.an-fila:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }

.an-fila-ovr { flex: 0 0 36px; display: flex; flex-direction: column; align-items: center; }
.an-ovr {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--oro-claro);
}
.an-cambio { font-size: 12px; font-weight: 700; min-height: 14px; }
.an-cambio.sube { color: var(--pts-bueno); }
.an-cambio.baja { color: var(--rojo); }

.an-fila-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* El texto se trunca solo —`min-width: 0` es lo que deja que un flex hijo encoja por debajo de su
   contenido—; el aviso, si lo hay, es `flex: 0 0 auto` y nunca desaparece detrás de los puntos
   suspensivos, aunque el nombre sea largo. */
.an-fila-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.an-fila-nombre-texto {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-fila-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-fila-club {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--crema-suave);
}
.an-fila-club-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El escudo del club, a color siempre, como en la carta del Draft. */
.an-fila-escudo { flex: 0 0 auto; width: 15px; height: 15px; object-fit: contain; }

.an-fila-cifra { flex: 0 0 48px; display: flex; flex-direction: column; align-items: flex-end; }
/* LA MISMA FAMILIA QUE EL OVERALL (Jepi, 3-sep-2026): un número en Barlow al lado del OVR en
   Bebas Neue se leía como de otra pantalla. */
.an-num { font-family: "Bebas Neue", Impact, sans-serif; font-size: 24px; line-height: 1; color: var(--crema); }
.an-num-etq { font-size: 11px; color: var(--crema-suave); }
/* El guion de "todavía no": apagado, para que no compita con lo que sí tiene dato. */
.an-plano { color: var(--crema-tenue); font-size: 12px; }

/* EL AVISO, EN PALABRAS Y JUNTO AL NOMBRE — solo en quien tiene algo que avisar (Jepi, 3-sep). */
.an-aviso {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.an-aviso.injured,
.an-aviso.suspended { background: var(--rojo-fondo); color: var(--rojo); border: 1px solid var(--rojo-borde); }
.an-aviso.doubt {
  background: color-mix(in srgb, var(--pts-algo) 12%, transparent);
  color: var(--pts-algo);
  border: 1px solid color-mix(in srgb, var(--pts-algo) 40%, transparent);
}

/* LA FORMA: cinco cuadraditos con la MISMA escala de color que el campo y las cartas. En la lista
   van sin número —se leen de reojo—; en la ficha, grandes y con su número. */
.an-forma { display: flex; gap: 3px; flex: 0 0 auto; }
.an-forma-slot {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.10);
  font-family: "Bebas Neue", Impact, sans-serif;
  line-height: 1;
  /* token-aparte: mismo papel que `--tinta` —tinta oscura sobre un fondo de color— y mismo valor.
     Se escribe porque estas casillas viven fuera de `.carta`, donde `--tinta` sí es esta, pero
     dejarlo atado a un token que otra pantalla redefine es lo que ya mordió una vez. */
  color: #0a0a0a;
}
.an-forma-slot.alto { background: var(--pts-alto); }
.an-forma-slot.bueno { background: var(--pts-bueno); }
.an-forma-slot.algo { background: var(--pts-algo); }
.an-forma-slot.cero { background: var(--pts-cero); }
.an-forma-slot.negativo { background: var(--pts-negativo); }
/* PENDIENTE: su partido no ha empezado. Ni el gris del cero ni el hueco del "no jugó": un borde
   discontinuo, que se lee como "aún por llenar". */
.an-forma-slot.pendiente { background: transparent; border: 1px dashed var(--crema-tenue); color: var(--crema-suave); }
.an-forma--grande { gap: 6px; margin-bottom: 4px; }
.an-forma--grande .an-forma-slot { flex: 1; width: auto; height: 44px; border-radius: 8px; font-size: 22px; }
.an-forma--grande .an-forma-slot:not(.alto):not(.bueno):not(.algo):not(.cero):not(.negativo) { color: var(--crema-tenue); }
.an-forma-pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--crema-tenue); margin-bottom: 18px; }

/* CHAMPIONS, EN ANÁLISIS — el mismo jugador puede vivir aquí dos veces: una con su overall de liga
   y otra con el de Champions (dos ids distintos). Pedido por Jepi el 3-sep-2026: liga en negro (lo
   de siempre) y Champions en azul.
   token-aparte: este valor coincide con `--negro` de `body.tema-champions` en marca.css y NO es
   ese token — ese interruptor pinta TODA la app a la vez, y aquí liga y Champions conviven en la
   misma lista, así que no puede depender de una clase en el `body`. */
.an-fila[data-competicion="champions"] { background: #041c4a; margin: 0 -12px; padding: 8px 12px; width: calc(100% + 24px); }

.an-vacio { padding: 28px 16px; text-align: center; font-size: 15px; color: var(--crema-suave); }

.an-mas {
  display: block;
  width: calc(100% - 24px);
  margin: 14px 12px 0;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--crema);
  font: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}

/* ── La ficha ───────────────────────────────────────────────────────────────────── */
.an-ficha { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; }
.an-ficha-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.an-ficha-caja {
  position: relative;
  width: 100%;
  max-width: var(--ancho-app);
  margin: 0 auto;
  /* Hasta el 88% del alto, y el fondo NO puede desplazarse detrás.
     EL QUE SE DESPLAZA ES EL CUERPO, NO LA CAJA, y eso es lo que mantiene la ✕ en su sitio: es
     `absolute` contra la caja, así que cuando la que se desplazaba era la caja se iba con el
     contenido. Medido en un iPhone SE (375×667): el panel mide 698 px, entran 586, y al bajar del
     todo la ✕ se quedaba 21 px por encima del borde. En pantallas altas no pasaba y por eso no se
     veía. Con el desplazamiento en el cuerpo, la caja no se mueve y la ✕ tampoco. */
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Sin hueco abajo AQUÍ: ese hueco es el de la barra y ahora lo pone el cuerpo, que es quien se
     desplaza. Puesto en la caja se quedaba como una franja vacía permanente de 110 px al pie del
     panel —siempre visible, ya estuvieras arriba o abajo— en vez de ser el final del contenido. */
  padding: 18px 16px 0;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--oro) 30%, transparent);
  /* OPACO, Y NO `--panel`. `--panel` es blanco al 4,5 % —translúcido a propósito, para que las
     cajas de dentro de una pantalla respiren sobre el fondo—, pero aquí hay que TAPAR: con él, la
     barra de pestañas se transparentaba a través de la ficha y sus iconos se cruzaban con el
     texto. Se vio en la captura, no leyendo el CSS. */
  background: #14120e;
}
/* `min-height: 0` no es un adorno: sin él un hijo de flex no se encoge por debajo de su contenido
   y el `overflow-y` no llega a activarse nunca. */
.an-ficha-cuerpo {
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* EL HUECO DE ABAJO ES EL DE LA BARRA, aunque la ficha vaya por encima de ella: sin él, el
     último párrafo queda justo sobre las cinco pestañas y se lee incómodo aunque no se solape. */
  padding-bottom: calc(20px + var(--alto-barra) + var(--colchon-barra));
}
/* LA ✕ SE QUEDA QUIETA MIENTRAS EL CUERPO PASA POR DEBAJO, así que necesita fondo propio: sin él
   se mezclaba con lo que fuera desfilando —se vio cruzada con "-1 temporada"— y dejaba de leerse
   como un botón. Redonda y opaca, tapa lo justo. */
.an-ficha-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #14120e;
  color: var(--crema-suave);
  font-size: 18px;
  cursor: pointer;
}
/* ── El aviso de baja ──────────────────────────────────────────────────────────────
   Ronda 2 (16-oct-2026): una caja a lo ancho con el titular en mayúsculas y el motivo debajo,
   en palabras, en vez de una pastilla con todo en una línea. */
.an-ficha-estado {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
}
.an-ficha-estado.injured,
.an-ficha-estado.suspended {
  background: var(--rojo-fondo);
  color: var(--rojo);
  border: 1px solid var(--rojo-borde);
}
.an-ficha-estado.doubt {
  background: color-mix(in srgb, var(--pts-algo) 12%, transparent);
  color: var(--pts-algo);
  border: 1px solid color-mix(in srgb, var(--pts-algo) 40%, transparent);
}
.an-ficha-estado-titulo { font-family: "Bebas Neue", Impact, sans-serif; font-size: 18px; letter-spacing: 1px; }
.an-ficha-motivo { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--crema); opacity: 0.85; }

/* ── Los dos bloques: EN SU LIGA y EN DIVIETO ─────────────────────────────────────
   Separados a propósito: lo que lleva en su liga de verdad y lo que ha hecho con nosotros son dos
   cosas distintas, y en la ficha vieja salían mezcladas ("Puntos" junto a "Puntos 26/27"). */
.an-bloque-titulo {
  margin: 0 0 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--crema);
}
.an-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.an-cifra { padding: 10px 4px; border-radius: 12px; background: var(--panel); text-align: center; }
.an-cifra-valor {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.an-cifra-label { font-size: 12px; line-height: 1.2; color: var(--crema-suave); margin-top: 4px; }

/* Cuando no hay historia que dibujar se dice, en el hueco donde iría la curva. */
.an-grafica-vacia { font-size: 13px; color: var(--crema-suave); padding: 10px 0; }

/* ── La cabecera del jugador ─────────────────────────────────────────────────────
   `flex-shrink: 0` para que no la aplaste el cuerpo cuando el contenido es largo: es la zona que
   NO se desplaza, y encogerse sería justo lo contrario de lo que hace ahí. La foto, grande y
   redonda con el color de su posición (`.an-retrato--grande`). */
.an-ficha-cabecera { flex-shrink: 0; }
.an-jug-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 44px; }
.an-jug-quien { flex: 1; min-width: 0; }
.an-jug-nombre {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--oro-claro);
}
.an-jug-sub { margin-top: 4px; font-size: 14px; color: var(--crema-suave); }


/* ── LA COTIZACIÓN DEL OVERALL ─────────────────────────────────────────────────────
   Con forma de gráfico de valores, que es como lo pidió Jepi: el número grande de hoy, las dos
   variaciones, el área bajo la línea y la rejilla con sus alturas. `currentColor` en el degradado
   hace que el área herede el oro de la línea sin repetir el color en dos sitios. */
.an-cotiza { margin-bottom: 18px; color: var(--oro-claro); }
.an-cotiza-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.an-cotiza-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.an-cotiza-ahora {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--oro-claro);
}
.an-cotiza-deltas { text-align: right; }
.an-cotiza-delta { font-size: 12px; font-weight: 700; color: var(--crema-suave); line-height: 1.5; }
.an-cotiza-delta.sube { color: var(--pts-bueno); }
.an-cotiza-delta.baja { color: var(--rojo); }
/* SIN ALTO FIJO. Con `height` puesto a mano y el ancho al 100%, el `viewBox` se encaja dentro
   centrado y deja dos bandas vacías arriba y abajo: la curva salía flotando en medio de un hueco.
   Dejando que mande la proporción del `viewBox`, el recuadro es exactamente el dibujo. */
.an-cotiza-svg { display: block; width: 100%; height: auto; }
.an-cotiza-rejilla { stroke: var(--borde); stroke-width: 1; }
.an-cotiza-marca { fill: var(--crema-tenue); font-size: 9px; font-family: "Barlow Condensed", system-ui, sans-serif; }
.an-cotiza-linea { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.an-cotiza-area { stroke: none; }
.an-cotiza-punto { fill: currentColor; opacity: 0.55; }
.an-cotiza-hoy { fill: currentColor; }
.an-cotiza-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--crema-tenue); margin-top: 2px; }

/* ── Casa y fuera ──────────────────────────────────────────────────────────────── */
.an-reparto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.an-reparto-caja { padding: 12px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.an-reparto-titulo { font-size: 12px; letter-spacing: 0.5px; color: var(--crema-suave); }
.an-reparto-media {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  line-height: 1.1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.an-reparto-pie { font-size: 11px; color: var(--crema-tenue); }

/* Lo que todavía no hay, dicho. En su caja y apagado: es una promesa, no un aviso. */
.an-pendiente {
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed var(--borde);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--crema-suave);
}