/* ===========================================================================
   Fantasy — hoja de estilo única.

   Es una herramienta que se abre todos los días a las siete y media de la
   tarde, muchas veces por la calle. Eso manda sobre todo lo demás: se lee
   antes de que el móvil se apague, no se pone a animar cosas cada vez que
   cambias de pestaña, y los números están alineados para poder compararlos.

   Un solo momento con intención: la transición entre pantallas. El resto de
   los movimientos son respuestas al dedo, cortas y sin adorno.
   =========================================================================== */

:root {
  /* Fondo negro cálido, no azulado: se mira de noche y el azul cansa. */
  --fondo:        oklch(0.16 0.012 60);
  --fondo-hundido:oklch(0.13 0.012 60);
  --superficie:   oklch(0.195 0.012 60);
  --linea:        oklch(0.28 0.01 70);
  --linea-suave:  oklch(0.235 0.01 70);

  --texto:        oklch(0.94 0.008 80);
  --texto-2:      oklch(0.72 0.01 80);
  --texto-3:      oklch(0.60 0.01 80);

  --marca:        oklch(0.78 0.14 70);
  --marca-honda:  oklch(0.30 0.055 72);
  --alza:         oklch(0.78 0.14 155);
  --baja:         oklch(0.68 0.16 25);
  --aviso:        oklch(0.82 0.12 85);
  --aviso-hondo:  oklch(0.26 0.045 82);
  --grave-hondo:  oklch(0.27 0.075 25);

  --display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --cuerpo:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cifra:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sale rápido y frena despacio: la pantalla responde antes de que sueltes. */
  --curva: cubic-bezier(0.23, 1, 0.32, 1);

  --radio: 12px;
  --nav-alto: 60px;
  /* Está pensada para el móvil. En un monitor no se estira hasta el absurdo:
     se queda como una columna centrada, que es como se va a usar. */
  --ancho: 560px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--fondo);
  /* El móvil no debe reajustar el tamaño del texto por su cuenta. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  /* Hueco para la barra inferior y para la barra de gestos del móvil. */
  padding-bottom: calc(var(--nav-alto) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}

/* --- Lo que pinta el navegador y no el diseño ------------------------------ */
::selection { background: var(--marca-honda); color: var(--texto); }
:root { color-scheme: dark; accent-color: var(--marca); caret-color: var(--marca); }
* { scrollbar-color: var(--linea) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: oklch(0.86 0.12 70); }
}

/* --- Tipos ---------------------------------------------------------------- */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.cifra   { font-family: var(--cifra); font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }

.rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca);
}
.menudo { font-size: 12px; color: var(--texto-3); }
.parrafo { max-width: 68ch; text-wrap: pretty; }

/* Colores con significado, los mismos nombres que usa la terminal. */
.alza  { color: var(--alza); }
.baja  { color: var(--baja); }
.sd    { color: var(--texto-3); }
.aviso { color: var(--aviso); }
.grave { color: var(--baja); }
.bien  { color: var(--alza); }
.titulo{ color: var(--texto); font-weight: 600; }

/* --- Estructura ----------------------------------------------------------- */
.envoltura { padding: 0 20px; }

.cabecera, .dinero, .dinero--breve, .pestanas, .envoltura {
  max-width: var(--ancho);
  margin-inline: auto;
}
/* Las reglas horizontales de estos bloques tienen que llegar de borde a borde
   en el móvil, pero no partir la columna en el escritorio: por eso el ancho
   máximo va aquí y no en un envoltorio común. */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* El selector de liga se envuelve a su propia línea: a 390 px el nombre de
     la app, el sello y la hora ya ocupan la primera entera. */
  flex-wrap: wrap;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) 20px 12px;
}

.marca-app {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sello {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--texto-2);
  white-space: nowrap;
}

