/* =========================================================================
   Futbol Manager - capa de interfaz

   Refina el sistema visual sin tocar la maqueta: tipografia de cancha,
   materiales con profundidad, estados claros y densidad de planilla.

   La idea rectora es la cancha vista de noche: cesped rayado, linea de cal
   y el dorado del trofeo. Todo lo que sea un dato -una media, una cifra,
   un minuto- se escribe en monoespaciada, como en la planilla del partido.

   Orden:
     1. Tipografia y ritmo
     2. Materiales: fondo, paneles y tarjetas
     3. Navegacion y barras
     4. Controles: botones, campos y chapas
     5. Datos: tablas y metricas
     6. Movimiento y accesibilidad
   ========================================================================= */

/* =========================================================================
   1. Tipografia y ritmo
   ========================================================================= */

:root {
    /*
     * Archivo es una grotesca de cartel: firme en negrita, sobria en texto.
     * Plex Mono aporta el aire de planilla a todo lo que sea cifra.
     */
    --fuente: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", "Roboto Mono", "Courier New", monospace;

    /* Escala tipografica */
    --t-titulo: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
    --t-seccion: 0.86rem;
    --t-cuerpo: 0.95rem;
    --t-dato: 0.82rem;
    --t-etiqueta: 0.7rem;

    /* Cristal de las barras */
    --vidrio: rgba(9, 36, 28, 0.88);
}

body {
    font-size: var(--t-cuerpo);
    line-height: 1.6;
    letter-spacing: 0.005em;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* El titulo de pantalla es el cartel de la cancha: ancho, firme y en alto. */
.seccion__titulo {
    font-size: var(--t-titulo);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.seccion__titulo::after {
    width: 64px;
    height: 4px;
    margin-top: var(--e3);
    background: linear-gradient(90deg, var(--dorado), rgba(232, 178, 63, 0));
    border-radius: 0;
}

.seccion__bajada {
    font-size: 0.92rem;
    color: var(--texto-suave);
}

/*
 * Titulo de bloque: etiqueta de planilla, no titular.
 *
 * Los de panel y los de tarjeta son el mismo nivel, asi que van con el
 * mismo tratamiento y en la misma tipografia que el resto del sitio. La
 * monoespaciada queda para lo que la necesita de verdad -numeros, importes
 * y marcadores, donde alinea las cifras-, no para rotulos.
 */
.panel__titulo,
.tarjeta__titulo,
.marcador__titulo,
.bloque__titulo,
.bloque-plantel__titulo {
    font-size: var(--t-seccion);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* =========================================================================
   2. Materiales
   ========================================================================= */

/*
 * Fondo limpio: una sola luz alta que cae desde la tribuna sobre el verde.
 * Sin bandas ni tramas, para que lo unico que compita por la atencion sean
 * los datos.
 */
body {
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(47, 167, 104, 0.14), transparent 62%),
        var(--fondo);
    background-attachment: fixed;
}

/* Los paneles se levantan del cesped con una linea de cal arriba. */
.panel,
.tarjeta,
.marcador,
.tabla-envoltorio,
.cabecera-partido,
.destacado {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
        var(--panel);
    border-radius: var(--r3);
    box-shadow: var(--sombra2);
}

.panel::before,
.tarjeta::before,
.cabecera-partido::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 234, 216, 0.28), transparent);
    border-radius: inherit;
    pointer-events: none;
}


/* La tarjeta responde al mouse: se acerca un paso. */
.tarjeta {
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.tarjeta:hover {
    transform: translateY(-2px);
    border-color: var(--borde-fuerte);
    box-shadow: var(--sombra3);
}

/* El cruce del proximo partido es la pieza principal del escritorio. */
.cabecera-partido {
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(47, 167, 104, 0.22), transparent 62%),
        linear-gradient(180deg, var(--panel-alto), var(--panel));
}

/* =========================================================================
   3. Navegacion y barras
   ========================================================================= */

.lateral {
    background: linear-gradient(180deg, var(--fondo-alto), var(--fondo));
    border-right: 1px solid var(--borde);
}

.barra-superior {
    background: var(--vidrio);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Cada enlace del menu deja su marca de cal cuando esta activo. */
.navegacion__enlace {
    position: relative;
    border-radius: var(--r2);
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.navegacion__enlace:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: calc(var(--e3) + 4px);
}

.navegacion__enlace.es-activo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background: var(--dorado);
    border-radius: 0 3px 3px 0;
}

.navegacion__titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.16em;
}

