/* ══════════════════════════════════════════════════════════════════
   Fantasy Asesor — la app

   El mercado es un tablero de salidas: filas que caducan, relojes que
   corren y un reinicio diario a las 12:27 que lo cambia todo de golpe.
   De ahí sale todo lo de abajo — la condensada, las filas con su hora a
   la derecha, y la franja de cuenta atrás que preside la pantalla.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Oscuro de verdad, como el juego: el fondo casi negro hace que las cifras
     salten. El azul queda solo como matiz en los grises, no como ambiente. */
  --noche:    #0A0C11;
  --panel:    #14171E;
  --panel-2:  #1C2029;
  --linea:    #232833;
  --tiza:     #EDF1F7;
  --humo:     #808A9B;
  --humo-2:   #5C6575;

  --ambar:    #F5A623;   /* el tiempo: relojes, cierres, lo que urge */
  --ambar-op: #2A1F0C;

  --sube:     #3FBF7F;
  --sube-op:  #0F2419;
  --baja:     #E5544B;
  --baja-op:  #2A1412;

  --alto: 'Arial Narrow', 'Liberation Sans Narrow', sans-serif-condensed, system-ui, sans-serif;
  --texto: system-ui, 'Segoe UI', Roboto, sans-serif;
  --dato: ui-monospace, 'Roboto Mono', 'Cascadia Mono', Consolas, monospace;

  /* Los controles nativos —el desplegable de los filtros, la barra de scroll,
     el teclado al escribir la clave— los pinta el sistema, no esta hoja. Sin
     esto salían en blanco sobre una app oscura. */
  color-scheme: dark;

  /* Esquinas casi rectas. El redondeo uniforme de todo delata plantilla, y el
     juego tampoco lo usa: sus tarjetas y botones son prácticamente cuadrados. */
  --r: 3px;
  --cabecera: 106px;
  --barra: 58px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    /* También los controles nativos, o el desplegable saldría oscuro sobre una
       app clara: el mismo problema al revés. */
    color-scheme: light;

    --noche:    #F2F5F9;
    --panel:    #FFFFFF;
    --panel-2:  #E9EEF5;
    --linea:    #D6DEE9;
    --tiza:     #121A26;
    --humo:     #5E6E85;
    --humo-2:   #7B8AA0;
    --ambar:    #B06E00;
    --ambar-op: #FBEFD8;
    --sube:     #16794F;
    --sube-op:  #E1F3EA;
    --baja:     #C0362D;
    --baja-op:  #FBE9E7;
  }
}

* { box-sizing: border-box; }

/* El documento no se desplaza: lo hace `main` por dentro.

   Es la diferencia entre una página y una app. Con el scroll en el documento,
   la cabecera y la barra son `fixed` y el navegador tiene que recolocarlas en
   cada fotograma; en Android eso se ve —la barra de pestañas se hundía un
   instante al cambiar de pantalla o al saltar el scroll al principio—. Con el
   armazón quieto y solo el contenido moviéndose por dentro, no hay nada que
   recolocar. Es lo mismo que ya hacía la ficha, que por eso se sentía firme. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
}

body {
  background: var(--noche);
  color: var(--tiza);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Nada de seleccionar texto ni de menús de "copiar / buscar en Google" al
   mantener el dedo encima: era lo que más delataba que esto es una página. Se
   devuelve donde de verdad se escribe o se copia. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Quita el retardo del doble toque y, con él, el zoom por doble toque: una
     app no hace zoom, y ese medio segundo de espera se notaba en cada pulsación. */
  touch-action: manipulation;
}
input, textarea, .selecciona {
  -webkit-user-select: text;
  user-select: text;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }

/* El dedo tiene que notar que ha dado. Sin esto, entre la pulsación y la ficha
   había un hueco en el que no pasaba nada y se acababa pulsando dos veces.
   `:active` dura lo que dura el dedo encima, así que basta con que sea sutil. */
[data-jugador]:active,
[data-rival]:active,
.filtro:active,
.pliegue summary:active {
  background: var(--linea);
  transition: background 0.06s;
}
.barra button:active .ic,
.refrescar:active,
.cerrar:active,
.seguir:active {
  transform: scale(0.9);
  transition: transform 0.06s;
}