/* --- Selector de liga ------------------------------------------------------
   Se juega más de una liga y la web solo enseñaba la del .env. Son pastillas
   y no un desplegable porque un <select> necesitaría JavaScript para navegar
   al cambiar, y aquí el único script es el del envoltorio de app.
   El estado activo es el del filtro —borde y texto en ámbar— y no el de la
   pestaña: invertido en blanco competiría con la fila de navegación de abajo,
   y esto no es a qué pantalla vas, sino de qué liga.  */
.ligas {
  flex-basis: 100%;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ligas::-webkit-scrollbar { display: none; }

.liga {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--curva), border-color 160ms var(--curva),
              transform 120ms var(--curva);
}
.liga:active { transform: scale(0.96); }
.liga[aria-current="true"] { border-color: var(--marca); color: var(--marca); font-weight: 600; }

/* En la pantalla de «todavía no hay informe» no hay cabecera donde colgarlo:
   va suelto en la columna, y ahí no debe estirarse a lo ancho. */
.acceso > .ligas { flex-basis: auto; flex-wrap: wrap; }

/* --- Cabecera de dinero --------------------------------------------------- */
.dinero { padding: 4px 20px 20px; border-bottom: 1px solid var(--linea); }

.dinero__cifra {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: 4px;
  color: var(--marca);
}

.dinero__reparto { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.dinero__dato .menudo { font-size: 11px; }
.dinero__dato strong { font-family: var(--cifra); font-size: 15px; font-weight: 600; }

.mercados { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.mercados__tira { display: flex; gap: 4px; }
.mercados__paso {
  width: 22px; height: 4px; border-radius: 2px;
  background: oklch(0.4 0.03 70);
}
.mercados__paso--queda { background: var(--marca); }

/* Fuera del resumen, la cabecera de dinero se encoge a una línea: la pantalla
   es para mirar la tabla, y repetir el bloque entero se comía medio móvil. */
.dinero--breve { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 0 20px 14px; border-bottom: 1px solid var(--linea); }
.dinero--breve b { font-family: var(--cifra); font-size: 17px; font-weight: 600; color: var(--marca); }

/* --- Pestañas ------------------------------------------------------------- */
.pestanas {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--linea);
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  font-size: 14px;
  color: var(--texto-2);
  text-decoration: none;
  transition: color 160ms var(--curva), border-color 160ms var(--curva),
              background-color 160ms var(--curva), transform 120ms var(--curva);
}
.pestana:active { transform: scale(0.97); }
.pestana[aria-current="page"] {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--fondo);
  font-weight: 600;
}

/* --- Secciones y listas --------------------------------------------------- */
.seccion { margin: 26px 0; }
.seccion__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lista { border-top: 1px solid var(--linea); }
.fila-jugador {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linea-suave);
  color: inherit;
  text-decoration: none;
  transition: opacity 140ms var(--curva);
}
.fila-jugador:active { opacity: 0.62; }
.fila-jugador__nombre { font-family: var(--display); font-size: 18px; font-weight: 600; }
.fila-jugador__cifras { text-align: right; flex: none; font-family: var(--cifra); }
.fila-jugador__cifras b { font-size: 16px; font-weight: 600; }

.etiqueta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--grave-hondo);
  color: oklch(0.88 0.1 30);
}