/* La ficha del club: el escudo manda y el resto acompania. */
.ficha-club {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%),
        var(--panel);
    border-radius: var(--r3);
}

.ficha-club__nombre { letter-spacing: -0.01em; }

/* =========================================================================
   4. Controles
   ========================================================================= */

.boton {
    min-height: 42px;
    padding: 0.62rem 1.15rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: var(--r2);
    transition: transform 0.12s ease, background-color 0.16s ease,
        border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.boton--pequeno { min-height: 34px; padding: 0.35rem 0.8rem; font-size: 0.74rem; }
.boton--grande  { min-height: 52px; padding: 0.85rem 1.6rem; font-size: 0.92rem; }

/* El boton principal tiene el brillo del trofeo arriba. */
.boton--principal {
    background: linear-gradient(180deg, var(--dorado-claro), var(--dorado));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, var(--sombra1);
}

/*
 * El hover mantiene el mismo material: el degradado se aclara un paso, sin
 * saltar a un amarillo plano ni encenderse como un cartel.
 */
.boton--principal:hover,
.boton--principal:focus-visible {
    background: linear-gradient(180deg, #fadfa4, #efc257);
    border-color: var(--dorado-oscuro);
    color: var(--tinta);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset, var(--sombra2);
    transform: translateY(-1px);
}

.boton--principal:active {
    background: linear-gradient(180deg, var(--dorado), #cf9a2c);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
    transform: translateY(1px);
}

.boton--fantasma {
    border-color: var(--borde-fuerte);
    background: rgba(255, 255, 255, 0.03);
}

.boton--fantasma:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dorado);
    color: var(--dorado);
    transform: translateY(-1px);
}

/*
 * Boton apagado: gris parejo, sin el dorado ni el verde de los activos. Que
 * se vea inactivo de un vistazo importa mas que conservar el color, sobre
 * todo en el alta de partida, donde el boton espera a que el formulario
 * este completo.
 */
.boton:disabled,
.boton[disabled] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--texto-tenue);
    opacity: 0.75;
    /*
     * Con pointer-events en none no se ve el cursor ni el title que explica
     * por que esta apagado. Un <button disabled> no dispara el click igual.
     */
    pointer-events: auto;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Campos: alto comodo y foco que se ve de lejos. */