/* ─────────────────────── cabecera ─────────────────────── */

.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: var(--noche);
  border-bottom: 1px solid var(--linea);
  padding: max(10px, env(safe-area-inset-top)) 14px 0;
}

.cabecera-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
}

.titulo {
  font-family: var(--alto);
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}

.frescura {
  font-family: var(--dato);
  font-size: 10px;
  color: var(--humo-2);
  text-align: right;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-left: auto;
}
.frescura b { color: var(--humo); font-weight: 400; }

.refrescar {
  font-size: 19px;
  line-height: 1;
  color: var(--humo);
  padding: 4px 2px 4px 8px;
  flex: 0 0 auto;
}
.refrescar.girando {
  color: var(--ambar);
  animation: girar 1.1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* La franja del reinicio: el dato del que dependen todos los demás.
   Todo el juego gira alrededor de las 12:27. */
.reinicio {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0 8px;
  border-top: 1px solid var(--linea);
}
.reinicio .rot {
  font-family: var(--dato);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo-2);
  white-space: nowrap;
}
.reinicio .cuenta {
  font-family: var(--dato);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
  letter-spacing: 0.03em;
}
.reinicio .via {
  flex: 1;
  height: 2px;
  background: var(--linea);
  border-radius: 1px;
  overflow: hidden;
}
.reinicio .via i {
  display: block;
  height: 100%;
  background: var(--ambar);
  transition: width .6s ease;
}

/* ─────────────────────── contenido ─────────────────────── */

main {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--cabecera) + 8px) 12px calc(var(--barra) + 26px);
  /* El eje vertical es del navegador y el horizontal es nuestro. Sin esto,
     Android empezaba a desplazar en cuanto el dedo se torcía un poco y el
     gesto competía con el scroll en lugar de sustituirlo. */
  touch-action: pan-y;
  /* Nada de arrastrar lo que haya detrás al llegar a un extremo: ese tirón de
     más era lo que dejaba el contenido "queriendo seguir" y luego recolocarse
     de golpe. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.vista { display: none; flex-direction: column; gap: 11px; }
.vista.activa {
  display: flex;
  /* Solo para que el rebote al soltar un arrastre corto sea suave. La entrada
     de una pestaña nueva no va por aquí, va por las animaciones de abajo. */
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Mientras el dedo manda, el movimiento es el del dedo: cualquier transición
   aquí se sentiría como retraso. */
.vista.arrastrando { transition: none; }

/* La pantalla entra por el lado en el que estaba, que es lo que convierte seis
   pestañas sueltas en una fila por la que te mueves. Corto a propósito: pasados
   los 200 ms deja de leerse como respuesta y empieza a estorbar.

   Solo se desplaza, no se desvanece: el fundido hacía que la pantalla pareciera
   una hoja suelta en vez de un panel que llega a su sitio. */
@keyframes entra-dcha {
  from { transform: translateX(26px); }
  to   { transform: translateX(0); }
}
@keyframes entra-izq {
  from { transform: translateX(-26px); }
  to   { transform: translateX(0); }
}
.vista.desde-dcha { animation: entra-dcha 0.19s cubic-bezier(0.22, 0.61, 0.36, 1); }
.vista.desde-izq  { animation: entra-izq  0.19s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Los tres números que condicionan cualquier decisión del día. Van arriba y
   en una línea; antes vivían en una tarjeta al final, que es justo donde no
   se miran. */
.estado-equipo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.estado-equipo div {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 1px solid var(--linea);
}
.estado-equipo div:first-child { border-left: none; }
.estado-equipo .rot {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo-2);
}
/* Una nota al pie de la tira de cifras: el dinero que puede entrar de tus
   ventas. Va fuera del recuadro porque no es un dato más de la fila —dentro no
   cabía y descuadraba la celda— y en gris porque es dinero que aún no tienes. */
