/* ========================================================================== LIMA Y NEGRO: LA PALETA DE ESTE MODO, Y DE NINGÚN OTRO -------------------------------------------------------------------------- Elegida por Alberto el 11/9/2026 — `#C6FF00` sobre `#0B0B0B`. Dirigir una selección es un modo APARTE, y hasta hoy se veía igual que el club: misma tinta violeta, mismo negro con sesgo violeta. Un modo aparte con paleta propia se reconoce antes de leer una palabra. SE ESCRIBE SOBRE LAS RAMPAS Y NO SOBRE CADA REGLA. Las pantallas del modo cargan además `app.css`, `controles.css` y `scouting.css`, y ésas pintan con `--vio-*`, `--mag-*` y `--ink-*` en sitios que esta hoja no nombra —el hover del botón de acento sin ir más lejos, que tiene un `--vio-200` cableado—. Redefinir las RAMPAS bajo `.en-modo-seleccion` alcanza a todo eso sin tocar una sola regla ajena, y es la misma mecánica con la que el chrome se tiñe con los colores de un club: el color es un valor que se pasa, no una hoja nueva. EL VIOLETA ERA UNA LIMA, Y EL PORQUÉ DEL CAMBIO ESTÁ ESCRITO EN `tokens.css`: «Con el acento anterior —una lima clara— el texto oscuro era la única salida legible; sobre el violeta saturado pasa lo contrario». O sea que volver al lima es volver a esa condición, y la palanca es UNA: `--text-on-accent`. Si se olvida, el texto blanco sobre el relleno lima da **1,01:1** — medido. LA ESCALA DE TINTA GIRA A GRIS NEUTRO CONSERVANDO SU LUZ, que es lo mismo que ya hizo esta casa cuando el negro pasó a tener sesgo violeta: «los escalones de luminancia son los mismos de siempre, lo que giró es el matiz». Acá el matiz se va del todo. Los contrastes no se dedujeron de eso: se midieron. LO QUE NO SE TIÑE, Y ES DELIBERADO: · los colores de una NACIÓN —la bandera, la camiseta, el tinte del chrome— son CONTENIDO y salen de los datos. Que el modo sea lima no puede cambiarle el celeste a la Argentina. · el verde, el ámbar y el arcilla siguen siendo el sí, el cuidado y el no. Un estado que cambia de color según la pantalla deja de ser un estado. El ámbar es el que más se le acerca al lima (33° de matiz) y por eso no se usan pegados: el ámbar habla de una advertencia y el lima de dónde estás parado. ========================================================================== */ /* EL ALTO DE UNA PANTALLA DEL MODO, UNA SOLA VEZ (2/10/2026, repaso de coherencia). Lo que deja la ventana debajo del chrome y la miga, en la escala del sitio: `100vh` es de la ventana y el `zoom` de `html` achica todo, así que se divide. Va en `html`, que es donde vive `--escala-sitio`: declarada más abajo, la cuenta tomaría la escala por defecto. Antes estaba escrita catorce veces. */ html { --alto-pantalla-sel: calc(100vh / var(--escala-sitio, 1) - 9.8rem); } .en-modo-seleccion { /* LA TINTA, NEUTRA. Mismos escalones de luz, sin matiz. */ --ink-1000: hsl(0 0% 2.5%); --ink-950: #0b0b0b; /* el negro de la paleta */ --ink-900: hsl(0 0% 8.5%); --ink-850: hsl(0 0% 11%); --ink-800: hsl(0 0% 14%); --ink-750: hsl(0 0% 17%); --ink-700: hsl(0 0% 21%); --ink-600: hsl(0 0% 30%); --ink-500: hsl(0 0% 42%); --ink-400: hsl(0 0% 62%); --ink-350: hsl(0 0% 63%); --ink-300: hsl(0 0% 70%); --ink-200: hsl(0 0% 83%); --ink-100: hsl(0 0% 94%); /* LA RAMPA INTERACTIVA. Ocupa el lugar del violeta escalón por escalón, así que cualquier regla que pida `--vio-N` adentro del modo recibe su lima. El 500 es `#C6FF00` exacto: es el color de la paleta y es el relleno pleno. */ --vio-700: hsl(73 100% 17%); --vio-600: hsl(73 100% 26%); --vio-500: #c6ff00; --vio-450: hsl(73 100% 58%); --vio-400: hsl(73 100% 63%); --vio-300: hsl(73 100% 72%); --vio-200: hsl(73 100% 84%); /* LA SEGUNDA VOZ SE VUELVE BLANCA Y NO UN SEGUNDO COLOR. El magenta contesta «de acá cuelga lo que estás mirando» y el acento «esto lo elegiste vos»: son dos significados que tienen que seguir separados, y en una paleta de dos colores el tercer canal es el blanco, no un tono nuevo. */ --mag-550: hsl(0 0% 62%); --mag-500: hsl(0 0% 68%); --mag-450: hsl(0 0% 76%); --mag-400: hsl(0 0% 88%); --mag-300: hsl(0 0% 92%); /* Los derivados que en `tokens.css` están escritos con un `hsl()` literal y no como `var()`: si no se repiten acá, se quedan violetas. */ --bg-hover: hsl(0 0% 16%); --bg-active: hsl(0 0% 19%); --bg-selected: hsl(73 100% 50% / 0.14); --line-hairline: hsl(0 0% 16%); --line-control: hsl(0 0% 48%); --line-control-strong: var(--ink-400); --icon-quiet: hsl(0 0% 50%); --accent-wash: hsl(73 100% 50% / 0.12); --accent-wash-hi: hsl(73 100% 50% / 0.22); --accent-line: hsl(73 100% 50% / 0.85); /* EL VERDE TAMBIÉN ENTRA EN LA RAMPA, Y NO POR AHORRAR UN TONO. En esta hoja el verde dice seis veces lo mismo —la línea está llena, la plaza se lee exacta, ese partido lo ganaste, ese torneo lo jugás—: «esto está bien». Al lado del lima, un verde que casi es el lima se lee como un lima sucio y no como otra cosa; es peor que no tener verde. Pasa a ser el acento, que en este modo ya significa eso. EL ROJO NO, y por eso sigue abajo sin tocar: lo bueno y lo malo no pueden compartir tono. `--clay-400` es lo único que queda de otro color adentro del modo, y es exactamente donde hace falta. */ --verde-700: hsl(73 100% 17%); --verde-600: hsl(73 100% 26%); --verde-500: #c6ff00; --verde-400: hsl(73 100% 63%); --verde-300: hsl(73 100% 72%); --verde-200: hsl(73 100% 84%); /* LAS CUATRO REGIONES, separadas por LUZ. Ver la nota en `.punto--casa`. */ --region-casa: var(--accent); /* lima pleno — los tuyos */ --region-conmebol: hsl(0 0% 92%); /* blanco */ --region-europa: hsl(73 55% 42%); /* lima apagado */ --region-mundo: hsl(0 0% 45%); /* gris medio */ /* LA PALANCA. Sobre el relleno lima el texto va NEGRO: el blanco da 1,01:1. */ --text-on-accent: #0b0b0b; } /* ========================================================================== EL ACENTO EN TEXTO ES `--accent-texto`, NO `--accent` -------------------------------------------------------------------------- `--accent` es un color de SUPERFICIE —fondos, bordes, barras— y sobre las tres superficies de este modo da 3,42 / 3,13 / 2,68 a uno: por debajo del 4,5:1 que pide un texto chico. `--accent-texto` da 6,96 / 6,38 / 5,46. Toda la hoja usó el primero para escribir hasta el 10/9/2026, y se veía: fue lo que Alberto marcó como «los colores de los textos no se ven bien». ========================================================================== */ /* ========================================================================== EN ESTE MODO RUEDA LA PÁGINA, NO LOS PANELES -------------------------------------------------------------------------- `styles/scouting.css` —la hoja del Buscador— hace `body { height: var(--alto-ventana); overflow: hidden }` y la suelta recién abajo de 1260 px. Esa hoja carga en las cinco pantallas del modo y va DESPUÉS de ésta en la pila, así que arriba de 1260 el modo entero quedaba clavado al alto de la ventana por la decisión de otra pantalla. Medido a 1800×800 antes de esta regla: · Convocatoria — la página rodaba 10 px y los cuarenta y seis candidatos vivían dentro de un panel que rodaba 1.159; · Plantilla — 10 px, con 341 adentro de `.pla__marco`; · Scouting — el `body` RECORTABA 527 px, que no había forma de alcanzar; · Partidos — recortaba 598; · Día de partido — 580 atrapados en la lista de los veintitrés. Eran cinco maneras distintas de resolver el mismo problema inventado, y en dos de ellas había contenido inalcanzable. Se suelta el cuerpo y se sueltan los cuatro paneles: la rueda del ratón hace UNA cosa en todo el modo. `html.en-modo-seleccion` y no `body` a secas, porque a secas pierde contra `scouting.css` por orden de pila; con la clase de la raíz gana por especificidad esté donde esté. La puerta —`seleccion-nueva.html`— no entra acá: no corre `pintarChromeDelModo()`, así que no lleva la clase, y su mapa a pantalla completa sigue siendo lo que era. ========================================================================== */ .en-modo-seleccion body { height: auto; min-height: var(--alto-ventana); overflow: visible; } /* ========================================================================== El Camino DT — LA CONVOCATORIA -------------------------------------------------------------------------- Sólo lo propio de esta pantalla. `.col`, `.tarjeta`, `.panel__head` y la tira `.ojeo` vienen de `app.css` y `scouting.css`; acá no se redefine ninguna. DOS COLUMNAS Y NO TRES. El Buscador tiene criterios, tabla y vista previa porque su trabajo es filtrar un universo de nueve mil. Acá el universo son cuarenta y seis candidatos ya elegidos por el juego, así que no hay nada que filtrar: hay que MIRAR. Las dos columnas son la pregunta y la respuesta —a quién puedo llamar, y a quién llamé—, y la segunda es angosta porque una lista de veintitrés nombres no necesita más. ========================================================================== */ /* -------------------------------------------------------------------------- EL REPARTO DE CADA SECCIÓN -------------------------------------------------------------------------- La convocatoria era una pantalla con cinco cosas: los candidatos, la fecha, la campaña, la lista y la red de ojeo. Cada una en su sección desde el 10/9/2026, y la que quedó acá hace UNA cosa —comparar cuarenta y seis futbolistas— con el ancho entero para hacerla. `--sola` es una tarjeta que llena la pantalla; `--dos`, dos que se reparten el ancho. No hay una tercera forma: el día que aparezca, será una clase más y no un `grid-template-areas` con nombres. -------------------------------------------------------------------------- */ /* `flex: 1` Y NO SÓLO `min-height: 0`. El `main` es hijo del `body`, que `nueva.css` pone en columna con el alto de la ventana; con `flex: 0 1 auto` —el de fábrica— podía encogerse pero no CRECER hasta lo que sobra, así que se quedaba en el alto de su contenido y abajo quedaba un vacío. MEDIDO A 1512×1150, y la primera vez lo medí mal: a 1440×900 el contenido llenaba solo, la regla no cambiaba nada y la saqué por inerte. En una ventana alta el defecto aparece entero — main 776 sobre 1105 disponibles— y con la regla puesta pasa a 1105. Una regla no es inerte porque no se note en la ventana en la que la probaste. */ /* EL ALTO SE CAPA ACÁ Y SALE DE LA VENTANA. El `body` del modo crece con su contenido —lo suelta `.en-modo-seleccion body`, y tiene que ser así porque otra hoja le imponía su alto a las cinco pantallas—, así que un `flex: 1` no capa nada: la tabla empujaba la página 1.065 px abajo del pliegue. El `main` del modo arranca a 147 px del borde, medido, y 11rem son ésos más el respiro. `.convoc--sola` NO se capa: la usan pantallas cuyo contenido sí entra. */ .convoc { display: flex; flex: 1; gap: var(--sp-4); align-items: stretch; min-height: 0; } .convoc:not(.convoc--dos) { max-height: calc(100vh - 11rem); } .convoc--sola > .col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* DE COSTADO SÍ, Y DE ARRIBA ABAJO TAMBIÉN DESDE EL 11/9/2026. Lo de costado no cambió: la tabla de los cuarenta y seis tiene columnas de ancho fijo y en un teléfono pide 1.294 px; sin un desplazamiento propio, esos 904 de más se los come la PÁGINA y toda la pantalla se corre — la vara del teléfono lo marcó apenas se sacó el `overflow: auto` que tenía. LO VERTICAL SÍ CAMBIÓ, y es una orden de Alberto: «no mostremos pantallas con scroll». Acá el contenido NO entra y no puede entrar —cuarenta y seis filas miden 1.818 px y la ventana deja 753—, así que lo único elegible es QUIÉN rueda. Rodaba la página; ahora rueda la tabla, con su cabecera pegada, que es lo que hace la pantalla de entrenamiento del club. Y EL PELIGRO DE ESTO ESTÁ MEDIDO Y TIENE NOMBRE: el 10/9/2026 este modo tuvo dos pantallas con contenido INALCANZABLE porque una hoja ajena le impuso su alto al `body`. Un desplazamiento interno que no llega al final es peor que una página larga. Por eso el `min-height: 0` no es adorno —sin él, un hijo de flex se niega a achicarse por debajo de su contenido y la caja nunca rueda— y por eso la vara de esta pantalla comprueba que **la última fila se alcance**, no que la página mida 900. */ .convoc__lineas > [data-f="lineas"] { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: auto; } /* CADA DATO DEBAJO DE SU RÓTULO. `.data-table th` alinea a la derecha por defecto —está pensado para columnas de cifras— y las celdas de texto van a la izquierda, así que en las columnas de texto el rótulo y el dato miraban para lados distintos. Se declara el eje UNA vez por columna y vale para el encabezado y para la celda, que es la única forma de que no se separen. */ .convoc__tabla .u-txt, .convoc__tabla th.u-txt { text-align: left; } .convoc__tabla .u-num, .convoc__tabla th.u-num { text-align: right; } .convoc__tabla .u-cen, .convoc__tabla th.u-cen { text-align: center; } /* El encabezado centrado tiene que centrar también su botón de orden, o el rótulo queda en el medio y la flecha se va contra el borde. */ .convoc__tabla th.u-cen .sort { justify-content: center; width: 100%; } /* --- una línea (arqueros, defensores…) --- */ /* -------------------------------------------------------------------------- LOS CANDIDATOS, EN TABLA -------------------------------------------------------------------------- `.data-table` es la tabla de la casa y trae su cabecera, sus hairlines y su tipografía; acá va sólo lo que es de esta pantalla — el encabezado de línea que cruza el ancho, la fila del que ya está convocado y la niebla del nivel. LA CABECERA QUEDA FIJA AL RODAR, que es la mitad de por qué una tabla ordenable sirve: con cuarenta y seis filas, perder los rótulos al bajar obliga a subir para saber qué columna estabas mirando. -------------------------------------------------------------------------- */ .convoc__tabla { width: 100%; } .convoc__tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-panel); } /* El encabezado de línea: una fila que cruza la tabla entera y lleva su cupo. */ .convoc__grupo th { padding: var(--sp-5) var(--sp-4) var(--sp-3); text-align: left; font-weight: 400; background: var(--bg-panel); border-bottom: 1px solid var(--line-hairline); } .convoc__grupo .label strong { color: var(--text-secondary); } /* PEGADO AL NOMBRE Y NO FLOTANDO A LA DERECHA. Con `float: right` el «3/3» terminaba a mil cuatrocientos píxeles de la palabra «Arqueros», debajo de la columna del botón: había que cruzar la tabla entera para saber de qué línea era. Al lado del nombre se leen como una sola cosa. */ .convoc__cupo { margin-left: var(--sp-3); font-variant-numeric: tabular-nums; } /* LA FILA ELEGIDA SE MARCA, NO SE BAÑA. Con la paleta lima, el lavado del acento sobre el negro da un verde oliva apagado: cubre la fila entera, ensucia el lima y encima le baja el contraste al texto que lleva encima. Un canto de tres píxeles dice lo mismo con una superficie treinta veces más chica, y es lo que ya hace `.parts__conf-f--entra` dos mil líneas más abajo. El fondo sube un escalón de luz y nada más: la fila se despega, el color no. */ .convoc__fila--dentro { background: var(--ink-800); box-shadow: inset 3px 0 0 var(--accent); } /* -------------------------------------------------------------------------- EL RENGLÓN QUE ACABA DE MOVERSE -------------------------------------------------------------------------- Dos gestos y no uno, porque son dos direcciones. El que ENTRA se tiñe de golpe con el color de la selección y baja a su fondo definitivo; el que SALE descarga ese color y se corre un pelo a la izquierda, como algo que se suelta. VA EN EL FONDO Y NO EN UN `transform` DE LA FILA: una fila de tabla con `transform` crea un contexto de apilado propio y en Chrome se lleva por delante los bordes de sus celdas. Lo que se mueve es la celda del nombre, que es una celda común. */ .convoc__fila--entra { animation: fila-entra 290ms var(--ease-entrada) both; } @keyframes fila-entra { 0% { background-color: color-mix(in srgb, var(--nacion-tinta, var(--accent)) 55%, transparent); } 100% { background-color: var(--accent-wash); } } .convoc__fila--sale { animation: fila-sale 290ms var(--ease) both; } @keyframes fila-sale { 0% { background-color: var(--accent-wash); } 100% { background-color: transparent; } } .convoc__fila--entra .convoc__quien { animation: quien-entra 230ms var(--ease-entrada) both; } @keyframes quien-entra { 0% { transform: translateX(-8px); } 100% { transform: none; } } .convoc__fila--sale .convoc__quien { animation: quien-sale 230ms var(--ease) both; } @keyframes quien-sale { 0% { transform: translateX(6px); opacity: 0.55; } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lista23__c--nuevo, .lista23__linea--liberada .lista23__marcas, .convoc__fila--entra, .convoc__fila--sale, .convoc__fila--entra .convoc__quien, .convoc__fila--sale .convoc__quien { animation: none; } } /* EL NOMBRE A LA IZQUIERDA Y EL BOTÓN A LA DERECHA, LOS DOS FIJOS. Once columnas no entran en el panel, así que la tabla rueda de costado — y rodando se perdían las dos únicas cosas que la fila necesita para decidir: de quién es y cómo se lo llama. El botón fuera de cuadro es lo peor de los dos: es el control de la pantalla, no un dato. Llevan fondo propio o el resto de la fila se les dibuja encima al pasar por debajo, y el de la fila convocada se repite para que la franja no se corte. */ .convoc__quien, .convoc__accion { position: sticky; z-index: 1; background: var(--bg-panel); } .convoc__quien { left: 0; } .convoc__accion { right: 0; text-align: right; } .convoc__fila--dentro .convoc__quien, .convoc__fila--dentro .convoc__accion { background: var(--bg-panel-dentro, var(--ink-900)); } /* SIN VERSALITA: `.data-table` pone en versalitas los encabezados de fila, que es lo correcto para un rótulo —«PJ», «Puesto»— y no para un nombre propio. «AGUSTÍN ROSSI» se lee peor que «Agustín Rossi» y encima no es como el juego escribe a la gente en ninguna otra pantalla. */ /* CON LA TABLA DELANTE, y no por gusto: `.data-table th` es (0,1,1) por el elemento y le ganaba a `.convoc__quien`, que es (0,1,0). Esa regla está bien —viste los ENCABEZADOS de columna en versalita— y acá el `th` es un encabezado de FILA, que es un nombre propio. */ .convoc__tabla .convoc__quien { text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; } .convoc__valor { color: var(--text-secondary); white-space: nowrap; } .convoc__nivel--niebla { color: var(--text-muted); font-style: italic; } /* --- la lista --- */ /* UN HUECO SE DIBUJA, NO SE OMITE. Una lista a la que le falta un arquero tiene que MOSTRAR el renglón vacío: si se omite, veintiuno y veintitrés se ven igual y el DT se entera al querer jugar. */ .convoc__aviso { margin: var(--sp-3) 0 0; padding: 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); } /* CENTRADO CON LO DE ARRIBA. Este renglón explica el estado que cuentan los casilleros —está completa, faltan puestos, la dejó el DT anterior—, así que pertenece a esa cabecera. Pegado al borde izquierdo, debajo de un bloque centrado, se leía como el pie de la tabla. Se centra ACÁ y no moviéndolo adentro de `.lista23`: es el `role="status"` de la pantalla y tiene que quedar donde el lector de pantalla ya lo anuncia. */ .convoc__lineas > .convoc__aviso, .plantilla .convoc__aviso { margin-top: 0; margin-bottom: var(--sp-3); text-align: center; } /* Una región sin un solo candidato se apaga pero no se esconde: que no tengas a nadie en Europa es información. */ /* -------------------------------------------------------------------------- EL TELÉFONO -------------------------------------------------------------------------- Las dos columnas se apilan y la lista va PRIMERO: en una pantalla donde no entran las dos, lo que el DT necesita ver al volver es a quién ya llamó. -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* Apiladas, y en el orden de lo que hay que hacer: primero la tarea (la fecha), después lo que ya decidiste y al final el instrumento con el que se decide. Eso decía acá, y el instrumento estaba último. LA FOTO EN UN IPHONE LO DESMINTIÓ. Ese orden daba por sentado que la lista es corta, y no lo es: son veintitrés renglones más cuatro encabezados, y al empezar el año están los veintitrés en «sin cubrir». O sea que la primera pantalla del modo en un teléfono es un muro de veintitrés huecos antes del primer candidato — te muestra todo lo que te falta y nada de lo que podés hacer. Con la lista llena el orden viejo estaba bien; con la lista vacía, que es cuando la pantalla se ve por PRIMERA vez, estaba mal. Los candidatos suben, que además son la respuesta a los huecos. */ .convoc { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'fecha' 'campana' 'lineas' 'lista'; } .convoc__fila { grid-template-columns: minmax(0, 1fr) 4rem auto; } } /* ========================================================================== LA PLANTILLA DE LA SELECCIÓN — `plantilla-seleccion.html` -------------------------------------------------------------------------- ES LA TABLA DE LA CONVOCATORIA. No una parecida: la misma. Las columnas, de dónde sale cada valor y cómo se dibuja cada celda viven en `convocatoria.js` y las usan las dos pantallas, así que el estilo también es el mismo — `.convoc__tabla`— y acá abajo sólo vive lo que ES de ésta. Por eso desaparecieron las reglas propias que tenía antes (`.pla__quien`, `.pla__nombre`, `.pla__club`, `.pla__niebla`, `.pla__grupo`): eran la copia de al lado, y una copia que hay que mantener sincronizada a mano es la que se desincroniza. ========================================================================== */ /* `flex: 1` POR LO MISMO QUE LA TABLA DE CANDIDATOS: un `overflow` sobre una caja que ya mide lo que mide no tiene nada que recortar, y la página rodaba 735 px en vez de rodar la tabla. */ .pla__marco { min-height: 0; /* De costado sí, que la tabla tiene columnas fijas; de arriba abajo rueda la página. */ overflow-x: auto; overflow-y: visible; margin: 0 calc(-1 * var(--sp-5)); padding: 0 var(--sp-5); } /* La única columna que la convocatoria no tiene. */ .pla__n { width: 3rem; text-align: center; } /* EL DISTINTIVO DE QUE YA ESTÁN. En la convocatoria el convocado lleva franja, porque ahí conviven los que están y los que no; acá están TODOS y una franja en las veintitrés dejaría de ser marca para ser fondo. El distintivo es el NÚMERO, que es lo que un futbolista recibe justamente por estar en la lista —del 1 al 23— y que la convocatoria no puede mostrar porque ahí nadie lo tiene todavía. Va en el color del modo y con forma de dorsal. */ .pla__dorsal { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 var(--sp-2); background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r-sm); color: var(--accent-texto); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; } /* ========================================================================== EL CHROME, EN EL MODO -------------------------------------------------------------------------- Todo lo que sigue cuelga de `.en-modo-seleccion`, que `pintarChromeDelModo()` pone en la raíz. `chrome.js` es el MISMO en las veintidós pantallas y esto vale sólo acá: el chrome no se toca, se le habla. LOS SEIS FAVORITOS SE VAN, y no por tamaño. Medidos uno por uno en la convocatoria: Jugadores, Entrenamiento, Próximo partido, Mercado de pases, Propuestas y Tu recorrido — seis atajos a pantallas de club que un seleccionador no tiene. El problema no era que fueran de 25 px, era que no eran suyos. Y el modo tiene dos pantallas, las dos en la fila de abajo: una barra de favoritos que las repitiera no agregaría nada. LAS PESTAÑAS TOMAN ESE SITIO Y ESE PESO. Son el único movimiento del chrome en este modo, así que dejan de ser un renglón de texto: caja, alto de control y un subrayado que se ve desde el otro lado de la pantalla. ========================================================================== */ .en-modo-seleccion .marcadores, .en-modo-seleccion [data-f="tira-marcadores"], .en-modo-seleccion [data-f="elegir-marcadores"], .en-modo-seleccion [data-f="alternar-marcadores"] { display: none; } .en-modo-seleccion .nav-sub { gap: var(--sp-3); } .en-modo-seleccion .nav-sub__item { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-sm); /* UN ESCALÓN MÁS (30/9/2026, «agrandemos un poco los nombres de los menús»): crece la letra, no la caja, así el chrome mide lo mismo y las pantallas medidas sin rueda siguen entrando. */ font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } /* LA CAJA DE LA ELEGIDA ES EL `::after` Y NO EL ENLACE (1/10/2026). El `::after` es el subrayado del juego y tiene nombre propio en la transición entre pantallas (`solapa`, en `movimiento.css`): viaja de la solapa de antes a la nueva. Pintada en el enlace, la caja quedaba en la foto del chrome, y a mitad del cruce se veían dos —la que se iba y la que llegaba—. En el `::after` es UNA y se desliza. */ .en-modo-seleccion .nav-sub__item[aria-current="page"] { color: var(--text-primary); isolation: isolate; } .en-modo-seleccion .nav-sub__item[aria-current="page"]::after { inset: -1px; height: auto; z-index: -1; background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r-sm); } @media (hover: hover) { .en-modo-seleccion .nav-sub__item:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--text-primary); } } /* Y las flechas de historial suben a tamaño de control: son las únicas dos que quedan a la izquierda y estaban en 31 px, debajo del piso del dedo. */ .en-modo-seleccion .history__btn { width: 34px; height: 34px; } /* La bandera al lado del nombre, con la vitrina de siempre: varias tienen blanco en los bordes y sin una línea que las cierre se derraman. */ /* EL TÍTULO DE LA PANTALLA, CON EL PESO QUE TENÍA. Cuando eran dos piezas, la magenta era el «Selección» de la nav —era el ítem activo de esa barra— y el nombre del país iba en gris al lado. Al juntarlas en una, la pieza heredó el gris y el modo se quedó sin título. Ahora lo lleva entero: es lo que dice dónde estás, y en este modo no compite con nada porque la nav de secciones quedó vacía. */ .en-modo-seleccion .chrome__seleccion { display: inline-flex; align-items: center; gap: var(--sp-4); /* MÁS GRANDE QUE EL NOMBRE DE UN CLUB, y a propósito: en el chrome de club ahí va un escudo chico y un nombre corto, y acá va lo único que identifica a la partida entera. Es el título de la pantalla y tiene que pesar como tal. */ font-size: var(--fs-3xl); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-tight); /* El color lo calcula `tenirElChromeDelModo()` con los dos de la selección y lo mide contra la banda ya mezclada. El magenta del sistema queda de red para el instante anterior a que ese cálculo corra. */ color: var(--seleccion-tinta, var(--nav-aqui)); } .chrome__bandera { /* La bandera acompaña al escudo en tamaño para que las noventa y una naciones sin escudo no tengan una cabecera más chica que las cuatro que sí lo tienen. Conserva su proporción: 3:2 es la de casi todas. */ display: block; width: 57px; height: 38px; flex: none; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--ink-800); } /* El escudo de la federación, cuando lo hay. Cuadrado y sin vitrina: un escudo trae su propio contorno y encerrarlo en un marco lo empequeñece — al revés que una bandera, que sin línea se derrama cuando tiene blanco en el borde. */ .chrome__escudo { /* 40 px: el alto de la fila del chrome menos el aire. Un escudo de federación tiene detalle —letras, coronas, estrellas— y a 26 px se leía como una mancha. */ height: 54px; width: auto; flex: none; object-fit: contain; vertical-align: middle; } /* LA RUTA, UN ESCALÓN MÁS: misma franja de 26 px, letra de 14. */ .en-modo-seleccion .breadcrumb { font-size: var(--fs-sm); } .en-modo-seleccion .breadcrumb .i { width: 12px; height: 12px; } /* LA MIGA, ALINEADA Y CON AIRE. Medido: la pestaña activa empieza en x=12 y su TEXTO en x=24 —tiene 12 px de padding desde que las pestañas son cajas— y la miga arrancaba en x=17, o sea en tierra de nadie: ni con el borde de la pestaña ni con su texto. Y su `y` era exactamente el borde de abajo de la pestaña, sin un píxel entre las dos. Se alinea con el TEXTO de la pestaña, que es lo que el ojo sigue hacia abajo, y se le da la separación que la fila de arriba ya tiene por dentro. */ .en-modo-seleccion .breadcrumb { /* 24 px y no 16: la pestaña arranca en 12 y tiene 12 de padding, así que su TEXTO cae en 24. Con los 16 que la miga ya traía quedaba en 17, o sea en tierra de nadie — ni con el borde de la pestaña ni con su texto. */ padding-left: var(--sp-8); margin-top: var(--sp-3); gap: var(--sp-3); } /* ========================================================================== LA PUERTA DEL MODO SELECCIÓN — `seleccion-nueva.html` -------------------------------------------------------------------------- MISMO ESQUELETO Y MISMA CÁMARA QUE EL SELECTOR DE CLUBES, a propósito: son el mismo gesto —elegir a quién dirigir— y dos fluideces distintas para el mismo gesto se sienten como dos juegos. Lo que se hereda está anotado en `nueva.css` con su porqué; acá sólo lo propio. ========================================================================== */ .puerta { /* EL ALTO SE LO DA ELLA MISMA, y no puede salir del `body`. `nueva.css` —la hoja del selector de clubes, que viaja en la pila de todas las páginas— hace `body { height: var(--alto-ventana) }` arriba de 1360 px y se lo SUELTA abajo (`height: auto`), porque aquella pantalla quiere que la página ruede en ventanas chicas. Apoyarse en eso es apoyarse en la decisión de otra pantalla: a 1440 andaba y a 1280 la misma maqueta medía 2.044 px de alto en una ventana de 633. Y `flex: none` NO ES COSMÉTICO: el `body` es una columna flex, así que el eje principal es el ALTO y un `flex: 1` trae `flex-basis: 0%`, que en ese eje PISA al `height`. Con el alto pisado, la grilla queda de alto automático, su `minmax(0, 1fr)` se resuelve como max-content, y la columna de noventa y cinco banderas —1.879 px— estira la fila, la fila estira la pantalla y la pantalla estira la página. El ancho nunca lo puso el `flex`, aunque yo lo hubiera escrito así: en una columna flex el ancho es el eje TRANSVERSAL y lo llena el `width: 100%`. Medido antes de todo esto: 826 px de los 1.385 lógicos a 1440 —233 px de aire a cada lado— con un `max-width` de 1472 que nunca llegaba a tocar. */ flex: none; width: 100%; max-width: 108rem; height: var(--alto-ventana); min-height: 0; margin: 0 auto; padding: var(--sp-6); display: grid; /* LAS FILAS SE ASIGNAN A MANO Y NO POR ORDEN DE LLEGADA, y esto es un defecto medido y no una precaución. La grilla tiene cuatro filas —cabecera, aviso, mapa y pie— y el `1fr` es la tercera. Cuando el aviso está oculto deja de ser ítem de la grilla, y entonces TODO SUBE UNA FILA: el mapa cae en la segunda —`auto`, o sea su alto de contenido— y el `1fr` se lo queda el «Volver a la portada». Medido a 1512×1150 entrando desde la portada: el mapa 545 px y el pie 400; recargando con el aviso visible, el mapa 885 y el pie 20. Era exactamente el «entro y lo veo chico, recargo y se amplía». Con `grid-row` escrito, una fila vacía mide cero y nadie se corre. */ grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } /* EL VOLVER VA ARRIBA Y A LA IZQUIERDA, ANTES DEL TÍTULO. Estaba al pie de la pantalla, en letra chica y al final de una columna que rueda: la única salida de esta puerta quedaba en el sitio donde menos se busca una salida. Arriba a la izquierda es donde vive el «atrás» en cualquier pantalla, y con caja y flecha deja de ser un enlace perdido para ser un control. `align-items: center` Y NO `baseline`: con un botón en la fila, la línea de base la marcaba el texto de adentro del botón y el título quedaba tres píxeles alto. */ .puerta__aviso { margin: 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-panel); color: var(--text-secondary); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- LA GRILLA — mapa arriba, expediente debajo, banderas a la derecha -------------------------------------------------------------------------- */ .atlas { /* DOS COSTADOS, NO CUATRO CELDAS. Antes esto era una grilla de 2×2 con la columna de banderas cruzando las dos filas, y ahí el alto se volvía circular: la fila `auto` se sizeaba con el contenido intrínseco de esa columna —1.891 px con noventa y cinco banderas— y el mapa terminaba desbordando su celda y pisando el expediente 110 px. Partiendo primero en costados, el alto llega decidido desde arriba (`1fr` de .puerta) y cada costado lo acepta en vez de discutirlo. */ display: flex; gap: var(--sp-6); min-height: 0; } /* LA COLUMNA VA A LA IZQUIERDA Y EL MAPA A LA DERECHA. Se elige a la izquierda —donde el ojo empieza— y el resultado se ve al lado; con el orden al revés el gesto iba de derecha a izquierda, que es contra la lectura. En el marcado la tierra sigue primero por accesibilidad y el orden visual lo pone el `order`. */ /* El costado del mapa: se queda con todo lo que sobre, y adentro no hay dos filas desde que el expediente se mudó a la columna. */ /* Y UNO MÁS ABAJO, que apareció al agrandar el mapa: con 48vw la ficha vuelve a rodar por debajo de 820, y ese piso ya lo teníamos. Agrandar el planisferio no puede costar el scroll que se acaba de sacar. */ /* LA FICHA LLENA LA COLUMNA. Antes terminaba donde terminaba su texto y abajo quedaba un cuarto de pantalla vacío: en una ventana alta el panel medía 560 y la columna 930. Creciendo, el borde del panel llega al pie y la pantalla deja de tener un agujero que no dice nada. */ .atlas__ficha { flex: 1; overflow-y: auto; min-height: 0; } /* LA CABECERA DEL EXPEDIENTE SE APILA EN LA COLUMNA. Era una fila de tres —bandera, nombre, botón— y eso entraba cuando el expediente cruzaba la pantalla a lo ancho. En una columna de 22rem el nombre queda con seis caracteres de ancho y «CONMEBOL · 3.º DEL MUNDO» se parte en tres renglones. El botón baja y toma el ancho, que además es el único gesto que cierra la pantalla y merece el sitio. */ /* EL BOTÓN DE VOLVER AL MUNDO, encima del mapa y no debajo: pertenece al mapa, y un control que vive en la caja que gobierna no hay que ir a buscarlo. */ /* EL MARCO NO LLEVA PROPORCIÓN, y esto es la lápida de una regla que puse y no servía. Le había dado `aspect-ratio: 2.34` para que no dibujara bandas negras arriba y abajo, y el arreglo era correcto CUANDO lo escribí — el marco se estiraba al alto de la pantalla. Después la columna pasó a la izquierda y el reparto cambió, y con el reparto nuevo la regla dejó de hacer nada: medido en tres ventanas (2000×1100, 1600×950, 1440×900), el planisferio dibujado da EXACTAMENTE lo mismo con la proporción puesta y sacada. Se saca en vez de dejarse por las dudas: una regla que no hace nada es una que el próximo que lea la hoja va a creer que sostiene algo. Y de yapa se la pasé como consejo a la sesión del selector de clubes, que la copió y le encogió el mapa a la mitad — un arreglo no se copia sin comprobar que la pantalla de destino tenga el problema. */ /* EL BOTÓN FLOTA SOBRE EL MAPA, ASÍ QUE SE TRAE SU PROPIO FONDO. Es `action--callada`, o sea transparente, y eso está bien dentro de un panel — ahí el fondo es una superficie plana— pero acá abajo pasa un planisferio con países claros y oscuros: sobre Norteamérica el rótulo se perdía contra la mancha gris. Con fondo opaco y borde, el mismo botón se lee igual pase lo que pase por debajo, y el desenfoque de atrás despega el borde del dibujo sin taparlo. */ /* Vacío se sale del reparto. Con la ficha de apertura el panel ya no se vacía nunca, pero la regla se queda: es la red por si algún día hay un estado sin nada que decir. */ .atlas__ficha:empty { display: none; } /* LA ENTRADA VA EN LOS HIJOS Y NO EN EL PANEL. Puesta en el panel corría una sola vez, al cargar: cambiarle el `innerHTML` a un elemento no le reinicia la animación, así que el salto de la ficha de apertura al expediente —que es el momento de esta pantalla— entraba de golpe. Los hijos se crean de nuevo en cada pintada, así que animarlos a ellos anima cada cambio. Y con un escalón entre los dos: la cabecera dice quién y el cuerpo dice cuánto, en ese orden. */ .atlas__ficha > * { animation: exp-entra var(--dur-escena) var(--ease-entrada) both; } .atlas__ficha > * + * { animation-delay: 40ms; } @keyframes exp-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .atlas__ficha:not(:empty) { animation: none; } } /* -------------------------------------------------------------------------- EL MAPA Y LA CÁMARA -------------------------------------------------------------------------- La curva y la duración son las del selector de clubes, con su razón escrita allá: un movimiento de cámara tiene que sentir masa, y la masa se transmite con tiempo largo y salida hundida. -------------------------------------------------------------------------- */ /* Las cuatro filas de la puerta, por su número. Ver el porqué en `.puerta`. */ .puerta__aviso { grid-row: 2; } .atlas { grid-row: 3; } .lienzo { /* NI `aspect-ratio` NI `height: 100%`. Los dos hacían lo mismo por caminos distintos: pedir un alto propio en una caja cuyo alto todavía no está resuelto. Con `aspect-ratio` el mapa reclamaba 1012/2,33 = 434 px; con `height: 100%` el porcentaje no encontraba contra qué medirse, caía en `auto` y el SVG imponía sus 637 px naturales. En los dos casos desbordaba la celda y se pisaba con el expediente de abajo — un solapamiento que la foto no delata, porque el que pisa es el que está encima. Con `flex: 1` el alto llega repartido en vez de pedido, y el planisferio se centra adentro con su propia proporción: `preserveAspectRatio` es `xMidYMid meet` por defecto, o sea que entra entero y no se deforma. */ position: relative; flex: 1; min-height: 0; width: 100%; transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1); } /* El SVG se cuelga de las cuatro esquinas del lienzo: `inset` no necesita un alto contra el cual sacar un porcentaje, que es justo lo que no había. */ .lienzo svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .lienzo svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .lienzo { transition: none; } } /* La escala del mapa, por luminosidad: el fondo en 4 %, el mundo que no se dirige en 11 %, los noventa y cinco en 42 % y el elegido en violeta. Los cuatro estados llevan la MISMA especificidad, o el reset le gana a los tres y el mapa entero sale del mismo gris. */ .lienzo svg path { fill: var(--ink-850); stroke: var(--ink-900); stroke-width: 0.4; /* Que la costa no engorde al acercarse: sin esto, a 3,4× se dibujaría con línea de tres píxeles y el mapa se vería más pesado de cerca que de lejos. */ vector-effect: non-scaling-stroke; } .lienzo svg path.lienzo__pais { fill: var(--ink-500); cursor: pointer; opacity: 0; transition: fill var(--dur-fast) var(--ease), opacity var(--dur) var(--ease-entrada); } /* EL HOVER ES DEL RATÓN, y esto no es prolijidad: en iOS un `:hover` sin acotar se aplica en el PRIMER TOQUE y se queda pegado. Sin el `@media`, tocar un país lo dejaba aclarado para siempre —hasta tocar otro— y el dedo terminaba dejando un rastro de manchas por el mapa que no dicen nada. Las 169 reglas del juego se acotaron el 9/9/2026 y estas cinco no estaban en ese barrido: `styles/seleccion.css` no existe en main, así que la rama en vuelo se quedó con el valor viejo. La regla del elegido sale del bloque —vale con dedo y con ratón— y adentro queda su defensa contra el hover. */ @media (hover: hover) { .lienzo svg path.lienzo__pais:hover { fill: var(--ink-300); } } /* DE CERCA, EL ENTORNO TIENE QUE EXISTIR. Con la cámara encima de un país, el resto del mundo en 11 % sobre un fondo de 4 % desaparece y el elegido queda flotando en negro: el acercamiento, que viene a dar contexto, lo quitaba. A 3,4× la mancha ocupa un tercio del lienzo y sus vecinos son lo único que dice dónde está. El mundo sube a 17 % y los dirigibles a 55 % mientras dura. */ @media (prefers-reduced-motion: reduce) { .lienzo svg path.lienzo__pais { opacity: 1; transition: fill var(--dur-fast) var(--ease); } } /* -------------------------------------------------------------------------- LAS BANDERAS -------------------------------------------------------------------------- */ /* LA LEYENDA, CON EL TAMAÑO DE ALGO QUE SE MIRA. Los chips medían 24 px de alto y se leían como una fila de etiquetas apagadas al costado de una lista. Ahora son la leyenda del planisferio y viven debajo de él: seis piezas anchas, con la cifra grande adelante —que es el dato— y el nombre debajo. El número primero y no el nombre porque «39» es lo que distingue a UEFA de CAF de un vistazo; el nombre confirma. */ .confs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); } .conf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: var(--sp-4) var(--sp-5); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-secondary); cursor: pointer; text-align: left; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .conf__n { font-size: var(--fs-xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } .conf__nombre { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; } .conf--activa { background: var(--accent-wash); border-color: var(--accent); color: var(--text-primary); } .conf--activa .conf__n { color: var(--accent-texto); } @media (hover: hover) { .conf:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--text-primary); } } /* DOS COLUMNAS DE BANDERAS, con su propio scroll. El alto lo fija el mapa: la columna no puede crecer más que él o la página entera se estira. */ .banderas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); /* SIN TOPE EN REM: la columna se estira hasta donde llegue la grilla, que es lo que hace que en una pantalla alta se vean treinta banderas y no doce. */ flex: 1; min-height: 0; overflow-y: auto; padding-right: var(--sp-2); align-content: start; /* LA COLUMNA SIGUE, Y HAY QUE DECIRLO. Cortada a filo de caja parece un defecto de maqueta; el desvanecido del último tramo se lee como lo que es. `mask` y no un degradado encima, para no tapar los botones ni robarles el clic. */ mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent); } .nacion { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--fila-tabla); padding: var(--sp-2) var(--sp-3); background: var(--bg-row); border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-primary); cursor: pointer; text-align: left; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) { .nacion:hover { background: var(--bg-hover); } } /* EL NOMBRE ENTRA ENTERO Y NO SE CORTA. Antes iba en una línea con `ellipsis` y la columna mostraba «Arabia Sa…», «Bosnia y H…»: un país reconocible por su nombre a medias no es reconocible. Dos renglones y el tamaño baja un escalón, que es lo que costaba que entraran. */ .bandera { width: 28px; height: 20px; flex: none; border-radius: 2px; outline: 1px solid var(--ink-800); outline-offset: -1px; object-fit: contain; } /* -------------------------------------------------------------------------- EL EXPEDIENTE -------------------------------------------------------------------------- */ .atlas__ficha { padding: var(--sp-5); background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-md); } /* LA ENSEÑA. En este juego el escudo es la forma de reconocer un club y va a 64 px; una selección no tiene escudo, tiene bandera, y hace ese trabajo. El marco es la vitrina: varias tienen blanco en los bordes —Argentina, Japón, Finlandia— y sin una línea que las cierre se derraman sobre el panel. */ .ensena { flex: none; display: block; width: 84px; height: 56px; padding: 3px; background: var(--ink-800); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: 0 6px 18px hsl(245 40% 2% / 0.5); } .ensena__pano { display: block; width: 100%; height: 100%; border-radius: 2px; /* `contain` y no `cover`: las banderas no comparten proporción y recortarlas para llenar el marco les corta el escudo o el sol. */ object-fit: contain; } /* EL BOTÓN VA EN LA CABECERA Y CON EL TAMAÑO DE UNA ACCIÓN PRIMARIA. Estaba al pie de una columna angosta, con el ancho de la caja y sin altura propia: se leía como un renglón teñido y no como el botón que cierra la pantalla. */ /* EN DOS COLUMNAS, y el número salió de medir. La ficha tiene 440 px de ancho y el `minmax(13rem, …)` que había pedía 208 por columna: con el relleno no entraban dos, así que los bloques se apilaban en una sola. Con tres eso daba igual —sobraban seiscientos píxeles abajo—, pero con seis el contenido pasó a pedir 865 de los 736 que hay y el último bloque quedaba fuera de la vista. `columns` Y NO `grid`, que fue el primer intento: seis bloques de alturas muy distintas en una grilla se alinean por FILA, así que al lado del bloque alto queda el hueco del bajo. El flujo por columnas los empaqueta. */ /* LA CUARTA COLUMNA CUANDO EL ALTO ESCASEA, y va ACÁ y no junto al ancho del panel: puesta allá arriba la pisaba esta misma declaración, que vive trescientas líneas más abajo y gana por orden. El arreglo va donde vive la regla. */ /* EL AIRE ES EL DATO. Con diez bloques en tres columnas la ficha entra sin rodar, y lo que sobra abajo NO se llena con más texto: se reparte entre los bloques. Apretados a `sp-4` eran diez rótulos y treinta cifras sin respirar — un muro de números en el que no se distingue dónde termina uno y empieza el otro—. El rótulo se despega de su bloque con más margen ARRIBA que abajo, que es la regla de siempre: un título pertenece a lo que sigue. */ /* -------------------------------------------------------------------------- LA PIZARRA DE APERTURA -------------------------------------------------------------------------- Acá vivían tres gráficos —el año en 32 casillas, veinte ojos y 46 marcas—. Eran ciertos y estaban medidos, pero eran una infografía: «el módulo de abajo no me cierra, busquemos alternativas, siempre basándonos en la técnica y la táctica» (Alberto, 29/9/2026). Lo que hay ahora es una cancha con un once, y las tres cifras quedan en un renglón al pie: son el dato, no el dibujo. LA CANCHA MANDA EN EL ALTO. Es la pieza que tiene proporción fija —105 × 68— así que no se la puede estirar: se le da el hueco que sobra y ella elige el lado que entra. El patrón es el de la casa: `container-type: size` sobre el marco y `min(100cqw, 100cqh × razón)` sobre el lienzo. Sin eso, o la cancha se deforma o se come el pie. -------------------------------------------------------------------------- */ /* LA PIZARRA ARRANCA ARRIBA, pegada a lo que la presenta. Estuvo centrada en su hueco y eso abría un pozo entre el aviso y la cancha —«hay espacio vacío arriba de la cancha», Alberto, 29/9/2026—. Ahora la cancha va primero y lo que sobre queda debajo del texto, que es donde un párrafo termina de todos modos. Antes probó `space-between`, que separaba el rótulo de su cancha. */ .piz { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 auto; min-height: 0; justify-content: flex-start; /* Contenedor de ancho: de acá saca la cancha su alto ideal. */ container-type: inline-size; } /* EL BLOQUE DE LA CANCHA PUEDE ENCOGERSE —`min-height: 0`— y es el único: sin eso, un hijo de columna flexible nunca baja de lo que mide su contenido y la cancha de adentro no tenía de dónde ceder. Medido: la ficha rodaba 146 px a 1366 × 768 con la cancha entera. */ .piz__bloque { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; min-height: 0; flex: 0 1 auto; } .piz__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .piz__tit { color: var(--text-muted); } /* El sistema va DENTRO de la frase del rótulo y en el acento, que es lo que lo hace legible sin sacarlo de contexto. */ .piz__tit b { color: var(--accent); font-variant-numeric: tabular-nums; } /* QUÉ SE ESTÁ VIENDO, a la derecha del rótulo y en el acento, como la salida dibujada en la previa: sin esto, once jugadores haciendo cuatro cosas distintas se leen como un partido desordenado. */ .piz__jugada { color: var(--accent); white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* EL MARCO. Panel elevado con su filete, como la caja del planteo en la previa. El alto lo manda el hueco que sobra en la columna y el ancho sale de la proporción del partidito —1050 × 456—, así que la cancha nunca se deforma ni desborda: `container-type: size` arriba y un `min()` abajo. */ /* LA CANCHA NO SE ESTIRA PARA LLENAR: toma el ancho de la columna y su alto sale de la proporción. Estuvo un rato con `flex: 1` y centrada, y eso abría dos pozos de aire —doscientos píxeles arriba y otros tantos abajo— porque el ancho ya la había limitado y el alto que le sobraba no lo podía usar. El aire se va al pie: las tres cifras bajan solas al fondo de la columna. */ .piz__marco { /* «EVITEMOS SCROLL» (Alberto, 29/9/2026). La cancha es la única pieza de la columna que puede ceder alto sin perder nada —los textos, si se aprietan, se cortan—, así que es ella la que se achica cuando la ventana es baja. Su alto ideal es el que le da el ancho —`100cqw` de la pizarra por la proporción—, y `flex-shrink` la deja bajar de ahí hasta 8 rem si no entra. Adentro, la cancha toma el menor de los dos lados, así que achicarse no la deforma. Con alto de sobra no crece: se queda en su ancho. */ flex: 0 1 auto; min-width: 0; min-height: 8rem; height: calc(100cqw * 456 / 1050); display: grid; place-items: start center; container-type: size; } .piz__cancha { width: min(100%, calc(100cqh * 1050 / 456)); /* EL CÉSPED VUELVE A SER VERDE. El partidito tiñe el pasto con la rampa `--verde-*`, y la paleta lima del modo redefine esos tokens —`--verde-500` es `#c6ff00` acá—: sin esto, la cancha de la puerta sale amarilla. La regla de la casa es que la paleta cambia el chrome y no el mundo, así que los verdes reales se devuelven en esta caja y sólo en esta caja. Los valores son los de `tokens.css`, no unos nuevos. */ --verde-700: hsl(150 45% 22%); --verde-500: hsl(146 62% 45%); --verde-400: hsl(145 68% 55%); } /* EL QUE NO VES. El partidito ya dibuja el puesto sin jugador con el trazo cortado, pero lo deja RELLENO con la camiseta del equipo: en la previa eso está bien —el hueco es tuyo igual— y acá no, porque son once fichas del mismo color y la niebla no se ve. Se le saca el relleno: nueve discos apagados y dos encendidos, que es el reparto que dice la línea de abajo. Va por CSS y no por argumento porque el color de la ficha llega como atributo del SVG, y una regla de la hoja le gana a un atributo de presentación. */ .piz__cancha .partidito__ficha--vacia { fill: color-mix(in srgb, var(--ink-700) 82%, transparent); stroke: var(--ink-500); } .piz__pie { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } /* LAS TRES CIFRAS, EN UN RENGLÓN. Antes cada una traía su gráfico y ocupaba un tercio de la columna; el gráfico ahora es uno solo y es la cancha. */ /* LO QUE SE JUEGA EN ESTE MODO. Un lema y tres ejes con su palabra adelante, en el acento: la palabra es la promesa y la frase de al lado es la prueba, con el número adentro. Tres renglones de dos columnas y no un párrafo, porque se leen salteados —el ojo va a «Táctica» y lee esa sola—. */ .piz__modo { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-hairline); } .piz__lema { margin: 0; color: var(--text-primary); font-size: var(--fs-md); font-weight: 700; line-height: 1.25; } /* UNA TABLA DE DOS COLUMNAS, Y LA DE LA IZQUIERDA MIDE LO QUE MIDE SU PALABRA MÁS LARGA. Con un ancho fijo, «Cuerpo técnico» se partía en dos renglones y corría toda la fila; con `max-content` las cuatro palabras quedan en una línea y las cuatro frases arrancan en la misma vertical. `display: contents` deja que cada renglón sea dos celdas de la misma grilla. */ .piz__ejes { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--sp-5); row-gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .piz__ejes li { display: contents; } .piz__ejes li > span { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-secondary); } .piz__ejes b { align-self: baseline; white-space: nowrap; color: var(--accent); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; } /* LAS COPAS. El Mundial arriba, con su frase al lado; las seis continentales en una grilla de tres por dos donde cada una tiene su celda del mismo ancho, así que ninguna cae sola a un renglón nuevo. */ .piz__copas { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-hairline); } .piz__copas-cab { display: flex; align-items: center; gap: var(--sp-3); margin: 0; } .piz__copas-dice { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.3; } .piz__copas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .piz__copa { padding: 5px var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .piz__copas-cab .piz__copa { flex: none; } .piz__copa--mayor { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } /* La barra continua —una sola pieza que se llena— crece de ancho en vez de escalonarse: no tiene marcas que puedan entrar de a una. `both` deja el 0 % puesto ANTES del primer cuadro, o el navegador dibuja la barra entera y recién después la achica, que es un parpadeo. */ /* CON `--ease` Y NO CON `--ease-entrada`. Aquélla es una salida fuerte — `cubic-bezier(0.16, 1, 0.3, 1)`— pensada para que un panel APAREZCA: medido sobre esta barra, ponía el 81 % del ancho en los primeros 150 ms de 620, o sea que se leía como un salto y después una espera. Una barra que se carga tiene que repartir el recorrido en el tiempo. */ @keyframes barra-crece { from { transform: scaleX(0); } to { transform: none; } } /* `flex: none` SOBRE LA CIFRA, y no es precaución: sin él, en una columna angosta el nombre se lleva todo el ancho y el «19 años» se dibuja ENCIMA. Se vio con cuatro columnas, que es cuando la columna baja de doscientos píxeles; con dos no pasaba y por eso sobrevivió. */ /* -------------------------------------------------------------------------- POR DÓNDE ES FUERTE -------------------------------------------------------------------------- Las cuatro líneas con su nivel. Mismo molde que la lista de los mejores —una regla, dos selectores— porque son la misma pieza: un nombre a la izquierda y una cifra a la derecha. SIN BARRA, y es una decisión. Una barra pide una escala, y la única honesta iría de 1 a 99: entre un arco de 80 y un medio de 93 dibujaría dos barras casi llenas y diría menos que los dos números. Lo que sí es información es CUÁL es la más alta y cuál la más baja, y eso se dice con color y sin inventar ninguna escala. */ /* CON QUIÉN PELEÁS. Los cinco de alrededor —dos arriba, dos abajo— con su bandera y su fuerza. La raya del último que clasifica va DEBAJO de su renglón y no al costado: una línea que cruza la lista dice «de acá para abajo, afuera» sin escribirlo. */ /* LO QUE VIENE: los cuatro años del ciclo. El de hoy en tinta plena y los tres siguientes apagados — es un calendario, no una lista de opciones. */ /* EL REPARTO: cada región un tramo, el ancho dice cuánta gente. Es el problema táctico del modo dibujado en una barra — con un ojeador no se cubren cuatro regiones. */ .reparto { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-800); } .reparto__tramo { display: block; } /* LAS CUATRO REGIONES SE SEPARAN POR LUZ Y NO POR TONO, que es lo que una paleta de dos colores obliga. Salían de cuatro rampas distintas —acento, violeta, magenta y tinta— y con el lima puesto dos de las cuatro caían en el mismo verde: «En casa» y «Europa» eran el mismo punto. Ahora son cuatro valores que se distinguen a ocho píxeles y en escala de grises: el lima pleno, el blanco, un lima apagado y un gris medio. La casa se queda con el acento porque es la única de las cuatro que habla de vos. */ .reparto__tramo--casa { background: var(--region-casa, var(--accent)); } .reparto__tramo--europa { background: var(--region-europa, var(--vio-300)); } .reparto__tramo--conmebol { background: var(--region-conmebol, var(--mag-400)); } .reparto__tramo--mundo { background: var(--region-mundo, var(--ink-500)); } .punto { width: 8px; height: 8px; border-radius: 50%; flex: none; } .punto--casa { background: var(--region-casa, var(--accent)); } .punto--europa { background: var(--region-europa, var(--vio-300)); } .punto--conmebol { background: var(--region-conmebol, var(--mag-400)); } .punto--mundo { background: var(--region-mundo, var(--ink-500)); } /* -------------------------------------------------------------------------- VENTANA BAJA: LA PÁGINA RUEDA -------------------------------------------------------------------------- El alto es el recurso escaso de esta pantalla y hay un punto en el que simplemente no alcanza. Medido: la cabecera, la ficha y el pie se llevan unos 455 px, así que a 813 de ventana al mapa le quedan 358 —bien— pero a 633 le quedan 156, y un planisferio de 2,34:1 metido en un marco de 5,7:1 se dibuja como una tira de 365 px con 265 de negro a cada lado. Es exactamente el defecto que este rediseño vino a sacar, del otro eje. Así que abajo de 740 px la pantalla deja de pelear por entrar: el mapa toma un alto propio y cómodo, y quien rueda es la PÁGINA. Es la misma decisión que toma `nueva.css` en su corte de 1360, y por la misma razón. -------------------------------------------------------------------------- */ @media (min-width: 981px) and (max-height: 740px) { .puerta { height: auto; min-height: var(--alto-ventana); } /* Sin alto que repartir, la fila de dos filas no tiene nada que hacer: el mapa pide lo suyo y el expediente va abajo. */ /* Y LA COLUMNA SE TOPA, o vuelve a mandar ella: con la página suelta su contenido intrínseco —1.879 px— es lo más alto de la fila y estiraría todo otra vez. El tope se mide contra la ventana, que es lo que hay. */ } @media (max-width: 980px) { .puerta { padding: var(--sp-5) var(--sp-4); } /* En angosto los dos costados se apilan y el alto deja de ser escaso: la página scrollea entera y cada pieza pide lo que mide. Y ahí el mapa necesita alto PROPIO. Apilado no queda nada que repartir, así que el `flex: 1` que le da su alto en ancho normal recibía cero y el planisferio se aplastaba a 27 px. */ .puerta { height: auto; min-height: 0; } .atlas { flex-direction: column; } /* El `aspect-ratio: auto` que había acá se fue con la proporción que lo obligaba: mientras el marco la tenía, en este corte el ancho salía de ella —2,34 × 187 = 437 px en una pantalla de 390— y la página se corría 47 px de costado. Sin proporción arriba, no hay nada que desactivar. */ .banderas { max-height: 22rem; } } /* -------------------------------------------------------------------------- EL TELÉFONO: EL DEDO NECESITA 44 px -------------------------------------------------------------------------- Medido en WebKit con un iPhone de 390 px: las filas de bandera salían de 33 px en dos columnas de 183, y los chips de confederación de 25. Los 44 son el piso del dedo y el número con el que ya mide `movil-toque.html`. NO ES UNA OPINIÓN SOBRE SI 33 ALCANZA: es que la MISMA pieza en el selector de clubes —la fila de país de `nueva.html`— mide 73 a 89 px en ese mismo teléfono. O sea que mi pantalla no estaba siguiendo el estilo de la casa, la estaba contradiciendo, y con el dedo se nota antes que con el ojo. Y una columna en vez de dos: a 390 px dos columnas dejan 183 para bandera más nombre, que es donde «Bosnia y Herzegovina» y «Emiratos Árabes Unidos» se parten en dos renglones. El corte va en 560 y no en 980 porque en una tablet las dos columnas entran bien. -------------------------------------------------------------------------- */ @media (max-width: 560px) { .banderas { grid-template-columns: minmax(0, 1fr); } .nacion { min-height: 44px; } .conf { height: auto; min-height: 44px; padding: var(--sp-3) var(--sp-4); align-items: center; } /* La lista sola en una columna se hace larga: se le da más ventana, que es alto que en el teléfono sobra —la página rueda— y en el escritorio no. */ .banderas { max-height: 26rem; } /* LA CABECERA DE LA FICHA SE APILA. Es un `flex` de dos piezas —el título con su premisa, y la invitación— y a 390 px se repartían 170 y 170: el título se partía en «El año son 4 / fechas» y la invitación quedaba alineada a la derecha contra una columna de tres palabras. */ /* El buscador ocupa el ancho: es el atajo a noventa y cinco países y estaba midiendo 15rem contra un renglón vacío. */ } /* ========================================================================== SCOUTING Y OJEADORES — `scouting-seleccion.html` -------------------------------------------------------------------------- El prefijo es `ojeo2` y no `ojeo`, y no es pereza de nombrar: `.ojeo` es de `scouting.css`, que en la pila de todas las páginas carga DESPUÉS de esta hoja. Reusar esos nombres haría que sus reglas ganaran siempre, que es un defecto que este proyecto ya pagó con tres rondas peleando contra una regla que no se aplicaba. DOS COLUMNAS: la gente a la izquierda y lo que produce a la derecha. Se parten a una sola abajo de 62rem, que es donde la tabla de destinos deja de entrar sin que el desplegable se coma el nombre. ========================================================================== */ /* LA CAJA QUE RUEDA, y el presupuesto NO entra en ella: es la restricción de la pantalla y perderlo al bajar obliga a subir para saber si te alcanza. El `min-height: 0` es lo que hace que ruede: sin él un hijo de flex se niega a achicarse por debajo de su contenido y el desplazamiento no aparece nunca. Medido antes: la tarjeta medía 753 con 1.064 de contenido adentro, y los 414 que sobraban se los comía la página. */ /* CENTRADA, como la tira de la convocatoria. Eran tres cifras pegadas al borde izquierdo de una pantalla de mil quinientos, con la última a mitad de camino: la restricción que manda toda la pantalla leída en diagonal. Centradas y con cada columna centrada sobre sí misma, se leen como el tablero que son. */ /* EL RÓTULO RESERVA DOS RENGLONES AUNQUE USE UNO. «Presupuesto de la federación» se parte en dos y los otros tres no, así que su cifra caía diecisiete píxeles más abajo que las demás: cuatro números grandes que deberían leerse de una pasada, en dos alturas. Reservado, las cuatro cifras arrancan en la misma línea. */ /* El denominador no compite con la cifra: «10» es el dato y «/46» es la escala en la que se lee. */ /* La barra dice lo mismo que las tres cifras y por eso es fina: es el vistazo, no el dato. */ .ojeo2__aviso { margin: var(--sp-3) 0 0; color: var(--warn); font-size: var(--fs-xs); } /* TRES COLUMNAS Y NO DOS, y la tercera no es relleno: con dos, la pantalla terminaba a media altura y sobraba un tercio de ancho vacío. Las tres son causa, oferta y efecto — a quién tenés, a quién podés sumar, y qué produce eso—. `auto-fit` las junta solo cuando no entran. */ /* `min-height: 0` en la columna y `overflow` acá: una caja que no tiene alto definido no tiene nada que recortar, que es la trampa que esta hoja ya tiene anotada dos veces más arriba. */ /* `overflow-y` Y NO `overflow`, y el eje importa: con los dos ejes en `auto` la columna se ofrecía a rodar de costado, y como la barra vertical le come ancho al contenido, la tabla no entraba por esos mismos píxeles y aparecía TAMBIÉN la barra horizontal — una pidiendo la otra. De costado no hay nada que mostrar: las celdas ya parten el texto. `scrollbar-gutter: stable` reserva el ancho de la barra desde el principio, así que la tabla se calcula contra el ancho que va a tener y no contra el que tenía antes de que la barra apareciera. */ .ojeo2__vacio { margin: 0; padding: var(--sp-5); background: var(--bg-raised); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-body); } /* LA CELDA DE DOS LÍNEAS NECESITA ALTO PROPIO. `.data-table td` mide `--fila-tabla` —32 px— con `padding: 0`, que es exacto para una línea de texto y por eso está bien en las quince tablas del juego. Acá adentro hay un nombre y su rótulo, y en 32 px sin aire el rótulo de una fila quedaba pegado al nombre de la siguiente: se leían como un solo bloque de texto. El alto pasa a ser el del contenido y el aire lo pone el padding. */ .ojeo2__tabla { width: 100%; font-size: var(--fs-sm); } .ojeo2__tabla th { white-space: nowrap; } .ojeo2__tabla td { height: auto; padding: var(--sp-3) var(--sp-2); vertical-align: top; /* `.data-table td` es `nowrap`, que es lo correcto para una tabla de números y por eso está ahí. Acá hay nombres de persona y de país en una columna de un tercio de pantalla: con `nowrap` la tabla pedía 574 px sobre los 463 que tenía y salía con barra horizontal en un monitor de 1512. Los números siguen enteros abajo. */ white-space: normal; } .ojeo2__tabla .u-num, .ojeo2__tabla .u-cen { white-space: nowrap; } .ojeo2__tabla td:first-child { padding-left: var(--sp-3); } /* La última columna pega contra el borde: son los botones de la fila y los diez píxeles del padding eran justo los que dejaban al «+» y a la «✕» cortados contra el filo de la columna. Medido: `+` terminaba en 463 sobre un ancho útil de 453. */ .ojeo2__tabla td:last-child, .ojeo2__tabla th:last-child { padding-right: 0; } /* LA TABLA DEL CUERPO TÉCNICO LLEVA LAS COLUMNAS FIJADAS, y es la única que lo necesita: sus tres celdas pedían 301 + 76 + 104 = 481 px de mínimo sobre una columna de 453, así que el «+» de la última quedaba cortado contra el filo. Con el ancho repartido a mano, el nombre y su explicación se parten en más renglones —que es lo que tiene que ceder— y los botones entran siempre. */ /* Sin `table-layout: fixed`: se probó y con dos columnas dejaba la del mando en 7 rem, que no le alcanzan al «− 1/5 +», así que los botones se caían a un renglón propio y la fila crecía al doble. Con el reparto automático y sin la columna de sueldo, el mínimo de la tabla ya entra en la columna. */ /* EL SUELDO DEJÓ DE SER COLUMNA. Con una columna propia, las dos tablas de esta pantalla pedían 481 px de mínimo sobre los 453 que tiene un tercio de un monitor de 1512, y lo que quedaba cortado contra el filo era la última celda — o sea los botones—. Plegado bajo el nombre no cuesta ancho, y de paso queda pegado a la persona que lo cobra en vez de a un rótulo genérico. El total ya está arriba, que es donde se mira la plata. */ .ojeo2__plata-fila { color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; } /* UN `` CON `display: flex` DEJA DE SER CELDA, y eso costó cuatro intentos de maqueta. El navegador lo saca del algoritmo de la tabla y lo envuelve en una celda anónima, así que su ancho ya no entra en el reparto de columnas: la última celda —la de los botones— quedaba 15 px afuera del filo por más ancho que se le diera a la columna, y agrandarla no arreglaba nada porque la tabla crecía con ella. La celda se queda celda y el `flex` va adentro. */ /* EL REPARTO DE ANCHO, CON EL TRUCO DE TABLA DE SIEMPRE: la celda que tiene que ABSORBER lleva `width: 100%` y las que no, `width: 1%`. Sin esto el navegador repartía por mínimo de contenido y la celda del nombre se quedaba con 443 px de los 537, dejando a los botones 22 px afuera. Y `overflow-wrap: anywhere` para que ese mínimo pueda ceder de verdad: un renglón que no puede partirse es un mínimo que no baja. */ .ojeo2__quien { width: 100%; line-height: var(--lh-tight); white-space: normal; overflow-wrap: anywhere; } .ojeo2__tabla .u-cen, .ojeo2__tabla .u-num { width: 1%; } .ojeo2__quien > span { display: block; } .ojeo2__quien > span + span { margin-top: 2px; } .ojeo2__nombre { color: var(--text-primary); font-weight: 600; } /* Lo que el puesto hace, en una línea. Va en la celda y no en un globo: es la razón por la que se paga y tiene que estar cuando se decide. */ .ojeo2__extra { color: var(--text-muted); font-size: var(--fs-2xs); } .ojeo2__mando { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); } /* EL ESCALÓN EN CIFRA Y NO EN BOLITAS. Las bolitas son el idioma del OJO de un ojeador, donde son el único dato; acá al lado ya está el escalón dicho en palabras —«Interino», «De Primera»— así que repetirlo en cinco puntos era decir dos veces lo mismo y costaba 75 px de ancho en una columna que no los tenía: la tabla pedía 538 sobre 463 y salía con barra horizontal. */ .ojeo2__paso { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-texto); white-space: nowrap; } .ojeo2__paso--de { color: var(--text-muted); font-weight: 400; } .ojeo2__fila--cara { opacity: 0.55; } .ojeo2__nope { color: var(--text-muted); white-space: nowrap; } /* El ojo, en bolitas. Cinco siempre: lo que NO tiene se ve, o «tres» no se distingue de «tres sobre cinco». */ .ojeo2__ojos { letter-spacing: 1px; color: var(--accent-texto); white-space: nowrap; } .ojeo2__ojos--off { color: var(--line-strong); } /* El desplegable de destino, más angosto de lo que pide su texto más largo: con 15 rem la columna necesitaba 541 px y tenía 463, así que la tabla salía con barra horizontal en una pantalla de escritorio. El nombre largo se lee igual al abrirlo, que es cuando importa. */ /* El margen es la consecuencia y por eso es lo único con color propio de la tabla de plazas: exacto en el verde del juego, y con niebla en la cursiva gris que ya significa «estimado» en las otras quince pantallas. */ /* EN UN TELÉFONO LA COLUMNA DEJA DE RODAR Y RUEDAN LAS TABLAS. Con la columna suelta —`overflow: visible`— las tres tablas empujaban la página entera: medido con `vara-el-modo-en-el-telefono.mjs` a 390 px, la pantalla se corría 181 px de costado y dejaba 65 elementos afuera. Es la misma decisión que ya tomó la plantilla en `.pla__marco`: una tabla se lee comparando filas, así que rueda de costado DENTRO de su marco en vez de partirse en tarjetas. */ @media (max-width: 900px) { .ojeo2__mando { justify-content: flex-start; } /* `position: relative` NO ES DECORACIÓN: `.u-visually-hidden` es `position: absolute`, y en un `` sin ancestro posicionado su bloque contenedor es la página. Ahí el rótulo invisible de la última columna —«Contratar», «Cambiar»— quedaba fuera del marco que rueda y estiraba el documento hasta 563 px sobre un teléfono de 390. Con la caja posicionada, el rótulo cuenta para el ancho de la CAJA y no para el de la pantalla. */ } /* ========================================================================== PARTIDOS — `partidos-seleccion.html` -------------------------------------------------------------------------- El prefijo es `parts` por lo mismo que `ojeo2`: hay clases `.fecha__*` en otras hojas del juego y la que carga después gana. DOS COLUMNAS Y NO TRES. Scouting tiene tres porque son tres materias distintas —gente, oferta, efecto—; acá son dos: el CALENDARIO a la izquierda, con el año, la ventana en curso y sus botones, y lo que DECIDÍS a la derecha, con la campaña abajo como consecuencia. ========================================================================== */ /* LA CABECERA CEDE LOS ONCE PÍXELES QUE SOBRABAN. Medido a 1440×900: el `main` arranca a 147 del borde, la ventana deja 753 y esta pantalla medía 765. Once píxeles de rueda no son un scroll: son la peor versión de uno —la barra aparece, la página se puede mover y no hay NADA abajo que ver—. Es el único de los cuatro que rodaban donde el contenido sí entraba. */ /* EL ALTO SE CAPA CON LA MEDIDA Y NO CON UN NÚMERO, y capar el `main` NO alcanza: medido a 1.280, el `main` obedecía —669 px contra un tope de 643— pero `.parts__seccion` se desbordaba hasta 921 y el documento crecía con ella. Un tope que nadie recorta ni desplaza no contiene nada: mueve el problema una caja para adentro. Por eso la tarjeta también rueda. */ /* Y LA TARJETA CIERRA MÁS CORTA. Los últimos píxeles estaban en su `padding-bottom` de 16: la tarjeta terminaba en 905 con la ventana en 900. Se le baja un escalón y cierra en 897. */ /* CENTRADA Y EN TRES RENGLONES, como la convocatoria y Scouting. Era una fila: el nombre de la competencia pegado al borde izquierdo y el ciclo de cuatro años empujado al derecho con `margin-left: auto`, y en el medio mil píxeles de nada. Apilado y centrado es la CABECERA del año —qué se juega, de qué forma, y qué viene después— y se lee de arriba abajo en una pasada. */ /* El ciclo de cuatro años. Va a la derecha del todo y en cifras chicas: es contexto, no el dato. Y ENVUELVE EN VEZ DE EMPUJAR: los cuatro años en una fila piden 434 px y en un teléfono de 390 corrían la pantalla 44 px de costado —lo cazó `vara-el-modo-en-el-telefono.mjs`—. Con `flex-wrap` los dos últimos bajan a un renglón y no se sale nada. */ /* Las cifras y el ciclo, en la misma línea y separados por un canalón ancho: dos grupos, no ocho cosas sueltas. Envuelven cuando no entran. */ /* -------------------------------------------------------------------------- EL RITMO DE LA PANTALLA -------------------------------------------------------------------------- Cuatro piezas y ninguna es una tarjeta: la vía, la barra de lo que sigue, el pie de dos datos y la tabla de lo que está en juego. La tarjeta de la pantalla ya es el marco de todo esto, y meter marcos adentro de un marco es lo que hacía que se leyera como una grilla de fichas sueltas. Lo único que separa una pieza de otra es AIRE, y sale de una sola variable. -------------------------------------------------------------------------- */ /* SP-6 Y NO SP-7 ENTRE SECCIONES. La pantalla tiene cuatro y a treinta y dos píxeles cada corte se llevaba ciento veintiocho: más que la cabecera entera. A veinticuatro siguen separando y la pantalla entra sin rueda, que es la condición que Alberto le puso al modo. */ /* -------------------------------------------------------------------------- LA BARRA DE LO QUE SIGUE -------------------------------------------------------------------------- Es la continuación de la vía —«el año va por acá, y ahora te toca esto»— así que va pegada a ella y a todo el ancho. Se apoya en el color de la selección por el borde de arriba: es lo único de la pantalla que pide una acción, y la identidad marca dónde. -------------------------------------------------------------------------- */ .ahora { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-6); /* CON `--nacion-tinta` Y NO CON `--nacion-fondo`. El fondo de una selección es su color más OSCURO —para Alemania, casi negro— así que un borde de 2 px pintado con él desaparece contra el panel y la identidad se pierde justo en las selecciones de bandera oscura. La tinta es el otro color, y ya viene garantizada legible sobre fondo oscuro por el cálculo del chrome. */ background: linear-gradient(to right, color-mix(in srgb, var(--nacion-tinta, var(--accent)) 9%, var(--bg-raised)), var(--bg-raised) 60%); border-top: 2px solid var(--nacion-tinta, var(--accent)); border-radius: var(--r-md); } /* -------------------------------------------------------------------------- EL PIE -------------------------------------------------------------------------- */ .pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-4) var(--sp-7); margin-bottom: var(--sp-6); } .pie__dato { min-width: 0; } .parts__sub { margin: 0 0 var(--sp-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .parts__pie { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); } .parts__vacio, .parts__caja { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--text-muted); } /* ========================================================================== LA VÍA DEL AÑO -------------------------------------------------------------------------- Un año de selección son treinta y dos semanas de silencio y cuatro momentos que lo interrumpen, así que la estructura de la pantalla es UNA LÍNEA y los compromisos cuelgan de ella. No hay tarjetas: el piso de diseño de esta casa dice que las tarjetas del mismo tamaño son el contenedor perezoso, y cuatro fichas iguales adentro de la tarjeta de la pantalla eran exactamente eso. LA IDENTIDAD ES DE LA SELECCIÓN. El tramo ya recorrido de la vía y la marca de hoy van en el color de la nación —`--nacion-fondo`, el mismo que tiñe la barra de arriba— así que la Argentina lo ve celeste y Alemania dorado. Los cuatro compromisos, en cambio, van en el color de LO QUE SON: la eliminatoria en el violeta del juego y un torneo en verde. Identidad y estado no comparten canal. ========================================================================== */ /* EL AIRE DE LOS COSTADOS ES PARA LOS RÓTULOS. Los meses se centran sobre su semana, así que el primero y el último sobresalen media palabra de la vía: sin este margen, «NOVIEMBRE» salía cortado contra el borde de la tarjeta. */ .via { position: relative; padding: var(--sp-6) var(--sp-7) 0; } /* -------------------------------------------------------------------------- EL RIEL -------------------------------------------------------------------------- */ .via__riel { position: relative; height: 34px; } .via__linea { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--line-strong); /* Se dibuja de izquierda a derecha, que es como pasa un año. Es EL momento de movimiento de la pantalla: lo demás entra detrás de él y en su misma dirección. */ transform-origin: left center; animation: via-traza 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes via-traza { from { transform: scaleX(0); } to { transform: none; } } /* El tramo recorrido, en el color de la selección: lo que ya pasó del año. */ .via__hoy { position: absolute; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--nacion-tinta, var(--text-primary)); box-shadow: 0 0 0 3px var(--bg-panel), 0 2px 10px -2px var(--nacion-tinta, transparent); animation: via-pone 230ms 320ms cubic-bezier(0.16, 1, 0.3, 1) both; } .via__riel::before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 1px; width: var(--recorrido, 0%); background: var(--nacion-tinta, var(--accent)); } /* -------------------------------------------------------------------------- EL AÑO AVANZANDO -------------------------------------------------------------------------- Cuando el DT adelanta la jornada, el marcador de HOY y la barra de recorrido VIAJAN desde donde estaban hasta donde van, en vez de aparecer ya puestos. `--desde` y `--hasta` los escribe la pantalla; la hoja sólo los recorre. Y SE APAGA LA ENTRADA de las dos piezas mientras viajan: una animación que empieza en `opacity: 0` sobre otra que se desplaza da un marcador que aparece a mitad de camino. Un elemento, un gesto. */ .via--avanza .via__hoy { animation: via-avanza 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes via-avanza { from { left: var(--desde); } to { left: var(--hasta); } } .via--avanza .via__riel::before { animation: recorrido-avanza 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes recorrido-avanza { from { width: var(--desde); } to { width: var(--hasta); } } .via__mes { position: absolute; bottom: 10px; transform: translateX(-50%); font-size: var(--fs-2xs); font-weight: 600; font-style: normal; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; animation: via-pone 230ms 160ms var(--ease-entrada) both; } /* EL NODO ES EL COMPROMISO SOBRE LA VÍA. Sobresale hacia abajo porque de ahí sale su hilo: un nodo que apunta hacia arriba obligaría a cruzar la línea con la vista para encontrar sus partidos. */ .via__nodo { position: absolute; bottom: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 4px; background: var(--vio-400); box-shadow: 0 0 0 3px var(--bg-panel); animation: via-pone 230ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(200ms + var(--i, 0) * 30ms); } .via__nodo--eliminatorias { background: var(--vio-400); } .via__nodo--libre { background: var(--vio-600); } .via__nodo--mundial, .via__nodo--continental { background: var(--verde-400); } .via__nodo--pasada { opacity: 0.5; } /* -------------------------------------------------------------------------- LOS HILOS -------------------------------------------------------------------------- Van en un SVG de coordenadas porcentuales para que la geometría no dependa del ancho de la ventana: la semana cae donde cae y el trazo la sigue. Se dibujan con `stroke-dasharray`, después de la vía y antes de los bloques, que es el orden en que se lee: el año, de dónde sale esto, y qué es. -------------------------------------------------------------------------- */ .via__hilos { display: block; width: 100%; height: 26px; overflow: visible; } .via__hilos path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: via-hilo 290ms 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes via-hilo { to { stroke-dashoffset: 0; } } @keyframes via-pone { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- LOS BLOQUES -------------------------------------------------------------------------- SIN CAJA, SIN BORDE Y SIN FONDO. Lo que los agrupa es el hilo que los ata a su semana; encerrarlos además en un marco sería decir dos veces lo mismo y volvería a caer en la grilla de tarjetas que esto vino a reemplazar. Lo único que los separa entre sí es el aire. -------------------------------------------------------------------------- */ /* CUATRO BLOQUES ENTRAN EN FILA; NUEVE NO. En un año de Mundial el año tiene nueve compromisos —tres ventanas libres y las seis jornadas del torneo— y con nueve columnas cada una queda en 150 px: los nombres se cortan y el cruce deja de leerse. Ahí los bloques ENVUELVEN y los hilos se esconden, porque un hilo que cruza dos renglones no ata nada. La correspondencia la lleva entonces el mes y la jornada que cada bloque escribe arriba. */ .via__bloques { display: grid; grid-template-columns: repeat(var(--cuantas, 4), minmax(0, 1fr)); gap: var(--sp-5); margin: 0; padding: 0; list-style: none; } .via--muchos .via__bloques { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-5) var(--sp-6); } .via--muchos .via__hilos { display: none; } .via--muchos .via__bloques { margin-top: var(--sp-5); } .via__bloque { min-width: 0; animation: via-sube 230ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(380ms + var(--i, 0) * 40ms); } @keyframes via-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .via__cuando { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 2px; } .via__cuando b { font-size: var(--fs-md); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-tight); color: var(--text-primary); text-transform: uppercase; } .via__cuando span { font-size: var(--fs-2xs); color: var(--text-muted); } .via__que { margin: 0 0 var(--sp-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--vio-300); } .via__que--mundial, .via__que--continental { color: var(--verde-300); } .via__que--libre { color: var(--text-muted); } .via__bloque--hoy .via__cuando b { color: var(--nacion-tinta, var(--accent-texto)); } .via__bloque--jugada { opacity: 0.68; } .via__cruces { margin: 0; padding: 0; list-style: none; } /* El cruce es un marcador: el que recibe arriba, el que viaja abajo, el nivel en su carril y el día en el suyo. Tres carriles y no dos, porque con dos el nivel terminaba tocando la palabra del día. */ .via__cruce { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line-hairline); } .parts__eq--l { grid-column: 1; grid-row: 1; } .parts__eq--v { grid-column: 1; grid-row: 2; } .parts__eq-niv--l { grid-row: 1; } .parts__eq-niv--v { grid-row: 2; } .parts__eq { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .parts__eq-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .parts__eq--mia .parts__eq-n { color: var(--text-primary); font-weight: 600; } .parts__eq-niv { grid-column: 2; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); font-size: var(--fs-xs); text-align: right; min-width: 1.8rem; } .parts__pano { width: 28px; height: 19px; flex: none; object-fit: contain; border: 1px solid var(--line); border-radius: 2px; background: var(--ink-800); } /* EN UN TELÉFONO LA VÍA SE PONE DE PIE. Cuatro bloques en fila piden cuatro columnas y a 390 px cada una queda en 82: el día —«VIERNES»— se salía 37 px de la pantalla, que es lo que cazó `vara-el-modo-en-el-telefono.mjs`. Apilados, cada compromiso tiene el ancho entero y la vía de arriba sigue contando el año igual; lo que se pierde es la correspondencia visual entre el nodo y su bloque, y por eso ahí cada bloque repite su mes en grande. */ @media (max-width: 700px) { .via__bloques { grid-template-columns: 1fr; gap: var(--sp-6); } .via__hilos { display: none; } .via__bloque { border-top: 1px solid var(--line); padding-top: var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .via__linea, .via__hoy, .via__mes, .via__nodo, .via__bloque { animation: none; } .via--avanza .via__hoy, .via--avanza .via__riel::before { animation: none; } .via__hilos path { animation: none; stroke-dashoffset: 0; } } /* -------------------------------------------------------------------------- AMISTOSOS Y GIRAS -------------------------------------------------------------------------- Dos botones grandes por ventana y no un desplegable: son dos opciones, se comparan de un vistazo y cada una tiene que poder decir su consecuencia en una línea. Un desplegable esconde la mitad de la decisión. -------------------------------------------------------------------------- */ .parts__planes { margin: 0; padding: 0; list-style: none; } .parts__plan { padding: var(--sp-4) 0; border-top: 1px solid var(--line-hairline); } .parts__plan-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .parts__plan--jugada { opacity: 0.6; } .parts__ops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .parts__op { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-secondary); text-align: left; cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .parts__op strong { color: var(--text-primary); font-size: var(--fs-sm); } .parts__op--puesta { background: var(--accent-wash); border-color: var(--accent); } .parts__op--puesta strong { color: var(--accent-texto); } .parts__op[disabled] { cursor: default; } @media (hover: hover) { .parts__op:not([disabled]):hover { background: var(--bg-hover); border-color: var(--line-strong); } } /* Los rivales de una ventana, con su bandera. La bandera va ANTES del nombre —al revés que en el chrome— porque acá son varios y lo que se hace es escanear una lista: el color es lo que distingue de un vistazo, y el nombre confirma. */ /* 34 px y no 21. A veintiuno la bandera era una marca de color y no se reconocía: los tres tricolores verticales de la CONMEBOL —Colombia, Ecuador, Bolivia— se distinguen por el orden de las franjas, y ese orden no se ve en catorce píxeles de alto. Acá la bandera es el dato con el que se escanea la lista, así que tiene que poder leerse. */ .parts__pano { width: 34px; height: 23px; flex: none; object-fit: contain; border: 1px solid var(--line); border-radius: 2px; background: var(--ink-800); } /* -------------------------------------------------------------------------- CONTRA QUIÉNES PELEÁS TU PLAZA -------------------------------------------------------------------------- La pieza que CRECE de la banda: veintinueve naciones en UEFA contra tres en Oceanía. Por eso se le da el alto que a las otras tres les sobra y rueda por dentro en vez de estirar la página. -------------------------------------------------------------------------- */ /* El encabezado de la confederación va como el de las otras cajas —rótulo arriba— y las dos cifras al lado, no todo en una línea corrida. */ /* COLUMNAS ANGOSTAS Y CON POCO AIRE ENTRE ELLAS. Con 15 rem y `--sp-6` de separación, el nivel quedaba a media pantalla del nombre —«Chile ......... 86»— y la fila dejaba de leerse como una fila. A 13 rem entran los mismos seis renglones y el número queda pegado al país. */ .parts__conf { margin: 0 0 var(--sp-4); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 var(--sp-5); } .parts__conf-f { display: flex; align-items: center; gap: var(--sp-3); height: var(--fila-tabla); border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); transition: background-color var(--dur-fast) var(--ease); } @media (hover: hover) { .parts__conf-f:hover { background: var(--bg-hover); } } .parts__conf-p { flex: none; width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); } .parts__conf-n { margin-left: auto; font-variant-numeric: tabular-nums; } .parts__conf-f--mia { color: var(--text-primary); font-weight: 600; } .parts__conf-f--mia .parts__conf-p { color: var(--accent-texto); } /* EL CORTE SE MARCA POR PERTENENCIA Y NO CON UNA RAYA. Se probó con la raya —un borde grueso bajo el puesto trece— y en una grilla de cinco columnas ese trece cae en mitad de un renglón: la línea se leía como si fuera de Serbia y no como el límite de la clasificación. Pintando a los que ENTRAN, el corte se ve sin contar filas y sin depender de cuántas columnas entren en la pantalla, que es lo único que un gráfico de corte tiene que garantizar. */ .parts__conf-f--entra { border-left: 2px solid var(--accent); padding-left: var(--sp-3); } .parts__conf-f--entra .parts__conf-p { color: var(--accent-texto); } /* ========================================================================== SCOUTING — LA PLAZA ES LA UNIDAD -------------------------------------------------------------------------- Un país, la gente que tenés puesta ahí y lo que se ve como consecuencia, todo en la misma fila. Antes eran dos tablas contando el mismo hecho desde dos lados —«Arcia está en España» y «España tiene 5 ojos»— y había que saltar de una a la otra para entender por qué España se lee exacta. SIN MARCO Y SIN FONDO, como la vía de Partidos: lo que agrupa una plaza es su propia fila, y la tarjeta de la pantalla ya es el marco de todo. ========================================================================== */ .plazas { margin: 0; padding: 0; list-style: none; } /* EL MARGEN VA AL LADO DEL PAÍS Y NO AL FINAL DE LA FILA. Es la CONSECUENCIA de lo que pasa en ese renglón —cuántos ojos hay puestos ahí— y estaba a mil píxeles de la bandera, con «Sin nadie mirando» repetido trece veces en el medio. Al lado, «Argentina · 22 candidatos · ±11» se lee como una sola frase y lo que sigue es quién lo está mirando. */ .plaza { display: grid; grid-template-columns: minmax(11rem, 15rem) 4.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line-hairline); } .plaza__nadie { font-size: var(--fs-xs); color: var(--text-disabled); } /* LOS QUE COBRAN Y NO MIRAN NADA, ARRIBA Y CON EL COLOR DE UN AVISO. Es el error más caro de esta pantalla y tiene que verse antes que nada. */ /* -------------------------------------------------------------------------- EL OJEADOR QUE ACABA DE MOVERSE -------------------------------------------------------------------------- Contratar a uno mueve tres cosas a la vez y en tres sitios distintos de la pantalla: baja el presupuesto libre arriba, saca una fila del mercado abajo a la izquierda y agrega una ficha en el medio. Sin un gesto, apretar «Contratar» se ve como una recarga. DOS GESTOS Y NO UNO: el contratado ATERRIZA —cae y se asienta— y el que cambia de destino VIAJA, se desliza desde el borde hacia su plaza nueva. Son las dos cosas que se le pueden hacer a un ojeador y no se parecen. */ .oje--entra { animation: oje-aterriza 260ms var(--ease-entrada) both; } @keyframes oje-aterriza { 0% { opacity: 0; transform: translateY(-12px) scale(0.94); } 60% { opacity: 1; transform: translateY(2px) scale(1.02); } 100% { transform: none; } } .oje--viaja { animation: oje-viaja 260ms var(--ease-entrada) both; } @keyframes oje-viaja { 0% { opacity: 0; transform: translateX(-22px); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .oje--entra, .oje--viaja { animation: none; } } /* La ficha de un ojeador, adentro de su plaza. */ .oje { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-pill); } .oje__quien { display: flex; flex-direction: column; gap: 0; min-width: 0; } .oje__quien b { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); white-space: nowrap; } .oje__quien small { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; } .oje__destino { max-width: 8rem; } .oje__x { flex: none; } @media (max-width: 900px) { .plaza { grid-template-columns: 1fr auto; } } /* ========================================================================== LA LISTA DE VEINTITRÉS, DIBUJADA -------------------------------------------------------------------------- El objeto de la convocatoria. Veintitrés casilleros por línea, llenos o vacíos, y la cuenta grande al costado: lo que estás construyendo tiene que verse antes que el montón del que lo sacás. VA ARRIBA DE LA TABLA Y NO AL COSTADO. La tabla necesita el ancho entero para sus once columnas —eso ya está decidido y medido— así que la lista ocupa una franja fina a lo ancho, que además es su forma natural: veintitrés marcas en cuatro grupos se leen en una línea. ========================================================================== */ /* CENTRADA Y EN TRES RENGLONES. Era una fila a lo ancho con la cuenta grande pegada al borde izquierdo y los cuatro grupos corriéndose hacia la derecha: sobre una tabla de mil quinientos píxeles, el resumen de lo que estás armando quedaba en un rincón. Centrado es una CABECERA de la pantalla —cuánto llevás, de qué líneas, y qué clase de equipo es— y se lee de una sola pasada. */ .lista23 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); flex: none; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .lista23__cuenta { display: flex; align-items: baseline; gap: var(--sp-3); } .lista23__cuenta strong { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nacion-tinta, var(--accent-texto)); } .lista23__cuenta strong span { color: var(--text-muted); font-size: var(--fs-md); } .lista23__lineas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-6); } .lista23__linea { display: flex; flex-direction: column; gap: 4px; } /* La cabecera del grupo se estira a lo que miden SUS casilleros —`stretch` en una columna flex— así que el nombre queda sobre la primera marca y la cuenta sobre la última. Es lo que hace que el número se lea como de este grupo y no del de al lado. */ .lista23__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .lista23__frac { font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .lista23__linea--llena .lista23__frac { color: var(--verde-300); } .lista23__marcas { display: flex; gap: 3px; } /* LOS TRES DATOS. Rótulo chico arriba y cifra abajo no: en una tira de tres, apilar duplica el alto de la franja. En fila, con el rótulo apagado y la cifra en tinta plena, el ojo salta de número a número y lee los rótulos sólo cuando le hace falta. */ /* LOS DATOS DE UNA CABECERA. Rótulo chico arriba y cifra abajo no: en una tira de tres o cuatro, apilar duplica el alto de la franja. En fila, con el rótulo apagado y la cifra en tinta plena, el ojo salta de número a número y lee los rótulos sólo cuando le hace falta. DOS SELECTORES Y UNA REGLA. Lo usan la convocatoria —los veintitrés— y Partidos —la forma del año—, y son la misma pieza con dos nombres porque cada pantalla nombra sus clases. Copiar la regla sería garantizar que el día que alguien mueva el cuerpo de la cifra queden dos cabeceras distintas. */ .lista23__datos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-5); } .lista23__dato { display: flex; align-items: baseline; gap: var(--sp-2); } .lista23__dato b { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .lista23__limpiar { margin-left: var(--sp-3); } /* -------------------------------------------------------------------------- LOS ANCHOS DE LA TABLA DE CANDIDATOS -------------------------------------------------------------------------- Sin esto la tabla reparte los mil quinientos píxeles entre once columnas según lo que mide el rótulo de cada una, y once cifras de dos dígitos quedan con doscientos píxeles cada una. El ancho lo pide el CONTENIDO: `width` en una tabla es una sugerencia —el navegador la estira si sobra— así que estos números son un reparto, no un corte. -------------------------------------------------------------------------- */ /* LA HOLGURA VA A LAS QUE SE LEEN. Un `width` en una tabla de ancho 100 % es un REPARTO y no un corte: lo que sobra se estira entre todas en proporción, así que achicar el botón de 261 a 137 no achicó la tabla —engordó las diez restantes—. Dándole a Jugador y a Club un ancho grande de entrada, la holgura cae donde sirve para algo (un nombre que no se parte) y no en la columna de «Pie», que dice «Derecho». */ .convoc__c--mini { width: 4.5rem; } .convoc__c--corta { width: 5.5rem; } .convoc__c--valor { width: 11rem; } .convoc__c--quien { width: 20rem; } .convoc__c--club { width: 17rem; } /* La columna del botón: sin ancho propio se llevaba 261 px para un botón de noventa. Y NO es la última en achicarse por casualidad — «Convocar» es más ancho que «Sacar», así que el ancho lo pide el rótulo más largo de los dos y no el que esté puesto en ese renglón. */ .convoc__accion, .convoc__tabla thead th:last-child { width: 7.5rem; } /* EL RENGLÓN, DOS PÍXELES MÁS BAJO CON RATÓN, y el número es chico a propósito: la fila de esta tabla ya venía en 32 —el `--fila-tabla` de la casa— y no en los 44 del dedo, así que acá no había cien píxeles que ganar sino noventa en toda la tabla. Se deja porque no cuesta nada y porque en un teléfono la regla no se aplica: ahí el renglón se toca y vuelve a su alto. */ @media (hover: hover) and (pointer: fine) { .convoc__tabla tbody th, .convoc__tabla tbody td { height: 30px; padding-top: 0; padding-bottom: 0; } .convoc__accion .action { min-height: 26px; padding-top: 0; padding-bottom: 0; } } /* El casillero vacío se DIBUJA y no se esconde: un cupo sin cubrir es lo más importante de la pantalla cuando falta gente. */ /* SIN ENTRADA ESCALONADA POR DEFECTO, y esto es sacar una animación y no ponerla: los veintitrés casilleros la tenían, y como la tira se rehace entera en cada clic, convocar a UNO hacía parpadear a los veintitrés. Lo que se anima ahora es el que cambió. */ .lista23__c { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-strong); background: transparent; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } /* EL CASILLERO QUE ACABA DE OCUPARSE. Crece, se pasa de largo y vuelve: es el gesto de algo que ATERRIZA, no el de algo que aparece. El halo se apaga con él para que el ojo lo encuentre entre veintitrés iguales. */ .lista23__c--nuevo { animation: casillero-cae 250ms var(--ease-entrada) both; } @keyframes casillero-cae { 0% { transform: scale(0.2) translateY(-10px); opacity: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--nacion-tinta, var(--accent)) 45%, transparent); } 55% { transform: scale(1.45) translateY(0); opacity: 1; } 100% { transform: none; opacity: 1; box-shadow: 0 0 0 0 transparent; } } /* Y la línea a la que le acaban de dejar un hueco: el grupo entero da un tirón corto hacia abajo. Dice «acá falta uno» sin escribirlo. */ .lista23__linea--liberada .lista23__marcas { animation: marcas-ceden 230ms var(--ease) both; } @keyframes marcas-ceden { 0% { transform: translateY(-3px); } 60% { transform: translateY(2px); } 100% { transform: none; } } .lista23__c--puesto { background: var(--nacion-tinta, var(--accent)); border-color: var(--nacion-tinta, var(--accent)); } @media (prefers-reduced-motion: reduce) { .lista23__c { animation: none; } } /* La tabla del grupo es la misma pieza que la foto de la confederación —misma fila, mismo corte marcado por pertenencia— con dos diferencias: son cuatro y no treinta y nueve, así que va en una sola columna; y lo que se muestra son PUNTOS y goles, porque acá los partidos se jugaron de verdad. */ .parts__conf--grupo { grid-template-columns: 1fr; } /* El camino: las llaves que te tocaron, en orden. Cada paso dice contra quién y cómo terminó, que es lo único que se recuerda de un torneo. */ .camino { margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .camino__paso { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); height: var(--row-h); border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); } .camino__paso b { font-variant-numeric: tabular-nums; color: var(--text-primary); } .camino__paso--gane b { color: var(--verde-300); } .camino__paso--fuera { opacity: 0.7; } .camino__paso--fuera b { color: var(--clay-400); } /* El año de torneo en el que no estás. Va en el color de un aviso y pegado al nombre del torneo: es la respuesta a «¿por qué no juego nada?». */ /* ========================================================================== DÍA DE PARTIDO -------------------------------------------------------------------------- La única pantalla del modo donde el rival ocupa la mitad del ancho, y es a propósito: hoy el rival ES el asunto. Las otras cuatro son de preparar; ésta es la de jugar. ========================================================================== */ /* Igual que Partidos, y por el mismo motivo: el tope solo no contiene. */ .dia { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 11rem); } .dia__armar { min-height: 0; } .dia__armar > .col { min-height: 0; overflow-y: auto; } /* -------------------------------------------------------------------------- EL CARTEL DEL PARTIDO -------------------------------------------------------------------------- Era una fila con dos escuditos de 72 y un marcador en el medio sobre el fondo de la página: la primera cosa que se ve del día de partido y la menos diseñada de la pantalla. Un cartel de partido son DOS EQUIPOS QUE SE ENCUENTRAN, y lo que hace que se lea así es que cada mitad esté teñida de los suyos y que las dos tintas se toquen en el medio, donde está el marcador. LAS TINTAS ENTRAN AL 20 % Y NO MÁS, y el número no es de gusto: el texto de esta banda es `--text-secondary` sobre `--bg-raised`, y a partir de más o menos un cuarto de tinta la superficie se corre lo suficiente como para bajarle el contraste por debajo del listón. Al 20 % se ve de qué color es cada lado y las dos mitades siguen siendo la misma superficie oscura. -------------------------------------------------------------------------- */ .dia__cruce { position: relative; /* LAS ÁREAS SE NOMBRAN Y EL CONTEXTO TIENE RENGLÓN PROPIO. Estaba adentro del medio, y «FASE DE GRUPOS · VIERNES» en una sola línea le fijaba al medio un ancho de max-content: a 390 px se llevaba 212 de los 358 y los dos nombres se desbordaban de sus columnas hasta montársele encima. Abajo, a todo el ancho, no le quita ancho a nadie y se lee igual en las dos puntas. */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'local medio visita' 'pie pie pie'; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(100deg, color-mix(in srgb, var(--cruce-local, transparent) 20%, transparent) 0%, transparent 40%, transparent 60%, color-mix(in srgb, var(--cruce-visita, transparent) 20%, transparent) 100%), var(--bg-raised); overflow: hidden; } /* La costura del medio: una raya de luz de arriba abajo, donde se tocan las dos mitades. Es lo que convierte dos fondos en UN cruce. */ .dia__cruce::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent); } /* CADA LADO EN FILA Y NO EN COLUMNA. Apilado —escudo, nombre, chapa— el cartel pedía 200 px de alto para decir tres cosas, y el alto es lo único que esta pantalla no tiene de sobra: abajo van los veintitrés, la cancha y el planteo, y todo tiene que entrar sin rueda. En fila dice lo mismo en 76. El local mira hacia adentro y el visitante también —uno alineado a la derecha, el otro a la izquierda—, que es lo que hace que los dos apunten al marcador en vez de a los bordes. */ .dia__lado { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } /* CADA UNO EN SU PUNTA, que es donde los pone un cartel de partido: escudo, nombre y nivel arrancando en el borde de afuera, y el marcador solo en el medio. Apretados contra el centro —que fue el primer intento— dejaban los dos tercios de afuera vacíos, y son justo los tramos donde está la tinta de cada selección: media banda de color sin nada encima. */ .dia__lado--local { justify-content: flex-start; text-align: left; } /* `flex-start` EN LOS DOS, Y NO ES UN COPIAR-PEGAR: el visitante va en `row-reverse` —escudo a la derecha del nombre— y en un eje invertido `flex-start` es el borde DERECHO. Escrito como `flex-end`, que es lo que uno pone leyendo «alineado a la derecha», el bloque se iba contra el centro y quedaba pegado al «VS» con media banda vacía a su derecha. */ .dia__lado--visita { justify-content: flex-start; text-align: right; } .dia__lado--visita { flex-direction: row-reverse; } .dia__lado-txt { display: flex; flex-direction: column; gap: var(--sp-1, 4px); min-width: 0; } .dia__lado--local .dia__lado-txt { align-items: flex-start; } .dia__lado--visita .dia__lado-txt { align-items: flex-end; } .dia__lado--local { grid-area: local; } .dia__lado--visita { grid-area: visita; } /* EL HALO DETRÁS DEL ESCUDO. Un escudo de federación es dorado y detallado, y apoyado sobre una superficie oscura se apaga. El disco de su propio color por detrás lo levanta sin tocarlo —que es lo que hay que hacer con un escudo— y de paso repite el color de esa mitad de la banda. */ .dia__insignia { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--lado, var(--accent)) 30%, transparent), transparent 68%); } .dia__escudo { height: 50px; width: auto; object-fit: contain; } .dia__pano { width: 50px; height: 34px; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--ink-800); } /* El nombre en la condensada del sistema y con su color por debajo: la raya es lo que hace que el nombre pertenezca a un lado y no al cartel. */ .dia__nombre { position: relative; max-width: 100%; padding-bottom: 5px; overflow-wrap: anywhere; text-wrap: balance; font-size: var(--fs-xl); font-weight: 700; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-tight); color: var(--text-primary); } .dia__nombre::after { content: ''; position: absolute; bottom: 0; width: 2.25rem; height: 2px; border-radius: 1px; background: var(--lado, var(--accent)); } .dia__lado--local .dia__nombre::after { left: 0; } .dia__lado--visita .dia__nombre::after { right: 0; } /* La tuya, en su color y no en blanco: en un cruce de dos banderas hay que poder decir cuál sos sin leer los nombres. */ .dia__lado--mio .dia__nombre { color: var(--nacion-tinta, var(--text-primary)); } /* EL NIVEL, EN UNA CHAPA. Suelto era un número desnudo debajo de un nombre —87, sin decir 87 de qué— y en una chapa con el borde del país se lee como lo que es: la marca de fuerza de esa selección. */ .dia__nivel { align-self: auto; padding: 1px var(--sp-3); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lado, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--lado, var(--accent)) 12%, transparent); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .dia__marcador { grid-area: medio; padding: 0 var(--sp-5); text-align: center; font-size: 2.5rem; font-weight: 700; line-height: 0.9; font-stretch: var(--wd-condensed); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--text-primary); } /* EN `--text-secondary` Y NO EN `--text-muted`, y sale de medir el píxel pintado y no el token de fondo. Este renglón cruza las dos mitades teñidas: sobre el celeste de Argentina al 20 % —rgb(51, 62, 85)— el apagado da 3,18:1, por debajo del 4,5 que pide un texto de 13 px. El secundario da 4,93 ahí y 6,10 sobre el rojo de Marruecos. */ .dia__contexto { grid-area: pie; margin-top: 0; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); text-align: center; text-wrap: balance; } @media (max-width: 700px) { .dia__cruce { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); } .dia__insignia { width: 76px; height: 76px; } .dia__escudo { height: 64px; } .dia__pano { width: 64px; height: 43px; } .dia__nombre { font-size: var(--fs-lg); } .dia__marcador { font-size: var(--fs-3xl); padding: 0 var(--sp-2); } } .dia__quieto, .dia__cerrado { padding: var(--sp-6) 0; color: var(--text-muted); } .dia__quieto b { display: block; font-size: var(--fs-lg); color: var(--text-primary); } /* LOS DOS ONCES, ENFRENTADOS Y ALINEADOS POR LÍNEA. La pregunta del día es «¿dónde les gano y dónde me ganan?», y dos listas al lado de otra sin alinear las líneas no la contestan. */ /* El once del rival, en columnas: once renglones en una sola columna serían una tira larga al pie de una pantalla que ya es alta. En tres, se leen de un vistazo. */ .dia__rival-lista { margin: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 var(--sp-4); } .dia__jug { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); height: var(--fila-tabla); border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); } .dia__pos { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); } .dia__quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dia__niv { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); } .dia__mandos { padding-top: var(--sp-5); border-top: 1px solid var(--line); } /* El botón del día es más grande que los otros del modo: es la única acción de la pantalla y la que cierra la semana. */ .action--grande { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-7); } /* -------------------------------------------------------------------------- LA PIZARRA DEL DÍA -------------------------------------------------------------------------- LA CANCHA TENÍA 852×658 Y LA PÁGINA RODABA 854 px: el dibujo ocupaba más que la ventana y empujaba todo lo demás abajo del pliegue. Ahora está topeada por ALTO —no por ancho— porque el alto es el recurso escaso: lo que sobra de la ventana después del cruce y de los mandos es lo que puede medir, y de ahí sale su ancho por proporción. LAS FICHAS SON CHIPS Y NO PASTILLAS. Eran círculos de 51 px con el código del puesto en 13: un dibujo grande que no decía nada. Un chip con el dorsal y el apellido dice quién juega ahí, que es la única razón por la que uno mira una cancha dibujada. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- TRES COLUMNAS QUE ENTRAN EN LA VENTANA -------------------------------------------------------------------------- Los veintitrés y el rival a la izquierda, la cancha en el medio, el planteo a la derecha. Y `flex: 1` con `min-height: 0` sobre una sección que ya mide el alto de la ventana: la fila se lleva lo que sobra después del cartel, y la cancha —que es lo único elástico— sale de ahí. LA CANCHA SE MIDE POR ALTO Y NO POR ANCHO, que es al revés de como estaba: su columna es `auto`, así que el ancho lo pide ELLA a partir del alto que le tocó y de su proporción 68/88. Puesta por ancho, en una ventana baja el dibujo pedía más alto del que había y empujaba todo abajo del pliegue. -------------------------------------------------------------------------- */ .dia__armar { flex: 1; min-height: 0; display: grid; /* EL REPARTO VA CON LA ORIENTACIÓN DE LA CANCHA, y por eso se dio vuelta el 11/9/2026. Con la cancha PARADA, su alto le pedía poco ancho y la columna de la izquierda pesaba más (1,7 contra 1). ACOSTADA es al revés: el ancho es lo que le da tamaño, y con el reparto viejo el dibujo salía limitado por el ancho y le sobraban cuatrocientos píxeles de alto adentro de un marco vacío — medido a 1440×900. Lo que no cambia es la regla: la cancha se queda con el ancho que su alto pide, y el número existe para que el marco quede lleno. Si algún día vuelve a girar, este renglón gira con ella. */ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(15rem, 19rem); gap: var(--sp-3); align-items: stretch; padding-bottom: var(--sp-3); } /* EL TABLERO ES UNA PIEZA. Los mandos eran una tarjeta con borde y la cancha un rectángulo debajo con otro: dos objetos separados por un canalón para decir una sola cosa —cómo está parado el equipo—. Pegados, con los mandos de riel superior y la cancha llenando el resto, el borde exterior es uno y lo que hay adentro se lee como un tablero. */ /* `container-type: size` PARA QUE LA CANCHA SE MIDA CONTRA LOS DOS EJES. Es la única forma exacta de decir «lo más grande que entre»: sin esto hay que elegir un eje —por ancho, y en una ventana baja el dibujo empuja todo abajo del pliegue; por alto, y en una ventana angosta se sale de su columna—. Con las unidades del contenedor, el ancho es el menor de los dos: el de la caja y el que permite su alto. */ /* La columna de la izquierda: los veintitrés arriba y el once del rival abajo, que son las dos cosas que se miran MIENTRAS se arma el equipo. */ /* NINGUNO DE LOS DOS SE ENCOGE. Los dos llevan `overflow: hidden` —lo pide el radio de la esquina— y un bloque que se encoge por debajo de su contenido con el desborde oculto no aprieta nada: RECORTA, y sin barra que avise. Si el alto no alcanza, crece la página. */ /* LOS MANDOS, EN UNA BARRA Y NO EN CUATRO COLUMNAS DESPAREJAS. Los cuatro desplegables tienen textos de largos muy distintos —«4-4-2» contra «se sale jugando desde el fondo»— y alineados por arriba dejaban los rótulos bailando. En una barra con fondo propio se leen como lo que son: la configuración del equipo, no cuatro campos sueltos. */ /* -------------------------------------------------------------------------- EL PLANTEO -------------------------------------------------------------------------- */ /* LAS TRES SOLAPAS. No es `.segmented` de `app.css`: aquél es un grupo de botones dentro de un panel y éste es el riel superior de una columna —tiene que llegar a los dos bordes y llevar la línea que lo separa del cuerpo—. Reusar sus clases traería su fondo y su radio, y habría que pelearlos. */ .dia__solapas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); } .dia__solapa { min-height: 40px; padding: var(--sp-2) var(--sp-2); background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) { .dia__solapa:hover { color: var(--text-primary); background: var(--bg-hover); } } /* EL SUBRAYADO ES DEL ACENTO Y NO DE LA CAMISETA. Las otras tres tintas de `--tinta-cancha` en esta pantalla dicen QUIÉN —el disco de la cancha y el renglón encendido son el mismo jugador—; ésta dice DÓNDE ESTÁS PARADO, que es lo que el acento contesta en las veintidós pantallas del juego. Salía celeste para la Argentina y verde para Brasil, o sea que la misma señal cambiaba de color según a quién dirigís, y encima no coincidía con la solapa de arriba, que sí es el acento: dos «estás acá» de dos colores a ciento cincuenta píxeles uno del otro. */ .dia__solapa[aria-pressed='true'] { color: var(--text-primary); border-bottom-color: var(--accent); } .dia__planteo-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); } /* Las consignas son once renglones y el alto de la columna manda: si no entran, ruedan ELLAS y no la página. Es la única caja del modo que rueda por dentro, y rueda porque su contenido es una lista de largo fijo dentro de una pantalla que no puede crecer. */ .dia__consignas { min-height: 0; overflow-y: auto; display: grid; gap: 2px; } .dia__consigna { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) minmax(6.5rem, 8rem); align-items: center; gap: var(--sp-2); min-height: 36px; } .dia__consigna--vacia { opacity: 0.55; } .dia__consigna .dia__quien { font-size: var(--fs-sm); color: var(--text-secondary); } .dia__consigna select { width: 100%; min-width: 0; } /* EN LA COLUMNA DE LA CANCHA LOS CUATRO MANDOS SE APILAN, uno por renglón, con los rótulos alineados en una columna y el desplegable llenando lo que sobra. En fila no entraban: «se sale jugando desde el fondo» sola mide más que la columna, y los cuatro se repartían en tres renglones desparejos. */ /* Cada mando, rótulo arriba y desplegable abajo: en una columna de 22rem los textos —«se sale jugando desde el fondo»— no comparten renglón con su rótulo sin partirse. */ .dia__mando { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dia__mando .label { white-space: nowrap; } .dia__mando select { width: 100%; min-width: 0; } .dia__campo { position: relative; /* ACOSTADA, COMO EL PARTIDO. Estuvo parada entre el 10 y el 11/9/2026 por un motivo que era cierto entonces: `miniCampo()` era una cancha recortada y acostada se comía el ancho dejando la mitad del alto sin usar. Desde que dibuja `campo-2d.js` la decisión de Alberto es que **todas las canchas del juego se vean como la del partido**, que es acostada, y eso vale más que el reparto de píxeles de una pantalla: una cancha que gira según dónde estés parado es dos canchas. El alto manda y el ancho sale de la proporción, así que la columna del medio deja de pelear por ancho con la lista y la pizarra. */ /* EL ALTO MANDA Y SALE DE LA VENTANA, no del ancho de la columna. Acostada, una cancha que se mide por el ancho crece a lo alto sin techo: con la columna del medio en 2fr el dibujo pedía 560 px de alto, la página pasó de 900 y volvió el scroll que este modo tiene prohibido. Medido a 1440×900. `cqh` no sirve de tope acá porque el `body` del modo crece con su contenido —lo suelta `.en-modo-seleccion body`—, así que el contenedor mide lo que el dibujo pida y el tope se lo pide a sí mismo. La ventana sí es un número que no depende del dibujo. */ height: min(46vh, 26rem); max-width: 100%; aspect-ratio: 105 / 68; margin: 0 auto; background: var(--campo); /* El césped hundido bajo el riel de los mandos: sin la sombra de arriba, el tablero es un rectángulo verde pegado a una barra gris. */ box-shadow: inset 0 14px 34px -20px rgb(0 0 0 / 0.85), inset 0 0 90px -30px rgb(0 0 0 / 0.55); } .dia__campo svg { display: block; width: 100%; height: 100%; background: transparent; } /* LA CAL, PINTADA PARA ESTE TAMAÑO. `.campito__linea` es 34 % de opacidad porque a cien píxeles una línea al 60 % tapa el dibujo; a 780 esa misma cal se lee como una mancha descolorida. Sube la opacidad y BAJA el grosor —1 unidad de un lienzo de 88 son 8,9 px acá—, que es la misma corrección en los dos sentidos: la línea de una cancha es fina y blanca, no ancha y gris. */ .dia__campo .campito__linea { stroke: color-mix(in srgb, var(--campo-linea) 62%, transparent); stroke-width: 0.5; } /* -------------------------------------------------------------------------- LA FICHA: UN DISCO Y UNA CHAPA -------------------------------------------------------------------------- Fue una pastilla de color con el código del puesto, y después una cajita blanca con el dorsal y el apellido. Las dos estaban mal por lo mismo: en una pizarra el jugador es un DISCO —así se dibuja un equipo en un pizarrón desde que existen los pizarrones— y el nombre es una etiqueta debajo, no un renglón adentro del disco. Separados, el color de la selección vuelve a tener dónde vivir: en el jugador, que es lo único de este dibujo que es de ella. EL BOTÓN NO SE PINTA. Es la columna que apila las dos piezas y nada más: si llevara fondo, el disco quedaría adentro de una caja y volveríamos a la cajita blanca con un círculo dibujado encima. SE MUEVE CON `transition` SOBRE `left`/`top`, así que al cambiar de formación los once SE DESPLAZAN a sus puestos nuevos en vez de saltar: es la misma gente cambiando de dibujo, y verlo moverse lo dice mejor que cualquier rótulo. -------------------------------------------------------------------- */ .dia__ficha { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; /* 44 px de alto ADEMÁS de ancho: es el mínimo del dedo y la vara del modo lo mide. El disco solo mide 38, así que el mínimo lo sostiene el botón. */ min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; /* El botón mide 44 por el dedo, pero lo que se ve es el disco: sin esto, los 44 px invisibles de un vecino tapan la mitad del disco de al lado. */ pointer-events: auto; color: var(--text-primary); font: inherit; line-height: 1; cursor: pointer; transition: left var(--dur) var(--ease), top var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } /* EL DISCO. El número va en tabulares porque un 1 y un 23 tienen que ocupar el mismo sitio: si no, los once discos se leen como once tamaños distintos. */ .dia__ficha-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--tinta-cancha, var(--accent)) 100%, var(--ink-100) 18%), var(--tinta-cancha, var(--accent))); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.34), 0 3px 8px -2px rgb(0 0 0 / 0.7); color: var(--tinta-cancha-texto, var(--ink-1000)); font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* LA CHAPA. Fondo propio y oscuro, no traslúcido: el apellido cae sobre el césped, que tiene franjas claras y oscuras, y un texto sin chapa cambia de contraste según en qué franja haya caído el jugador. */ /* LA CHAPA, ANGOSTA Y SIN ROBAR SITIO. Parada, la cancha tiene 68 de ancho contra 88 de largo, así que el eje apretado es el horizontal: dos apellidos largos en la misma línea de cuatro se tocan. Se acorta el tope, se baja el cuerpo y se saca del flujo con `position: absolute` — colgando del disco, la chapa deja de sumar ancho a la ficha y dos fichas vecinas se miden por sus discos, que son 34 y no 120. */ .dia__ficha-nom { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); max-width: 5.5rem; padding: 1px 5px; background: rgb(0 0 0 / 0.7); border-radius: var(--r-xs); color: var(--ink-100); font-size: 11px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* EL PUESTO VACÍO. Disco de trazo cortado con el código del puesto adentro: sin nadie, la pregunta que contesta el dibujo deja de ser «quién juega acá» y pasa a ser «qué falta», y eso lo contesta «DFI». */ .dia__ficha--vacia .dia__ficha-n { background: rgb(0 0 0 / 0.24); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--campo-linea) 55%, transparent); border: 1px dashed color-mix(in srgb, var(--campo-linea) 45%, transparent); color: color-mix(in srgb, var(--campo-linea) 82%, transparent); font-size: var(--fs-2xs); font-weight: 700; } .dia__ficha--vacia .dia__ficha-nom { background: rgb(0 0 0 / 0.42); color: var(--text-muted); font-weight: 600; } /* EL ÚNICO MOMENTO ANIMADO DE LA PANTALLA: los once entran escalonados, de atrás hacia adelante, como se nombra un equipo. `--i` es el orden del puesto en la formación —el arquero es el cero— así que el escalonado sale del DIBUJO y no de una lista de retardos escrita al lado. ANIMA EL DISCO Y LA CHAPA, no el botón: el botón lleva el `translate(-50%, -50%)` que lo centra en su punto y una animación sobre su `transform` lo tiraría a la esquina en el primer fotograma. Es el mismo motivo por el que el latido del destino tampoco vive ahí. */ @keyframes ficha-entra { from { opacity: 0; transform: translateY(10px) scale(0.86); } to { opacity: 1; transform: none; } } .dia__ficha-n, .dia__ficha-nom { animation: ficha-entra 230ms var(--ease-entrada) backwards; animation-delay: calc(var(--i, 0) * 20ms); } @media (hover: hover) { .dia__ficha:hover { transform: translate(-50%, -50%) translateY(-3px); } .dia__ficha:hover .dia__ficha-n { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55), 0 8px 16px -4px rgb(0 0 0 / 0.8); } } .dia__ficha:focus-visible { outline: none; } .dia__ficha:focus-visible .dia__ficha-n { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.34), 0 0 0 3px var(--focus-ring, var(--accent)); } /* El puesto al que iría el que estás mirando en la lista. Late una vez y se queda con un anillo: el latido dice «acá», el anillo dice «sigue siendo acá». */ .dia__ficha--destino .dia__ficha-n { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55), 0 0 0 3px color-mix(in srgb, var(--campo-linea) 85%, transparent), 0 6px 14px -4px rgb(0 0 0 / 0.75); animation: ficha-late 250ms var(--ease-entrada); } @keyframes ficha-late { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } /* -------------------------------------------------------------------------- LOS VEINTITRÉS -------------------------------------------------------------------------- */ /* LAS DOS COLUMNAS SON HERMANAS. La de la cancha es un tablero con marco y la de los veintitrés era una lista suelta sobre el fondo de la página: al lado una de otra, la izquierda parecía sin terminar. Las dos tienen ahora la misma estructura —un riel con el título arriba y el contenido debajo, dentro de un marco— y ninguna de las dos es una tarjeta genérica: son dos objetos distintos que comparten la forma de la casa. */ /* EL RECUENTO PEGADO AL TÍTULO Y NO EN EL BORDE. Con los veintitrés repartidos en columnas, un «11/11» apartado a la derecha caía justo encima del rótulo de la última y se leía como suyo. */ .dia__grupos, .dia__rival-lista, .dia__rival-vacio { padding: var(--sp-3) var(--sp-4); } /* LAS CUATRO LÍNEAS EN COLUMNAS, y con `columns` y no con una grilla. Con la cancha parada a la derecha, a los veintitrés les quedan mil píxeles de ancho: en una sola tira medían 1.378 de alto contra los 560 de la cancha, o sea una columna vacía al lado de una lista de teléfono. `columns` Y NO `grid` porque los cuatro grupos tienen alturas MUY distintas —tres arqueros contra ocho defensores— y una grilla los alinea por fila, así que debajo de los arqueros quedaría el hueco de cinco renglones. El flujo por columnas los empaqueta: lo que sobra de una columna lo llena el grupo siguiente. `break-inside` es lo que impide que un grupo se parta al medio y deje su rótulo en una columna y sus nombres en la otra. */ /* DOS COLUMNAS COMO TECHO, y sale de contar renglones y no de mirar. Con tres, el flujo reparte 3+8 · 8 · 4 y la tercera termina doscientos píxeles antes que la primera: un agujero al lado de una lista. Con dos quedan 3+8 y 8+4 —once renglones contra doce—, que es lo más parejo que permite no partir un grupo. `20rem 2` es ancho Y tope: abajo de cuarenta rem hay una sola, sin quiebre que escribir. */ /* TRES COLUMNAS COMO TECHO. `14rem 3` es ancho Y tope: en la columna ancha de una pantalla grande entran las tres, en una angosta entran dos, y abajo de catorce rem una sola. No hay quiebre escrito para ninguno de los tres casos. */ /* 13rem Y NO 14, Y SE MIDIÓ: la columna de los veintitrés tiene 691 px de contenido y el canalón 20, así que para que entren TRES el ancho de columna tiene que ser 217 o menos —(691 − 40) / 3—. Con 14rem, que son 224, entraban dos: once renglones contra doce, 407 px de alto. Con 13rem entran las tres y la más alta baja a ocho. Un `column-width` siete píxeles más grande de la cuenta cuesta cien píxeles de alto. */ .dia__grupos { columns: 13rem 3; column-gap: var(--sp-5); } /* EL GRUPO SE PUEDE PARTIR, EL RÓTULO NO SE QUEDA SOLO. Con `break-inside: avoid` sobre el grupo entero, ocho defensores no se parten nunca y el repartidor no puede equilibrar: en tres columnas quedaba [arqueros + defensores] de once renglones contra una de ocho y otra de cuatro, o sea 436 px de alto por culpa de la columna más larga. Dejándolo partir, las tres miden lo mismo. Lo único que hay que prohibir es que un rótulo caiga al pie de una columna con sus nombres en la siguiente, y eso lo dice `break-after` sobre el rótulo, que es donde vive la regla. */ .dia__grupo { margin: 0 0 var(--sp-3); } .dia__grupo-cab { break-after: avoid; break-inside: avoid; } .dia__grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 0 0 2px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .dia__banco-lista { margin: 0; padding: 0; list-style: none; } .dia__quien-btn { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); background: transparent; border: none; border-bottom: 1px solid var(--line-hairline); color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease); } .dia__quien-btn--dentro { /* UN ESCALÓN DE LUZ Y NO EL LAVADO DEL ACENTO, por lo mismo que `.convoc__fila--dentro`: sobre el negro, el lima al 12 % da un oliva apagado que cubre el renglón entero. El canto de abajo ya dice todo lo que hay que decir. */ background: var(--ink-800); /* La misma tinta que los discos —la de la CAMISETA— y no la del chrome: el renglón encendido y la ficha de la cancha son el mismo jugador, y si no comparten color hay que leerlos para saberlo. */ box-shadow: inset 2px 0 0 var(--tinta-cancha, var(--accent)); } .dia__quien-btn--dentro .dia__quien { color: var(--text-primary); font-weight: 600; } /* El que estás mirando en la cancha, señalado en la lista: se corre un poco a la derecha, que es el gesto más barato que dice «éste». */ .dia__quien-btn--senalado { background: var(--bg-hover); padding-left: var(--sp-5); } @media (hover: hover) { .dia__quien-btn:hover { background: var(--bg-hover); } } /* LOS 44 PX SON EL MÍNIMO DEL DEDO, no del renglón. Con ratón sobran: veintitrés renglones a 44 miden 651 px de alto, y esta pantalla tiene que entrar entera en la ventana. `pointer: fine` ADEMÁS de `hover: hover` porque son dos preguntas distintas —hay punteros gruesos que hacen hover— y acá lo que importa es el grosor. El teléfono conserva los 44: la vara del modo mide con el dedo y ahí esta regla no se aplica. */ @media (hover: hover) and (pointer: fine) { .dia__quien-btn { min-height: 28px; padding-top: 2px; padding-bottom: 2px; } .dia__jug { height: 24px; } .dia__consigna { min-height: 30px; } } .dia__pos { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); } .dia__quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dia__niv { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); } @media (prefers-reduced-motion: reduce) { .dia__ficha, .dia__ficha-n, .dia__ficha-nom { transition: none; animation: none; } } /* Abajo de 1100 no entran tres columnas: se apilan y la pantalla vuelve a rodar, que es lo correcto cuando el ancho no da. La cancha, sin columna que le fije el alto, vuelve a medirse por ancho. */ @media (max-width: 1100px) { .dia { min-height: auto; } .dia__armar { grid-template-columns: 1fr; flex: none; } .dia__campo { width: min(100%, 420px); margin: 0 auto; } .dia__consignas { overflow: visible; } } /* ========================================================================== LA CONCENTRACIÓN — la cancha al medio -------------------------------------------------------------------------- TRES COLUMNAS Y LA CANCHA EN EL MEDIO, decisión de Alberto el 11/9/2026: lo estratégico a los costados y el dibujo lo más grande que la ventana permita. A la izquierda lo que ya decidiste, a la derecha lo que podés elegir, y en el medio dónde pasa. La del medio es elástica y las de los lados tienen piso: una cancha sin ancho mínimo se achica hasta desaparecer, pero una columna de trabajos por debajo de 15rem parte los nombres en tres renglones. ========================================================================== */ /* EL ALTO SE CAPA ACÁ Y SE MIDE, no se hereda. El `body` del modo crece con su contenido —lo suelta `.en-modo-seleccion body`, y tiene que ser así porque otra hoja le imponía su alto a las cinco pantallas—, así que ningún `flex: 1` de adentro capa nada: el catálogo medía 1.550 px y empujaba la página 865 abajo del pliegue. El `main` de este modo arranca a 147 px del borde —medido—, y 10,5rem son esos 147 más el respiro de abajo. */ .ent { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.1fr) minmax(15rem, 1fr); gap: var(--sp-3); align-items: stretch; height: calc(100vh - 11rem); } .ent > .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .ent__izq, .ent__der { min-height: 0; } /* LOS DÍAS, APILADOS. En la columna son una lista vertical y no una tira: cinco tarjetas de 15rem de ancho tienen sitio para decir qué hay puesto y dónde pasa, que es lo que la tira horizontal recortaba. */ .ent__dias { display: flex; flex-direction: column; gap: var(--sp-2); } .ent__dia { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raised); color: var(--text-secondary); text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) { .ent__dia:hover { background: var(--bg-hover); } } .ent__dia--activo { border-color: var(--accent); background: var(--ink-800); } .ent__dia--vacio .ent__dia-que { color: var(--text-muted); font-style: italic; } .ent__dia-cab { display: flex; align-items: baseline; gap: var(--sp-2); width: 100%; } .ent__dia-cab b { color: var(--text-primary); font-size: var(--fs-sm); } .ent__dia-que { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; } .ent__dia-pie { color: var(--text-muted); font-size: var(--fs-2xs); } /* EL PARTIDO PARTE LA LISTA, y apilado es un renglón fino con su canto: los dos partidos de la ventana son lo que separa los tres tramos de la semana. */ .ent__hito { display: flex; align-items: baseline; gap: var(--sp-2); padding: 2px var(--sp-3); margin: 2px 0; border-left: 2px solid var(--accent); color: var(--accent-texto); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } .ent__hito b { color: var(--text-primary); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; } /* LA CANCHA, LO MÁS GRANDE QUE ENTRE, Y EL QUE LA MIDE ES EL SVG. Con `aspect-ratio` y un alto fijo, cuando el `max-width` de la columna muerde el alto NO se recalcula: la caja queda 640 × 628, la proporción se rompe y el svg se centra adentro dejando bandas — y ahí los discos, que se posicionan contra la CAJA, vuelven a caer fuera del campo. Es el mismo defecto que ya costó una vuelta. LA QUE SÍ FUNCIONA es la del día de partido, y por eso se copia en vez de inventar una segunda: un contenedor con `container-type: size` y la caja pidiendo `min(100cqw, 100cqh × proporción)`. Ahí los dos límites se comparan ANTES de fijar nada, así que la caja entra por el lado que le toque y sigue siendo la cancha exacta. Probado y descartado en el medio: `aspect-ratio` con alto fijo (el `max-width` muerde y la proporción se rompe) y un svg en `auto` (se queda en su tamaño intrínseco, 202 px de alto medidos). */ .ent__centro { align-items: stretch; } .ent__campo { flex: 1; min-height: 0; min-width: 0; container-type: size; display: grid; place-items: center; gap: var(--sp-2); } .ent__tablero { position: relative; width: min(100cqw, calc((100cqh - 1.6rem) * 105 / 68)); aspect-ratio: 105 / 68; } .ent__svg { width: 100%; height: 100%; } /* LAS ZONAS. La puesta es un lavado tenue que se suma consigo mismo —dos días en el mismo sitio se ven más— y la viva es la del trabajo que estás mirando. SE PIDE `fill-opacity` Y NO `opacity`, y el relleno es flojo a propósito: a 0,26 de opacidad el último tercio era un bloque que tapaba las franjas de corte, la cal y los discos, o sea todo lo que hace que eso parezca una cancha. El trabajo lo hace el contorno punteado, que dice el mismo «acá» ocupando una raya en vez de un cuarto del campo. */ .ent__zona { fill: var(--accent); stroke: none; } .ent__zona--puesta { fill-opacity: 0.07; } .ent__zona--puesta[data-veces="2"] { fill-opacity: 0.13; } .ent__zona--puesta[data-veces="3"] { fill-opacity: 0.19; } .ent__zona--viva { fill-opacity: 0.16; stroke: var(--accent); stroke-opacity: 0.85; stroke-width: 0.5; stroke-dasharray: 2 1.6; transition: fill-opacity var(--dur-fast) var(--ease); } /* LOS DISCOS, sobre el mismo rectángulo que el svg y no sobre el panel: sus porcentajes son de la CANCHA, y con la caja suelta el arquero se dibujaba 160 px a la izquierda de la línea de fondo. */ .ent__discos { position: absolute; inset: 0; pointer-events: none; } .ent__disco { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: hsl(0 0% 100% / 0.10); color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 700; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.14); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ent__disco--trabaja { background: var(--accent); color: var(--text-on-accent); box-shadow: inset 0 0 0 1.5px hsl(0 0% 100% / 0.34), 0 3px 8px -2px rgb(0 0 0 / 0.7); } .ent__campo-pie { margin: 0; text-align: center; max-width: 100%; color: var(--text-secondary); font-size: var(--fs-sm); } .ent__campo-pie b { color: var(--text-primary); } /* EL PARTE. Las cinco cifras y las seis barras de ensayo, debajo de los días. */ .ent__parte { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: var(--sp-3); align-content: start; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-hairline); } .ent__dato { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } .ent__dato b { color: var(--text-primary); font-variant-numeric: tabular-nums; } .ent__rubros { display: grid; gap: 3px; } .ent__rubro { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2px; font-size: var(--fs-2xs); } .ent__rubro-n { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--text-secondary); } .ent__rubro-barra { height: 5px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .ent__rubro-barra span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width var(--dur) var(--ease); } .ent__rubro-v { color: var(--text-muted); } /* EL CATÁLOGO, en una columna: en 15rem no entran dos. */ .ent__catalogo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: var(--sp-3); align-content: start; padding-right: var(--sp-2); } .ent__familia { display: grid; gap: var(--sp-2); } .ent__opciones { display: grid; gap: var(--sp-2); } .ent__op { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) { .ent__op:hover { background: var(--bg-hover); border-color: var(--line-strong); } } .ent__op--puesta { border-color: var(--accent); background: var(--ink-800); } .ent__op-n { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; } .ent__op-datos { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); } .ent__op-dato { font-variant-numeric: tabular-nums; } .ent__op-dato[data-signo="menos"] { color: var(--accent-texto); } /* EN UNA VENTANA ANGOSTA las tres columnas se apilan y la cancha se mide por el ancho, que es el recurso escaso ahí. */ @media (max-width: 1100px) { .ent { grid-template-columns: minmax(0, 1fr); height: auto; } .ent__tablero { max-height: none; } } /* ========================================================================== EL TABLERO COMPARTIDO — `campo-2d.js` -------------------------------------------------------------------------- Las tres tintas son las MISMAS que lee el `` del partido, y por eso se ven como el mismo campo: `--campo`, `--campo-franja` y `--campo-linea`. Una cuarta tinta acá sería un segundo césped que se despega del primero el día que alguien toque el ambiente de una cancha. ========================================================================== */ .campo2d { display: block; width: 100%; height: auto; border-radius: var(--r-sm); } .campo2d__cesped { fill: var(--campo); } /* EL CORTE, EN EL GRUPO Y NO EN EL `rect`. La regla apuntaba a `rect` porque el único patrón eran ocho franjas rectas. Con los siete del partido hay además `path` —las diagonales, que son paralelogramos— y `circle` —los anillos concéntricos—, y esos heredaban el negro inicial de svg: **la cancha entera salía negra** y el césped verde quedaba debajo, tapado. Un `fill` que no alcanza a una figura nueva no se ve como un color equivocado: se ve como una mancha. Es la tercera vez que este archivo lo paga, así que la regla va en el GRUPO y alcanza a lo que haya adentro. */ .campo2d__franjas { fill: var(--campo-franja); } .campo2d__franjas * { fill: inherit; } .campo2d__cal { fill: none; stroke: color-mix(in srgb, var(--campo-linea) 34%, transparent); stroke-width: 0.32; } /* Los dos puntos de penal y el del centro son los únicos rellenos de la cal. */ .campo2d__punto { fill: color-mix(in srgb, var(--campo-linea) 34%, transparent); stroke: none; } /* EL GRANO. La mota va del color de la franja y no de un gris: el pasto no tiene tierra encima, tiene hebras que toman la luz distinto. A 0,06 no se ve como puntos —se ve como que el verde no es plano—, que es el único trabajo que tiene que hacer. */ .campo2d__grano { fill: var(--campo-linea); opacity: 0.06; } /* EL DESGASTE. Manchas peladas donde se juega, con los bordes difuminados: una elipse de borde limpio no es una cancha gastada, es un logo. El filtro va en el grupo y no en cada elipse para que se difuminen como UNA mancha donde se tocan, que es como se gastan de verdad. */ .campo2d__desgaste { fill: color-mix(in srgb, var(--campo) 55%, hsl(38 34% 42%)); opacity: calc(var(--gasto, 0) * 0.5); filter: blur(1.4px); } /* EL VELO DEL CLIMA. Las dos tintas extremas del sistema, como en el partido: la lluvia oscurece con la más oscura y la nieve blanquea con la más clara. */ .campo2d__velo { opacity: var(--alfa, 0); } .campo2d__velo--agua { fill: var(--ink-1000); } .campo2d__velo--nieve { fill: var(--text-primary); } /* La sombra de la tribuna, que es lo único que tiene un día de sol. */ .campo2d__sol { fill: hsl(0 0% 0% / 0.16); } /* Y lo que cae, que va ENTRE la cámara y el pasto y por eso se dibuja al final, encima de la cal. */ .campo2d__lluvia { stroke: hsl(0 0% 100% / 0.30); stroke-width: 0.22; stroke-linecap: round; fill: none; } .campo2d__nieve { fill: hsl(0 0% 100% / 0.55); } /* ========================================================================== EL PREDIO Y LA OFICINA — las dos pantallas que no se tocan -------------------------------------------------------------------------- Ninguna de las dos tiene cancha ni tabla larga, así que las dos son lo mismo: tarjetas que miden lo que mide su contenido. Comparten bloque porque comparten forma, y separarlas sería escribir dos veces la misma retícula. ========================================================================== */ .pre, .ofi { display: flex; flex-direction: column; gap: var(--sp-4); } /* EL PREDIO SE DIBUJA MÁS ABAJO, en «EL PREDIO, COMO EL PORTAL» (29/9/2026). Acá vivía la retícula de cuatro tarjetas grises de antes. */ /* --- la oficina --- */ /* LA SALIDA, SEPARADA Y CON AIRE. Lo irreversible no se toca sin querer: va en su propia tarjeta, al final, y el botón no comparte fila con nada. */ /* ========================================================================== LA PUERTA ES UNA TAPA, Y SU DIFERENCIAL ES EL ANCHO DE LA COLUMNA -------------------------------------------------------------------------- Hereda `tapa` entera —dos columnas, antetítulo en bloque, titular condensado, bajada— y cambia UNA medida: la columna de la portada son 340 px porque lo que lleva es una pizarra vertical con una jugada dibujada. Acá lo que lleva es el MUNDO, y un planisferio de 340 px no es un mapa: es un icono. ES EL DIFERENCIAL Y NO UNA EXCEPCIÓN. La portada dice «elegí país, división y club» y su dibujo es una jugada: once tipos y una flecha. La puerta dice «tu plantel está repartido por el mundo» y su dibujo tiene que ser ese mundo. El esqueleto es el mismo para que se lean como dos mitades del mismo juego; lo que cambia es lo único que las distingue. ========================================================================== */ .tapa.puerta { /* LA NOTA ES LA COLUMNA ANCHA desde el 29/9/2026, y antes era al revés. La medida la manda la CANCHA: es la única pieza con proporción fija —2,3 a 1— así que cada píxel de ancho que gana son 0,43 de alto, y sin ancho quedaba un dibujo de 238 px con medio metro de negro debajo. El mural no tiene esa atadura: con menos ancho reparte sus ciento dieciocho en más filas y llena igual, porque el reparto se mide (ver `medirElMuro()`). */ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); /* EL TOPE SUBIÓ DE 1420 A 1600 por la cancha: es la pieza con proporción fija y su alto sale del ancho, así que un tope bajo la dejaba chica y abría aire arriba y abajo. El mural no lo sufre: reparte sus ciento dieciocho en más filas y llena igual. */ max-width: 1600px; /* SE ESTIRA HASTA EL BORDE DE ABAJO. «Aprovechemos el espacio de la pantalla» (Alberto, 29/9/2026): con `align-content: start` la fila medía lo que medía la nota y debajo del muro quedaban 300 px de negro —se veía en la captura—. Estirada, las dos columnas reciben el alto de la ventana y adentro cada una reparte: la nota le da a la pizarra lo que sobra, y el muro se centra. `stretch` Y NO UN ALTO EN LAS COLUMNAS: el alto tiene que llegar de la rejilla, o cada columna elige el suyo y vuelven a quedar desparejas. */ align-content: stretch; min-height: 100dvh; /* Y LA FILA SE DECLARA EN `1fr`, que es lo que de verdad la estira. Con `align-content: stretch` sola no alcanzaba —medido: la fila seguía midiendo 652 de los 844 disponibles— porque estirar filas automáticas pide un alto DEFINIDO y acá lo que hay es un mínimo. `1fr` es ese alto. */ grid-template-rows: minmax(0, 1fr); } /* EN EL TELÉFONO, UNA COLUMNA (1/10/2026). La regla de arriba lleva dos clases y le ganaba a la de `home.css` que pone la tapa en una: a 375 la nota y el muro salían lado a lado, de 190 y 150 px. El muro va debajo, sin filete al costado, y la fila deja de estirarse a la ventana. */ @media (max-width: 720px) { .tapa.puerta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; } .tapa.puerta .tapa__columna { padding-left: 0; border-left: 0; } /* Y a la izquierda: la home centra su nota de tres renglones; ésta es una página de reglas y listas, y centradas no se leen. */ .tapa.puerta .tapa__nota { justify-items: stretch; text-align: left; } } /* La salida va ARRIBA del antetítulo y sin el aire que el sistema le da al pie: es una vuelta atrás, no una acción de la pantalla. */ /* EL TITULAR DE LA PUERTA ES MÁS CHICO QUE EL DE LA PORTADA, y no por gusto: en la portada debajo del titular hay un desplegable y nada más, y acá hay una pizarra con una cancha. Los 5,5rem heredados se llevaban 200 px de los 900 y la cancha quedaba en 155 de alto —más chica que su propio pie—. Cada décima de rem que baja el titular es alto que gana el dibujo, que es la pieza que esta pantalla vino a mostrar. */ /* TODO ARRANCA EN LA MISMA LÍNEA. La ficha heredaba la tarjeta del expediente —fondo, borde y `sp-5` de relleno— y ese relleno metía la pizarra veinte píxeles adentro: el titular empezaba en una línea y «Tu once» en otra. En una columna de nota, donde todo lo demás es texto suelto sobre el fondo de la página, la tarjeta era además la única caja dibujada. Se va la caja y queda el filete, que es lo que de verdad separa una sección de la siguiente. Y LA SALIDA SACA SU FLECHITA AL MARGEN. «‹ Volver a la portada» empieza por un icono de 16 px, así que su TEXTO caía veinticuatro a la derecha de todo lo demás. Corrido el bloque entero, lo que se alinea es la palabra y la flecha queda en el canalón, que es donde vive una marca de vuelta atrás. */ .tapa.puerta .atlas__ficha { padding: var(--sp-4) 0 0; background: none; border: 0; border-top: 1px solid var(--line-hairline); border-radius: 0; } .puerta__salida .tapa__callada { margin-left: calc(-16px - var(--sp-2)); } /* EL ANTETÍTULO NO SE ESTIRA. En la portada la nota es una rejilla con `justify-items: start` y el bloque negro mide lo que mide su texto; acá la nota pasó a ser una columna flexible para poder repartir el alto, y el estirado de costado que trae `flex` por defecto convirtió ese bloque en una barra blanca de lado a lado. */ .tapa.puerta .tapa__antetitulo { align-self: flex-start; } .tapa.puerta .tapa__titular { --titular: clamp(2.6rem, 3.4vw + 0.6rem, 4.25rem); } .puerta__salida { margin: 0 0 var(--sp-2); } .puerta__salida .tapa__callada { display: inline-flex; align-items: center; gap: var(--sp-2); } /* EL MAPA MANDA EN SU COLUMNA. En la portada la columna la llena un dibujo de alto fijo; acá la llena un mapa que tiene que poder crecer, así que la columna es una sola pieza que se estira y las confederaciones van debajo. */ .puerta__columna { display: grid; gap: var(--sp-4); align-content: center; min-width: 0; } /* LA NOTA REPARTE SU ALTO y no lo apila: el titular y el desplegable miden lo que miden, y todo lo que sobra es de la ficha —la pizarra cuando no elegiste nada, la placa del país cuando sí—. Con `grid` y `align-content: start`, que es lo que hereda de la portada, ese sobrante quedaba abajo y sin dueño. */ .tapa.puerta .tapa__nota { display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; } /* LA FICHA NO EMPUJA LA PÁGINA: se queda con el hueco que sobra y rueda ella, que es la caja que creció. Antes eso era un techo en `rem` —34, o 46vh— y un techo hace las dos cosas mal: en una ventana alta deja aire debajo, y en una baja corta antes de tiempo. Ahora el hueco es exactamente el que hay. */ .tapa.puerta .atlas__ficha { flex: 1 1 auto; min-height: 12rem; overflow-y: auto; /* Y ES UNA COLUMNA FLEXIBLE, no una caja de bloque: lo que lleva adentro —la pizarra— tiene que recibir este alto para repartirlo. Con `min-height: 100%` sobre el hijo no alcanzaba: medido, la ficha crecía a 527 y la cancha se quedaba en 171, porque un porcentaje pide un alto definido y el de un `flex: 1` no lo es hasta que se resolvió la fila. Un hijo que crece no necesita saber cuánto mide el padre. */ display: flex; flex-direction: column; } /* ========================================================================== EL MURO DE BANDERAS -------------------------------------------------------------------------- Las ciento dieciocho, en color y agrupadas por confederación. Es el dibujo de la columna de la puerta y a la vez su selector. EL TAMAÑO ES LA CLAVE Y NO EL COLOR. Ciento dieciocho banderas encendidas son ciento dieciocho cosas gritando; a 46 px cada una deja de ser una bandera y pasa a ser una TEXTURA, que es lo que hace que el conjunto se lea como «están todas» en vez de como un desfile. La que crece es una sola: la que mirás. ========================================================================== */ .muro { /* UNA SOLA SUPERFICIE, sin rótulos que la partan: es un mural. El orden sigue siendo el del mundo —confederación y dentro por fuerza— así que hay zonas, pero no hay encabezados que las anuncien. LA CELDA CRECE CON LA VENTANA en vez de quedarse en 46 px. Ciento dieciocho banderas de 46 px llenan unos 440 px de alto, y en una ventana de 900 eso dejaba media columna vacía: el mural tiene que ser UNA superficie que llega hasta abajo, no una franja arriba. El tope de 84 px es el punto donde la bandera deja de ser textura y vuelve a ser una bandera suelta. */ --celda: clamp(46px, 7.2vh, 72px); /* `--cols` lo escribe `medirElMuro()` con la repartija que de verdad llena la columna; el `auto-fill` de reserva es lo que se ve si no hubo medida. */ display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(var(--celda), 1fr)); gap: 5px; align-content: center; min-width: 0; position: relative; } .muro__b { position: relative; display: block; padding: 0; aspect-ratio: 3 / 2; border: 0; border-radius: 2px; overflow: hidden; background: var(--ink-800); cursor: pointer; /* CRECE CON `scale` Y NO CON `transform`, y no es lo mismo aunque haga lo mismo: la entrada del muro anima `transform`, así que pasar el dedo por una bandera que todavía está entrando pisaba su animación y la bandera SALTABA. `scale` es una propiedad aparte y las dos se componen sin pisarse. */ transition: scale 220ms var(--ease-entrada), box-shadow 220ms var(--ease), opacity 220ms var(--ease); } .muro__b img { width: 100%; height: 100%; object-fit: cover; display: block; } .muro__sin { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); font-size: var(--fs-2xs); } /* NO SE DESPEGA DEL MURO: SE APAGAN LAS OTRAS. La bandera crecía a 1,6 y se iba por encima de sus vecinas —«no me gusta que quede ahí flotando», Alberto, 29/9/2026—: un mural al que se le levanta un azulejo deja de ser un mural. Ahora el gesto es al revés y es el de una vitrina: las ciento diecisiete se atenúan y la que mirás se queda donde está, entera, con su aro. El 1,06 que crece no la saca de su celda; alcanza para que el ojo sepa cuál es sin que nada se mueva de sitio. */ @media (hover: hover) { .muro:hover .muro__b { opacity: 0.45; } .muro:hover .muro__b:hover { opacity: 1; scale: 1.06; z-index: 3; box-shadow: 0 0 0 2px var(--accent); } } .muro__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 3; } /* LA ELEGIDA NO CRECE: se la marca con el acento. Crecer es lo que hace el dedo al pasar, y dos cosas grandes a la vez en un muro de ciento dieciocho son dos sitios donde mirar. */ .muro__b--es { box-shadow: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent); z-index: 2; } /* -------------------------------------------------------------------------- EL MURO SE LEVANTA, NO APARECE -------------------------------------------------------------------------- «Podríamos añadir una animación para las banderas» —Alberto, 29/9/2026—. SON DOS GESTOS Y NO UNO. El primero ocurre una vez: las ciento dieciocho entran de a una, en el orden del mundo, y ese orden es el argumento —primero Europa, después América, después África…—: el muro se ESCRIBE delante tuyo y lo que se ve es cuántas son. El escalón lo pone `--i`, que escribe quien pinta, y está topado en 1,4 s: ciento dieciocho por 12 ms son 1.416, y una entrada más lenta que eso deja de leerse como una construcción y empieza a leerse como una carga que no termina. El segundo no termina nunca y por eso tiene que costar casi nada: una luz que cruza el muro cada nueve segundos. Es UN pseudo-elemento y una transformación —no toca ninguna de las ciento dieciocho— así que es una capa compuesta y no un repintado. Sin él, un muro quieto de banderas apagadas se lee como una imagen; con él, se lee como algo que está prendido. `pointer-events: none` NO ES PRECAUCIÓN: la luz cubre el muro entero, y sin eso se queda con todos los clics de las ciento dieciocho banderas. */ /* LAS BANDERAS ENTRAN DE A POCO, EN DIAGONAL, CADA VEZ QUE SE ABRE LA PÁGINA. «Cuando se ingresa y cuando se recarga, que las banderas vayan apareciendo de a poco» —Alberto, 29/9/2026—. Había una entrada de 12 ms por bandera y no se veía, por dos motivos medidos: era tan corta que el muro parecía aparecer de golpe, y corría ANTES de que llegaran las imágenes, así que lo que entraba de a una eran cajas grises y las banderas se prendían todas juntas después. Ahora espera a las imágenes —`muro--espera` la tiene quieta y la saca `pintarElMuro()` cuando están decodificadas— y avanza como una ola: `--i` es fila + columna, así que la primera esquina entra primero y la última cierra algo más de un segundo después. `backwards` Y NO `both`: con `both` cada bandera se queda con `opacity: 1` del último fotograma, un valor de animación le gana a cualquier regla normal, y el muro no se apagaba al pasar el dedo. */ .muro__b { animation: muro-alza 290ms var(--ease-entrada) backwards; animation-delay: calc(var(--i, 0) * 30ms); } .muro--espera .muro__b { animation: none; opacity: 0; } @keyframes muro-alza { from { opacity: 0; transform: translateY(10px) scale(0.72); } to { opacity: 1; transform: none; } } .muro::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background-image: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--accent) 20%, transparent) 47%, transparent 54%); background-size: 300% 100%; background-repeat: no-repeat; animation: muro-luz 9s linear infinite; /* Empieza después de que el muro terminó de levantarse —la ola dura algo menos de dos segundos—: la luz que cruza una pared a medio construir se lee como un defecto de dibujo. */ animation-delay: 2.4s; } .muro--espera::after { animation: none; opacity: 0; } @keyframes muro-luz { from { background-position: 130% 0; } 55% { background-position: -30% 0; } to { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .muro__b, .muro--espera .muro__b { animation: none; opacity: 1; } .muro::after { animation: none; opacity: 0; } .muro__eti { transition: none; } } /* EL NOMBRE, PEGADO A SU BANDERA. Dice el nombre y nada más: llevaba también el puesto en el mundo y Alberto lo sacó —«el dato ese abajo tampoco»—. Para elegir un país alcanza con saber cuál es; el puesto es de la ficha, que es donde se compara. PISA EL BORDE DE ABAJO DE LA BANDERA en vez de flotar diez píxeles más arriba: pegado, el cartel y la bandera son una sola cosa; separado, son dos cosas y hay que decidir de cuál es. */ .muro__eti { position: absolute; z-index: 6; pointer-events: none; translate: -50% -60%; padding: 3px var(--sp-2); border-radius: var(--r-xs); background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 6px 16px -8px #000; opacity: 0; transition: opacity 140ms var(--ease); } .muro__eti--es { opacity: 1; } /* LA CHAPA DEL MURAL. Ocupa los uno a tres huecos que sobran del reparto —118 no se divide en nada— y los convierte en el pie de la obra: cuántas son. No es un relleno con forma de dato; es el dato que esta pantalla quiere decir («están todas») puesto justo donde, si no, habría negro. */ .muro__chapa { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); border-radius: 2px; background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* Y NUNCA EMPUJA LA CUADRÍCULA: una celda de rejilla no achica su contenido sola, así que sin esto un cartel más ancho que su celda le agrega ancho a la página entera. Medido en el teléfono: seis píxeles de rueda horizontal. */ min-width: 0; overflow: hidden; white-space: nowrap; /* La cifra manda y la palabra acompaña, que es el orden en el que se lee. */ } .muro__chapa i { font-style: normal; font-size: var(--fs-lg); letter-spacing: -0.01em; } .muro__chapa--corta { font-size: 0; gap: 0; } .muro__chapa--corta i { font-size: var(--fs-sm); } .muro__chapa[hidden] { display: none; } /* EN EL TELÉFONO el muro se achica pero no se parte: con 34 px entran seis por fila y las ciento dieciocho siguen contándose solas. */ @media (max-width: 720px) { .muro { --celda: 34px; } } /* ========================================================================== LA FICHA DE LA SELECCIÓN ELEGIDA -------------------------------------------------------------------------- Cinco renglones y cada uno contesta una pregunta: quién es, cuánto da, cómo juega, con quiénes y qué le espera (el porqué, en `pintarPlaca()`). Lo que ordena la lectura es el ESPACIO y no los rótulos: un filete entre renglones y aire antes de cada título, que es la regla de siempre —un título pertenece a lo que sigue—. ========================================================================== */ .nac { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; } /* 1. QUIÉN ES */ .nac__cab { display: flex; align-items: center; gap: var(--sp-4); } .nac__pano { flex: none; } .nac__quien { flex: 1; min-width: 0; } .nac__nombre { margin: 0; color: var(--text-primary); font-size: var(--fs-2xl, 1.9rem); font-weight: 700; line-height: 1; font-stretch: var(--wd-condensed); text-transform: uppercase; letter-spacing: -0.01em; } .nac__conf { margin: 4px 0 0; color: var(--text-muted); } .nac__ir { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5); font-weight: 700; white-space: nowrap; } .nac__ir .i { width: 16px; height: 16px; } /* 2. CUÁNTO DA: cuatro números grandes, del mismo peso, en una fila. */ .nac__numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--sp-4) 0; list-style: none; border-top: 1px solid var(--line-hairline); border-bottom: 1px solid var(--line-hairline); } .nac__numeros li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid var(--line-hairline); } .nac__numeros li:first-child { padding-left: 0; border-left: 0; } .nac__numeros b { color: var(--text-primary); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; } .nac__numeros li:first-child b { color: var(--accent); } .nac__numeros .label { color: var(--text-secondary); } .nac__numeros small { color: var(--text-muted); font-size: var(--fs-2xs); line-height: 1.3; } /* Los títulos de sección. */ .nac__seccion { display: grid; gap: var(--sp-2); min-width: 0; align-content: start; } .nac__tit { margin: 0; color: var(--text-muted); } /* 3. CÓMO JUEGA: la cancha de las líneas. Cuatro franjas de césped del arco propio al rival, con la cal entre una y otra y el número grande adentro. El verde es el del partidito y no un token de la paleta: la paleta del modo cambia el chrome, no el césped. */ .nac__lineas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-radius: var(--r-sm); overflow: hidden; background: hsl(146 45% 27%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55); } .nac__linea { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; /* El aire de arriba es el sitio de la etiqueta —«Punto flojo», «Lo mejor»— y lo tienen las cuatro franjas, lleven etiqueta o no: así los cuatro números quedan a la misma altura y la etiqueta nunca pisa la cifra. */ min-height: 84px; padding: 24px var(--sp-2) var(--sp-3); color: #fff; text-align: center; } .nac__linea + .nac__linea { box-shadow: inset 2px 0 0 rgb(255 255 255 / 0.55); } .nac__linea:nth-child(even) { background: rgb(255 255 255 / 0.05); } .nac__linea span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .nac__linea b { font-size: var(--fs-xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .nac__linea b small { font-size: 0.5em; font-weight: 600; opacity: 0.6; margin-left: 1px; } /* La barra dice «cuánto de 99» sin leer el número: el ancho es el nivel. */ .nac__barra { display: block; width: 70%; height: 4px; margin-top: 4px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.18); overflow: hidden; } .nac__barra::before { content: ''; display: block; height: 100%; width: calc(var(--nivel, 0) * 1%); background: #fff; border-radius: inherit; } .nac__linea--baja .nac__barra::before { background: var(--warn); } .nac__linea--alta .nac__barra::before { background: var(--accent); } .nac__linea em { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 6px; border-radius: var(--r-pill); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .nac__linea--alta em { background: var(--accent); color: var(--text-on-accent); } .nac__linea--baja em { background: var(--warn); color: #111; } .nac__linea--baja b { color: var(--warn); } /* 4 y 5. DOS COLUMNAS PAREJAS. */ .nac__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } .nac__tabla { display: grid; margin: 0; padding: 0; list-style: none; } .nac__tabla li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 26px; font-size: var(--fs-sm); color: var(--text-secondary); border-bottom: 1px solid var(--line-hairline); } .nac__tabla li:last-child { border-bottom: 0; } .nac__tabla b { flex: none; color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; } .nac__jug { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nac__jug small { color: var(--text-muted); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; } .nac__club { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; } .nac__club::before { content: '·'; margin-right: 1px; } .nac__escudo { flex: none; width: 16px; height: 16px; object-fit: contain; } .nac__pos { flex: none; width: 1.6em; color: var(--text-muted); font-style: normal; font-variant-numeric: tabular-nums; } .nac__mini { flex: none; align-self: center; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; } .nac__vos { color: var(--text-primary); } .nac__vos b { color: var(--accent); } /* La raya: el último que entra lleva la línea punteada debajo. */ .nac__corte { border-bottom: 1px dashed var(--warn) !important; } .nac__regiones { display: flex; flex-wrap: wrap; gap: var(--sp-1, 4px) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-secondary); } .nac__regiones li { display: inline-flex; align-items: center; gap: 6px; } .nac__regiones b { color: var(--text-primary); font-variant-numeric: tabular-nums; } /* EL CICLO, EN UNA LÍNEA DE TIEMPO: cuatro años en fila, el de hoy en el acento. */ .nac__ciclo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .nac__ciclo li { display: grid; gap: 2px; padding-top: var(--sp-2); border-top: 2px solid var(--line); font-size: var(--fs-xs); color: var(--text-muted); } .nac__ciclo span { font-variant-numeric: tabular-nums; } .nac__ciclo b { color: var(--text-secondary); font-weight: 600; font-size: var(--fs-2xs); line-height: 1.25; } .nac__hoy { border-top-color: var(--accent) !important; color: var(--text-primary) !important; } .nac__hoy b { color: var(--accent) !important; } @media (max-width: 720px) { .nac__cab { flex-wrap: wrap; } .nac__ir { width: 100%; justify-content: center; } .nac__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); } .nac__numeros li:nth-child(3) { padding-left: 0; border-left: 0; } .nac__dos { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- CON UNA SELECCIÓN ELEGIDA -------------------------------------------------------------------------- «No estamos aprovechando espacio, colores, diseño para explayarnos acá» (Alberto, 29/9/2026). Tres cosas: 1. LA TAPA CEDE ALTO. El titular de cuatro renglones y la bajada son la invitación; con un país elegido ya hicieron su trabajo, así que el titular se achica —sigue en dos renglones: sacarle el salto pegaba «NOMBRES.UN» sin espacio— y la bajada se va. Son unos doscientos píxeles que pasan a la ficha. 2. LOS COLORES DE LA SELECCIÓN. La cabecera lleva una franja con su primer color y el once juega con su camiseta: la ficha de Brasil y la de Suecia dejan de verse iguales. 3. EL ONCE PROBABLE, en la cancha del juego, que es la pieza que más espacio merece y la que se achica si la ventana no da. -------------------------------------------------------------------------- */ .tapa.puerta .tapa__titular { transition: font-size var(--dur) var(--ease); } .tapa.puerta.puerta--elegida .tapa__titular { --titular: clamp(1.8rem, 1.6vw + 0.7rem, 2.4rem); /* A este tamaño el interlineado de la portada —0,88— junta los dos renglones hasta que las tildes tocan la línea de arriba: «colapsado», dijo Alberto. */ line-height: 1.02; } .tapa.puerta.puerta--elegida .tapa__bajada { display: none; } /* La cabecera con los colores de la nación. */ .nac__cab { position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 6px); border-radius: var(--r-md); overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 55%, transparent); } .nac__cab::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } /* EL ONCE PROBABLE CEDE EL ALTO QUE HAGA FALTA. Mismo patrón que la pizarra de apertura: su alto ideal sale del ancho y `flex-shrink` lo deja bajar hasta 8 rem si la ventana no da, sin deformar la cancha. */ .nac { container-type: inline-size; } .nac__once { flex: 0 1 auto; min-height: 0; } .nac__marco { min-height: 8rem; height: calc(100cqw * 456 / 1050); display: grid; place-items: start center; container-type: size; } .nac__once .nac__marco { flex-shrink: 1; } .nac__once { display: flex; flex-direction: column; } .nac__once .nac__marco { flex: 0 1 auto; } /* LAS ZONAS DE «DÓNDE JUEGA SU GENTE», por confederación. Casa en el acento, Europa y Sudamérica con los tonos de siempre, y el resto de los continentes con tonos apagados que se separan por matiz. */ .reparto__tramo--uefa, .punto--uefa { background: var(--region-europa, hsl(73 55% 42%)); } .reparto__tramo--concacaf, .punto--concacaf { background: hsl(205 55% 58%); } .reparto__tramo--afc, .punto--afc { background: hsl(22 70% 58%); } .reparto__tramo--caf, .punto--caf { background: hsl(45 75% 52%); } .reparto__tramo--ofc, .punto--ofc { background: hsl(175 45% 45%); } /* ========================================================================== EL PREDIO, COMO EL PORTAL (29/9/2026) -------------------------------------------------------------------------- La casa del modo. Arriba la franja de la selección con la fecha que viene; abajo seis tarjetas en una retícula de tres por dos. Todo entra de a una —la franja primero, después cada tarjeta con su escalón— y los medidores se cargan: es el mismo lenguaje de movimiento del resto del sitio (`movimiento.css`), no uno nuevo. ========================================================================== */ .pre { gap: var(--sp-4); padding-bottom: var(--sp-4); } .pre .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes pre-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- la franja --- */ .pre__hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-5) var(--sp-6) var(--sp-5) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 30%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 10%, transparent) 45%, transparent 75%), var(--bg-panel); } .pre__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .pre__quien { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; } .pre__bandera { flex: none; } .pre__bandera-img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 14px 30px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } @keyframes pre-bandera { from { opacity: 0; transform: scale(0.85) rotate(-3deg); } to { opacity: 1; transform: none; } } .pre__quien-txt { min-width: 0; } .pre__ante { margin: 0; color: var(--text-secondary); } .pre__nombre { margin: 2px 0 4px; color: var(--text-primary); font-size: clamp(2rem, 2.6vw + 0.6rem, 3.2rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; letter-spacing: -0.01em; } .pre__bajada { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .pre__accion { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5); font-weight: 700; } .pre__accion .i { width: 16px; height: 16px; } /* --- la retícula --- */ .pre__t { display: flex; flex-direction: column; min-width: 0; } .pre__t > div:last-child { flex: 1; } /* --- lo que falta --- */ .pre__pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .pre__pend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); border: 1px solid var(--line); animation: pre-entra 210ms var(--ease-entrada) both; animation-delay: calc(150ms + var(--j, 0) * 30ms); } .pre__pend--urgente { box-shadow: inset 3px 0 0 var(--accent); } .pre__pend-que { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.3; } .pre__pend-ir { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; color: var(--text-primary); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; } .pre__pend-ir:hover { color: var(--accent); } .pre__mas { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-xs); } .pre__nada { margin: 0; color: var(--text-muted); } .pre__nada--ok { color: var(--accent-texto, var(--accent)); font-weight: 600; } /* --- cómo estás: medidores que se cargan --- */ .pre__barra { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .pre__barra::before { content: ''; display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(var(--parte, 0)); animation: pre-carga 500ms var(--ease) both; animation-delay: 220ms; } @keyframes pre-carga { from { transform: scaleX(0); } } @media (max-width: 1100px) { .pre__hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .pre__quien { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .pre .tarjeta, .pre__pend, .pre__bandera-img, .pre__barra::before { animation: none; } } /* ========================================================================== SCOUTING, COMO EL PREDIO (29/9/2026) -------------------------------------------------------------------------- LAS CLASES SON `scsel` Y NO `scout`: `scout` ya es del Scouting de club (`scouting.css`), que esta página también carga y que viene DESPUÉS en la pila, así que su retícula de dos columnas le ganaba a ésta y la franja se comía la pantalla entera. -------------------------------------------------------------------------- La franja de la selección con la plata arriba y tres columnas abajo: dónde juega tu gente, los que se ofrecen, y el cuerpo técnico con las inferiores. Mismo lenguaje de entrada que el Predio —cada tarjeta con su escalón— y la barra del presupuesto que se carga. ========================================================================== */ .scsel { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; flex: 1; padding-bottom: var(--sp-4); } .scsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } /* --- la franja --- */ .scsel__hero { position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) var(--sp-6) var(--sp-4) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 45%, transparent 75%), var(--bg-panel); } .scsel__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .scsel__quien { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .scsel__bandera-img { display: block; width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } .scsel__ante { margin: 0; color: var(--text-secondary); } .scsel__titulo { margin: 0; color: var(--text-primary); font-size: clamp(1.8rem, 1.8vw + 0.6rem, 2.6rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; } .scsel__bajada { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.35; } .scsel__caja { display: grid; gap: var(--sp-3); min-width: 0; } .scsel__numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .scsel__numeros li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid rgb(255 255 255 / 0.1); } .scsel__numeros li:first-child { padding-left: 0; border-left: 0; } .scsel__numeros b { color: var(--text-primary); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; } .scsel__numeros .label { color: var(--text-secondary); } .scsel__numeros small { color: var(--text-muted); font-size: var(--fs-2xs); line-height: 1.3; } .scsel__de { color: var(--text-muted); font-size: 0.6em; margin-left: 1px; } .scsel__libre b { color: var(--accent); } .scsel__libre--nada b { color: var(--warn); } .scsel__fondo b { color: color-mix(in srgb, var(--accent) 55%, var(--text-primary)); } .scsel__recorte { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.35; } .scsel__barra { height: 6px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.35); overflow: hidden; } .scsel__barra span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(var(--parte, 0)); animation: pre-carga 500ms var(--ease) both; animation-delay: 200ms; } /* --- la retícula: tres columnas que llenan el alto y ruedan adentro --- */ .scsel__grilla { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); } .scsel__col { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; min-width: 0; } .scsel__t { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .scsel__col > .scsel__t:first-child { flex: none; } .scsel__col > .scsel__t:last-child { flex: 1; } /* En la del medio el mercado mide lo que mide y los informes llenan el resto. */ .scsel__rueda { flex: 1; min-height: 0; overflow-y: auto; } /* --- las plazas, en dos renglones: el país arriba, la gente abajo --- */ .scsel .plaza { grid-template-columns: minmax(0, 1fr) auto 3.5rem; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-2); } .scsel .plaza:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .plaza__ojos { display: inline-flex; gap: 3px; } .plaza__ojos i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-700, var(--line)); } .plaza__ojos i.si { background: var(--accent); } /* --- el mercado --- */ .scsel__ojeador { display: flex !important; align-items: center; gap: var(--sp-3); } .scsel__ojeador-txt { display: grid; min-width: 0; } .scsel__ojeador-txt > span { display: block; } .scsel__mini { flex: none; width: 24px; height: 16px; object-fit: cover; border-radius: 2px; background: var(--ink-800); } @media (max-width: 1180px) { .scsel__hero { grid-template-columns: minmax(0, 1fr); } .scsel__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scsel__col { grid-column: 1 / -1; flex-direction: row; } .scsel__col > .scsel__t { flex: 1; } } @media (max-width: 720px) { .scsel__grilla { grid-template-columns: minmax(0, 1fr); } .scsel__col { flex-direction: column; } .scsel__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); } .scsel__numeros li:nth-child(odd) { padding-left: 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .scsel .tarjeta, .scsel__bandera-img, .scsel__barra span { animation: none; } } /* ========================================================================== LA CONVOCATORIA, COMO EL PREDIO Y SCOUTING (29/9/2026) -------------------------------------------------------------------------- Franja con la selección y los veintitrés casilleros; abajo los candidatos y tu lista por línea. Las clases son `cvsel` —`csel` ya aparecía adentro de `scsel` y un grep suelto las mezclaba—. ========================================================================== */ .convoc.cvsel { flex-direction: column; gap: var(--sp-3); } .cvsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } .cvsel__hero { position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) var(--sp-6) var(--sp-4) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 45%, transparent 75%), var(--bg-panel); } .cvsel__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .cvsel__quien { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .cvsel__bandera-img { display: block; width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } .cvsel__ante { margin: 0; color: var(--text-secondary); } .cvsel__titulo { margin: 0; color: var(--text-primary); font-size: clamp(1.8rem, 1.8vw + 0.6rem, 2.6rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; } /* La tira de los veintitrés vive en la franja y pierde su filete de abajo: la franja ya es la caja. */ .cvsel__tira.lista23 { margin: 0; padding: 0; border: 0; align-items: flex-end; } .cvsel .convoc__aviso { margin: 0; text-align: center; } .cvsel .convoc__aviso:empty { display: none; } .cvsel__grilla { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.36fr); gap: var(--sp-4); } .cvsel__t { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .cvsel__rueda { flex: 1 1 auto; min-height: 0; overflow: auto; } /* El escudo en la columna del club, de la tabla y de la Plantilla. */ .convoc__club { white-space: nowrap; } .convoc__escudo { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; } /* --- tu lista, por línea --- */ .cvsel__linea + .cvsel__linea { margin-top: var(--sp-4); } .cvsel__linea-tit { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--sp-2); color: var(--text-muted); } .cvsel__linea-tit b { color: var(--warn); font-variant-numeric: tabular-nums; } .cvsel__linea-tit b.lleno { color: var(--accent); } .cvsel__hoja { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .cvsel__jug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 4px var(--sp-2) 4px var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); border: 1px solid var(--line); } .cvsel__jug--entra { animation: casillero-cae 250ms var(--ease-entrada) both; } .cvsel__jug--hueco { display: flex; background: none; border-style: dashed; color: var(--text-disabled, var(--text-muted)); font-size: var(--fs-xs); min-height: 32px; } .cvsel__escudo { width: 22px; height: 22px; object-fit: contain; } .cvsel__jug-quien { display: grid; min-width: 0; line-height: 1.2; } .cvsel__jug-quien b { color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvsel__jug-quien small { color: var(--text-muted); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvsel__nivel { font-style: normal; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .cvsel__nivel--niebla { color: var(--text-muted); font-weight: 600; font-style: italic; } .cvsel__sacar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text-muted); font-size: 12px; cursor: pointer; } .cvsel__sacar:hover { color: var(--text-primary); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); } .cvsel__vacia { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-body); } @media (max-width: 1100px) { .cvsel__hero { grid-template-columns: minmax(0, 1fr); } .cvsel__tira.lista23 { align-items: center; } .cvsel__grilla { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .cvsel .tarjeta, .cvsel__bandera-img, .cvsel__jug--entra { animation: none; } } /* MÁS GRANDE: ESCUDOS Y TEXTOS (29/9/2026). «Un poco más grande, escudos y textos» —Alberto—. La tabla sube de 13 a 15 px y el escudo de 18 a 24; la lista de la derecha, de 22 a 30. Y la pantalla usa el alto que le sobraba: el tope heredado de `.convoc` —la ventana menos 11 rem— dejaba 158 px vacíos abajo, porque este `main` arranca más arriba que el de las otras pantallas. */ .convoc.cvsel { max-height: var(--alto-pantalla-sel); } /* EL TOPE ES UN `max-height` Y NO UN `height`: `.convoc` es `flex: 1 1 0%` dentro de un `body` que crece con su contenido, así que un alto fijo lo pisaba la flexibilidad —medido: el main medía 2.187 px y la página rodaba mil—. Lo único que frena a un hijo que crece es su máximo. Y va dividido por el zoom del sitio: `100vh` son píxeles de pantalla y este alto se mide en píxeles de maqueta. */ .cvsel .convoc__tabla, .cvsel .convoc__tabla td, .cvsel .convoc__tabla th[scope="row"] { font-size: var(--fs-md); } .cvsel .convoc__tabla td, .cvsel .convoc__tabla th[scope="row"] { padding-top: 7px; padding-bottom: 7px; } .cvsel .convoc__escudo { width: 24px; height: 24px; vertical-align: -6px; margin-right: 8px; } .cvsel .convoc__quien { font-size: var(--fs-md); } .cvsel__jug { min-height: 50px; gap: var(--sp-3); } .cvsel__escudo { width: 30px; height: 30px; } .cvsel__jug-quien b { font-size: var(--fs-md); } .cvsel__jug-quien small { font-size: var(--fs-xs); } .cvsel__nivel { font-size: var(--fs-md); } .cvsel__linea-tit { font-size: var(--fs-xs); } /* ========================================================================== LA PLANTILLA: CÓMO SON LOS TUYOS (29/9/2026) -------------------------------------------------------------------------- Franja con la selección y los números del grupo; abajo los veintitrés con sus seis habilidades y, al lado, el perfil técnico del grupo. Mismo lenguaje que el resto del modo. ========================================================================== */ .convoc.plsel { flex-direction: column; gap: var(--sp-3); max-height: var(--alto-pantalla-sel); } .plsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } .plsel__hero { position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) var(--sp-6) var(--sp-4) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 45%, transparent 75%), var(--bg-panel); } .plsel__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .plsel__quien { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .plsel__bandera-img { display: block; width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } .plsel__ante { margin: 0; color: var(--text-secondary); } .plsel__titulo { margin: 0; color: var(--text-primary); font-size: clamp(1.8rem, 1.8vw + 0.6rem, 2.6rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; } .plsel__numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .plsel__numeros li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid rgb(255 255 255 / 0.1); } .plsel__numeros li:first-child { padding-left: 0; border-left: 0; } .plsel__numeros b { color: var(--text-primary); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } .plsel__numeros li:first-child b { color: var(--accent); } .plsel__numeros .label { color: var(--text-secondary); } .plsel__numeros small { color: var(--text-muted); font-size: var(--fs-2xs); } .plsel .convoc__aviso { margin: 0; text-align: center; } .plsel .convoc__aviso:empty, .plsel .convoc__aviso[hidden] { display: none; } .plsel__grilla { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.34fr); gap: var(--sp-4); } .plsel__t { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .plsel__rueda { flex: 1 1 auto; min-height: 0; overflow: auto; } /* --- la tabla --- */ .plsel__tabla, .plsel__tabla td, .plsel__tabla th[scope="row"] { font-size: var(--fs-md); } .plsel__quien { display: flex; align-items: center; gap: var(--sp-3); } .plsel__escudo { flex: none; width: 26px; height: 26px; object-fit: contain; } .plsel__quien-txt { display: grid; min-width: 0; line-height: 1.2; } .plsel__quien-txt b { font-weight: 600; color: var(--text-primary); white-space: nowrap; } .plsel__quien-txt small { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; white-space: nowrap; } .plsel__rol { color: var(--text-secondary); white-space: nowrap; font-size: var(--fs-sm); } .plsel__hab { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); } /* --- cómo es el grupo --- */ .plsel__perfil { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .plsel__perfil li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: var(--sp-3); } .plsel__perfil-nom { color: var(--text-secondary); font-size: var(--fs-sm); } .plsel__perfil b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; } .plsel__perfil-barra { display: block; height: 8px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .plsel__perfil-barra::before { content: ''; display: block; height: 100%; border-radius: inherit; background: var(--text-secondary); transform-origin: left center; transform: scaleX(var(--v, 0)); animation: pre-carga 500ms var(--ease) both; animation-delay: 180ms; } .plsel__perfil--alta .plsel__perfil-barra::before { background: var(--accent); } .plsel__perfil--alta b { color: var(--accent); } .plsel__perfil--baja .plsel__perfil-barra::before { background: var(--warn); } .plsel__perfil--baja b { color: var(--warn); } .plsel__nota { margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-body); } .plsel__rasgos { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .plsel__rasgos li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-secondary); } .plsel__rasgos b { color: var(--text-primary); font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .plsel__hero { grid-template-columns: minmax(0, 1fr); } .plsel__grilla { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .plsel .tarjeta, .plsel__bandera-img, .plsel__perfil-barra::before { animation: none; } } /* LA FILA DE LA PLANTILLA TIENE DOS RENGLONES —nombre y club— y la altura fija de `.data-table` los apretaba hasta pisarlos. Acá la fila mide lo que pide. */ .plsel__tabla tbody tr { height: auto; } .plsel__tabla td, .plsel__tabla th[scope="row"] { height: auto; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; } .plsel__quien-txt { gap: 2px; } /* EL PREDIO LLENA EL ALTO. Con dos tarjetas —lo que falta y cómo estás— la retícula ocupa lo que queda de la ventana y cada tarjeta se estira, en vez de dejar media pantalla negra debajo. */ .pre { max-height: var(--alto-pantalla-sel); min-height: var(--alto-pantalla-sel); } .pre__pendientes { gap: var(--sp-3); } .pre__pend { padding: var(--sp-4); } .pre__pend-que { font-size: var(--fs-md); } .pre__pend-ir { font-size: var(--fs-sm); } .pre__barra { height: 8px; } /* --- el Predio: dos tarjetas a la izquierda, los rivales a la derecha --- */ .pre__rival { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: 190ms; } .pre__rival + .pre__rival { animation-delay: 230ms; } .pre__rival-cab { display: flex; align-items: center; gap: var(--sp-3); } .pre__rival-quien { display: grid; flex: 1; min-width: 0; line-height: 1.15; } .pre__rival-quien b { color: var(--text-primary); font-size: var(--fs-lg); font-weight: 700; } .pre__rival-quien small { color: var(--text-muted); font-size: var(--fs-xs); text-transform: capitalize; } .pre__rival-figuras { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .pre__rival-figuras li { display: flex; align-items: center; gap: var(--sp-3); min-height: 34px; } .pre__rival-escudo { flex: none; width: 22px; height: 22px; object-fit: contain; } .pre__rival-figuras span { display: grid; flex: 1; min-width: 0; line-height: 1.15; } .pre__rival-figuras b { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pre__rival-figuras small { color: var(--text-muted); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pre__rival-figuras i { font-style: normal; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .pre__rival { animation: none; } } /* La retícula del Predio mide el alto que queda y no el de su contenido: si los rivales no entran, rueda su tarjeta y no la página. */ /* Y en ventanas bajas las dos tarjetas de la izquierda se aprietan antes que empujar la página: los medidores bajan su relleno y, si igual no entran, ruedan adentro de su tarjeta. */ @media (max-height: 860px) { .pre__pend { padding: var(--sp-3); } .pre__hero { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } } /* Las líneas del rival son las que HAY entre sus veintitrés mejores —muchas selecciones no meten un arquero ahí—, así que las casillas se reparten el ancho en vez de dejar una vacía. Y sólo va en mayúscula la primera letra: «Martes · en casa», no «Martes · En Casa». */ .pre__rival-quien small { text-transform: none; } .pre__rival-quien small::first-letter { text-transform: uppercase; } /* Scouting mide el alto que queda, como la Convocatoria y la Plantilla: con la escala del sitio en 0,92 (29/9/2026) a 1366 × 768 se pasaba ocho píxeles. */ .scsel { max-height: var(--alto-pantalla-sel); } .scsel__hero { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } /* ========================================================================== ENTRENAMIENTO, COMO EL RESTO DEL MODO (29/9/2026) -------------------------------------------------------------------------- La franja con la selección y el parte de la concentración arriba; abajo las tres columnas de siempre. La retícula de `.ent` pasa a `.entsel__grilla`. ========================================================================== */ .ent.entsel { display: flex; flex-direction: column; gap: var(--sp-3); height: auto; max-height: var(--alto-pantalla-sel); min-height: 0; } .entsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } .entsel__grilla { flex: 1; min-height: 0; /* La cancha manda: los costados se quedan con lo justo para leer y todo lo demás es campo, que es lo que se mira en esta pantalla. */ display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 3fr) minmax(14rem, 0.7fr); grid-template-rows: minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; } .entsel__grilla > .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .entsel__hero { position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: center; padding: var(--sp-3) var(--sp-6) var(--sp-3) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 45%, transparent 75%), var(--bg-panel); } .entsel__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .entsel__quien { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .entsel__bandera-img { display: block; width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } .entsel__ante { margin: 0; color: var(--text-secondary); } .entsel__titulo { margin: 0; color: var(--text-primary); font-size: clamp(1.8rem, 1.8vw + 0.6rem, 2.6rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; } .entsel__numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .entsel__numeros li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid rgb(255 255 255 / 0.1); } .entsel__numeros li:first-child { padding-left: 0; border-left: 0; } .entsel__numeros b { color: var(--text-primary); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; } .entsel__numeros .label { color: var(--text-secondary); } .entsel__primero b { color: var(--accent); } .entsel__mal b { color: var(--warn); } /* Con la columna angosta el «Limpiar» se salía del panel: el título cede y el botón se achica, pero los dos quedan en el mismo renglón. */ .entsel .ent__izq .panel__head { gap: var(--sp-2); min-width: 0; } .entsel .ent__izq .panel__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entsel .ent__izq .panel__head .action { flex: none; min-height: 0; padding: 4px var(--sp-3); font-size: var(--fs-xs); } /* Los rubros ensayados, como los medidores del Predio. */ .entsel .ent__rubros { gap: var(--sp-2); } .entsel .ent__rubro-n { font-size: var(--fs-sm); } .entsel .ent__rubro-barra { height: 6px; border-radius: var(--r-pill); } .entsel .ent__rubro-barra span { border-radius: inherit; background: var(--accent); animation: barra-crece 390ms var(--ease) both; transform-origin: left center; } @media (max-width: 1100px) { .entsel__hero { grid-template-columns: minmax(0, 1fr); } .entsel__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-3); } .entsel__numeros li:nth-child(4) { padding-left: 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .entsel .tarjeta, .entsel__bandera-img, .entsel .ent__rubro-barra span { animation: none; } } /* ========================================================================== PARTIDOS DEL MODO SELECCIÓN — LA FRANJA, EL AÑO Y LO QUE ESTÁ EN JUEGO -------------------------------------------------------------------------- La misma forma que El Predio, Scouting y Entrenamiento: la franja de la selección con las cifras del año arriba y, abajo, dos columnas. A la izquierda el año —la vía y la barra de lo que sigue—, que es lo que se mira; a la derecha lo que está en juego: la tabla de la confederación, la campaña y las giras. EL TOPE ES `max-height` Y NO `height`, con la cuenta de la escala del sitio: `100vh` es de la ventana y el `zoom` de `html` achica todo, así que sin dividir el tope quedaba corto de más en unas pantallas y largo en otras. ========================================================================== */ .parsel { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; max-height: var(--alto-pantalla-sel); } .parsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } .parsel__hero { position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-3) var(--sp-6) var(--sp-3) calc(var(--sp-6) + 8px); background: linear-gradient(100deg, color-mix(in srgb, var(--nac-a, var(--accent)) 26%, transparent), color-mix(in srgb, var(--nac-b, var(--accent)) 8%, transparent) 45%, transparent 75%), var(--bg-panel); } .parsel__hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg, var(--nac-a, var(--accent)) 0 50%, var(--nac-b, var(--accent)) 50% 100%); } .parsel__quien { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .parsel__bandera-img { display: block; width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 26px -14px #000; animation: pre-bandera 390ms var(--ease-entrada) both; animation-delay: 60ms; } .parsel__ante { margin: 0; color: var(--text-secondary); } .parsel__titulo { margin: 0; color: var(--text-primary); font-size: clamp(1.8rem, 1.8vw + 0.6rem, 2.6rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; } .parsel__numeros { display: grid; grid-template-columns: repeat(var(--cifras, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .parsel__numeros li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-4); border-left: 1px solid rgb(255 255 255 / 0.1); } .parsel__numeros li:first-child { padding-left: 0; border-left: 0; } .parsel__numeros b { color: var(--text-primary); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; } .parsel__numeros .label { color: var(--text-secondary); } .parsel__primero b { color: var(--accent); } .parsel__grilla { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(19rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; } .parsel__grilla > .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .parsel__lado { gap: var(--sp-3); } /* EL AÑO. La vía se queda con el alto que haya y rueda por dentro sólo en un año de Mundial, que trae nueve compromisos; la barra de lo que sigue va pegada al pie de la tarjeta, que es donde se termina de leer el año. */ /* LA VÍA NO SE ACHICA: es la pieza que manda. Si lo de abajo no entra —en un año de torneo, la lista de giras de tres ventanas libres— rueda la tarjeta entera y la barra de lo que sigue queda pegada al pie. */ .parsel__anio { overflow-y: auto; overscroll-behavior: contain; } .parsel__via { flex: none; } .parsel__anio .ahora { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -12px 16px -8px var(--bg-panel); } .parsel__via .via { padding: var(--sp-5) var(--sp-5) var(--sp-3); } .parsel__anio .ahora { flex: none; margin: auto 0 0; } .parsel__afuera { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-4); border-left: 2px solid var(--warn); background: var(--bg-raised); border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); } /* CADA PARTIDO, UN MARCADOR. En esta columna ancha los cruces dejan de ser renglones bajo una raya y pasan a ser el tablero de un partido: fondo propio, los dos equipos en grande, el día o el resultado a la derecha y la lectura abajo. Son lo que se viene a leer a esta pantalla. */ .parsel .via__cruces { display: grid; gap: var(--sp-3); } .parsel .via__cruce { padding: var(--sp-3) var(--sp-4); row-gap: var(--sp-1); border: 1px solid var(--line-hairline); border-top: 0; border-radius: var(--r-md); background: var(--bg-raised); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } @media (hover: hover) { .parsel .via__cruce:hover { border-color: var(--line-strong); background: var(--bg-hover); } } .parsel .via__que { margin-bottom: var(--sp-3); } .parsel .parts__eq { font-size: var(--fs-md); } .parsel .parts__eq-niv { font-size: var(--fs-md); color: var(--text-primary); } .parsel .parts__pano { width: 33px; height: 22px; } .parsel .via__cuando b { font-size: var(--fs-lg); } /* EL CICLO, en la cabecera del año: cuatro años en fila, el de hoy encendido y cada torneo en el color de lo que es. */ .parsel__ciclo { display: flex; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; } .parsel__ciclo-a { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; color: var(--text-muted); font-size: var(--fs-xs); } .parsel__ciclo-a b { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-secondary); } .parsel__ciclo-a--mundial span, .parsel__ciclo-a--continental span { color: var(--verde-300); } .parsel__ciclo-a--hoy b { color: var(--text-primary); } .parsel__ciclo-a--hoy span { color: var(--accent-texto); } /* LO QUE ESTÁ EN JUEGO. En esta columna la tabla va de a una fila por selección —ya no en cinco columnas—, así que la raya de las plazas vuelve: con una sola columna cae exactamente debajo del último que entra. */ .parsel__conf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .parts__conf-donde { color: var(--accent-texto); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; } /* LAS FILAS REPARTEN EL ALTO, CON TOPE. Once selecciones llenan la columna a unos 40 px por fila; cincuenta de la UEFA bajan al alto mínimo de tabla y la lista rueda. El tope evita la fila de 90 px de una confederación chica. */ .parsel .parts__conf--lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; margin: 0 0 var(--sp-3); padding: 0 var(--sp-1) 0 0; } .parsel .parts__conf-f { flex: 1 0 var(--fila-tabla); max-height: 2.75rem; height: auto; } .parsel .parts__conf-f { font-size: var(--fs-md); animation: pre-entra 200ms var(--ease-entrada) both; animation-delay: calc(100ms + min(var(--i, 0), 14) * 20ms); } .parsel .parts__conf-n { font-weight: 700; color: var(--text-primary); padding-right: var(--sp-2); } .parts__conf-raya { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; color: var(--accent-texto); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; } .parts__conf-raya::before, .parts__conf-raya::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); } .parsel .parts__pie { margin: 0; } .parsel__pie { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) var(--sp-7); margin: var(--sp-4) 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-hairline); } .parsel__pie .parts__vacio { margin: 0; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--text-secondary); } /* EN UNA VENTANA BAJA —1366×768— la columna del año no entraba: el segundo partido de cada ventana quedaba cortado. Se aprietan los márgenes y la tira de la campaña se queda con bandera y resultado; el mes y el día siguen en la pista de cada casillero. */ @media (max-height: 820px) { .parsel__via .via { padding-top: var(--sp-2); padding-bottom: 0; } .parsel .via__cruces { gap: var(--sp-2); } .parsel .via__cruce { padding: var(--sp-2) var(--sp-3); } .parsel .via__que { margin-bottom: var(--sp-2); } .parsel__pie { margin: var(--sp-2) 0; padding-top: var(--sp-2); gap: var(--sp-2); } .parsel__casilla { padding: var(--sp-2); grid-template-columns: auto auto; align-items: center; gap: var(--sp-2); } .parsel__casilla .label { display: none; } .parsel__pelea-cifras b { font-size: var(--fs-lg); } } @media (max-width: 1100px) { .parsel__hero { grid-template-columns: minmax(0, 1fr); } .parsel__grilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .parsel { max-height: none; } } @media (prefers-reduced-motion: reduce) { .parsel .tarjeta, .parsel__bandera-img, .parsel .parts__conf-f { animation: none; } } /* La lectura de cada cruce: una tercera fila, debajo de los dos equipos. */ .via__lectura { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); } .via__lectura::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-2); border-radius: 50%; background: currentColor; vertical-align: 1px; } .via__lectura--fav, .via__lectura--gano { color: var(--verde-300); } .via__lectura--parejo, .via__lectura--empato { color: var(--text-secondary); } .via__lectura--abajo, .via__lectura--pierdo { color: var(--warn); } /* LA TIRA DE LA CAMPAÑA: un casillero por partido, todos del mismo ancho. */ .parsel__tira { display: grid; grid-template-columns: repeat(var(--casilleros, 8), minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .parsel__casilla { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: var(--sp-3) var(--sp-2); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-muted); text-align: center; animation: pre-entra 200ms var(--ease-entrada) both; animation-delay: calc(120ms + var(--i, 0) * 20ms); } .parsel__casilla .parts__pano { opacity: 0.55; } .parsel__casilla .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .parsel__casilla--proxima { border-style: solid; border-color: var(--nacion-tinta, var(--accent)); } .parsel__casilla--proxima .parts__pano { opacity: 1; } .parsel__casilla--g, .parsel__casilla--e, .parsel__casilla--p { border-style: solid; background: var(--bg-raised); } .parsel__casilla--g .parts__pano, .parsel__casilla--e .parts__pano, .parsel__casilla--p .parts__pano { opacity: 1; } .parsel__casilla--g { border-color: color-mix(in srgb, var(--verde-400) 60%, transparent); } .parsel__casilla--p { border-color: color-mix(in srgb, var(--warn) 60%, transparent); } @media (prefers-reduced-motion: reduce) { .parsel__casilla { animation: none; } } /* LA TABLA DE LA ELIMINATORIA: dos columnas chicas (PJ, DG) antes de los puntos, y su cabecera alineada con ellas. */ .parts__conf-c { flex: none; width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-sm); } .parsel .parts__conf-f .parts__eq-n { flex: 1 1 auto; } .parsel .parts__conf-n { flex: none; margin-left: 0; width: 2.6rem; text-align: right; } /* Los goles de un cruce jugado, uno por renglón, en el carril del día. */ .via__gol { grid-column: 3; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; } .via__gol--l { grid-row: 1; } .via__gol--v { grid-row: 2; } .via__gol--gana { color: var(--text-primary); } .parts__conf-cols { display: flex; justify-content: flex-end; padding: 0 calc(var(--sp-2) + var(--sp-1)) var(--sp-1) 0; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .parts__conf-cols span { width: 2.2rem; text-align: right; } .parts__conf-cols span:first-child { width: auto; flex: 1; } .parts__conf-cols span:last-child { width: 2.6rem; } /* LA PELEA POR LA RAYA: tres cifras en fila, con la forma de la franja. */ .parsel__pelea-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .parsel__pelea-cifras li { display: grid; gap: 2px; min-width: 0; padding: 0 var(--sp-5); border-left: 1px solid var(--line-hairline); } .parsel__pelea-cifras li:first-child { padding-left: 0; border-left: 0; } .parsel__pelea-cifras b { font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text-primary); } .parsel__pelea-cifras .label { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parsel__bien b { color: var(--verde-300); } .parsel__mal b { color: var(--warn); } /* EL CUADRO: las llaves que quedan, una por renglón, hasta que tengan rival. */ .via__llaves { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; } .via__llaves li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-secondary); } .via__llaves b { color: var(--text-primary); } .via__llaves span { color: var(--text-muted); white-space: nowrap; } .parsel .via__cruces > .label { white-space: normal; } /* LAS VENTANAS LIBRES, UNA POR RENGLÓN: el mes a la izquierda y las dos opciones como botones chicos; lo que implica cada una va en la pista. */ .parsel .parts__plan { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; } .parsel .parts__plan-cab { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; } .parsel .parts__ops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); } .parsel .parts__op { display: flex; align-items: center; justify-content: center; min-height: 0; padding: var(--sp-2) var(--sp-3); text-align: center; } .parsel .parts__op strong { font-size: var(--fs-sm); white-space: nowrap; } .parsel .parts__caja { margin-top: var(--sp-2); } /* Las giras, en la columna de la derecha: tarjeta de su alto, debajo de la tabla, que es la que rueda si no entra. */ .parsel__giras { flex: none; } .parsel__giras[hidden] { display: none; } .parsel__giras .parts__plan:first-child { border-top: 0; } /* ========================================================================== DÍA DE PARTIDO DEL MODO SELECCIÓN — EL CRUCE ARRIBA, EL EQUIPO ABAJO -------------------------------------------------------------------------- La misma forma que Partidos: franja arriba, tres columnas abajo, tope de alto con la escala del sitio. La franja ES el cruce —tus colores entran por la izquierda y los del rival por la derecha— con el botón a un costado; la cancha se queda con el centro y todo el ancho que dejan las columnas. ========================================================================== */ .dsel { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; max-height: var(--alto-pantalla-sel); } .dsel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } /* LO DESTACADO AL MEDIO (30/9/2026): el botón iba en una columna a la derecha y corría el «vs» ciento cincuenta píxeles del centro de la franja. Ahora la franja es una sola columna y el botón cuelga debajo del cruce, centrado. */ .dsel__hero { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 0; overflow: hidden; position: relative; } .dsel__hero .dia__cruce { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: none; margin: 0; border: 0; border-radius: 0; padding: var(--sp-3) var(--sp-6); } .dsel__hero .dia__cruce::before { display: none; } .dsel__hero .dia__lado--local, .dsel__hero .dia__lado--visita { grid-area: auto; } .dsel__hero .dia__insignia { width: 64px; height: 64px; } .dsel__hero .dia__escudo { height: 54px; } .dsel__hero .dia__pano { width: 54px; height: 36px; } .dsel__hero .dia__nombre { font-size: clamp(1.4rem, 1.2vw + 0.8rem, 2rem); text-transform: uppercase; } .dsel__centro { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; } .dsel__hero .dia__marcador { grid-area: auto; font-size: 2.4rem; padding: 0; } .dsel__hero .dia__contexto { grid-area: auto; white-space: nowrap; } .dsel__antes { color: var(--text-muted); } .dsel__llega { grid-row: auto; margin: 0; font-size: var(--fs-sm); } .dsel__cta { position: absolute; left: 50%; bottom: var(--sp-3); transform: translateX(-50%); } .dsel__cta .dia__mandos { display: grid; justify-items: center; gap: var(--sp-1); margin: 0; padding: 0; border: 0; } .dsel__cta-pie { color: var(--text-muted); white-space: nowrap; } .dsel__cta .convoc__aviso { max-width: 26rem; margin: 0; text-align: center; } .dsel__hero .dia__cruce { padding-bottom: calc(var(--sp-3) + 3.2rem); } .dsel__hero .dia__quieto { padding: var(--sp-4) var(--sp-6); } .dsel__grilla { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2.4fr) minmax(16rem, 0.95fr); grid-template-rows: minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; } .dsel__grilla > .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .dsel__lado { gap: var(--sp-3); } .dsel__cuenta { color: var(--accent-texto); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* TUS VEINTITRÉS: una sola columna que rueda por dentro. */ .dsel__lista .dsel__grupos { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: block; columns: auto; padding-right: var(--sp-1); } .dsel__lista .dia__grupo { break-inside: avoid; margin-bottom: var(--sp-2); } .dsel__lista .dia__quien-btn { font-size: var(--fs-sm); } /* LA CANCHA: contenedor con tamaño y el tablero pidiendo el lado que le toque —la misma cuenta que Entrenamiento—, así entra entera y lo más grande que pueda en cualquier ventana. */ .dsel__campo-caja { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; } .dsel .dsel__campo { height: auto; max-width: none; margin: 0; width: min(100cqw, calc(100cqh * 105 / 68)); aspect-ratio: 105 / 68; } .dsel__pista { flex: none; margin: var(--sp-2) 0 0; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); } /* EL PLANTEO Y EL RIVAL, a la derecha: el planteo de su alto, el rival con el resto y rodando si no entra. */ .dsel__planteo { flex: none; } .dsel__planteo .dia__planteo-cuerpo { padding-top: var(--sp-2); } .dsel__rival { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dsel__rival .panel__title { display: flex; align-items: center; gap: var(--sp-2); } .dsel__rival-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: block; margin: 0; padding: 0; } .dsel__rival-lista .dia__jug { font-size: var(--fs-sm); } .dsel__nota { flex: none; margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-body); } @media (max-width: 1100px) { .dsel { max-height: none; } .dsel__hero { grid-template-columns: minmax(0, 1fr); } .dsel__cta { padding: 0 var(--sp-6) var(--sp-4); } .dsel__cta .dia__mandos { justify-items: stretch; } .dsel__grilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .dsel__campo-caja { container-type: normal; } .dsel .dsel__campo { width: 100%; } } @media (prefers-reduced-motion: reduce) { .dsel .tarjeta { animation: none; } } /* EL PLANTEO EN RENGLONES: rótulo a la izquierda y desplegable a la derecha. Apilados eran ocho renglones y el once del rival se quedaba con cinco a la vista en 1366×768. */ .dsel__planteo .dia__mando { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-3); } .dsel__planteo .dia__mando select { min-width: 0; } /* CUATRO SOLAPAS EN CUATRO COLUMNAS IGUALES: en una sola fila se salían de la tarjeta y corrían la página de costado. */ .dsel__planteo .dia__solapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dsel__planteo .dia__solapa { white-space: normal; text-align: center; line-height: 1.2; font-size: var(--fs-2xs); padding-inline: var(--sp-1); min-width: 0; } @media (max-height: 820px) { .dsel__hero .dia__cruce { padding-block: var(--sp-2); } .dsel__hero .dia__marcador { font-size: 2rem; } .dsel__pista { display: none; } .dsel__rival-lista .dia__jug { padding-block: 1px; } } /* LOS DOS BOTONES DE LA CANCHA: armar todo o limpiar todo. */ .dsel__acciones { display: flex; gap: var(--sp-2); } /* Qué hace la opción puesta, debajo del desplegable, en el ancho entero. */ .dsel__desc { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; } .dsel__desc::first-letter { text-transform: uppercase; } .dsel__planteo .dia__planteo-cuerpo { display: grid; gap: var(--sp-2); } /* EL PRONÓSTICO: una barra en tres tramos —verde, gris, cálido— y las cifras. */ .dsel__pron { flex: none; display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); } .dsel__pron-barra { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-800); } .dsel__pron-barra i { display: block; height: 100%; transform-origin: left center; animation: barra-crece 390ms var(--ease) both; } .dsel__pron-g { background: var(--verde-400); } .dsel__pron-e { background: var(--line-strong); } .dsel__pron-p { background: var(--warn); } .dsel__pron-cifras { color: var(--text-secondary); font-size: var(--fs-xs); } .dsel__pron-cifras b { color: var(--text-primary); font-variant-numeric: tabular-nums; } /* SIN LISTA: el pedido ocupa el lugar de la grilla. */ .dsel__falta:not([hidden]) { flex: 1 1 auto; display: grid; align-content: center; justify-items: center; gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); text-align: center; } .dsel__falta-titulo { margin: var(--sp-1) 0 var(--sp-2); font-size: clamp(1.8rem, 1.6vw + 0.8rem, 2.6rem); font-weight: 700; line-height: 1; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); } .dsel__falta-txt p:last-child { margin: 0; color: var(--text-secondary); } .dsel__falta-lineas { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .dsel__falta-lineas li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raised); } .dsel__falta-lineas b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; } .dsel__falta--ok b { color: var(--verde-300); } .dsel__falta--corta { border-color: color-mix(in srgb, var(--warn) 60%, transparent) !important; } .dsel__falta--corta b { color: var(--warn); } .dsel__falta-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); } .dsel__grilla[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .dsel__pron-barra i { animation: none; } } /* ========================================================================== LAS ELIMINATORIAS DEL MUNDO — seis tablas en tres columnas, la franja de siempre arriba. Cada tabla rueda por dentro; la tuya lleva el borde. ========================================================================== */ .mundosel { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; max-height: var(--alto-pantalla-sel); } .mundosel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 30ms); } .mundosel__globo { width: 52px; height: 52px; color: var(--nac-a, var(--accent)); } /* Las cifras de la franja, juntas a la derecha: repartidas en todo el ancho quedaban sueltas, lejos del título y entre sí. */ .mundosel__hero { grid-template-columns: minmax(0, 1fr) auto; } .mundosel__hero .parsel__numeros { grid-template-columns: repeat(var(--cifras, 4), auto); } .mundosel__hero .parsel__numeros li { padding: 0 var(--sp-6); } .mundosel__hero .parsel__numeros li:last-child { padding-right: 0; } /* LA PANTALLA POR CONFEDERACIÓN (1/10/2026, los formatos reales; rehecha el mismo día: «más respiro, menos mezcla y amontonamiento»). Tres niveles que no se parecen entre sí: las confederaciones como pestañas subrayadas, las rondas como un recorrido numerado, y el contenido. Lo que acompaña —cómo se juega, tu selección, quiénes van— va al costado. */ .mundosel__grilla { flex: 1; min-height: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'tabs tabs' 'conf lado'; } /* 1 · LAS CONFEDERACIONES: texto, un subrayado y nada de cajas. */ .mundo__tabs { grid-area: tabs; display: flex; justify-content: center; gap: var(--sp-2); border-bottom: 1px solid var(--line-hairline); padding: 0 var(--sp-4); } .mundo__tabs button { display: grid; justify-items: center; gap: 2px; min-width: 7.5rem; padding: var(--sp-1) var(--sp-4) var(--sp-2); border: 0; background: none; position: relative; font: inherit; color: var(--text-secondary); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .mundo__tabs button b { display: inline-flex; align-items: center; gap: 6px; height: 34px; font-size: var(--fs-lg); font-weight: 700; } /* LOS LOGOS DE LAS CONFEDERACIONES (1/10/2026), en blanco: en color eran seis paletas distintas —el negro de la UEFA y el marrón de la CAF no se ven sobre el fondo oscuro— y en blanco se leen como una sola familia. La de ahora a pleno; las otras, apagadas. Cada uno trae su nombre escrito, así que el logo ES el rótulo; el `alt` lo dice para el que no lo ve. */ .mundo__tab-logo { display: block; height: 24px; width: auto; max-width: 6.5rem; object-fit: contain; align-self: center; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease); } /* LOS EMBLEMAS ALTOS —escudo o sol con el nombre abajo— llevan su alto de verdad dentro de una fila de 34: agrandarlos con `scale` los sacaba por arriba de la pestaña («se salen un poco»). */ .mundo__tab-logo--conmebol, .mundo__tab-logo--concacaf { height: 34px; } .mundo__tab-logo--ofc { height: 28px; } .mundo__tab-logo--caf { height: 18px; } .mundo__tabs button:hover .mundo__tab-logo { opacity: 0.8; } .mundo__tabs button[aria-selected="true"] .mundo__tab-logo { opacity: 1; } .mundo__tabs button { gap: var(--sp-1); grid-template-rows: 34px auto; align-items: center; } /* Tu confederación: el punto va en la esquina del logo. */ .mundo__tab--mia { position: relative; } .mundo__tab--mia::before { content: ''; position: absolute; top: var(--sp-2); right: var(--sp-2); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: mun-latido 2.4s ease-in-out infinite; } .mundo__tabs button span { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .mundo__tabs button:hover { color: var(--text-primary); background: color-mix(in srgb, var(--bg-raised) 50%, transparent); } .mundo__tabs button::after { content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transition: transform 260ms var(--ease-entrada); } .mundo__tabs button:hover::after { transform: scaleX(0.35); opacity: 0.5; } .mundo__tabs button[aria-selected="true"] { color: var(--text-primary); } .mundo__tabs button[aria-selected="true"]::after { transform: scaleX(1); opacity: 1; } .mundo__tabs button[aria-selected="true"] span { color: var(--accent-texto); } /* La tuya: un punto antes del nombre, no después, para que el centro no se corra. */ .mundo__tabs button:focus-visible, .mundo__pasos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 2 · LAS RONDAS: un recorrido. */ .mundo__conf { grid-area: conf; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); } .mundo__pasos { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .mundo__pasos li { display: flex; align-items: center; gap: var(--sp-2); } .mundo__pasos li + li::before { content: '›'; color: var(--text-muted); font-size: var(--fs-lg); } .mundo__pasos button { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border: 0; border-radius: var(--r-pill); background: none; font: inherit; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--dur-fast) var(--ease); } .mundo__pasos button:hover { background: var(--bg-raised); } .mundo__paso-n { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 700; font-size: var(--fs-sm); } .mundo__paso-t { display: grid; } .mundo__paso-t b { font-size: var(--fs-sm); color: var(--text-primary); } .mundo__paso-t small { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .mundo__pasos button[aria-pressed="true"] { background: var(--bg-raised); } .mundo__pasos button[aria-pressed="true"] .mundo__paso-n { background: var(--accent); border-color: var(--accent); color: var(--ink-950); } /* 3 · EL CONTENIDO. */ .mundo__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* EL ALTO LO REPARTE EL CONTENEDOR Y NO UN 100 %: en WebKit un `min-height: 100%` adentro de una caja con rueda no se resuelve. */ display: flex; flex-direction: column; } .mundo__vacio { margin: auto; max-width: 28rem; text-align: center; color: var(--text-muted); } .mundo__grupos { display: grid; gap: var(--sp-3); flex: 1 0 auto; --fila-letra: clamp(0.8125rem, 1.5vh, 1.0625rem); --fila-bandera: clamp(18px, 2.3vh, 28px); grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--filas, 3), minmax(min-content, 1fr)); } .mundo__grupos--uno { grid-template-columns: minmax(0, 46rem); justify-content: center; } .mundo__mia { background: var(--accent-wash); color: var(--text-primary) !important; font-weight: 700; } .mundo__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mundo__pano { display: block; height: var(--fila-bandera, 20px); width: calc(var(--fila-bandera, 20px) * 1.5); object-fit: cover; border-radius: var(--r-xs); flex: none; box-shadow: 0 0 0 1px var(--line-hairline); } .mundo__pano--sin { background: var(--ink-700); } .mundo__pano--escudo { object-fit: contain !important; box-shadow: none !important; } /* LAS LLAVES, COMO EN UN CUADRO: tarjetas de ancho fijo, centradas. */ .mundo__cruces { /* LAS LLAVES SUELTAS, COMO CRUCES: una o dos columnas de renglones anchos que crecen hasta llenar el alto (con techo, para que una sola no sea un cartel). Diez llaves: dos columnas de cinco; cinco o menos: una. */ flex: 1 0 auto; display: grid; width: 100%; margin: 0 auto; max-width: calc(var(--cols, 1) * 52rem + (var(--cols, 1) - 1) * var(--sp-6)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(4rem, 5.25rem); gap: var(--sp-4) var(--sp-6); align-content: center; } .mundo__cruces .mundo__llaves-nota { grid-row: auto; align-self: end; } .mundo__cruce { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 8rem minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: 0 0 0 1px var(--line-hairline); } .mundo__cruce--mia { box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised)); } .mundo__cruce-n { white-space: nowrap; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .mundo__cruce-eq { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: var(--fs-lg); color: var(--text-secondary); } .mundo__cruce-eq--a { flex-direction: row-reverse; text-align: right; } .mundo__cruce-eq .mundo__pano { width: 48px; height: 32px; flex: none; } .mundo__cruce-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mundo__cruce-eq--gana { color: var(--text-primary); font-weight: 700; } .mundo__cruce-eq--mia .mundo__cruce-nom { color: var(--accent-texto); font-weight: 700; } .mundo__cruce-marcador { display: grid; justify-items: center; gap: 2px; } .mundo__cruce-marcador b { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; } .mundo__cruce-marcador b i { font-style: normal; color: var(--text-muted); padding: 0 0.15em; } .mundo__cruce-marcador b .mundo__cruce-vs { font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 0; } .mundo__cruce-marcador small { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .mundo__llave { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: 0 0 0 1px var(--line-hairline); } .mundo__llave--vacia { background: transparent; box-shadow: 0 0 0 1px var(--line-hairline) inset; } .mundo__ll-fila--vacia .mundo__nom { color: var(--text-muted); font-size: var(--fs-sm); } .mundo__ll-fila--vacia .mundo__pano { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--r-xs); } .mundo__llave--mia { box-shadow: inset 0 0 0 1px var(--accent); } .mundo__llave header, .mundo__ll-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(var(--goles, 1), 2.6rem); align-items: center; gap: var(--sp-3); } .mundo__llave header { grid-template-columns: minmax(0, 1fr) repeat(var(--goles, 1), 2.6rem); padding: 0 var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--line-hairline); margin-bottom: var(--sp-1); } .mundo__llave header span { font-size: var(--fs-2xs); color: var(--text-muted); } .mundo__llave header span b { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .mundo__llaves-nota { grid-column: 1 / -1; margin: 0 0 var(--sp-1); text-align: center; font-size: var(--fs-md); color: var(--text-secondary); } .mundo__llave header i { font-style: normal; text-align: center; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .mundo__gana { box-shadow: inset 3px 0 0 var(--accent); } /* EL CUADRO: una columna por ronda; cada par de llaves se une con la que sale de ellas con una línea en forma de corchete. Las columnas reparten el alto con `space-around`, así la final queda a la altura de sus dos semifinales. */ .cuadros { flex: 1 0 auto; display: grid; gap: var(--sp-5); align-content: center; justify-content: center; } .cuadros--varios { grid-template-columns: repeat(2, auto); align-content: space-evenly; } .cuadro { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg, var(--r-md)); } .cuadros--varios .cuadro { background: color-mix(in srgb, var(--bg-raised) 40%, transparent); } .cuadro__camino { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } .cuadro__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 22rem); } .cuadro__col { display: flex; flex-direction: column; min-height: 0; padding: 0 var(--sp-6); } .cuadro__col:first-child { padding-left: 0; } .cuadro__col--ultima { padding-right: 0; } .cuadro__tit { margin: 0 0 var(--sp-3); text-align: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .cuadro__cartas { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: var(--sp-3); } .cuadro__par { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: var(--sp-3); flex: 1 1 0; } .cuadro__celda { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; } /* El trazo que sale de cada llave hacia la derecha… */ .cuadro__col:not(.cuadro__col--ultima) .cuadro__celda::after { content: ''; position: absolute; top: 50%; right: calc(var(--sp-6) * -1); width: var(--sp-6); height: 1px; background: var(--line-strong); } /* …el corchete que junta las dos del par… */ .cuadro__par--une::after { content: ''; position: absolute; right: calc(var(--sp-6) * -1); top: 25%; bottom: 25%; width: 1px; background: var(--line-strong); } /* …y el trazo que entra a la llave de la columna siguiente. */ .cuadro__col + .cuadro__col .cuadro__celda::before { content: ''; position: absolute; top: 50%; left: calc(var(--sp-6) * -1); width: var(--sp-6); height: 1px; background: var(--line-strong); } .mundo__ll-fila { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--text-secondary); } .mundo__ll-fila .mundo__pano { width: 36px; height: 24px; } .mundo__ll-n { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .mundo__ll-t { color: var(--text-primary); font-size: var(--fs-lg); } .mundo__gana { color: var(--text-primary); font-weight: 700; } .mundo__gana .mundo__ll-n { color: var(--text-primary); } .mundo__pierde { opacity: 0.5; } /* 4 · AL COSTADO. */ .mundo__lado-fuerte { font-size: var(--fs-lg) !important; font-weight: 700; color: var(--text-primary) !important; } .mundo__lado-estado { font-size: var(--fs-2xs) !important; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto) !important; } .mundo__lado-tuya { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md) !important; color: var(--text-primary) !important; } .mundo__lado-como { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line-hairline); } .mundo__lado-como p { font-size: var(--fs-xs); color: var(--text-muted); } .mundo__van { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 0; padding: 0; list-style: none; } .mundo__van li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-primary); } /* DEBAJO DE 1600 EL COSTADO BAJA a una franja: los doce grupos de la UEFA necesitan el ancho para que no se corten los nombres. */ @media (max-width: 1600px) { .mundosel__grilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tabs' 'conf' 'lado'; grid-template-rows: auto minmax(0, 1fr) auto; } .mundo__lado-como { margin-top: 0; padding-top: 0; border-top: 0; } } @media (max-width: 1100px) { .mundosel { max-height: none; } .mundo__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .mundo__tabs { overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { .mundosel .tarjeta { animation: none; } } /* ========================================================================== LA OFICINA DEL MODO — la franja, y abajo el ciclo, la campaña y el recorrido con la salida aparte. Misma forma que Fixture y Día de partido. ========================================================================== */ .ofi.ofisel { gap: var(--sp-3); min-height: 0; flex: 1 1 auto; max-height: var(--alto-pantalla-sel); } .ofisel .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } /* EL CICLO: cuatro años, cada uno con su año y torneo, lo que se pide y el estado en un color: verde cumplido, rojo en contra, acento en juego. */ .ofisel__anos { flex: 1 1 auto; display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; min-height: 0; } .ofisel__ano { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--sp-1) var(--sp-4); align-content: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-hairline); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-raised); animation: pre-entra 200ms var(--ease-entrada) both; animation-delay: calc(100ms + var(--i, 0) * 30ms); } .ofisel__ano--hoy { border-color: var(--line-strong); border-left-color: var(--nac-a, var(--accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .ofisel__ano-n { grid-row: 1 / span 2; display: grid; align-content: center; gap: 2px; } .ofisel__ano-n b { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } .ofisel__ano--mundial .ofisel__ano-n .label, .ofisel__ano--continental .ofisel__ano-n .label { color: var(--verde-300); } .ofisel__ano-que { display: grid; gap: 2px; min-width: 0; } .ofisel__ano-que b { font-size: var(--fs-lg); color: var(--text-primary); } .ofisel__ano-det { color: var(--text-muted); font-size: var(--fs-xs); } .ofisel__estado { justify-self: start; padding: 2px var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--ink-800); color: var(--text-secondary); } .ofisel__ano--bien .ofisel__estado { background: color-mix(in srgb, var(--verde-400) 22%, transparent); color: var(--verde-300); } .ofisel__ano--mal .ofisel__estado { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .ofisel__ano--vivo .ofisel__estado { background: var(--accent-wash); color: var(--accent-texto); } .ofisel__ano--bien { border-left-color: var(--verde-400); } .ofisel__ano--mal { border-left-color: var(--warn); } /* LA CAMPAÑA: tabla por competencia, la forma en fichas y los dos extremos. */ .ofisel__campana > [data-f="ofi-campana"] { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; } .ofisel__tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ofisel__tabla th, .ofisel__tabla td { padding: var(--sp-2) var(--sp-2); text-align: right; border-bottom: 1px solid var(--line-hairline); } .ofisel__tabla thead th { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .ofisel__tabla tbody th { text-align: left; font-weight: 600; color: var(--text-primary); } .ofisel__tabla td { color: var(--text-secondary); } .ofisel__extremos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: auto; } .ofisel__extremo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); } .ofisel__extremo .label { flex-basis: 100%; white-space: normal; } .ofisel__extremo span:not(.label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofisel__extremo b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1.15; } .ofisel__nada { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } /* EL RECORRIDO: las selecciones dirigidas y los torneos. */ .ofisel__recorrido { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ofisel__recs, .ofisel__copas { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; } .ofisel__rec { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px var(--sp-3); align-items: center; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); } .ofisel__rec--hoy { box-shadow: inset 3px 0 0 var(--nac-a, var(--accent)); } .ofisel__rec-pano { grid-row: 1 / span 2; width: 42px; height: 28px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); } .ofisel__rec-txt { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; } .ofisel__rec-txt b { color: var(--text-primary); } .ofisel__rec-bal { color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .ofisel__copa { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-hairline); } .ofisel__copa b { font-variant-numeric: tabular-nums; } .ofisel__copa-llego { color: var(--text-secondary); font-size: var(--fs-sm); } .ofisel__copa--campeon .ofisel__copa-llego { color: var(--accent-texto); font-weight: 700; } @media (max-width: 1100px) { .ofi.ofisel { max-height: none; } } @media (prefers-reduced-motion: reduce) { .ofisel .tarjeta, .ofisel__ano { animation: none; } } /* PARTIDO POR PARTIDO: cuándo, rival y resultado, en una lista que rueda. */ .ofisel__pps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--sp-1); margin: 0; padding: 0 var(--sp-1) 0 0; list-style: none; } .ofisel__pp { display: grid; grid-template-columns: 7rem auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); border-left: 3px solid var(--line-strong); animation: pre-entra 180ms var(--ease-entrada) both; animation-delay: calc(100ms + min(var(--i, 0), 12) * 20ms); } .ofisel__pp--g { border-left-color: var(--verde-400); } .ofisel__pp--p { border-left-color: var(--warn); } .ofisel__pp-cuando { display: grid; font-size: var(--fs-sm); color: var(--text-secondary); } .ofisel__pp-rival { display: grid; min-width: 0; } .ofisel__pp-rival b { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofisel__pp-res { display: flex; align-items: baseline; gap: var(--sp-2); font-variant-numeric: tabular-nums; } .ofisel__campana { overflow: hidden; } .ofisel__campana > [data-f="ofi-campana"] { flex: 1 1 auto; } .ofisel__records { flex: none; } .ofisel__records .ofisel__extremos { margin: 0; } @media (prefers-reduced-motion: reduce) { .ofisel__pp { animation: none; } } /* LA FECHA CENTRADA EN SU CAJA y los atajos un escalón más grandes (30/9/2026). Sólo en el modo: la barra del club no cambia. */ .en-modo-seleccion .clock { justify-items: center; text-align: center; } .en-modo-seleccion .clock__comp, .en-modo-seleccion .clock__date { text-align: center; } .en-modo-seleccion .chrome__util { width: 38px; height: 38px; } .en-modo-seleccion .chrome__util .i { width: 22px; height: 22px; } .en-modo-seleccion .buscador-global { height: 38px; font-size: var(--fs-md); } .en-modo-seleccion .buscador-global .i { width: 18px; height: 18px; } /* EL BUSCADOR CON SU TEXTO: la barra del club lo achica a la lupa debajo de 1760 px porque ahí no le entra; en el modo, con el nombre corto del país, sobra lugar desde 1200. */ @media (min-width: 1200px) and (max-width: 1760px) { .en-modo-seleccion .buscador-global { width: 176px; padding: 0 var(--sp-5); justify-content: flex-start; } .en-modo-seleccion .buscador-global__txt { display: inline; } } /* EL HALO DEL MODO: el mismo de la barra del club, centrado detrás de la insignia y con la máscara redonda —se desvanece hacia los dos lados, porque a su izquierda está el nombre y a su derecha la barra—. Una bandera es más ancha que alta, así que se la cubre en vez de contenerla. */ .en-modo-seleccion .chrome__row--primary { position: relative; overflow: hidden; } .en-modo-seleccion .chrome__row--primary > :not(.chrome__halo) { position: relative; z-index: 1; } .chrome__halo--modo { left: 0; width: 230px; height: 230px; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); } /* Llegando desde el trofeo de la barra, el recorrido se enciende una vez. */ .ofisel__recorrido:target { animation: recorrido-aqui 1.4s var(--ease-entrada) 160ms both; } @keyframes recorrido-aqui { 0% { box-shadow: 0 0 0 0 var(--accent); } 30% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .ofisel__recorrido:target { animation: none; box-shadow: 0 0 0 2px var(--accent); } } /* ========================================================================== DÍA DE PARTIDO DE UNA SELECCIÓN — el cruce, la ceremonia y lo que está en juego. La franja se tiñe con los dos colores entrando cada uno por su lado. La ceremonia se mudó a la cancha del partido (`partido-seleccion.css`). ========================================================================== */ .dp { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; max-height: var(--alto-pantalla-sel); } .dp .tarjeta { animation: pre-entra 230ms var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 40ms); } .dp__hero { flex: none; overflow: hidden; padding: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--dp-local, #444) 38%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--dp-visita, #444) 38%, transparent)), var(--bg-panel); } .dp__cruce { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-7); } .dp__lado { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .dp__lado--visita { flex-direction: row-reverse; text-align: right; } .dp__bandera { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 14px 30px -14px #000; transform-origin: left center; animation: dp-flamea 3.6s ease-in-out infinite; } .dp__lado--visita .dp__bandera { transform-origin: right center; animation-delay: -1.8s; } @keyframes dp-flamea { 0%, 100% { transform: perspective(300px) rotateY(0deg) skewY(0deg); } 50% { transform: perspective(300px) rotateY(-7deg) skewY(-1.5deg); } } .dp__nombre { font-size: clamp(1.6rem, 1.4vw + 0.9rem, 2.4rem); font-weight: 700; line-height: 0.95; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); } .dp__lado--mio .dp__nombre { color: var(--seleccion-tinta, var(--text-primary)); } .dp__nivel { padding: 1px var(--sp-3); border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .dp__centro { display: grid; justify-items: center; gap: 3px; text-align: center; } .dp__antes { color: var(--text-muted); } .dp__marcador { font-size: 2.6rem; font-weight: 700; line-height: 0.9; font-stretch: var(--wd-condensed); color: var(--text-primary); font-variant-numeric: tabular-nums; } .dp__contexto { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .dp__estadio { font-size: var(--fs-sm); color: var(--text-secondary); } .dp__botones { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .dp__quieto { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-6); } .dp__grilla { flex: 1; min-height: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr); } .dp__grilla > .col { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* Tus once y el banco. */ .dp__editar { font-size: var(--fs-sm); color: var(--accent-texto); } .dp__once { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .dp__once li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 3px 0; animation: pre-entra 180ms var(--ease-entrada) both; animation-delay: calc(100ms + var(--i, 0) * 20ms); } .dp__once b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .dp__dorsal { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 800; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); } .dp__banco { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-xs); color: var(--text-muted); } .dp__nada { color: var(--text-muted); } /* DESPUÉS DEL PARTIDO: tres columnas —el partido, tus jugadores y lo que está en juego— y los tuyos con su nota. */ .dp__grilla--jugado { grid-template-columns: minmax(18rem, 1.1fr) minmax(16rem, 1fr) minmax(18rem, 1.1fr); } .dp__resumen { overflow-y: auto; } .dp__figura { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); border-left: 3px solid var(--line-strong); } .dp__figura--nuestra { border-left-color: var(--accent); background: var(--accent-wash); } .dp__figura-ico { width: 22px; height: 22px; color: var(--accent-texto); } .dp__figura div { display: grid; gap: 1px; min-width: 0; } .dp__figura b { font-size: var(--fs-lg); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp__figura small { color: var(--text-muted); font-size: var(--fs-xs); } .dp__sucesos { display: grid; gap: 2px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .dp__suceso { display: grid; grid-template-columns: 2.4rem auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-secondary); } .dp__suceso--nuestro { background: var(--bg-raised); } .dp__min { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; } .dp__suceso-txt { display: grid; min-width: 0; } .dp__suceso-txt b { color: var(--text-primary); } .dp__suceso-txt small { font-size: var(--fs-2xs); color: var(--text-muted); } .dp__marca { width: 13px; height: 13px; margin-top: 3px; } .dp__marca--gol { color: var(--good); } .dp__marca--amarilla { color: var(--amber-500); } .dp__marca--roja { color: var(--danger); } .dp__marca--asist { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-secondary); margin-top: 0; width: auto; height: auto; } .dp__num-cab { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); } .dp__num-cab span:last-child { text-align: right; } .dp__numeros { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .dp__numeros li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; row-gap: 3px; font-size: var(--fs-sm); } .dp__numeros b { color: var(--text-primary); font-variant-numeric: tabular-nums; } .dp__numeros li b:last-of-type { text-align: right; } .dp__num-rot { text-align: center; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .dp__marcas { display: inline-flex; align-items: center; gap: 3px; } .dp__calif { justify-self: end; min-width: 2.4rem; padding: 1px var(--sp-2); border-radius: var(--r-sm); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg-raised); color: var(--text-primary); } .dp__calif--alta { background: color-mix(in srgb, var(--good) 26%, var(--bg-raised)); } .dp__calif--baja { background: color-mix(in srgb, var(--danger) 24%, var(--bg-raised)); } strong.dp__calif { font-size: var(--fs-xl); padding: var(--sp-1) var(--sp-3); } /* LO QUE ESTÁ EN JUEGO */ .dp__juego { overflow-y: auto; } .dp__tabla { display: grid; gap: 2px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .dp__tabla li { display: grid; grid-template-columns: 1.4rem auto minmax(0, 1fr) 1.6rem 2rem; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .dp__tabla b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .dp__tabla strong { text-align: right; color: var(--text-primary); } .dp__tabla--entra { box-shadow: inset 2px 0 0 var(--accent); } .dp__tabla--mia { background: var(--accent-wash); color: var(--text-primary); } .dp__tabla--mia b { font-weight: 700; } .dp__tabla--rival { background: var(--bg-raised); } .dp__raya { display: flex !important; align-items: center; gap: var(--sp-2); padding: 0 !important; color: var(--accent-texto) !important; font-size: var(--fs-2xs) !important; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; } .dp__raya::before, .dp__raya::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); } .dp__si { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-1); padding: 0; list-style: none; } .dp__si li { display: grid; justify-items: center; gap: 2px; padding: var(--sp-2); border-radius: var(--r-md); background: var(--bg-raised); border-top: 2px solid var(--line-strong); } .dp__si span { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); } .dp__si b { font-size: var(--fs-xl); color: var(--text-primary); } .dp__si em { font-style: normal; font-size: var(--fs-xs); color: var(--text-secondary); } .dp__si--g { border-top-color: var(--verde-400) !important; } .dp__si--p { border-top-color: var(--warn) !important; } .dp__nota { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-xs); } .dp__nota--grande { font-size: var(--fs-sm); color: var(--text-secondary); } .dp__hist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .dp__hist li { display: grid; grid-template-columns: 3rem auto 1fr; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-sm); color: var(--text-secondary); } .dp__hist--g em { color: var(--verde-300); font-style: normal; } .dp__hist--p em { color: var(--warn); font-style: normal; } .dp__hist--e em { font-style: normal; } @media (max-height: 820px) { .dp__cruce { padding-block: var(--sp-2); } .dp__bandera { width: 72px; height: 48px; } .dp__marcador { font-size: 2rem; } } @media (max-width: 1100px) { .dp { max-height: none; } .dp__cruce { grid-template-columns: minmax(0, 1fr); } .dp__grilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } } @media (prefers-reduced-motion: reduce) { .dp .tarjeta, .dp__bandera, .dp__once li { animation: none; } } /* EL FIXTURE CON LOS FORMATOS REALES: tu llave, o el aviso de que tu selección entra más adelante. */ .parsel__nada { margin: var(--sp-4) 0; color: var(--text-secondary); font-size: var(--fs-sm); } .parsel__llave { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-lg); color: var(--text-primary); } .parsel__llave span { font-size: var(--fs-sm); color: var(--text-muted); } .parsel__llave-p { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; } .parsel__llave-p li { display: flex; justify-content: space-between; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); font-size: var(--fs-sm); color: var(--text-secondary); } .parsel__llave-p b { color: var(--text-primary); font-variant-numeric: tabular-nums; } /* LAS QUE SE ENFRENTAN Y NO SE DIRIGEN (1/10/2026): en el muro, apagadas y en blanco y negro a medias; al pasar el puntero se prenden como las otras, porque se pueden mirar. En la ficha, el aviso en lugar de «Dirigir». */ .muro__b--sin { opacity: 0.4; filter: grayscale(0.6); } @media (hover: hover) { .muro:hover .muro__b--sin { opacity: 0.25; } .muro:hover .muro__b--sin:hover { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--line-strong); } } .muro__b--sin.muro__b--es { opacity: 1; filter: none; } .nac__sindt { display: grid; gap: 2px; max-width: 22rem; margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); font-size: var(--fs-xs); color: var(--text-secondary); } .nac__sindt b { font-size: var(--fs-sm); color: var(--text-primary); } /* LA FILA DE LAS RONDAS, con «Cómo se juega» a la derecha: un desplegable que se ve sólo cuando el costado bajó (debajo de 1600). */ .mundo__pasos-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } @media (max-width: 1600px) { .mundosel__grilla { grid-template-areas: 'tabs' 'conf'; grid-template-rows: auto minmax(0, 1fr); } } /* ANIMACIONES, SIN EXAGERAR (1/10/2026): lo de adentro entra escalonado al cambiar de pestaña o de ronda, las banderas aparecen con un pequeño asentamiento, y el hover levanta apenas la tarjeta. La tarjeta grande entra sólo la primera vez. */ @keyframes mun-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mun-bandera { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } } @keyframes mun-latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } } .mundo--pintado > .tarjeta { animation: none; } .mundo__cruce, .cuadro__col, .mundo__llaves-nota, .mundo__pasos li { animation: mun-entra 210ms var(--ease-entrada) both; animation-delay: calc(var(--k, 0) * 20ms); } .mundo__pasos li:nth-child(2) { --k: 1; } .mundo__pasos li:nth-child(3) { --k: 2; } .mundo__pasos li:nth-child(4) { --k: 3; } .mundo__pasos li:nth-child(5) { --k: 4; } .mundo__cuerpo img.mundo__pano { animation: mun-bandera 230ms var(--ease-entrada) both; animation-delay: calc(var(--k, 0) * 20ms + 60ms); } /* `translate` y no `transform`: la entrada anima `transform` con `both`, y una animación terminada con relleno le sigue ganando a cualquier regla; la propiedad aparte no la toca nadie más. */ .mundo__cruce, .mundo__llave { transition: translate var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .mundo__cruce:hover, .cuadro .mundo__llave:not(.mundo__llave--vacia):hover { translate: 0 -2px; background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-raised)); box-shadow: 0 0 0 1px var(--line-strong), 0 10px 22px -16px rgb(0 0 0 / 0.9); } .mundo__cruce--mia:hover { box-shadow: inset 0 0 0 1px var(--accent), 0 10px 22px -16px rgb(0 0 0 / 0.9); } .mundo__cruce .mundo__pano { transition: scale var(--dur-fast) var(--ease); } .mundo__cruce:hover .mundo__pano { scale: 1.06; } .mundo__cruce-vs { transition: color var(--dur-fast) var(--ease); } .mundo__cruce:hover .mundo__cruce-vs { color: var(--accent-texto); } .mundo__pasos button { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .mundo__paso-n { transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .mundo__pasos button:hover .mundo__paso-n { scale: 1.08; } @media (prefers-reduced-motion: reduce) { .mundo__cruce, .cuadro__col, .mundo__llaves-nota, .mundo__pasos li, .mundo__cuerpo img.mundo__pano, .mundo__tab--mia::before { animation: none; } .mundo__cruce:hover, .cuadro .mundo__llave:hover, .mundo__cruce:hover .mundo__pano, .mundo__pasos button:hover .mundo__paso-n { translate: none; scale: none; } .mundo__tabs button::after { transition: none; } } /* ========================================================================== EL MOVIMIENTO DEL MODO, EN TODAS SUS PANTALLAS (1/10/2026, «hagamos lo mismo en las otras pantallas del modo») -------------------------------------------------------------------------- Lo que Eliminatorias estrenó, llevado al resto sin escribirlo pantalla por pantalla: · LA ENTRADA ESCALONADA de los renglones de las listas —las filas de tabla NO: WebKit deja la columna fija del nombre dibujada y vacía mientras la fila se desvanece, y se ve un esqueleto— sólo al llegar a la pantalla: `html.modo-entra` la pone `seleccion-equipo.js` y la saca poco después de cargar, así que tocar algo y que se repinte una lista no la hace volver a entrar. · LAS BANDERAS Y ESCUDOS aparecen con un asentamiento. · EL HOVER levanta las tarjetas que se tocan e ilumina los renglones. TODO VA CON `:where()`, O SEA CON ESPECIFICIDAD CERO: lo que ya tenía su propia animación —el recorrido del Fixture, lo que falta del Predio, los años de la Oficina, el once del Día de partido— la conserva, porque cualquier regla con una clase le gana a ésta. Eliminatorias queda afuera: tiene la suya, escrita arriba. Y el levantar va con `translate`, que no pisa ninguna animación de entrada (ver arriba, en el mundo). ========================================================================== */ /* SÓLO EL `from`, Y CON `backwards`: la entrada termina en el estilo PROPIO del elemento. Con `to { opacity: 1 }` y `both`, las banderitas del Predio —que son 0,85— se veían a 1 y saltaban a 0,85 cuando se sacaba `modo-entra`. */ @keyframes modo-renglon { from { opacity: 0; transform: translateY(4px); } } @keyframes modo-marca { from { opacity: 0; transform: scale(0.9); } } /* CORTA A PROPÓSITO (1/10/2026, «muy lento… las transiciones de pantalla a pantalla, muy duro»). Era 140 ms de espera, 26 ms por renglón hasta doce y 360 ms de recorrido: la última fila terminaba de llegar a los 0,8 s y las banderas a casi 1 s, en CADA cambio de solapa, encima del fundido de la transición. Una pantalla que se sigue acomodando un segundo se lee como una pantalla que tarda. Ahora todo está quieto antes de los 0,35 s, y las coreografías propias de cada pantalla —tarjetas, banderas, barras, el recorrido del Fixture— van a la mitad de su tiempo. */ :where(.modo-entra main:not(.mundosel)) :where(ol, ul) > li { animation: modo-renglon 200ms var(--ease-entrada) backwards; animation-delay: calc(min(var(--modo-n, 8), 8) * 14ms); } :where(ol, ul, tbody) > :where(li, tr):nth-child(1) { --modo-n: 0; } :where(ol, ul, tbody) > :where(li, tr):nth-child(2) { --modo-n: 1; } :where(ol, ul, tbody) > :where(li, tr):nth-child(3) { --modo-n: 2; } :where(ol, ul, tbody) > :where(li, tr):nth-child(4) { --modo-n: 3; } :where(ol, ul, tbody) > :where(li, tr):nth-child(5) { --modo-n: 4; } :where(ol, ul, tbody) > :where(li, tr):nth-child(6) { --modo-n: 5; } :where(ol, ul, tbody) > :where(li, tr):nth-child(7) { --modo-n: 6; } :where(ol, ul, tbody) > :where(li, tr):nth-child(8) { --modo-n: 7; } :where(ol, ul, tbody) > :where(li, tr):nth-child(9) { --modo-n: 8; } :where(ol, ul, tbody) > :where(li, tr):nth-child(10) { --modo-n: 9; } :where(ol, ul, tbody) > :where(li, tr):nth-child(11) { --modo-n: 10; } :where(ol, ul, tbody) > :where(li, tr):nth-child(12) { --modo-n: 11; } :where(.modo-entra main:not(.mundosel)) :where(img[src*="assets/banderas"], img[src*="assets/federaciones"], img.crest) { animation: modo-marca 220ms var(--ease-entrada) backwards; animation-delay: calc(30ms + min(var(--modo-n, 8), 8) * 14ms); } /* Y EL CRUCE ENTRE PANTALLAS DEL MODO, MÁS CORTO: la pantalla nueva llega en 160 ms y no en 240. Con 240 había un tramo en que se veían las dos superpuestas, la que se iba y la que llegaba. */ :root.en-modo-seleccion::view-transition-new(root) { animation-duration: 160ms; } /* -------------------------------------------------------------------------- EL MOVIMIENTO DEL MODO (1/10/2026): el menú es un mapa, las solapas se deslizan, lo que se toca contesta. La lógica —qué lado, qué pastilla— está en `seleccion-equipo.js`; acá sólo el cómo. Todo por debajo de 240 ms: el mismo día se acortó todo lo que hacía esperar, y esto no lo devuelve. -------------------------------------------------------------------------- */ /* 1. ENTRE PANTALLAS, DE COSTADO. La que se va corre unos píxeles hacia el lado contrario y se apaga rápido; la que llega entra desde el lado de la solapa elegida y frena. El chrome no participa: tiene su propio nombre y se queda quieto (`movimiento.css`). */ :root[data-lado='derecha'] { --modo-lado: 1; } :root[data-lado='izquierda'] { --modo-lado: -1; } /* EN SECO Y DESPUÉS LA NUEVA. La primera versión cruzaba las dos a la vez y la que se iba usaba la curva de salida, que arranca lenta: a mitad de camino se leían las dos pantallas superpuestas. Ahora la vieja se apaga en 80 ms lineales y la nueva espera ese rato antes de entrar: se ve una por vez. */ :root[data-lado]::view-transition-old(root) { animation: modo-se-va 80ms linear both; } :root[data-lado]::view-transition-new(root) { animation: modo-llega 220ms var(--ease-entrada) 50ms both; } @keyframes modo-se-va { to { opacity: 0; transform: translateX(calc(var(--modo-lado, 1) * -8px)); } } @keyframes modo-llega { from { opacity: 0; transform: translateX(calc(var(--modo-lado, 1) * 28px)); } } /* El subrayado de la solapa viaja con la misma curva y el mismo tiempo que la pantalla, así que llegan juntos. */ :root.en-modo-seleccion::view-transition-group(solapa) { animation-duration: 240ms; animation-timing-function: var(--ease-entrada); } /* La solapa del menú contesta al APRETAR, no cuando llega la pantalla: entre el clic y la pantalla nueva pasan 100–250 ms, y ese rato tiene que decir «voy». Bajada instantánea, como los botones del sistema. */ .en-modo-seleccion .nav-sub__item:active { color: var(--nav-aqui); transition-duration: 0s; } /* 2. LAS SOLAPAS DE ADENTRO. La pantalla NO cruza entera: la primera versión lo hacía y todo lo que no cambiaba —el título, las cifras, los rótulos de las solapas— salía doble y corrido. La raíz se cambia en seco y sólo entra lo que de verdad cambió (`.modo-cambia`, la marca la pone `seleccion-equipo.js` mirando qué nodos se agregaron): desde el lado de la solapa elegida, 10 px, en 200 ms. La pastilla elegida se desliza de una solapa a la otra, con su rótulo fundiéndose en el camino. */ :root[data-solapa-lado='derecha'] { --modo-lado: 1; } :root[data-solapa-lado='izquierda'] { --modo-lado: -1; } :root[data-solapa-lado]::view-transition-old(root) { animation: none; opacity: 0; } :root[data-solapa-lado]::view-transition-new(root) { animation: none; } /* Con especificidad de sobra: las tarjetas del modo traen su propia entrada (`.mundosel .tarjeta`, `.pre .tarjeta`…) y le ganaban a ésta. */ :root[data-solapa-lado] main .modo-cambia.modo-cambia { animation: modo-cambia 200ms var(--ease-entrada) backwards; } @keyframes modo-cambia { from { opacity: 0; transform: translateX(calc(var(--modo-lado, 1) * 10px)); } } ::view-transition-group(modo-pastilla) { animation-duration: 200ms; animation-timing-function: var(--ease-entrada); } /* La que deja de estar elegida no apaga su fondo despacio: la pastilla ya se fue viajando, y la transición propia del botón dejaba un fantasma donde estaba. */ :root[data-solapa-lado] main :where([role="tab"], .segmented__btn) { transition: none; } /* Sin estirar: «Grupos» y «Cuadro» no miden lo mismo, y la foto estirada al ancho de la otra aplasta las letras a mitad de camino. Con `none` cada foto conserva su tamaño y lo que cambia de ancho es la caja que viaja. */ ::view-transition-old(modo-pastilla), ::view-transition-new(modo-pastilla) { width: 100%; height: 100%; object-fit: none; animation-duration: 200ms; } /* 3. LO QUE SE TOCA SE HUNDE. Las tarjetas que se levantan al pasar por encima vuelven a su sitio y ceden un punto en el fotograma del clic —el acuse de que el toque llegó—; al soltar suben con la transición de siempre. Las fichas y renglones que se desplazan al pasar, igual pero de costado. */ :where(.pre__rival, .via__bloque, .parsel__casilla, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug):active { translate: 0 0; scale: 0.985; transition-duration: 0s; } :where(.pre__medidor, .pre__pend, .scsel .plaza, .dia__jug):active { translate: 0 0; transition-duration: 0s; } :where(.pre__rival, .via__bloque, .parsel__casilla, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug) { transition-property: translate, scale, background-color, box-shadow, border-color; } @media (prefers-reduced-motion: reduce) { :root[data-lado]::view-transition-old(root), :root[data-lado]::view-transition-new(root), :root[data-solapa-lado] main .modo-cambia.modo-cambia, ::view-transition-group(modo-pastilla) { animation: none; } :where(.pre__rival, .via__bloque, .parsel__casilla, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug):active { scale: none; } } /* EL HOVER. Las tarjetas que se tocan se levantan dos píxeles; los renglones de las listas que se tocan se iluminan apenas. */ :where(.pre__rival, .pre__medidor, .pre__pend, .via__bloque, .parsel__casilla, .parts__plan, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug, .scsel .plaza, .dia__jug) { transition: translate var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } :where(.pre__rival, .via__bloque, .parsel__casilla, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug):hover { translate: 0 -2px; box-shadow: 0 10px 22px -16px rgb(0 0 0 / 0.9); } :where(.pre__medidor, .pre__pend, .scsel .plaza, .dia__jug):hover { translate: 2px 0; } :where(.pre__rival-figuras li, .plantilla tbody tr, .convoc tbody tr, .ofisel table tbody tr, .dp__once li) { transition: background-color var(--dur-fast) var(--ease); } :where(.pre__rival-figuras li, .ofisel table tbody tr, .dp__once li):hover { background-color: color-mix(in srgb, var(--text-primary) 5%, transparent); } :where(.en-modo-seleccion main) :where(img.crest, img[src*="assets/banderas"]) { transition: scale var(--dur-fast) var(--ease); } :where(.pre__rival-figuras li, .cvsel__jug, .dia__jug, .scsel .plaza):hover :where(img.crest, img[src*="assets/banderas"]) { scale: 1.08; } @media (prefers-reduced-motion: reduce) { :where(.modo-entra main) :where(ol, ul) > li, :where(.modo-entra main) :where(img[src*="assets/banderas"], img[src*="assets/federaciones"], img.crest) { animation: none; } :where(.pre__rival, .pre__medidor, .pre__pend, .via__bloque, .parsel__casilla, .ofisel__ano, .ofisel__extremo, .ent__dia, .ent__op, .cvsel__jug, .scsel .plaza, .dia__jug):hover { translate: none; } :where(.pre__rival-figuras li, .cvsel__jug, .dia__jug, .scsel .plaza):hover :where(img.crest, img[src*="assets/banderas"]) { scale: none; } } /* LA FILA DE LAS CONFEDERACIONES, arriba del muro de la puerta (1/10/2026). */ .muro__confs { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-1); } .muro__conf { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .muro__conf img { height: 24px; width: auto; max-width: 5.5rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity var(--dur-fast) var(--ease); } .muro__conf--conmebol img, .muro__conf--concacaf img { height: 32px; } .muro__conf--ofc img { height: 26px; } .muro__conf--caf img { height: 16px; } .muro__conf:hover img, .muro__conf[aria-pressed="true"] img { opacity: 1; } .muro__conf:hover, .muro__conf[aria-pressed="true"] { color: var(--text-primary); } .muro__conf[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 -2px 0 var(--accent); } .muro__conf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* La zona alumbrada: las demás banderas se apagan. */ .muro[data-alumbra] .muro__b { transition: scale 220ms var(--ease-entrada), box-shadow 220ms var(--ease), opacity 220ms var(--ease), filter 220ms var(--ease); } .muro[data-alumbra="uefa"] .muro__b:not([data-conf="uefa"], .muro__b--es), .muro[data-alumbra="conmebol"] .muro__b:not([data-conf="conmebol"], .muro__b--es), .muro[data-alumbra="caf"] .muro__b:not([data-conf="caf"], .muro__b--es), .muro[data-alumbra="afc"] .muro__b:not([data-conf="afc"], .muro__b--es), .muro[data-alumbra="concacaf"] .muro__b:not([data-conf="concacaf"], .muro__b--es), .muro[data-alumbra="ofc"] .muro__b:not([data-conf="ofc"], .muro__b--es) { opacity: 0.12; filter: grayscale(1); } .nac__conf-logo { height: 16px; width: auto; max-width: 4rem; vertical-align: -3px; margin-right: var(--sp-2); filter: brightness(0) invert(1); opacity: 0.85; } @media (max-width: 720px) { .muro__confs { flex-wrap: wrap; justify-content: center; } } /* EL LOGO DE UNA CONFEDERACIÓN EN UN RENGLÓN (1/10/2026): en blanco, a la altura de la letra, y los emblemas altos —Conmebol y Concacaf traen el nombre abajo— un poco más grandes para leerse igual. */ .conf-logo { display: inline-block; height: 1.35em; width: auto; max-width: 5em; object-fit: contain; vertical-align: middle; margin: -0.2em 0.45em -0.15em 0; filter: brightness(0) invert(1); opacity: 0.92; } .conf-logo--conmebol, .conf-logo--concacaf { height: 2em; margin-block: -0.5em -0.45em; } .conf-logo--caf { height: 0.85em; } .panel__title .conf-logo { margin-right: 0.6em; } /* En los rótulos —letra de 11 px en mayúsculas— la medida en `em` lo dejaba de juguete: ahí va en píxeles. */ .label .conf-logo, .panel__title .conf-logo, .dp__contexto .conf-logo, .dia__contexto .conf-logo, .parts__sub .conf-logo, .sel-tit .conf-logo { height: 17px; margin-block: -3px; } .dp__contexto .conf-logo--conmebol, .dp__contexto .conf-logo--concacaf, .dia__contexto .conf-logo--conmebol, .dia__contexto .conf-logo--concacaf, .parts__sub .conf-logo--conmebol, .parts__sub .conf-logo--concacaf, .sel-tit .conf-logo--conmebol, .sel-tit .conf-logo--concacaf { height: 28px; margin-block: -9px; } .dp__contexto .conf-logo--caf, .dia__contexto .conf-logo--caf, .parts__sub .conf-logo--caf, .sel-tit .conf-logo--caf { height: 11px; margin-block: 0; } .label .conf-logo--conmebol, .label .conf-logo--concacaf, .panel__title .conf-logo--conmebol, .panel__title .conf-logo--concacaf { height: 28px; margin-block: -9px; } .parsel__ante .conf-logo--conmebol, .parsel__ante .conf-logo--concacaf { height: 22px; margin-block: -6px -4px; } .label .conf-logo--caf, .panel__title .conf-logo--caf { height: 11px; margin-block: 0; } .parsel__ante .conf-logo, .pre__ante .conf-logo { margin-inline: 0.35em; } .parsel__ante .conf-logo { margin-right: 0.35em; } .pre__ante .conf-logo { height: 20px; } .pre__ante .conf-logo--conmebol, .pre__ante .conf-logo--concacaf { height: 30px; margin-block: -8px -6px; } .pre__ante .conf-logo--caf { height: 13px; } /* En la Oficina: el logo arriba de la palabra en la tarjeta del año, y a la altura de la fila en la tabla de tu campaña. */ .ofisel__ano-n .label { display: grid; justify-items: start; gap: 4px; } /* Y se dobla (8/10/2026): «Copa Africana de Naciones» iba en un renglón y en el teléfono estiraba la Oficina a 457 px, con el aviso del despacho corrido afuera de la pantalla. Lo encontró `barrido-de-seleccion-telefono.mjs`. */ .ofisel__ano-n .label { white-space: normal; min-width: 0; overflow-wrap: anywhere; } .ofisel__ano-n .conf-logo { margin: 0; } .ofisel__tabla th .conf-logo { height: 16px; margin-block: -3px; } .ofisel__tabla th .conf-logo--conmebol, .ofisel__tabla th .conf-logo--concacaf { height: 24px; margin-block: -7px; } .ofisel__tabla th .conf-logo--caf { height: 10px; margin-block: 0; } /* En todos los antetítulos del modo —el renglón chico arriba del título— el emblema alto va contenido, o se monta sobre el título de abajo. */ [class*="__ante"] .conf-logo { margin-inline: 0.35em; } [class*="__ante"] .conf-logo--conmebol, [class*="__ante"] .conf-logo--concacaf { height: 22px; margin-block: -6px -4px; } /* LA CONVOCATORIA ABIERTA (1/10/2026): candidatos o todos, buscador y país. */ .cvsel__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line-hairline); } .cvsel__buscar { flex: 1 1 12rem; width: auto; min-width: 10rem; max-width: 22rem; height: 34px; } .cvsel__buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); outline: none; } .cvsel__buscar input::placeholder { color: var(--text-muted); } .cvsel__buscar:focus-within { border-color: var(--accent); } .cvsel__pais { flex: 0 1 13rem; min-width: 9rem; } .convoc__mas td, .convoc__nadie td { padding: var(--sp-2) var(--sp-4); text-align: center; } .convoc__nadie td { color: var(--text-muted); font-size: var(--fs-sm); } .convoc__mas .label { margin-left: var(--sp-2); color: var(--text-muted); } /* La preselección: quién recomendó a cada uno, bajo el nombre. */ .convoc__reco { display: block; margin-top: 1px; font-size: var(--fs-2xs); font-weight: 500; color: var(--accent-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; } /* LOS INFORMES DE SCOUTING (1/10/2026). */ .informes { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .informe { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: 0 0 0 1px var(--line-hairline); } .informe__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .informe__cab b { color: var(--text-primary); } .informe__criterio { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); } .informe__gente { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .informe__gente li { display: flex; align-items: center; gap: var(--sp-3); min-height: 30px; border-top: 1px solid var(--line-hairline); } .informe__gente li:first-child { border-top: 0; } .informe__quien { display: grid; flex: 1; min-width: 0; line-height: 1.2; } .informe__quien b { font-size: var(--fs-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .informe__quien small { font-size: var(--fs-2xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .informe__gente i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .informe__mas { margin: 0; font-size: var(--fs-2xs); color: var(--text-muted); } .informes__ir { margin-top: var(--sp-3); width: 100%; justify-content: center; } .ct__destino { margin-top: var(--sp-2); max-width: 100%; } /* El nombre que abre la ficha del futbolista (1/10/2026). */ .ficha-enlace { color: inherit; text-decoration: none; } .ficha-enlace:hover, .ficha-enlace:focus-visible { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== COMPARTIR LA LISTA (1/10/2026): el panel de la convocatoria y la página que abre el enlace, `lista.html`. ========================================================================== */ .compartir { position: relative; width: min(32rem, calc(100vw - 32px)); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.85); } .compartir[open] { display: grid; gap: var(--sp-4); animation: agv-sube 260ms cubic-bezier(.2,.8,.2,1) both; } .compartir::backdrop { background: rgb(0 0 0 / 0.6); } .compartir__x { position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } @media (hover: hover) { .compartir__x:hover { background: var(--bg-raised); color: var(--text-primary); } } .compartir__tit { margin: 0; padding-right: 44px; font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; } .compartir__pie { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); max-width: 60ch; } .compartir__vista { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); color: inherit; text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease); } @media (hover: hover) { .compartir__vista:hover { box-shadow: inset 0 0 0 1px var(--accent); } } .compartir__vista img { flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); } .compartir__vista span { display: grid; gap: 2px; min-width: 0; flex: 1; } .compartir__vista b { font-size: var(--fs-lg); font-weight: 800; text-transform: uppercase; font-stretch: var(--wd-condensed); line-height: 1.05; overflow-wrap: anywhere; } .compartir__vista small { color: var(--text-secondary); font-size: var(--fs-sm); } .compartir__vista > .i { flex: none; color: var(--text-muted); } .compartir__enlace { display: flex; align-items: stretch; height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--line-strong); background: var(--bg-page); overflow: hidden; } .compartir__enlace:focus-within { box-shadow: inset 0 0 0 2px var(--accent); } .compartir__url { flex: 1; min-width: 0; padding: 0 var(--sp-4); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); text-overflow: ellipsis; outline: none; } .compartir__copiar { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; margin: 4px; padding: 0 var(--sp-4); border-radius: 9px; } .compartir__copiar--hecho { background: var(--verde-300); } .compartir__redes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .compartir__redes .action { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; } @media (max-width: 420px) { .compartir { padding: var(--sp-5); } .compartir__redes { grid-template-columns: 1fr; } } /* LA LISTA COMPARTIDA (rediseño del 4/10/2026). La cabecera se tiñe con los colores de la nación (`--nacion-a`, `--nacion-b`, de `COLORES_NACION`); las cuatro líneas son renglones que llenan el ancho —ya no columnas con huecos—; al costado, qué podés hacer vos y dónde juegan. */ .lista-comp { --nacion-a: var(--accent); --nacion-b: var(--accent); display: grid; gap: var(--sp-6); width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-9); } .lista-comp__barra-sup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); } .lista-comp__marca { font-weight: 800; font-size: var(--fs-md); color: var(--text-primary); text-decoration: none; letter-spacing: 0.01em; } @media (hover: hover) { .lista-comp__marca:hover { color: var(--accent-texto); } } .lista-comp__compartir { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .lista-comp__compartir .action { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding-inline: var(--sp-4); } .lista-comp__cab { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-7) var(--sp-7); border-radius: var(--r-lg); background: linear-gradient(115deg, color-mix(in srgb, var(--nacion-a) 34%, var(--bg-panel)) 0%, color-mix(in srgb, var(--nacion-a) 12%, var(--bg-panel)) 45%, var(--bg-panel) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nacion-a) 30%, var(--line-hairline)), 0 22px 50px -30px rgb(0 0 0 / 0.9); } .lista-comp__cab::after { content: ''; position: absolute; z-index: -1; right: -6%; top: -40%; width: 46%; height: 180%; transform: rotate(14deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nacion-b) 9%, transparent)); } .lista-comp__bandera { flex: none; width: auto; height: auto; max-width: 168px; max-height: 112px; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 16px 34px -16px rgb(0 0 0 / 0.9); animation: agv-sube 420ms cubic-bezier(.2,.8,.2,1) both; } .lista-comp__titulo { display: grid; gap: var(--sp-2); min-width: 0; } .lista-comp__tit { margin: 0; font-size: clamp(2.2rem, 3vw + 1rem, 4.4rem); line-height: 0.92; font-weight: 700; text-transform: uppercase; font-stretch: var(--wd-condensed); letter-spacing: -0.01em; text-wrap: balance; color: var(--text-primary); } .lista-comp__datos { margin: 0; font-size: var(--fs-lg); color: var(--text-secondary); text-wrap: balance; } .lista-comp__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; } .lista-comp__lineas { display: grid; gap: var(--sp-5); } .lista-comp__linea { display: grid; gap: var(--sp-3); } .lista-comp__linea-tit { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .lista-comp__linea-tit b { font-size: var(--fs-lg); letter-spacing: 0; color: var(--accent-texto); font-variant-numeric: tabular-nums; } .lista-comp__gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; } .lista-comp__jug { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--line-hairline); animation: agv-sube 360ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(min(var(--k, 0), 22) * 22ms); } .lista-comp__escudo { flex: none; width: 34px; height: 34px; object-fit: contain; } .lista-comp__quien { display: grid; gap: 1px; min-width: 0; flex: 1; line-height: 1.2; } .lista-comp__quien b { font-size: var(--fs-md); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lista-comp__quien small { color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lista-comp__edad { flex: none; min-width: 2.2rem; text-align: right; font-size: var(--fs-lg); font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .lista-comp__jug--perdido b { color: var(--text-muted); font-style: italic; } .lista-comp__lado { position: sticky; top: var(--sp-5); display: grid; gap: var(--sp-4); } .lista-comp__cta { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .lista-comp__cta:empty { display: none; } .lista-comp__cta-tit { margin: 0; font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); } .lista-comp__cta p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .lista-comp__botones { display: grid; gap: var(--sp-2); } .lista-comp__botones .action { justify-content: center; min-height: 46px; } .lista-comp__donde { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--line-hairline); } .lista-comp__lado-tit { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); } .lista-comp__lado-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .lista-comp__paises, .lista-comp__clubes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .lista-comp__paises li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 1.6rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); } .lista-comp__clubes li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); } .lista-comp__donde-nom { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lista-comp__donde-nom img { flex: none; border-radius: 2px; } .lista-comp__escudo-chico { flex: none; width: 22px; height: 22px; object-fit: contain; } .lista-comp__barra { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) calc(var(--v) * 100%), var(--bg-raised) 0); } .lista-comp__paises b, .lista-comp__clubes b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; } .lista-comp__nadie { color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .lista-comp__jug, .lista-comp__bandera { animation: none; } } @media (max-width: 1000px) { .lista-comp__cuerpo { grid-template-columns: minmax(0, 1fr); } .lista-comp__lado { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } @media (max-width: 640px) { .lista-comp { padding: var(--sp-4) var(--sp-4) var(--sp-7); gap: var(--sp-5); } .lista-comp__cab { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); } .lista-comp__bandera { max-width: 120px; max-height: 80px; } .lista-comp__gente { grid-template-columns: minmax(0, 1fr); } .lista-comp__compartir .action { padding-inline: var(--sp-3); } } /* En la Previa, el acceso a la ficha va al lado del botón que mete al jugador en el once: un enlace no puede ir adentro de un botón. */ .dia__banco-lista li { display: flex; align-items: center; gap: 2px; } .dia__banco-lista li > .dia__quien-btn { flex: 1; min-width: 0; } .dia__ver-ficha { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .dia__ver-ficha:hover, .dia__ver-ficha:focus-visible { color: var(--accent-texto); background: color-mix(in srgb, var(--text-primary) 6%, transparent); } /* LA FEDERACIÓN, en la Oficina (1/10/2026). */ .ofisel__movs { display: grid; gap: 2px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; } .ofisel__movs li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-top: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); } .ofisel__movs b { font-variant-numeric: tabular-nums; color: var(--text-muted); } .ofisel__movs b.sube { color: var(--accent-texto); } .ofisel__movs b.baja { color: var(--danger); } .ofisel__cese { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--danger) 12%, var(--bg-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); } .ofisel__cese--oferta { background: color-mix(in srgb, var(--accent) 10%, var(--bg-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .ofisel__cese-tit { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); } .ofisel__cese-pie { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .ofisel__ofertas { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .ofisel__oferta { display: flex; align-items: center; gap: var(--sp-3); } .ofisel__oferta b { flex: 1; min-width: 0; } .ofisel__cese > .action { justify-self: start; margin-top: var(--sp-1); } /* ========================================================================== LA SESIÓN DE ENTRENAMIENTO (2/10/2026) -------------------------------------------------------------------------- Debajo de la cancha: lo que se hace con el día elegido, la práctica que se juega y el informe que queda. Ver `pantalla-entreno-seleccion.js`, § 7. ========================================================================== */ .ent__sesion { flex: none; min-width: 0; } .sesion { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); } .sesion__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); } .sesion__cab b { font-size: var(--fs-lg); color: var(--text-primary); } .sesion__controles { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); align-items: flex-end; } .sesion__campo { display: grid; gap: var(--sp-2); } .sesion__campo select { height: 32px; padding: 0 var(--sp-5); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-page); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; } .sesion__riesgo { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .sesion__riesgo span { color: var(--text-muted); } .sesion__riesgo[data-tono='medio'] { color: var(--amber-300); } .sesion__riesgo[data-tono='alto'] { color: var(--clay-300); } .sesion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); } .sesion__acciones .action { font-size: var(--fs-md); padding-inline: var(--sp-7); } .sesion__motivo { font-size: var(--fs-sm); color: var(--text-secondary); } .sesion__marcador { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); } .sesion__marca { font-size: var(--fs-3xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .sesion__eq { font-size: var(--fs-md); font-weight: 700; } .sesion__eq--A { color: var(--prac-a, var(--text-primary)); } .sesion__eq--B { color: var(--nar-400); } .sesion__min { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; } .sesion__eventos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; min-height: 3.6em; } .sesion__eventos li { font-size: var(--fs-sm); color: var(--text-secondary); animation: sesion-entra 160ms var(--ease) both; } .sesion__eventos li span { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); } .sesion__eventos li[data-tipo='gol'] { color: var(--text-primary); font-weight: 600; } .sesion__eventos li[data-tipo='lesion'] { color: var(--clay-300); } @keyframes sesion-entra { from { opacity: 0; transform: translateY(-3px); } } .sesion__informe { display: grid; gap: var(--sp-3); margin: 0; } .sesion__informe > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-4); } .sesion__informe dt { font-size: var(--fs-sm); color: var(--text-secondary); } .sesion__informe dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .sesion__bien { color: var(--verde-300) !important; } .sesion__mal { color: var(--clay-300) !important; } .ent__dia--hecho { box-shadow: inset 3px 0 0 var(--verde-400); } .ent__dia-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .ent__dia-hecho { font-size: var(--fs-2xs); font-weight: 700; color: var(--verde-300); font-variant-numeric: tabular-nums; } /* LA PRÁCTICA sobre la cancha: la cancha a medida, los dos equipos —el de la selección con su color, el otro con pechera naranja—, los comodines en gris y la pelota. Durante la práctica los discos del dibujo se apagan. */ .ent__tablero--practica .ent__discos { opacity: 0; } .prac__cancha { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.75); stroke-width: calc(0.35px * var(--prac-esc, 1)); } .prac__cal { stroke: rgb(255 255 255 / 0.55); stroke-width: 0.3; } .prac__arco { fill: #fff; } .prac__j { transition: opacity var(--dur) var(--ease); } .prac__j circle { fill: var(--ink-400); stroke: rgb(0 0 0 / 0.55); stroke-width: calc(0.3px * var(--prac-esc, 1)); } .prac__j text { font-size: 1.7px; font-weight: 700; text-anchor: middle; fill: #111; pointer-events: none; } .prac__j--A circle { fill: var(--prac-a, #74acdf); } .prac__j--B circle { fill: var(--nar-400); } .prac__j--arq circle { stroke: #fff; stroke-width: calc(0.45px * var(--prac-esc, 1)); } .prac__j--pelota circle { stroke: var(--accent); stroke-width: calc(0.55px * var(--prac-esc, 1)); } .prac__j--fuera { opacity: 0.18; } .prac__pelota { fill: #fff; stroke: #111; stroke-width: 0.2; } @media (prefers-reduced-motion: reduce) { .sesion__eventos li { animation: none; } } /* EN VIVO, EN UNA FILA: marcador, las últimas jugadas y los controles. Era una caja de 200 px con un solo renglón adentro (captura del 2/10/2026). */ .sesion--viva { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-7); padding: var(--sp-4) var(--sp-6); } .sesion--viva .sesion__marcador { justify-content: flex-start; } .sesion--viva .sesion__eventos { min-height: 0; } .sesion--viva .sesion__acciones { justify-content: flex-end; } .sesion--viva .sesion__marca { font-size: var(--fs-2xl); } /* PLEGADO: queda la tira con lo esencial, y la cancha crece. */ .sesion__plegar { margin-left: auto; height: 28px; padding: 0 var(--sp-4); border-radius: var(--r-sm); background: var(--bg-page); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; } @media (hover: hover) { .sesion__plegar:hover { color: var(--text-primary); background: var(--bg-hover); } } .sesion--viva .sesion__plegar { margin-left: 0; } .sesion--plegada { padding-block: var(--sp-3); gap: var(--sp-3); } .sesion--plegada .sesion__controles, .sesion--plegada .sesion__riesgo, .sesion--plegada .sesion__informe, .sesion--plegada > .ent__campo-pie { display: none; } .sesion--hecha.sesion--plegada .sesion__marcador { display: none; } .sesion:not(.sesion--viva).sesion--plegada { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } /* QUIÉNES JUEGAN: tres grupos de fichas que se tocan para moverlas. */ .sesion__vacio { font-size: var(--fs-xs); color: var(--text-muted); } @media (max-width: 900px) { .sesion--viva { grid-template-columns: minmax(0, 1fr); } } .ent__tablero--practica .ent__zona { opacity: 0; transition: opacity var(--dur) var(--ease); } /* LA PLANILLA DE LA PRÁCTICA (2/10/2026): dos equipos ordenados por línea y la tira de los de afuera. Se toca uno y otro para cambiarlos. */ .plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); } .plan__equipo { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-page); box-shadow: inset 0 3px 0 var(--prac-a, #74acdf); min-width: 0; } .plan__equipo--B { box-shadow: inset 0 3px 0 var(--nar-400); } .plan__cab { display: flex; align-items: baseline; justify-content: space-between; } .plan__cab b { font-size: var(--fs-md); color: var(--text-primary); } .plan__equipo--A .plan__cab b { color: var(--prac-a, var(--text-primary)); } .plan__equipo--B .plan__cab b { color: var(--nar-400); } .plan__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-3); } .plan__j { display: grid; grid-template-columns: 2.6em 1.6em minmax(0, 1fr); align-items: center; gap: var(--sp-3); height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-xs); text-align: left; color: var(--text-primary); font-size: var(--fs-sm); transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); cursor: pointer; } @media (hover: hover) { .plan__j:hover { background: var(--bg-hover); } } .plan__j--marcado { background: var(--bg-selected); box-shadow: inset 0 0 0 1.5px var(--accent); } .plan__j--arrastrado { opacity: 0.4; } .plan__pos { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; } .plan__pos[data-fam='POR'] { color: var(--amber-300); } .plan__n { font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; } .plan__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .plan__j--hueco { display: flex; justify-content: center; color: var(--text-muted); font-size: var(--fs-xs); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-xs); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgb(255 255 255 / 0.03) 4px 8px); } .plan__afuera { grid-column: 1 / -1; display: grid; gap: var(--sp-2); min-width: 0; } .plan__tira { display: flex; gap: 2px var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .plan__tira .plan__j { flex: none; width: 10.5rem; background: var(--bg-page); } .plan__ayuda { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); } .sesion--plegada .plan { display: none; } @media (max-width: 900px) { .plan { grid-template-columns: minmax(0, 1fr); } } /* La cancha no se achica más de la cuenta: el panel tiene tope y rueda adentro, y cada equipo va en tres columnas. */ .ent__sesion { max-height: 56%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Y LA CANCHA NO SALTA (9/10/2026, «cuando le doy Delegar al CT la cancha se achica… evitemos pestañeos»): el panel de la sesión pasaba de 94 px (día sin nada puesto) a 139 (intensidad y «Entrenar»), y la cancha, que se queda con lo que sobra, se achicaba 60 px de golpe. El panel reserva desde el principio el alto del estado con controles. */ .ent__centro > .ent__sesion { min-height: 152px; } /* Lo mismo arriba: con la semana armada los números de la cabecera pasan a dos renglones (cohesión, punto, piernas, ánimo…) y empujaban la semana y la cancha 18 px hacia abajo. Se reserva el alto de los dos renglones. */ .en-modo-club .entsel__numeros { min-height: 99px; align-content: start; } /* 140 en pantalla con el zoom de 0,92 */ .plan__lista { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); } .plan__j { height: 26px; grid-template-columns: 2.4em 1.5em minmax(0, 1fr); } /* El botón de jugar queda SIEMPRE a la vista, aunque la planilla ruede. */ .sesion:not(.sesion--viva) > .sesion__acciones { position: sticky; bottom: calc(-1 * var(--sp-5)); z-index: 1; margin: 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5)); padding: var(--sp-4) var(--sp-6); background: var(--bg-raised); box-shadow: 0 -1px 0 var(--line-hairline); border-radius: 0 0 var(--r-md) var(--r-md); } .sesion__acciones .sesion__riesgo { margin-left: auto; } /* El día hecho es un ESTADO, no un botón: tilde y texto, sin caja. */ .sesion__estado { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--verde-300); } /* Lo de afuera del reducido, en penumbra: el espacio del ejercicio se lee solo. */ .prac__penumbra { fill: rgb(0 0 0 / 0.38); } /* El día hecho es un ESTADO, no un botón: tilde y texto, sin caja. */ .sesion__estado { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--verde-300); } /* Lo de afuera del reducido, en penumbra: el espacio del ejercicio se lee solo. */ .prac__penumbra { fill: rgb(0 0 0 / 0.38); } /* ========================================================================== LA SALA DEL CT (2/10/2026): cada uno del cuerpo técnico vota su lista. ========================================================================== */ .sala { display: grid; gap: var(--sp-5); } .sala__intro { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .sala__votantes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); } .sala__voto { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); } .sala__voto--consenso { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .sala__rol { grid-row: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-md); font-weight: 700; color: var(--text-on-accent); background: var(--accent); } .sala__rol[data-rol='fisico'], .sala__punto--si[data-rol='fisico'] { background: #5ab0ff; } .sala__rol[data-rol='campo'], .sala__punto--si[data-rol='campo'] { background: #3eda7f; } .sala__rol[data-rol='tactico'], .sala__punto--si[data-rol='tactico'] { background: #c792ff; } .sala__rol[data-rol='medico'], .sala__punto--si[data-rol='medico'] { background: #ff8a65; } .sala__quien { display: grid; min-width: 0; } .sala__quien b { font-size: var(--fs-md); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sala__quien small { font-size: var(--fs-xs); color: var(--text-secondary); } .sala__criterio { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.35; } .sala__igual { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .sala__igual b { font-size: var(--fs-lg); color: var(--text-primary); font-variant-numeric: tabular-nums; } .sala__voto .action { grid-column: 1 / -1; justify-self: start; } .sala__deshacer { margin: 0; display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); } .sala__tabla th[scope='row'] { font-weight: 400; } .sala__jug { display: flex; align-items: center; gap: var(--sp-4); } .sala__jug > span { display: grid; } .sala__jug small { font-size: var(--fs-xs); color: var(--text-secondary); } .sala__pide { font-style: normal; font-weight: 700; color: var(--verde-300); } .sala__nolleva { font-style: normal; font-weight: 700; color: var(--clay-300); } .sala__fila--tuyo { background: color-mix(in srgb, var(--accent) 6%, transparent); } .sala__votos { display: inline-flex; gap: 4px; } .sala__punto { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--line); } .sala__punto--si { color: #111; box-shadow: none; } .sala__cuenta { font-size: var(--fs-md); color: var(--text-primary); } .sala__cuenta[data-n='4'] { color: var(--verde-300); } .sala__cuenta[data-n='0'] { color: var(--text-muted); } .sala__de { color: var(--text-muted); font-size: var(--fs-xs); } .sala__consenso { color: var(--accent); } @media (max-width: 1280px) { .sala__votantes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .sala__votantes { grid-template-columns: minmax(0, 1fr); } } .sala__tabla th[scope='row'], .sala__tabla .sala__nom, .sala__tabla .sala__nom small { text-transform: none; letter-spacing: normal; } .sala__nom b, .sala__nom b a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .sala__nom small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); } .sala__tabla td.u-num { padding-right: var(--sp-6); } .convoc__animo { display: block; font-size: var(--fs-2xs); font-weight: 700; text-transform: none; letter-spacing: 0; } .convoc__animo[data-tono='mal'] { color: var(--clay-300); } .convoc__animo[data-tono='bien'] { color: var(--verde-300); } /* ========================================================================== EL VESTUARIO, EN EL PREDIO (2/10/2026) ========================================================================== */ .pre__t--vestuario { gap: var(--sp-4); } .vest__prensa { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 7%, var(--bg-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .vest__pregunta { margin: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .vest__respuestas { display: grid; gap: var(--sp-2); } .vest__resp { display: grid; gap: 2px; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } @media (hover: hover) { .vest__resp:hover { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--accent); } } .vest__resp b { font-size: var(--fs-sm); color: var(--text-primary); } .vest__resp small { font-size: var(--fs-xs); color: var(--text-secondary); } .vest__gente { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .vest__fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); box-shadow: inset 3px 0 0 var(--line); } .vest__fila[data-tono='mal'] { box-shadow: inset 3px 0 0 var(--clay-400); } .vest__fila[data-tono='bien'] { box-shadow: inset 3px 0 0 var(--verde-400); } .vest__quien { display: grid; min-width: 0; } .vest__quien b { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vest__quien small { font-size: var(--fs-xs); color: var(--text-secondary); } .vest__figura { font-size: var(--fs-2xs); font-weight: 700; color: var(--amber-300); text-transform: uppercase; letter-spacing: 0.06em; } .vest__animo { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); } .vest__fila[data-tono='mal'] .vest__animo { color: var(--clay-300); } .vest__fila[data-tono='bien'] .vest__animo { color: var(--verde-300); } .vest__ct, .vest__novedad { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .vest__ct[data-tono='mal'], .vest__novedad[data-tono='mal'] { color: var(--clay-300); } .vest__novedad[data-tono='bien'] { color: var(--verde-300); } /* Los rivales miden lo que traen y el vestuario toma el resto, con su propia rueda: es el que más crece con la carrera. */ .pre__t--vestuario > [data-f='pre-vestuario'] { display: grid; align-content: start; gap: var(--sp-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* ========================================================================== EL PREDIO, SEGUNDA VUELTA (2/10/2026): «agrandar escudos, más funcionalidad, gráficos menos extensos y más útiles». Tres columnas: lo que falta y cómo estás · cara a cara · el vestuario. ========================================================================== */ /* --- cómo estás: seis fichas --- */ .pre__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .pre__kpi { position: relative; display: grid; align-content: start; gap: 2px; padding: var(--sp-4) var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); color: inherit; text-decoration: none; overflow: hidden; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } @media (hover: hover) { .pre__kpi:hover { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--line-strong); } } .pre__kpi b { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pre__kpi b small { font-size: 0.55em; color: var(--text-muted); } .pre__kpi > small { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pre__kpi[data-tono='mal'] > small { color: var(--clay-300); } .pre__kpi[data-tono='bien'] > small { color: var(--verde-300); } .pre__kpi-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink-800); } .pre__kpi-barra::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--parte)); background: var(--text-secondary); } .pre__kpi[data-tono='bien'] .pre__kpi-barra::after { background: var(--verde-400); } .pre__kpi[data-tono='medio'] .pre__kpi-barra::after { background: var(--amber-300); } .pre__kpi[data-tono='mal'] .pre__kpi-barra::after { background: var(--clay-400); } /* --- cara a cara --- */ .pre__vs { display: flex; align-items: baseline; gap: var(--sp-3); font-variant-numeric: tabular-nums; } .pre__vs b { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--wd-condensed); color: var(--text-primary); } .pre__vs-yo { color: var(--accent) !important; } .pre__vs small { font-size: var(--fs-xs); color: var(--text-muted); } .pre__duelo { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-4); } .pre__duelo-cab { text-align: right; } .pre__duelo-cab--ellos { text-align: left; } .pre__duelo-lado { display: flex; align-items: center; gap: var(--sp-3); } .pre__duelo-lado--yo { justify-content: flex-end; } .pre__duelo-lado i { position: relative; flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .pre__duelo-lado i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--parte)); } .pre__duelo-lado--yo i::after { transform-origin: right; background: var(--accent); } .pre__duelo-lado--ellos i::after { transform-origin: left; background: var(--text-secondary); } .pre__duelo-lado b { min-width: 2ch; font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pre__duelo-linea { display: grid; justify-items: center; font-size: var(--fs-xs); color: var(--text-secondary); text-align: center; } .pre__duelo-linea small { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .pre__duelo-linea small[data-signo='mas'] { color: var(--verde-300); } .pre__duelo-linea small[data-signo='menos'] { color: var(--clay-300); } .pre__lectura { margin: 0; font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.4; } .pre__lectura a { color: var(--accent-texto); font-weight: 600; white-space: nowrap; } .pre__rival-figuras .crest { width: 30px; height: 30px; } .pre__rival-figuras li { gap: var(--sp-4); } .vest__fila .crest { width: 30px; height: 30px; } .vest__fila { grid-template-columns: 32px minmax(0, 1fr) auto; } @media (max-width: 760px) { .pre__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El encabezado no se achica: el tope de alto lo pagan las columnas, que ruedan adentro. */ .pre > .pre__hero { flex: none; } /* EN EL TELÉFONO Y LA TABLETA, SIN TOPE: las columnas se apilan y la página rueda entera. Con el tope de escritorio puesto, «Lo que falta» y «Cómo estás» quedaban afuera y no había forma de llegar. */ @media (max-width: 1100px) { .pre { max-height: none; min-height: 0; } .pre__t--vestuario > [data-f='pre-vestuario'] { overflow: visible; } } /* ========================================================================== EL DÍA DE PARTIDO, DESPUÉS (3/10/2026): letra más grande, cada lado con sus colores, tus jugadores por línea, los números como la ficha y la tabla de la eliminatoria entera. Sin huecos: las tres columnas llenan el alto. ========================================================================== */ .dp { font-size: var(--fs-md); } .dp .panel__title { font-size: var(--fs-xs); } .dp .parts__sub { font-size: var(--fs-xs); margin: var(--sp-4) 0 var(--sp-3); } /* --- el encabezado: cada mitad con los dos colores de su país --- */ .dp__hero { background: linear-gradient(90deg, color-mix(in srgb, var(--dp-local, #444) 58%, transparent) 0, color-mix(in srgb, var(--dp-local-2, var(--dp-local, #444)) 30%, transparent) 22%, transparent 42%, transparent 58%, color-mix(in srgb, var(--dp-visita-2, var(--dp-visita, #444)) 30%, transparent) 78%, color-mix(in srgb, var(--dp-visita, #444) 58%, transparent) 100%), var(--bg-panel); } .dp__lado .dp__nivel { font-size: var(--fs-lg); padding: 2px var(--sp-4); background: rgb(0 0 0 / 0.35); color: var(--text-primary); } .dp__marcador { font-size: 3.2rem; } .dp__contexto { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); } .dp__contexto .conf-logo { height: 22px; width: auto; flex: none; } .dp__estadio { font-size: var(--fs-md); } /* --- la grilla de después: tres columnas que llenan --- */ .dp__grilla--jugado { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.2fr); } .dp__grilla--jugado > .col { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* --- el partido --- */ .dp__figura b { font-size: var(--fs-xl); } .dp__suceso { font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3); } .dp__suceso-txt small { font-size: var(--fs-xs); } .dp__marca { width: 15px; height: 15px; } .dp__num-cab { font-size: var(--fs-sm) !important; text-transform: none !important; letter-spacing: 0 !important; } .dp__num-cab span:first-child, .dp__num-cab span:last-child { color: var(--text-primary); font-weight: 700; } .dp__numeros { gap: var(--sp-3); } .dp__numeros li { grid-template-columns: 2.8rem minmax(0, 1fr) 7rem minmax(0, 1fr) 2.8rem; column-gap: var(--sp-3); font-size: var(--fs-md); } .dp__numeros li b { color: var(--text-secondary); font-weight: 700; } .dp__numeros li b.gana { color: var(--text-primary); } .dp__numeros li b:first-child { text-align: left; } .dp__numeros li b:last-child { text-align: right; } .dp__num-rot { font-size: var(--fs-xs); } .dp__num-yo, .dp__num-ellos { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .dp__num-yo::after, .dp__num-ellos::after { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--parte)); transition: transform var(--dur) var(--ease); } .dp__num-yo::after { transform-origin: right; background: var(--accent); } .dp__num-ellos::after { transform-origin: left; background: var(--text-secondary); } /* --- tus jugadores --- */ .dp__resumen-jug { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .dp__resumen-jug li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); min-width: 0; } .dp__resumen-jug b { font-size: var(--fs-lg); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp__resumen-jug small { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .dp__resumen-jug .dp__calif--alta { color: var(--verde-300); } .dp__resumen-jug .dp__calif--baja { color: var(--clay-300); } .dp__lineas { display: grid; } .dp__jugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .dp__jug { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); overflow: hidden; animation: pre-entra 180ms var(--ease-entrada) both; animation-delay: calc(80ms + var(--i, 0) * 20ms); } .dp__jug--mejor { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); } .dp__jug .dp__dorsal { width: 30px; height: 30px; font-size: var(--fs-sm); } .dp__jug-quien { display: grid; min-width: 0; } .dp__jug-quien b { font-size: var(--fs-md); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp__jug-quien small { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp__hizo { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); } .dp__hizo--gol { color: var(--verde-300); } .dp__hizo .i { width: 14px; height: 14px; } .dp__jug-nota { display: grid; justify-items: end; gap: 3px; min-width: 2.8rem; } .dp__jug-nota b { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .dp__jug-nota b.dp__calif--alta { color: var(--verde-300); } .dp__jug-nota b.dp__calif--baja { color: var(--clay-300); } .dp__jug-nota i { position: relative; width: 2.8rem; height: 4px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .dp__jug-nota i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--parte)); background: var(--text-secondary); } .dp__jug-nota b.dp__calif--alta + i::after { background: var(--verde-400); } .dp__jug-nota b.dp__calif--baja + i::after { background: var(--clay-400); } /* Los minutos, como una línea al pie de la tarjeta: entera si jugó los 90. */ .dp__jug-min { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--min) * 100%); background: color-mix(in srgb, var(--accent) 55%, transparent); } /* --- la eliminatoria, entera --- */ .dp__tabla-cab { display: flex !important; align-items: center; gap: var(--sp-3); } .dp__tabla-cab .conf-logo { height: 22px; width: auto; } .dp__tabla-cab small { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; } .dp__tabla-cols, .dp__tabla li:not(.dp__raya) { display: grid; grid-template-columns: 1.5rem 28px minmax(0, 1fr) 1.7rem 1.5rem 1.5rem 1.5rem 2.2rem 5.2rem 2.2rem; align-items: center; gap: var(--sp-2); } .dp__tabla-cols { padding: 0 var(--sp-3) var(--sp-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); text-align: center; } .dp__tabla-cols span:nth-child(3) { text-align: left; } .dp__tabla li:not(.dp__raya) { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); text-align: center; } .dp__tabla li b { text-align: left; } .dp__tabla strong { font-size: var(--fs-lg); } .dp__dg { color: var(--text-secondary); } .dp__forma { display: inline-flex; justify-content: center; gap: 3px; } .dp__f { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-600); } .dp__f--g { background: var(--verde-400); } .dp__f--p { background: var(--clay-400); } .dp__quedan { display: grid; gap: 2px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .dp__quedan li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); } .dp__quedan b { color: var(--text-primary); } .dp__quedan span, .dp__quedan small { font-size: var(--fs-sm); color: var(--text-secondary); } .dp__hist li { font-size: var(--fs-md); padding: var(--sp-1) 0; } @media (max-width: 1100px) { .dp__grilla--jugado { grid-template-columns: minmax(0, 1fr); } .dp__grilla--jugado > .col { overflow: visible; } } @media (max-width: 760px) { .dp__jugs { grid-template-columns: minmax(0, 1fr); } .dp__tabla-cols, .dp__tabla li:not(.dp__raya) { grid-template-columns: 1.3rem 24px minmax(0, 1fr) 1.6rem 2rem 2rem; } .dp__tabla-cols span:nth-child(5), .dp__tabla-cols span:nth-child(6), .dp__tabla-cols span:nth-child(7), .dp__tabla-cols span:nth-child(9), .dp__tabla li > span:nth-of-type(3), .dp__tabla li > span:nth-of-type(4), .dp__tabla li > span:nth-of-type(5), .dp__tabla li > .dp__forma { display: none; } } /* Las notas sin la caja de color de antes: el color lo lleva la cifra. */ .dp__jug-nota b, .dp__resumen-jug b { background: none !important; padding: 0; } .dp__tabla-cols, .dp__tabla li:not(.dp__raya) { grid-template-columns: 1.5rem 30px minmax(0, 1fr) 1.7rem 1.5rem 1.5rem 1.5rem 2.2rem 5.2rem 2.2rem; column-gap: var(--sp-3); } .dp__tabla .parts__pano, .dp__quedan .parts__pano { width: 28px; height: 19px; object-fit: cover; border-radius: 2px; } .dp__quedan li { grid-template-columns: 30px minmax(0, 1fr) auto auto; } .dp__banco-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .dp__banco-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg-raised) 60%, transparent); min-width: 0; } .dp__banco-lista .dp__dorsal--chico { grid-row: 1 / 3; width: 24px; height: 24px; font-size: var(--fs-xs); background: var(--ink-700); color: var(--text-secondary); box-shadow: none; } .dp__banco-lista b { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp__banco-lista small { font-size: var(--fs-2xs); color: var(--text-muted); } @media (max-width: 760px) { .dp__banco-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El dorsal como camiseta: el disco y el número salen del SVG. */ .dp__disco { flex: none; display: block; border-radius: 50%; box-shadow: none; } .dp__disco text { font-size: 0.95px; font-weight: 800; font-family: inherit; } .dp__jug .dp__disco { width: 32px; height: 32px; } .dp__once .dp__disco { width: 28px; height: 28px; } /* LA PLANTILLA (3/10/2026): el dorsal se toca para cambiarlo, y la columna derecha suma por línea, dónde juegan y las edades. */ .pla__dorsal--boton { cursor: pointer; border: 0; font: inherit; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } @media (hover: hover) { .pla__dorsal--boton:hover { box-shadow: 0 0 0 2px var(--accent); } } .plsel__perfil--lineas li { grid-template-columns: 7.5rem minmax(0, 1fr) 2.6rem 5.5rem; } .plsel__perfil--lineas small { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } .plsel__paises { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .plsel__paises li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 1.6rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); } .plsel__paises i { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--ink-800); overflow: hidden; } .plsel__paises i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--text-secondary); border-radius: inherit; } .plsel__paises b { text-align: right; color: var(--text-primary); } .plsel__edades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .plsel__edades li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); } .plsel__edades b { font-size: var(--fs-xl); color: var(--text-primary); } .plsel__edades span { font-size: var(--fs-xs); color: var(--text-secondary); } /* EL DÍA DE HOY (3/10/2026): marcado en la tira y en el panel. */ .ent__dia--hoy { box-shadow: inset 0 0 0 2px var(--accent); } .ent__dia-hoy, .sesion__hoy { padding: 1px var(--sp-3); border-radius: var(--r-pill); background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .sesion--partido { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); } .sesion__pista { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } /* El panel de los dorsales: los 99 a la vista, los ocupados con su dueño. */ .pla__dorsal--abierto { box-shadow: 0 0 0 2px var(--accent); } .pla__numeros { position: fixed; z-index: 60; width: min(580px, 94vw); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--sombra-modal); animation: comparar-abre 140ms var(--ease) both; } .pla__numeros-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin: 0 0 var(--sp-3); } .pla__numeros-cab b { font-size: var(--fs-lg); color: var(--text-primary); } .pla__numeros-cab small { font-size: var(--fs-sm); color: var(--text-secondary); } .pla__numeros-grilla { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; } .pla__num { display: grid; place-items: center; align-content: center; min-height: 50px; padding: 2px 0; border-radius: var(--r-xs); background: var(--bg-page); color: var(--text-primary); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .pla__num small { font-size: 10.5px; margin-top: 1px; font-weight: 600; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .pla__num--ocupado { background: color-mix(in srgb, var(--bg-page) 60%, var(--ink-700)); color: var(--text-secondary); } .pla__num--mio { background: var(--accent); color: var(--text-on-accent); } @media (hover: hover) { .pla__num:hover { box-shadow: inset 0 0 0 2px var(--accent); } } .pla__num:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } /* La barra de desplazamiento, separada del contenido. */ .plsel__rueda { padding-right: var(--sp-4); scrollbar-gutter: stable; } /* El logo de la confederación en el antetítulo: con aire a los dos lados y sin invadir el título de abajo. */ /* Dentro del renglón y no colgando: el renglón crece lo que el logo pide, y el título de abajo ya no lo toca. */ .label .conf-logo, .plsel__ante .conf-logo, .parsel__ante .conf-logo, .pre__ante .conf-logo { margin: 0 0 0 0.75em; vertical-align: -0.35em; } .label .conf-logo--conmebol, .label .conf-logo--concacaf, .plsel__ante .conf-logo--conmebol, .plsel__ante .conf-logo--concacaf { height: 20px; margin-block: 0 4px; } /* ========================================================================== EL INFORME DEL AÑO (2/10/2026) — `pantalla-informe-seleccion.js`. Una sola grilla de doce que llena la pantalla: el balance arriba, y debajo tres franjas de 8+4 / 4+4+4 / 8+4, sin columnas vacías. ========================================================================== */ .inf { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-md); } .inf .tarjeta { min-width: 0; } .inf__pano { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); object-fit: cover; } .inf__vacio { margin: 0; color: var(--text-muted); } .inf__nota { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--text-muted); } /* El balance. */ .inf__gep { display: flex; gap: 2px; height: 6px; margin-top: var(--sp-2); border-radius: var(--r-pill); overflow: hidden; } .inf__gep-g { background: var(--verde-400); } .inf__gep-e { background: var(--text-muted); } .inf__gep-p { background: var(--danger); } .inf__delta { font-style: normal; font-size: 0.5em !important; vertical-align: 0.6em; margin-left: 0.3em !important; } .inf__delta--sube { color: var(--verde-300) !important; } .inf__delta--baja { color: var(--clay-300) !important; } .inf__ano { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--bg-page); color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; } .inf__ano--este { background: var(--accent); color: var(--text-on-accent); } /* La grilla. */ /* Tablas. */ .inf__tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .inf__tabla th { position: sticky; top: 0; z-index: 1; background: var(--bg-raised); padding: var(--sp-2); text-align: left; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .inf__tabla td { padding: var(--sp-2); border-top: 1px solid var(--line); color: var(--text-secondary); white-space: nowrap; } .inf__tabla .u-num { text-align: right; } .inf__tabla td small { color: var(--text-muted); } .inf__tabla .sort { all: unset; cursor: pointer; } .inf__tabla .sort:focus-visible { outline: 2px solid var(--focus-ring); } .inf__p-cuando b { display: block; text-transform: capitalize; color: var(--text-primary); font-weight: 600; } .inf__p-cuando small { font-size: var(--fs-2xs); } .inf__p-rival { display: flex; align-items: center; gap: var(--sp-2); } .inf__p-rival span { color: var(--text-primary); font-weight: 600; } .inf__p-rival small { font-size: var(--fs-2xs); font-weight: 700; } .inf__p-res { display: flex; align-items: baseline; gap: var(--sp-2); } .inf__p-fig { display: flex; justify-content: space-between; gap: var(--sp-2); } .inf__p-fig span { overflow: hidden; text-overflow: ellipsis; max-width: 11rem; } .inf__p-fig b { color: var(--text-primary); } .inf__fig--nuestra { color: var(--accent-texto); } /* El diagnóstico. */ /* Los números. */ /* Los goles por franja: arriba a favor, abajo en contra. */ .inf__franjas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); height: 13rem; } .inf__franja { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: stretch; gap: 4px; } .inf__franja small { text-align: center; font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .inf__fr-a, .inf__fr-c { position: relative; display: flex; justify-content: center; } .inf__fr-a { align-items: flex-end; } .inf__fr-c { align-items: flex-start; } .inf__fr-a::before, .inf__fr-c::before { content: ''; position: absolute; left: 12%; right: 12%; height: calc(var(--h) * 100%); border-radius: 3px; } .inf__fr-a::before { bottom: 0; background: var(--accent); } .inf__fr-c::before { top: 0; background: var(--clay-300); } .inf__fr-a b, .inf__fr-c b { position: relative; z-index: 1; padding: 2px 0; font-size: var(--fs-sm); color: var(--ink-950, #0b0b0f); } .inf__leyenda { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; font-size: var(--fs-xs); color: var(--text-secondary); } .inf__leyenda i { width: 10px; height: 10px; border-radius: 2px; } .inf__leyenda i + * { margin-right: var(--sp-3); } .inf__ley-a { background: var(--accent); } .inf__ley-c { background: var(--clay-300); margin-left: var(--sp-3); } /* La táctica. */ .inf__tac-rend { width: 28%; } td.inf__tac-rend > div { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem; align-items: center; gap: var(--sp-2); } td.inf__tac-rend i { display: block; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) calc(var(--r) * 100%), var(--ink-800) 0); } td.inf__tac-rend span { text-align: right; color: var(--text-primary); } /* El plantel. */ .inf__dests { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); } .inf__dest { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-page); } .inf__dest .i { grid-row: span 3; width: 1.1rem; height: 1.1rem; color: var(--accent-texto); } .inf__dest span { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .inf__dest b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .inf__dest b a { color: inherit; } .inf__dest small { font-size: var(--fs-xs); color: var(--text-secondary); } .inf__nom { display: flex; align-items: center; gap: var(--sp-2); } .inf__nom a { color: var(--text-primary); font-weight: 600; } .inf__escudo { width: 20px; height: 20px; flex: none; } .inf__min { display: inline-block; min-width: 3.4rem; padding: 0 4px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent) calc(var(--m) * 100%), transparent 0); } .inf__nota-n { color: var(--text-primary); } .inf__nota-n--alta { color: var(--verde-300); } .inf__nota-n--baja { color: var(--clay-300); } .inf__poco td { opacity: 0.62; } /* Competencias y cargo. */ .inf__torneo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-page); } .inf__torneo .i { width: 1.6rem; height: 1.6rem; color: var(--text-muted); } .inf__torneo--campeon .i { color: var(--accent); } .inf__torneo b { display: block; font-size: var(--fs-lg); color: var(--text-primary); } .inf__torneo small { color: var(--text-secondary); } .inf__torneo > span { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .inf__fed { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .inf__fed li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--sp-2); padding: 4px var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); } .inf__fed b { font-size: var(--fs-sm) !important; vertical-align: 0 !important; margin: 0 !important; text-align: right; font-variant-numeric: tabular-nums; } .inf__viene { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-page); box-shadow: inset 3px 0 0 var(--accent); } .inf__viene b { color: var(--text-primary); font-size: var(--fs-lg); } .inf__viene span { color: var(--text-secondary); } .inf__viene small { color: var(--text-muted); font-size: var(--fs-xs); } @media (max-width: 1180px) { .inf__dests { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .inf__dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== EL TORNEO (2/10/2026) — `pantalla-copa-seleccion.js`: el encabezado, los grupos (8) con tu camino (4) al lado, y el cuadro de punta a punta. ========================================================================== */ .copa { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-md); } .copa .tarjeta { min-width: 0; } .copa__pano { display: inline-block; flex: none; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); object-fit: cover; } .copa__nada { align-items: center; text-align: center; padding: var(--sp-7, 3rem); } .copa__hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5); background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 8%, var(--bg-raised)), var(--bg-raised) 60%); } .copa__marca { display: flex; align-items: center; gap: var(--sp-4); } .copa__logo { height: 64px; width: auto; max-width: 7rem; filter: brightness(0) invert(1); opacity: 0.94; } .copa__logo--copa { width: 52px; height: 52px; color: var(--accent); filter: none; } .copa__titulo { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 0.95; font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); } .copa__sub { margin: var(--sp-1) 0 0; color: var(--text-secondary); } .copa__grilla { display: grid; gap: var(--sp-3); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .copa__camino { grid-column: span 4; align-self: stretch; } .copa__cuadro { grid-column: 1 / -1; } /* Los grupos. */ .copa__grupo { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-page); } .copa__grupo--mio { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); } .copa__grupo-nom { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: var(--fs-md); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); } .copa__grupo-nom em { font-style: normal; font-size: var(--fs-2xs); color: var(--accent-texto); } .copa__tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .copa__tabla th { padding: 2px var(--sp-1); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); text-align: left; } .copa__tabla td { padding: 4px var(--sp-1); color: var(--text-secondary); border-top: 1px solid var(--line); } .copa__tabla .u-num { text-align: right; } .copa__tabla strong { color: var(--text-primary); } .copa__sel { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .copa__sel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; } .copa__sel small { margin-left: auto; padding: 0 5px; border-radius: 3px; background: var(--bg-raised); color: var(--text-muted); font-size: var(--fs-2xs); } .copa__pasa td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .copa__mia td { background: var(--accent-wash); } /* Tu camino y los bombos. */ .copa__pasos { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .copa__paso { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-page); } .copa__paso-et { display: grid; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .copa__paso-et small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); } .copa__paso-rival { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .copa__paso-rival b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .copa__paso-rival small { color: var(--text-muted); font-size: var(--fs-xs); } .copa__paso--pend { opacity: 0.78; } .copa__et { color: var(--text-muted) !important; font-weight: 500 !important; } /* El cuadro. */ .copa__ronda { display: flex; flex-direction: column; min-width: 0; } .copa__ronda-nom { margin: 0 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .copa__ronda ol { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .copa__llave { position: relative; display: grid; gap: 1px; padding: 2px; border-radius: var(--r-sm); background: var(--line); } .copa__llave--mia { background: color-mix(in srgb, var(--accent) 60%, var(--line)); } .copa__hueco { width: 22px; height: 15px; border-radius: 2px; background: var(--bg-raised); } .copa__campeon { flex: 1; display: grid; place-items: center; align-content: center; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 16%, var(--bg-page)), var(--bg-page) 70%); text-align: center; } .copa__campeon .i { width: 2.4rem; height: 2.4rem; color: var(--text-muted); } .copa__campeon b { font-size: var(--fs-lg); color: var(--text-primary); } @media (max-width: 1180px) { .copa__hero { grid-template-columns: 1fr; } .copa__camino { grid-column: 1 / -1; } } @media (max-width: 720px) { .copa__paso { grid-template-columns: 5.6rem minmax(0, 1fr) auto; } } /* LA PRESENTACIÓN Y EL SORTEO, a pantalla entera. */ .sorteo-abierto { overflow: hidden; } .sorteo { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: var(--sp-5); color: var(--text-primary); animation: sorteo-entra 320ms var(--ease) both; } .sorteo--fuera { animation: sorteo-sale 260ms var(--ease) both; } @keyframes sorteo-entra { from { opacity: 0; } } @keyframes sorteo-sale { to { opacity: 0; } } .sorteo__fondo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 14%, #0c0d11), #08090c 70%); } .sorteo__cuadro { width: min(1200px, 100%); max-height: 100%; overflow: auto; display: grid; justify-items: center; gap: var(--sp-4); text-align: center; animation: sorteo-entra 420ms var(--ease) both; } .sorteo__logo { height: 96px; width: auto; filter: brightness(0) invert(1); } .sorteo__logo--copa { width: 88px; height: 88px; color: var(--accent); filter: none; } .sorteo__ante { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-texto); } .sorteo__titulo { margin: 0; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.9; font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; } .sorteo__datos { margin: 0; font-size: var(--fs-lg); color: var(--text-secondary); } .sorteo__favs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); } .sorteo__favs > span:first-child { width: 100%; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .sorteo__fav { display: grid; justify-items: center; gap: 4px; min-width: 7rem; } .sorteo__fav b { font-size: var(--fs-md); } .sorteo__fav small { color: var(--text-muted); } .sorteo__mesa { justify-items: stretch; text-align: left; } .sorteo__mesa-tit { display: flex; align-items: baseline; gap: var(--sp-4); margin: 0; font-size: var(--fs-2xl, 2rem); font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; } .sorteo__mesa-tit small { font-size: var(--fs-md); font-weight: 600; text-transform: none; color: var(--accent-texto); } .sorteo__bombos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .sorteo__bombo { padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); } .sorteo__bombo > span { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .sorteo__bombo > div { display: flex; flex-wrap: wrap; gap: 5px; } .sorteo__bola { display: inline-grid; place-items: center; padding: 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); transition: opacity 240ms var(--ease), transform 240ms var(--ease); } .sorteo__bola--mia { box-shadow: 0 0 0 2px var(--accent); } .sorteo__bola--fuera { opacity: 0.16; transform: scale(0.86); } .sorteo__vuela { position: fixed; z-index: 2; margin: 0; transition: transform 460ms cubic-bezier(.3,.7,.2,1), opacity 460ms ease-in; pointer-events: none; } .sorteo__grupos { display: grid; grid-template-columns: repeat(min(var(--g), 6), minmax(0, 1fr)); gap: var(--sp-3); } .sorteo__grupo { padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.05); } .sorteo__grupo h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .sorteo__grupo ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .sorteo__grupo li { display: flex; align-items: center; gap: var(--sp-2); min-height: 30px; padding: 2px var(--sp-2); border-radius: 5px; background: rgba(0, 0, 0, 0.35); font-size: var(--fs-sm); overflow: hidden; white-space: nowrap; } .sorteo__grupo li b { overflow: hidden; text-overflow: ellipsis; } .sorteo__llega { animation: sorteo-llega 520ms var(--ease) both; } @keyframes sorteo-llega { 0% { background: color-mix(in srgb, var(--accent) 40%, transparent); } 100% { background: rgba(0, 0, 0, 0.35); } } .sorteo__mia { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-texto); } .sorteo__rivales { display: grid; grid-template-columns: repeat(3, minmax(0, 13rem)); justify-content: center; gap: var(--sp-5); margin: var(--sp-3) 0; padding: 0; list-style: none; } .sorteo__rivales li { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.05); animation: sorteo-entra 420ms var(--ease) both; } .sorteo__rivales li:nth-child(2) { animation-delay: 120ms; } .sorteo__rivales li:nth-child(3) { animation-delay: 240ms; } .sorteo__rivales b { font-size: var(--fs-lg); } .sorteo__rivales span { color: var(--text-secondary); } .sorteo__rivales strong { color: var(--text-primary); } .sorteo__rivales small { color: var(--text-muted); } .sorteo__pie { display: flex; gap: var(--sp-3); padding-top: var(--sp-4); } @media (max-width: 720px) { .sorteo { padding: var(--sp-3); } .sorteo__bombos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sorteo__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sorteo__rivales { grid-template-columns: 1fr; } .sorteo__rivales li { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; padding: var(--sp-2) var(--sp-3); } .sorteo__rivales img { width: 40px; height: 27px; } } @media (prefers-reduced-motion: reduce) { .sorteo, .sorteo__cuadro, .sorteo__rivales li { animation: none; } } .copa__candidatos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .copa__candidatos li { display: grid; grid-template-columns: 1.4rem auto minmax(0, 1fr) 5rem 1.8rem; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-2); border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--text-secondary); } .copa__candidatos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; } .copa__candidatos i { height: 5px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) calc(var(--n) * 100%), var(--ink-800) 0); } .copa__candidatos small { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; } .copa__cand--mia { background: var(--accent-wash); } .copa__cand--fuera { opacity: 0.45; } .copa__cand--fuera b { text-decoration: line-through; } /* EL PLANTEO, CON BOTONES (2/10/2026): todas las opciones a la vista y la puesta encendida con el acento. */ .dia__mando--botones { gap: var(--sp-2); } .dia__opciones { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 4px; } .dia__opcion { min-height: 30px; padding: 4px var(--sp-2); border-radius: var(--r-boton); border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-secondary); font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) { .dia__opcion:hover { border-color: var(--accent); color: var(--text-primary); } } .dia__opcion[aria-checked='true'] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .dia__opcion:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .dsel__planteo .dia__mando.dia__mando--botones { display: flex; flex-direction: column; align-items: stretch; gap: 5px; } .dsel__planteo .dia__mando--botones .label { text-align: left; } .dsel__planteo .dia__opciones { width: 100%; } /* SIN SALTOS (8/10/2026, Alberto: «evitemos saltos de líneas en textos y/o botones»). Con los botones en píldora y `nowrap`, «Cambio de frente» o «Al contragolpe» no entraban en un tercio del panel. Las opciones de texto toman tantas columnas como entren enteras —dos en este panel— y las formaciones, que llevan dibujo, quedan como estaban. */ .dsel__planteo .dia__opciones:not(:has(.dia__opcion--forma)) { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .dsel__planteo .dia__opcion { min-height: 26px; padding: 3px 4px; font-size: 11.5px; } .dsel__planteo .dia__mando--botones .dsel__desc { text-align: left; } /* El planteo no empuja al once del rival fuera de la pantalla: con los botones es más alto, y rueda él. */ .dsel__planteo { flex: 0 1 auto; min-height: 0; max-height: 64%; display: flex; flex-direction: column; } .dsel__planteo .dia__planteo-cuerpo { min-height: 0; overflow-y: auto; } .dsel__planteo .dia__planteo-cuerpo--plan { display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-3); } /* LAS FICHAS DE LA CANCHA: la camiseta de verdad, y se arrastran. */ .dia__ficha { touch-action: none; } .dia__ficha-n--disco { background: none; box-shadow: none; width: 36px; height: 36px; } .dia__disco { display: block; width: 36px; height: 36px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.6)); } .dia__disco text { font-size: 0.8px; font-weight: 800; font-variant-numeric: tabular-nums; } .dia__ficha--arrastra { transition: none !important; z-index: 6; cursor: grabbing; } .dia__ficha--arrastra .dia__ficha-n { transform: scale(1.15); } .dia__ficha--blanco .dia__ficha-n { box-shadow: 0 0 0 3px var(--accent); border-radius: 50%; } .dsel__pista { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; } /* LAS CABECERAS QUE ORDENAN (2/10/2026): toda tabla del modo. */ .en-modo-seleccion table:not([data-sin-orden]) thead th:not(:empty) { cursor: pointer; user-select: none; } @media (hover: hover) { .en-modo-seleccion table:not([data-sin-orden]) thead th:not(:empty):hover { color: var(--text-primary); } } .orden-sel--asc, .orden-sel--desc { color: var(--accent-texto) !important; } .orden-sel--asc::after { content: ' ↑'; } .orden-sel--desc::after { content: ' ↓'; } /* EL LOGO ANTES DEL TEXTO lleva el aire a la derecha (2/10/2026, «sigo viendo logos pisando texto»): la regla del antetítulo se lo daba a la izquierda, que es donde va cuando sigue al nombre del país. */ .label .conf-logo.conf-logo--antes, .conf-logo--antes { margin: 0 0.45em 0 0; vertical-align: -0.35em; } /* La fila de la campaña en la Oficina: «Eliminatorias» con su logo no entraba en 7rem y se metía debajo de la bandera. */ .ofisel__pp { grid-template-columns: max-content auto minmax(0, 1fr) auto; } .ofisel__pp-cuando .label { display: inline-flex; align-items: center; white-space: nowrap; } /* LOS ANTETÍTULOS CON LOGO, EN FLEX: el renglón crece lo que pide el logo y el título de abajo ya no queda debajo de él, sea cual sea su tamaño. */ .cvsel__ante, .entsel__ante, .parsel__ante, .plsel__ante, .pre__ante, .scsel__ante { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; } :is(.comp__ante, .cvsel__ante, .dp__ante, .dsel__ante, .entsel__ante, .inf__ante, .parsel__ante, .plsel__ante, .pre__ante, .scsel__ante) .conf-logo { margin: 0 0 0 0.6em !important; vertical-align: 0 !important; height: 20px; } :is(.comp__ante, .cvsel__ante, .dp__ante, .dsel__ante, .entsel__ante, .inf__ante, .parsel__ante, .plsel__ante, .pre__ante, .scsel__ante) .conf-logo--caf { height: 10px; } :is(.comp__ante, .cvsel__ante, .dp__ante, .dsel__ante, .entsel__ante, .inf__ante, .parsel__ante, .plsel__ante, .pre__ante, .scsel__ante):has(.conf-logo) { margin-bottom: 5px !important; } /* EL CRUCE DE LA PREVIA EN EL TELÉFONO (2/10/2026): en tres columnas los nombres se partían letra por letra. Los dos lados van arriba, uno al lado del otro y con el nombre entero, y el centro —qué se juega— debajo. Lo mismo entre 1101 y 1400 px (3/10/2026): ahí el cruce es la columna del medio de la mesa y a 1280 salía «ECUAD/OR». */ @media (max-width: 640px), (min-width: 1101px) and (max-width: 1400px) { .dsel__hero .dia__cruce { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: none !important; row-gap: var(--sp-3); } .dsel__hero .dia__lado--local { grid-column: 1; grid-row: 1; } .dsel__hero .dia__lado--visita { grid-column: 2; grid-row: 1; } .dsel__hero .dsel__centro { grid-column: 1 / -1; grid-row: 2; } .dsel__hero .dia__lado { min-width: 0; gap: var(--sp-2); } .dsel__hero .dia__insignia { width: 44px; height: 44px; flex: none; } .dsel__hero .dia__escudo { height: 40px; } .dsel__hero .dia__nombre { font-size: var(--fs-lg); writing-mode: horizontal-tb; word-break: normal; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .dsel__hero .dia__lado-txt { min-width: 0; } .dsel__hero .dia__contexto { white-space: normal; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; } /* Los apellidos de la cancha no entran entre fichas a este ancho: quedan los dorsales, y los nombres están en la lista de al lado. */ .dsel__campo .dia__ficha-nom { display: none; } } /* CONVOCATORIA MÁS GRANDE Y A LA VISTA (2/10/2026, «textos y botones más grandes y visibles»). */ .cvsel__filtros { gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); } .cvsel__filtros .segmented__btn { min-height: 42px; padding-inline: var(--sp-4); font-size: var(--fs-md); } .cvsel__filtros .segmented__count { font-size: var(--fs-xs); } .cvsel__buscar { flex: 1 1 18rem; max-width: 34rem; height: 44px; padding-inline: var(--sp-3); border-width: 2px; } .cvsel__buscar input { font-size: var(--fs-lg); } .cvsel__buscar .i { width: 18px; height: 18px; } .cvsel__pais { height: 44px; font-size: var(--fs-md); } .cvsel .convoc__tabla, .cvsel .convoc__tabla td, .cvsel .convoc__tabla th[scope="row"] { font-size: var(--fs-lg); } .cvsel .convoc__tabla td, .cvsel .convoc__tabla th[scope="row"] { padding-top: 9px; padding-bottom: 9px; } .cvsel .convoc__tabla thead th, .cvsel .convoc__tabla thead .sort { font-size: var(--fs-xs); } .cvsel .convoc__tabla .convoc__quien b, .cvsel .convoc__tabla .convoc__quien a { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); } .cvsel .convoc__grupo .label { font-size: var(--fs-sm); } .cvsel .convoc__accion, .cvsel .convoc__tabla thead th:last-child { width: 9rem; } .cvsel .convoc__accion .action { min-height: 38px; min-width: 7.4rem; padding: 0 var(--sp-4); font-size: var(--fs-md); font-weight: 700; border: 2px solid var(--accent); background: transparent; color: var(--text-primary); opacity: 1; } @media (hover: hover) { .cvsel .convoc__accion .action:not(:disabled):hover { background: var(--accent); color: var(--text-on-accent); } } .cvsel .convoc__accion .action[data-convoc="baja"] { border-color: var(--clay-300); background: color-mix(in srgb, var(--danger) 22%, transparent); } @media (hover: hover) { .cvsel .convoc__accion .action[data-convoc="baja"]:hover { background: var(--danger); color: #fff; } } .cvsel .convoc__accion .action:disabled { border-color: var(--line-strong); color: var(--text-muted); background: transparent; } .convoc__tabla--busqueda .convoc__grupo th { background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel)); } @media (max-width: 720px) { .cvsel__buscar { flex-basis: 100%; max-width: none; } .cvsel .convoc__accion .action { min-width: 0; padding: 0 var(--sp-3); } } /* Que entre el Nivel: el nombre manda en tamaño, el resto un punto menos, y con poco ancho se esconden Altura y Pie, que están en la ficha. */ .cvsel .convoc__tabla td { font-size: var(--fs-md); } .cvsel .convoc__tabla td.convoc__club { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvsel .convoc__tabla tbody tr > :last-child:not([colspan]) { padding-left: var(--sp-3); } .cvsel .convoc__tabla tr > td:nth-child(10) { font-size: var(--fs-lg); font-weight: 700; } @media (max-width: 1700px) { .cvsel .convoc__tabla tr:not(.convoc__grupo):not(.convoc__nadie):not(.convoc__mas) > :is(th, td):is(:nth-child(5), :nth-child(6)) { display: none; } } @media (max-width: 1280px) { .cvsel .convoc__tabla tr:not(.convoc__grupo):not(.convoc__nadie):not(.convoc__mas) > :is(th, td):nth-child(9) { display: none; } } @media (max-width: 720px) { .cvsel .convoc__tabla tr:not(.convoc__grupo):not(.convoc__nadie):not(.convoc__mas) > :is(th, td):is(:nth-child(4), :nth-child(7), :nth-child(8), :nth-child(9)) { display: none; } .cvsel .convoc__tabla .convoc__quien { position: static; } .cvsel .convoc__accion { position: static; width: auto; } .cvsel .convoc__accion .action { min-height: 36px; font-size: var(--fs-sm); } .cvsel .convoc__tabla .convoc__quien b, .cvsel .convoc__tabla .convoc__quien a { font-size: var(--fs-md); white-space: normal; } } @media (max-width: 720px) { .cvsel .convoc__tabla { min-width: 0 !important; table-layout: auto; } .cvsel .convoc__tabla :is(th, td) { padding-inline: 6px; } .cvsel .convoc__accion .action { padding: 0 10px; min-width: 0; } .cvsel .convoc__grupo .label { white-space: normal; } } /* LAS CABECERAS QUE ORDENAN LAS LISTAS DE LA PREVIA (2/10/2026): misma grilla que los renglones de abajo. */ .dia__orden { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 2px var(--sp-2) 4px; border-bottom: 1px solid var(--line); } .dia__orden--ficha { padding-right: calc(var(--sp-2) + 30px); } .dia__orden-btn { all: unset; cursor: pointer; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .dia__orden-btn--niv { text-align: right; } @media (hover: hover) { .dia__orden-btn:hover { color: var(--text-primary); } } .dia__orden-btn--activo { color: var(--accent-texto); } .dia__orden-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; } /* EL FILTRO POR LÍNEA DE LA PLANTILLA (2/10/2026). */ .pla__lineas { flex: none; align-self: flex-start; margin: 0 0 var(--sp-3); flex-wrap: wrap; } .pla__lineas .segmented__btn { min-height: 38px; padding-inline: var(--sp-4); font-size: var(--fs-sm); } /* ========================================================================== EL TORNEO, REDISEÑADO (2/10/2026, «más cómoda, más entendible y fluida»). Pisa lo de arriba: la línea de etapas en el encabezado, dos solapas en el centro y lo tuyo a la derecha. ========================================================================== */ .copa__hero { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-6); } .copa__etapas { display: grid; grid-template-columns: repeat(calc(var(--n) + 1), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .copa__etapa { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; padding-top: 22px; } .copa__etapa i { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink-700); box-shadow: 0 0 0 3px var(--bg-raised); z-index: 1; } .copa__etapa::before { content: ''; position: absolute; top: 10px; left: -50%; right: 50%; height: 2px; background: var(--ink-700); } .copa__etapa:first-child::before { display: none; } .copa__etapa b { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; } .copa__etapa small { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; } .copa__etapa--hecha i, .copa__etapa--hecha::before, .copa__etapa--ahora::before { background: var(--accent); } .copa__etapa--hecha b { color: var(--text-primary); } .copa__etapa--ahora i { background: var(--accent); box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } .copa__etapa--ahora b { color: var(--accent-texto); font-weight: 800; } .copa__etapa--copa b { color: var(--text-primary); } .copa__grilla { grid-template-columns: minmax(0, 1fr) 24rem; } .copa__centro { grid-column: auto; min-width: 0; } .copa__centro .panel__head { gap: var(--sp-4); } .copa__solapas .segmented__btn { min-height: 38px; padding-inline: var(--sp-5); font-size: var(--fs-md); } .copa__riel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } /* Los grupos. */ .copa__grupo { gap: var(--sp-3); padding: var(--sp-4); } .copa__grupo-nom { font-size: var(--fs-lg); } .copa__tabla { font-size: var(--fs-md); } .copa__tabla td { padding: 6px var(--sp-1); } .copa__tabla th { font-size: var(--fs-2xs); } .copa__pos { width: 1.6rem; color: var(--text-muted); } .copa__sel b { font-size: var(--fs-md); } /* El cuadro. */ .copa__ronda-nom { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); } .copa__ronda-nom small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); } .copa__llave { padding: 0; background: var(--line); } .copa__llave--mia { box-shadow: 0 0 0 2px var(--accent); border-radius: 7px; } /* Lo tuyo. */ .copa__prox { display: grid; gap: var(--sp-3); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-raised)), var(--bg-raised) 70%); } .copa__prox-cruce { display: flex; align-items: center; gap: var(--sp-3); } .copa__prox-vs { font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .copa__prox-cruce > div { display: grid; min-width: 0; } .copa__prox-quien { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .copa__prox small { color: var(--text-secondary); } .copa__prox-cuando { margin: 0; font-size: var(--fs-md); color: var(--text-secondary); text-transform: capitalize; } .copa__prox .action { justify-self: start; } .copa__camino { grid-column: auto; } .copa__paso { grid-template-columns: 5.6rem minmax(0, 1fr) auto; } .copa__paso-et { font-size: var(--fs-xs); } .copa__paso-rival b { font-size: var(--fs-md); } @media (max-width: 1280px) { .copa__hero { grid-template-columns: 1fr; } .copa__grilla { grid-template-columns: 1fr; } .copa__riel { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } } @media (max-width: 720px) { .copa__etapas { overflow-x: auto; grid-template-columns: repeat(calc(var(--n) + 1), minmax(5.4rem, 1fr)); padding-bottom: var(--sp-2); } .copa__tabla th:nth-child(4), .copa__tabla td:nth-child(4), .copa__tabla th:nth-child(5), .copa__tabla td:nth-child(5), .copa__tabla th:nth-child(6), .copa__tabla td:nth-child(6) { display: none; } } .copa__tabla { table-layout: fixed; } .copa__tabla th:nth-child(1), .copa__tabla td:nth-child(1) { width: 1.6rem; } .copa__tabla th:nth-child(n+3), .copa__tabla td:nth-child(n+3) { width: 1.9rem; } .copa__tabla th:nth-child(7), .copa__tabla td:nth-child(7) { width: 3.2rem; } .copa__tabla th:nth-child(8), .copa__tabla td:nth-child(8) { width: 2.4rem; } .copa__sel { overflow: hidden; } .copa__sel b { min-width: 0; } .copa__paso { grid-template-columns: 7.6rem minmax(0, 1fr) auto; } .copa__prox-cuando { text-transform: none; } .copa__etapa small { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .copa__ronda-nom { flex-wrap: wrap; row-gap: 0; } .copa__campeon b { font-size: var(--fs-xl); } /* ========================================================================== LOS GRUPOS, SEGUNDA VUELTA (2/10/2026, «se ve demasiado desordenado; esos fondos grises no me gustan»). Sin cajas por renglón: líneas finas, la zona de clasificación marcada con el acento, y los partidos como resultados de diario —nombres pegados al marcador, centrados—. Tabla y partidos lado a lado cuando la tarjeta es ancha. ========================================================================== */ .copa .copa__grupo { container-type: inline-size; display: block; padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--bg-page); border: 1px solid var(--line-hairline); border-radius: var(--r-md); box-shadow: none; } .copa .copa__grupo--mio { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .copa .copa__grupo-nom { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line-strong); font-size: var(--fs-lg); letter-spacing: 0.06em; } .copa .copa__grupo--mio .copa__grupo-nom { border-bottom-color: var(--accent); } .copa__grupo-cuerpo { display: grid; gap: var(--sp-4); } @container (min-width: 760px) { .copa__grupo-cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } } /* La tabla. */ .copa .copa__tabla { width: 100%; border-collapse: collapse; } .copa .copa__tabla thead th { padding: 0 var(--sp-1) 6px; border-bottom: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .copa .copa__tabla td { padding: 8px var(--sp-1); border-top: 0; border-bottom: 1px solid var(--line-hairline); background: none; color: var(--text-secondary); } .copa .copa__tabla tr:last-child td { border-bottom: 0; } .copa .copa__tabla td strong { font-size: var(--fs-lg); color: var(--text-primary); } .copa .copa__pasa td:first-child { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent-texto); font-weight: 700; } .copa .copa__mia td { background: color-mix(in srgb, var(--accent) 9%, transparent); } .copa .copa__mia .copa__sel b { color: var(--accent-texto); } .copa .copa__sel small { padding: 0; margin-left: var(--sp-2); background: none; color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .copa .copa__sel b { font-weight: 600; } /* Los resultados. */ .copa__resultados { display: grid; gap: var(--sp-3); } .copa__jornada h4 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .copa__jornada h4::after { content: ''; flex: 1; height: 1px; background: var(--line-hairline); } .copa__jornada ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .copa__res { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr); align-items: center; gap: var(--sp-2); padding: 3px 0; font-size: var(--fs-md); color: var(--text-secondary); } .copa__res > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; } .copa__res-l { justify-content: flex-end; } .copa__res-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .copa__res .copa__pano { flex: none; } .copa__res--gana { color: var(--text-primary); font-weight: 700; } .copa__res-m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 26px; border-radius: 5px; background: var(--ink-800); color: var(--text-primary); font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; } .copa__res-m i { font-style: normal; color: var(--text-muted); font-weight: 400; padding: 0 1px; } .copa__res--viene .copa__res-m { display: block; line-height: 26px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; } .copa__res--mio .copa__res-m { background: var(--accent); color: var(--text-on-accent); } .copa__res--mio .copa__res-m i { color: inherit; opacity: 0.6; } .copa__res--mio.copa__res--viene .copa__res-m { background: none; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-texto); } .copa__res--mio > span { color: var(--text-primary); } @media (max-width: 720px) { .copa__res { font-size: var(--fs-sm); grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); } .copa .copa__grupo { padding: var(--sp-3); } } .copa .copa__tabla th:nth-child(7), .copa .copa__tabla td:nth-child(7) { width: 3.8rem; } /* ========================================================================== EL CUADRO, CON EL ESTILO DE LOS GRUPOS (2/10/2026). Tarjetas finas, el marcador en su bloque, y las líneas que unen cada par con la ronda que sigue: el corchete sale del borde derecho de las dos llaves y una línea lleva al medio de la siguiente. ========================================================================== */ .copa .copa__ronda { display: flex; flex-direction: column; min-width: 0; } .copa .copa__ronda-nom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding-bottom: 6px; border-bottom: 2px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); } .copa .copa__ronda-nom small { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); } .copa__ronda-cuerpo { flex: 1; display: flex; flex-direction: column; } .copa__par { position: relative; flex: 1; display: flex; flex-direction: column; } .copa__slot { flex: 1; display: flex; align-items: center; padding: 4px 0; } .copa__ronda-cuerpo > .copa__slot { flex: 1; } /* El corchete: del centro de la llave de arriba al de la de abajo. */ .copa__par::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: calc(var(--hueco-cuadro) / -2); width: calc(var(--hueco-cuadro) / 2); border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 6px 6px 0; pointer-events: none; } .copa__par::before { content: ''; position: absolute; top: 50%; right: calc(var(--hueco-cuadro) * -1); width: calc(var(--hueco-cuadro) / 2); border-top: 1px solid var(--line-strong); pointer-events: none; } .copa__par--mio::after, .copa__par--mio::before { border-color: color-mix(in srgb, var(--accent) 70%, transparent); } .copa .copa__llave { position: relative; width: 100%; display: grid; padding: 0; border: 1px solid var(--line-hairline); border-radius: 7px; background: var(--bg-page); box-shadow: none; overflow: hidden; } .copa .copa__llave--mia { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .copa__eq { display: grid; grid-template-columns: auto minmax(0, 1fr) 2.2rem; align-items: center; gap: var(--sp-2); padding: 6px 6px 6px var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); } .copa__eq + .copa__eq { border-top: 1px solid var(--line-hairline); } .copa__eq b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .copa__eq-m { display: grid; place-items: center; height: 24px; border-radius: 5px; background: var(--ink-800); font-style: normal; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .copa__eq-m:empty { background: none; box-shadow: inset 0 0 0 1px var(--line); } .copa__eq-m sup { font-size: 0.65em; font-weight: 600; color: var(--text-muted); margin-left: 1px; } .copa__eq--gana { color: var(--text-primary); } .copa__eq--gana b { font-weight: 800; } .copa__eq--fuera { opacity: 0.45; } .copa__eq--mia b { color: var(--accent-texto); } .copa__eq--mia .copa__eq-m { background: var(--accent); color: var(--text-on-accent); } .copa__eq--mia .copa__eq-m:empty { background: none; box-shadow: inset 0 0 0 1px var(--accent); } .copa__eq .copa__hueco { width: 22px; height: 15px; border-radius: 2px; background: none; border: 1px dashed var(--line-strong); } .copa__eq .copa__et { color: var(--text-muted) !important; font-weight: 500 !important; font-size: var(--fs-xs); } /* El campeón, al final de la línea. */ .copa .copa__campeon .i { width: 2.6rem; height: 2.6rem; color: var(--accent); } .copa .copa__campeon b { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); text-align: center; } /* En el cuadro de 32 (el Mundial) las llaves van más chicas. */ .copa__eq { grid-template-columns: auto minmax(0, 1fr) auto; } .copa__eq-m { display: inline-flex; justify-content: center; align-items: center; gap: 2px; min-width: 2.1rem; padding: 0 6px; } .copa__eq-m sup { vertical-align: 0; font-size: 0.72em; line-height: 1; margin: 0; } .copa__eq-m:empty { display: none; } /* EL DÍA SIN PARTIDO (2/10/2026). */ .dp__libre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-6); } .dp__libre-pano { width: 96px; height: 64px; border-radius: 4px; object-fit: cover; box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.7); } .dp__libre-txt { display: grid; gap: 2px; min-width: 0; } .dp__libre-txt b { font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1; font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); } .dp__libre-txt small { font-size: var(--fs-md); color: var(--text-secondary); } .dp__libre-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; } .dp__grilla--libre { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; } .dp__grilla--libre > [hidden] { display: none !important; } .dp__ult { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-page); } .dp__ult b { font-size: var(--fs-lg); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp__ult b:nth-of-type(2) { text-align: right; } .dp__ult img { border-radius: 2px; object-fit: cover; } .dp__ult strong { padding: 4px var(--sp-3); border-radius: 6px; background: var(--ink-800); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); } .dp__ult-pen { margin: 4px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); } .dp__llaves { display: grid; gap: 4px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; } .dp__llaves li { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem minmax(0, 1fr); align-items: center; gap: var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-md); color: var(--text-secondary); } .dp__llaves li > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; } .dp__llaves li > span:first-child { justify-content: flex-end; } .dp__llaves li > span.gana { color: var(--text-primary); font-weight: 800; } .dp__llaves b { display: block; height: 26px; line-height: 26px; border-radius: 5px; background: var(--ink-800); text-align: center; color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; } .dp__llave--mia b { background: var(--accent); color: var(--text-on-accent); } .dp__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); } .dp__kpi { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-page); } .dp__kpi b { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .dp__kpi span { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } @media (max-width: 900px) { .dp__libre { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-3); } .dp__libre-cta { grid-column: 1 / -1; justify-content: flex-start; } .dp__grilla--libre { grid-template-columns: 1fr !important; } .dp__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dp__cruce:has(.dp__libre) { display: block !important; padding: 0 !important; } .dp__libre-txt b { white-space: normal; } .dp__llaves b small { font-size: 0.75em; font-weight: 600; opacity: 0.75; } .dp__llaves li.dp__llave--mia b { padding: 0 4px; white-space: nowrap; } .dp__grilla--libre .dp__llaves li { grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr); } /* ========================================================================== EL FIXTURE CON EL ESTILO DEL TORNEO (2/10/2026). Las tarjetas de partido son las llaves del cuadro; la tabla y la campaña, sin cajas grises. ========================================================================== */ .via__cruce.fx__cruce { display: grid; grid-template-columns: 1fr; grid-template-areas: none; gap: 0; padding: 0; border: 1px solid var(--line-hairline); border-radius: 7px; background: transparent; box-shadow: none; overflow: hidden; } .fx__cruce--g { box-shadow: inset 3px 0 0 var(--verde-400); } .fx__cruce--p { box-shadow: inset 3px 0 0 var(--danger); } .fx__cruce--e { box-shadow: inset 3px 0 0 var(--text-muted); } .fx__eq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); padding: 6px 6px 6px var(--sp-3); font-size: var(--fs-md); color: var(--text-secondary); } .fx__eq + .fx__eq { border-top: 1px solid var(--line-hairline); } .fx__eq b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .fx__eq small { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .fx__m { display: grid; place-items: center; min-width: 1.8rem; height: 24px; padding: 0 5px; border-radius: 5px; background: var(--ink-800); font-style: normal; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .fx__m:empty { display: none; } .fx__eq--gana { color: var(--text-primary); } .fx__eq--gana b { font-weight: 800; } .fx__eq--pierde { opacity: 0.55; } .fx__eq--mia b { color: var(--text-primary); } .fx__cruce--g .fx__eq--mia .fx__m { background: var(--accent); color: var(--text-on-accent); } .fx__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 5px var(--sp-3); border-top: 1px solid var(--line-hairline); font-size: var(--fs-xs); } .fx__dia { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .fx__pie .via__lectura { margin: 0; font-size: var(--fs-xs); } .via__cruces { gap: var(--sp-2); } /* La tabla del grupo y la de la eliminatoria: renglones limpios. */ .parts__conf-f { background: none !important; border-radius: 0; border-bottom: 1px solid var(--line-hairline); padding-block: 7px; } .parts__conf-f:last-child { border-bottom: 0; } .parts__conf-f--entra { box-shadow: inset 3px 0 0 var(--accent); border-left: 0 !important; } .parts__conf-f--entra .parts__conf-p { color: var(--accent-texto); font-weight: 700; } .parts__conf-f--mia { background: color-mix(in srgb, var(--accent) 9%, transparent) !important; } .parts__conf-f--mia .parts__eq-n { color: var(--accent-texto); font-weight: 700; } .parts__conf-n { font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); } .parts__conf-cols { border-bottom: 1px solid var(--line); padding-bottom: 6px; } /* La campaña: una tira de resultados, sin recuadros punteados. */ .parsel__casilla { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border-bottom: 3px solid var(--ink-700) !important; padding-bottom: 6px; } .parsel__casilla + .parsel__casilla { border-left: 1px solid var(--line-hairline) !important; } .parsel__casilla--g { border-bottom-color: var(--verde-400) !important; } .parsel__casilla--e { border-bottom-color: var(--text-muted) !important; } .parsel__casilla--p { border-bottom-color: var(--danger) !important; } .parsel__casilla--g .label, .parsel__casilla--e .label, .parsel__casilla--p .label { color: var(--text-secondary) !important; } .parsel__casilla--proxima { border-bottom-color: var(--accent) !important; } .parsel__casilla--proxima .label { color: var(--accent-texto) !important; } .fx__eq { padding: 4px 6px 4px var(--sp-3); font-size: var(--fs-sm); } .fx__m { height: 22px; } .fx__pie { padding: 3px var(--sp-3); } .fx__cruce--g, .fx__cruce--p, .fx__cruce--e { border-left-width: 3px; } .fx__cruce--g { border-left-color: var(--verde-400); box-shadow: none; } .fx__cruce--p { border-left-color: var(--danger); box-shadow: none; } .fx__cruce--e { border-left-color: var(--text-muted); box-shadow: none; } /* El cuadro que viene: renglones limpios, como el calendario del torneo. */ .via__llaves { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-hairline); border-radius: 7px; } .via__llaves li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 5px var(--sp-3); border: 0 !important; border-bottom: 1px solid var(--line-hairline) !important; background: none !important; font-size: var(--fs-sm); } .via__llaves li:last-child { border-bottom: 0 !important; } .via__llaves li b { color: var(--text-primary); } .via__llaves li span { color: var(--text-muted); } .via__cruce.fx__cruce--g { border-left: 3px solid var(--verde-400); } .via__cruce.fx__cruce--p { border-left: 3px solid var(--danger); } .via__cruce.fx__cruce--e { border-left: 3px solid var(--text-muted); } /* ========================================================================== LAS ELIMINATORIAS CON EL ESTILO DEL TORNEO (2/10/2026). Los grupos son los de la pestaña Torneo; con uno solo (la Conmebol) la tabla y la fecha van lado a lado y llenan el ancho. ========================================================================== */ .mun__copa { display: block; font-size: var(--fs-md); } .mun__copa .mun__grupos { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: none; gap: var(--sp-4); align-content: start; } .mun__copa .mundo__grupos--uno { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .mun__copa .mun__grupo { animation: none; } .mun__copa .copa__grupo-nom em.mun__jugadas { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--text-muted); font-style: normal; } .mun__copa .copa__tabla td { padding-block: 9px; } .mun__copa .mundo__grupos--uno .copa__tabla td { padding-block: 11px; font-size: var(--fs-md); } .mun__tabla th:nth-child(9), .mun__tabla td:nth-child(9) { width: 2.4rem; } .mun__tabla th:nth-child(7), .mun__tabla td:nth-child(7) { width: 3.8rem; } .mun__tabla th:nth-child(10), .mun__tabla td:nth-child(10) { width: 5.2rem; text-align: center; } .mun__forma .dp__forma { gap: 4px; } .mun__resultados { align-content: start; } .mun__fecha-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line-strong); margin-bottom: var(--sp-2); } .mun__fecha-nav b { text-align: center; font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .mun__fecha-nav small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); } .mun__fecha-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--text-primary); cursor: pointer; } .mun__fecha-btn:disabled { opacity: 0.3; cursor: default; } @media (hover: hover) { .mun__fecha-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent-texto); } } .mun__resultados ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .mun__resultados .copa__res { padding: 5px 0; border-bottom: 1px solid var(--line-hairline); } .mun__resultados .copa__res:last-child { border-bottom: 0; } /* Con muchos grupos (la UEFA, la CAF, la AFC) cada tarjeta es angosta: la forma y las columnas G-E-P se esconden y queda lo esencial. */ .mun__grupos:not(.mundo__grupos--uno)[style*="--cols:3"] :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(10)), .mun__grupos:not(.mundo__grupos--uno)[style*="--cols:4"] :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(10)) { display: none; } @media (max-width: 900px) { .mun__copa .mun__grupos { grid-template-columns: 1fr; } } @media (max-width: 720px) { .mun__tabla :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(10)) { display: none; } } /* Las llaves de las Eliminatorias (repechajes y cuadros finales) con el estilo del torneo: tarjetas finas sin fondo, renglones separados por una línea, los goles en su bloque y el que pasa en negrita. */ .mundo__llave { background: var(--bg-page); box-shadow: none; border: 1px solid var(--line-hairline); border-radius: 8px; padding: var(--sp-2) var(--sp-3); } .mundo__llave--mia { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .mundo__llave--vacia { background: transparent; border-style: dashed; box-shadow: none; } .mundo__ll-fila { border-radius: 0; padding: 6px var(--sp-1); } .mundo__ll-fila + .mundo__ll-fila { border-top: 1px solid var(--line-hairline); } .mundo__ll-n { display: grid; place-items: center; height: 24px; border-radius: 5px; background: var(--ink-800); color: var(--text-primary); font-weight: 700; } .mundo__ll-fila--vacia .mundo__ll-n, .mundo__llave--vacia .mundo__ll-n { background: none; color: var(--text-muted); } .mundo__ll-t { background: var(--ink-700); font-weight: 800; } .mundo__gana .mundo__nom { color: var(--text-primary); font-weight: 800; } .mundo__pierde { opacity: 0.5; } .mundo__mia .mundo__nom { color: var(--accent-texto); } .mundo__llave--mia .mundo__mia .mundo__ll-t { background: var(--accent); color: var(--text-on-accent); } .mundo__cruce { background: var(--bg-page) !important; box-shadow: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .mundo__cruce--mia { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) !important; } .mundo__cruce-marcador b { min-width: 4.4rem; padding: 4px var(--sp-3); border-radius: 6px; background: var(--ink-800); text-align: center; } .mundo__cruce--mia .mundo__cruce-marcador b { background: var(--accent); color: var(--text-on-accent); } .mundo__cruce--mia .mundo__cruce-marcador b i { color: inherit; opacity: 0.6; } .mundo__cruce-marcador b:has(.mundo__cruce-vs) { background: none; box-shadow: inset 0 0 0 1px var(--line); } .mundo__cruce:hover, .cuadro .mundo__llave:not(.mundo__llave--vacia):hover { box-shadow: none; } .cuadros--varios .cuadro { background: none; border: 1px solid var(--line-hairline); } .cuadro__camino { padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line-strong); font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .cuadro__tit { color: var(--text-secondary); } /* ========================================================================== LA OFICINA CON EL ESTILO DEL TORNEO (2/10/2026). Los años del ciclo como una línea de tiempo —un riel con un punto por año, el de hoy en amarillo— y la campaña como resultados, sin cajas grises. ========================================================================== */ .ofisel__anos { position: relative; gap: 0; padding-left: 26px; } .ofisel__anos::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 2px; background: var(--line-strong); } .ofisel__ano { position: relative; border: 0; border-bottom: 1px solid var(--line-hairline); border-radius: 0; background: none; padding: var(--sp-3) var(--sp-2); box-shadow: none; } .ofisel__ano:last-child { border-bottom: 0; } .ofisel__ano::before { content: ''; position: absolute; left: -24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--ink-700); box-shadow: 0 0 0 3px var(--bg-panel); } .ofisel__ano--bien::before { background: var(--verde-400); } .ofisel__ano--mal::before { background: var(--danger); } .ofisel__ano--vivo::before, .ofisel__ano--hoy::before { background: var(--accent); box-shadow: 0 0 0 3px var(--bg-panel), 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } .ofisel__ano--hoy { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; border-bottom-color: transparent; box-shadow: none; } .ofisel__ano--hoy .ofisel__ano-n b { color: var(--accent-texto); } .ofisel__ano--futuro { opacity: 0.8; } .ofisel__ano-n b { font-size: var(--fs-3xl); font-weight: 800; font-stretch: var(--wd-condensed); } .ofisel__ano-que b { font-size: var(--fs-xl); font-weight: 800; } .ofisel__ano-det { font-size: var(--fs-sm); color: var(--text-secondary); } .ofisel__estado { font-size: var(--fs-sm); padding: 3px var(--sp-3); } /* Los récords y el recorrido: tarjetas finas. */ .ofisel__extremo { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .ofisel__extremo:has(img) b { display: inline-grid; place-items: center; min-width: 2.8rem; height: 26px; padding: 0 6px; border-radius: 5px; background: var(--ink-800); font-weight: 800; } .ofisel__rec { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .ofisel__rec--hoy { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 3px 0 0 var(--accent); } /* La campaña, partido por partido, como resultados. */ .ofisel__pps { gap: 0; } .ofisel__pp { background: none !important; border-radius: 0; border-bottom: 1px solid var(--line-hairline); padding: var(--sp-2) var(--sp-3); } .ofisel__pp:last-child { border-bottom: 0; } .ofisel__pp-cuando { font-size: var(--fs-sm); } .ofisel__tabla tbody tr:last-child :is(th, td) { border-bottom: 0; } .ofisel__tabla tbody th { font-size: var(--fs-md); } .ofisel__cese-acc { display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* LOS RIVALES DE UNA FECHA LIBRE (2/10/2026). */ .parts__rivales { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line-hairline); } .parts__riv-quien { color: var(--accent-texto); } .parts__riv { display: grid; gap: 2px; } .parts__riv-btn { display: grid; grid-template-columns: 3.6rem auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border: 1px solid var(--line-hairline); border-radius: 7px; background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; } .parts__riv-btn:disabled { cursor: default; } @media (hover: hover) { .parts__riv-btn:not(:disabled):hover { border-color: var(--accent); } } .parts__riv-btn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .parts__riv-btn small { color: var(--text-muted); font-variant-numeric: tabular-nums; } .parts__riv-btn .i { color: var(--text-muted); } .parts__riv-dia { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .parts__riv-vacio { color: var(--text-muted) !important; font-weight: 500; } .parts__riv-por { margin: 0 0 0 var(--sp-2); font-size: var(--fs-xs); line-height: 1.35; color: var(--text-secondary); } .parts__riv-acc { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .parts__riv-acc .action .i { margin-right: 4px; } .parts__riv-panel { position: fixed; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 440px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--sombra-modal); } .parts__riv-panel-cab { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); } .parts__riv-panel-cab input { height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-page); color: var(--text-primary); font: inherit; } .parts__riv-panel-cab input:focus { outline: none; border-color: var(--accent); } .parts__riv-lista { overflow-y: auto; margin: 0; padding: 0 var(--sp-2) 0 0; list-style: none; } .parts__riv-lista button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2rem; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border: 0; border-bottom: 1px solid var(--line-hairline); background: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; } @media (hover: hover) { .parts__riv-lista button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } } .parts__riv-lista b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .parts__riv-lista small { font-size: var(--fs-2xs); color: var(--text-muted); } .parts__riv-lista strong { text-align: right; font-variant-numeric: tabular-nums; } .parts__riv-nota { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); } /* La tabla y los amistosos se reparten el alto: ninguno aplasta al otro y el que no entra rueda. */ .parsel__conf { flex: 1 1 18rem; min-height: 16rem; } .parsel__lado > section:has([data-f="partidos-planes"]) { flex: 1 1 22rem; min-height: 0; display: flex; flex-direction: column; } [data-f="partidos-planes"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--sp-2); } .parts__riv-btn { grid-template-columns: 4.6rem auto minmax(0, 1fr) auto auto; } /* ========================================================================== EL PREDIO CON EL ESTILO DEL TORNEO (2/10/2026). Tarjetas finas sin fondo gris, el marcador en su bloque y el color del resultado en el borde. ========================================================================== */ .pre__pendientes { gap: 0; } .pre__pend { background: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--line-hairline) !important; } .pre__pend:last-child { border-bottom: 0 !important; } .pre__pend--urgente { box-shadow: inset 3px 0 0 var(--accent) !important; background: color-mix(in srgb, var(--accent) 6%, transparent) !important; } .pre__kpi { background: none !important; border: 1px solid var(--line-hairline); border-radius: 8px !important; overflow: hidden; } .pre__rival { background: none !important; border: 1px solid var(--line-hairline) !important; border-radius: 10px; } .pre__rival-cab { padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line-strong); } .vest__prensa { background: color-mix(in srgb, var(--accent) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: none !important; } .vest__resp { background: none !important; border: 1px solid var(--line-hairline); box-shadow: none !important; } @media (hover: hover) { .vest__resp:hover { border-color: var(--accent); } } /* ========================================================================== EL ENTRENAMIENTO CON EL ESTILO DEL TORNEO (2/10/2026). La concentración es una línea de tiempo —un riel, un punto por día, el partido como hito— y los trabajos una lista fina; nada de cajas grises. ========================================================================== */ .ent__dias { position: relative; gap: 0; padding-left: 22px; } .ent__dias::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: var(--line-strong); } .ent__dia { position: relative; width: 100%; border: 0; border-bottom: 1px solid var(--line-hairline); border-radius: 0; background: none; padding: var(--sp-2) var(--sp-2); } @media (hover: hover) { .ent__dia:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } } .ent__dia::before { content: ''; position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-700); box-shadow: 0 0 0 3px var(--bg-panel); } .ent__dia--hecho { box-shadow: none; } .ent__dia--hecho::before { background: var(--verde-400); } .ent__dia--activo { border-color: var(--line-hairline); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 6px; } .ent__dia--activo::before { background: var(--accent); box-shadow: 0 0 0 3px var(--bg-panel), 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } .ent__dia-cab b { font-size: var(--fs-md); } .ent__hito { position: relative; } .ent__hito::before { content: ''; position: absolute; left: -21px; top: 50%; width: 12px; height: 12px; margin-top: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-panel); } .ent__opciones { gap: 0; } .ent__op { width: 100%; border: 0; border-bottom: 1px solid var(--line-hairline); border-radius: 0; background: none; padding: var(--sp-2) var(--sp-2); } @media (hover: hover) { .ent__op:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: var(--line-hairline); } } .ent__op--puesta { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); border-color: var(--line-hairline); } .ent__op--puesta .ent__op-n { color: var(--accent-texto); } .ent__familia { margin-top: var(--sp-3); padding-bottom: 4px; border-bottom: 2px solid var(--line-strong); } .sesion { background: none; box-shadow: none; border: 1px solid var(--line-hairline); border-radius: 10px; } @media (max-width: 720px) { .entsel__ante, .entsel__titulo { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .entsel__ante { flex-wrap: wrap; } .entsel :is(.parsel__quien, .plsel__quien) > div, .entsel__ante + * { min-width: 0; } .sesion__cab { min-width: 0; } .sesion__cab > * { min-width: 0; white-space: normal; } } @media (max-width: 720px) { .sesion { padding: var(--sp-4); min-width: 0; } .sesion__acciones { flex-wrap: wrap; min-width: 0; } .sesion__acciones .action { white-space: normal; } .sesion__pista { min-width: 0; } } /* EL ENTRENAMIENTO EN PANTALLAS ANGOSTAS (2/10/2026): no tenía corte, y a 390 px eran tres columnas con la cancha del medio en ancho cero. Se apilan: la cancha primero, que es lo que se mira; después los días y los trabajos. */ @media (max-width: 1100px) { .entsel__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; } .entsel__grilla > .col:nth-child(2) { grid-column: 1 / -1; grid-row: 1; } } @media (max-width: 720px) { .entsel__grilla { grid-template-columns: minmax(0, 1fr); } .entsel__grilla > .col { grid-column: 1 / -1 !important; grid-row: auto !important; } .entsel__grilla > .col:nth-child(2) { order: -1; } .ent__catalogo { max-height: 60vh; } } /* EL MENÚ DEL MODO RUEDA DE COSTADO cuando no entra (2/10/2026): con once pestañas, a 1000 px ensanchaba la página entera. */ .en-modo-seleccion .nav-sub { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .en-modo-seleccion .nav-sub::-webkit-scrollbar { display: none; } .en-modo-seleccion .nav-sub__item { flex: none; } /* ========================================================================== LA PLANTILLA CON EL ESTILO DEL TORNEO (2/10/2026). La tabla sin renglones grises alternados: líneas finas, el dorsal en su bloque, y los rasgos y las edades en listas finas. ========================================================================== */ .plsel__tabla tbody tr, .plsel__tabla tbody tr:nth-child(odd) { background: none; --tinte-fila: transparent; } .plsel__tabla td, .plsel__tabla th[scope="row"] { border-bottom: 1px solid var(--line-hairline); } .plsel__tabla tbody tr:last-child :is(td, th) { border-bottom: 0; } .plsel__tabla .convoc__quien { background: var(--bg-panel); } @media (hover: hover) { .plsel__tabla tbody tr:hover :is(td, th) { background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel)); } } .plsel__tabla thead th { border-bottom: 2px solid var(--line-strong); } .pla__dorsal { display: inline-grid; place-items: center; min-width: 2.2rem; height: 26px; padding: 0 6px; border-radius: 5px; background: var(--ink-800); color: var(--accent-texto); font-weight: 800; box-shadow: none; border: 0; } @media (hover: hover) { .pla__dorsal--boton:hover { box-shadow: inset 0 0 0 1px var(--accent); } } .plsel__rasgos { gap: 0; } .plsel__rasgos li { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-hairline); padding: 6px var(--sp-1); } .plsel__rasgos li:last-child { border-bottom: 0; } .plsel__rasgos b { display: inline-grid; place-items: center; min-width: 1.8rem; height: 22px; border-radius: 5px; background: var(--ink-800); } .plsel__edades li { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } /* ========================================================================== LA CONVOCATORIA CON EL ESTILO DEL TORNEO (2/10/2026). Los convocados con la barra amarilla y un tinte parejo en todo el renglón —la celda del nombre ya no queda más oscura—, los rótulos de línea subrayados y tu lista en renglones finos. ========================================================================== */ .cvsel .convoc__tabla tbody tr, .cvsel .convoc__tabla tbody tr:nth-child(odd) { --tinte-fila: transparent; } .cvsel .convoc__tabla :is(td, th[scope="row"]) { border-bottom: 1px solid var(--line-hairline); } .cvsel .convoc__fila--dentro { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: none; } .cvsel .convoc__fila--dentro .convoc__quien { box-shadow: inset 3px 0 0 var(--accent); } .cvsel .convoc__fila--dentro .convoc__quien, .cvsel .convoc__fila--dentro .convoc__accion { background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel)); } .cvsel .convoc__grupo th { padding-top: var(--sp-5); border-bottom: 2px solid var(--line-strong); } .cvsel .convoc__grupo .label strong { color: var(--text-primary); } .cvsel__jug { background: none; border: 0; border-bottom: 1px solid var(--line-hairline); border-radius: 0; } .cvsel__jug--hueco { border: 1px dashed var(--line-strong); border-radius: 7px; margin-block: 3px; } @media (hover: hover) { .cvsel__jug:not(.cvsel__jug--hueco):hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } } .cvsel .convoc__fila:not(.convoc__fila--dentro) :is(.convoc__quien, .convoc__accion) { background: var(--bg-panel); } .cvsel .convoc__tabla .convoc__quien { background-clip: padding-box; } /* ========================================================================== EL SCOUTING CON EL ESTILO DEL TORNEO (2/10/2026): las tablas de ojeadores y del cuerpo técnico sin renglones grises alternados, con líneas finas, y los avisos sin caja gris. ========================================================================== */ .scsel .ojeo2__tabla tbody tr, .scsel .ojeo2__tabla tbody tr:nth-child(odd) { background: none; --tinte-fila: transparent; } .scsel .ojeo2__tabla :is(td, th[scope="row"]) { background: none; border-bottom: 1px solid var(--line-hairline); } .scsel .ojeo2__tabla tbody tr:last-child :is(td, th) { border-bottom: 0; } .scsel .ojeo2__tabla thead th { border-bottom: 2px solid var(--line-strong); } @media (hover: hover) { .scsel .ojeo2__tabla tbody tr:hover :is(td, th) { background: color-mix(in srgb, var(--accent) 6%, transparent); } } .scsel .ojeo2__vacio { background: none; border: 1px dashed var(--line-strong); border-radius: 8px; } .scsel__recorte { background: none !important; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 8px; } /* ========================================================================== LA PREVIA CON EL ESTILO DEL TORNEO (2/10/2026): el que está en el once con un tinte suave y su barra —no un renglón gris—, los rótulos de línea subrayados y las cajas de lo que falta en tarjetas finas. ========================================================================== */ .dsel .dia__quien-btn--dentro { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--tinta-cancha, var(--accent)); } @media (hover: hover) { .dsel .dia__quien-btn:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } } .dsel .dia__grupo-cab { margin: var(--sp-3) 0 0; padding-bottom: 4px; border-bottom: 2px solid var(--line-strong); color: var(--text-secondary); font-weight: 800; } .dsel .dia__grupo:first-child .dia__grupo-cab { margin-top: 0; } .dsel .dia__grupo-cab .label { color: var(--accent-texto); } .dsel .dia__orden { border-bottom: 0; } .dsel__falta-lineas li { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .dsel__rival-lista .dia__jug:last-child { border-bottom: 0; } /* ========================================================================== EL DÍA DE PARTIDO CON EL ESTILO DEL TORNEO (2/10/2026). Tarjetas finas en vez de cajas grises: la figura, los jugadores, los que no jugaron, lo que te queda y las cifras; los sucesos tuyos con la barra en vez de fondo. ========================================================================== */ .dp .dp__figura { background: none; border: 1px solid var(--line-hairline); border-left: 3px solid var(--line-strong); border-radius: 8px; } .dp .dp__figura--nuestra { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-left-color: var(--accent); } .dp .dp__sucesos { display: grid; gap: 0; } .dp .dp__suceso { background: none; border-radius: 0; border-bottom: 1px solid var(--line-hairline); } .dp .dp__suceso:last-child { border-bottom: 0; } .dp .dp__suceso--nuestro { box-shadow: inset 3px 0 0 var(--accent); } .dp .dp__resumen-jug li { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .dp .dp__jug { background: none !important; border: 1px solid var(--line-hairline); border-radius: 8px; box-shadow: none; } .dp .dp__jug--mejor { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .dp .dp__banco-lista li { background: none !important; border: 1px solid var(--line-hairline); border-radius: 7px; } .dp .dp__lineas h3, .dp .dp__linea > h3 { padding-bottom: 4px; border-bottom: 2px solid var(--line-strong); } .dp .dp__quedan { gap: 0; } .dp .dp__quedan li { background: none; border-radius: 0; border-bottom: 1px solid var(--line-hairline); } .dp .dp__quedan li:last-child { border-bottom: 0; } .dp .dp__si li { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .dp .dp__kpi { background: none; border: 1px solid var(--line-hairline); border-radius: 8px; } .dp .dp__ult { background: none; border: 1px solid var(--line-hairline); border-radius: 10px; } .dp .dp__tabla--rival { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); } /* ========================================================================== EL PREDIO, REDISEÑADO (2/10/2026). Arriba tu selección y la línea del año; en el centro la fecha con los dos cruces grandes y el cara a cara por solapas; a la derecha lo que falta, cómo estás y el vestuario. ========================================================================== */ .pre--nuevo { max-height: none; min-height: 0; } .pre--nuevo .pre__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-6); } .pre--nuevo .pre__nombre { font-size: clamp(2.2rem, 3.4vw, 3.4rem); } /* La línea del año. */ .pre__linea { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; min-width: 0; } .pre__etapa { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 24px; text-align: center; min-width: 0; } .pre__etapa > i { position: absolute; top: 5px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink-700); box-shadow: 0 0 0 3px var(--bg-raised); z-index: 1; } .pre__etapa::before { content: ''; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--ink-700); } .pre__etapa:first-child::before { display: none; } .pre__etapa b { font-size: var(--fs-md); color: var(--text-secondary); text-transform: capitalize; } .pre__etapa small { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pre__etapa-res { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; min-height: 22px; margin-top: 3px; } .pre__etapa-pano { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; opacity: 0.85; } .pre__etapa--hecha > i, .pre__etapa--hecha::before, .pre__etapa--ahora::before { background: var(--accent); } .pre__etapa--hecha b { color: var(--text-primary); } .pre__etapa--ahora > i { background: var(--accent); box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent); } .pre__etapa--ahora b { color: var(--accent-texto); font-weight: 800; } /* La grilla. */ .pre__grilla2 { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--sp-3); align-items: start; } .pre__riel { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } /* La fecha. */ .pre__fecha2 { display: flex; flex-direction: column; gap: var(--sp-4); } .pre__fecha-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .pre__fecha-cuando { margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); line-height: 1; } .pre__crs { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-3); } .pre__cr { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line-hairline); border-radius: 12px; } .pre__cr--g { border-left: 4px solid var(--verde-400); } .pre__cr--p { border-left: 4px solid var(--danger); } .pre__cr--e { border-left: 4px solid var(--text-muted); } .pre__cr-cuando { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .pre__cr-cuando b { color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; } .pre__cr-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); } .pre__cr-eq { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; } .pre__cr-pano { width: 84px; height: 56px; border-radius: 4px; object-fit: cover; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.8); } .pre__cr-eq b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); } .pre__cr-eq small { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .pre__cr-eq--mio b { color: var(--accent-texto); } .pre__cr-m { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 4px; min-width: 4.6rem; justify-content: center; padding: 6px var(--sp-3); border-radius: 8px; background: var(--ink-800); font-size: var(--fs-2xl); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pre__cr-m i { font-style: normal; color: var(--text-muted); font-weight: 400; } .pre__cr-m em { font-style: normal; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .pre__cr:not(.pre__cr--jugado) .pre__cr-m { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); } .pre__cr--g .pre__cr-m { background: var(--accent); color: var(--text-on-accent); } .pre__cr--g .pre__cr-m i { color: inherit; opacity: 0.6; } .pre__cr-pie { margin: 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-texto); } /* El cara a cara. */ .pre__cara { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 2px solid var(--line-strong); } .pre__cara-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .pre__cara-cab h3 { margin: 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .pre__cara-tabs .segmented__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--fs-sm); } .pre__tab-pano { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; } .pre--nuevo .pre__rival { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: 'cab cab' 'duelo fig' 'lectura fig'; gap: var(--sp-3) var(--sp-5); border: 0 !important; padding: 0; } .pre--nuevo .pre__rival-cab { grid-area: cab; border-bottom: 0; padding: 0; } .pre--nuevo .pre__duelo { grid-area: duelo; } .pre--nuevo .pre__lectura { grid-area: lectura; margin: 0; } .pre--nuevo .pre__fig-cab { grid-area: fig; align-self: start; margin: 0; } .pre--nuevo .pre__rival-figuras { grid-area: fig; margin-top: 1.6rem; align-self: start; } .pre__fig-cab { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Lo que falta, como pasos. */ .pre__num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: var(--fs-xs); font-weight: 800; background: var(--ink-800); color: var(--text-secondary); } .pre__pend--urgente .pre__num { background: var(--accent); color: var(--text-on-accent); } .pre--nuevo .pre__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1200px) { .pre__grilla2 { grid-template-columns: minmax(0, 1fr); } .pre__riel { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; } .pre--nuevo .pre__hero { grid-template-columns: 1fr; } } @media (max-width: 720px) { .pre__linea { overflow-x: auto; grid-template-columns: repeat(var(--n), minmax(4.6rem, 1fr)); padding-bottom: var(--sp-2); } .pre__crs { grid-template-columns: 1fr; } .pre__cr-pano { width: 60px; height: 40px; } .pre--nuevo .pre__rival { grid-template-columns: 1fr; grid-template-areas: 'cab' 'duelo' 'lectura' 'fig'; } .pre--nuevo .pre__rival-figuras { margin-top: 0; } .pre--nuevo .pre__fig-cab { display: none; } .pre--nuevo .pre__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pre__cr--g .pre__cr-pie { color: var(--verde-300); } .pre__cr--p .pre__cr-pie { color: var(--clay-300); } .pre__cr--e .pre__cr-pie { color: var(--text-secondary); } .pre__etapa small { white-space: normal; overflow: visible; line-height: 1.15; letter-spacing: 0.04em; } /* ========================================================================== EL DÍA DE PARTIDO, REDISEÑADO (2/10/2026). Con partido jugado: el marcador con la línea de los noventa, tu once sobre la cancha con su nota, y el partido y lo que está en juego en solapas. ========================================================================== */ .dp__hero--jugado { padding-bottom: var(--sp-3); } .dp__hero--jugado .dp__marcador { font-size: 3.6rem; } /* La línea de los noventa. */ .dp__lt { position: relative; height: 92px; margin: var(--sp-2) var(--sp-6) 0; } .dp__lt-eje { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgb(255 255 255 / 0.25); } .dp__lt-eje i { position: absolute; top: 6px; transform: translateX(-50%); font-style: normal; font-size: var(--fs-2xs); color: var(--text-muted); } .dp__lt-eje i:first-child { transform: none; } .dp__lt-ev { position: absolute; left: var(--p); display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); white-space: nowrap; } .dp__lt-ev--arriba { bottom: calc(50% + 4px); flex-direction: column-reverse; } .dp__lt-ev--abajo { top: calc(50% + 4px); } .dp__lt-ev .i { width: 18px; height: 18px; color: var(--text-primary); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8)); } .dp__lt-ev--mio.dp__lt-ev--gol .i { color: var(--accent); } .dp__lt-ev > i { width: 9px; height: 13px; border-radius: 2px; background: var(--amber-300, #f5c542); } .dp__lt-ev--roja > i { background: var(--danger); } .dp__lt-ev small { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-primary); text-shadow: 0 1px 2px rgb(0 0 0 / 0.9); } .dp__lt-ev--tarjeta small, .dp__lt-ev--amarilla small, .dp__lt-ev--roja small { font-weight: 500; color: var(--text-secondary); } /* La grilla del informe: la cancha a la izquierda, las solapas a la derecha. */ .dp__grilla.dp__grilla--informe { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: 'cancha tabs' 'cancha panel'; align-items: start; } .dp__grilla--informe > .dp__nuestros { grid-area: cancha; } .dp__grilla--informe > .dp__tabs { grid-area: tabs; } .dp__grilla--informe > .dp__resumen, .dp__grilla--informe > .dp__juego { grid-area: panel; } .dp__grilla--informe[data-solapa='partido'] > .dp__juego { display: none; } .dp__grilla--informe[data-solapa='juego'] > .dp__resumen { display: none !important; } .dp__tabs .segmented { display: flex; width: 100%; } .dp__tabs .segmented__btn { flex: 1; min-height: 40px; font-size: var(--fs-md); } /* Tu once en la cancha. */ .dp__campo { position: relative; aspect-ratio: 105 / 68; width: 100%; border-radius: 8px; overflow: hidden; } .dp__tablero { position: absolute; inset: 0; width: 100%; height: 100%; } .dp__fc-nota--alta { background: var(--verde-400); color: #06120a; } .dp__fc-nota--media { background: var(--ink-700); } .dp__fc-nota--baja { background: var(--clay-400, #d9634c); color: #fff; } .dp__fm-tarj { display: inline-block; width: 8px; height: 11px; border-radius: 2px; background: var(--amber-300, #f5c542); } .dp__fm-tarj--r { background: var(--danger); } @media (max-width: 1100px) { .dp__grilla.dp__grilla--informe { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: 'cancha' 'tabs' 'panel'; } } @media (max-width: 720px) { .dp__lt { margin-inline: var(--sp-2); } .dp__lt-ev small { display: none; } } .dp__lt { height: 120px; } .dp__lt-ev--arriba { bottom: calc(50% + 4px + var(--n, 0) * 26px); } .dp__lt-ev--abajo { top: calc(50% + 4px + var(--n, 0) * 26px); } .dp__lt-eje i { color: var(--text-secondary); } /* Antes del partido: puestos vacíos, el nivel en la ficha y el pronóstico. */ .dp__fc-nota--nivel { background: rgb(0 0 0 / 0.78); color: var(--accent-texto); } .dp__pron { display: grid; gap: var(--sp-2); } .dp__pron-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .dp__pron-cifras span { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-hairline); border-radius: 8px; font-size: var(--fs-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-label); } .dp__pron-cifras b { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-primary); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; } .dp__pron-g b { color: var(--verde-300); } .dp__pron-p b { color: var(--clay-300); } .dp__rival-once { margin: 0; padding: 0; list-style: none; } .dp__rival-once .dia__jug { font-size: var(--fs-md); } /* ========================================================================== LA MESA DEL PARTIDO (2/10/2026): el Día de partido, antes y después, con el armado de la pantalla del partido y en una sola pantalla, sin scroll. ========================================================================== */ .dp.dp--mesa { display: grid; height: var(--alto-pantalla-sel); max-height: none; min-height: 0; grid-template-columns: 17.5rem minmax(0, 1fr) 23rem; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'izq hero dtab' 'izq hero dpan' 'izq cancha dpan'; gap: var(--sp-3); } .dp--mesa > .dp__grilla { display: contents; } .dp--mesa .dp__hero { grid-area: hero; } .dp--mesa .dp__nuestros { grid-area: izq; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .dp--mesa .dp__cancha-t { grid-area: cancha; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); } .dp--mesa .dp__tabs { grid-area: dtab; } .dp--mesa .dp__resumen, .dp--mesa .dp__juego { grid-area: dpan; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .dp--mesa[data-solapa='partido'] .dp__juego, .dp--mesa .dp__grilla[data-solapa='partido'] > .dp__juego { display: none; } .dp--mesa .dp__grilla[data-solapa='juego'] > .dp__resumen { display: none !important; } /* El marcador, compacto: va arriba de la cancha como en el partido. */ .dp--mesa .dp__cruce { gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); } .dp--mesa .dp__bandera { width: 54px; height: 36px; } .dp--mesa .dp__nombre { font-size: clamp(1.1rem, 1.6vw, 1.6rem) !important; } .dp--mesa .dp__marcador { font-size: 2.4rem !important; } .dp--mesa .dp__estadio { display: none; } .dp--mesa .dp__botones .action { min-height: 32px; padding-inline: var(--sp-4); font-size: var(--fs-sm); } .dp--mesa .dp__lado { gap: var(--sp-3); } /* La cancha. */ .dp__campo--mesa { position: relative; flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: 105 / 68; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.9); } .dp__ch { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: clamp(24px, 2.4vw, 34px); height: clamp(24px, 2.4vw, 34px); z-index: 1; animation: sorteo-entra 200ms var(--ease) both; animation-delay: calc(var(--i, 0) * 10ms); } .dp__ch-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.7)); } .dp__ch-svg text { font-size: 0.8px; font-weight: 800; } .dp__ch-nota { position: absolute; top: -9px; left: 62%; min-width: 1.9rem; height: 17px; padding: 0 4px; border-radius: 4px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgb(0 0 0 / 0.6); } .dp__ch-estrella { position: absolute; bottom: -6px; left: -6px; font-style: normal; font-size: 13px; color: var(--accent); text-shadow: 0 1px 2px #000; } .dp__ch-gol { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; white-space: nowrap; } .dp__ch--vacio { display: grid; place-items: center; border-radius: 50%; border: 2px dashed rgb(255 255 255 / 0.55); background: rgb(0 0 0 / 0.25); color: #fff; font-size: 9px; font-weight: 800; } .dp__cancha-t .dp__lt { width: 100%; height: 76px; margin: 0; flex: none; } .dp__cancha-t .dp__lt-ev small { font-size: 10px; } /* La alineación. */ .dp__als { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .dp__al { display: grid; grid-template-columns: 2.6rem 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 26px; padding: 2px var(--sp-2); border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); } .dp__al:last-child { border-bottom: 0; } .dp__al-pos { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--text-muted); } .dp__al-n { font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; } .dp__al-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; } .dp__al-nom i { font-style: normal; font-size: var(--fs-2xs); font-weight: 700; } .dp__al-sale { color: var(--clay-300); } .dp__al-entra { color: var(--verde-300); } .dp__al-as { color: var(--text-secondary); } .dp__al-nota { display: inline-grid; place-items: center; min-width: 2.2rem; height: 20px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; } .dp__al-niv { font-size: var(--fs-xs); color: var(--text-primary); font-variant-numeric: tabular-nums; } .dp__al--vacio .dp__al-nom { color: var(--text-muted); font-weight: 500; font-style: italic; } .dp__al-prom { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .dp__al-cta { align-self: flex-start; margin: var(--sp-2) 0 0; } .dp__al-fuera { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); } .dp__al-fuera i { font-style: normal; color: var(--text-muted); margin-right: 3px; } .dp--mesa .dp__als--banco .dp__al { min-height: 23px; font-size: var(--fs-xs); } @media (max-width: 1100px) { .dp.dp--mesa { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'hero' 'cancha' 'izq' 'dtab' 'dpan'; } .dp__campo--mesa { height: auto; width: 100%; } .dp--mesa .dp__resumen, .dp--mesa .dp__juego { overflow: visible; } } /* El panel de la derecha entra entero: sucesos en un renglón, sin el país abajo (lo dice la barra amarilla), figura y números más apretados. */ .dp--mesa .dp__suceso { padding: 3px var(--sp-2); font-size: var(--fs-sm); } .dp--mesa .dp__suceso-txt small { display: none; } .dp--mesa .dp__suceso-txt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp--mesa .dp__figura { padding: var(--sp-2) var(--sp-3); } .dp--mesa .dp__figura b { font-size: var(--fs-lg); } .dp--mesa .dp__numeros { gap: 2px; } .dp--mesa .dp__numeros li { font-size: var(--fs-sm); } .dp--mesa .dp__resumen, .dp--mesa .dp__juego { gap: var(--sp-2); } .dp__cancha-t .dp__lt { height: 96px; } .dp__cancha-t .dp__lt-ev--arriba { bottom: calc(50% + 4px + var(--n, 0) * 20px); } .dp--mesa .dp__tabla li:not(.dp__raya) { padding: 3px var(--sp-2) !important; font-size: var(--fs-sm) !important; } .dp--mesa .dp__tabla { gap: 0; margin-bottom: var(--sp-2); } .dp--mesa .dp__tabla-cols { font-size: 10px; } .dp--mesa .dp__quedan li { padding: 3px var(--sp-2); font-size: var(--fs-sm); } .dp--mesa .dp__hist li { padding-block: 3px; } .dp--mesa .dp__tabla-cab { margin: 0 0 var(--sp-1) !important; } .dp--mesa .dp__si { gap: 4px; } .dp--mesa .dp__si li { padding: 4px var(--sp-2); } .dp--mesa .dp__juego .dp__nota { display: none; } .dp--mesa .dp__juego .panel__head { display: none; } /* ========================================================================== LA PREVIA COMO LA PANTALLA DEL PARTIDO (2/10/2026). La alineación a la izquierda, el cruce compacto arriba de la cancha, el planteo y el rival en solapas a la derecha; en una pantalla, sin scroll. ========================================================================== */ .dsel--mesa:has(> .dsel__grilla:not([hidden])) { display: grid; height: var(--alto-pantalla-sel); max-height: none; grid-template-columns: 17.5rem minmax(0, 1fr) 23rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'izq hero der' 'izq cancha der'; gap: var(--sp-3); } .dsel--mesa:has(> .dsel__grilla:not([hidden])) > .dsel__grilla { display: contents; } .dsel--mesa .dsel__hero { grid-area: hero; } .dsel--mesa .dsel__lista { grid-area: izq; } .dsel--mesa .dsel__cancha { grid-area: cancha; } .dsel--mesa .dsel__lado { grid-area: der; min-height: 0; } .dsel--mesa .dsel__falta { grid-column: 1 / -1; } /* El cruce, compacto: banderas chicas, el botón al lado y no colgando. */ .dsel--mesa .dsel__hero { display: grid; grid-template-columns: minmax(0, 1fr); } .dsel--mesa .dsel__hero .dia__cruce { padding: var(--sp-2) var(--sp-4) !important; gap: var(--sp-3); } .dsel--mesa .dsel__hero .dia__insignia { width: 44px; height: 44px; } .dsel--mesa .dsel__hero .dia__escudo { height: 40px; } .dsel--mesa .dsel__hero .dia__nombre { font-size: clamp(1.1rem, 1.4vw, 1.5rem); } .dsel--mesa .dsel__hero .dia__marcador { font-size: 1.8rem; } .dsel--mesa .dsel__cta { position: static; transform: none; padding: 0 var(--sp-4) var(--sp-3); display: flex; justify-content: center; } .dsel--mesa .dsel__cta .dia__mandos { display: flex; align-items: center; gap: var(--sp-3); } .dsel--mesa .dsel__cta .action--grande { min-height: 36px; padding-inline: var(--sp-5); font-size: var(--fs-md); } /* La alineación, compacta como la del partido. */ .dsel--mesa .dsel__lista .dia__quien-btn { min-height: 25px; padding: 2px var(--sp-2); font-size: var(--fs-sm); grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .dsel--mesa .dsel__lista .dia__grupo { margin-bottom: var(--sp-1); } .dsel--mesa .dsel__lista .dia__grupo-cab { margin-top: var(--sp-2); } .dsel--mesa .dsel__lista .dia__ver-ficha { width: 22px; height: 22px; } .dsel--mesa .dsel__lista .dsel__grupos { overflow: hidden; } /* La derecha, en solapas. */ .dsel__lado-tabs { display: flex; width: 100%; } .dsel__lado-tabs .segmented__btn { flex: 1; min-height: 40px; font-size: var(--fs-md); } .dsel--mesa .dsel__lado[data-ver='planteo'] .dsel__rival, .dsel--mesa .dsel__lado[data-ver='rival'] .dsel__planteo { display: none; } .dsel--mesa .dsel__lado > .tarjeta { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .dsel--mesa .dsel__rival .dsel__rival-lista { overflow: visible; } /* Las fichas, como en el partido: más chicas. */ .dsel--mesa .dia__ficha-n--disco, .dsel--mesa .dia__disco { width: 32px; height: 32px; } .dsel--mesa .dia__ficha-nom { font-size: 10.5px; } .dsel--mesa .dsel__pista { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); } @media (max-width: 1100px) { .dsel--mesa:has(> .dsel__grilla:not([hidden])) { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'hero' 'cancha' 'izq' 'der'; } .dsel--mesa .dsel__lista .dsel__grupos { overflow: visible; } .dsel--mesa .dsel__lista .dia__quien-btn { min-height: 40px; } } .dsel--mesa .dsel__lista .dsel__grupos { overflow-y: auto; scrollbar-width: thin; } @media (max-height: 860px) { .dsel--mesa .dsel__lista .dia__quien-btn { min-height: 22px; padding-block: 1px; font-size: var(--fs-xs); } .dsel--mesa .dsel__lista .dia__grupo-cab { margin-top: var(--sp-1); } .dsel--mesa .dsel__lista .dia__orden { padding-block: 0 2px; } .dsel--mesa .dsel__hero .dia__cruce { padding-block: var(--sp-1) !important; } .dsel--mesa .dsel__cta { padding-bottom: var(--sp-2); } } .dsel--mesa:has(> .dsel__grilla:not([hidden])) { grid-template-columns: 19.5rem minmax(0, 1fr) 23rem; } .dsel--mesa .dsel__planteo .dia__planteo-cuerpo--plan { justify-content: flex-start; gap: var(--sp-4); } .dsel--mesa .dsel__planteo .dia__planteo-cuerpo { flex: none; } /* ========================================================================== LA CONVOCATORIA, REDISEÑADA (2/10/2026): tu lista como un listado único en orden de puesto, con la chapa de color de cada puesto, al lado de los candidatos. ========================================================================== */ .cvsel__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } .cvl { display: grid; gap: 0; margin: 0; padding: 0 var(--sp-2) 0 0; list-style: none; } .cvl__cab { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-4); padding: 0 var(--sp-1) 5px; border-bottom: 2px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); } .cvl__cab:first-child { margin-top: 0; } .cvl__cab b { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .cvl__cab em { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--clay-300); } .cvl__j { display: grid; grid-template-columns: 2rem 3.2rem minmax(0, 1.4fr) minmax(0, 1fr) 2rem 4.4rem 24px; align-items: center; gap: var(--sp-3); min-height: 36px; padding: 2px var(--sp-1); border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-md); } @media (hover: hover) { .cvl__j:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } } .cvl__j--entra { box-shadow: inset 3px 0 0 var(--accent); } .cvl__num { text-align: right; color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .cvl__pos { display: inline-grid; place-items: center; height: 22px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.04em; color: #0b0d10; } .cvl__pos--POR { background: #f2c14e; } .cvl__pos--DEF { background: #6fa8ff; } .cvl__pos--MED { background: #57d68d; } .cvl__pos--DEL { background: #ff7a6b; } .cvl__nom, .cvl__nom a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-primary); text-decoration: none; } .cvl__club { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: var(--fs-sm); } .cvl__club > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvl__escudo { width: 20px; height: 20px; flex: none; } .cvl__edad { text-align: right; color: var(--text-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .cvl__niv { font-style: normal; text-align: right; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .cvl__sacar { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 12px; cursor: pointer; } @media (hover: hover) { .cvl__sacar:hover { background: var(--danger); color: #fff; } } .cvl__libres { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); } @media (max-width: 1100px) { .cvsel__grilla { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .cvl__j { grid-template-columns: 1.6rem 3rem minmax(0, 1fr) 4rem 24px; } .cvl__club, .cvl__edad { display: none; } } /* Con la cancha al lado, la tabla de candidatos queda en lo que decide: el nombre, el puesto, la edad, el club y el nivel; lo demás está en la ficha. */ @media (max-width: 1900px) { .cvsel .convoc__tabla tr:not(.convoc__grupo):not(.convoc__nadie):not(.convoc__mas) > :is(th, td):is(:nth-child(7), :nth-child(8), :nth-child(9)) { display: none; } } .cvsel .convoc__tabla { min-width: 0 !important; } .cvsel .convoc__tabla tr:not(.convoc__grupo):not(.convoc__nadie):not(.convoc__mas) > :is(th, td):is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) { display: none; } .cvsel .convoc__tabla td.convoc__club { max-width: 11rem; } @media (max-width: 1400px) { .cvsel .convoc__tabla td.convoc__club { max-width: 7.5rem; font-size: var(--fs-sm); } .cvsel .convoc__tabla .convoc__quien b, .cvsel .convoc__tabla .convoc__quien a { font-size: var(--fs-md); } .cvsel .convoc__accion .action { min-width: 0; padding: 0 var(--sp-3); } } /* La tabla ya no rueda de costado: el nombre y el botón dejan de ser fijos y toman el fondo del renglón. */ .cvsel .convoc__tabla .convoc__quien, .cvsel .convoc__tabla .convoc__accion { position: static; background: transparent !important; } .cvsel .convoc__fila--dentro .convoc__quien { box-shadow: inset 3px 0 0 var(--accent); } /* ========================================================================== LA PLANTILLA, REDISEÑADA (2/10/2026): por línea con su rótulo, el puesto en su chapa de color, el nivel al frente y cada habilidad en un bloque del color de lo que vale. ========================================================================== */ .plsel__tabla td, .plsel__tabla th[scope="row"] { padding-top: 5px; padding-bottom: 5px; } .plsel__quien-txt small { font-size: var(--fs-xs); } .pla__linea th { padding: var(--sp-3) var(--sp-2) 5px !important; text-align: left; background: var(--bg-panel) !important; border-bottom: 2px solid var(--line-strong) !important; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); } .pla__linea th b { margin-left: var(--sp-2); color: var(--text-secondary); } .pla__linea th small { margin-left: var(--sp-3); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); } .pla__linea--POR th { box-shadow: inset 4px 0 0 #f2c14e; } .pla__linea--DEF th { box-shadow: inset 4px 0 0 #6fa8ff; } .pla__linea--MED th { box-shadow: inset 4px 0 0 #57d68d; } .pla__linea--DEL th { box-shadow: inset 4px 0 0 #ff7a6b; } .plsel__tabla .cvl__pos { min-width: 3rem; padding: 0 4px; } .pla__niv { display: inline-grid; place-items: center; min-width: 2.6rem; height: 26px; padding: 0 6px; border-radius: 6px; background: var(--ink-800); font-size: var(--fs-md); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .plh { display: inline-grid; place-items: center; min-width: 2.6rem; height: 24px; padding: 0 5px; border-radius: 5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .plh--a5 { background: color-mix(in srgb, #3fd47c 55%, transparent); color: #fff; } .plh--a4 { background: color-mix(in srgb, #3fd47c 30%, transparent); } .plh--a3 { background: color-mix(in srgb, #ffffff 9%, transparent); } .plh--a2 { background: color-mix(in srgb, #f2a33a 28%, transparent); } .plh--a1 { background: color-mix(in srgb, #ff6b5a 38%, transparent); } .plh--niebla { font-style: italic; font-weight: 600; font-size: var(--fs-xs); min-width: 3.6rem; } /* ========================================================================== EL ENTRENAMIENTO, REDISEÑADO (2/10/2026). La semana en una tira arriba, lo ensayado a la izquierda, la cancha con tu once en el medio y los trabajos en solapas por familia a la derecha. ========================================================================== */ .entsel { display: flex; flex-direction: column; } .entsel__semana { flex: none; padding-bottom: var(--sp-3); } .ent__dias--tira { display: flex; flex-direction: row; gap: var(--sp-2); padding: 0 !important; overflow-x: auto; } .ent__dias--tira::before { display: none !important; } .ent__dias--tira .ent__dia { flex: 1 1 0; min-width: 9rem; border: 1px solid var(--line-hairline) !important; border-radius: 10px !important; padding: var(--sp-2) var(--sp-3) !important; } .ent__dias--tira .ent__dia::before { display: none; } .ent__dias--tira .ent__dia--activo { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent) !important; } .ent__dias--tira .ent__dia--hecho { border-left: 3px solid var(--verde-400) !important; } .ent__dias--tira .ent__dia--vacio .ent__dia-que { font-style: normal; color: var(--text-muted); } .ent__dias--tira .ent__hito { flex: 0 0 auto; display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 7.5rem; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); text-align: center; } .ent__dias--tira .ent__hito::before { display: none; } .ent__dias--tira .ent__hito span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .ent__dias--tira .ent__hito b { font-size: var(--fs-md); color: var(--text-primary); } /* Lo ensayado. */ .entsel .ent__izq { display: flex; flex-direction: column; } .entsel .ent__parte { flex: 1 1 auto; min-height: 0; padding: 0; overflow: visible; } .entsel .ent__rubros { gap: var(--sp-4); } .entsel .ent__rubro { gap: 6px; font-size: var(--fs-md); } .entsel .ent__rubro-n { color: var(--text-primary); font-weight: 600; } .entsel .ent__rubro-v { color: var(--text-secondary); font-weight: 500; font-size: var(--fs-sm); } .entsel .ent__rubro-barra { height: 8px; } /* Tu once en la cancha. */ .ent__jug { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; z-index: 1; transition: opacity var(--dur) var(--ease); } .ent__jug-disco { display: block; width: 34px; height: 34px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.6)); } .ent__jug-disco text { font-size: 0.8px; font-weight: 800; } .ent__jug-nom { padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / 0.72); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .ent__jug--fuera { opacity: 0.28; } /* Los trabajos, en solapas. */ .entsel .ent__der { display: flex; flex-direction: column; } .entsel .ent__catalogo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: var(--sp-2); } .ent__fams { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-3); } .ent__fam { padding: 5px var(--sp-3); border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; } .ent__fam--vista { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .ent__fam--puesta:not(.ent__fam--vista) { border-color: var(--accent); color: var(--accent-texto); } .entsel .ent__familia { margin-top: 0; padding: 0; border: 0; } .entsel .ent__opciones { display: grid; gap: var(--sp-2); } .entsel .ent__op { border: 1px solid var(--line-hairline) !important; border-radius: 10px !important; padding: var(--sp-2) var(--sp-3) !important; gap: 3px; } .entsel .ent__op--puesta { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; } .entsel .ent__op-n { font-size: var(--fs-md); } .ent__op-pie { font-size: var(--fs-xs); line-height: 1.3; color: var(--text-secondary); } @media (max-width: 720px) { .ent__dias--tira .ent__dia { min-width: 7.5rem; } .ent__jug-nom { display: none; } .ent__jug-disco { width: 26px; height: 26px; } } .ent__op-pie { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== EL SCOUTING, REDISEÑADO (2/10/2026): el mundo con dónde juega tu gente, el país elegido debajo y el resto en solapas a la derecha. ========================================================================== */ .scsel__grilla--mapa { grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 1fr) !important; } .scsel__t--plazas { display: flex; flex-direction: column; } .scsel__mapa-caja { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; scrollbar-width: thin; padding-right: var(--sp-2); } .scmap { position: relative; width: 100%; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #142233, #0c141e 75%); overflow: hidden; } .scmap svg { display: block; width: 100%; height: auto; } .scmap svg path { fill: #26303a; stroke: #0c141e; stroke-width: 0.5; } .scmap svg path.scmap__p { cursor: pointer; transition: fill var(--dur-fast) var(--ease); } .scmap__p--0 { fill: #34404c !important; } .scmap__p--1 { fill: color-mix(in srgb, var(--accent) 30%, #26303a) !important; } .scmap__p--2 { fill: color-mix(in srgb, var(--accent) 50%, #26303a) !important; } .scmap__p--3 { fill: color-mix(in srgb, var(--accent) 72%, #26303a) !important; } .scmap__p--4 { fill: var(--accent) !important; } .scmap__p--ojos { stroke: #6fa8ff !important; stroke-width: 1.4 !important; } .scmap__p--visto { stroke: #57d68d !important; stroke-width: 1.8 !important; } .scmap__p--elegido { stroke: #fff !important; stroke-width: 2.4 !important; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.5)); } @media (hover: hover) { .scmap svg path.scmap__p:hover { fill: #fff !important; } } .scmap__leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--text-secondary); } .scmap__leyenda span { display: inline-flex; align-items: center; gap: 4px; } .scmap__ley { display: inline-block; width: 14px; height: 10px; border-radius: 2px; } .scmap__ley.scmap__p--1 { background: color-mix(in srgb, var(--accent) 30%, #26303a); } .scmap__ley.scmap__p--4 { background: var(--accent); margin-right: 4px; } .scmap__ley--visto { border: 2px solid #57d68d; } .scmap__ley--ojos { border: 2px solid #6fa8ff; } .scmap__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .scmap__chip { padding: 3px var(--sp-3); border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-xs); cursor: pointer; } .scmap__chip--elegido { border-color: var(--accent); color: var(--accent-texto); } .scpais { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line-hairline); border-radius: 10px; } .scpais__cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4); } .scpais__cab img { border-radius: 3px; object-fit: cover; box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.7); } .scpais__cab b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); } .scpais__cab small { color: var(--text-secondary); } .scpais__dato { display: grid; justify-items: end; gap: 3px; } .scpais__dato b { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-texto); } .scpais__exacto { color: var(--verde-300) !important; } .scpais__suyos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); margin: 0; padding: 0; list-style: none; } .scpais__suyos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--line-hairline); } .scpais__suyos b, .scpais__suyos a { color: var(--text-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .scpais__suyos small { grid-column: 1; color: var(--text-muted); font-size: var(--fs-xs); } .scpais__suyos i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-weight: 800; color: var(--text-primary); } .scpais__gente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .scpais__gente > .label { width: 100%; } .scsel__col--tabs { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; } .scsel__tabs { display: flex; width: 100%; flex: none; } .scsel__tabs .segmented__btn { flex: 1; min-height: 40px; font-size: var(--fs-md); } .scsel__col--tabs .scsel__tab { flex: 1 1 auto; min-height: 0; } .scsel__col--tabs[data-ver='mercado'] .scsel__tab:not(.scsel__tab--mercado), .scsel__col--tabs[data-ver='tecnico'] .scsel__tab:not(.scsel__tab--tecnico), .scsel__col--tabs[data-ver='pibes'] .scsel__tab:not(.scsel__tab--pibes) { display: none; } @media (max-width: 1100px) { .scsel__grilla--mapa { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 720px) { .scpais__cab { grid-template-columns: auto minmax(0, 1fr); } .scpais__suyos { grid-template-columns: 1fr; } } /* Más grande y más legible (2/10/2026, «agrandemos un poco texto y banderas»). */ .scsel .scsel__mini { width: 36px; height: 24px; border-radius: 3px; } .scsel .ojeo2__tabla, .scsel .ojeo2__tabla td { font-size: var(--fs-md); } .scsel .ojeo2__nombre { font-size: var(--fs-lg); font-weight: 700; } .scsel .scsel__ojeador-txt .label { font-size: var(--fs-xs); } .scsel .ojeo2__tabla td { padding-top: 9px; padding-bottom: 9px; } .scsel .ojeo2__tabla .action--mini { min-height: 32px; padding-inline: var(--sp-4); font-size: var(--fs-sm); } .scsel .ojeo2__ojos { font-size: var(--fs-md); letter-spacing: 1px; } .scmap__leyenda { font-size: var(--fs-sm); } .scpais__cab img { width: 72px; height: 48px; } .scpais__cab b { font-size: var(--fs-2xl); } .scpais__cab small { font-size: var(--fs-md); } .scpais__dato { align-self: center; } .scpais__dato .label { font-size: var(--fs-xs); } .scpais__dato .plaza__ojos i { width: 11px; height: 11px; } .scpais__dato b { font-size: var(--fs-xl); } .scpais__suyos li { padding: 8px 0; } .scpais__suyos b, .scpais__suyos a { font-size: var(--fs-lg); } .scpais__suyos small { font-size: var(--fs-sm); } .scpais__suyos i { font-size: var(--fs-lg); } .scpais__gente .plaza__nadie { font-size: var(--fs-md); } .scsel .ojeo2__tabla--tec .ojeo2__nombre { font-size: var(--fs-lg); } .scsel .ojeo2__extra, .scsel .ojeo2__tabla--tec .label { font-size: var(--fs-sm); } .scsel .informe__cab b { font-size: var(--fs-lg); } .scsel .informe__gente b, .scsel .informe__gente a { font-size: var(--fs-md); } .scmap svg { width: 100%; height: auto; } .scmap__mundo { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; } .scmap svg path { vector-effect: non-scaling-stroke; } .scmap__p--elegido { stroke-width: 2.5 !important; } .scsel .ojeo2__tabla { min-width: 0; } @media (max-width: 720px) { .scsel .ojeo2__tabla th:nth-child(2), .scsel .ojeo2__tabla td:nth-child(2) { display: none; } } /* El mapa no se achica: se ve entero, y lo que se ajusta es el resto. */ .scmap { flex: none; } .scpais { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); } .scpais__suyos li { padding: 4px 0; } .scmap__leyenda { flex: none; } .scmap { font-size: 0; line-height: 0; } .scmap__mundo { font-size: var(--fs-sm); line-height: 1.2; } @media (max-height: 860px) { .scpais__suyos li:nth-child(n+3) { display: none; } .scpais__cab img { width: 54px; height: 36px; } } .scpais__dato { align-self: end; justify-items: end; } .scpais__dato .label { line-height: 1; } .scpais__cab { align-items: end; } .scpais__gente { gap: 6px var(--sp-2); } /* ========================================================================== LA OFICINA, REDISEÑADA (2/10/2026): el ciclo de cuatro años en una línea arriba, la federación con la curva de su confianza, la campaña con la forma de los resultados, y los récords y el recorrido a la derecha. ========================================================================== */ .ofisel { display: flex; flex-direction: column; } .ofisel__ciclo--tira { flex: none; } .ofisel__ciclo--tira .ofisel__anos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--sp-3); padding: 22px 0 0; flex: none; } .ofisel__ciclo--tira .ofisel__anos::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; } .ofisel__ciclo--tira .ofisel__ano { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 4px; align-content: start; padding: var(--sp-3) var(--sp-3) var(--sp-3); border: 1px solid var(--line-hairline) !important; border-radius: 10px; animation: none; } .ofisel__ciclo--tira .ofisel__ano::before { left: 50%; top: -23px; margin-top: 0; margin-left: -7px; } .ofisel__ciclo--tira .ofisel__ano-n { grid-row: auto; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; } .ofisel__ciclo--tira .ofisel__ano-n b { font-size: var(--fs-2xl); } .ofisel__ciclo--tira .ofisel__ano-que b { font-size: var(--fs-lg); } .ofisel__ciclo--tira .ofisel__ano-det { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ofisel__ciclo--tira .ofisel__ano--hoy { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); } /* La curva de la confianza. */ .ofc { display: grid; gap: 4px; margin-bottom: var(--sp-3); } .ofc__svg { width: 100%; height: 150px; overflow: visible; } .ofc__zona { fill: transparent; } .ofc__zona--mal { fill: color-mix(in srgb, var(--danger) 14%, transparent); } .ofc__raya { stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .ofc__raya--despido { stroke: var(--clay-300); } .ofc__raya--renueva { stroke: var(--text-muted); } .ofc__raya--oferta { stroke: var(--verde-300); } .ofc__rot { font-size: 7px; font-weight: 700; } .ofc__rot--despido { fill: var(--clay-300); } .ofc__rot--renueva { fill: var(--text-muted); } .ofc__rot--oferta { fill: var(--verde-300); } .ofc__area { fill: color-mix(in srgb, var(--accent) 16%, transparent); } .ofc__linea { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; } .ofc__hoy { fill: var(--accent); stroke: var(--bg-panel); stroke-width: 2; } .ofc__eje { display: flex; justify-content: space-between; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* La forma. */ @media (max-width: 1100px) { .ofisel__ciclo--tira .ofisel__anos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ofisel__ciclo--tira .ofisel__ano-n { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--sp-3); text-align: left; } .ofisel__ciclo--tira .ofisel__ano-n .label { display: inline-flex; align-items: center; gap: 4px; margin: 0; text-align: left; } .ofisel__ciclo--tira .ofisel__ano-n .label .conf-logo { margin: 0 4px 0 0 !important; } .ofisel__ciclo--tira .ofisel__estado { justify-self: start; } .ofc__svg { height: 180px; } /* ========================================================================== LA OFICINA, TERCERA VUELTA (2/10/2026). Arriba tu contrato (5) y el ciclo (7); abajo tu campaña (7) y los récords, el recorrido y la salida (5). ========================================================================== */ .ofi3 { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'contrato ciclo' 'contrato campana' ; } .ofi3 { grid-template-areas: 'contrato ciclo' 'lado campana'; grid-template-rows: minmax(0, auto) minmax(0, 1fr); } .ofi3__contrato { grid-area: contrato; } .ofi3__ciclo { grid-area: ciclo; } .ofi3__campana { grid-area: campana; min-height: 0; } .ofi3__lado { grid-area: lado; display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; } .ofi3__lado > .tarjeta { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .ofi3 .tarjeta { min-width: 0; display: flex; flex-direction: column; } .ofi3__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; } /* El reloj. */ .ofi3__reloj { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-4); } .ofr { width: 100%; max-width: 260px; justify-self: center; overflow: visible; } .ofr__tramo { fill: none; stroke-width: 16; } .ofr__tramo--mal { stroke: var(--danger); } .ofr__tramo--floja { stroke: #e0a23a; } .ofr__tramo--firme { stroke: var(--ink-600, #3b4450); } .ofr__tramo--top { stroke: var(--verde-400); } .ofr__aguja { stroke: var(--text-primary); stroke-width: 3.5; stroke-linecap: round; } .ofr__eje { fill: var(--text-primary); } .ofr__n { font-size: 30px; font-weight: 800; fill: var(--text-primary); } .ofr__p { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--accent-texto); } .ofi3__datos { display: grid; gap: 0; margin: 0; } .ofi3__datos div { display: grid; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--line-hairline); } .ofi3__datos div:last-child { border-bottom: 0; } .ofi3__datos dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .ofi3__datos dd { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .ofi3__reglas { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .ofi3__reglas th, .ofi3__reglas td { padding: 6px var(--sp-2); border-bottom: 1px solid var(--line-hairline); text-align: center; } .ofi3__reglas thead th { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .ofi3__reglas tbody th { text-align: left; font-weight: 600; color: var(--text-primary); } .ofi3 .sube { color: var(--verde-300); } .ofi3 .baja { color: var(--clay-300); } .ofi3__nota { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-secondary); } /* El ciclo, con lo que te juega cada año. */ .ofi3__ciclo .ofisel__anos { padding-top: 22px; } .ofisel__juega { font-size: var(--fs-xs); color: var(--text-secondary); } .ofisel__juega b { font-weight: 800; } /* La campaña. */ .ofi3__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); } .ofi3__kpi { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-hairline); border-radius: 8px; } .ofi3__kpi b { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ofi3__kpi b i { font-style: normal; font-size: 0.55em; color: var(--text-muted); margin-right: 2px; } .ofi3__kpi span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .ofi3__primero { display: flex; flex-direction: column; gap: var(--sp-3); } .ofi3__primero-tit { margin: 0; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 800; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--text-primary); } .ofi3__cruces { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .ofi3__cruces li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-hairline); border-radius: 10px; } .ofi3__cr-cuando { display: grid; font-size: var(--fs-xs); color: var(--text-secondary); text-transform: capitalize; } .ofi3__cr-cuando b { font-size: var(--fs-md); color: var(--text-primary); } .ofi3__cr-eq { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .ofi3__cr-eq b { font-size: var(--fs-lg); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofi3__cr-eq small { color: var(--text-muted); } .ofi3__cr-eq .parts__pano { width: 36px; height: 24px; } .ofi3__cruces em { font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-transform: uppercase; } .ofi3__cr-comp { display: inline-flex; align-items: center; font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; } .ofi3__ir { display: flex; gap: var(--sp-2); } @media (max-width: 1100px) { .ofi3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'contrato' 'ciclo' 'campana' 'lado'; grid-template-rows: none; } .ofi3__cruces li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .ofi3__cr-cuando, .ofi3__cr-comp { grid-column: 1 / -1; } } @media (max-width: 720px) { .ofi3__reloj { grid-template-columns: 1fr; } .ofi3__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ofi3 { grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr) !important; } .ofi3__contrato .ofc__svg { height: 110px; } .ofi3__contrato .ofc { margin-bottom: var(--sp-2); } .ofi3__ciclo .ofisel__anos { flex: 1 1 auto; align-content: start; } .ofi3 { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important; } .ofi3__contrato .ofc__svg { height: 90px; } .ofi3__lado .ofisel__extremos { gap: 6px; } .ofi3__lado .ofisel__extremo { padding: 6px var(--sp-3); } .ofi3__lado .ofisel__extremo .label { font-size: 10px; } .ofi3__lado .ofisel__recorrido { flex: 1 1 auto; } .ofi3__salida { margin-top: auto; padding-top: var(--sp-3); display: flex; justify-content: flex-end; } .ofi3__renunciar { border-color: color-mix(in srgb, var(--danger) 60%, transparent) !important; color: var(--clay-300) !important; } @media (hover: hover) { .ofi3__renunciar:hover { background: var(--danger) !important; color: #fff !important; } } .ofi3__cr-cuando { text-transform: none; } .ofi3__contrato .ofc__eje { display: none; } .ofi3__contrato .ofc__rot { display: none; } .ofi3__ciclo .ofisel__anos { grid-auto-rows: 1fr; flex: 1 1 auto; } .ofi3__ciclo .ofisel__ano { align-content: start; } .ofi3__ciclo .ofisel__juega { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line-hairline); } .ofi3__ciclo .ofisel__ano { display: flex; flex-direction: column; } .ofi3__ciclo .ofisel__estado { align-self: flex-start; margin-top: var(--sp-1); } /* La campaña en dos columnas: las cifras y la forma a la izquierda, partido por partido a la derecha, con su propio rollo. */ .ofi3__campana .ofi3__cuerpo { overflow: hidden; } .ofi3__dos { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); } .ofi3__col { min-height: 0; display: flex; flex-direction: column; } .ofi3__col .ofisel__pps { flex: 1 1 auto; min-height: 0; } .ofi3__col .ofisel__pp { padding: 6px var(--sp-2); } /* El contrato: el reloj más chico y los datos de a dos. */ .ofi3__reloj { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); gap: var(--sp-3); } .ofi3__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-3); } .ofi3__datos div:nth-last-child(2) { border-bottom: 0; } .ofi3__contrato .ofc__svg { height: 70px; } @media (max-width: 1100px) { .ofi3__dos { grid-template-columns: minmax(0, 1fr); } } .ofi3__contrato .ofc__svg { height: 100px; } .ofi3__dos { column-gap: var(--sp-6, 2rem); } .ofi3__dos > .ofi3__col + .ofi3__col { padding-left: var(--sp-4); border-left: 1px solid var(--line-hairline); } /* ========================================================================== EL INFORME DEL AÑO, DE LA MISMA MANERA (2/10/2026): una sola pantalla, sin scroll. La franja con el balance, el centro con cinco solapas y el diagnóstico al costado. Líneas finas, sin fondos grises. ========================================================================== */ .inf { gap: var(--sp-3); min-height: 0; } .inf2__hero { padding-block: var(--sp-3); } .inf2__hero .parsel__titulo { white-space: nowrap; } .inf2__anio { color: var(--accent-texto); } .inf2__sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); } .inf2__anos { display: inline-flex; gap: 4px; } .inf2__anos .inf__ano { padding: 1px var(--sp-2); background: none; border: 1px solid var(--line-hairline); font-size: var(--fs-xs); } .inf2__anos .inf__ano--este { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } @media (hover: hover) { .inf2__anos .inf__ano:not(.inf__ano--este):hover { border-color: var(--accent); color: var(--text-primary); } } .inf2__numeros li:nth-child(2) b { font-size: var(--fs-xl); } .inf2__numeros .inf__gep { height: 5px; margin-top: 4px; } .inf2 { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); } .inf2 .tarjeta { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .inf2__head { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } .inf2__solapas .segmented__btn { min-height: 36px; padding-inline: var(--sp-4); font-size: var(--fs-md); } .inf2__veredicto { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: var(--sp-2); padding: 4px var(--sp-3); border-left: 3px solid var(--text-muted); } .inf2__veredicto span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .inf2__veredicto b { font-size: var(--fs-md); color: var(--text-primary); } .inf2__veredicto--bien, .inf2__veredicto--bueno, .inf2__veredicto--ok { border-color: var(--verde-400); } .inf2__veredicto--bien b, .inf2__veredicto--bueno b, .inf2__veredicto--ok b { color: var(--verde-300); } .inf2__veredicto--mal, .inf2__veredicto--malo, .inf2__veredicto--peligro { border-color: var(--danger); } .inf2__veredicto--mal b, .inf2__veredicto--malo b, .inf2__veredicto--peligro b { color: var(--clay-300); } .inf2__panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: sorteo-entra 160ms var(--ease) both; } /* Los bloques de cada solapa. */ .inf2__dos { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .inf2__dos--ano { grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr); } .inf2__dos--tac { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .inf2__dos > .inf2__bloque + .inf2__bloque { padding-left: var(--sp-5); border-left: 1px solid var(--line-hairline); } .inf2__bloque { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .inf2__rollo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Partido a partido. */ .inf2__partidos th { background: var(--bg-raised); border-bottom: 1px solid var(--line-hairline); } .inf2__partidos td { border-top: 0; border-bottom: 1px solid var(--line-hairline); padding-block: 7px; } .inf2__partidos .inf__p-cuando { display: table-cell; } .inf2__partidos .inf__p-cuando b { display: block; color: var(--text-primary); font-size: var(--fs-sm); } .inf2__partidos .inf__p-cuando small { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } .inf2__partidos .inf__p-rival { display: flex; align-items: center; gap: var(--sp-2); } .inf2__partidos .inf__p-rival span { color: var(--text-primary); font-weight: 600; font-size: var(--fs-md); } .inf2__partidos .inf__p-rival small { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } .inf2__partidos tr { box-shadow: inset 3px 0 0 transparent; } .inf2__partidos .inf__p--g { box-shadow: inset 3px 0 0 var(--verde-400); } .inf2__partidos .inf__p--p { box-shadow: inset 3px 0 0 var(--danger); } .inf2__partidos .inf__p--e { box-shadow: inset 3px 0 0 var(--text-muted); } .inf2__partidos td:first-child { padding-left: var(--sp-3); } .inf2__pos { display: inline-grid; grid-template-columns: 3.4rem auto; align-items: center; gap: 6px; } .inf2__pos i { height: 5px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent) var(--p), var(--ink-600, #3b4450) var(--p)); } .inf2__pos b { font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .inf2__vs { color: var(--text-muted); } .inf2__partidos .inf__p-fig { display: flex; align-items: baseline; gap: var(--sp-2); justify-content: space-between; } .inf2__partidos .inf__p-fig b { color: var(--text-primary); } /* Cuándo llegan los goles. */ .inf2__franjas { flex: 1 1 auto; height: auto; min-height: 9rem; max-height: 17rem; } .inf2__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-2); } .inf2__datos > div { display: grid; gap: 1px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-hairline); } .inf2__datos > div:nth-child(even) { padding-left: var(--sp-3); border-left: 1px solid var(--line-hairline); } .inf2__datos b { font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .inf2__datos span { font-size: var(--fs-xs); color: var(--text-secondary); } /* El juego. */ .inf2__num-cab { margin: 0 0 var(--sp-2); } .inf2__numeros-j { gap: var(--sp-3); } .inf2__numeros-j li { font-size: var(--fs-md); } .inf2__duelos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); } .inf2__duelo { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; grid-template-areas: 'rot rot' 'yo barra' 'suyo barra'; column-gap: var(--sp-3); } .inf2__duelo { grid-template-columns: 3.4rem minmax(0, 1fr) 3.4rem; grid-template-areas: 'rot rot rot' 'yo barra suyo'; align-items: center; row-gap: 4px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-hairline); } .inf2__duelo-rot { grid-area: rot; display: flex; justify-content: space-between; gap: var(--sp-3); font-weight: 600; color: var(--text-primary); } .inf2__duelo-rot small { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); text-align: right; } .inf2__duelo > b { grid-area: yo; font-size: var(--fs-xl); font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .inf2__duelo > b.gana { color: var(--accent-texto); } .inf2__duelo > b.inf2__duelo-suyo { grid-area: suyo; text-align: right; } .inf2__duelo-barra { grid-area: barra; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .inf2__duelo-barra i { height: 8px; border-radius: var(--r-pill); background: var(--ink-700, #2a313b); position: relative; overflow: hidden; } .inf2__duelo-barra i::after { content: ''; position: absolute; inset: 0; transform-origin: right; transform: scaleX(var(--a)); background: var(--accent); } .inf2__duelo-barra i + i::after { transform-origin: left; background: var(--clay-300); } .inf2__porgol { margin: var(--sp-3) 0 0; display: flex; align-items: baseline; gap: var(--sp-3); } .inf2__porgol b { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-primary); } .inf2__porgol span { color: var(--text-secondary); font-size: var(--fs-sm); } .inf2__datos--dos { margin-top: var(--sp-3); } /* La táctica: el once del año sobre la cancha. */ .inf2__bloque--cancha { min-height: 0; } .inf2__campo-env { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; } .inf2__campo { height: 100%; } .inf2__ch { overflow: visible; } .inf2__ch-nota { position: absolute; top: -9px; left: 62%; min-width: 1.7rem; height: 17px; padding: 0 4px; border-radius: 4px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--ink-950, #0b0b0f); box-shadow: 0 1px 3px rgb(0 0 0 / 0.6); } .inf2__ch-nom { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: rgb(0 0 0 / 0.62); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .inf2__tac { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .inf2__tac thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-raised); padding: 4px var(--sp-2); text-align: left; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--line-hairline); } .inf2__tac .u-num { text-align: right; } .inf2__tac td, .inf2__tac tbody th { padding: 5px var(--sp-2); border-bottom: 1px solid var(--line-hairline); color: var(--text-secondary); white-space: nowrap; } .inf2__tac tbody th { text-align: left; font-weight: 600; color: var(--text-primary); } .inf2__tac-cab th { padding-top: var(--sp-3) !important; font-size: var(--fs-2xs) !important; font-weight: 700 !important; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto) !important; border-bottom: 0 !important; } .inf2__gep i { font-style: normal; font-size: 0.75em; color: var(--text-muted); margin-left: 1px; } .inf2__tac .inf__tac-rend { width: 34%; } /* El plantel. */ .inf2__plantel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .inf2__dests { gap: 0; margin-bottom: var(--sp-3); border-top: 1px solid var(--line-hairline); border-bottom: 1px solid var(--line-hairline); } .inf2__dests .inf__dest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--sp-2) var(--sp-3); background: none; border-radius: 0; border-left: 1px solid var(--line-hairline); } .inf2__dests .inf__dest:first-child { border-left: 0; padding-left: 0; } .inf2__dests .inf__dest span { display: flex; align-items: center; gap: 5px; } .inf2__dests .inf__dest .i { grid-row: auto; width: 0.95rem; height: 0.95rem; } .inf2__dests .inf__dest b { font-size: var(--fs-md); } .inf2__plantel .inf__tabla th { border-bottom: 1px solid var(--line-hairline); } .inf2__plantel .inf__tabla td { border-top: 0; border-bottom: 1px solid var(--line-hairline); padding-block: 5px; } .inf2__rol { display: inline-block; min-width: 2.6rem; padding: 1px 6px; border-radius: 4px; text-align: center; font-size: var(--fs-2xs); font-weight: 800; color: #111; } .inf2__rol--0 { background: #f2c14e; } .inf2__rol--1 { background: #6fa8ff; } .inf2__rol--2 { background: #57d68d; } .inf2__rol--3 { background: #ff7a6b; } /* Las competencias. */ .inf2__elim { margin: 0; padding: 0; list-style: none; } .inf2__elim li { display: grid; grid-template-columns: 1.6rem 30px minmax(0, 1fr) 2.2rem 3.6rem 2.4rem; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-bottom: 1px solid var(--line-hairline); font-variant-numeric: tabular-nums; color: var(--text-secondary); } .inf2__elim li > span:nth-child(n+4), .inf2__elim strong { text-align: right; } .inf2__elim b { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inf2__elim strong { color: var(--text-primary); font-weight: 800; } .inf2__elim-cab { position: sticky; top: 0; z-index: 1; background: var(--bg-raised); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted) !important; padding-block: 4px !important; } .inf2__elim-cab span:last-child { text-align: right; } .inf2__elim--entra { box-shadow: inset 3px 0 0 var(--verde-400); } .inf2__elim--mia { background: color-mix(in srgb, var(--accent) 12%, transparent); } .inf2__elim--mia b { color: var(--accent-texto); } .inf2__raya { display: flex !important; justify-content: center; padding: 3px 0 !important; border-bottom: 1px dashed var(--accent) !important; } .inf2__raya span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .inf2__fed li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--line-hairline); } .inf2__fed .inf__delta { font-size: var(--fs-md) !important; vertical-align: baseline; margin: 0 !important; text-align: right; } .inf2__viene { background: none !important; border: 0 !important; border-left: 3px solid var(--accent) !important; padding: var(--sp-2) var(--sp-3) !important; border-radius: 0 !important; display: grid; gap: 2px; } .inf2__viene b { font-size: var(--fs-lg); color: var(--text-primary); } .inf__torneo { background: none; border: 1px solid var(--line-hairline); } /* El diagnóstico, al costado. */ .inf2__lado-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .inf2__diag { margin: 0; padding: 0; list-style: none; } .inf2__diag li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--sp-2); padding: 7px 0; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.35; } .inf2__diag .i { width: 1rem; height: 1rem; margin-top: 2px; } .inf2__diag--bien .i { color: var(--verde-300); } .inf2__diag--mal .i { color: var(--clay-300); } .inf2__diag--tarea .i { color: var(--accent-texto); } /* En pantalla grande, todo en una; en el teléfono, la página corre. */ @media (min-width: 1000px) and (min-height: 600px) { .inf { height: var(--alto-pantalla-sel); } } @media (max-width: 999px) { .inf2 { grid-template-columns: minmax(0, 1fr); } .inf2__dos, .inf2__dos--ano, .inf2__dos--tac { grid-template-columns: minmax(0, 1fr); } .inf2__dos > .inf2__bloque + .inf2__bloque { padding-left: 0; border-left: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-hairline); } .inf2__rollo { overflow-x: auto; } .inf2__dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inf2__veredicto { margin-left: 0; } .inf2__solapas { overflow-x: auto; max-width: 100%; } .inf2__campo { height: auto; width: 100%; } .inf2__hero .parsel__titulo { white-space: normal; } } .inf2__veredicto--vivo { border-color: var(--accent); } .inf2__veredicto--vivo b { color: var(--accent-texto); } .inf2__partidos .inf2__fig-td { width: 100%; max-width: 0; } .inf2__partidos .inf__p-fig span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inf2__partidos td, .inf2__partidos th { padding-inline: 6px; } .inf2__campo-env { align-items: center; } .inf2__campo { width: 100%; height: auto; max-height: 100%; aspect-ratio: 105 / 68; flex: none; } .inf2__dos--comp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .inf2__dos--comp .inf2__rollo > .sel-tit:first-child { margin-top: 0; } .inf2__campo-env { align-items: flex-start; } .inf2__bloque--cancha .inf__nota { margin-top: var(--sp-2); } .inf2__bloque--cancha { justify-content: flex-start; } .inf2__bloque--cancha .inf2__campo-env { flex: 0 1 auto; } .inf2__numeros li { padding-inline: var(--sp-3); } .inf2__numeros .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1399px) { .inf2__pos { grid-template-columns: auto; } .inf2__pos i { display: none; } .inf2__partidos .inf__p-cuando small { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 720px) { .inf2__hero { grid-template-columns: minmax(0, 1fr) !important; } .inf2__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: var(--sp-3); } .inf2__numeros li { padding-inline: var(--sp-2); } .inf2__numeros li:nth-child(3n + 1) { padding-left: 0; border-left: 0; } .inf2__numeros b { font-size: var(--fs-lg) !important; } .inf2__solapas .segmented__btn { padding-inline: var(--sp-3); font-size: var(--fs-sm); } } @media (max-width: 1399px) { .inf2__dos--ano { grid-template-columns: minmax(0, 2.2fr) minmax(13rem, 1fr); gap: var(--sp-4); } .inf2__dos--ano > .inf2__bloque + .inf2__bloque { padding-left: var(--sp-4); } .inf2__numeros .label { letter-spacing: 0.03em; } .inf2__partidos .inf__p-rival small { display: none; } } /* ========================================================================== EL TORNEO, DE LA MISMA MANERA (2/10/2026): una sola pantalla, sin scroll. Los grupos chicos a la izquierda y el elegido en grande; el cuadro partido en dos mitades con la final y el campeón en el medio, a todo el ancho. ========================================================================== */ @media (min-width: 1000px) and (min-height: 600px) { .copa { height: var(--alto-pantalla-sel); min-height: 0; } .copa .copa2 { flex: 1 1 auto; min-height: 0; align-items: stretch; } .copa2__centro { min-height: 0; display: flex; flex-direction: column; } .copa2__riel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } .copa__hero { padding-block: var(--sp-3); } .copa .copa2 { grid-template-columns: minmax(0, 1fr) 22rem; } .copa .copa2--ancha { grid-template-columns: minmax(0, 1fr); } .copa2__head { flex-wrap: wrap; } /* Los grupos. */ .copa2__grupos { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .copa2__minis { min-height: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--filas), minmax(0, 1fr)); } .copa2__mini { all: unset; box-sizing: border-box; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 6px var(--sp-2) 4px; border: 1px solid var(--line-hairline); border-radius: 8px; cursor: pointer; transition: border-color 140ms, background-color 140ms; } @media (hover: hover) { .copa2__mini:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--text-primary) 3%, transparent); } } .copa2__mini:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .copa2__mini--mio { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .copa2__mini--elegido { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); } .copa2__mini-nom { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); } .copa2__mini-nom em { font-style: normal; font-size: var(--fs-2xs); color: var(--accent-texto); letter-spacing: var(--tracking-label); } .copa2__mini ol { flex: 1 1 auto; display: grid; grid-auto-rows: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } .copa2__mini li { display: grid; grid-template-columns: 1rem 20px minmax(0, 1fr) 2rem 1.6rem; align-items: center; gap: 6px; padding: 1px 0; font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .copa2__mini li > span { font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; } .copa2__mini li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-primary); } .copa2__mini li small { text-align: right; font-size: var(--fs-xs); color: var(--text-muted); } .copa2__mini li strong { text-align: right; color: var(--text-primary); } .copa2__mini .copa2__pasa > span { color: var(--accent-texto); font-weight: 800; box-shadow: inset 2px 0 0 var(--accent); } .copa2__mini .copa2__mia b { color: var(--accent-texto); } .copa2__detalle { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .copa2__detalle .copa__grupo { container-type: normal; padding: var(--sp-3) var(--sp-4); background: none; } .copa2__detalle .copa__grupo-cuerpo { grid-template-columns: minmax(0, 1fr) !important; gap: var(--sp-3); } .copa2__detalle .copa__tabla td { padding-block: 6px; } .copa2__detalle .copa__res { font-size: var(--fs-sm); } /* El cuadro en dos mitades. */ .copa2__llaves { --hueco-cuadro: 1.4rem; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 var(--hueco-cuadro); padding-top: var(--sp-1); } .copa2__llaves .copa__ronda { min-height: 0; } .copa2__llaves .copa__ronda-nom { margin-bottom: var(--sp-2); font-size: var(--fs-2xs); flex-wrap: wrap; row-gap: 0; } .copa2__llaves .copa__ronda-cuerpo { min-height: 0; } .copa2__llaves .copa__slot { padding: 2px 0; } .copa2__llaves .copa__eq { grid-template-columns: 20px minmax(0, 1fr) 1.9rem; gap: 5px; padding: 3px 4px 3px 6px; font-size: var(--fs-xs); } .copa2__llaves .copa__eq .copa__pano { width: 20px; height: auto; } .copa2__llaves .copa__eq-m { height: 20px; } .copa2__llaves .copa__eq .copa__hueco { width: 20px; height: 13px; } /* La mitad de la derecha entra al revés: el corchete sale por la izquierda. */ .copa2__ronda--der .copa__par::after { right: auto; left: calc(var(--hueco-cuadro) / -2); border: 1px solid var(--line-strong); border-right: 0; border-radius: 6px 0 0 6px; } .copa2__ronda--der .copa__par::before { right: auto; left: calc(var(--hueco-cuadro) * -1); } .copa2__ronda--der .copa__par--mio::after, .copa2__ronda--der .copa__par--mio::before { border-color: color-mix(in srgb, var(--accent) 70%, transparent); } .copa2__ronda--der .copa__ronda-nom { flex-direction: row-reverse; text-align: right; } /* La última columna de cada mitad (las semis) llega a la final con un trazo. */ .copa2__ronda--izq .copa__ronda-cuerpo > .copa__slot, .copa2__ronda--der .copa__ronda-cuerpo > .copa__slot { position: relative; } .copa2__ronda--izq .copa__ronda-cuerpo > .copa__slot::after { content: ''; position: absolute; top: 50%; right: calc(var(--hueco-cuadro) * -1); width: var(--hueco-cuadro); border-top: 1px solid var(--line-strong); } .copa2__ronda--der .copa__ronda-cuerpo > .copa__slot::after { content: ''; position: absolute; top: 50%; left: calc(var(--hueco-cuadro) * -1); width: var(--hueco-cuadro); border-top: 1px solid var(--line-strong); } .copa2__ronda--final .copa__ronda-nom { justify-content: center; gap: var(--sp-2); } .copa2__final { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); } .copa2__final > .copa__slot { flex: none; } .copa2__campeon { flex: none !important; display: grid; justify-items: center; gap: 4px; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line-hairline); border-radius: 10px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); text-align: center; } .copa2__campeon .i { width: 2.2rem; height: 2.2rem; color: var(--accent); } .copa2__campeon b { font-size: var(--fs-lg); color: var(--text-primary); } .copa2__campeon small { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Tu próximo partido, en la cabecera del cuadro. */ .copa2__prox { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; } .copa2__prox b { font-size: var(--fs-md); color: var(--text-primary); } .copa2__prox small { color: var(--text-secondary); } @media (max-width: 999px) { .copa .copa2 { grid-template-columns: minmax(0, 1fr); } .copa2__grupos { grid-template-columns: minmax(0, 1fr); } .copa2__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .copa2__llaves { overflow-x: auto; grid-template-columns: repeat(var(--cols), minmax(8.5rem, 1fr)); min-height: 34rem; } .copa2__prox { margin-left: 0; } } /* La final a la altura de las semis —ahí llegan sus trazos— y el campeón arriba. */ .copa2__final { position: relative; } .copa2__final > .copa__slot { position: relative; z-index: 1; } .copa2__final > .copa2__campeon { position: absolute; left: 0; right: 0; bottom: calc(50% + 2.4rem); } /* Tu camino, con líneas finas y sin fondos: el resultado lleva el color. */ .copa2__riel .copa__pasos { gap: 0; } .copa2__riel .copa__paso { padding: 5px 0; border-radius: 0; background: none !important; border-bottom: 1px solid var(--line-hairline); grid-template-columns: 6.6rem minmax(0, 1fr) auto; } .copa2__riel .copa__paso--pend { opacity: 0.75; } .copa2__riel .copa__candidatos li { padding-block: 3px; } @media (max-height: 860px) { .copa2__llaves .copa__slot { padding: 1px 0; } .copa2__llaves .copa__eq { padding-block: 1px; } .copa2__llaves .copa__eq-m { height: 18px; } .copa2__llaves .copa__ronda-nom { margin-bottom: 4px; padding-bottom: 3px; } } /* ========================================================================== LAS ELIMINATORIAS, DE LA MISMA MANERA (2/10/2026): las confederaciones suben a la franja, los grupos van como en el Torneo —chicos a la izquierda, el elegido en grande— y al costado, siempre, tu selección y su fecha, quiénes van al Mundial y cómo se juega. Una pantalla, sin scroll. ========================================================================== */ .mundosel__hero { grid-template-columns: auto minmax(0, 1fr); padding-block: var(--sp-2); } .mun2__tabs { grid-area: auto; justify-content: flex-end; border-bottom: 0; padding: 0; flex-wrap: wrap; } .mun2__tabs button { padding-block: 4px 6px !important; } .mundosel__grilla { grid-template-columns: minmax(0, 1fr) 21rem !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: 'conf lado' !important; } .mun2__conf { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); } .mun2__conf .mundo__cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mun2__grupos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mun2__grupos .copa2__grupos { flex: 1 1 auto; } .mun2__grupos .copa2__detalle .mun__grupo { height: auto; } .mun2__grupos .copa2__detalle .copa__grupo-cuerpo { grid-template-columns: minmax(0, 1fr) !important; } .mun2__grupos .copa2__mini-nom small { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0; } .mun2__grupos .copa2__mini li { grid-template-columns: 1rem 20px minmax(0, 1fr) 2rem 1.6rem; } /* El costado. */ .mun2__riel { grid-area: lado; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); } .mun2__riel section { display: grid; gap: var(--sp-2); } .mun2__quien { margin: 0; display: flex; align-items: center; gap: var(--sp-3); } .mun2__quien span { display: grid; } .mun2__quien b { font-size: var(--fs-lg); color: var(--text-primary); } .mun2__quien small { font-size: var(--fs-sm); color: var(--accent-texto); font-weight: 600; } .mun2__cruces { margin: 0; padding: 0; list-style: none; } .mun2__cruce { display: grid; grid-template-columns: 3.6rem 26px minmax(0, 1fr) auto 3rem; align-items: center; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--line-hairline); } .mun2__cruce-dia { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); } .mun2__cruce b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .mun2__cruce small { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } .mun2__riel .action { justify-self: start; } .mun2__van { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--sp-3); } .mun2__van li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); color: var(--text-primary); } .mun2__van li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mun2__van--hoy li { color: var(--text-secondary); } .mun2__van .mun2__van--mia span { color: var(--accent-texto); font-weight: 700; } .mun2__nota { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-secondary); } .mun2__nota b { color: var(--text-primary); } .mun2__ciclo { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mun2__ciclo div { display: grid; gap: 1px; padding-left: var(--sp-2); border-left: 1px solid var(--line-hairline); } .mun2__ciclo div:first-child { padding-left: 0; border-left: 0; } .mun2__ciclo dt { order: 2; font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); } .mun2__ciclo dd { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } @media (max-width: 999px) { .mundosel__hero { grid-template-columns: minmax(0, 1fr); } .mun2__tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .mundosel__grilla { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-template-areas: 'conf' 'lado' !important; } .mun2__grupos .copa2__grupos { grid-template-columns: minmax(0, 1fr); } .mun2__grupos .copa2__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } } .copa2__mini .mundo__pano { width: 20px; height: 14px; object-fit: cover; } .mun2__cruce .mundo__pano { width: 26px; height: 17px; object-fit: cover; } .mun2__quien .mundo__pano { width: 36px; height: 24px; object-fit: cover; } .mun2__van .mundo__pano { width: 22px; height: 15px; object-fit: cover; flex: none; } .mun2__grupos .copa2__detalle .mundo__pano { width: 26px; height: 17px; object-fit: cover; } /* Los cruces sueltos, con líneas finas y sin fondo gris. */ .mun2__conf .mundo__cruce { background: none !important; border: 1px solid var(--line-hairline); box-shadow: none !important; } .mun2__conf .mundo__cruce--mia { border-color: var(--accent); } .mun2__conf .mundo__cruces { align-content: start; } /* ========================================================================== EL FIXTURE, DE LA MISMA MANERA (2/10/2026): el año a la izquierda con la campaña y la pelea en una franja al pie; al costado dos solapas —la tabla y los amistosos— en vez de dos tarjetas apiladas que no entraban. ========================================================================== */ .parsel__grilla { grid-template-columns: minmax(0, 1fr) 22rem; } .fx2__lado { display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0; } .fx2__lado-head { padding: var(--sp-3) var(--sp-4) var(--sp-2); } .fx2__solapas .segmented__btn { min-height: 34px; padding-inline: var(--sp-4); font-size: var(--fs-md); } .fx2__lado-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 var(--sp-4) var(--sp-4); } .fx2__panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; animation: none !important; } .fx2__panel .panel__head { padding-inline: 0; } .fx2__aviso { margin: 0 0 var(--sp-2); } .parsel__pie:has(.parsel__pelea:not([hidden])) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } .parsel__pie { margin-top: auto; } .parsel__anio { display: flex; flex-direction: column; } /* Las ventanas libres: los amistosos, sin cajas grises. */ .fx2__panel .parts__plan { background: none; border: 0; border-bottom: 1px solid var(--line-hairline); border-radius: 0; padding: var(--sp-3) 0; } .fx2__panel .parts__riv-btn { background: none; } @media (max-width: 1100px) { .parsel__grilla { grid-template-columns: minmax(0, 1fr); } .parsel__pie:has(.parsel__pelea:not([hidden])) { grid-template-columns: minmax(0, 1fr); } } .fx2__lado-head { margin: 0 !important; width: auto; } .fx2__lado-head:has([data-f="fx-sol-amis"][hidden]) { display: none; } .fx2__lado-head:has([data-f="fx-sol-amis"][hidden]) + .fx2__lado-cuerpo { padding-top: var(--sp-3); } .parsel__pie:has(.parsel__pelea:not([hidden])) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .parsel__pelea-cifras .label { white-space: normal; overflow: visible; text-overflow: clip; } /* ========================================================================== EL TÍTULO DE SECCIÓN, UNO SOLO (2/10/2026, «unificá también los títulos»). Lo que separa las partes adentro de una tarjeta —«Partido por partido», «Esta fecha», «Lo que funcionó»— se escribía con cuatro clases y cuatro dibujos: con raya y sin raya, con la nota en gris claro o en gris oscuro, con márgenes distintos en cada pantalla. Ahora es uno: rótulo en mayúsculas, la nota a la derecha y una línea fina debajo que cierra la sección. ========================================================================== */ .sel-tit { margin: 0 0 var(--sp-2); padding-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .sel-tit small { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); text-align: right; } * + .sel-tit { margin-top: var(--sp-4); } .sel-tit--bien { color: var(--verde-300); } .sel-tit--mal { color: var(--clay-300); } /* ========================================================================== LA MARCA DE UN RESULTADO, UNA SOLA (2/10/2026): el marcador desde tu lado en un recuadro fino del color de lo que fue. La pintan `marcaDeResultado()` y `marcaPendiente()` —`seleccion-equipo.js`— en el Informe, la Oficina, el Predio, el Día de partido, el Fixture, el Torneo y las Eliminatorias. Va colgada de `.en-modo-seleccion` para ganarle a los `b` de cada tarjeta. ========================================================================== */ .en-modo-seleccion .marca { display: inline-grid; place-items: center; min-width: 3rem; height: 1.6rem; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px; background: none; font-size: var(--fs-md); font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; } .en-modo-seleccion .marca--g { border-color: var(--verde-400); color: var(--verde-300); } .en-modo-seleccion .marca--p { border-color: var(--danger); color: var(--clay-300); } .en-modo-seleccion .marca--pend { border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-texto); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } .en-modo-seleccion .marca sup { font-size: 0.65em; font-weight: 600; color: var(--text-muted); margin-left: 2px; } /* Con la raya del título, el contrato de la Oficina perdía el último movimiento: la curva cede esos píxeles. */ .ofi3__contrato .ofc__svg { height: 84px; } /* EL PREDIO SIN SCROLL TAMBIÉN CON LA PRENSA ESPERANDO: con una conferencia de tres respuestas, la columna derecha estiraba la página 200 px. Como en el resto del modo, la pantalla tiene su alto y la columna corre por dentro. */ @media (min-width: 1000px) and (min-height: 600px) { .pre.pre--nuevo { height: var(--alto-pantalla-sel); display: flex; flex-direction: column; } .pre--nuevo .pre__grilla2 { flex: 1 1 auto; min-height: 0; align-items: stretch; } .pre--nuevo .pre__riel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .pre--nuevo .pre__fecha2 { min-height: 0; overflow-y: auto; scrollbar-width: thin; } } /* El partido de la eliminatoria en una ventana a medias: fijo, sin lápiz. */ .parts__riv--fijo .parts__riv-btn { cursor: default; border-style: dashed; } @media (hover: hover) { .parts__riv--fijo .parts__riv-btn:hover { border-color: var(--line-hairline); } } .parts__riv--fijo small { color: var(--accent-texto); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); } /* ========================================================================== LA AGENDA Y TU HISTORIA (2/10/2026, `historia-seleccion.js`). La agenda va arriba del riel del Predio: con algo pendiente se enciende —borde del acento— y trae el relato y las opciones, cada una con lo que deja; sin nada, lo último que pasó. Tu historia, en la Oficina, es el diario entero. ========================================================================== */ .pre__agenda--viva { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -18px var(--accent); } .agenda__cab { margin: 0 0 4px; display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .agenda__cab small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); } .agenda__tit { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; color: var(--text-primary); } .agenda__txt { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); } .agenda__ops { display: grid; gap: var(--sp-2); } .agenda__op { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color 140ms, background-color 140ms; } .agenda__op b { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } .agenda__op small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; } @media (hover: hover) { .agenda__op:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } } .agenda__op:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .agenda__diario { margin: 0; padding: 0; list-style: none; display: grid; } .agenda__d { display: grid; gap: 1px; padding: 6px 0 6px var(--sp-3); border-bottom: 1px solid var(--line-hairline); box-shadow: inset 2px 0 0 var(--line); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4; } .agenda__d small { font-size: var(--fs-2xs); color: var(--text-muted); } .agenda__d--hito { box-shadow: inset 2px 0 0 var(--accent); color: var(--text-primary); } .agenda__d--bien { box-shadow: inset 2px 0 0 var(--verde-400); } .agenda__d--mal { box-shadow: inset 2px 0 0 var(--danger); } .agenda__toda { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--accent-texto); } .agenda__vacia { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .ofi3__historia { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; } .ofi3__historia-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .ofi3__lado > .ofisel__recorrido { flex: none; } .hist__lista { margin: 0; padding: 0; list-style: none; display: grid; } .hist__i { display: grid; gap: 1px; padding: 6px 0 6px var(--sp-3); border-bottom: 1px solid var(--line-hairline); box-shadow: inset 2px 0 0 var(--line); font-size: var(--fs-sm); line-height: 1.4; color: var(--text-secondary); } .hist__i small { font-size: var(--fs-2xs); color: var(--text-muted); } .hist__i b { color: var(--text-primary); font-size: var(--fs-sm); } .hist__i--hito { box-shadow: inset 2px 0 0 var(--accent); } .hist__i--hito b { color: var(--accent-texto); } .hist__i--bien { box-shadow: inset 2px 0 0 var(--verde-400); } .hist__i--mal { box-shadow: inset 2px 0 0 var(--danger); } .hist__i--inicio { box-shadow: inset 2px 0 0 var(--text-primary); color: var(--text-primary); } /* La Oficina con «Tu historia»: los récords bajan a la campaña, debajo de la forma, y la columna queda para la historia y el recorrido. */ .ofi3__records .ofisel__extremos { gap: 6px; } .ofi3__records .ofisel__extremo { padding: 4px var(--sp-2); } .ofi3__records .ofisel__extremo .label { font-size: 10px; } .ofi3__lado > .ofi3__historia { flex: 1 1 auto !important; min-height: 160px; } .ofi3__lado > .ofisel__recorrido { flex: none; max-height: 45%; overflow-y: auto; scrollbar-width: thin; } .ofi3__records .ofisel__extremos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ofi3__records .ofisel__extremo b, .ofi3__records .ofisel__extremo .marca { font-size: var(--fs-sm); } .ofi3__records .ofisel__extremo > span:not(.label):not(.ofisel__nada) { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== LA VENTANA DE LA AGENDA, INMERSIVA (2/10/2026, «más grandes y más inmersivos»). Ocupa buena parte de la pantalla: a la izquierda la escena —el protagonista sobre los colores de tu selección, con su luz—, a la derecha el relato en grande y las opciones como tarjetas con su número. Entra con la escena deslizándose y las opciones de a una. ========================================================================== */ .agenda-v { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--sp-5); } .agenda-v__fondo { position: absolute; inset: 0; background: rgb(4 5 8 / 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: agv-fondo 260ms ease both; } .agenda-v__caja.agv { position: relative; width: min(66rem, 100%); min-height: min(34rem, calc(100vh - 3rem)); max-height: calc(100vh - 3rem); display: grid; grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr); overflow: hidden; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 18px; background: var(--bg-raised); box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.03); animation: agv-entra 380ms cubic-bezier(.2,.8,.2,1) both; } .agv__escena { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-5); overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 30% 20%, color-mix(in srgb, var(--agv-a) 55%, transparent), transparent 60%), radial-gradient(90% 70% at 80% 100%, color-mix(in srgb, var(--agv-b) 45%, transparent), transparent 65%), linear-gradient(160deg, #10131a, #07080b); animation: agv-escena 520ms cubic-bezier(.2,.8,.2,1) both; } /* Las franjas del césped, apenas, para que la escena sea de fútbol. */ .agv__escena::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.08; background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 68px); mask: linear-gradient(to top, #000, transparent 75%); -webkit-mask: linear-gradient(to top, #000, transparent 75%); } .agv__escena::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent); } .agv__escudo { width: clamp(120px, 15vw, 190px); height: clamp(120px, 15vw, 190px); object-fit: contain; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.65)); animation: agv-sube 600ms 120ms cubic-bezier(.2,.8,.2,1) both; } .agv__bandera { width: clamp(110px, 12vw, 160px); height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.6); animation: agv-sube 600ms 120ms cubic-bezier(.2,.8,.2,1) both; } .agv__bandera--sola { width: clamp(150px, 17vw, 230px); } .agv__duelo { display: flex; align-items: center; gap: var(--sp-3); } .agv__duelo .agv__bandera { width: clamp(90px, 9vw, 130px); } .agv__duelo .agv__bandera + .agv__vs + .agv__bandera { animation-delay: 240ms; } .agv__vs { font-size: var(--fs-2xl); font-weight: 900; font-stretch: var(--wd-condensed); text-transform: uppercase; color: var(--accent-texto); text-shadow: 0 2px 10px rgb(0 0 0 / 0.6); } .agv__terna { display: grid; gap: var(--sp-3); width: 100%; max-width: 15rem; } .agv__terna span { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: rgb(0 0 0 / 0.35); animation: agv-sube 500ms cubic-bezier(.2,.8,.2,1) both; } .agv__terna span:nth-child(2) { animation-delay: 90ms; } .agv__terna span:nth-child(3) { animation-delay: 180ms; } .agv__terna b { font-size: var(--fs-lg); color: #fff; } .agv__escudo-chico { width: 34px; height: 34px; object-fit: contain; } .agv__icono { width: 44px; height: 44px; color: var(--accent); opacity: 0.9; filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.6)); } .agv__quien { margin: 0; display: grid; justify-items: center; text-align: center; gap: 2px; } .agv__quien b { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 900; font-stretch: var(--wd-condensed); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; line-height: 1; text-shadow: 0 3px 14px rgb(0 0 0 / 0.7); } .agv__quien small { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.75); } .agv__pie { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.8); text-align: center; } .agv__relato { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-7) var(--sp-7) var(--sp-6); overflow-y: auto; scrollbar-width: thin; } .agv .agenda__cab { padding-right: 2.2rem; font-size: var(--fs-xs); } .agv .agenda__tit { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; letter-spacing: -0.005em; } .agv .agenda__txt { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1.5; color: var(--text-secondary); } .agv .agenda__ops { gap: var(--sp-3); margin-top: auto; } .agv .agenda__op { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 12px; border-color: var(--line-strong); animation: agv-sube 420ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(200ms + var(--k, 0) * 70ms); } .agv .agenda__op span { display: grid; gap: 3px; } .agv .agenda__op b { font-size: var(--fs-lg); } .agv .agenda__op small { font-size: var(--fs-sm); } .agv__tecla { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line-strong); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); } @media (hover: hover) { .agv .agenda__op:hover { transform: translateX(3px); } .agv .agenda__op:hover .agv__tecla { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } } .agv .agenda__op:focus-visible .agv__tecla { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .agv .agenda__op { transition: transform 160ms ease, border-color 140ms, background-color 140ms; } .agv__eleccion { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; color: var(--accent-texto); animation: agv-sube 420ms cubic-bezier(.2,.8,.2,1) both; } .agv .agenda__txt--hecho { color: var(--text-primary); animation: agv-sube 420ms 100ms cubic-bezier(.2,.8,.2,1) both; } .agv__seguir .action { min-height: 48px; font-size: var(--fs-lg); padding-inline: var(--sp-6); } .agenda-v__x { all: unset; position: absolute; z-index: 2; top: var(--sp-3); right: var(--sp-4); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer; } @media (hover: hover) { .agenda-v__x:hover { color: var(--text-primary); background: rgb(255 255 255 / 0.08); } } @keyframes agv-fondo { from { opacity: 0; } } @keyframes agv-entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } } @keyframes agv-escena { from { opacity: 0; transform: translateX(-24px); } } @keyframes agv-sube { from { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .agenda-v__caja.agv, .agv__escena, .agv__escudo, .agv__bandera, .agv__terna span, .agv .agenda__op, .agv__eleccion, .agv .agenda__txt--hecho, .agenda-v__fondo { animation: none; } } /* En el teléfono, la escena arriba y más baja. */ @media (max-width: 760px) { .agenda-v { padding: var(--sp-2); } .agenda-v__caja.agv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .agv__escena { padding: var(--sp-5) var(--sp-4) var(--sp-4); flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); } .agv__escudo { width: 84px; height: 84px; } .agv__bandera--sola { width: 120px; } .agv__duelo .agv__bandera { width: 80px; } .agv__terna { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); } .agv__terna span { flex-direction: column; gap: 4px; padding: var(--sp-2); } .agv__terna b { font-size: var(--fs-sm); } .agv__icono { display: none; } .agv__relato { padding: var(--sp-4); } .agv .agenda__txt { font-size: var(--fs-md); } } .agenda-v__caja.agv { min-height: min(27rem, calc(100vh - 3rem)); } .agv .agenda__ops { margin-top: max(var(--sp-4), auto); } @media (max-width: 760px) { .agv__escena { padding-right: 3rem; } } /* ========================================================================== LAS DEMÁS VENTANAS DEL MODO, EN EL MISMO ESTILO (2/10/2026): el buscador de rivales, el dorsal y las preguntas de `preguntar()`. Mismo marco que la agenda: escena a la izquierda, lo que hay que hacer a la derecha. ========================================================================== */ /* El buscador de rivales: su clase vieja no tiene que mandar sobre el marco. */ .agenda-v.parts__riv-panel { position: fixed; inset: 0; max-height: none; padding: var(--sp-5); border-radius: 0; background: none; box-shadow: none; grid-template-rows: none; width: auto !important; left: 0 !important; top: 0 !important; } .agv-rivales .agenda-v__caja.agv { height: min(40rem, calc(100vh - 3rem)); } .agv-rivales .agv__relato { overflow: hidden; } .agv__incognita { display: grid; place-items: center; width: clamp(90px, 9vw, 130px); aspect-ratio: 3 / 2; border: 2px dashed rgb(255 255 255 / 0.35); border-radius: 6px; font-size: 3rem; font-weight: 900; color: rgb(255 255 255 / 0.7); animation: agv-sube 600ms 240ms cubic-bezier(.2,.8,.2,1) both; } .agv__busca { height: 48px; padding: 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-page); color: var(--text-primary); font: inherit; font-size: var(--fs-lg); } .agv__busca:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .agv__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; } .agv__lista button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 2.6rem; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-bottom: 1px solid var(--line-hairline); cursor: pointer; } .agv__lista button img { width: 30px; height: 20px; object-fit: cover; border-radius: 2px; } .agv__lista button b { font-size: var(--fs-md); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agv__lista button small { font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); color: var(--text-muted); } .agv__lista button strong { text-align: right; font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--accent-texto); } @media (hover: hover) { .agv__lista button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } } .agv__lista button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* El dorsal: el número que tiene, enorme, en la escena. */ .agv__numero { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 0.9; color: var(--accent-texto); text-shadow: 0 6px 24px rgb(0 0 0 / 0.6); animation: agv-sube 600ms 200ms cubic-bezier(.2,.8,.2,1) both; } .agv-dorsal .agenda-v__caja.agv { width: min(72rem, 100%); } .agv__numeros { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; } .agv__numeros .pla__num { min-height: 2.6rem; font-size: var(--fs-md); } /* Las preguntas de `preguntar()`, vestidas. */ .en-modo-seleccion dialog.dialogo--sel[open] { width: min(56rem, calc(100vw - 2rem)); max-width: none; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 18px; background: var(--bg-raised); box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.95); animation: agv-entra 380ms cubic-bezier(.2,.8,.2,1) both; } .en-modo-seleccion dialog.dialogo--sel::backdrop { background: rgb(4 5 8 / 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .en-modo-seleccion dialog.dialogo--sel .agv__escena { min-height: 18rem; } .en-modo-seleccion dialog.dialogo--sel .agv__relato { padding: var(--sp-7); justify-content: center; } .en-modo-seleccion dialog.dialogo--sel .dialogo__titulo { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 900; font-stretch: var(--wd-condensed); line-height: 1.05; color: var(--text-primary); } .en-modo-seleccion dialog.dialogo--sel .dialogo__cuerpo { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); line-height: 1.5; color: var(--text-secondary); } .en-modo-seleccion dialog.dialogo--sel .dialogo__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); margin-top: auto; } .en-modo-seleccion dialog.dialogo--sel .dialogo__pie .action { min-height: 48px; padding-inline: var(--sp-6); font-size: var(--fs-md); } @media (max-width: 760px) { .en-modo-seleccion dialog.dialogo--sel[open] { grid-template-columns: minmax(0, 1fr); } .en-modo-seleccion dialog.dialogo--sel .agv__escena { min-height: 0; padding: var(--sp-4); } .en-modo-seleccion dialog.dialogo--sel .agv__relato { padding: var(--sp-4); } .agv__numeros { grid-template-columns: repeat(8, minmax(0, 1fr)); } } /* El relato, centrado en el alto (2/10/2026, «centremos los textos»): el título, el texto y las opciones van juntos en el medio, sin el hueco abajo. */ .agv__relato { justify-content: center; } .agv .agenda__ops { margin-top: var(--sp-2); } .agv-rivales .agv__relato { justify-content: flex-start; } .en-modo-seleccion dialog.dialogo--sel .dialogo__pie { margin-top: var(--sp-4); } /* Centrado que no corta: con `justify-content: center` lo que no entra se va por arriba y no se puede alcanzar (el dorsal en el teléfono). Los márgenes automáticos centran cuando sobra lugar y empiezan arriba cuando falta. */ .agv__relato { justify-content: flex-start; } .agv__relato > :first-child { margin-top: auto; } .agv__relato > :last-child { margin-bottom: auto; } .agv-rivales .agv__relato > :first-child { margin-top: 0; } .agv__seguir { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .agv__seguir .action { flex: 1 1 14rem; justify-content: center; } .agenda__links { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .agenda__links .agenda__toda { margin-top: 0; } /* ========================================================================== LA VITRINA Y LA SELECCIÓN (2/10/2026), solapas de «Tu historia» en la Oficina; y el apodo real en la franja del Predio. ========================================================================== */ .hist__solapas .segmented__btn { min-height: 30px; padding-inline: var(--sp-3); font-size: var(--fs-sm); } .vit__estante { margin: 0 0 var(--sp-2); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--sp-2); } .vit__trofeo { display: grid; justify-items: center; gap: 2px; padding: var(--sp-3) var(--sp-2); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); text-align: center; } .vit__trofeo .i { width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 40%, transparent)); } .vit__trofeo b { font-size: var(--fs-sm); color: var(--text-primary); } .vit__trofeo small { font-size: var(--fs-2xs); color: var(--text-muted); } .vit__trofeo--plata { border-color: var(--line-strong); background: none; } .vit__trofeo--plata .i { color: var(--text-secondary); filter: none; } .vit__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .vit__dato { display: grid; gap: 1px; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-bottom: 1px solid var(--line-hairline); } .vit__dato b { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .vit__dato span { font-size: var(--fs-xs); color: var(--text-muted); } .vit__cab { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .vit__bandera { width: 54px; height: 36px; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.5); } .vit__cab b { display: block; font-size: var(--fs-lg); color: var(--text-primary); } .vit__cab small { font-size: var(--fs-sm); color: var(--accent-texto); font-style: italic; } .vit__meta { margin: 0 0 0 auto; max-width: 60%; padding: 2px var(--sp-3); border-left: 3px solid var(--accent); font-size: var(--fs-sm); color: var(--text-primary); } .vit__ficha { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); } .vit__fila { display: grid; gap: 1px; padding: 6px 0; border-bottom: 1px solid var(--line-hairline); min-width: 0; } .vit__fila dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .vit__fila dd { margin: 0; font-size: var(--fs-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .vit__ficha { grid-template-columns: minmax(0, 1fr); } .vit__fila dd { white-space: normal; } .vit__cab { flex-wrap: wrap; } .vit__meta { margin: 0; max-width: none; flex-basis: 100%; } } /* Las cuatro solapas en una tarjeta que ocupa toda la columna. */ .ofi3__lado > .ofi3__historia { overflow: hidden; } .ofi3__historia .panel__head { flex-wrap: wrap; } .ofi3__historia > .ofisel__recorrido { overflow-y: auto; } .vit__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vit__fuente { margin: var(--sp-2) 0 0; font-size: var(--fs-2xs); color: var(--text-muted); } .pre__apodo { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--accent-texto); } /* ========================================================================== LA VITRINA (2/10/2026, `vitrina-seleccion.js`): la sala de trofeos y logros del seleccionador. Vive en la ventana del modo, pero ocupa la caja entera: arriba el estante y tus momentos, abajo los logros por estante. ========================================================================== */ .agenda-v.vitr-v { padding: var(--sp-3); } .agenda-v__caja.vitr { position: relative; width: min(90rem, 100%); height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--sp-5) var(--sp-6) var(--sp-6); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 18px; background: radial-gradient(70% 45% at 25% 0%, color-mix(in srgb, var(--agv-a) 36%, transparent), transparent 70%), radial-gradient(55% 50% at 100% 100%, color-mix(in srgb, var(--agv-b) 22%, transparent), transparent 70%), linear-gradient(180deg, #0e1117, #07080b); box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.95); animation: agv-entra 380ms cubic-bezier(.2,.8,.2,1) both; } .vitr__cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding-right: 2.6rem; } .vitr__bandera { width: 84px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 26px rgb(0 0 0 / 0.6); } .vitr__quien { min-width: 0; } .vitr__ante { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .vitr__tit { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 900; font-stretch: var(--wd-condensed); text-transform: uppercase; line-height: 1; color: #fff; } .vitr__sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); } .vitr__numeros { margin: 0; display: flex; gap: var(--sp-5); } .vitr__numeros div { display: grid; gap: 2px; text-align: right; } .vitr__numeros dt { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .vitr__numeros dd { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } .vitr__numeros dd small { font-size: 0.55em; color: var(--text-muted); } .vitr__arriba { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(16rem, 1fr); gap: var(--sp-5); align-items: stretch; } /* EL ESTANTE: cuatro piezas sobre una repisa, cada una con su luz. */ .vitr__estante { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) 0; } .vitr__estante::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--sp-2) + clamp(118px, 21vh, 196px)); height: 12px; border-radius: 3px; background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 30%, rgb(0 0 0 / 0.4)); box-shadow: 0 14px 26px rgb(0 0 0 / 0.7); } .vitr__pieza { margin: 0; display: grid; justify-items: center; gap: var(--sp-3); text-align: center; animation: agv-sube 560ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(120ms + var(--k, 0) * 90ms); } .vitr__foco { position: relative; display: grid; place-items: end center; height: clamp(118px, 21vh, 196px); width: 100%; isolation: isolate; } .vitr__foco::before { content: ''; position: absolute; inset: -14% 8% 0; z-index: -1; border-radius: 50% 50% 0 0; background: radial-gradient(60% 75% at 50% 0%, rgb(255 244 210 / 0.14), transparent 75%); } .vitr__pieza--oro .vitr__foco::before { background: radial-gradient(60% 80% at 50% 0%, rgb(255 228 140 / 0.34), transparent 75%); } .vitr__pieza--plata .vitr__foco::before { background: radial-gradient(60% 80% at 50% 0%, rgb(230 236 242 / 0.26), transparent 75%); } .vitr__copa { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 14px 16px rgb(0 0 0 / 0.65)); } .vitr__copa--oro { filter: drop-shadow(0 0 18px rgb(244 205 85 / 0.35)) drop-shadow(0 14px 16px rgb(0 0 0 / 0.65)); animation: vitr-brillo 4.5s ease-in-out infinite; } .vitr__cifra { font-size: 34px; font-weight: 900; font-family: inherit; } .vitr__copa--oro .vitr__cifra { fill: #4a3200; } .vitr__copa--plata .vitr__cifra { fill: #2b3137; } .vitr__copa--sombra .vitr__cifra { fill: rgb(255 255 255 / 0.35); } .vitr__pieza figcaption { display: grid; gap: 3px; max-width: 15rem; padding-top: var(--sp-1); } .vitr__pieza figcaption b { font-size: var(--fs-md, 1rem); font-weight: 900; font-stretch: var(--wd-condensed); text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-primary); } .vitr__tuyo { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); } .vitr__pieza--oro .vitr__tuyo { color: var(--accent-texto); } .vitr__pieza figcaption small { font-size: var(--fs-xs); color: var(--text-muted); } .vitr__pieza--sombra .vitr__copa { opacity: 0.9; } .vitr__momentos { display: flex; flex-direction: column; min-height: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-hairline); border-radius: 14px; background: rgb(0 0 0 / 0.28); } .vitr__momentos ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); overflow-y: auto; scrollbar-width: thin; } .vitr__momentos li { display: grid; gap: 1px; padding-left: var(--sp-3); box-shadow: inset 2px 0 0 var(--accent); font-size: var(--fs-sm); line-height: 1.35; color: var(--text-primary); animation: agv-sube 420ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(260ms + var(--k, 0) * 60ms); } .vitr__momentos small { font-size: var(--fs-2xs); color: var(--text-muted); } .vitr__nada { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } /* LOS LOGROS: «En la cancha» tiene doce y va en dos columnas; los otros tres, en una. */ .vitr__estantes { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .vitr__grupo:first-child .vitr__logros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vitr__grupo-tit { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--sp-2); padding-bottom: 6px; border-bottom: 1px solid var(--line-hairline); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .vitr__grupo-tit span { color: var(--accent-texto); font-variant-numeric: tabular-nums; } .vitr__logros { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .vitr__logro { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: 6px var(--sp-2); border: 1px solid var(--line-hairline); border-radius: 10px; background: rgb(255 255 255 / 0.02); animation: agv-sube 380ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(320ms + var(--k, 0) * 35ms); } .vitr__disco { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / 0.2); color: var(--text-muted); } .vitr__disco .i { width: 16px; height: 16px; } .vitr__logro--hecho { border-color: color-mix(in srgb, #f4cd55 30%, transparent); background: linear-gradient(90deg, color-mix(in srgb, #f4cd55 9%, transparent), transparent 70%); } .vitr__logro--hecho .vitr__disco { border: 0; color: #3d2a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b33a 55%, #8a5f08); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(244 205 85 / 0.3); } .vitr__logro-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center; min-width: 0; } .vitr__logro-txt b, .vitr__logro-txt small { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vitr__logro-txt b { font-size: var(--fs-sm); color: var(--text-secondary); } .vitr__logro--hecho .vitr__logro-txt b { color: var(--text-primary); } .vitr__logro-txt small { font-size: var(--fs-2xs); color: var(--text-muted); } .vitr__logro-txt em { font-style: normal; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--text-muted); } .vitr__barra { display: block; height: 4px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: rgb(255 255 255 / 0.08); } .vitr__barra i { display: block; width: var(--va, 0%); height: 100%; border-radius: inherit; background: var(--accent); } .vitr__logro-txt .vitr__barra { margin-top: 3px; } @keyframes vitr-brillo { 50% { filter: drop-shadow(0 0 26px rgb(255 226 130 / 0.55)) drop-shadow(0 14px 16px rgb(0 0 0 / 0.65)) brightness(1.08); } } @media (prefers-reduced-motion: reduce) { .agenda-v__caja.vitr, .vitr__pieza, .vitr__momentos li, .vitr__logro, .vitr__copa--oro { animation: none; } } @media (max-width: 1100px) { .vitr__arriba { grid-template-columns: minmax(0, 1fr); } .vitr__estantes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vitr__grupo:first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .agenda-v.vitr-v { padding: 0; } .agenda-v__caja.vitr { height: 100dvh; max-height: 100dvh; border-radius: 0; padding: var(--sp-4) var(--sp-3) var(--sp-5); } .vitr__cab { grid-template-columns: auto minmax(0, 1fr); } .vitr__bandera { width: 60px; } .vitr__numeros { grid-column: 1 / -1; justify-content: space-between; } .vitr__numeros div { text-align: left; } .vitr__estante { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); } .vitr__estante::after { display: none; } .vitr__foco { height: 120px; border-bottom: 8px solid rgb(255 255 255 / 0.07); } .vitr__estantes, .vitr__grupo:first-child .vitr__logros { grid-template-columns: minmax(0, 1fr); } } /* La vitrina en chico, en la solapa de la Oficina. */ .vitc { display: grid; gap: var(--sp-3); } .vitc__estante { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); } .vitc__pieza { display: grid; justify-items: center; gap: 4px; padding: var(--sp-2) 4px; border-radius: 10px; background: radial-gradient(70% 60% at 50% 0%, rgb(255 244 210 / 0.08), transparent 75%); text-align: center; } .vitc__pieza--oro { background: radial-gradient(70% 70% at 50% 0%, rgb(255 228 140 / 0.22), transparent 75%); } .vitc__pieza .vitr__copa { height: 74px; } .vitc__pieza small { font-size: var(--fs-2xs); line-height: 1.25; color: var(--text-muted); } .vitc__pieza--oro small { color: var(--accent-texto); } .vitc__logros { display: grid; gap: var(--sp-2); justify-items: start; } .vitc__cuenta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--sp-2); width: 100%; margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .vitc__cuenta b { font-size: var(--fs-xl); font-weight: 900; color: var(--text-primary); } .vitc__cuenta .vitr__barra { grid-column: 1 / -1; } .vitc__ultimos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .vitc__ultimos li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: var(--fs-xs); color: var(--text-primary); background: linear-gradient(90deg, color-mix(in srgb, #f4cd55 18%, transparent), transparent); border: 1px solid color-mix(in srgb, #f4cd55 30%, transparent); } .vitc__ultimos .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #3d2a00; background: #e0b33a; } /* LOS TEXTOS DE LOS MODALES, CENTRADOS (2/10/2026, «Centremos los textos de todos los modales»; el 1/10 se había centrado sólo en vertical). La etiqueta y la fecha van una arriba de la otra; las opciones, con el número a la izquierda y el texto en el medio de verdad —la tercera columna vacía equilibra la del número—. La lista de rivales y la grilla de dorsales no se centran: son para recorrer, no para leer. */ .agv__relato { text-align: center; align-items: stretch; } .agv .agenda__cab { flex-direction: column; align-items: center; gap: 2px; padding-right: 0; } .agv .agenda__op { grid-template-columns: 2rem minmax(0, 1fr) 2rem; text-align: center; } .agv .agenda__op span { justify-items: center; } .agv__seguir, .en-modo-seleccion dialog.dialogo--sel .dialogo__pie { justify-content: center; } .agv__seguir { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .agv__lista, .agv__lista button, .agv__busca { text-align: left; } /* LA CANCHA NO SE ACHICA CON LA SESIÓN (2/10/2026, «No se puede achicar así la cancha cuando elijo ese tipo de entrenamiento»). Con un partido de práctica la sesión medía 374 px de alto, el panel se la llevaba entera y la cancha quedaba en 259 × 167 (163 × 106 en una pantalla de 760). En ancho, la sesión se va al COSTADO: la cancha a la izquierda con todo el alto del panel, la sesión a la derecha en una columna, y los dos equipos uno arriba del otro. Plegada, o sin nada que configurar, la cancha vuelve a ocupar el panel entero. */ @media (min-width: 1101px) { .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)), .ent__centro:has(.sesion--viva:not(.sesion--plegada)) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--sp-4); } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .panel__head, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .panel__head { grid-column: 1 / -1; } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .ent__campo, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .ent__campo { grid-column: 1; grid-row: 2; height: 100%; } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .ent__sesion, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .ent__sesion { grid-column: 2; grid-row: 2; max-height: none; min-height: 0; align-self: stretch; } .ent__sesion .sesion { gap: var(--sp-3); padding: var(--sp-4); } .ent__sesion .sesion__controles { gap: var(--sp-3) var(--sp-5); } .ent__sesion .plan { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .ent__sesion .plan__equipo { padding: var(--sp-3); gap: var(--sp-2); } .ent__sesion .plan__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ent__sesion .sesion--viva { grid-template-columns: minmax(0, 1fr); } .ent__sesion .sesion:not(.sesion--viva) > .sesion__acciones { margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); bottom: calc(-1 * var(--sp-4)); } } /* El pie va pegado a la cancha, no al fondo del panel. */ .ent__campo { align-content: center; } /* EN ANGOSTO LA CANCHA TIENE SU PROPIO ALTO (2/10/2026). Se mide contra el alto del contenedor (`container-type: size`), y apilada nadie le daba uno: a 390 px medía 0 × 0 y del dibujo quedaba un disco suelto. */ @media (max-width: 1100px) { .ent__campo { flex: none; height: calc((100vw - 3rem) * 68 / 105 + 2rem); max-height: 72vh; } } /* Y APILADO, LA PANTALLA CRECE HACIA ABAJO: el tope del alto de la ventana es del escritorio; en el teléfono repartía 123 px por tarjeta y se pisaban. */ @media (max-width: 1100px) { main.ent.entsel { max-height: none; height: auto; } .entsel__grilla { flex: none; grid-auto-rows: auto; } .entsel__grilla > .col { min-height: 0; height: auto; } .ent__sesion { max-height: none; } } /* EN EL TELÉFONO (2/10/2026): «En construcción» no entra en un tercio de 390 y se montaba sobre «Fríos»; el «Hoy» de la tira de días se salía de su tarjeta y pisaba la de al lado. */ @media (max-width: 720px) { .entsel__numeros b { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-lg); } .ent__dias--tira .ent__dia { min-width: 8.5rem; } .ent__dia-cab { flex-wrap: wrap; row-gap: 2px; } } /* LA RUEDA NO SE TRABA (2/10/2026, «El scroll de esta columna es durísimo»). En Chrome, una caja con `overscroll-behavior: contain` corta la rueda aunque no tenga nada que rodar: con el puntero sobre el vestuario, la columna del Predio se clavaba en 652 de 882 px. Medido en las doce pantallas: el vestuario del Predio, y el planteo y el rival de la Previa a 1280 × 720. Esas cajas no ruedan solas; la que rueda es la de afuera. */ .pre__t--vestuario > [data-f='pre-vestuario'], .dsel--mesa .dsel__lado > .tarjeta:is(.dsel__planteo, .dsel__rival) { overscroll-behavior: auto; } .pre--nuevo .pre__riel .pre__t--vestuario > [data-f='pre-vestuario'] { overflow: visible; } /* ========================================================================== LAS SOLAPAS DEL MODO (2/10/2026, «evitemos los botones pegados, muertos, sin estilos y sencillos»). El segmentado del juego —un bloque oscuro con los rótulos pegados y el elegido relleno— queda para el club; en el modo, cada opción es una píldora con aire alrededor, que se enciende al pasar, se hunde al tocar y, elegida, se llena de acento con su halo. ========================================================================== */ .en-modo-seleccion .segmented { gap: 6px; padding: 4px; flex-wrap: wrap; border: 1px solid var(--line-hairline); border-radius: 999px; background: rgb(0 0 0 / 0.28); } .en-modo-seleccion .segmented__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 16px; border-radius: 999px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); color: var(--text-secondary); font-weight: 700; letter-spacing: 0.005em; transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease); } @media (hover: hover) { .en-modo-seleccion .segmented__btn:hover { background: rgb(255 255 255 / 0.09); color: var(--text-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } } .en-modo-seleccion .segmented__btn:active { transform: scale(0.96); } .en-modo-seleccion .segmented__btn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; } .en-modo-seleccion .segmented__btn:is([aria-pressed='true'], [aria-selected='true']) { padding-left: 16px; background: var(--accent); color: var(--text-on-accent); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 -2px 0 rgb(0 0 0 / 0.15); } .en-modo-seleccion .segmented__btn:is([aria-pressed='true'], [aria-selected='true'])::before { content: none; } .en-modo-seleccion .segmented__btn:disabled { opacity: 0.4; cursor: default; } .en-modo-seleccion .segmented__count { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: var(--text-primary); font-variant-numeric: tabular-nums; } .en-modo-seleccion .segmented__btn:is([aria-pressed='true'], [aria-selected='true']) .segmented__count { background: rgb(0 0 0 / 0.18); color: var(--text-on-accent); } @media (prefers-reduced-motion: reduce) { .en-modo-seleccion .segmented__btn { transition: none; } .en-modo-seleccion .segmented__btn:active { transform: none; } } /* ========================================================================== EL INDICADOR DE LA LISTA (2/10/2026): el anillo de los 23 a la izquierda, las cuatro líneas con sus casilleros —los que faltan, punteados— a la derecha, y los datos debajo de las líneas. ========================================================================== */ .cvsel__tira.lista23 { display: grid; grid-template-columns: auto auto; grid-template-areas: 'cuenta lineas' 'cuenta datos'; align-items: center; justify-content: end; column-gap: var(--sp-5); row-gap: var(--sp-2); } .lista23 .lista23__cuenta { grid-area: cuenta; position: relative; display: grid; place-items: center; align-content: center; width: 96px; height: 96px; gap: 0; } .lista23__anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .lista23__pista { fill: rgb(0 0 0 / 0.3); stroke: rgb(255 255 255 / 0.1); stroke-width: 7; } .lista23__arco { fill: none; stroke: var(--nacion-tinta, var(--accent)); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nacion-tinta, var(--accent)) 50%, transparent)); animation: lista23-llena 700ms cubic-bezier(.2,.8,.2,1) both; } .lista23__cuenta--ok .lista23__arco { stroke: var(--verde-400); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--verde-400) 60%, transparent)); } @keyframes lista23-llena { from { stroke-dashoffset: var(--desde); } to { stroke-dashoffset: var(--hasta); } } .lista23 .lista23__cuenta strong { position: relative; font-size: 1.9rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } .lista23 .lista23__cuenta strong span { font-size: 0.5em; font-weight: 700; color: var(--text-muted); } .lista23__estado { position: relative; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--warn, var(--amber-300)); } .lista23__cuenta--ok .lista23__estado { color: var(--verde-300); } .lista23__de { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-size: var(--fs-2xs); } .lista23__cuenta--cambia strong { animation: lista23-late 420ms cubic-bezier(.2,.8,.2,1); } @keyframes lista23-late { 40% { transform: scale(1.22); color: var(--nacion-tinta, var(--accent)); } } .cvsel__tira .lista23__lineas { grid-area: lineas; justify-content: flex-start; gap: var(--sp-3) var(--sp-5); } .cvsel__tira .lista23__datos { grid-area: datos; justify-content: flex-start; } .lista23 .lista23__cab .label { font-size: var(--fs-2xs); color: var(--text-secondary); } .lista23 .lista23__frac { font-size: var(--fs-xs); color: var(--text-muted); } .lista23 .lista23__frac b { font-size: var(--fs-md); font-weight: 900; } .lista23__linea--ok .lista23__frac b { color: var(--verde-300); } .lista23__linea--falta .lista23__frac b { color: var(--warn, var(--amber-300)); } .lista23__linea--sobra .lista23__frac b { color: var(--accent-texto); } .lista23 .lista23__marcas { gap: 4px; } .lista23 .lista23__c { width: 15px; height: 20px; border-radius: 4px; } .lista23 .lista23__c--falta { border: 1.5px dashed rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.02); } .lista23 .lista23__c--puesto { box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); } .lista23__linea--ok .lista23__c--puesto { background: var(--verde-400); border-color: var(--verde-400); } @media (prefers-reduced-motion: reduce) { .lista23__arco, .lista23__cuenta--cambia strong { animation: none; } } @media (max-width: 900px) { .cvsel__tira.lista23 { grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; } .lista23 .lista23__cuenta { width: 84px; height: 84px; } } .lista23__estado { font-size: 0.56rem; letter-spacing: 0.06em; margin-top: 2px; } .cvsel__tira .lista23__de { display: none; } /* LA BARRA DE LA CONVOCATORIA (2/10/2026): las cuatro vistas en una grilla del mismo ancho, y debajo el buscador y el país con la misma altura. */ .cvsel__filtros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); } .en-modo-seleccion .cvsel__vistas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 6px; padding: 5px; border-radius: 16px; } .en-modo-seleccion .cvsel__vista { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 12px; text-align: left; white-space: normal; } .en-modo-seleccion .cvsel__vista:is([aria-pressed='true']) { padding-left: 12px; } .cvsel__vista-ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.07); color: var(--text-secondary); } .cvsel__vista[aria-pressed='true'] .cvsel__vista-ico { background: rgb(0 0 0 / 0.16); color: var(--text-on-accent); } .cvsel__vista-txt { display: grid; gap: 1px; min-width: 0; } .cvsel__vista-txt b { font-size: var(--fs-md); font-weight: 800; line-height: 1.15; } .cvsel__vista-txt small { font-size: var(--fs-2xs); font-weight: 600; line-height: 1.2; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvsel__vista[aria-pressed='true'] .cvsel__vista-txt small { color: color-mix(in srgb, var(--text-on-accent) 72%, transparent); } .cvsel__filtros .cvsel__buscar { max-width: none; height: 44px; border-radius: 12px; } .cvsel__filtros .cvsel__pais { height: 44px; min-width: 12rem; padding: 0 var(--sp-3) 0 var(--sp-4); border-radius: 12px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--bg-page); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; } .cvsel__filtros .cvsel__pais:focus { outline: none; border-color: var(--accent); } /* En un panel angosto las cuatro vistas van de a dos: en una fila de 720 px no entraban ni el nombre, ni la cuenta, ni lo que dice cada una. */ .cvsel__filtros { container-type: inline-size; } .en-modo-seleccion .cvsel__vistas { grid-template-columns: repeat(4, minmax(0, 1fr)); } @container (max-width: 860px) { .en-modo-seleccion .cvsel__vistas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 420px) { .en-modo-seleccion .cvsel__vista { min-height: 44px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; } .cvsel__vista-ico { width: 24px; height: 24px; padding: 5px; } .cvsel__vista-txt small { display: none; } .cvsel__vista-txt b { font-size: var(--fs-sm); } } .en-modo-seleccion .cvsel__vista { min-height: 52px; } /* «QUÉ SE TRABAJA» EN ACORDEÓN (2/10/2026, «más dinámico, fluido, que no se amontone»): un renglón por familia —nombre, un punto si el trabajo del día es de ahí, cuántos trabajos tiene y la flecha—; la abierta se enciende y despliega sus tarjetas con un fundido. */ .ent__acordeon { display: grid; gap: 4px; } .ent__acor { border-radius: 10px; } .ent__acor--abierta { background: rgb(255 255 255 / 0.025); box-shadow: inset 0 0 0 1px var(--line-hairline); padding-bottom: 6px; } .entsel .ent__fam { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-boton); text-align: left; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 700; transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease); } .entsel .ent__fam small { font-size: var(--fs-2xs); font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: var(--text-muted); font-variant-numeric: tabular-nums; } .ent__fam-flecha { color: var(--text-muted); transition: transform 200ms var(--ease); } .ent__fam-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } @media (hover: hover) { .entsel .ent__fam:hover { background: rgb(255 255 255 / 0.09); color: var(--text-primary); } } .entsel .ent__fam:active { transform: scale(0.98); } .entsel .ent__fam--vista { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .entsel .ent__fam--vista small { background: rgb(0 0 0 / 0.16); color: var(--text-on-accent); } .entsel .ent__fam--vista .ent__fam-flecha { transform: rotate(180deg); color: var(--text-on-accent); } .entsel .ent__fam--vista .ent__fam-punto { background: var(--text-on-accent); box-shadow: none; } .entsel .ent__fam--puesta:not(.ent__fam--vista) { color: var(--text-primary); } .ent__acor .ent__familia { padding: 6px 6px 0; animation: agv-sube 260ms cubic-bezier(.2,.8,.2,1) both; } @media (prefers-reduced-motion: reduce) { .ent__acor .ent__familia { animation: none; } .entsel .ent__fam:active { transform: none; } .ent__fam-flecha { transition: none; } } /* ========================================================================== EL MODAL INMERSIVO (2/10/2026, «optimicemos el uso del modal, textos acomodados, legibles, un modal inmersivo quiero»). Más grande, los colores de la selección bañando también el relato, el título y el texto en tamaño de lectura con un ancho cómodo, y las opciones como tarjetas amplias. ========================================================================== */ .agenda-v__caja.agv { width: min(78rem, 100%); min-height: min(40rem, calc(100vh - 3rem)); grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); border-color: color-mix(in srgb, var(--agv-a) 55%, var(--accent)); background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--agv-a) 16%, transparent), transparent 70%), radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--agv-b) 12%, transparent), transparent 70%), var(--bg-raised); } .agenda-v__fondo { background: radial-gradient(80% 70% at 50% 45%, color-mix(in srgb, var(--agv-a) 22%, rgb(4 5 8 / 0.82)), rgb(4 5 8 / 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .agv__relato { padding: var(--sp-8, 3rem) clamp(1.5rem, 4vw, 3.5rem) var(--sp-7); gap: var(--sp-4); align-items: center; } .agv__relato > * { width: 100%; max-width: 40rem; } .agv .agenda__cab { font-size: var(--fs-sm); } .agv .agenda__cab small { font-size: var(--fs-sm); } .agv .agenda__tit { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.02; text-wrap: balance; } .agv .agenda__txt { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; color: color-mix(in srgb, var(--text-primary) 82%, transparent); text-wrap: pretty; } .agv .agenda__ops { gap: var(--sp-3); margin-top: var(--sp-3); } .agv .agenda__op { min-height: 76px; padding: var(--sp-4) var(--sp-5); border-radius: 14px; background: rgb(255 255 255 / 0.03); } .agv .agenda__op b { font-size: clamp(1.1rem, 1.3vw, 1.3rem); } .agv .agenda__op small { font-size: var(--fs-md); line-height: 1.4; } .agv__tecla { width: 2.2rem; height: 2.2rem; } .agv .agenda__op { grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem; } .agv__escudo { width: clamp(150px, 17vw, 240px); height: clamp(150px, 17vw, 240px); } .agv__quien b { font-size: clamp(1.7rem, 2.6vw, 2.5rem); } .agv__quien small { font-size: var(--fs-md); } .agv__eleccion { font-size: clamp(2rem, 3.2vw, 3rem); } .agv .agenda__txt--hecho { font-size: clamp(1.1rem, 1.35vw, 1.3rem); } @media (max-width: 760px) { .agenda-v__caja.agv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .agv__relato { padding: var(--sp-5) var(--sp-4); } .agv .agenda__tit { font-size: 1.7rem; } .agv .agenda__txt { font-size: var(--fs-md); } .agv .agenda__op { min-height: 60px; padding: var(--sp-3); } .agv .agenda__op b { font-size: var(--fs-md); } .agv .agenda__op small { font-size: var(--fs-sm); } .agv__escudo { width: 84px; height: 84px; } .agv__quien b { font-size: 1.3rem; } } /* LOS FILTROS DE LA CONVOCATORIA (2/10/2026): una fila de píldoras debajo del buscador; la que tiene algo puesto se enciende, y al final «Limpiar filtros» con cuántos hay. */ .cvsel__filtros .cvsel__buscar, .cvsel__filtrar { grid-column: 1 / -1; } .cvsel__filtrar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cvsel__filtrar-tit { margin-right: 4px; color: var(--text-muted); } .cvsel__filtrar .desp { flex: 0 1 auto; min-width: 0; } .cvsel__filtrar .desp__btn.cvsel__filtro, .cvsel__filtros .cvsel__filtrar .desp__btn.cvsel__pais { height: 36px; min-width: 0; max-width: 15rem; padding: 0 10px 0 14px; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 700; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); } @media (hover: hover) { .cvsel__filtrar .desp__btn.cvsel__filtro:hover { background: rgb(255 255 255 / 0.09); color: var(--text-primary); } } .cvsel__filtrar .desp__btn.cvsel__filtro--puesto, .cvsel__filtros .cvsel__filtrar .desp__btn.cvsel__pais.cvsel__filtro--puesto { border-color: var(--accent); color: var(--accent-texto); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .cvsel__filtrar .desp__valor-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvsel__limpiar { height: 36px; border-radius: 999px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; animation: agv-sube 220ms cubic-bezier(.2,.8,.2,1) both; } /* EL CONVOCADO QUE SE TOCA (2/10/2026): el renglón se enciende con una barra y un halo, y debajo se despliega su ficha —el dorsal en grande, el escudo, los datos y qué hacer— con un fundido que baja. */ .cvl__j[data-cvl] { cursor: pointer; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease); border-radius: 8px; } @media (hover: hover) { .cvl__j[data-cvl]:hover { background: rgb(255 255 255 / 0.05); } } .cvl__j[data-cvl]:active { transform: scale(0.99); } .cvl__j[data-cvl]:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; } .cvl__j--abierto { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; box-shadow: inset 3px 0 0 var(--accent); border-bottom-color: transparent; border-radius: 8px 8px 0 0; animation: cvl-enciende 420ms cubic-bezier(.2,.8,.2,1); } @keyframes cvl-enciende { 0% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 60% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 6px transparent; } } .cvl__det { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: center; margin: 0 0 var(--sp-2); padding: var(--sp-4); border-radius: 0 0 12px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), rgb(255 255 255 / 0.02)); box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--line-hairline); transform-origin: top; animation: cvl-abre 320ms cubic-bezier(.2,.8,.2,1) both; } @keyframes cvl-abre { from { opacity: 0; transform: translateY(-8px) scaleY(0.9); } } .cvl__det-escena { position: relative; display: grid; place-items: center; width: 92px; height: 92px; } .cvl__det-escena .cvl__disco { width: 72px; height: 72px; font-size: 1.6rem; animation: cvl-gira 520ms cubic-bezier(.2,.8,.2,1) both; } .cvl__det-escudo { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.6)); animation: agv-sube 420ms 140ms cubic-bezier(.2,.8,.2,1) both; } @keyframes cvl-gira { from { opacity: 0; transform: scale(0.6) rotate(-25deg); } } .cvl__det-cuerpo { display: grid; gap: var(--sp-2); min-width: 0; } .cvl__det-nom { margin: 0; display: grid; } .cvl__det-nom b { font-size: var(--fs-lg); font-weight: 900; color: var(--text-primary); } .cvl__det-nom small { font-size: var(--fs-sm); color: var(--text-secondary); } .cvl__det-datos { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); } .cvl__det-datos div { display: grid; gap: 1px; } .cvl__det-datos dt { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .cvl__det-datos dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); } .cvl__det-acc { display: flex; flex-wrap: wrap; gap: 6px; } @media (prefers-reduced-motion: reduce) { .cvl__det, .cvl__det-escena .cvl__disco, .cvl__det-escudo, .cvl__j--abierto { animation: none; } } /* LAS FICHAS DE LA CANCHA DE LA PREVIA, GRANDES Y LEGIBLES (2/10/2026, «los jugadores con pelotitas más grandes y legibles, lo mismo cuando no hay jugador»). Crecen con la cancha —`cqw` de la caja, que es contenedor— entre 40 y 64 px; el número va sobre una placa clara cuando la camiseta tiene rayas (ver `discoDeDorsal`), y el puesto vacío se marca con un trazo que se ve sobre el césped. */ .dsel .dsel__campo .dia__ficha-n--disco, .dsel .dsel__campo .dia__disco { width: clamp(36px, 2.2cqw + 10px, 48px); height: clamp(36px, 2.2cqw + 10px, 48px); } .dsel .dsel__campo .dia__ficha--vacia .dia__ficha-n { width: clamp(36px, 2.2cqw + 10px, 48px); height: clamp(36px, 2.2cqw + 10px, 48px); background: rgb(0 0 0 / 0.38); border: 2px dashed rgb(255 255 255 / 0.6); box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.6); color: rgb(255 255 255 / 0.92); font-size: clamp(11px, 0.4cqw + 7px, 14px); font-weight: 800; letter-spacing: 0.02em; } .dsel .dsel__campo .dia__ficha--vacia:hover .dia__ficha-n { border-color: var(--accent); color: var(--accent-texto); } .dsel .dsel__campo .dia__ficha-nom { top: calc(100% + 4px); max-width: 9rem; padding: 2px 8px; border-radius: 6px; font-size: clamp(11px, 0.35cqw + 7px, 13px); background: rgb(0 0 0 / 0.78); } .dia__disco text { font-family: inherit; } /* «Armarlo solo» y «Limpiar todo», a tamaño de botón (2/10/2026, «estos botones quedan chicos»). */ .dsel__acciones { display: inline-flex; gap: var(--sp-2); } .dsel__acciones .action { min-height: 36px; padding: 0 var(--sp-5); border-radius: var(--r-boton); font-size: var(--fs-sm); font-weight: 800; } /* Los textos de las solapas, centrados (2/10/2026). Las de la Convocatoria llevan ícono y descripción y quedan a la izquierda. */ .en-modo-seleccion .segmented__btn:not(.cvsel__vista) { justify-content: center; text-align: center; } /* EL PLANTEO, APROVECHANDO EL ALTO (2/10/2026): las formaciones dibujadas en cuatro columnas y los botones de mentalidad, ritmo y salida a tamaño de dedo. La columna dejaba media altura vacía. */ .dsel__planteo .dia__opcion { min-height: 32px; padding: 4px 6px; font-size: var(--fs-sm); font-weight: 700; border-radius: var(--r-boton); transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease); } .dsel__planteo .dia__opcion:active { transform: scale(0.96); } .dia__opcion--forma { display: grid; justify-items: center; gap: 3px; padding: 5px 5px 4px !important; font-size: var(--fs-xs) !important; } .dia__forma-mini { width: 100%; height: auto; display: block; } .dia__forma-mini rect { fill: color-mix(in srgb, var(--campo, #1e5a3a) 70%, transparent); stroke: rgb(255 255 255 / 0.22); stroke-width: 1; } .dia__forma-mini line, .dia__forma-mini > circle:not(.dia__forma-punto) { stroke: rgb(255 255 255 / 0.18); stroke-width: 1; } .dia__forma-punto { fill: rgb(255 255 255 / 0.85); } .dia__opcion--forma[aria-checked='true'] .dia__forma-mini rect { fill: rgb(0 0 0 / 0.18); stroke: rgb(0 0 0 / 0.25); } .dia__opcion--forma[aria-checked='true'] .dia__forma-punto { fill: var(--text-on-accent); } .dia__opcion--forma[aria-checked='true'] .dia__forma-mini line, .dia__opcion--forma[aria-checked='true'] .dia__forma-mini > circle:not(.dia__forma-punto) { stroke: rgb(0 0 0 / 0.2); } .dsel__planteo .dia__mando--botones { gap: 6px; } .dsel__planteo .dia__mando--botones + .dia__mando--botones { margin-top: var(--sp-2); } @media (prefers-reduced-motion: reduce) { .dsel__planteo .dia__opcion:active { transform: none; } } /* SEGÚN EL ALTO QUE HAYA: en una pantalla baja las formaciones van sólo con el nombre y los botones compactos; con alto de sobra aparece el dibujo de cada una y los botones crecen. Medido: a 1440 × 1300 sobraban 382 px vacíos y a 1440 × 900 el dibujo hacía rodar la columna. */ .dia__forma-mini { display: none; } .dsel__planteo .dia__opcion { min-height: 28px; } @media (min-height: 980px) { .dia__forma-mini { display: block; } .dsel__planteo .dia__opcion { min-height: 36px; } } @media (min-height: 1150px) { .dsel__planteo .dia__opcion:not(.dia__opcion--forma) { min-height: 44px; font-size: var(--fs-md); } .dsel__planteo .dia__mando--botones + .dia__mando--botones { margin-top: var(--sp-4); } .dsel__planteo .dsel__desc { font-size: var(--fs-md); } } @media (min-height: 1150px) { .dsel__planteo .dia__opciones:has(.dia__opcion--forma) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .dia__opcion--forma { font-size: var(--fs-sm) !important; padding: 7px 7px 6px !important; } } @media (min-height: 1250px) { .dsel__planteo .dia__opcion:not(.dia__opcion--forma) { min-height: 50px; } .dsel__planteo .dia__opciones { gap: 6px; } } /* LAS FORMACIONES DIBUJADAS, MÁS GRANDES (2/10/2026, «se ve muy pequeño y se pierde»): cuatro por fila cuando hay alto, tres con mucho alto, el nombre en una sola línea y los puntos más gruesos. */ .dia__opcion--forma span { white-space: nowrap; font-size: var(--fs-sm); font-weight: 800; } @media (min-height: 980px) { .dsel__planteo .dia__opciones:has(.dia__opcion--forma) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } } @media (min-height: 1150px) { .dsel__planteo .dia__opciones:has(.dia__opcion--forma) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dia__opcion--forma { padding: 8px 8px 6px !important; gap: 5px; } .dia__opcion--forma span { font-size: var(--fs-md); } } /* EL ANILLO NO PISA EL NÚMERO (2/10/2026): el anillo crece y la cifra baja un punto, así «23/23» entra con aire adentro del trazo. */ .lista23 .lista23__cuenta { width: 108px; height: 108px; } .lista23 .lista23__cuenta strong { font-size: 1.55rem; } .lista23 .lista23__cuenta strong span { font-size: 0.48em; } /* EL DESPLEGABLE DEL MODO, CON LETRA DE LEER (2/10/2026, «textos más grandes please»). */ .en-modo-seleccion .desp__panel { min-width: 15rem; } .en-modo-seleccion .desp__op { min-height: 40px; padding: 8px 14px; font-size: var(--fs-md); } .en-modo-seleccion .desp__panel input { min-height: 40px; font-size: var(--fs-md); } /* TU DT (2/10/2026): la tarjeta con la que te ven tus amigos, en vivo a la izquierda; el formulario a la derecha. */ .tudt__tarjeta { width: min(19rem, 100%); padding: var(--sp-4); border-radius: 14px; background: rgb(0 0 0 / 0.42); border: 1px solid rgb(255 255 255 / 0.16); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; text-align: left; animation: agv-sube 500ms 120ms cubic-bezier(.2,.8,.2,1) both; } .tudt__av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text-on-accent); font-size: 1.3rem; font-weight: 900; letter-spacing: 0.02em; } .tudt__quien { display: grid; gap: 3px; min-width: 0; } .tudt__quien b { font-size: var(--fs-lg); font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tudt__quien small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.8); } .tudt__quien img { border-radius: 2px; object-fit: cover; } .tudt__cargo { grid-column: 1 / -1; margin: 0; padding-top: var(--sp-2); border-top: 1px solid rgb(255 255 255 / 0.12); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .tudt__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); text-align: left; width: 100%; max-width: 34rem; } .tudt__campo { display: grid; gap: 6px; } .tudt__campo > span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .tudt__campo input, .tudt__campo select, .tudt__campo .desp__btn { height: 46px; padding: 0 var(--sp-4); border-radius: 12px; border: 2px solid var(--line-strong); background: var(--bg-page); color: var(--text-primary); font: inherit; font-size: var(--fs-md); } .tudt__campo input:focus, .tudt__campo select:focus { outline: none; border-color: var(--accent); } .tudt__error { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--danger, #ff6b6b); } .tudt__form .agv__seguir { grid-column: 1 / -1; margin-top: var(--sp-2); } @media (max-width: 760px) { .tudt__form { grid-template-columns: minmax(0, 1fr); } .tudt__tarjeta { width: 100%; } } /* El desplegable, por encima de los modales del modo (2/10/2026: el de nacionalidad de «Tu DT» se abría detrás). */ .en-modo-seleccion .desp__panel { z-index: 200; } /* LA FOTO DEL PREDIO EN «TU DT» (2/10/2026): un arco de entrenamiento con el sol de la tarde, de Unsplash (licencia libre), oscurecido abajo y teñido con los colores de la selección para que la tarjeta se lea adelante. */ .tudt-v .agv__escena { background: linear-gradient(180deg, rgb(8 10 14 / 0.25) 0%, rgb(8 10 14 / 0.55) 55%, rgb(8 10 14 / 0.88) 100%), linear-gradient(135deg, color-mix(in srgb, var(--agv-a) 35%, transparent), color-mix(in srgb, var(--agv-b) 20%, transparent)), url('../assets/fotos/predio-tarde.jpg'); background-position: center, center, center 40%; background-size: cover; background-repeat: no-repeat; justify-content: flex-end; padding-bottom: var(--sp-7); } .tudt-v .agv__escena::before { display: none; } .tudt-v .agv__pie { text-shadow: 0 2px 8px rgb(0 0 0 / 0.7); } .tudt-v .tudt__tarjeta { background: rgb(8 10 14 / 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* LA TARJETA, CENTRADA Y SIN CORTES (2/10/2026): el avatar arriba, y debajo nombre, nacionalidad y cargo, cada uno en una sola línea. */ .tudt-v .tudt__tarjeta { width: min(23rem, 100%); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4) var(--sp-4); } .tudt-v .tudt__quien { justify-items: center; width: 100%; } .tudt-v .tudt__quien b, .tudt-v .tudt__quien small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tudt-v .tudt__quien small { justify-content: center; } .tudt-v .tudt__cargo { width: 100%; text-align: center; } @media (max-width: 760px) { .tudt-v .tudt__tarjeta { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; } .tudt-v .tudt__quien { justify-items: start; } .tudt-v .tudt__quien small { justify-content: flex-start; } .tudt-v .tudt__cargo { text-align: left; } } /* El modal de «Tu DT», un poco más grande (2/10/2026). */ .tudt-v .agenda-v__caja.agv { width: min(86rem, 100%); min-height: min(46rem, calc(100vh - 3rem)); } .tudt-v .tudt__form { max-width: 38rem; } /* «TU DT» CON CONTRASTE (2/10/2026, «contraste para que no se pierda visualmente nada»): rótulos claros, campos con borde que se ve, el botón secundario marcado, y la tarjeta sobre la foto con un fondo que la separa. */ .tudt-v .tudt__campo > span { color: rgb(255 255 255 / 0.82); } .tudt-v .tudt__campo input, .tudt-v .tudt__campo .desp__btn { background: #121419; border: 2px solid rgb(255 255 255 / 0.3); color: #fff; } .tudt-v .tudt__campo input::placeholder { color: rgb(255 255 255 / 0.45); } .tudt-v .tudt__campo input:hover, .tudt-v .tudt__campo .desp__btn:hover { border-color: rgb(255 255 255 / 0.5); } .tudt-v .tudt__campo input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .tudt-v .tudt__campo input.tudt__mal { border-color: var(--danger, #ff6b6b); } .tudt-v .tudt__error { color: #ff8a80; font-weight: 700; } .tudt-v .agv__seguir .action--callada { border: 2px solid rgb(255 255 255 / 0.45); color: #fff; } .tudt-v .agenda__cab { color: var(--accent-texto); } .tudt-v .tudt__tarjeta { background: rgb(6 8 11 / 0.86); border: 1px solid rgb(255 255 255 / 0.28); box-shadow: 0 18px 40px rgb(0 0 0 / 0.6); } .tudt-v .tudt__quien small { color: rgb(255 255 255 / 0.9); } .tudt-v .agv__pie { color: #fff; } .tudt-v .tudt__error { text-align: center; } /* LOS AMIGOS (2/10/2026): en la Sala del CT, debajo del cuerpo técnico, los DT amigos con su lista; y en «Tu DT» el tilde de que te encuentren. */ .tudt__check { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; } .tudt__check input { width: 20px; height: 20px; accent-color: var(--accent); } .amg { display: grid; gap: var(--sp-5); align-content: start; } .amg:empty { display: none; } /* LOS AMIGOS EN SU SOLAPA (4/10/2026, «se ve feo, se corta, no lo entiendo»): arriba quién sos —el código, que es lo que se pasa—, después el buscador, y los amigos en renglones del ancho de la columna. Sin amigos, los tres pasos. */ .amg__cab { display: grid; gap: 4px; } .amg__tit { margin: 0; display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); } .amg__n { font-size: var(--fs-md); font-weight: 800; color: var(--accent-texto); font-variant-numeric: tabular-nums; } .amg__baj { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); max-width: 60ch; } .amg__mi-codigo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); } .amg__mi-codigo--sin { color: var(--text-secondary); font-size: var(--fs-sm); } .amg__mi-codigo--sin p { margin: 0; } .amg__codigo { display: grid; gap: 2px; } .amg__codigo span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .amg__codigo b { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .amg__mandar { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .amg__mandar .action, .amg__acc .action, .amg__res > .action { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: var(--sp-4); } .amg__aviso { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); color: var(--verde-300); overflow-wrap: anywhere; } .amg__agregar { display: grid; gap: var(--sp-2); } .amg__busca { display: flex; align-items: center; gap: var(--sp-2); height: 46px; padding: 0 var(--sp-4); border-radius: 12px; border: 2px solid var(--line-strong); background: var(--bg-page); color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease); } .amg__busca:focus-within { border-color: var(--accent); } .amg__busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--fs-md); outline: none; } .amg__busca input::placeholder { color: var(--text-muted); } .amg__resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); max-height: 18rem; overflow: auto; } .amg__res { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'av txt btn' 'av den den'; align-items: center; gap: 2px var(--sp-3); padding: var(--sp-3); border-radius: 12px; background: var(--bg-raised); animation: agv-sube 260ms cubic-bezier(.2,.8,.2,1) both; } .amg__res > .amg__av { grid-area: av; } .amg__res-txt { grid-area: txt; display: grid; min-width: 0; } .amg__res-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .amg__res-txt small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amg__res > .action, .amg__vos { grid-area: btn; } .amg__vos { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); } .amg__denunciar { grid-area: den; justify-self: start; border: 0; padding: 0; background: none; font: inherit; font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: underline; cursor: pointer; } .amg__av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-weight: 900; color: var(--text-on-accent); background: var(--accent); letter-spacing: 0.02em; } .amg__av--chico { width: 34px; height: 34px; font-size: var(--fs-sm); } .amg__pano { border-radius: 2px; object-fit: cover; flex: none; } .amg__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .amg__amigo { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); transition: box-shadow var(--dur-fast) var(--ease); } .amg__amigo--abierto { box-shadow: inset 0 0 0 2px var(--accent); } .amg__amigo-cab { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .amg__amigo-txt { display: grid; gap: 2px; min-width: 0; flex: 1; } .amg__amigo-txt b { font-size: var(--fs-lg); color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.15; } .amg__amigo-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); } .amg__quitar { display: grid; place-items: center; flex: none; align-self: flex-start; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } @media (hover: hover) { .amg__quitar:hover { background: var(--bg-page); color: var(--text-primary); } } .amg__estado { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } .amg__estado--mia b { font-size: var(--fs-lg); color: var(--accent-texto); font-variant-numeric: tabular-nums; } .amg__acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .amg__amigo .amg__comp { margin-top: var(--sp-1); padding: var(--sp-4) 0 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--line-hairline); } .amg__pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: var(--sp-4); } .amg__pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: var(--sp-3); } .amg__pasos li::before { content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 900; color: var(--accent-texto); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } .amg__pasos b { color: var(--text-primary); font-size: var(--fs-md); } .amg__pasos span { color: var(--text-secondary); font-size: var(--fs-sm); max-width: 60ch; } .amg__pie { margin: 0; } .amg__dejar { border: 0; padding: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline; cursor: pointer; } .amg__vacio, .amg__nada { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .amg__pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised)); box-shadow: inset 0 0 0 1px var(--accent); animation: agv-sube 400ms cubic-bezier(.2,.8,.2,1) both; } .amg__pendiente p { margin: 0; flex: 1; min-width: 12rem; } .amg__pendiente p .amg__pano { vertical-align: -2px; margin: 0 2px; } /* La solapa ocupa su fila entera, debajo de las otras cuatro, y en Amigos no hay buscador ni filtros de candidatos. */ .en-modo-seleccion .cvsel__vista[data-convoc-vista="amigos"] { grid-column: 1 / -1; } .cvsel__filtros--solo-vistas > :not(.cvsel__vistas) { display: none !important; } @media (max-width: 480px) { .amg__mi-codigo, .amg__amigo { padding: var(--sp-4); } .amg__mandar { width: 100%; } .amg__mandar .action { flex: 1 1 0; justify-content: center; } } .amg__comp { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); animation: agv-sube 320ms cubic-bezier(.2,.8,.2,1) both; } .amg__comp-tit { margin: 0; font-weight: 800; color: var(--text-primary); } .amg__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .amg__col { display: grid; align-content: start; gap: var(--sp-2); } .amg__col-tit { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .amg__col-tit b { font-size: var(--fs-lg); color: var(--text-primary); } .amg__col--ambos .amg__chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-300) 60%, transparent); } .amg__col--yo .amg__chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); } .amg__col--el .amg__chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay-300) 60%, transparent); } .amg__chips { display: flex; flex-wrap: wrap; gap: 6px; } .amg__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg-page); font-size: var(--fs-sm); color: var(--text-primary); } .amg__chip i { font-style: normal; font-weight: 800; font-size: var(--fs-xs); color: var(--text-muted); } @media (max-width: 760px) { .amg__cols { grid-template-columns: minmax(0, 1fr); } } /* La Sala no se ensancha por la tabla (2/10/2026): la tabla pedía 801 px en una columna de 764 y arrastraba las tarjetas, que quedaban cortadas. */ .sala { grid-template-columns: minmax(0, 1fr); } .sala__tabla { width: 100%; } .sala__tabla .sala__nom { min-width: 0; } .sala__tabla .sala__nom b, .sala__tabla .sala__nom small { overflow-wrap: anywhere; } .sala__tabla th[scope='row'], .sala__tabla th[scope='row'] * { white-space: normal; } .sala__tabla thead th { white-space: normal; } .sala__voto { min-width: 0; } .sala__voto .action { max-width: 100%; white-space: normal; } /* LA LISTA DE LA PREVIA (2/10/2026, «la columna izquierda aprovecharla mejor; el listado con mejor estilo, esa línea amarilla al costado no me gusta»). Los renglones llenan la columna —cada línea crece según cuántos tiene—, el dorsal en un disco que se enciende si está en cancha, y el puesto en una pastilla del color de su línea. Se arrastran a la cancha. */ .dsel--mesa .dsel__lista .dsel__grupos { display: flex; flex-direction: column; gap: var(--sp-2); } .dsel--mesa .dsel__lista .dia__grupo { display: flex; flex-direction: column; flex-basis: 0; margin: 0; min-height: 0; } .dsel--mesa .dsel__lista .dia__grupo-cab { margin: 0 0 2px; } .dsel--mesa .dsel__lista .dia__banco-lista { flex: 1; display: flex; flex-direction: column; gap: 2px; } .dsel--mesa .dsel__lista .dia__banco-lista li { flex: 1 1 0; min-height: 26px; max-height: 42px; } .dsel--mesa .dsel__lista .dia__quien-btn { height: 100%; min-height: 0; padding: 0 var(--sp-2) 0 4px; border-radius: var(--r-boton); gap: var(--sp-2); grid-template-columns: 24px 2.7rem minmax(0, 1fr) auto; background: transparent; box-shadow: none; cursor: grab; transition: background-color 140ms ease, transform 140ms ease; } .dsel--mesa .dsel__lista .dia__quien-btn--dentro { background: color-mix(in srgb, var(--text-primary) 7%, transparent); box-shadow: none; } @media (hover: hover) { .dsel--mesa .dsel__lista .dia__quien-btn:hover { background: color-mix(in srgb, var(--text-primary) 10%, transparent); } } .dsel--mesa .dsel__lista .dia__quien-btn--senalado { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; } .dia__dor { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color 160ms ease, color 160ms ease; } .dia__quien-btn--dentro .dia__dor { background: var(--accent); color: var(--text-on-accent); box-shadow: none; } .dsel--mesa .dsel__lista .dia__pos { justify-self: start; padding: 2px 5px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: var(--fam, var(--text-muted)); background: color-mix(in srgb, var(--fam, var(--text-muted)) 16%, transparent); } .dsel__lista [data-fam='POR'] { --fam: #f5b942; } .dsel__lista [data-fam='DEF'] { --fam: #5ab0ff; } .dsel__lista [data-fam='MED'] { --fam: #3eda7f; } .dsel__lista [data-fam='DEL'] { --fam: #ff8a65; } .dsel--mesa .dsel__lista .dia__quien { color: var(--text-secondary); } .dsel--mesa .dsel__lista .dia__quien-btn--dentro .dia__quien { color: var(--text-primary); font-weight: 700; } .dsel--mesa .dsel__lista .dia__orden { grid-template-columns: 2.7rem minmax(0, 1fr) auto; padding-left: calc(4px + 24px + var(--sp-2)); } .dsel--mesa .dsel__lista .dia__quien-btn--alza { opacity: 0.35; } /* El que viaja de la lista a la cancha. */ .dia__fantasma { position: fixed; z-index: 300; pointer-events: none; display: flex; align-items: center; gap: var(--sp-2); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg-raised); color: var(--text-primary); font-weight: 700; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45), inset 0 0 0 2px var(--accent); transform: translate(-50%, -50%) scale(1.04); } .dia__fantasma .dia__dor { background: var(--accent); color: var(--text-on-accent); box-shadow: none; } /* Mientras arrastrás: los once puestos se marcan, el que va a recibir se enciende, y el que cae da un golpe de luz. */ .dia--arrastrando, .dia--arrastrando * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; } .dia--arrastrando .dia__ficha[data-puesto] .dia__ficha-n { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35); border-radius: 50%; } .dia__ficha--recibe .dia__ficha-n { box-shadow: 0 0 0 4px var(--accent), 0 0 18px var(--accent) !important; border-radius: 50%; transform: scale(1.15); transition: transform 120ms ease; } .dia__ficha--cae .dia__ficha-n { animation: dia-cae 520ms cubic-bezier(.2, .8, .2, 1); border-radius: 50%; } @keyframes dia-cae { 0% { transform: scale(1.35); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } .dia__ficha--sale { opacity: 0.4; } .dia__fantasma-txt { display: grid; line-height: 1.15; } .dia__fantasma-txt small { font-size: 11px; font-weight: 600; color: var(--text-muted); } .dia__fantasma--sobre .dia__fantasma-txt small { color: var(--accent-texto); } @media (prefers-reduced-motion: reduce) { .dia__ficha--cae .dia__ficha-n { animation: none; } } /* LAS FORMACIONES, EN DOS COLUMNAS Y SIN HUECOS (2/10/2026): catorce en cuatro columnas dejaban dos agujeros al final; en dos son siete filas justas, con el dibujo al lado del nombre. */ .dsel--mesa .dia__opciones:has(> .dia__opcion--forma) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; } .dsel--mesa .dia__opcion--forma { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; justify-items: start; gap: var(--sp-3); padding: 5px 10px 5px 5px; min-height: 0; text-align: left !important; } .dsel--mesa .dia__opcion--forma .dia__forma-mini { width: 58px; height: 38px; margin: 0; } .dsel--mesa .dia__opcion--forma > span { font-size: var(--fs-md); text-align: left; } /* El botón de adelantar y su pie, en el mismo renglón y centrados. */ .dsel--mesa .dsel__cta .dsel__cta-pie { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 500; line-height: 1; margin: 0; padding: 0; color: var(--text-secondary); } /* La izquierda crece con la pantalla: a 2000 px los nombres se cortaban con la cancha sobrada de ancho. */ .dsel--mesa:has(> .dsel__grilla:not([hidden])) { grid-template-columns: clamp(19.5rem, 19vw, 25rem) minmax(0, 1fr) 23rem; } .dsel--mesa .dia__opcion--forma { padding: 3px 8px 3px 3px; } .dsel--mesa .dia__opcion--forma .dia__forma-mini { width: 46px; height: 30px; } /* En dos columnas el dibujo entra a cualquier alto (antes se apagaba por debajo de cierta altura, cuando ocupaba media tarjeta). */ .dsel--mesa .dia__opcion--forma .dia__forma-mini { display: block; } /* Si los veintitrés no entran, la lista se desplaza: las líneas no se achican por debajo de lo que tienen adentro (a 900 px se pisaban). */ .dsel--mesa .dsel__lista .dia__grupo { min-height: auto; } @media (max-height: 960px) { .dsel--mesa .dsel__lista .dia__banco-lista li { min-height: 23px; } .dsel--mesa .dsel__lista .dia__banco-lista { gap: 1px; } .dia__dor { width: 21px; height: 21px; font-size: 10px; } } /* LA DERECHA SIN BARRA (2/10/2026, «tenía un scroll, la barra, al pedo»): las formaciones un poco más bajas para que entre, y si en una pantalla chica igual sobra, se desplaza con la rueda sin dibujar la barra. */ .dsel--mesa .dia__opcion--forma { padding-block: 2px; } .dsel--mesa .dia__opcion--forma .dia__forma-mini { width: 42px; height: 27px; } .dsel--mesa .dsel__lado > .tarjeta { scrollbar-width: none; } .dsel--mesa .dsel__lado > .tarjeta::-webkit-scrollbar { display: none; } /* EL LESIONADO, A LA VISTA (2/10/2026): una cruz roja y cuándo vuelve, en Convocatoria, Plantilla y la lista de la Previa. */ .lesion-sel { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 700; color: #ff6b6b; white-space: nowrap; } .lesion-sel svg { width: 13px; height: 13px; flex: none; fill: #ff6b6b; } .dia__quien .lesion-sel { margin-left: 6px; vertical-align: -1px; } .convoc__lesion { display: block; font-size: var(--fs-xs); } .convoc__fila--lesion > th b, .convoc__fila--lesion > th a { color: var(--text-secondary); } .convoc__fila--lesion .convoc__accion .action[disabled] { color: #ff8f8f; border-color: color-mix(in srgb, #ff6b6b 45%, transparent); opacity: 1; } /* LA CIFRA ADENTRO DE UN BOTÓN AMARILLO (2/10/2026, «contraste a los botones»): blanco sobre amarillo no se leía; va oscura con la cifra en el color del botón. */ .action:not(.action--callada) .segmented__count, .segmented__btn[aria-pressed='true'] .segmented__count, .segmented__btn[aria-selected='true'] .segmented__count { background: rgb(10 10 10 / 0.85); color: var(--accent); font-weight: 800; } /* ESCUDOS Y CLUBES MÁS GRANDES en la Convocatoria (2/10/2026). */ .cvsel .convoc__escudo { width: 30px; height: 30px; vertical-align: -9px; margin-right: 10px; } .cvsel .convoc__tabla td.convoc__club { font-size: var(--fs-md); color: var(--text-primary); max-width: 15rem; } .cvl__escudo { width: 26px; height: 26px; } .cvl__club { font-size: var(--fs-md); color: var(--text-primary); gap: 8px; } .en-modo-seleccion img[data-club] { cursor: default; } .amg__tabla-y-ultimos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; } .amg__tabla th[scope='row'] { font-weight: 600; } .amg__tabla th[scope='row'] i { display: inline-block; width: 1.4rem; font-style: normal; color: var(--text-muted); } .amg__yo { background: color-mix(in srgb, var(--accent) 8%, transparent); } .amg__ultimos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); } .amg__ultimos li { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--bg-raised); } .amg__ultimos b { font-variant-numeric: tabular-nums; color: var(--text-primary); } .amg__ultimos small { margin-left: auto; color: var(--text-muted); } @media (max-width: 760px) { .amg__tabla-y-ultimos { grid-template-columns: minmax(0, 1fr); } } /* ENTRENAMIENTO COMO LA PREVIA (2/10/2026, «entrenamiento y previa deberían tener la misma cancha, distribución de columnas, estilos»). Las mismas tres columnas —la izquierda que crece con la pantalla, la cancha al medio, 23rem a la derecha—, la tira de los días arriba de la cancha (donde la Previa tiene el cruce) y el parte de la concentración arriba de la izquierda. */ @media (min-width: 1101px) { .ent.entsel { display: grid; height: var(--alto-pantalla-sel); max-height: none; grid-template-columns: clamp(19.5rem, 19vw, 25rem) minmax(0, 1fr) 23rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'hero semana der' 'izq centro der'; gap: var(--sp-3); } .ent.entsel > .entsel__grilla { display: contents; } .entsel__hero { grid-area: hero; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 6px); align-content: start; } .entsel__hero .entsel__titulo { font-size: clamp(1.4rem, 1.6vw, 1.9rem); } .entsel__hero .entsel__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin: 0; } .entsel__hero .entsel__numeros > li { min-width: 0; padding: 0; border: 0; } .entsel__semana { grid-area: semana; min-width: 0; } .ent.entsel .ent__izq { grid-area: izq; } .ent.entsel .ent__centro { grid-area: centro; } .ent.entsel .ent__der { grid-area: der; } } /* Las fichas de la cancha, del mismo tamaño que en la Previa. */ .ent__jug-disco { width: 32px; height: 32px; } .ent__jug-nom { font-size: 10.5px; } @media (min-width: 1101px) { .entsel__hero .entsel__quien { gap: var(--sp-3); } .entsel__hero .entsel__bandera-img { width: 48px; height: auto; } .entsel__hero .entsel__ante { white-space: normal; line-height: 1.3; } .entsel__hero .entsel__numeros li, .entsel__hero .entsel__numeros li:nth-child(4) { padding: 0; border-left: 0; } .entsel__hero .entsel__numeros b { font-size: var(--fs-lg); } .entsel__hero .entsel__numeros .label { font-size: 10px; } /* Los días llenan el alto de su fila. */ .entsel__semana { display: flex; flex-direction: column; } .entsel__semana .ent__dias--tira { flex: 1; align-items: stretch; } } /* Arriba a la izquierda, sólo el parte: la Previa tampoco lleva título grande. El título queda para los lectores de pantalla. */ @media (min-width: 1101px) { .entsel__hero .entsel__quien { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .entsel__hero { align-content: center; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 6px); } .entsel__hero .entsel__numeros { row-gap: var(--sp-3); } .entsel__hero .entsel__numeros b { font-size: var(--fs-xl); } .entsel__hero .entsel__numeros .label { font-size: var(--fs-2xs); } } @media (min-width: 1101px) { .entsel__hero .entsel__numeros { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; column-gap: var(--sp-4); row-gap: var(--sp-2); } .entsel__hero .entsel__numeros b { font-size: var(--fs-lg); } } /* DÍA DE PARTIDO COMO LA PREVIA Y ENTRENAMIENTO (2/10/2026): las mismas columnas, y la alineación con el dorsal en disco y el puesto en la pastilla del color de su línea. */ @media (min-width: 1101px) { .dp.dp--mesa { grid-template-columns: clamp(19.5rem, 19vw, 25rem) minmax(0, 1fr) 23rem; } } .dp--mesa .dp__al { grid-template-columns: 2.7rem 24px minmax(0, 1fr) auto; gap: var(--sp-2); min-height: 30px; border-bottom: 0; border-radius: 8px; padding: 2px var(--sp-2) 2px 4px; } .dp--mesa .dp__als { gap: 2px; } .dp--mesa .dp__al:nth-child(odd) { background: color-mix(in srgb, var(--text-primary) 4%, transparent); } .dp--mesa .dp__al-pos { justify-self: start; padding: 2px 5px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: var(--fam, var(--text-muted)); background: color-mix(in srgb, var(--fam, var(--text-muted)) 16%, transparent); } .dp--mesa .dp__al-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--accent); color: var(--text-on-accent); } .dp--mesa .dp__al-nom { font-weight: 600; color: var(--text-primary); } .dp__al[data-fam='POR'] { --fam: #f5b942; } .dp__al[data-fam='DEF'] { --fam: #5ab0ff; } .dp__al[data-fam='MED'] { --fam: #3eda7f; } .dp__al[data-fam='DEL'] { --fam: #ff8a65; } /* Los suplentes, con el disco sin llenar: como en la Previa, el amarillo es el que está en cancha. */ .dp--mesa .dp__als ~ .dp__als .dp__al-n { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .dp--mesa .dp__als ~ .dp__als .dp__al-nom { font-weight: 500; color: var(--text-secondary); } .dp--mesa .dp__als ~ .dp__als .dp__al:nth-child(odd) { background: transparent; } .parsel__via .via { overflow-x: clip; } .tudt__check[hidden] { display: none; } /* ========================================================================== TU DESPACHO (2/10/2026): la llegada. Tu tarjeta y la carta a la izquierda, los primeros pasos al medio, la prensa y el debut a la derecha. En una pantalla, como el resto del modo. ========================================================================== */ .despa { display: block; } .despa__grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-3); height: var(--alto-pantalla-sel); min-height: 0; } .despa__col { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; } .despa__col > .tarjeta { animation: agv-sube 420ms cubic-bezier(.2,.8,.2,1) both; } .despa__col:nth-child(2) > .tarjeta { animation-delay: 80ms; } .despa__col:nth-child(3) > .tarjeta { animation-delay: 160ms; } .despa__yo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-5); background: linear-gradient(120deg, color-mix(in srgb, var(--nac-a, var(--accent)) 22%, transparent), transparent 70%), var(--bg-panel); } .despa__av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text-on-accent); font-size: 1.5rem; font-weight: 900; } .despa__quien { display: grid; gap: 4px; min-width: 0; } .despa__quien b { font-size: var(--fs-xl); font-weight: 900; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .despa__quien small { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); } .despa__quien img { border-radius: 2px; } .despa__cargo { grid-column: 1 / -1; margin: 0; padding-top: var(--sp-2); border-top: 1px solid var(--line-hairline); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .despa__conf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-2); } .despa__conf b { font-size: var(--fs-xl); color: var(--text-primary); font-variant-numeric: tabular-nums; } .despa__conf small { color: var(--text-secondary); } .despa__carta { flex: 1; min-height: 0; display: flex; flex-direction: column; } .despa__papel { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: 12px; background: linear-gradient(180deg, #f4efe4, #e9e1cf); color: #2a2620; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.55; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.35); } .despa__papel p { margin: 0 0 var(--sp-3); } .despa__papel--v { margin: 0; max-width: 34rem; text-align: left; max-height: 46vh; } .despa__sello { float: right; width: 52px; height: auto; margin: 0 0 var(--sp-2) var(--sp-3); border-radius: 4px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); } .despa__firma { margin-top: var(--sp-4) !important; font-style: italic; text-align: right; color: #514a3e; } .despa__pasos { flex: 1; min-height: 0; display: flex; flex-direction: column; } .despa__pasos .panel__head { align-items: center; } .despa__anillo { position: relative; width: 52px; height: 52px; display: grid; place-items: center; } .despa__anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); } .despa__anillo circle { fill: none; stroke: var(--line-strong); stroke-width: 6; } .despa__anillo .despa__anillo-v { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1); } .despa__anillo b { position: relative; font-size: var(--fs-md); font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; } .despa__anillo b small { font-size: var(--fs-2xs); color: var(--text-muted); } .despa__lista { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-height: 0; } .despa__paso { flex: 1 1 0; max-height: 6rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); animation: agv-sube 360ms calc(var(--i) * 50ms) cubic-bezier(.2,.8,.2,1) both; } .despa__tilde { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--text-muted); box-shadow: inset 0 0 0 2px var(--line-strong); } .despa__paso-txt { display: grid; gap: 3px; min-width: 0; } .despa__paso-txt b { font-size: var(--fs-md); color: var(--text-primary); } .despa__paso-txt small { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.35; } .despa__paso--ok { background: color-mix(in srgb, var(--accent) 7%, var(--bg-raised)); } .despa__paso--ok .despa__tilde { background: var(--accent); color: var(--text-on-accent); box-shadow: none; } .despa__paso--ok .despa__paso-txt b { color: var(--text-secondary); } .despa__listo { font-style: normal; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .despa__todo { margin: 0 var(--sp-4) var(--sp-4); font-weight: 800; color: var(--accent-texto); text-align: center; } .despa__prensa { display: flex; flex-direction: column; flex: 1; min-height: 0; } .despa__intro { margin: 0 var(--sp-4) var(--sp-3); color: var(--text-secondary); font-size: var(--fs-sm); } .despa__tonos { display: grid; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); } .despa__tono { all: unset; cursor: pointer; display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); transition: box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease; } .despa__tono b { font-size: var(--fs-md); color: var(--text-primary); } .despa__tono span { font-family: Georgia, serif; font-style: italic; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.4; } .despa__tono small { font-size: var(--fs-xs); color: var(--text-muted); } @media (hover: hover) { .despa__tono:hover { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised)); transform: translateY(-1px); } } .despa__tono:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .despa__cita { margin: 0 var(--sp-4) var(--sp-2); padding: var(--sp-4); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--bg-raised); font-family: Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--text-primary); } .despa__efecto { margin: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); } .despa__cruces { list-style: none; margin: 0; padding: 0 var(--sp-4); display: grid; gap: var(--sp-2); } .despa__cruces li { display: grid; grid-template-columns: 4.2rem auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--bg-raised); } .despa__cruces li b:nth-of-type(2) { text-align: right; } .despa__cruces em { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); } .despa__cruces img { border-radius: 2px; } .despa__ir { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); } .despa-v .agv__escena { justify-content: flex-end; padding-bottom: var(--sp-7); } @media (max-width: 1100px) { .despa__grilla { height: auto; grid-template-columns: minmax(0, 1fr); } .despa__papel { max-height: none; overflow: visible; } } .despa-v .despa__papel--v { flex: none; height: auto; } .despa__prensa--dada { flex: none; } .despa__prensa--dada + .despa__debut { flex: 1; } .despa__ir-paso { min-height: 34px; padding-inline: var(--sp-4); font-weight: 800; white-space: nowrap; } /* ========================================================================== EL CENTRO DE MANDO (2/10/2026, «como si fuese una especie de iPad»): la tableta ocupa la pantalla; adentro, la barra de estado, el fondo del predio, los widgets de vidrio y el dock con las secciones del modo. ========================================================================== */ .ipad { height: var(--alto-pantalla-sel); padding: 12px; border-radius: 38px; background: linear-gradient(145deg, #2b2f36, #0c0e12 55%, #1b1e24); box-shadow: 0 30px 60px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 0 0 5px #08090b; } .ipad__pantalla { position: relative; height: 100%; border-radius: 28px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: linear-gradient(180deg, rgb(6 8 12 / 0.55), rgb(6 8 12 / 0.82)), linear-gradient(120deg, color-mix(in srgb, var(--nac-a, var(--accent)) 30%, transparent), transparent 60%), var(--fondo) center / cover; } .ipad__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 22px 4px; font-size: 12.5px; font-weight: 700; color: rgb(255 255 255 / 0.92); } .ipad__barra > b { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .ipad__iconos { justify-self: end; display: inline-flex; gap: 8px; align-items: center; } .ipad__iconos svg:first-child { width: 18px; } .ipad__iconos svg:last-child { width: 26px; } .ipad__escritorio { min-height: 0; padding: 10px 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'perfil correo prensa' 'pasos correo prensa' 'pasos correo partido'; } .wid { min-height: 0; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: rgb(22 25 31 / 0.62); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 30px rgb(0 0 0 / 0.3); animation: agv-sube 420ms calc(var(--i, 0) * 60ms) cubic-bezier(.2,.8,.2,1) both; } .wid--perfil { grid-area: perfil; } .wid--correo { grid-area: correo; } .wid--pasos { grid-area: pasos; } .wid--prensa { grid-area: prensa; } .wid--partido { grid-area: partido; } .wid__cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; } .wid__cab b { font-size: var(--fs-md); color: #fff; } .wid__app { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; } .wid__app .i { width: 16px; height: 16px; } .wid__app--mail { background: linear-gradient(180deg, #4aa3ff, #1b6fe0); } .wid__app--pasos { background: linear-gradient(180deg, #48d77e, #1f9e4f); } .wid__app--prensa { background: linear-gradient(180deg, #ff9a62, #e0582b); } .wid__app--partido { background: linear-gradient(180deg, #f2f2f2, #b9b9b9); color: #111; } .wid__badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 800; } .wid__cuenta { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .wid__barra { height: 4px; margin: 0 16px 8px; border-radius: 2px; background: rgb(255 255 255 / 0.12); overflow: hidden; } .wid__barra span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 600ms cubic-bezier(.2,.8,.2,1); } .wid__perfil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; } .wid__perfil .despa__quien em { font-style: normal; font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .wid__conf { position: relative; width: 62px; height: 62px; display: grid; place-items: center; align-content: center; } .wid__conf svg { position: absolute; inset: 0; transform: rotate(-90deg); } .wid__conf circle { fill: none; stroke: rgb(255 255 255 / 0.14); stroke-width: 5; } .wid__conf .wid__conf-v { stroke: var(--accent); stroke-linecap: round; } .wid__conf b { position: relative; font-size: var(--fs-lg); line-height: 1; color: #fff; } .wid__conf small { position: relative; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); } .wid--pasos .despa__lista { padding: 0 12px 12px; gap: 6px; overflow: auto; scrollbar-width: none; } .wid--pasos .despa__paso { max-height: none; flex: 0 0 auto; padding: 9px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: none; } .wid--pasos .despa__paso--ok { background: color-mix(in srgb, var(--accent) 12%, transparent); } .wid--pasos .despa__tilde { width: 28px; height: 28px; font-size: 13px; } .wid--pasos .despa__ir-paso { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.1); color: #fff; font-size: 1.2rem; text-decoration: none; } .wid--pasos .despa__ir-paso:hover { background: var(--accent); color: var(--text-on-accent); } .wid--prensa .despa__tonos { padding: 0 12px 12px; overflow: auto; scrollbar-width: none; } .wid--prensa .despa__tono { background: rgb(255 255 255 / 0.06); box-shadow: none; border-radius: 14px; padding: 10px 14px; } .wid--prensa .despa__intro { margin: 0 16px 10px; } .wid--hecho .despa__cita { margin: 4px 16px 8px; background: rgb(255 255 255 / 0.06); } .wid--hecho .despa__efecto { margin: 0 16px 14px; } .wid--partido .despa__cruces { padding: 0 12px; } .wid--partido .despa__cruces li { background: rgb(255 255 255 / 0.06); } .wid--partido .despa__ir { padding: 10px 12px 14px; } /* El correo: la bandeja a la izquierda, la lectura a la derecha. */ .mail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr); border-top: 1px solid rgb(255 255 255 / 0.08); } .mail__lista { list-style: none; margin: 0; padding: 6px; display: grid; align-content: start; gap: 2px; border-right: 1px solid rgb(255 255 255 / 0.08); overflow: auto; scrollbar-width: none; } .mail__item { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; gap: 2px; padding: 9px 10px 9px 18px; border-radius: 12px; position: relative; } .mail__item b { font-size: var(--fs-sm); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail__item span { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail__item small { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail__item--nuevo::before { content: ''; position: absolute; left: 6px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #4aa3ff; } .mail__item--abierto { background: #1b6fe0; } .mail__item--abierto small, .mail__item--abierto span { color: rgb(255 255 255 / 0.9); } @media (hover: hover) { .mail__item:not(.mail__item--abierto):hover { background: rgb(255 255 255 / 0.07); } } .mail__leer { min-height: 0; display: flex; flex-direction: column; } .mail__meta { padding: 10px 18px; border-bottom: 1px solid rgb(255 255 255 / 0.08); display: grid; gap: 3px; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.85); } .mail__meta p { margin: 0; } .mail__meta span { display: inline-block; min-width: 4.5rem; color: rgb(255 255 255 / 0.5); } .mail__cuerpo { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; padding: 16px 18px; } .mail__texto { color: rgb(255 255 255 / 0.9); font-size: var(--fs-md); line-height: 1.55; } .mail__texto p { margin: 0 0 12px; } /* LA CARTA: papel, membrete, tipografía de imprenta y firma manuscrita. */ .cfed { max-width: 40rem; margin: 0 auto; padding: 26px 30px 22px; border-radius: 6px; background: #fbf8f1; color: #24211c; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.6; box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 12px 30px rgb(0 0 0 / 0.35); text-align: left; } .cfed p { margin: 0 0 11px; } .cfed__membrete { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid #24211c; } .cfed__escudo { width: 46px; height: 46px; object-fit: contain; } .cfed__membrete div { display: grid; } .cfed__membrete b { font-family: var(--font-display, Georgia); font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: #14120f; } .cfed__membrete small { font-family: var(--font-ui, sans-serif); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6355; } .cfed__lugar { text-align: right; font-style: italic; color: #4a443a; } .cfed__a { line-height: 1.45; } .cfed__firma { display: grid; justify-items: end; margin-top: 14px; text-align: right; } .cfed__rubrica { font-family: 'Brush Script MT', 'Snell Roundhand', 'Segoe Script', cursive; font-size: 28px; line-height: 1; color: #1d3f8f; transform: rotate(-4deg); margin-bottom: 6px; } .cfed__firma b { font-size: 14px; } .cfed__firma small { font-size: 12px; color: #6b6355; } .despa-v__carta { width: 100%; max-height: 58vh; overflow: auto; scrollbar-width: thin; padding: 4px; } .despa-v__carta .cfed { font-size: 14px; padding: 22px 26px 18px; } /* El dock. */ .ipad__dock { justify-self: center; display: flex; gap: 10px; margin: 4px 0 14px; padding: 10px 14px; border-radius: 26px; background: rgb(255 255 255 / 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); } .ipad__app { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: #fff; width: 62px; } .ipad__icono { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #111; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 85%, #fff), var(--app)); box-shadow: 0 4px 10px rgb(0 0 0 / 0.35); transition: transform 160ms cubic-bezier(.2,.8,.2,1); } .ipad__icono .i { width: 24px; height: 24px; } .ipad__app small { font-size: 10.5px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); } @media (hover: hover) { .ipad__app:hover .ipad__icono { transform: translateY(-4px) scale(1.08); } } @media (max-height: 860px) { .ipad__icono { width: 40px; height: 40px; border-radius: 11px; } .ipad__app { width: 54px; } .ipad__dock { margin-bottom: 8px; padding: 6px 10px; } } @media (max-width: 1100px) { .ipad { height: auto; padding: 6px; border-radius: 24px; } .ipad__escritorio { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'perfil' 'correo' 'pasos' 'prensa' 'partido'; } .mail { grid-template-columns: minmax(0, 1fr); } .mail__lista { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); } .ipad__dock { flex-wrap: wrap; justify-content: center; } } .wid__conf small { font-size: 7.5px; letter-spacing: 0.02em; } /* LA CARTA, LEGIBLE (2/10/2026): más grande, más contraste, renglón aireado, y en la bienvenida con todo el ancho de la columna. */ .cfed { font-size: 16.5px; line-height: 1.7; color: #15130f; background: #fffdf8; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .cfed p { margin-bottom: 14px; } .cfed__lugar, .cfed__firma small, .cfed__membrete small { color: #4a4336; } .despa-v__carta { max-height: 62vh; } .despa-v__carta .cfed { max-width: none; font-size: 16px; padding: 26px 32px 22px; } .despa-v .agv__relato { gap: var(--sp-3); } .mail__cuerpo .cfed { font-size: 16px; } .despa-v .agenda-v__caja.agv { min-height: min(54rem, calc(100vh - 2rem)); max-height: calc(100vh - 2rem); } .despa-v__carta { max-height: calc(100vh - 15rem); } .despa-v__carta .cfed p { margin-bottom: 11px; } .despa-v .agenda__tit { margin-bottom: 0; } /* El fondo del predio se ve: menos velo, y el vidrio de los widgets hace el contraste. */ .ipad__pantalla { background: linear-gradient(180deg, rgb(6 8 12 / 0.15), rgb(6 8 12 / 0.45) 70%, rgb(6 8 12 / 0.6)), var(--fondo) center 30% / cover; } .wid { background: rgb(18 21 27 / 0.72); } .ipad__barra { background: linear-gradient(180deg, rgb(0 0 0 / 0.45), transparent); text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); } /* ========================================================================== UNA FOTO POR SECCIÓN (2/10/2026, «añadir imágenes de fondo acorde a la sección, de buena calidad»): Unsplash, licencia libre, elegidas en lámina. Va detrás de todo y oscurecida; las tarjetas quedan casi opacas, así que la foto se ve en los bordes y entre paneles y nunca detrás de un texto chico. La marca `data-fondo` la pone `puerta.js` en la primera línea. ========================================================================== */ html[data-fondo] body { background: linear-gradient(180deg, rgb(10 12 16 / 0.72) 0%, rgb(10 12 16 / 0.86) 45%, rgb(10 12 16 / 0.94) 100%), var(--foto-de-seccion) center 30% / cover fixed, var(--bg-page, #0e1014); } html[data-fondo='predio'] { --foto-de-seccion: url('/assets/fotos/predio-tarde.jpg'); } html[data-fondo='fixture'] { --foto-de-seccion: url('/assets/fotos/fondo-fixture.jpg'); } html[data-fondo='eliminatorias'] { --foto-de-seccion: url('/assets/fotos/fondo-eliminatorias.jpg'); } html[data-fondo='torneo'] { --foto-de-seccion: url('/assets/fotos/fondo-torneo.jpg'); } html[data-fondo='scouting'] { --foto-de-seccion: url('/assets/fotos/fondo-scouting.jpg'); } /* Genérica (3/10/2026, «que las imágenes sean de la selección o más genéricas; fondo de Colombia, yo dirijo Argentina»). */ html[data-fondo='convocatoria'] { --foto-de-seccion: url('/assets/fotos/predio-arco.jpg'); } html[data-fondo='plantilla'] { --foto-de-seccion: url('/assets/fotos/fondo-plantilla.jpg'); } html[data-fondo='entrenamiento'] { --foto-de-seccion: url('/assets/fotos/fondo-entrenamiento.jpg'); } html[data-fondo='previa'] { --foto-de-seccion: url('/assets/fotos/fondo-previa.jpg'); } html[data-fondo='dia-de-partido'] { --foto-de-seccion: url('/assets/fotos/fondo-dia-de-partido.jpg'); } html[data-fondo='oficina'], html[data-fondo='informe'] { --foto-de-seccion: url('/assets/fotos/fondo-oficina.jpg'); } /* Las tarjetas, apenas translúcidas: la foto se intuye detrás sin ensuciar. */ html[data-fondo] main .tarjeta, html[data-fondo] main .panel { background-color: rgb(24 27 33 / 0.9); } @supports (backdrop-filter: blur(4px)) { @media (min-width: 761px) { html[data-fondo] main .tarjeta, html[data-fondo] main .panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } } } @media (max-width: 760px) { html[data-fondo] body { background-attachment: scroll, scroll, scroll; } } /* Más presencia (2/10/2026): velo más liviano y los paneles del modo translúcidos con desenfoque. Sólo el color: los degradés de las franjas quedan. */ html[data-fondo] body { background: linear-gradient(180deg, rgb(10 12 16 / 0.5) 0%, rgb(10 12 16 / 0.72) 50%, rgb(10 12 16 / 0.85) 100%), var(--foto-de-seccion) center 30% / cover fixed, var(--bg-page, #0e1014); } @media (min-width: 761px) { html[data-fondo] main :is(.tarjeta, .panel, .col) { background-color: rgb(22 25 31 / 0.8) !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } } /* LAS PESTAÑAS COMO PASTILLAS (2/10/2026, «en general se pisa, hagamos un poco más grandes los botones del menú y un hover bueno»; «me gustan los botones con ese estilo redondo»): la fila crece lo que crecen ellas —antes la pestaña de 34 px vivía en una fila de 32 y se cortaba—, la elegida va llena del amarillo del modo y el hover se levanta y se enciende. */ html:is(.en-modo-seleccion, .en-chrome-prestado) { --subnav-h: 50px; --alto-pantalla-sel: calc(100vh / var(--escala-sitio, 1) - 9.8rem - 18px); } :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub { gap: 6px; padding-block: 6px; } :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item { height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.04); font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease; } :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item[aria-current="page"] { color: var(--text-on-accent); font-weight: 800; } :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item[aria-current="page"]::after { inset: -1px; height: auto; z-index: -1; border-radius: 999px; background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } @media (hover: hover) { :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item:not([aria-current="page"]):hover { background: rgb(255 255 255 / 0.1); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text-primary); transform: translateY(-1px); box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); } } :is(.en-modo-seleccion, .en-chrome-prestado) .nav-sub__item:active { transform: translateY(0) scale(0.97); } /* SIN SELECCIÓN (2/10/2026, «si me despiden, dejar de ver todo lo que tenga que ver con ellos»): en la Oficina queda sólo la tarjeta de las ofertas, centrada y grande; arriba, tu nombre. */ .sel-sin-cargo .ofi3 { grid-template-columns: minmax(0, 56rem); grid-template-areas: 'contrato'; grid-template-rows: auto; justify-content: center; align-content: start; } .sel-sin-cargo .ofi3__ciclo, .sel-sin-cargo .ofi3__campana, .sel-sin-cargo .ofi3__lado { display: none !important; } .sel-sin-cargo .ofi3__contrato { font-size: 1.05em; } .chrome__sincargo { display: grid; line-height: 1.05; } .chrome__sincargo b { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-primary); } .chrome__sincargo small { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-texto); } .ofisel__sincargo-av { width: 84px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--text-on-accent); font-size: 1.6rem; font-weight: 900; } .sel-sin-cargo [data-f="ofi-fed"] > :not(.ofisel__cese, .mesa) { display: none !important; } .sel-sin-cargo [data-f="ofi-fed-cab"] { display: none; } .sel-sin-cargo .ofi3__contrato { align-self: start; height: auto; min-height: 0; } .despa__paso--urgente .despa__tilde { background: #ff6b6b; color: #fff; box-shadow: none; } .wid--pendientes .despa__paso .action { white-space: nowrap; } .wid__sigue { margin-top: auto; display: grid; gap: 6px; padding: 12px 16px 16px; border-top: 1px solid rgb(255 255 255 / 0.08); } .wid__sigue .action { width: 100%; justify-content: center; } /* LA MESA DE OFERTAS: carpetas de papel sobre el escritorio de la Oficina. */ .sel-sin-cargo .ofi3 { grid-template-columns: minmax(0, 1fr); } .sel-sin-cargo .ofi3__contrato { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sel-sin-cargo .ofi3__contrato > .panel__head { display: none; } .mesa { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-2) var(--sp-5); } .mesa__motivo { margin: 0; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.65); text-align: center; } .mesa__tit { margin: 0 0 var(--sp-5); text-align: center; font-family: var(--font-display, inherit); font-size: clamp(1.8rem, 2.4vw, 2.6rem); font-weight: 900; color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.6); } .mesa__ofertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 21rem)); justify-content: center; gap: 28px 22px; } .ofe { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 18px; border-radius: 4px 14px 14px 14px; background: linear-gradient(165deg, #f4ecd8 0%, #e6dcc2 100%); color: #26221b; box-shadow: 0 18px 40px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.06); transform: rotate(calc((var(--i) - 1) * 0.6deg)); transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease; animation: agv-sube 460ms calc(var(--i) * 90ms) cubic-bezier(.2,.8,.2,1) both; } @media (hover: hover) { .ofe:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 26px 50px rgb(0 0 0 / 0.6); } } .ofe__pestana { position: absolute; top: -18px; left: 0; padding: 3px 14px 4px; border-radius: 8px 8px 0 0; background: #e9e0c7; color: #6a5f48; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .ofe__cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid rgb(38 34 27 / 0.75); } .ofe__bandera { width: 54px; height: 36px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); } .ofe__cab b { display: block; font-family: var(--font-display, inherit); font-size: 1.45rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; } .ofe__cab small { display: block; font-size: 11.5px; color: #5d5444; line-height: 1.3; } .ofe__escudo { width: 40px; height: 40px; object-fit: contain; } .ofe__firma { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 15px; line-height: 1.5; color: #2f2a22; } .ofe__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ofe__datos div { padding: 8px 10px; border-radius: 8px; background: rgb(255 255 255 / 0.5); } .ofe__datos dt { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7a6f59; } .ofe__datos dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; color: #1d1a15; } .ofe__conf { height: 22px; width: auto; filter: brightness(0.2); } .ofe__figuras .label { color: #7a6f59; } .ofe__figuras ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; font-weight: 600; } .ofe__figuras li::before { content: '★ '; color: #b08a2e; } .ofe__aceptar { margin-top: auto; width: 100%; justify-content: center; } .mesa__acc { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); } .ofe__figuras li small { font-weight: 500; color: #7a6f59; margin-left: 4px; } /* Más grandes, y el hover levanta la carpeta que mirás y apaga las otras (2/10/2026, «un poco más grandes las tarjetas y un efecto con el hover»). */ .mesa__ofertas { grid-template-columns: repeat(auto-fit, minmax(20rem, 25rem)); gap: 32px 28px; } .ofe { padding: 26px 24px 22px; gap: 14px; transition: transform 520ms cubic-bezier(.22,1,.36,1), box-shadow 520ms cubic-bezier(.22,1,.36,1), opacity 480ms ease, filter 480ms ease; will-change: transform; } .ofe__pestana, .ofe__aceptar { transition: background-color 420ms ease, color 420ms ease, box-shadow 420ms ease; } .mesa__tit { margin-bottom: calc(var(--sp-5) + 10px); } .ofe__cab b { font-size: 1.7rem; } .ofe__cab small { font-size: 12.5px; } .ofe__bandera { width: 62px; height: 41px; } .ofe__escudo { width: 48px; height: 48px; } .ofe__firma { font-size: 16.5px; } .ofe__datos dd { font-size: 1.2rem; } .ofe__figuras ul { font-size: 15px; } .ofe__aceptar { min-height: 46px; font-size: var(--fs-md); } /* Más suave (2/10/2026, «que el hover no se note tan duro, sea más fluido»): apaga a las otras sólo con una carpeta bajo el dedo —no al pasar por el hueco—, levanta poco y el anillo es fino. */ @media (hover: hover) { .mesa__ofertas:has(.ofe:hover) .ofe:not(:hover) { opacity: 0.86; filter: saturate(0.88); } .ofe:hover { transform: rotate(0) translateY(-6px) scale(1.015); box-shadow: 0 30px 54px rgb(0 0 0 / 0.55), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 18%, transparent); } .ofe:hover .ofe__pestana { background: var(--accent); color: var(--text-on-accent); } .ofe:hover .ofe__aceptar { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } } @media (prefers-reduced-motion: reduce) { .ofe, .ofe:hover { transform: none !important; } } /* EL CORREO DEL DESPACHO (2/10/2026, «recibir correos y tener que leerlos en el despacho; todo tipo de correos; cada tarea en mis pendientes»): la bandeja con quién escribe, cuándo y si trae tarea; filtros; el correo que se contesta ahí mismo. */ @media (min-width: 1101px) { .ipad__escritorio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); } } .wid--correo .wid__cab { gap: 10px; } .mail__filtros { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.07); } .mail__filtro { all: unset; cursor: pointer; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / 0.7); transition: background-color 200ms ease, color 200ms ease; } .mail__filtro i { font-style: normal; opacity: 0.75; } .mail__filtro--on { background: rgb(255 255 255 / 0.16); color: #fff; } .mail__filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (hover: hover) { .mail__filtro:not(.mail__filtro--on):hover { color: #fff; background: rgb(255 255 255 / 0.08); } } @media (min-width: 1101px) { .mail { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1fr); } } .mail__item { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; padding: 9px 10px 9px 16px; } .mail__item .mail__av { grid-row: 1 / span 3; align-self: start; margin-top: 2px; } .mail__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--rol) 22%, transparent); color: var(--rol); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rol) 40%, transparent); } .mail__av .i { width: 15px; height: 15px; } .mail__item--abierto .mail__av { background: rgb(255 255 255 / 0.2); color: #fff; box-shadow: none; } .mail__linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .mail__linea b { flex: 1; min-width: 0; } .mail__linea time { flex: none; font-size: var(--fs-xs); color: rgb(255 255 255 / 0.5); } .mail__item--abierto .mail__linea time { color: rgb(255 255 255 / 0.8); } .mail__item .mail__asunto { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; } .mail__item--nuevo .mail__asunto { color: #fff; } .mail__tarea { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--accent); color: var(--text-on-accent); } .mail__vacio { padding: 24px 12px; text-align: center; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.55); } .mail__leer { overflow: auto; scrollbar-width: thin; } .mail__leer .mail__cuerpo { overflow: visible; flex: none; } .mail__meta { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 18px; } .mail__meta .mail__av { width: 38px; height: 38px; } .mail__meta .mail__av .i { width: 18px; height: 18px; } .mail__de { display: flex; gap: 10px; align-items: baseline; color: rgb(255 255 255 / 0.75); } .mail__de time { margin-left: auto; font-size: var(--fs-xs); color: rgb(255 255 255 / 0.5); } .mail__tit { font-size: var(--fs-md); font-weight: 800; color: #fff; line-height: 1.25; } .mail__aviso { margin: 12px 18px 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .mail__aviso .i { width: 15px; height: 15px; color: var(--accent); flex: none; } .mail__ops { display: grid; gap: 8px; margin-top: 4px; } .mail__op { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .mail__op b { color: #fff; font-size: var(--fs-md); } .mail__op small { color: rgb(255 255 255 / 0.65); font-size: var(--fs-sm); line-height: 1.4; } .mail__op:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) { .mail__op:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); } } .mail__respuesta { margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.06); display: grid; gap: 4px; } .mail__respuesta b { color: #fff; } .mail__respuesta p { margin: 4px 0 0; color: rgb(255 255 255 / 0.8); font-size: var(--fs-sm); line-height: 1.5; } .mail__dato { font-size: var(--fs-sm); } .mail__dato b { font-variant-numeric: tabular-nums; } .mail__dato--sube b { color: #3eda7f; } .mail__dato--baja b { color: #ff6b6b; } .mail__rival { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.06); } .mail__rival p { margin: 0 0 6px; } .mail__rival p:last-child { margin: 0; } .mail__rival-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mail__rival-cab img { border-radius: 3px; } .mail__rival-cab b { color: #fff; font-size: var(--fs-md); } .mail__rival-cab small { font-size: var(--fs-xs); color: rgb(255 255 255 / 0.6); padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / 0.08); } /* Las tareas del correo en los pendientes. */ .wid--pasos .despa__lista:first-of-type { flex: 0 1 auto; min-height: 0; } .despa__sub { margin: 2px 16px 6px; } .despa__paso--correo .despa__tilde .i { width: 13px; height: 13px; } /* El sobre del menú: los sin leer, al lado de «Despacho». */ .nav__sobre { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; font-variant-numeric: tabular-nums; } /* «Dar la conferencia» desde el correo: el widget avisa dónde está. */ .wid--llamado { animation: wid-llamado 1.2s ease 1; } @keyframes wid-llamado { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 40%, transparent); } } @media (prefers-reduced-motion: reduce) { .wid--llamado { animation: none; } } .mail__meta .mail__av { min-width: 0; } .mail__item .mail__asunto > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wid--pasos .wid__cuerpo { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; padding-bottom: 12px; } .wid--pasos .wid__cuerpo .despa__lista { overflow: visible; padding-bottom: 0; } .wid--pasos .wid__cuerpo .despa__lista + .despa__sub { margin-top: 12px; } .mail__texto .action { display: inline-flex; width: auto; } /* En el teléfono, la bandeja arriba con altura propia y el correo abierto abajo: una columna, sin el despacho partido en tres. */ @media (max-width: 1100px) { .mail__lista { max-height: 22rem; } .mail__filtros { margin-left: 0; } .wid--correo .wid__cab { flex-wrap: wrap; } .wid--pasos .wid__cuerpo { overflow: visible; } } /* En inglés los rótulos son más largos: el dock los corta con puntos y el anillo de la confianza achica su palabra. */ .ipad__app small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[lang="en"] .wid__conf small { font-size: 6.5px; letter-spacing: 0; } /* SCOUTING A 375 PX (2/10/2026, barrido del teléfono): la tabla de ojeadores pedía 372 px sobre 343 y la página se iba de costado. En el teléfono el encabezado se parte y el nombre corta donde haga falta. */ @media (max-width: 480px) { .ojeo2__tabla th { white-space: normal; } .ojeo2__tabla td:first-child { overflow-wrap: anywhere; } .ojeo2__tabla td .action { padding-inline: 10px; } .ojeo2__tabla .scsel__ojeador, .ojeo2__tabla .scsel__ojeador * { white-space: normal; min-width: 0; } } /* EL TELÉFONO, LAS CIFRAS DE ARRIBA (2/10/2026, barrido a 375 px): la Oficina ponía cinco cifras en 365 px y la Plantilla cuatro, y los rótulos se pisaban; la línea del año del Predio metía ocho etapas de 73 px. En el teléfono las cifras van de a tres y de a dos, y la línea se desliza. */ @media (max-width: 480px) { .parsel__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .plsel__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .pre__linea { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 118px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 4px; } .pre__linea > * { scroll-snap-align: start; } .plsel__numeros li > *, .parsel__numeros li > * { white-space: normal; overflow-wrap: anywhere; } } /* LO QUE HAY QUE HACER, ILUMINADO AL LLEGAR (3/10/2026): el bloque al que te mandó un pendiente late cuatro veces con un borde de ácido. */ .sel-resaltado { position: relative; z-index: 3; animation: sel-resalta 1.2s ease-in-out 4; border-radius: var(--r-tarjeta, 14px); } @keyframes sel-resalta { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 45% { box-shadow: 0 0 0 3px var(--accent), 0 0 46px color-mix(in srgb, var(--accent) 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .sel-resaltado { animation: none; box-shadow: 0 0 0 3px var(--accent); } } /* LA PALABRA, DEBAJO DEL ANILLO (3/10/2026, «texto pisado»): adentro de 62 px «CONFIANZA» tocaba el trazo. Adentro queda la cifra sola, más grande. */ .wid__conf { height: auto; grid-template-rows: 62px auto; row-gap: 4px; } .wid__conf svg { inset: 0 0 auto 0; width: 62px; height: 62px; } .wid__conf b { grid-row: 1; font-size: 1.35rem; } .wid__conf small, html[lang="en"] .wid__conf small { grid-row: 2; font-size: 10px; letter-spacing: 0.08em; } .mail__av--escudo { background: rgb(255 255 255 / 0.92); box-shadow: none; padding: 4px; } .mail__av--escudo img { width: 100%; height: 100%; object-fit: contain; display: block; } .mail__item--abierto .mail__av--escudo { background: #fff; } /* La fila de un pendiente: «Ir»/«Leer» y «Después». */ .despa__paso-acc { display: inline-flex; align-items: center; gap: 6px; flex: none; } .despa__despues { all: unset; cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / 0.55); padding: 4px 6px; border-radius: 6px; } .despa__despues:focus-visible { outline: 2px solid var(--accent); } @media (hover: hover) { .despa__despues:hover { color: #fff; background: rgb(255 255 255 / 0.08); } } .despa__paso--pospuesto { opacity: 0.55; } /* EL DESPACHO TE LLAMA (3/10/2026): la pestaña tiembla como un teléfono cada pocos segundos mientras haya pendientes, y una vez por semana entra el aviso. */ .nav__despacho--llama { animation: despa-suena 3.2s ease-in-out infinite; } .nav__despacho--llama .nav__sobre { box-shadow: 0 0 0 0 rgb(255 77 94 / 0.6); animation: despa-sobre 1.6s ease-out infinite; } @keyframes despa-suena { 0%, 18%, 100% { transform: none; } 2%, 6%, 10%, 14% { transform: rotate(-3deg) translateX(-1px); } 4%, 8%, 12%, 16% { transform: rotate(3deg) translateX(1px); } } @keyframes despa-sobre { 0% { box-shadow: 0 0 0 0 rgb(255 77 94 / 0.6); } 100% { box-shadow: 0 0 0 10px rgb(255 77 94 / 0); } } .despa-llama { position: fixed; right: 22px; bottom: 22px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 14px 12px 12px; border-radius: var(--r-tarjeta, 14px); background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--sombra-modal), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); animation: despa-entra 420ms cubic-bezier(.22,1,.36,1); transition: opacity 500ms ease, transform 500ms ease; } .despa-llama--fuera { opacity: 0; transform: translateY(12px); } .despa-llama__tel { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--text-on-accent); animation: despa-suena 1.6s ease-in-out infinite; } .despa-llama__tel .i { width: 18px; height: 18px; } .despa-llama__txt { display: grid; gap: 2px; min-width: 0; } .despa-llama__txt small { color: var(--text-secondary); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .despa-llama__x { all: unset; cursor: pointer; padding: 2px 6px; color: var(--text-secondary); font-size: 18px; } @keyframes despa-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav__despacho--llama, .nav__despacho--llama .nav__sobre, .despa-llama__tel, .despa-llama { animation: none; } } /* El informe del viaje: un renglón por jugador visto. */ .mail__viaje { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; } .mail__viaje-j { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / 0.06); } .mail__viaje-escudo { width: 28px; height: 28px; } .mail__viaje-j > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; } .mail__viaje-j b { color: #fff; } .mail__viaje-j small { color: rgb(255 255 255 / 0.6); font-size: var(--fs-xs); } .mail__viaje-j em { font-style: normal; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.85); } .mail__viaje-nivel { display: grid; justify-items: end; gap: 2px; } .mail__viaje-nivel b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; color: var(--accent); } /* EL PANEL DEL DÍA, SIEMPRE ABAJO (3/10/2026, «siempre el texto abajo para dar lugar a la cancha»): al costado, la cancha perdía la mitad del ancho y el panel quedaba con aire de sobra. Va debajo, en una franja: el título del día arriba y en un renglón la intensidad, el riesgo y el botón. La cancha conserva un alto mínimo; el partido de práctica pone sus dos equipos lado a lado. */ @media (min-width: 1101px) { .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)), .ent__centro:has(.sesion--viva:not(.sesion--plegada)) { display: flex; flex-direction: column; } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .ent__campo, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .ent__campo { height: auto; flex: 1 1 auto; min-height: 46vh; } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .ent__sesion, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .ent__sesion { flex: none; max-height: 42%; } .ent__centro:has(.sesion:not(.sesion--plegada) :is(.sesion__controles, .plan)) > .ent__campo, .ent__centro:has(.sesion--viva:not(.sesion--plegada)) > .ent__campo { min-height: 52%; } .ent__sesion .sesion:not(.sesion--viva) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); } .ent__sesion .sesion__controles { flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-6); width: 100%; } .ent__sesion .sesion:not(.sesion--viva) > .sesion__acciones { position: static; margin: 0; padding: 0; background: none; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; } .ent__sesion .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ent__sesion .plan__afuera, .ent__sesion .plan__ayuda { grid-column: 1 / -1; } .ent__sesion .plan__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .despa-llama--aviso .despa-llama__tel { font-weight: 900; font-size: 20px; animation: none; } .despa-llama--aviso .despa-llama__txt small { white-space: normal; } /* Las cifras del encabezado del entrenamiento no se pisan (3/10/2026): «En construcción» invadía la de al lado; ahora parte el renglón. */ .entsel__numeros b { white-space: normal; overflow-wrap: anywhere; font-size: clamp(1rem, 1.15vw, var(--fs-xl)); } .despa-llama__acc { display: inline-flex; gap: 6px; flex: none; } .despa-llama--empujon .despa-llama__tel { animation: none; } .despa-llama--empujon .despa-llama__txt small { white-space: normal; } /* SIN MIGAS DE PAN EN EL MODO (3/10/2026, «saquemos estos breadcrumbs, que no suman»): el menú de pastillas ya dice dónde estás, y en el partido el marcador dice qué se juega. */ .en-modo-seleccion .breadcrumb, .en-chrome-prestado .breadcrumb { display: none; } /* SIN EL LOGO DE CLUB EN EL ENTRETIEMPO (3/10/2026, «saquemos el logo este que no sé qué es en el entretiempo»): era la marca de la competencia del club de referencia. El partido escribe la de tu confederación; el entretiempo, ninguna. */ html.en-chrome-prestado:not(.en-partido-seleccion) .comp-marca { display: none; } /* EL EMPUJÓN, MÁS GRANDE Y CON FORMA (3/10/2026, «me gusta esto, un poco más grande y estilizado»): la cantidad arriba en chico, el pendiente en grande y en su renglón, los botones de tamaño normal, borde y halo de ácido. */ .despa-llama.despa-llama--empujon { max-width: min(620px, calc(100vw - 32px)); gap: 18px; padding: 18px 20px 18px 18px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--bg-raised)), var(--bg-raised) 55%); box-shadow: var(--sombra-modal), 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent); animation: empujon-entra 520ms cubic-bezier(.22,1,.36,1); } .despa-llama--empujon .despa-llama__tel { width: 52px; height: 52px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } .despa-llama--empujon .despa-llama__tel .i { width: 24px; height: 24px; } .empujon__txt { display: grid; gap: 3px; min-width: 0; flex: 1; } .empujon__cab { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .empujon__que { font-size: var(--fs-lg); line-height: 1.25; color: var(--text-primary); } .empujon__txt small { font-size: var(--fs-sm); color: var(--text-secondary); } .empujon__acc { display: grid; gap: 8px; flex: none; } .empujon__acc .action { justify-content: center; gap: 6px; min-width: 9.5rem; } .empujon__acc .action .i { width: 16px; height: 16px; } @keyframes empujon-entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } } @media (max-width: 600px) { .despa-llama.despa-llama--empujon { flex-wrap: wrap; right: 16px; left: 16px; bottom: 16px; max-width: none; } .empujon__acc { grid-auto-flow: column; width: 100%; } } @media (prefers-reduced-motion: reduce) { .despa-llama.despa-llama--empujon { animation: none; } } /* La vuelta del viaje: los tres mejores que viste y el que falta en la lista. */ .vuelta__lista { margin: 4px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; } .vuelta__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / 0.06); } .vuelta__lista span { color: var(--text-secondary); font-size: var(--fs-sm); } .vuelta__lista em { font-style: normal; font-weight: 800; font-size: var(--fs-lg); color: var(--accent); font-variant-numeric: tabular-nums; } .vuelta__ojo { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 8px; font-weight: 700; color: var(--accent); } .vuelta__ojo .i { width: 16px; height: 16px; } /* EL AVATAR DEL CORREO, CON SU COLOR (3/10/2026, «sigo viendo mal ese ícono»): en el encabezado de la carta, `.mail__meta span` le pisaba la tinta con un gris al 50 %. Más cuerpo en todos: fondo más lleno y anillo. */ .mail__av, .mail__meta .mail__av { color: var(--rol); background: color-mix(in srgb, var(--rol) 30%, rgb(10 12 16)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rol) 70%, transparent); } .mail__meta .mail__av .i, .mail__av .i { color: var(--rol); } .mail__item--abierto .mail__av { background: rgb(255 255 255 / 0.22); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); } .mail__item--abierto .mail__av .i { color: #fff; } .mail__av--escudo, .mail__meta .mail__av--escudo { background: rgb(255 255 255 / 0.94); box-shadow: none; } .mail__meta .mail__av { display: grid; place-items: center; min-width: 0; width: 40px; height: 40px; } .mail__meta .mail__av .i { width: 20px; height: 20px; } .entsel__acciones { display: inline-flex; gap: 8px; align-items: center; } /* DELEGAR AL CT, A LA VISTA (3/10/2026, «que se vea más»). */ .entsel__semana .entsel__delegar { min-height: 38px; padding: 0 18px; gap: 8px; font-size: var(--fs-md); font-weight: 800; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); } .entsel__delegar .i { width: 17px; height: 17px; } .entsel__delegar--late { animation: delegar-late 2.2s ease-in-out infinite; } @keyframes delegar-late { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); } } @media (prefers-reduced-motion: reduce) { .entsel__delegar--late { animation: none; } } /* EL PRÓXIMO PENDIENTE INVITA (3/10/2026): borde y halo de ácido, botón lleno; abajo, «Te toca» con el pendiente en grande y «Avanzar igual» al lado. */ .wid--pasos .despa__paso--sigue { background: color-mix(in srgb, var(--accent) 10%, rgb(255 255 255 / 0.06)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent); animation: paso-invita 2.6s ease-in-out infinite; } .despa__paso--sigue .despa__tilde { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } @keyframes paso-invita { 0%, 100% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent); } 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); } } .despa__hacer { white-space: nowrap; } .wid__sigue--invita { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; } .wid__sigue--invita .label { grid-column: 1 / -1; color: var(--accent); } .despa__invita { justify-content: space-between; gap: 8px; min-width: 0; } .despa__invita .i { width: 16px; height: 16px; flex: none; } .despa__avanzar-igual { all: unset; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: rgb(255 255 255 / 0.6); padding: 8px 10px; border-radius: 8px; white-space: nowrap; } .despa__avanzar-igual:focus-visible { outline: 2px solid var(--accent); } @media (hover: hover) { .despa__avanzar-igual:hover { color: #fff; background: rgb(255 255 255 / 0.08); } } @media (prefers-reduced-motion: reduce) { .wid--pasos .despa__paso--sigue { animation: none; } } .vuelta-v .agv__escena, .agv__escena--foto { background-size: cover; background-position: center 30%; } /* Con foto, la escena va limpia: sin las rayas de fondo. */ .agv__escena--foto::before, .agv__escena--foto::after { display: none !important; } .agv__escena--sola { justify-content: flex-end; padding-bottom: 28px; } .agv__escena--foto { background-size: cover; background-position: center; } .despa__cruce--jugado { opacity: 0.6; } .despa__cruce--jugado em { font-style: normal; font-weight: 800; color: var(--text-primary); } /* «En construcción» parte entre palabras, no adentro de una (3/10/2026). */ .entsel__numeros b { overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: clamp(0.95rem, 1.05vw, var(--fs-xl)); } .tudt__quieta .tudt__tarjeta { animation: none; } /* El análisis del cuerpo técnico después del partido. */ .mail__post { display: grid; gap: 6px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.06); } .mail__post p { margin: 0; } .mail__post .label { display: inline-block; min-width: 10rem; color: rgb(255 255 255 / 0.55); } .mail__post em { font-style: normal; font-weight: 800; color: var(--accent); margin-left: 4px; font-variant-numeric: tabular-nums; } /* EL VELO DEL MODO (3/10/2026): el predio en penumbra mientras se arma la ventana que viene. Lo pone `puerta.js` desde la cabecera. */ html.velo-del-modo::after { content: ''; position: fixed; inset: 0; z-index: 99990; pointer-events: none; background: linear-gradient(180deg, rgb(8 10 14 / 0.55), rgb(8 10 14 / 0.92)), url('/assets/fotos/predio-cesped.jpg') center / cover; } html.velo-del-modo::before { content: 'Preparando…'; position: fixed; z-index: 99991; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgb(255 255 255 / 0.75); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; animation: velo-late 1.4s ease-in-out infinite; } html[lang="en"].velo-del-modo::before { content: 'Getting ready…'; } @keyframes velo-late { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } } /* LA TABLA ENTRA EN EL TELÉFONO (3/10/2026, barrido de resoluciones): a 390 px el «Convocar» quedaba cortado —«Convoc»— porque la tabla medía 425 y el botón se iba del borde; a 320 además se salía el filtro de país. Con poco ancho, celdas más justas y el botón un punto más chico. */ @media (max-width: 480px) { .cvsel .convoc__tabla td, .cvsel .convoc__tabla th { padding-inline: 4px; } .cvsel .convoc__accion, .cvsel .convoc__tabla thead th:last-child { width: auto; } .cvsel .convoc__accion .action { min-height: 36px; padding: 0 var(--sp-2); font-size: var(--fs-xs); } .cvsel .convoc__tabla td { font-size: var(--fs-sm); } .cvsel .convoc__tabla .convoc__quien b, .cvsel .convoc__tabla .convoc__quien a { font-size: 1rem; } .cvsel .convoc__tabla thead th, .cvsel .convoc__tabla thead .sort { letter-spacing: 0; } /* La flecha invisible de ordenar ocupa 15 px por columna: fuera, salvo en la columna que ordena. */ .cvsel .convoc__tabla th:not([aria-sort='ascending']):not([aria-sort='descending']) .sort .i { display: none; } .cvsel .convoc__tabla .sort { gap: 2px; } .cvsel__pais, .cvsel__filtro { min-width: 0; max-width: 100%; } } /* Y en los más angostos (360 de los Android, 320 del SE) no entra todo: se va la Posición, que el grupo ya dice —Arqueros, Defensores…— y está en la ficha. */ @media (max-width: 374px) { .cvsel .convoc__tabla tr > :nth-child(2):not([colspan]) { display: none; } } /* LA PREVIA EN EL TELÉFONO Y LA TABLET (3/10/2026, barrido de resoluciones): la mesa de tres columnas —17,5 rem, centro y 23 rem— no tenía versión angosta; a 390 px el cruce quedaba en 287 y el botón de la fecha se salía por la izquierda. Debajo de 1100 px se apila: el cruce y la cancha arriba; la lista y el planteo, lado a lado en la tablet y uno abajo del otro en el teléfono. La tablet horizontal (1024) también: ahí las tres columnas ponían «ECUADOR» letra por letra. */ @media (max-width: 1100px) { .dsel--mesa:has(> .dsel__grilla:not([hidden])) { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'hero hero' 'cancha cancha' 'izq der'; } .dsel--mesa .dsel__hero, .dsel--mesa .dsel__lista, .dsel--mesa .dsel__cancha, .dsel--mesa .dsel__lado { min-width: 0; } .dsel--mesa .dsel__cta .dia__mandos { flex-wrap: wrap; justify-content: center; text-align: center; } .dsel--mesa .dsel__cta-pie { white-space: normal; } } @media (max-width: 720px) { .dsel--mesa:has(> .dsel__grilla:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hero' 'cancha' 'izq' 'der'; } } /* LOS MESES DEL FIXTURE EN EL TELÉFONO (3/10/2026): a 390 px «FEBRERO» y «MARZO» se pisaban —«FEBRERMARZO»—; con poco ancho van las tres letras. */ .via__mes-corto { display: none; } @media (max-width: 720px) { .via__mes-largo { display: none; } .via__mes-corto { display: inline; } } /* El escudo de la confederación pisaba «Eliminatorias» debajo del VS: con poco ancho, el torneo lo dice el texto. */ @media (max-width: 720px) { .dsel--mesa .dsel__hero .dia__contexto .conf-logo { display: none; } } /* El `