.campo__control {
    min-height: 42px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
    color: var(--texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.campo__control:hover { border-color: var(--borde-fuerte); }

.campo__control:focus {
    outline: none;
    border-color: var(--dorado);
    background: rgba(0, 0, 0, 0.36);
    box-shadow: 0 0 0 3px rgba(232, 178, 63, 0.22);
}

/* Un dorsal repetido se marca en rojo por encima de todo lo demas. */
.campo__control--dorsal.es-repetido,
.campo__control--dorsal.es-repetido:focus {
    border-color: var(--peligro);
    box-shadow: 0 0 0 3px rgba(255, 138, 117, 0.2);
}

.campo__etiqueta {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

/* Las chapas son la letra chica de la planilla. */
.chapa {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--r1);
}

.etiqueta { font-family: var(--mono); letter-spacing: 0.06em; }

/* =========================================================================
   5. Datos
   ========================================================================= */

.tabla { font-size: var(--t-dato); }

/*
 * Cabecera de tabla: etiqueta de planilla. No se fija al hacer scroll -la
 * tabla puede vivir dentro de un panel y quedaba flotando sobre las filas-,
 * solo se distingue del cuerpo por el fondo y el trazo inferior.
 */
.tabla thead th {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: 0.1em;
    background: linear-gradient(180deg, var(--panel-alto), var(--panel));
    box-shadow: inset 0 -1px 0 var(--borde);
}

.tabla thead th[data-orden] { cursor: pointer; }
.tabla thead th[data-orden]:hover { color: var(--dorado); }

.tabla tbody tr { transition: background-color 0.12s ease; }
.tabla tbody tr:hover { background: rgba(232, 178, 63, 0.09); }

.tabla td { padding-top: 0.55rem; padding-bottom: 0.55rem; }

/* Toda cifra grande es un marcador: mono, ancha y en dorado. */
.panel__cifra,
.marcador__valor,
.dato-grande__valor,
.cifra__valor,
.metrica__valor {
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dato-grande__etiqueta,
.cifra__rotulo,
.metrica__rotulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.12em;
}

/* Las barras de progreso: linea de cal sobre cesped. */
.barra {
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid var(--borde);
    overflow: hidden;
}

.barra__relleno { transition: width 0.4s ease; }

/* =========================================================================
   6. Movimiento y accesibilidad
   ========================================================================= */

:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 2px;
}

/* La barra de scroll tambien es parte del tema. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 234, 216, 0.24) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: rgba(242, 234, 216, 0.2);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
}

*::-webkit-scrollbar-thumb:hover { background-color: rgba(232, 178, 63, 0.5); }

/* Al entrar, el contenido sube apenas: una sola vez, sin escandalo. */
.contenido > .seccion {
    animation: entra-seccion 0.28s ease-out both;
}

@keyframes entra-seccion {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   7. Portada
   ========================================================================= */

/*
 * El hero se apoya en la cancha vista desde arriba: la imagen ocupa todo el
 * bloque y el texto va encima, con una cortina para que se lea siempre.
 */
.portada__hero {
    display: grid;
    /*
     * Centrado en el alto, pero a lo ancho los bloques se estiran hasta el
     * ancho disponible. Con `justify-items: center` cada bloque se sirve su
     * ancho preferido -el texto, sus 62ch; el formulario, sus 24rem- sin
     * mirar el del hero: en un telefono angosto los dos quedaban mas anchos
     * que la caja y el `overflow: hidden` de aca abajo los cortaba al medio.
     */
    align-items: center;
    justify-items: stretch;
    min-height: clamp(340px, 44vw, 460px);
    padding: var(--e7) var(--e5);
    overflow: hidden;
    /*
     * Sin fondo propio: el panel opaco que trae de styles.css taparia la
     * foto del estadio, que ahora es el fondo de toda la pantalla.
     */
    background: transparent;
}

/*
 * Una columna de grilla no baja del ancho minimo de lo que lleva adentro, y
 * adentro del formulario esta el reCAPTCHA, que mide 304 puntos fijos. Sin
 * esto la columna se planta en esos 304 mas los rellenos y el hero entero se
 * desborda en cualquier telefono angosto. Con el minimo en cero la columna
 * se adapta al ancho real y el widget lo resuelve escalandose.
 */
.portada__hero > * {
    min-width: 0;
}

/*
 * Con la sesión abierta el hero no lleva el formulario al costado: solo el
 * saludo y una línea. El alto mínimo que sostiene a la caja del ingreso le
 * sobra, y dejaba medio metro de verde vacío debajo del texto.
 */
.portada__hero--solo {
    min-height: 0;
    padding: var(--e6) var(--e5);
}

/*
 * En pantallas angostas el hero afloja el relleno de los costados: cada
 * punto que se le saca es un punto mas de ancho para el formulario, que es
 * lo que manda el tamaño aca adentro.
 */
@media (max-width: 575.98px) {
    .portada__hero {
        padding: var(--e6) var(--e4);
    }
}

/*
 * El estadio de noche, de fondo en la portada y en las pantallas de entrada
 * (nueva partida, cargar partida y los dos sorteos), que son la misma
 * antesala del juego y comparten el clima.
 *
 * Es lo primero que se ve al entrar y lo que da la idea de a que se juega
 * aca. Va fija, asi acompana el scroll.
 *
 * La foto viene recortada a 16:9 y a 1920 de ancho, que es la proporcion de
 * la mayoria de las pantallas: asi `cover` casi no tiene que recortar y el
 * estadio se ve entero. Con una foto mas cuadrada, o tomada de cerca, el
 * navegador la amplia para llenar la pantalla y solo se ve un pedazo.
 *
 * El original tiene 5879 px de ancho, asi que a 1920 le sobra detalle: la
 * nitidez de un fondo depende de cuanto le sobra a la fuente, no de lo que
 * se le haga despues.
 *
 * La opacidad esta medida contra los paneles, que son opacos y quedan
 * intactos por encima: la foto se ve en los margenes y entre las tarjetas,
 * nunca debajo de un texto.
 */
body.con-fondo-estadio::before,
body.con-fondo-cancha::before,
body.pantalla-despido::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*
     * El alto se fija a la pantalla grande a proposito, en vez de usar
     * `inset: 0`.
     *
     * En el telefono la barra del navegador se esconde y vuelve a aparecer
     * con el scroll, y con eso cambia el alto del viewport. Un fondo atado
     * a ese alto se reescala en cada cambio, y se ve como un salto. Con
     * `lvh` el alto es siempre el de la pantalla con la barra retraida: no
     * cambia nunca, asi que la foto se queda quieta.
     *
     * `vh` queda de respaldo para los navegadores sin unidades dinamicas.
     */
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    /*
     * Capa propia para el compositor. Sin esto el navegador vuelve a pintar
     * el fondo en cada cuadro del scroll y se lo ve arrastrarse detras del
     * contenido, sobre todo en el telefono.
     */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/*
 * Fin del ciclo: el banco de suplentes vacio frente a la tribuna desierta.
 * El lugar del DT quedo libre. El ?v= se sube a mano si se cambia el
 * archivo.
 *
 * Foto: Daniel, Wikimedia Commons, CC BY 2.0.
 * commons.wikimedia.org/wiki/File:Home_team_dugout_at_Tottenham_Hotspur_Stadium.jpg
 */
body.pantalla-despido::before {
    background: url("../images/portada/fondo-despido-hd.webp?v=20260925b") center / cover no-repeat;
    opacity: 0.6;
}

/* El estadio de noche, en la portada y en las pantallas de entrada. */
body.con-fondo-estadio::before {
    background: url("../images/portada/fondo-estadio-hd.webp") center / cover no-repeat;
    opacity: 0.42;
}

/*
 * El estadio lleno de dia, en las pantallas de seguimiento: resultados,
 * clasificacion y calendario.
 *
 * Va mucho mas apagada que la de la portada. Alla la foto es el asunto de
 * la pantalla; aca abajo hay tablas, y lo que se lee tiene que ganarle a lo
 * que se mira. Los paneles son opacos, asi que la foto solo asoma en los
 * margenes y entre las tarjetas: alcanza para dar clima sin pelearle a una
 * columna de numeros.
 *
 * Foto: NZ Footballs Conscience, Wikimedia Commons, CC BY-SA 4.0.
 * commons.wikimedia.org/wiki/File:All_Whites_v_Peru_11_November_2017_(cropped).jpg
 */
body.con-fondo-cancha::before {
    background: url("../images/portada/fondo-cancha-hd.webp") center / cover no-repeat;
    opacity: 0.16;
}

/*
 * En el telefono, la portada scrollea por dentro.
 *
 * El problema: la barra de direcciones se esconde y vuelve con el scroll, y
 * con eso cambia el alto del viewport. Los elementos fijos estan anclados al
 * viewport de layout, asi que el navegador los corre mientras dura esa
 * transicion; por mas que se declare `fixed`, la foto se ve subir y bajar.
 * No hay forma de pedirle otra cosa al navegador.
 *
 * La salida es que el documento no scrollee: el que scrollea es el bloque
 * de contenido. Sin scroll de documento la barra no se retrae nunca, el
 * alto del viewport no cambia y el fondo se queda de verdad quieto.
 *
 * Va en las pantallas que llevan la foto del estadio -portada, alta, carga
 * y los dos sorteos-, que son las que tienen fondo fijo y ninguna lleva
 * menu lateral ni barra inferior. En el resto del juego el scroll sigue
 * siendo el normal del navegador.
 *
 * La condicion pide ademas `pointer: coarse`, o sea que se navegue con el
 * dedo. Todo esto existe por la barra del navegador movil y por la botonera
 * del sistema, que en el escritorio no existen: sin ese filtro, achicar la
 * ventana -o abrir las herramientas de desarrollo- activaba el scroll
 * propio y el hueco reservado para unos botones que ahi no estan.
 */
@media (max-width: 900px) and (pointer: coarse) {
    /*
     * El bloqueo va en las dos: con `overflow: hidden` solo en el body, el
     * navegador movil sigue scrolleando el documento -y con el, siguen la
     * barra de direcciones y el tironeo del fondo-.
     */
    html.pantalla-quieta,
    html.pantalla-quieta body {
        /*
         * `svh` es el alto del viewport con TODAS las barras del navegador
         * a la vista: el minimo garantizado.
         *
         * Es la medida que hace falta aca. Con `100%` el contenedor mide el
         * viewport de layout, mas alto que lo que se ve. Y `dvh` tampoco
         * sirve: devuelve el alto de ese momento, que el navegador calcula
         * contando con que su barra puede retraerse. En los dos casos el
         * contenedor termina mas abajo del borde visible y su ultimo
         * elemento -el pie- queda detras de la botonera.
         *
         * Con `svh` el contenedor nunca es mas alto que lo que se ve, asi
         * que el final del scroll cae siempre dentro de la pantalla. Y como
         * aca el documento no scrollea, la barra no se retrae nunca: ese
         * alto tampoco cambia, no hay saltos.
         */
        /*
         * `--alto-visible` lo mide el guion con `visualViewport`: es el
         * unico dato fiable del area que queda a la vista, ya descontadas
         * las barras del navegador y la botonera.
         *
         * Las dos lineas de arriba son el respaldo para cuando esa medida
         * todavia no esta -antes de que corra el guion- o si no corriera:
         * cada navegador aplica la ultima que entiende.
         */
        height: 100%;
        height: 100svh;
        height: var(--alto-visible, 100svh);
        /*
         * Hay que anular el `min-height: 100vh` que el body trae de fabrica.
         * En el telefono `100vh` es el viewport grande -el que queda cuando
         * la barra del navegador se retrae-, o sea mas alto que lo que se
         * ve. Y el minimo gana siempre sobre el alto: sin esta linea el body
         * mide de mas, el contenedor hereda ese exceso y el pie queda
         * dibujado justo en la franja que no entra en pantalla.
         */
        min-height: 0;
        overflow: hidden;
    }

    /*
     * El que scrollea es la disposicion, no el bloque principal.
     *
     * El bloque principal es flex vertical: si le damos alto fijo y el
     * scroll, sus hijos se reparten ese alto y el pie -que va ultimo- se
     * encoge hasta desaparecer. Poniendo el scroll un nivel mas arriba, el
     * bloque principal vuelve a medir lo que miden sus hijos, el pie
     * conserva su alto y el scroll termina en el.
     */
    body.pantalla-quieta .disposicion {
        /* De grid a columna: asi el pie se apoya despues del contenido y
           no depende del alto de una fila. */
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        /* Que el impulso del dedo se sienta como el del navegador. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /*
     * Libre de crecer con lo que tiene adentro, pero nunca mas corto que la
     * pantalla.
     *
     * `height: auto` lo deja medir contenido mas pie, que es lo que el
     * scroll tiene que poder recorrer. El piso de `min-height: 100%` -el
     * alto visible, que aca es una medida concreta- es lo que evita que en
     * una pantalla con poco contenido el bloque termine antes del borde y
     * el pie quede colgado en el medio.
     */
    body.pantalla-quieta .disposicion__principal {
        /*
         * Que no se encoja.
         *
         * Es un item flex dentro de un contenedor con alto fijo, asi que
         * por defecto se comprime para caber. Comprimido, su contenido
         * desborda pero el scroll solo recorre el alto comprimido: falta
         * exactamente lo que sobra, y lo que queda afuera es el final de la
         * pagina. Por eso cada vez que se sumaba espacio arriba, abajo se
         * perdia el pie.
         */
        flex: 0 0 auto;
        min-height: 100%;
        height: auto;
    }

    /*
     * El contenido mide exactamente lo que ocupa: ni crece ni se encoge.
     *
     * De fabrica pide `flex: 1`, que le deja hacer las dos cosas, y de ahi
     * salia que el pie apareciera o desapareciera segun cuanto midiera la
     * pagina. Con el alto clavado a su contenido, el bloque principal mide
     * contenido + pie y el scroll siempre termina en el pie.
     *
     * El pie se empuja al fondo solo cuando sobra sitio, para que no quede
     * flotando en el medio en una pantalla vacia.
     *
     */
    body.pantalla-quieta .contenido {
        flex: 0 0 auto;
    }

    /*
     * El pie, al fondo.
     *
     * Con el contenido clavado a su alto, en una pantalla corta -carga sin
     * partidas guardadas, por ejemplo- sobraba sitio abajo y el pie quedaba
     * dibujado a mitad de camino, con la foto del estadio asomando debajo.
     * El margen automatico se come ese sobrante y lo apoya contra el borde;
     * cuando no sobra nada vale cero y el pie sigue al contenido como
     * siempre.
     */
    body.pantalla-quieta .pie {
        margin-top: auto;
    }

    /*
     * Mas aire arriba solo en la portada: no lleva barra superior y el hero
     * -lo primero que se ve- arrancaba pegado a la barra del navegador. Las
     * demas pantallas si tienen barra y ya llegan despegadas.
     */
    body.pantalla-portada .contenido {
        padding-top: var(--e7);
    }

    /*
     * El pie va con su alto de siempre: sin `viewport-fit=cover` el
     * navegador ya no dibuja la pagina debajo de la botonera del sistema,
     * asi que no hay nada que esquivar.
     */

}

/*
 * El hero ya no lleva foto propia: deja ver el estadio del fondo. La
 * cortina se queda igual -es la que sostiene la lectura del titulo sobre
 * la parte iluminada de la foto- pero sin nada opaco debajo.
 */
.portada__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 88% at 50% 46%, rgba(8, 33, 26, 0.32), rgba(8, 33, 26, 0.62) 74%),
        linear-gradient(180deg, rgba(8, 33, 26, 0.26), rgba(15, 54, 42, 0.6));
    z-index: 1;
}

/*
 * Los bloques de la portada, en el mismo idioma que el hero.
 *
 * Dejan ver el estadio a traves, como lo hace el bloque del titulo, para
 * que la pagina se lea como una sola pieza y no como un hero con foto y
 * unas cajas opacas debajo.
 *
 * El desenfoque de lo que queda atras es lo que sostiene la lectura: sin
 * el, el texto chico de las tarjetas se pelea con las estelas de luz de la
 * autopista. Donde el navegador no soporte backdrop-filter no pasa nada
 * grave: queda el color, que ya de por si tapa bastante.
 *
 * Va solo en la portada. En las pantallas del juego los paneles siguen
 * opacos: ahi hay tablas densas, y ahi la claridad vale mas que el efecto.
 */
body.pantalla-portada .panel,
body.pantalla-portada .tarjeta {
    background: rgba(15, 54, 42, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/*
 * En el telefono, sin desenfoque.
 *
 * Desenfocar lo que hay detras obliga al navegador a recomponer esa zona en
 * cada cuadro del scroll, y con un fondo fijo detras se lo ve arrastrarse.
 * El panel se tapa un poco mas para compensar la falta de desenfoque: se
 * pierde el efecto de vidrio, pero el scroll queda limpio y el texto se
 * sigue leyendo igual.
 */
@media (max-width: 900px) {
    body.pantalla-portada .panel,
    body.pantalla-portada .tarjeta {
        background: rgba(15, 54, 42, 0.88);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/*
 * Cada linea lleva su propia sombra: es lo que permite dejar la foto casi
 * limpia detras sin que el texto se pierda sobre el cesped claro.
 */
.portada__texto {
    position: relative;
    z-index: 2;
    max-width: 62ch;
    text-shadow: 0 2px 10px rgba(6, 22, 17, 0.85), 0 1px 2px rgba(6, 22, 17, 0.9);
}

/*
 * La caja del costado -el formulario de ingreso o el resumen de la ultima
 * partida-, por encima de la cortina.
 *
 * Sin esto queda por debajo del ::before del hero: se ve apagada, como si
 * estuviera detras del bloque, y encima no se la puede tocar -la cortina se
 * come los clics-.
 *
 * Y a diferencia del titulo, que se apoya en la foto, este necesita fondo
 * propio: son campos para escribir, y tienen que leerse sobre cualquier
 * parte de la imagen. Es el mismo vidrio de las tarjetas.
 */
.ingreso {
    position: relative;
    z-index: 2;
    background: rgba(15, 54, 42, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* En el telefono, sin desenfoque, igual que el resto de la portada. */
@media (max-width: 900px) {
    .ingreso {
        background: rgba(15, 54, 42, 0.92);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/*
 * Nada de lo que va dentro del formulario hereda la sombra del titulo: todo
 * se apoya en el fondo propio del bloque, no en la foto.
 */
.ingreso .campo__etiqueta,
.ingreso .campo__ayuda,
.ingreso__pie { text-shadow: none; }

/*
 * Los botones no heredan esa sombra: tienen fondo propio, asi que no les
 * hace falta, y sobre el dorado -donde el texto es oscuro- una sombra
 * oscura alrededor de cada letra queda como un halo que la desdibuja.
 */
.portada__texto .boton {
    text-shadow: none;
}

.portada__titulo {
    font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.portada__bajada { color: var(--texto-suave); }

.portada__acciones { margin-top: var(--e5); }

/*
 * El hero y las tarjetas, centrados en el alto que queda libre.
 *
 * El contenido ya estira hasta el pie; sin esto la portada se apoyaba
 * arriba y todo el sobrante quedaba entre las tarjetas y el pie. Centrada,
 * el aire de arriba y el de abajo son el mismo. Cuando la portada es mas
 * alta que la pantalla no sobra nada y se ve como antes.
 */
body.pantalla-portada .contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mismo relleno arriba y abajo; en el telefono manda el de la pantalla quieta. */
@media (min-width: 901px) {
    body.pantalla-portada .contenido {
        padding-top: var(--e6);
        padding-bottom: var(--e6);
    }
}