.nota-tira {
  font-family: var(--dato);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--humo-2);
  margin: -5px 0 0;
  padding-left: 12px;
}
.estado-equipo .val {
  font-family: var(--alto);
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.estado-equipo .val.poco { color: var(--baja); }

/* ── el perfil de la liga ────────────────────────────────────────────────────
   Quién eres y cómo vas, en la entrada de la app. El puesto es el marcador de
   la temporada y va con el nombre; las tres cifras de abajo son tus recursos,
   que es otra cosa. */
.perfil-liga {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "escudo quien" "cifras cifras";
  gap: 12px 13px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 13px;
}
.perfil-liga.sin-escudo {
  grid-template-columns: 1fr;
  grid-template-areas: "quien" "cifras";
}

/* El hueco de la foto: por ahora una inicial, y el día que se pueda subir una
   entra en el mismo sitio sin mover nada. */
.perfil-liga .escudo {
  grid-area: escudo;
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  background: var(--panel-2);
  border: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--alto);
  font-size: 26px;
  color: var(--humo);
}
.perfil-liga .quien {
  grid-area: quien;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.perfil-liga .nombre {
  font-family: var(--alto);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perfil-liga .puesto {
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.perfil-liga .cifras {
  grid-area: cifras;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border-radius: 2px;
  overflow: hidden;
}
.perfil-liga .cifras > span {
  background: var(--panel);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.perfil-liga .cifras i {
  font-family: var(--dato);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo-2);
  font-style: normal;
}
.perfil-liga .cifras b {
  font-family: var(--alto);
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.rotulo {
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--humo-2);
  margin: 6px 0 -3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.rotulo.urgente { color: var(--ambar); }
.rotulo.urgente::after { background: var(--ambar-op); }

/* ─────────────────────── filas del tablero ─────────────────────── */

/* La fila es la pieza que se repite por toda la app, así que su densidad
   marca la de todo. Antes metía siete u ocho datos en una línea; ahora son
   tres zonas claras —quién, qué y cuánto— con aire entre ellas. */
.fila {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 12px 13px;
  width: 100%;
  text-align: left;
  transition: border-color .15s, transform .1s;
}
.fila:active { transform: scale(.985); }
.fila.pulsable:hover { border-color: var(--humo-2); }

.fila.ya   { border-left: 3px solid var(--sube); }
.fila.reloj{ border-left: 3px solid var(--ambar); }
.fila.mala { border-left: 3px solid var(--baja); }
.fila.gris { opacity: .55; }

/* Reconocer una cara es instantáneo; leer un nombre entre cien, no. */
.retrato {
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: var(--panel-2);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
/* Las fotos de LaLiga son cuadradas y traen al jugador recortado con bastante
   margen alrededor. Como el hueco también es cuadrado, `cover` no llega a
   recortar nada: se veía la foto entera con sus márgenes, la cara pequeña y el
   cuello flotando en mitad del recuadro. Ampliándola y anclándola arriba, la
   cabeza sube al borde y los hombros llegan abajo, como en el juego. */
.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.07);
  transform-origin: top center;
}
.retrato .iniciales {
  font-family: var(--alto);
  font-size: 15px;
  color: var(--humo-2);
  letter-spacing: 0.02em;
}

/* El escudo del club, en la esquina de la foto y como en el juego. Va sobre un
   fondo del color del panel para que se recorte contra la cara, que si no se
   pierde entre el pelo o la camiseta. */
/* `.retrato img` —dos clases— le ganaba a `.escudito` y le colaba el
   `width: 100%` de las fotos de jugador: el escudo salía del tamaño del
   recuadro entero y tapaba la cara. Se iguala la especificidad nombrando
   también al padre. */
.retrato img.escudito,
.jug .cara img.escudito {
  position: absolute;
  /* Dentro del recuadro, no colgando de la esquina: sobresaliendo se leía como
     un adorno pegado por fuera en vez de como parte de la ficha. */
  left: 1px;
  top: 1px;
  width: 15px;
  height: 15px;
  object-fit: contain;
  transform: none;
  /* Sin fondo ni relleno: los escudos ya vienen recortados y con su propio
     color. Ponerles un círculo detrás los convertía en una chapa que tapaba
     media cara en vez de marcar una esquina. */
  filter: drop-shadow(0 0 1.5px var(--noche));
}

/* En la fila del próximo rival, en lugar de su nombre. Algo más grande que el
   de la esquina de las fotos, porque aquí es el dato en sí y no una marca. */
.escudo-rival {
  width: 19px;
  height: 19px;
  object-fit: contain;
  vertical-align: -5px;
}

/* Casa o avión: dónde se juega el partido. Como emoji y no dibujados, que a
   este tamaño se reconocen antes. Es la excepción a los iconos de trazo del
   resto de la app: aquí son un dato de la fila, no parte de su mobiliario. */
.icono-donde {
  font-size: 13px;
  vertical-align: -1px;
}

.pos {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--noche);
  background: var(--humo);
  border-radius: 3px;
  padding: 2px 5px;
  flex: 0 0 auto;
}
.pos.POR { background: #E08A20; }
.pos.DEF { background: #7C6CD6; }
.pos.CEN { background: #3FBF7F; }
.pos.DEL { background: #E5A93F; }

.centro { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.titulo-fila {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.nombre {
  font-family: var(--alto);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bajo {
  font-size: 12px;
  color: var(--humo);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  align-items: center;
}

.derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
}

/* Valor y precio, como en el juego: el rótulo en gris a la izquierda y la cifra
   pegada al borde derecho. Los dos pares se alinean entre sí porque comparten
   la misma caja, así que las cifras quedan una encima de otra y la diferencia
   se ve sin leer. */
.par {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.par .rot {
  font-family: var(--dato);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo-2);
}
.par .cifra { font-size: 12.5px; }
.par .multi {
  font-family: var(--dato);
  font-size: 9.5px;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
}
/* Verde si pagas menos de lo que vale, rojo si pagas de más. Las clases
   `sube`/`baja` ya llevan esos colores en toda la app. */
.par .multi.sube { color: var(--sube); }
.par .multi.baja { color: var(--baja); }

.cifra {
  font-family: var(--dato);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hora {
  font-family: var(--dato);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
  letter-spacing: 0.03em;
}
.hora.tranquila { color: var(--humo-2); }

.nota {
  font-family: var(--alto);
  font-size: 20px;
  line-height: 1;
  color: var(--ambar);
}
/* Lo que subiría tu once si lo fichas, pegado a la nota: la nota dice lo
   bueno que es, esto dice lo que te sirve a ti. */
.nota .delta {
  font-family: var(--dato);
  font-size: 10.5px;
  color: var(--sube);
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}

.sube { color: var(--sube); }
.baja { color: var(--baja); }
.apagado { color: var(--humo-2); }

/* etiquetas */
.chip {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--linea);
  color: var(--humo);
  white-space: nowrap;
}
/* El color dice CÓMO te afecta, no de qué habla. Elegirlo por el tema —ventas
   en verde, compras en ámbar— hacía que la misma situación cambiara de color
   según la pantalla:
     v (verde) = a tu favor        · tapa tu hueco, por debajo de su valor
     a (ámbar) = en curso o ojo    · compras, vendes, rivales pujando
     r (rojo)  = en tu contra      · sobreprecio, no te alcanza, te lo quitan
     sin clase = un dato, sin juicio */
.chip.v { color: var(--sube); border-color: var(--sube); background: var(--sube-op); }
.chip.a { color: var(--ambar); border-color: var(--ambar); background: var(--ambar-op); }
.chip.r { color: var(--baja); border-color: var(--baja); background: var(--baja-op); }

/* ─────────────────────── tarjetas ─────────────────────── */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tarjeta.destaca { border-color: var(--ambar); }
.tarjeta.alarma  { border-color: var(--baja); }

.tarjeta h3 {
  font-family: var(--alto);
  font-size: 18px;
  margin: 0;
  line-height: 1.1;
}

.dato-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
/* Hijos directos, no descendientes. Sin el `>`, un <span class="sube"> metido
   dentro del valor cuenta como primer hijo —el texto suelto que va delante no
   es un elemento— y se lo tragaba el gris de la etiqueta: las flechas de subida
   y bajada de precio salían apagadas justo donde el color era el dato. */
.dato-fila > span:first-child { color: var(--humo); }
.dato-fila > span:last-child { font-family: var(--dato); font-variant-numeric: tabular-nums; }

.parrafo { font-size: 13.5px; color: var(--humo); line-height: 1.5; margin: 0; }
.parrafo b { color: var(--tiza); font-weight: 600; }

/* Un nombre escrito dentro de un texto también lleva a su ficha. */
.enlace-jugador {
  font: inherit;
  color: var(--tiza);
  font-weight: 600;
  padding: 0;
  border-bottom: 1px dotted var(--humo-2);
  line-height: 1.2;
}
.enlace-jugador:active { color: var(--ambar); border-bottom-color: var(--ambar); }

/* El nombre del rival dentro de una fila, que lleva a su plantilla. Se marca
   con el mismo punteado que los nombres de jugador para que se entienda que
   también se puede tocar, pero sin el peso del blanco: es un dato secundario
   de la fila, no su protagonista. */
.enlace-rival {
  border-bottom: 1px dotted var(--humo-2);
  color: var(--humo);
  /* Un poco de aire arriba y abajo: es un blanco pequeño dentro de una fila
     que también se puede tocar, y sin esto hay que afinar mucho con el dedo. */
  padding: 4px 1px;
  margin: -4px 0;
}
.enlace-rival:active { color: var(--ambar); border-bottom-color: var(--ambar); }
h3 .enlace-jugador {
  font-family: var(--alto);
  font-size: inherit;
  font-weight: 700;
  border-bottom-color: var(--linea);
}

.lista-razones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lista-razones li {
  font-size: 12.5px;
  color: var(--humo);
  padding-left: 13px;
  position: relative;
  line-height: 1.45;
}
.lista-razones li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--humo-2);
}

/* ─────────────────────── filtros ─────────────────────── */

.filtros {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: 2px;
  border: 1px solid var(--linea);
  color: var(--humo);
  background: var(--panel);
  white-space: nowrap;
  flex: 0 0 auto;
}
.filtro[aria-pressed="true"] {
  color: var(--noche);
  background: var(--ambar);
  border-color: var(--ambar);
}

/* Desplegable de filtro. El <select> va desnudo dentro de la etiqueta para que
   el móvil abra su propio selector —que es de lo que más separa una app de una
   página— y la flecha se dibuja aparte, porque la nativa no se puede teñir. */
/* El recuadro lo dibuja la etiqueta, no el <select>: así el nombre del filtro y
   el valor elegido van dentro de la misma píldora y se lee "Orden ·
   Recomendados" de un vistazo, sin tener que abrirlo para saber qué es. */
/* La píldora fija la altura y centra su contenido. Sin altura propia, el rótulo
   y el <select> se apoyaban cada uno donde le tocaba —tienen alturas de línea
   distintas— y todo quedaba pegado arriba. */
.menu {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  gap: 7px;
  padding: 0 24px 0 10px;
  border-radius: 2px;
  border: 1px solid var(--linea);
  background: var(--panel);
  line-height: 1;
}
.menu::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--humo);
  border-bottom: 1.5px solid var(--humo);
  /* Se sube 2px sobre el centro antes de girar: al rotar 45° el cuadrado
     cuelga hacia abajo y sin esto la punta queda por debajo del eje. */
  transform: translateY(-4px) rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;
  pointer-events: none;
}
/* Al abrirlo, la flecha se da la vuelta. Un <select> nativo no avisa de que
   está desplegado, pero recibe el foco al abrirse, y eso basta para acompañar
   el gesto en vez de dejar la flecha quieta. */
.menu:focus-within::after {
  transform: translateY(-1px) rotate(-135deg);
  border-color: var(--ambar);
}
.menu .etiq {
  font-family: var(--dato);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo-2);
  white-space: nowrap;
}
.menu .valor {
  font-family: var(--dato);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--tiza);
  white-space: nowrap;
}
/* El <select> real, invisible y estirado sobre toda la píldora: así se abre
   tocando en cualquier parte y no solo encima de su texto. El valor que se lee
   lo pinta el <span> de arriba. */
.menu select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
}
/* En el escritorio la lista desplegada sí acepta color; en el móvil la dibuja
   el sistema y de eso se encarga `color-scheme`. */
.menu option {
  background: var(--panel);
  color: var(--tiza);
}
.menu:focus-within { border-color: var(--ambar); }
.menu select:focus-visible { outline: none; }

/* Los filtros, a la misma altura entre sí. Por defecto el flex los estira y
   cada uno crecía según lo que llevara dentro. */
.filtros { align-items: center; }

/* ─────────────────────── el campo ─────────────────────── */

.campo {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
  overflow: hidden;
}
.linea-campo { display: flex; justify-content: center; gap: 6px; position: relative; }

/* Los del once, con su cara: reconocer una alineación de un vistazo es
   justo lo que el texto solo no consigue. */
.jug {
  flex: 1 1 0;
  max-width: 66px;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.jug .cara {
  width: 46px;
  height: 46px;
  border-radius: 3px;
  background: var(--panel-2);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Igual que en las filas: ampliada y anclada arriba, para que la cara ocupe el
   recuadro en vez de quedarse pequeña en el centro. */
.jug .cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.07);
  transform-origin: top center;
}
.jug .cara .iniciales { font-family: var(--alto); font-size: 15px; color: var(--humo-2); }
/* La marca de estado va en la esquina, como en la app del juego. */
.jug .marca {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--sube);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #08160F;
  line-height: 1;
}
.jug .marca.mal { background: var(--baja); color: #fff; border-radius: 3px; }

/* La misma esquina sirve para tres lecturas del campo. Con una cifra dentro
   necesita más sitio y un tipo de números, porque "-2" o "13" no caben en el
   círculo pensado para una tilde. */
.jug .marca.cifra {
  width: auto;
  min-width: 17px;
  height: 15px;
  padding: 0 3px;
  border-radius: 3px;
  font-family: var(--dato);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Las dos flechas, cuadradas. El círculo se queda solo para la tilde de "puede
   jugar": si la de subida es redonda y la de bajada cuadrada, además de quedar
   dispares, la redonda se confunde con las cifras de la vista de puntos. */
.jug .marca.bien { background: var(--sube); color: #08160F; border-radius: 3px; }
.jug .marca.sin { background: var(--panel-2); color: var(--humo); border-radius: 3px; }

/* La racha de las últimas cinco, reducida a lo que cabe bajo una cara: aquí no
   caben los números, pero el color ya cuenta la forma de un vistazo. El detalle
   con las cifras sigue estando en la ficha. */
.racha-mini { display: inline-flex; gap: 2px; }
.racha-mini i {
  width: 7px;
  height: 4px;
  border-radius: 1px;
  background: var(--panel-2);
}
.racha-mini i.buena { background: var(--sube-op); box-shadow: inset 0 0 0 1px var(--sube); }
.racha-mini i.grande { background: var(--sube); }
.racha-mini i.mala { background: var(--baja); }
.jug .n {
  font-family: var(--alto);
  font-size: 11.5px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.jug .p {
  font-family: var(--dato);
  font-size: 9px;
  color: var(--humo-2);
  font-variant-numeric: tabular-nums;
}
.jug.riesgo .p { color: var(--baja); }
/* Lesionado o sancionado, en los modos donde la esquina la ocupa un dato. Un
   aro no tapa nada, pero basta para que un sancionado que sube de precio no
   parezca una ganga. */
.jug.riesgo .cara { box-shadow: inset 0 0 0 1.5px var(--baja); }

/* El candado de la cláusula: cerrado y ámbar mientras nadie puede pagarla,
   abierto y rojo cuando ya se la pueden llevar. Un icono dice esto mejor que
   una frase, y ocupa la mitad. */
.candado {
  font-family: var(--dato);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.candado.cerrado { color: var(--humo); }
/* Abierta en uno tuyo: te lo pueden quitar hoy. */
.candado.peligro { color: var(--baja); }
/* Abierta en un rival: hoy te lo puedes llevar tú. */
.candado.ocasion { color: var(--sube); }

/* ─────────────────────── barra inferior ─────────────────────── */

.barra {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  flex: 1;
  padding: 8px 0 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--humo-2);
  font-family: var(--alto);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.barra button .ic {
  font-size: 15px;
  line-height: 1;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Los iconos dibujados heredan color y grosor de los de texto que tienen al
   lado, para que la barra se lea como una sola familia. */
.barra button .ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.barra button[aria-current="page"] {
  color: var(--ambar);
}

/* La marca corrida. Va sobre el borde superior de la barra, y como es un solo
   elemento puede viajar: antes se apagaba en un botón y se encendía en otro, y
   ese parpadeo era lo que hacía que la barra pareciera irse un instante. */
.brasa {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: var(--ambar);
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.15s;
}

/* ─────────────────────── ficha del jugador ─────────────────────── */

.ficha {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--noche);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.3,.7,.4,1);
}
.ficha.abierta { transform: translateY(0); }

.ficha-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 11px;
  border-bottom: 1px solid var(--linea);
}
.ficha-cab h2 {
  font-family: var(--alto);
  font-size: 24px;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La estrella de seguir. Apagada es un contorno; encendida se rellena en ámbar,
   el color que en toda la app significa "esto va con el tiempo": justo lo que
   hace seguir a alguien, mirarlo cada pocas horas. */
.seguir {
  flex: 0 0 auto;
  padding: 4px;
  line-height: 0;
  color: var(--humo-2);
}
.seguir svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.seguir[aria-pressed="true"] {
  color: var(--ambar);
}
.seguir[aria-pressed="true"] svg {
  fill: var(--ambar);
}
.seguir:disabled { opacity: .5; }

.cerrar {
  font-size: 22px;
  line-height: 1;
  color: var(--humo);
  padding: 4px 8px;
}
.ficha-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Al llegar al final, el scroll seguía arrastrando la página de detrás y
     parecía que la ficha no terminaba nunca. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 13px 12px calc(env(safe-area-inset-bottom) + 20px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* Ningún bloque de la ficha se encoge: cada uno ocupa lo que necesita y el
   cuerpo hace scroll. */
.ficha-cuerpo > * { flex: 0 0 auto; }

/* Con la ficha abierta, lo de debajo no debe moverse. */
body.ficha-abierta { overflow: hidden; }

/* La racha de las últimas jornadas, como el marcador del juego: una casilla
   por jornada, con lo que hizo en cada una. El total esconde la forma —quince
   puntos pueden ser tres partidos regulares o uno bueno y dos en blanco. */
.racha {
  display: flex;
  gap: 4px;
}
.racha .casilla {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  text-align: center;
  background: var(--panel-2);
  border-radius: 2px;
  font-family: var(--dato);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tiza);
  line-height: 1.1;
}
.racha .casilla .j {
  display: block;
  font-size: 8px;
  color: var(--humo-2);
  letter-spacing: 0.06em;
}
/* Verde cuanto mejor la jornada; rojo si restó; apagada si no jugó. */
.racha .casilla.buena { background: var(--sube-op); color: var(--sube); }
.racha .casilla.grande { background: var(--sube); color: #08160F; }
.racha .casilla.mala { background: var(--baja-op); color: var(--baja); }
.racha .casilla.sin { color: var(--humo-2); }
/* Los huecos de las jornadas que aún no se han jugado: guardan el sitio para
   que la racha no cambie de forma cada semana. */
.racha .casilla.vacia {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--linea);
}

.medidor {
  height: 5px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}
.medidor i { display: block; height: 100%; background: var(--ambar); transition: width .4s ease; }

/* Cabecera de la ficha: quién es y cuánto vale, en una sola mirada. */
.perfil {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 4px 0 6px;
}
.perfil .retrato {
  width: 96px;
  height: 96px;
  border-radius: 3px;
  border: 1px solid var(--linea);
}
.perfil .retrato .iniciales { font-size: 32px; }
/* El retrato de la ficha mide 96 px, más del doble que el de las listas, así
   que su escudo crece en la misma proporción: con los 15 px de allí quedaba
   como una mota en una foto grande. */
.perfil .retrato img.escudito {
  width: 31px;
  height: 31px;
  left: 3px;
  top: 3px;
}
.perfil .quien { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.perfil .quien .bajo { font-size: 13px; }
.perfil .valoracion { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.perfil .valoracion .nota { font-size: 34px; }
.perfil .valoracion .rot {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo-2);
}

/* Secciones plegadas: lo que se consulta a veces no debe ocupar sitio
   siempre. El resumen sigue diciendo de qué va sin tener que abrirlo. */
details.pliegue {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  /* Sin esto el contenedor flex los aplasta a dos píxeles y parecen barras
     vacías: tienen su contenido, pero no se les deja ocupar su alto. */
  flex: 0 0 auto;
}
details.pliegue > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--alto);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
details.pliegue > summary::-webkit-details-marker { display: none; }
details.pliegue > summary::before {
  content: "▸";
  color: var(--humo-2);
  font-size: 12px;
  transition: transform .15s;
}
details.pliegue[open] > summary::before { transform: rotate(90deg); }
details.pliegue > summary .apunte {
  margin-left: auto;
  font-family: var(--dato);
  font-size: 11px;
  color: var(--humo-2);
  font-weight: 400;
}
details.pliegue > div {
  padding: 0 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─────────────────────── buscador ─────────────────────── */

.buscador {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 0 12px;
}
.buscador input {
  flex: 1;
  background: none;
  border: none;
  color: var(--tiza);
  font-family: var(--alto);
  font-size: 19px;
  padding: 11px 0;
  outline: none;
  min-width: 0;
}
.buscador input::placeholder { color: var(--humo-2); font-family: var(--texto); font-size: 14px; }

/* ─────────────────────── estados ─────────────────────── */

.vacio {
  text-align: center;
  color: var(--humo-2);
  font-size: 13.5px;
  padding: 34px 20px;
  line-height: 1.6;
}
.vacio .grande {
  display: block;
  font-family: var(--alto);
  font-size: 19px;
  color: var(--humo);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Carga: las filas del tablero girando antes de fijarse */
.esqueleto {
  height: 62px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%);
  background-size: 220% 100%;
  animation: pasar 1.4s linear infinite;
}
@keyframes pasar { to { background-position: -220% 0; } }

/* ── la carga ────────────────────────────────────────────────────────────────
   Una rueda con el porcentaje dentro y una línea de texto. Antes había un
   párrafo enumerando todo lo que se estaba bajando: se lee una vez y a partir
   de ahí es un muro delante de lo que vienes a ver. */
.cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
}

/* El progreso se dibuja con un degradado cónico girando hasta `--avance`
   grados, y el centro se recorta con otro círculo del color del fondo: así la
   rueda es un solo elemento, sin SVG ni bibliotecas. */
.rueda {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--ambar) var(--avance, 0deg), var(--linea) 0);
  transition: background .4s linear;
}
.rueda::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--noche);
}
/* Un barrido lento por encima: dice que sigue viva aunque el porcentaje tarde
   en moverse, que en los pasos largos son varios segundos. */