/* --- Operación ------------------------------------------------------------ */
.operacion {
  display: flex;
  gap: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--marca);
}
.operacion + .operacion { margin-top: 22px; }
.operacion__orden {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: oklch(0.42 0.03 70);
}
.operacion__cuerpo { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
.operacion__paso { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.operacion__flecha { display: flex; align-items: center; gap: 8px; color: oklch(0.5 0.02 70); }
.operacion__flecha hr { flex-grow: 1; border: 0; border-top: 1px solid var(--linea); margin: 0; }

.deltas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
}
.deltas dt { font-size: 10px; color: var(--texto-3); }
.deltas dd { margin: 0; font-family: var(--cifra); font-size: 15px; font-weight: 600; }

.nota { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; }
.nota svg { flex: none; margin-top: 1px; }

/* --- Avisos --------------------------------------------------------------- */
.caja-aviso {
  display: flex;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 12px;
  line-height: 1.45;
}
.caja-aviso--ojo { border-color: oklch(0.36 0.06 82); background: var(--aviso-hondo); }
.caja-aviso--grave { border-color: oklch(0.4 0.09 25); background: var(--grave-hondo); }
.caja-aviso svg { flex: none; margin-top: 1px; }

/* --- Botones -------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--marca);
  color: var(--fondo);
  font-family: var(--cuerpo);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--curva), filter 160ms var(--curva);
}
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { filter: brightness(1.06); }
}
.boton--callado {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--texto-2);
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
}
.boton[disabled] { opacity: 0.5; cursor: default; transform: none; }

/* --- Tablas --------------------------------------------------------------- */
.tabla-marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0;
  background: var(--fondo-hundido);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-3);
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--linea);
}
thead a { color: inherit; text-decoration: none; display: block; }
thead a[data-ordenada] { color: var(--marca); }
tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--linea-suave);
  white-space: nowrap;
  font-family: var(--cifra);
  font-variant-numeric: tabular-nums;
}
tbody td:first-child { font-family: var(--cuerpo); font-weight: 500; }
/* El nombre es pulsable, pero subrayarlo en cada fila convierte la tabla en
   una maraña: se distingue por ser lo único con el color del texto principal. */
tbody td a { color: var(--texto); text-decoration: none; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover td { background: var(--superficie); }
}

.filtros { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; min-height: 40px;
  display: inline-flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--linea); border-radius: 99px;
  font-size: 13px; color: var(--texto-2); text-decoration: none;
  transition: transform 120ms var(--curva);
}
.filtro:active { transform: scale(0.96); }
.filtro[aria-current="true"] { border-color: var(--marca); color: var(--marca); }

/* --- Ficha de jugador ----------------------------------------------------- */
.ficha { margin-bottom: 22px; }
.ficha dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; }
.ficha dt { font-size: 13px; color: var(--texto-2); }
.ficha dd { margin: 0; font-family: var(--cifra); font-size: 13px; text-align: right; }

/* --- Barra inferior ------------------------------------------------------- */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--fondo-hundido);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
}
.barra__destino {
  min-height: var(--nav-alto);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--texto-3);
  text-decoration: none;
  font-size: 10px;
  transition: color 160ms var(--curva), transform 120ms var(--curva);
}
.barra__destino:active { transform: scale(0.94); }
.barra__destino[aria-current="page"] { color: var(--marca); font-weight: 600; }

/* --- Acceso --------------------------------------------------------------- */
.acceso {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 0 30px;
  max-width: 440px;
  margin: 0 auto;
}
.campo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie);
  transition: border-color 160ms var(--curva);
}
.campo:focus-within { border-color: var(--marca); }
.campo input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--cifra);
  font-size: 17px;
  letter-spacing: 0.12em;
}
.campo input:focus { outline: none; }
.campo input::placeholder { color: var(--texto-3); letter-spacing: normal; font-family: var(--cuerpo); }

.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.casilla input { width: 19px; height: 19px; margin: 0; }

/* --- Vacíos --------------------------------------------------------------- */
.vacio { padding: 40px 0; text-align: center; color: var(--texto-3); font-size: 14px; }

.pie { padding: 26px 0 34px; font-size: 11px; color: var(--texto-3); line-height: 1.5; }

/* ===========================================================================
   El único momento con intención: pasar de una pantalla a otra.
   Navegación entre documentos, sin una línea de JavaScript. Donde no está
   soportado, sencillamente no ocurre nada, que también está bien.
   =========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: salir 90ms var(--curva) both;
}
::view-transition-new(root) {
  animation: entrar 180ms var(--curva) both;
}
@keyframes salir  { to   { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  /* Se conserva el fundido, que ayuda a entender que la pantalla ha cambiado;
     se quita el desplazamiento, que es lo que marea. */
  ::view-transition-new(root) { animation: entrar-quieto 120ms linear both; }
  @keyframes entrar-quieto { from { opacity: 0; } }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}