.rueda::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ambar);
  opacity: .45;
  animation: girar 1.4s linear infinite;
}

.cargando .pct {
  position: absolute;
  font-family: var(--dato);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--tiza);
  margin-top: 29px;
  z-index: 1;
}
.cargando .que {
  font-size: 13.5px;
  color: var(--humo);
  text-align: center;
}

/* Un botón tiene que parecer pulsable. Con el texto en gris apagado sobre el
   mismo fondo de la tarjeta que lo contiene, se leía como un campo de
   formulario deshabilitado. El hundido al tocarlo es lo que remata la
   sensación de app: en el navegador nada responde al dedo. */
.boton {
  font-family: var(--alto);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-radius: 3px;
  border: 1px solid var(--linea);
  color: var(--tiza);
  background: var(--panel-2);
  text-align: center;
  transition: transform .06s ease, filter .06s ease;
}
.boton:active {
  transform: scale(.985);
  filter: brightness(1.25);
}
.boton.primario {
  background: var(--ambar);
  border-color: var(--ambar);
  color: #14100A;
}
.botonera { display: flex; gap: 7px; }
.botonera .boton { flex: 1; }

/* ── el cerrojo ──────────────────────────────────────────────────────────────
   Tapa la app entera. No es una pantalla más por la que se pasa: mientras no
   entre la clave no hay nada que enseñar, así que se pone por encima de todo y
   no deja ver ni la cabecera. */
#cerrojo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--noche);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cerrojo-caja {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}
.cerrojo-caja h1 {
  margin: 0;
  font-family: var(--alto);
  font-size: 26px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cerrojo-caja p {
  margin: 0 0 4px;
  color: var(--humo);
  font-size: 13px;
}
.cerrojo-caja input {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  color: var(--tiza);
  font-family: var(--dato);
  font-size: 16px;   /* menos que esto y el móvil hace zoom al escribir */
  padding: 11px 12px;
  width: 100%;
}
.cerrojo-caja input:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
}
.cerrojo-caja button {
  background: var(--ambar);
  border: 0;
  border-radius: var(--r);
  color: #14100A;
  font-size: 15px;
  font-weight: 700;
  padding: 11px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}