/* =========================================================================
Futbol Manager - sistema visual
Identidad retro de manager clasico (verde cancha, crema de papel, dorado
de trofeo) con maquetacion moderna: menu lateral fijo en escritorio,
panel deslizante y barra inferior en movil.
Orden del archivo:
1. Tokens
2. Base y accesibilidad
3. Disposicion (lateral, barras, contenido)
4. Componentes (paneles, botones, formularios, tablas, chapas)
5. Pantallas concretas
6. Puntos de quiebre
========================================================================= */
/* =========================================================================
1. Tokens
========================================================================= */
:root {
/* Superficies, de la mas profunda a la mas elevada */
--fondo: #08211a;
--fondo-alto: #0b2b22;
--panel: #0f362a;
--panel-alto: #14432f;
--panel-hueco: rgba(0, 0, 0, 0.22);
/* Tinta */
--texto: #f2ead8;
--texto-suave: rgba(242, 234, 216, 0.72);
--texto-tenue: rgba(242, 234, 216, 0.5);
--tinta: #08211a;
/* Acentos */
--dorado: #e8b23f;
--dorado-claro: #f6cd74;
--dorado-oscuro: #a97c17;
--cesped: #1f7a4d;
--cesped-claro: #2fa768;
/* Semanticos */
--exito: #6fd898;
--peligro: #ff8a75;
--peligro-fuerte: #c93d28;
--aviso: #efb95a;
--info: #6aa9dd;
/* Bordes */
--borde: rgba(242, 234, 216, 0.14);
--borde-fuerte: rgba(242, 234, 216, 0.26);
/* Espaciado */
--e1: 0.25rem;
--e2: 0.5rem;
--e3: 0.75rem;
--e4: 1rem;
--e5: 1.5rem;
--e6: 2rem;
--e7: 3rem;
/* Radios */
--r1: 4px;
--r2: 8px;
--r3: 14px;
--r4: 22px;
/* Sombras */
--sombra1: 0 1px 2px rgba(0, 0, 0, 0.3);
--sombra2: 0 4px 14px rgba(0, 0, 0, 0.32);
--sombra3: 0 12px 36px rgba(0, 0, 0, 0.42);
/* Tipografia */
--fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: "SFMono-Regular", "Roboto Mono", "Courier New", monospace;
/* Medidas de la maqueta */
--lateral-ancho: 268px;
--barra-alto: 58px;
--inferior-alto: 62px;
}
/* =========================================================================
2. Base
========================================================================= */
* {
box-sizing: border-box;
}
/* El atributo hidden manda por encima de cualquier display de componente. */
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
/*
* El documento no se desliza de costado.
*
* La pantalla de carga es una capa fija que tapa todo -`inset: 0`-, asi
* que mide lo que mide el viewport contando la barra de scroll, un
* pixel mas que el ancho util del documento. Ese pixel alcanza para que
* aparezca la barra de abajo y la pagina se pueda arrastrar de costado.
* Y sigue estando cuando la capa ya se apago: `visibility: hidden` la
* deja invisible pero dibujada, asi que su caja sigue contando.
*
* Las tablas anchas -plantel, entrenamiento- no tienen nada que ver:
* esas se corren de lado adentro de su envoltorio y no empujan la
* pagina. Cortar aca el desborde del documento no las toca.
*/
overflow-x: hidden;
}
body {
margin: 0;
min-height: 100vh;
background: var(--fondo);
color: var(--texto);
font-family: var(--fuente);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0 0 var(--e2);
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.01em;
}
p {
margin: 0 0 var(--e3);
}
a {
color: var(--dorado);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover,
a:focus-visible {
color: var(--dorado-claro);
text-decoration: underline;
}
:focus-visible {
outline: 3px solid var(--dorado);
outline-offset: 2px;
border-radius: var(--r1);
}
/* Numeros siempre alineados en columna */
.tabla td,
.tabla th,
.chapa,
.metrica,
.marcador-partido__cifras {
font-variant-numeric: tabular-nums;
}
.icono {
width: 20px;
height: 20px;
flex: none;
}
.icono--xs {
width: 15px;
height: 15px;
}
.icono--sm {
width: 18px;
height: 18px;
}
.salto-contenido {
position: absolute;
top: -100px;
left: var(--e3);
z-index: 1300;
padding: var(--e2) var(--e4);
background: var(--dorado);
color: var(--tinta);
font-weight: 700;
border-radius: 0 0 var(--r2) var(--r2);
transition: top 0.2s ease;
}
.salto-contenido:focus {
top: 0;
color: var(--tinta);
text-decoration: none;
}
/*
* Pelota de futbol: foto real recortada sobre fondo transparente
* (includes/images/misc/pelota.webp). Reemplaza al dibujo vectorial
* anterior para que la marca y la pantalla de carga se vean mas vivas.
* Foto: Christopher Bruno / Ed g2s, Wikimedia Commons, CC BY-SA 2.0.
*/
.pelota {
display: inline-block;
flex: none;
background-image: url("../images/misc/pelota.webp");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* --- Pantalla de carga --------------------------------------------------- */
.pantalla-carga {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
align-items: center;
justify-content: center;
background: var(--fondo);
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/*
* Un estadio iluminado visto desde arriba, de noche. Es una foto propia de
* esta pantalla: las otras dos ya estan tomadas -la portada y el juego- y
* repetirlas hacia que la espera no se distinguiera de lo que venia antes.
*
* Va en una capa propia y apagada para que la pelota y el texto se lean
* sin depender de que zona de la foto les toque atras.
*
* Foto: ProtoplasmaKid, Wikimedia Commons, CC BY 4.0.
* commons.wikimedia.org/wiki/File:Vista_aérea_nocturna_del_Estadio_Azteca.jpg
*/
.pantalla-carga::before {
content: "";
position: absolute;
inset: 0;
background: url("../images/portada/fondo-espera-hd.webp") center / cover no-repeat;
opacity: 0.38;
}
.pantalla-carga__caja {
position: relative;
}
.pantalla-carga.es-oculta {
opacity: 0;
visibility: hidden;
}
.pantalla-carga__caja {
text-align: center;
}
/*
* La pelota de carga combina dos animaciones: el envoltorio hace el rebote
* (subir, bajar y achatarse contra el piso) y la bola de adentro gira sobre
* su eje. Van en elementos distintos porque las dos usan transform.
*/
.pantalla-carga__pelota {
display: block;
width: 52px;
height: 52px;
margin: 0 auto var(--e3);
animation: rebote 0.9s ease-in-out infinite;
}
.pantalla-carga__bola {
display: block;
width: 100%;
height: 100%;
animation: girar-pelota 1.1s linear infinite;
}
/*
* El nombre del juego, debajo de la pelota.
*
* Es lo primero que se ve al abrir la aplicacion desde el icono del
* telefono, antes de que haya una sola pantalla dibujada: sin el, arranca
* con una pelota rebotando y un "cargando" que no dicen de que juego se
* trata.
*/
.pantalla-carga__marca {
margin: 0 0 var(--e2);
font-size: 1.5rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--texto);
}
.pantalla-carga__texto {
margin: 0;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dorado);
}
@keyframes rebote {
0%, 100% { transform: translateY(0) scale(1, 1); }
45% { transform: translateY(-18px) scale(0.95, 1.05); }
62% { transform: translateY(0) scale(1.08, 0.92); }
}
@keyframes girar-pelota {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.pantalla-carga__pelota,
.pantalla-carga__bola { animation: none; }
* { transition-duration: 0.01ms !important; }
}
/* =========================================================================
3. Disposicion
========================================================================= */
.disposicion {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
.disposicion__principal {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100vh;
}
.contenido {
flex: 1;
padding: var(--e4) var(--e4) var(--e6);
outline: none;
}
body.con-juego .contenido {
padding-bottom: calc(var(--inferior-alto) + var(--e6));
}
/* --- Menu lateral -------------------------------------------------------- */
.lateral {
/* Bootstrap usa esta variable para el ancho del panel deslizante. */
--bs-offcanvas-width: min(88vw, 320px);
/*
* Y esta para el color del texto de adentro, que de fabrica es el del
* cuerpo de Bootstrap: casi negro. En escritorio no molestaba -la
* columna no es un offcanvas y hereda el color del sitio-, pero al
* abrirla en el telefono todo lo que no tuviera color propio se pintaba
* oscuro sobre el verde. Le pasaba al nombre del club, que quedaba
* ilegible.
*/
--bs-offcanvas-color: var(--texto);
display: flex;
flex-direction: column;
width: var(--bs-offcanvas-width);
color: var(--texto);
background: var(--fondo-alto);
border-right: 1px solid var(--borde);
}
/*
* La cabecera de la columna mide lo mismo que la barra superior: asi el
* borde de las dos cae exactamente sobre la misma linea.
*/
.lateral__cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e2);
min-height: var(--barra-alto);
padding: var(--e2) var(--e4);
border-bottom: 1px solid var(--borde);
}
.lateral__cerrar {
display: inline-flex;
padding: var(--e1);
background: transparent;
border: 1px solid var(--borde);
border-radius: var(--r1);
color: var(--texto-suave);
cursor: pointer;
}
.lateral__cuerpo {
flex: 1;
overflow-y: auto;
padding: var(--e4);
}
/*
* El pie de la columna: lo de la cuenta, no lo de la partida.
*
* El cuerpo se queda con el alto sobrante y scrollea, así que esto siempre
* termina apoyado abajo, separado del menú por su línea. Esa distancia es
* todo el punto: cerrar la sesión y cerrar la partida son dos cosas
* distintas y antes eran dos botones pegados.
*/
.lateral__pie {
flex: none;
padding: var(--e3) var(--e4);
border-top: 1px solid var(--borde);
}
/*
* Entrar al escritorio es el primer enlace del menu y cerrar la partida el
* ultimo: los dos son la salida de los paneles, no uno de ellos, y llevan el
* mismo trato -enlace comun con su linea que lo separa del resto-.
*/
.navegacion__entrada {
margin-bottom: var(--e3);
padding-bottom: var(--e3);
border-bottom: 1px solid var(--borde);
}
/* Cerrar la partida es un item mas de la seccion Partida, no un pie aparte. */
.navegacion__salida { margin: 0; }
/*
* Salir y cerrar sesión son botones y el resto del menú son enlaces, así
* que lo único que hace esta clase es sacarle al botón su aspecto de botón.
*
* El color no se toca: antes iban más apagados que los demás y con el texto
* en rojo al pasar por encima, como si fueran algo peligroso. No lo son
* -la partida se graba sola despues de cada accion-, y encima se leían como
* de segunda. Van con el mismo color que cualquier otra entrada.
*/
.navegacion__enlace--salir {
width: 100%;
text-align: left;
background: none;
border: 0;
cursor: pointer;
}
/* Instalar como app: aparece solo cuando el navegador lo permite. */
.navegacion__instalar {
width: 100%;
margin-top: var(--e3);
text-align: left;
background: none;
border: 1px dashed var(--borde);
cursor: pointer;
color: var(--dorado);
}
.navegacion__instalar:hover { border-style: solid; }
.marca {
display: inline-flex;
align-items: center;
gap: var(--e2);
color: var(--texto);
}
.marca:hover {
color: var(--dorado);
text-decoration: none;
}
.marca__pelota {
width: 26px;
height: 26px;
}
.marca__texto {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.marca__texto strong {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.marca__texto small {
font-size: 0.68rem;
color: var(--texto-tenue);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Ficha del club en el lateral */
.ficha-club {
display: flex;
align-items: center;
gap: var(--e3);
padding: var(--e3);
margin-bottom: var(--e3);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r2);
}
.ficha-club__datos {
display: flex;
flex-direction: column;
min-width: 0;
}
.ficha-club__nombre {
font-size: 0.95rem;
line-height: 1.2;
}
.ficha-club__dt {
font-size: 0.75rem;
color: var(--texto-tenue);
}
/* Navegacion */
.navegacion {
display: flex;
flex-direction: column;
gap: var(--e4);
}
.navegacion__grupo {
display: flex;
flex-direction: column;
gap: var(--e1);
}
/*
Rotulo de cada seccion: solo el texto en mayusculas y una linea fina que
sigue hasta el borde. Sin icono: los iconos en color son de los items y
el rotulo no tiene que competir con ellos.
*/
.navegacion__titulo {
display: flex;
align-items: center;
gap: var(--e3);
width: 100%;
margin: 0 0 var(--e1);
padding: var(--e1) var(--e2);
background: none;
border: 0;
border-radius: var(--r1);
text-align: left;
cursor: pointer;
font: inherit;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--texto-tenue);
}
.navegacion__titulo::after {
content: "";
flex: 1;
height: 1px;
background: var(--borde);
}
.navegacion__grupo.es-activo .navegacion__titulo {
color: var(--dorado);
}
.navegacion__grupo.es-activo .navegacion__titulo::after {
background: rgba(232, 178, 63, 0.35);
}
.navegacion__titulo:hover,
.navegacion__titulo:focus-visible {
color: var(--texto);
background: rgba(255, 255, 255, 0.04);
outline: none;
}
/* La flecha del rotulo mira abajo con la seccion abierta y al costado plegada. */
.navegacion__flecha {
width: 12px;
height: 12px;
flex: none;
opacity: 0.6;
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.navegacion__grupo.es-plegado .navegacion__flecha { transform: rotate(0deg); }
.navegacion__grupo.es-plegado .navegacion__titulo { margin-bottom: 0; }
.navegacion__lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/*
Submenu: las entradas que cuelgan de otra (Mi carrera > Contratos). Van
corridas a la derecha y con un hilo a la izquierda que las ata al padre.
*/
.navegacion__sublista {
list-style: none;
margin: 2px 0 0 calc(var(--e3) + 10px);
padding: 0 0 0 var(--e2);
display: flex;
flex-direction: column;
gap: 2px;
border-left: 1px solid var(--borde);
}
.navegacion__sublista .navegacion__enlace {
padding-top: calc(var(--e2) - 2px);
padding-bottom: calc(var(--e2) - 2px);
font-size: 0.84rem;
font-weight: 500;
}
.navegacion__sublista .navegacion__enlace .icono {
width: 16px;
height: 16px;
}
/*
Iconos del menu en color. Los iconos del juego son de un solo trazo y
heredan el color del texto; en el menu lateral cada uno se pinta como el
botiquin de Lesionados o la camiseta de Dorsales: el primer trazo del
SVG es el cuerpo -la caja, la pelota, el billete- y se rellena con el
color de lo que representa; `color` pinta los detalles que van encima.
La paleta vive aca y no en el SVG, como el resto de los iconos en color.
*/
.icono--menu { flex: none; }
/* Escritorio: la casa, verde cesped con el techo dorado. */
.icono--menu-escritorio { color: var(--texto); }
.icono--menu-escritorio > :first-child { fill: var(--cesped-claro); stroke: var(--dorado-claro); }
/* Resultados: la pelota blanca con los gajos oscuros. */
.icono--menu-balon { color: var(--dorado-oscuro); }
.icono--menu-balon > :first-child { fill: var(--texto); stroke: var(--dorado-oscuro); }
/* Clasificacion: la planilla celeste. */
.icono--menu-tabla { color: var(--tinta); }
.icono--menu-tabla > :first-child { fill: var(--info); stroke: var(--texto); }
/* Calendario: la hoja roja del almanaque. */
.icono--menu-calendario { color: var(--texto); }
.icono--menu-calendario > :first-child { fill: var(--peligro-fuerte); stroke: var(--texto); }
/* Mi carrera y Empleados: el maletin de cuero. */
.icono--menu-maletin { color: var(--dorado-claro); }
.icono--menu-maletin > :first-child { fill: var(--dorado-oscuro); stroke: var(--dorado-claro); }
/* Mis contratos: la hoja de papel con la firma. */
.icono--menu-contrato { color: var(--dorado-oscuro); }
.icono--menu-contrato > :first-child { fill: var(--texto); stroke: var(--dorado-oscuro); }
/* Mis inversiones y Caja: el billete verde. */
.icono--menu-billete { color: var(--tinta); }
.icono--menu-billete > :first-child { fill: var(--exito); stroke: var(--texto); }
/* Alineacion y Plantilla: las dos figuras, la de adelante celeste. */
.icono--menu-plantel { color: var(--texto); }
.icono--menu-plantel > :first-child { fill: var(--info); stroke: var(--texto); }
/* Tacticas: la pizarra verde con las lineas de cal. */
.icono--menu-pizarra { color: var(--texto); }
.icono--menu-pizarra > :first-child { fill: var(--cesped); stroke: var(--texto); }
/* Planteo: el medidor ambar con la aguja oscura. */
.icono--menu-planteo { color: var(--tinta); }
.icono--menu-planteo > :first-child { fill: var(--aviso); stroke: var(--dorado-claro); }
.icono--menu-planteo > :last-child { stroke: var(--dorado-claro); }
/* Ver rival: los binoculares, con los lentes celestes. */
.icono--menu-anteojos { color: var(--info); }
.icono--menu-anteojos circle { fill: rgba(106, 169, 221, 0.3); }
/* Entrenamiento: el silbato dorado (el cuerpo es el segundo trazo). */
.icono--menu-silbato { color: var(--dorado-claro); }
.icono--menu-silbato > :nth-child(2) { fill: var(--dorado); stroke: var(--dorado-claro); }
.icono--menu-silbato > :nth-child(3) { stroke: var(--tinta); }
/* Fichar: las flechas del mercado, en ambar. */
.icono--menu-mercado { color: var(--aviso); }
/* Cedibles: el reloj del prestamo, que dura unas fechas y se devuelve. */
.icono--menu-reloj { color: var(--texto); }
.icono--menu-reloj > :first-child { fill: var(--info); stroke: var(--texto); }
/* Leyendas: el trofeo dorado de las glorias. */
.icono--menu-copa { color: var(--dorado-oscuro); }
.icono--menu-copa > :first-child { fill: var(--dorado-claro); stroke: var(--dorado-oscuro); }
/* Decisiones: la carpeta amarilla con el aviso. */
.icono--menu-decision { color: var(--tinta); }
.icono--menu-decision > :first-child { fill: var(--dorado-claro); stroke: var(--dorado); }
/* Estadio: el anillo de la cancha, verde. */
.icono--menu-estadio { color: var(--texto); }
.icono--menu-estadio > :first-child { fill: var(--cesped-claro); stroke: var(--texto); }
/* Juego sucio: el sobre marron, con la solapa en dorado. */
.icono--menu-sucio { color: var(--dorado-claro); }
.icono--menu-sucio > :first-child { fill: var(--dorado-oscuro); stroke: var(--dorado-claro); }
/* Entradas: el ticket dorado con el troquel y el texto en tinta. */
.icono--menu-entrada { color: var(--tinta); }
.icono--menu-entrada > :first-child { fill: var(--dorado-claro); stroke: var(--dorado); }
/* Configuracion: el engranaje celeste. */
.icono--menu-ajustes { color: var(--texto); }
.icono--menu-ajustes > :first-child { fill: var(--info); stroke: var(--texto); }
/* Cerrar sesion: la puerta, en rojo. Es la unica salida de verdad. */
.icono--menu-salir { color: var(--peligro); }
.icono--menu-salir > :first-child { fill: rgba(255, 138, 117, 0.22); }
/*
* El disquete es el icono de las partidas guardadas en todo el juego: lo
* llevan "Cargar partida" en la portada y "Mis partidas" en el menu, que
* son dos caminos a la misma lista. Y la instalacion de la app.
*/
.icono--menu-guardar { color: var(--texto); }
.icono--menu-guardar > :first-child { fill: var(--info); stroke: var(--texto); }
.icono--menu-jugar { color: var(--exito); }
.navegacion__enlace {
display: flex;
align-items: center;
gap: var(--e3);
padding: var(--e2) var(--e3);
border-radius: var(--r2);
color: var(--texto-suave);
font-size: 0.9rem;
font-weight: 600;
border-left: 3px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease;
}
.navegacion__enlace:hover {
background: var(--panel);
color: var(--texto);
text-decoration: none;
}
.navegacion__enlace.es-activo,
.navegacion__grupo.es-activo .navegacion__enlace:hover {
background: var(--panel-alto);
color: var(--texto);
}
.navegacion__enlace--destacado {
background: var(--panel);
border: 1px solid var(--borde);
color: var(--texto);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.06em;
}
.navegacion__enlace--destacado.es-activo {
background: var(--dorado);
border-color: var(--dorado-oscuro);
color: var(--tinta);
}
.navegacion__enlace span {
flex: 1;
}
/*
Contador de avisos: circulo rojo con la cantidad de asuntos sin responder.
Va dentro de enlaces cuyo de texto crece, asi que se blinda el
tamano para que no se estire y quede ovalado.
*/
.navegacion__enlace .contador-alerta,
.contador-alerta {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--peligro-fuerte);
box-shadow: 0 0 0 3px rgba(201, 61, 40, 0.22);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
animation: latido 1.8s ease-in-out infinite;
}
.contador-alerta--flotante {
position: absolute;
top: 2px;
right: 50%;
margin-right: -22px;
}
@keyframes latido {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
/* --- Barra superior ------------------------------------------------------ */
.barra-superior {
position: sticky;
top: 0;
z-index: 900;
display: flex;
align-items: center;
gap: var(--e2);
min-height: var(--barra-alto);
padding: var(--e2) var(--e4);
background: rgba(11, 43, 34, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--borde);
}
.barra-superior__menu {
display: inline-flex;
padding: var(--e2);
background: transparent;
border: 1px solid var(--borde-fuerte);
border-radius: var(--r2);
color: var(--texto);
cursor: pointer;
}
.barra-superior__identidad {
display: flex;
align-items: center;
gap: var(--e2);
min-width: 0;
flex: 1;
}
.barra-superior__acciones {
display: flex;
align-items: center;
gap: var(--e2);
}
/*
* Los sorteos son las unicas pantallas con escudo en la barra. Mientras
* gira el bolillero el boton final esta oculto y el escudo queda solo, asi
* que se centra. Cuando el boton aparece, el escudo vuelve a la izquierda
* y el boton ocupa la derecha.
*/
.barra-superior:has([data-sorteo-final][hidden]) .barra-superior__identidad {
justify-content: center;
}
/*
* La accion principal de la barra lleva su icono en un medallon: disco
* verde oscuro y triangulo dorado, los colores del club dados vuelta
* sobre el boton. Es el mismo recurso que los accesos del plantel -el
* icono adentro de un disco de color-, y ademas separa el simbolo del
* fondo dorado, donde antes se perdia por falta de contraste.
*/
.barra-superior .boton--principal .icono {
width: 15px;
height: 15px;
padding: 4px;
box-sizing: content-box;
border-radius: 50%;
background: var(--tinta);
color: var(--dorado-claro);
}
.barra-superior__texto-largo { display: none; }
.barra-superior__texto-corto { display: inline; }
/* --- Barra inferior (movil) ---------------------------------------------- */
.barra-inferior {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 950;
display: flex;
height: var(--inferior-alto);
padding-bottom: env(safe-area-inset-bottom);
background: rgba(8, 33, 26, 0.97);
backdrop-filter: blur(8px);
border-top: 1px solid var(--borde-fuerte);
}
.barra-inferior__enlace {
position: relative;
flex: 1;
/*
* Cinco accesos con su rotulo -"Escritorio" es el mas largo- no entran
* en un telefono angosto, y sin este minimo en cero el reparto se hace
* por lo que mide el texto: los accesos se desbordan por el costado en
* vez de repartirse el ancho que hay.
*/
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: var(--e1);
color: var(--texto-tenue);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* El rotulo, en una linea: si no entra se corta con puntos suspensivos. */
.barra-inferior__enlace > span:not(.contador-alerta) {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.barra-inferior__enlace:hover {
text-decoration: none;
color: var(--texto);
}
.barra-inferior__enlace.es-activo {
color: var(--dorado);
}
.barra-inferior__enlace.es-activo::before {
content: "";
position: absolute;
top: 0;
left: 22%;
right: 22%;
height: 3px;
background: var(--dorado);
border-radius: 0 0 3px 3px;
}
/* --- Pie ----------------------------------------------------------------- */
.pie {
padding: var(--e5) var(--e4);
border-top: 1px solid var(--borde);
background: var(--fondo-alto);
font-size: 0.8rem;
}
body.con-juego .pie {
padding-bottom: calc(var(--inferior-alto) + var(--e4));
}
/*
* Las pantallas sin columna lateral (portada, alta, carga, sorteos) tampoco
* llevan barra inferior: el hueco que le reservan el contenido y el pie no
* tapa nada y deja el pie con el doble de alto del que le toca.
*/
body.con-juego .disposicion--completa .contenido {
padding-bottom: var(--e6);
}
body.con-juego .disposicion--completa .pie {
padding-bottom: var(--e4);
}
/* Pie unico: una sola linea, centrada. */
.pie--compacto {
padding: var(--e4);
color: var(--texto-tenue);
text-align: center;
}
.pie__texto { margin: 0; }
.pie__enlace {
color: var(--texto-tenue);
text-decoration: none;
transition: color 0.2s ease;
}
.pie__enlace:hover,
.pie__enlace:focus {
color: var(--texto);
text-decoration: underline;
}
.pie__enlace:focus {
outline: 2px solid var(--texto);
outline-offset: 2px;
}
/* =========================================================================
4. Componentes
========================================================================= */
/* --- Encabezado de pantalla ---------------------------------------------- */
.seccion {
max-width: 1200px;
margin: 0 auto;
}
/* Dos secciones seguidas en la misma pantalla necesitan aire entre ellas. */
.seccion + .seccion { margin-top: var(--e7); }
.seccion__titulo {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--texto);
}
.seccion__titulo::after {
content: "";
display: block;
width: 52px;
height: 3px;
margin-top: var(--e2);
background: var(--dorado);
border-radius: 2px;
}
.seccion__bajada {
max-width: 74ch;
margin-bottom: var(--e5);
color: var(--texto-suave);
}
/* Bajada que acompana a una tabla: ocupa todo el ancho del contenido. */
.seccion__bajada--ancha { max-width: none; }
.seccion--error {
text-align: center;
padding-top: var(--e7);
}
.seccion--error .seccion__titulo::after {
margin-left: auto;
margin-right: auto;
}
.detalle-error {
max-width: 60ch;
margin: 0 auto var(--e5);
padding: var(--e3);
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r2);
font-family: var(--mono);
font-size: 0.85rem;
}
/* --- Avisos -------------------------------------------------------------- */
.avisos {
max-width: 1200px;
margin: 0 auto var(--e4);
display: flex;
flex-direction: column;
gap: var(--e2);
}
.aviso {
display: flex;
align-items: flex-start;
gap: var(--e3);
padding: var(--e3) var(--e4);
background: var(--panel);
border: 1px solid var(--borde);
border-left: 4px solid var(--dorado);
border-radius: var(--r2);
box-shadow: var(--sombra1);
animation: entrar 0.25s ease;
}
.aviso--exito { border-left-color: var(--exito); }
.aviso--error { border-left-color: var(--peligro); }
.aviso--aviso { border-left-color: var(--aviso); }
.aviso__icono {
width: 8px;
height: 8px;
margin-top: 0.5rem;
flex: none;
border-radius: 50%;
background: var(--dorado);
}
.aviso--exito .aviso__icono { background: var(--exito); }
.aviso--error .aviso__icono { background: var(--peligro); }
.aviso__texto { flex: 1; font-size: 0.92rem; }
.aviso__cerrar {
display: inline-flex;
padding: 2px;
background: transparent;
border: 0;
color: var(--texto-tenue);
cursor: pointer;
}
.aviso__cerrar:hover { color: var(--texto); }
.aviso.es-saliendo {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes entrar {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Superficies --------------------------------------------------------- */
.panel,
.tarjeta,
.destacado,
.formulario,
.filtros,
.bloque {
padding: var(--e4);
margin-bottom: var(--e4);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r3);
box-shadow: var(--sombra1);
}
/*
* Bloque que contiene una tabla de plantel. La tabla llega a los bordes de
* la tarjeta, como en Alineacion, y el titulo y la nota conservan su
* margen. El contador va a la derecha del titulo, tambien como alla.
*/
.bloque--tabla {
/*
* En columna, y cada fila atada al ancho disponible.
*
* Adentro va una tabla que declara su ancho minimo -64rem en
* Entrenamiento- y se corre de lado dentro de su envoltorio. Que el
* envoltorio tenga `overflow-x: auto` no alcanza: al medir el ancho
* minimo de este bloque, el navegador sigue contando lo que la tabla
* mide por dentro, asi que el bloque reclama esas 64rem y la pagina
* entera se va de ancho en el telefono.
*
* Con la fila declarada `minmax(0, 1fr)` el ancho minimo de la fila es
* cero: nada de lo que haya adentro puede pedir mas que el lugar que
* hay. El envoltorio, que ya sabe correrse de lado, se queda con el
* ancho de la pantalla y el que scrollea es el, no el documento.
*/
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: var(--e4) 0 0;
overflow: hidden;
}
.bloque--tabla > .bloque__titulo {
width: 100%;
justify-content: space-between;
padding-left: var(--e4);
padding-right: var(--e4);
}
.bloque--tabla > .bloque__nota {
margin: 0 var(--e4) var(--e4);
}
.panel__titulo,
.tarjeta__titulo,
.bloque__titulo {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e3);
padding-bottom: var(--e2);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dorado);
border-bottom: 1px solid var(--borde);
}
.panel__subtitulo {
margin-top: var(--e4);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--texto-suave);
}
.panel__nota,
.bloque__nota,
.tarjeta__texto {
font-size: 0.86rem;
color: var(--texto-suave);
}
/* Nota que acompania a un bloque centrado, y va con el. */
.panel__nota--centrada { text-align: center; }
/* Aviso dentro de un panel: algo esta agotado o hace falta atenderlo. */
.panel__nota--alerta {
padding: var(--e2) var(--e3);
background: rgba(239, 185, 90, 0.12);
border-left: 3px solid var(--aviso);
border-radius: var(--r1);
color: var(--aviso);
}
.panel__vacio {
padding: var(--e4) 0;
color: var(--texto-tenue);
font-style: italic;
text-align: center;
}
.tarjeta {
display: flex;
flex-direction: column;
margin-bottom: 0;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.tarjeta__dato { margin: 0 0 var(--e1); font-size: 0.88rem; }
.tarjeta__dato--tenue { color: var(--texto-tenue); }
.tarjeta__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; padding-top: var(--e3); }
.tarjeta--ranura.es-vacia { opacity: 0.65; border-style: dashed; }
.tarjeta--empleado.es-contratado { border-color: var(--exito); box-shadow: 0 0 0 1px rgba(111, 216, 152, 0.3); }
/* --- Retratos de los empleados -------------------------------------------- */
.retrato {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
object-fit: cover;
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: 50%;
}
.retrato--sm { width: 40px; height: 40px; }
.retrato--iniciales {
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 700;
color: var(--dorado);
}
/*
* Ficha corta del candidato. Con cada dato en su renglon y el boton
* debajo, tres fichas ocupaban dos pantallas en el telefono. Aca el
* retrato va chico, la descripcion en una o dos lineas y contratacion,
* sueldo y boton comparten el pie.
*/
.tarjeta--empleado { padding: var(--e3); }
.tarjeta--empleado .empleado__cabecera {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e2);
}
.tarjeta--empleado .retrato { width: 40px; height: 40px; }
.tarjeta--empleado .empleado__identidad { min-width: 0; }
.tarjeta--empleado .empleado__identidad .tarjeta__titulo {
margin: 0;
padding-bottom: 0;
border-bottom: 0;
font-size: 0.78rem;
}
.tarjeta--empleado .empleado__identidad .tarjeta__dato { margin: 0; font-size: 0.8rem; line-height: 1; }
.tarjeta--empleado .tarjeta__texto { margin: 0 0 var(--e2); font-size: 0.82rem; line-height: 1.4; }
.tarjeta--empleado .empleado__pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e2);
margin-top: auto;
padding-top: var(--e2);
border-top: 1px solid var(--borde);
}
.tarjeta--empleado .empleado__cifras {
display: flex;
gap: var(--e3);
margin: 0;
min-width: 0;
}
.tarjeta--empleado .empleado__cifras dt {
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--texto-tenue);
}
.tarjeta--empleado .empleado__cifras dd {
margin: 0;
font-size: 0.86rem;
font-weight: 700;
white-space: nowrap;
}
.tarjeta--empleado .empleado__pie form { flex: 0 0 auto; margin: 0; }
.tarjeta--empleado .empleado__pie .tarjeta__dato { margin: 0; font-size: 0.8rem; }
/* El empleado que ya trabaja en el club: retrato con el mismo verde que el borde de su ficha. */
.tarjeta--empleado.es-contratado .retrato { border-color: var(--exito); }
.destacado {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e3);
border-left: 4px solid var(--dorado);
}
/* Aviso corto: el texto y su boton van juntos en el medio de la caja. */
.destacado--centrado {
justify-content: center;
text-align: center;
}
.destacado--alerta {
border-left-color: var(--peligro);
background: linear-gradient(90deg, rgba(201, 61, 40, 0.16), var(--panel) 55%);
}
/* Aviso amarillo: los que llegan cansados, algo que conviene mirar. */
.destacado--aviso {
border-left-color: var(--aviso);
background: linear-gradient(90deg, rgba(239, 185, 90, 0.16), var(--panel) 55%);
}
/* Nota tenue: informa, no apura (los veteranos en edad de retiro). */
.destacado--tenue {
border-left-color: var(--borde-fuerte);
color: var(--texto-suave);
}
.destacado p { margin: 0; }
.panel--metrica { text-align: center; margin-bottom: 0; }
.metrica {
margin: var(--e2) 0 var(--e1);
font-family: var(--mono);
font-size: 1.9rem;
font-weight: 700;
line-height: 1;
color: var(--dorado);
}
/* --- Rejillas ------------------------------------------------------------ */
.rejilla {
display: grid;
gap: var(--e4);
grid-template-columns: 1fr;
margin-bottom: var(--e4);
}
/*
* Un item de grilla mide, como minimo, lo que mide su contenido: si adentro
* hay una tabla ancha, la celda crece y desborda la pantalla en vez de
* dejar que la tabla scrollee por dentro. Con el minimo en cero manda la
* columna, y lo que no entra se desliza al costado.
*/
.rejilla > * { min-width: 0; }
.rejilla--clubes { gap: var(--e2); }
/* --- Botones ------------------------------------------------------------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e2);
padding: 0.6rem 1.1rem;
border: 1px solid transparent;
border-radius: var(--r2);
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
white-space: nowrap;
transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { text-decoration: none; }
/*
* Icono dentro de un boton: va del color del texto y a su lado, sin
* chapa ni disco. En un boton lleno -el dorado, el rojo- cualquier
* fondo propio se lee como un parche pegado encima.
*/
.boton > .icono { opacity: 0.9; }
.boton:active { transform: translateY(1px); }
.boton--principal {
background: linear-gradient(180deg, var(--dorado-claro), var(--dorado));
border-color: var(--dorado-oscuro);
color: var(--tinta);
box-shadow: var(--sombra1);
}
.boton--principal:hover {
background: var(--dorado-claro);
color: var(--tinta);
box-shadow: var(--sombra2);
}
.boton--fantasma {
background: transparent;
border-color: var(--borde-fuerte);
color: var(--texto);
}
.boton--fantasma:hover {
background: var(--panel-alto);
color: var(--texto);
}
.boton--peligro {
background: var(--peligro-fuerte);
border-color: #8f2a1b;
color: #fff;
}
.boton--peligro:hover { background: #e04c33; color: #fff; }
.boton--alerta {
background: var(--peligro-fuerte);
border-color: #8f2a1b;
color: #fff;
animation: latido 2s ease-in-out infinite;
}
.boton--alerta:hover { background: #e04c33; color: #fff; }
.boton--pequeno { padding: 0.4rem 0.75rem; font-size: 0.74rem; }
.boton--grande { padding: 0.9rem 1.6rem; font-size: 1rem; width: 100%; }
.boton--bloque { width: 100%; }
.boton[disabled],
.boton.es-inactivo {
opacity: 0.4;
pointer-events: none;
box-shadow: none;
}
/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: var(--e4); }
.campo__etiqueta {
display: block;
margin-bottom: var(--e1);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--texto-tenue);
}
.campo__control {
width: 100%;
padding: 0.6rem 0.7rem;
background: var(--panel-hueco);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r2);
color: var(--texto);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo__control:focus {
outline: none;
border-color: var(--dorado);
box-shadow: 0 0 0 3px rgba(232, 178, 63, 0.22);
}
select.campo__control option { background: var(--fondo-alto); color: var(--texto); }
/*
* Campo de contraseña con el ojo adentro.
*
* El botón se apoya sobre el campo y el campo le deja lugar a la derecha
* con su propio relleno: así el texto escrito nunca pasa por debajo del
* icono, ni siquiera cuando la contraseña es larga.
*/
.campo__clave {
position: relative;
display: flex;
align-items: center;
}
.campo__control--clave { padding-right: 2.9rem; }
.campo__ojo {
position: absolute;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
/* Area de toque cómoda en el teléfono, sin agrandar el campo. */
width: 2.9rem;
height: 100%;
padding: 0;
background: none;
border: 0;
border-radius: var(--r2);
color: var(--texto-tenue);
cursor: pointer;
transition: color 0.15s ease;
}
.campo__ojo:hover { color: var(--dorado); }
.campo__ojo:focus-visible {
outline: 2px solid var(--dorado);
outline-offset: -2px;
color: var(--dorado);
}
/* Cuando la contraseña está a la vista, el ojo queda encendido. */
.campo__ojo[aria-pressed="true"] { color: var(--dorado); }
/*
* El area de texto. Solo se estira a lo alto: a lo ancho se saldria de la
* caja del campo y rompería la columna.
*/
textarea.campo__control {
min-height: 7rem;
line-height: 1.5;
resize: vertical;
}
input[type="range"].campo__control {
padding: 0;
height: 34px;
background: transparent;
border: 0;
accent-color: var(--dorado);
}
.campo__ayuda {
display: block;
margin-top: var(--e1);
font-size: 0.78rem;
color: var(--texto-tenue);
}
/* Entradas: el precio elegido, debajo de la barra que lo mueve. */
.precio-entrada__lectura {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--e1) var(--e3);
margin-top: var(--e1);
}
.precio-entrada__lectura .campo__salida { margin: 0; }
/*
* El panel del precio lleva de fondo una entrada de cancha. Un velo que
* se aclara hacia la derecha deja leer el titulo, el precio y la ayuda a
* la izquierda sin tapar el dibujo. En el telefono el panel es angosto:
* se encuadra el lado de los datos del asiento y el talon.
* El ?v= de la imagen se sube a mano si se cambia el archivo.
* Va como .panel.precio-entrada porque interfaz.css se carga despues y
* redefine el fondo de .panel: con un solo nombre la imagen no se veia.
*/
.panel.precio-entrada {
background:
linear-gradient(90deg, rgba(8, 30, 22, 0.88) 0%, rgba(8, 30, 22, 0.55) 45%, rgba(8, 30, 22, 0.15) 100%),
url("../images/estadio/entrada.webp?v=20260925") 72% center / cover no-repeat,
var(--panel);
}
@media (min-width: 768px) {
.panel.precio-entrada {
background-position: 0 0, center, 0 0;
}
}
/* El formulario de adentro no tapa la imagen: queda solo su borde. */
.precio-entrada__formulario {
margin-bottom: 0;
background: transparent;
box-shadow: none;
}
.campo__salida {
display: inline-block;
margin-top: var(--e1);
font-family: var(--mono);
font-weight: 700;
font-size: 1.1rem;
color: var(--dorado);
}
.formulario__acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e3);
margin-top: var(--e4);
}
/* Un boton solo dentro de un panel angosto queda mejor al medio. */
.formulario__acciones--centradas { justify-content: center; }
/* Dentro de un destacado -que acomoda en fila- ocupa su propio renglon. */
.destacado > .formulario__acciones--centradas {
flex-basis: 100%;
margin-top: 0;
}
/*
* La aclaracion que va debajo de un boton necesita aire: pegada al borde
* del boton se lee como si fuera parte de el.
*/
.formulario__acciones + .panel__nota,
.formulario__acciones + .bloque__nota {
margin-top: var(--e4);
}
.filtros {
display: grid;
gap: var(--e3);
grid-template-columns: 1fr;
}
.filtros .campo { margin-bottom: 0; }
.filtros__acciones { display: flex; gap: var(--e2); align-items: flex-end; }
/*
* Los botones del filtro miden lo que miden los campos.
*
* Son botones chicos -34px- al lado de campos de 42, y la fila los alinea
* por abajo: quedaban parejos en la base y ocho pixeles mas cortos arriba.
* Igualando el alto, el bloque de filtros se lee como una sola linea.
* Las dos medidas salen de interfaz.css, donde se afinan los controles.
*/
.filtros__acciones .boton { min-height: 42px; }
/*
* La respuesta que dio el otro club se lee entera: es el motivo de la
* negociacion, y cortada no dice nada. Es la unica celda de la tabla que
* parte el texto en varias lineas, asi que hay que devolverle el salto que
* `.tabla td` le saca a todas.
*/
.celda-detalle {
min-width: 24rem;
white-space: normal;
}
/* Aviso de que la tabla muestra solo una parte de lo que coincide. */
.tabla__recorte {
margin: var(--e2) 0 0;
font-size: 0.85rem;
color: var(--texto-suave);
text-align: center;
}
/* Rango numerico (media minima y maxima) en un solo campo. */
/* En el mercado el bloque cierra su seccion: el aire lo pone la seccion siguiente. */
.filtros--mercado { margin-bottom: 0; }
/* Los botones del mercado van centrados al pie en cualquier ancho. */
.filtros--mercado .filtros__acciones { justify-content: center; }
/*
* Filtro de una sola fecha (movimientos de caja): el desplegable ocupa todo
* el ancho libre y el boton va pegado a su derecha, en cualquier pantalla.
*/
.filtros--fecha { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/*
* Negociaciones: los dos desplegables toman todo el ancho del panel. La
* tabla de abajo es ancha, y filtros angostos apretados contra la izquierda
* se leian como un recorte de la pantalla. En movil el grid base ya los
* apila uno debajo del otro.
*
* Las dos clases juntas a proposito: mas abajo, en las pantallas anchas,
* `.filtros` reparte la fila en cinco columnas. Con un solo nombre de clase
* las dos reglas empatan en especificidad y gana la de abajo, asi que estos
* controles quedaban ocupando tres de esas cinco columnas.
*/
.filtros.filtros--negociaciones { align-items: end; }
@media (min-width: 640px) {
/*
* Los dos desplegables se reparten el ancho y el boton se queda con lo
* que mide su texto: filtrar es una accion corta y no necesita un tercio
* de la fila para decirlo.
*/
.filtros.filtros--negociaciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
.filtros__media { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtros__media legend { padding: 0; }
/*
* Buscador de leyendas: cuatro campos en dos filas.
*
* El del mercado comun reparte siete campos en tres columnas; aca hay cuatro
* -no hay club que elegir ni edad que acotar, porque las cincuenta entran
* entre los 18 y los 25- y en esa grilla quedaban huecos. Van de a dos, con
* los botones al pie.
*
* Lleva las tres clases a proposito: la especificidad tiene que ganarle a
* las areas de `.filtros--mercado`, que se redefinen en cada punto de quiebre.
*/
@media (min-width: 640px) {
.filtros.filtros--mercado.filtros--leyendas {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"buscar posicion"
"precio media"
"acciones acciones";
}
}
/*
* Prestamos: cinco campos -nombre, demarcacion, club, media y edad- sin
* tope de plata, porque el canon se negocia en la mesa y no al buscar.
*
* Arriba va el nombre, que es por donde se busca casi siempre, ocupando
* dos tercios; los tres filtros que acotan la lista van juntos debajo, y
* los botones cierran solos en su propia fila.
*
* Lleva las tres clases por lo mismo que leyendas: tiene que ganarle a las
* areas de `.filtros--mercado`, que se rehacen en cada punto de quiebre.
*/
@media (min-width: 640px) {
.filtros.filtros--mercado.filtros--prestamos {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"buscar buscar"
"posicion club"
"media edad"
"acciones acciones";
}
}
@media (min-width: 992px) {
.filtros.filtros--mercado.filtros--prestamos {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"buscar buscar posicion"
"club media edad"
"acciones acciones acciones";
}
}
.rango { display: flex; align-items: center; gap: var(--e2); }
.rango .campo__control { min-width: 0; flex: 1; text-align: center; }
.rango__separador { color: var(--texto-suave); flex: none; }
/* Indicador de guardado automatico */
.guardado {
display: inline-flex;
align-items: center;
gap: var(--e2);
margin: 0;
padding: 0.4rem 0.8rem;
border: 1px dashed var(--borde-fuerte);
border-radius: var(--r4);
font-size: 0.78rem;
color: var(--texto-tenue);
transition: color 0.2s ease, border-color 0.2s ease;
}
/* Sin mensaje no se dibuja nada: ni el recuadro ni el punto. */
.guardado:empty { display: none; }
.guardado::before {
content: "";
width: 8px;
height: 8px;
flex: none;
border-radius: 50%;
background: currentColor;
}
.guardado.es-guardando { color: var(--dorado); border-color: var(--dorado-oscuro); border-style: solid; }
.guardado.es-guardado { color: var(--exito); border-color: rgba(111, 216, 152, 0.6); border-style: solid; }
.guardado.es-error { color: var(--peligro); border-color: rgba(255, 138, 117, 0.7); border-style: solid; }
/* --- Chapas y etiquetas -------------------------------------------------- */
.chapa {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
padding: 0.1rem 0.4rem;
border-radius: var(--r1);
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 700;
color: var(--tinta);
background: var(--texto);
}
.chapa--media { background: var(--dorado); }
.chapa--ataque { background: #e0674a; color: #fff; }
.chapa--defensa { background: #4a86bd; color: #fff; }
/* La leyenda que todavia no ficho nadie: esta ahi para contratar. */
.chapa--libre { background: var(--exito); color: var(--tinta); }
/* Cuantas unidades de un bien escalable ya tiene el entrenador. */
.chapa--tuyo { background: var(--exito); color: var(--tinta); }
/* Una charla por ese jugador quedo a medias: el title dice en que quedo. */
.chapa--negociando {
margin-left: var(--e2);
background: rgba(232, 178, 63, 0.18);
border: 1px solid var(--dorado);
color: var(--dorado);
font-size: 0.62rem;
}
/*
* Efectos de una opcion tactica. Aca el color no dice ataque o defensa,
* dice a favor o en contra: la misma opcion suele traer las dos cosas.
*/
.chapa--favor {
background: rgba(111, 216, 152, 0.18);
border: 1px solid var(--exito);
color: var(--exito);
}
.chapa--contra {
background: rgba(255, 138, 117, 0.16);
border: 1px solid var(--peligro);
color: var(--peligro);
}
.pos-por { background: #f0c419; }
.pos-def { background: #4a86bd; color: #fff; }
.pos-med { background: #3fa96a; color: #fff; }
.pos-del { background: #e0674a; color: #fff; }
/*
* Los mismos colores de linea, pero como texto sobre el panel oscuro: los
* de la pizarra son fondos y como letra quedan apagados, asi que estos
* van un tono mas claros para leerse igual de bien. Se usan para pintar
* el nombre del jugador segun su demarcacion natural.
*/
.linea-por { color: #f0c419; }
.linea-def { color: #7db4e8; }
.linea-med { color: #5fd08c; }
.linea-del { color: #f4917a; }
.etiqueta {
display: inline-block;
padding: 0.05rem 0.4rem;
border-radius: var(--r1);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/*
* En la columna de jugador la etiqueta va pegada al nombre y se leia como
* si fuera parte del apellido. Se le da aire a los costados y un respiro
* arriba y abajo para cuando caen dos en la misma ficha.
*/
.celda-titular .etiqueta {
margin: 0.15rem 0 0.15rem 0.45rem;
padding: 0.15rem 0.45rem;
vertical-align: middle;
}
.etiqueta--titular { background: var(--cesped-claro); color: var(--tinta); }
.etiqueta--suspendido { background: var(--peligro-fuerte); color: #fff; }
.etiqueta--lesionado { background: var(--info); color: var(--tinta); }
.etiqueta--cedido { background: var(--dorado); color: var(--tinta); }
.etiqueta--transferible { background: var(--dorado-oscuro); color: var(--texto); }
.etiqueta--prestado { background: var(--info); color: var(--tinta); }
/* El contrato se termina con esta temporada: hay que renovar o se va libre. */
.etiqueta--vence { background: var(--peligro-fuerte); color: #fff; }
/* El pibe que subio de la reserva para ocupar el lugar de un retirado. */
.etiqueta--juvenil { background: var(--cesped-claro); color: var(--tinta); }
/*
* Hay clubes esperando respuesta por un transferible. Va en verde, el color
* de lo que esta a favor: no es un problema a resolver sino una puerta
* abierta, pero se cae si no se la atiende.
*/
.etiqueta--ofertas { background: var(--exito); color: var(--tinta); }
/* Un titulo en la hoja del entrenador. */
.etiqueta--titulo { background: var(--dorado); color: var(--tinta); margin: 0.1rem 0.2rem 0.1rem 0; }
/* --- Experiencia del entrenador ----------------------------------------- */
/*
* Misma disposicion que la caja personal: a la izquierda el nivel, con su
* barra y la escalera de escalones; a la derecha las fichas con icono.
*/
.experiencia-dt__cuerpo {
display: grid;
gap: var(--e4);
grid-template-columns: 1fr;
}
.experiencia-dt__nivel {
padding: var(--e4);
background: linear-gradient(135deg, rgba(111, 216, 152, 0.14), rgba(0, 0, 0, 0.18));
border: 1px solid rgba(111, 216, 152, 0.35);
border-radius: var(--r2);
}
.experiencia-dt__nombre {
margin: var(--e1) 0 0;
font-size: 1.8rem;
font-weight: 800;
line-height: 1.1;
color: var(--exito);
}
.experiencia-dt__puntos {
margin: var(--e1) 0 var(--e3);
font-size: 0.85rem;
color: var(--texto-suave);
}
.experiencia-dt__puntos strong {
font-family: var(--mono);
font-size: 1.1rem;
color: var(--dorado);
}
.composicion--simple { display: flex; }
/*
* La escalera de niveles: los subidos, el actual y los que faltan. En movil
* es una lista vertical (punto, nombre y puntos en una fila); en pantallas
* anchas se acuesta y cada escalon ocupa una columna.
*/
.escalones {
display: grid;
grid-template-columns: 1fr;
gap: var(--e1);
margin: var(--e3) 0 0;
padding: 0;
list-style: none;
}
.escalones__paso {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto;
align-items: center;
gap: var(--e2);
min-width: 0;
color: var(--texto-tenue);
}
.escalones__punto {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--borde-fuerte);
background: transparent;
}
.escalones__nombre {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.escalones__minimo {
font-family: var(--mono);
font-size: 0.7rem;
}
.escalones__paso.es-subido { color: var(--texto-suave); }
.escalones__paso.es-subido .escalones__punto { background: var(--exito); border-color: var(--exito); }
.escalones__paso.es-actual { color: var(--dorado-claro); }
.escalones__paso.es-actual .escalones__punto {
background: var(--dorado);
border-color: var(--dorado);
box-shadow: 0 0 0 3px rgba(232, 178, 63, 0.3);
}
/* Acostada solo cuando el panel es ancho de verdad; si no, se aprieta. */
@media (min-width: 992px) {
.escalones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.escalones__paso {
grid-template-columns: 1fr;
justify-items: center;
gap: var(--e1);
text-align: center;
}
.escalones__nombre { font-size: 0.7rem; white-space: normal; }
}
.experiencia-dt__ayuda {
margin: var(--e3) 0 0;
color: var(--texto-tenue);
font-size: 0.78rem;
}
.ficha-caja__icono--partidos { background: var(--cesped-claro); color: #fff; }
.ficha-caja__icono--temporadas { background: var(--exito); }
.ficha-caja__icono--titulos { background: var(--dorado); }
@media (min-width: 768px) {
.experiencia-dt__cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
.escalones__nombre { font-size: 0.76rem; }
}
.experiencia-dt .panel__subtitulo { margin-top: var(--e4); }
/*
* Indices de 0 a 100 (forma, moral): el numero manda y el color lo ubica
* de un vistazo, sin necesidad de dibujar una barra.
*/
.indice {
display: inline-block;
min-width: 2.4em;
padding: 0.05rem 0.35rem;
font-family: var(--mono);
font-size: 0.82rem;
font-weight: 700;
text-align: center;
border-radius: var(--r1);
border: 1px solid transparent;
}
.indice--alto { color: var(--exito); background: rgba(111, 216, 152, 0.14); border-color: rgba(111, 216, 152, 0.35); }
.indice--medio { color: var(--dorado); background: rgba(232, 178, 63, 0.14); border-color: rgba(232, 178, 63, 0.32); }
.indice--bajo { color: var(--aviso); background: rgba(239, 185, 90, 0.1); border-color: rgba(239, 185, 90, 0.28); }
.indice--critico { color: var(--peligro); background: rgba(255, 138, 117, 0.12); border-color: rgba(255, 138, 117, 0.3); }
/* La chapa de interzonal se saca del flujo para no romper la grilla del cruce. */
.etiqueta--interzonal {
position: absolute;
top: 1px;
right: 4px;
background: var(--info);
color: var(--tinta);
font-size: 0.56rem;
}
/* Carton de amonestacion o expulsion */
.carton {
display: inline-block;
width: 9px;
height: 13px;
flex: none;
border-radius: 1px;
border: 1px solid rgba(0, 0, 0, 0.55);
vertical-align: -1px;
}
.carton--amarilla { background: #f0c419; }
.carton--roja { background: #d0342a; }
/*
* Estado del jugador: amarillas, rojas, suspension y lesion dibujados
* como cartones chicos con el numero adentro. Se usan en la pizarra, en
* el banco y en la lista de bajas, siempre con el mismo codigo de color.
*/
.estado-jugador {
display: inline-flex;
align-items: center;
gap: 2px;
flex: none;
}
/*
* Sin nada que contar se esconde, para no dejar un hueco al lado de la
* ficha. En la lista del plantel no: ahi es una columna de la tabla y si
* desapareciera, todo lo que viene despues se correria un lugar y dejaria
* de caer bajo su titulo.
*/
.estado-jugador:empty { display: none; }
.jugador-fila .estado-jugador:empty { display: inline-flex; }
.estado-jugador__marca {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 11px;
height: 15px;
padding: 0 2px;
border: 1px solid rgba(0, 0, 0, 0.55);
border-radius: 2px;
font-size: 0.58rem;
font-weight: 700;
line-height: 1;
cursor: help;
}
.estado-jugador__marca--amarilla { background: #f0c419; color: #3a2c00; }
/* Al borde de la suspension: una amarilla mas y se pierde la fecha. */
.estado-jugador__marca--amarilla.es-al-borde {
box-shadow: 0 0 0 2px rgba(240, 196, 25, 0.45);
}
.estado-jugador__marca--roja { background: #d0342a; color: #fff; }
/* La sancion es la roja ya cumpliendose: mismo color, marco claro. */
.estado-jugador__marca--suspension {
background: var(--peligro-fuerte);
color: #fff;
border-color: rgba(242, 234, 216, 0.8);
}
/*
* Lesion: la cruz roja de la enfermeria sobre su chapa blanca, con las
* fechas que faltan impresas en el centro. La cruz son dos barras de
* fondo cruzadas -no una imagen- asi el numero siempre queda encima y no
* hace falta pelear con el orden de pintado. Las paletas son finas, pero
* no menos: el brazo tiene que ser mas alto que el digito, o el numero se
* saldria del rojo al blanco y no se leeria. Una lesion nunca pasa de 6
* fechas, asi que siempre es un solo digito.
*/
.estado-jugador__marca--lesion {
width: 20px;
min-width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: #fff;
background-image:
linear-gradient(#d0342a, #d0342a),
linear-gradient(#d0342a, #d0342a);
background-size: 42% 84%, 84% 42%;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 0.58rem;
font-weight: 800;
}
/*
* Sin cartones, sancion ni lesion. Es la unica marca que no avisa nada:
* va apagada, para que la columna tenga siempre un valor sin robarle la
* atencion a los que si tienen algo que contar.
*/
.estado-jugador__marca--limpio {
background: transparent;
border-color: var(--borde);
color: var(--texto-tenue);
cursor: help;
}
/* Lista de bajas del aviso de la alineacion. */
.bajas {
display: flex;
flex-direction: column;
gap: var(--e1);
margin: var(--e2) 0;
padding: 0;
list-style: none;
}
.bajas__item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--e2);
font-size: 0.84rem;
}
.bajas__nombre { font-weight: 700; }
.bajas__motivo { color: var(--texto-suave); }
.estrella { color: rgba(242, 234, 216, 0.25); font-size: 1.05rem; }
.estrella.es-activa { color: var(--dorado); }
/*
* La foto del bien en el listado del entrenador: la misma imagen del
* catalogo, en miniatura, para reconocerlo sin leer el nombre.
*
* Sin flex en la celda, como avisa la nota de .celda-equipo: en un
el
* flex rompe la fila. La foto y el nombre se alinean por inline-block.
*/
.celda-bien > * {
vertical-align: middle;
}
.celda-bien__foto {
display: inline-block;
width: 64px;
height: 48px;
margin-right: var(--e2);
object-fit: cover;
border-radius: var(--r1);
background: var(--panel-hueco);
}
.celda-bien__foto--vacia {
display: inline-block;
border: 1px dashed var(--borde);
}
.es-positivo { color: var(--exito); }
.es-negativo { color: var(--peligro); }
/* --- Escudos ------------------------------------------------------------- */
.escudo {
display: inline-block;
width: 22px;
height: 24px;
flex: none;
border: 1px solid rgba(0, 0, 0, 0.45);
border-radius: 3px 3px 9px 9px;
background: linear-gradient(
135deg,
var(--club-color-1, #cccccc) 0 50%,
var(--club-color-2, #666666) 50% 100%
);
vertical-align: middle;
}
.escudo--sm { width: 18px; height: 20px; }
.escudo--md { width: 26px; height: 28px; }
.escudo--lg { width: 40px; height: 44px; }
.escudo--imagen {
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.escudo--imagen.escudo--sm { max-width: 20px; max-height: 20px; }
.escudo--imagen.escudo--md { max-width: 30px; max-height: 30px; }
.escudo--imagen.escudo--lg { max-width: 52px; max-height: 52px; }
/* --- Barras de nivel ----------------------------------------------------- */
.barra {
display: inline-block;
width: 88px;
height: 8px;
background: rgba(0, 0, 0, 0.42);
border-radius: 4px;
overflow: hidden;
vertical-align: middle;
}
.barra--mini { width: 54px; height: 7px; }
.barra__relleno {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--cesped-claro), var(--dorado));
}
.barra__relleno--0 { width: 0; }
.barra__relleno--10 { width: 10%; }
.barra__relleno--20 { width: 20%; }
.barra__relleno--30 { width: 30%; }
.barra__relleno--40 { width: 40%; }
.barra__relleno--50 { width: 50%; }
.barra__relleno--60 { width: 60%; }
.barra__relleno--70 { width: 70%; }
.barra__relleno--80 { width: 80%; }
.barra__relleno--90 { width: 90%; }
.barra__relleno--100 { width: 100%; }
/*
* El estatus del entrenador: lo que pesa su nombre puertas afuera. La
* chapa se enciende mas cuanto mas alto es el escalon, de gris apagado a
* dorado encendido, para que se vea de un golpe donde esta parado.
*/
.estatus {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--e2) var(--e3);
margin: 0 0 var(--e3);
}
.estatus__chapa {
padding: 0.2rem 0.6rem;
border-radius: var(--r1);
font-family: var(--mono);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tinta);
background: var(--texto-suave);
}
.estatus__chapa--n1 { background: #8aa79a; }
.estatus__chapa--n2 { background: var(--cesped-claro); }
.estatus__chapa--n3 { background: #d8b45f; }
.estatus__chapa--n4 { background: var(--dorado); }
.estatus__chapa--n5 { background: var(--dorado); box-shadow: 0 0 0 2px rgba(232, 178, 63, 0.35); }
/* La barra del estatus cruza el panel: no es una chapita al lado de un dato. */
.estatus__barra { width: 100%; height: 10px; }
/* --- Tablas -------------------------------------------------------------- */
.tabla-envoltorio {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r3);
}
.tabla {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.86rem;
min-width: 560px;
}
.tabla th,
.tabla td {
padding: 0.55rem 0.7rem;
text-align: left;
border-bottom: 1px solid var(--borde);
white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--panel-alto);
color: var(--dorado);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 2px solid var(--borde-fuerte);
}
.tabla--ordenable thead th[data-orden] {
cursor: pointer;
user-select: none;
}
.tabla--ordenable thead th[data-orden]:hover { color: var(--dorado-claro); }
/*
* La flecha de ordenar, en reposo.
*
* Antes era una flecha de doble punta. Ese signo no esta en la tipografia
* del sitio, asi que cada navegador lo sacaba de donde podia y salia de
* otro tamaño y otro grosor que los triangulos de las columnas ya
* ordenadas. Usando el mismo triangulo apagado, las tres flechas son el
* mismo dibujo: la de la columna activa se enciende, las otras esperan.
*/
.tabla--ordenable thead th[data-orden]::after {
content: "▼";
margin-left: var(--e1);
opacity: 0.28;
font-size: 0.72rem;
}
.tabla--ordenable thead th[aria-sort="ascending"]::after { content: "▲"; opacity: 1; }
.tabla--ordenable thead th[aria-sort="descending"]::after { content: "▼"; opacity: 1; }
/*
* Todas las filas del mismo color: lo que separa un registro del otro es
* la linea de abajo, no un fondo alternado. El rayado se notaba de mas en
* cuanto las filas dejaban de estar pegadas -las tarjetas de movil- y
* hacia pensar que una fila estaba seleccionada.
*/
.tabla tbody tr { transition: background-color 0.12s ease; }
.tabla tbody tr:hover { background: rgba(232, 178, 63, 0.1); }
.tabla tbody tr.es-propio {
background: rgba(232, 178, 63, 0.16);
font-weight: 600;
}
.tabla tbody tr.es-titular { box-shadow: inset 3px 0 0 var(--cesped-claro); }
.tabla tbody tr.es-lesionado {
box-shadow: inset 3px 0 0 var(--info);
background: rgba(106, 169, 221, 0.1);
}
.tabla tbody tr.es-suspendido {
box-shadow: inset 3px 0 0 var(--peligro-fuerte);
background: rgba(201, 61, 40, 0.1);
}
.tabla tbody tr.es-cedido {
box-shadow: inset 3px 0 0 var(--dorado);
background: rgba(232, 178, 63, 0.07);
color: var(--texto-suave);
}
.tabla tbody tr.es-inalcanzable { opacity: 0.5; }
/*
* Ojo: no se puede poner display:flex en un
. Al hacerlo la celda deja
* de ser table-cell, el navegador la envuelve en una celda anonima y la fila
* se desalinea: el borde inferior se corta a la mitad de la tabla. Se alinea
* el escudo con el nombre por inline-block, sin tocar el layout de tabla.
*/
.celda-equipo > * {
vertical-align: middle;
}
.celda-equipo .escudo {
margin-right: var(--e2);
}
.celda-vacia {
padding: var(--e6) var(--e4);
text-align: center;
font-style: italic;
color: var(--texto-tenue);
}
/*
* Tampoco flex aca, por lo mismo: los botones se alinean sueltos y la fila
* conserva su alto. En movil la tabla se vuelve tarjetas y ahi si la celda
* pasa a ser flex, que es cuando ya no hay tabla que romper.
*/
.celda-acciones {
white-space: nowrap;
}
.celda-acciones > * {
display: inline-block;
vertical-align: middle;
}
.celda-acciones > * + * {
margin-left: var(--e1);
}
/* Aclaracion chica debajo de una cifra: las fechas que dura una cesion. */
.celda-nota {
display: block;
font-size: 0.75rem;
color: var(--texto-tenue);
}
/*
* Acciones siempre a la vista. En tablas anchas (la plantilla tiene mas de
* veinte columnas) los botones quedaban fuera de pantalla y habia que
* desplazar toda la tabla para renovar o vender. La ultima columna se pega
* al borde derecho del envoltorio y el resto corre por debajo.
*
* La fila pinta su fondo con tintes semitransparentes; una celda pegada
* necesita fondo propio y opaco para tapar lo que pasa por debajo, asi que
* lleva el color del panel y encima el mismo tinte de la fila como imagen.
* La sombra a la izquierda marca que la tabla sigue debajo.
*/
@media (min-width: 768px) {
.tabla--acciones-fijas thead th:last-child,
.tabla--acciones-fijas tbody .celda-acciones {
position: sticky;
right: 0;
background-color: var(--panel);
box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.6);
}
.tabla--acciones-fijas thead th:last-child {
z-index: 3;
background-color: var(--panel-alto);
}
.tabla--acciones-fijas tbody .celda-acciones { z-index: 1; }
.tabla--acciones-fijas tbody tr:hover .celda-acciones {
background-image: linear-gradient(rgba(232, 178, 63, 0.1), rgba(232, 178, 63, 0.1));
}
.tabla--acciones-fijas tbody tr.es-lesionado .celda-acciones {
background-image: linear-gradient(rgba(106, 169, 221, 0.1), rgba(106, 169, 221, 0.1));
}
.tabla--acciones-fijas tbody tr.es-suspendido .celda-acciones {
background-image: linear-gradient(rgba(201, 61, 40, 0.1), rgba(201, 61, 40, 0.1));
}
.tabla--acciones-fijas tbody tr.es-cedido .celda-acciones {
background-image: linear-gradient(rgba(232, 178, 63, 0.07), rgba(232, 178, 63, 0.07));
}
}
.columna-racha { min-width: 124px; }
.racha {
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
margin-right: 2px;
border-radius: var(--r1);
font-size: 0.68rem;
font-weight: 800;
}
.racha--g { background: var(--exito); color: var(--tinta); }
.racha--e { background: var(--dorado); color: var(--tinta); }
.racha--p { background: var(--peligro-fuerte); color: #fff; }
.nota-tabla {
margin-top: var(--e3);
font-size: 0.8rem;
color: var(--texto-tenue);
}
/* En movil, las tablas anchas se leen como tarjetas apiladas. */
@media (max-width: 767.98px) {
.tabla--tarjetas {
display: block;
min-width: 0;
font-size: 0.9rem;
}
.tabla--tarjetas thead { display: none; }
.tabla--tarjetas tbody { display: block; }
.tabla--tarjetas tr {
display: block;
padding: var(--e3);
border-bottom: 1px solid var(--borde);
}
.tabla--tarjetas tr:last-child { border-bottom: 0; }
.tabla--tarjetas td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
padding: 0.2rem 0;
border: 0;
white-space: normal;
}
.tabla--tarjetas td::before {
content: attr(data-etiqueta);
flex: none;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--texto-tenue);
}
.tabla--tarjetas td[data-etiqueta=""]::before { content: none; }
.tabla--tarjetas .celda-titular {
margin-bottom: var(--e2);
padding-bottom: var(--e2);
border-bottom: 1px dashed var(--borde);
font-size: 1rem;
font-weight: 800;
justify-content: flex-start;
gap: var(--e2);
}
.tabla--tarjetas .celda-acciones {
justify-content: stretch;
margin-top: var(--e3);
}
.tabla--tarjetas .celda-acciones form { flex: 1; }
.tabla--tarjetas .celda-acciones .boton { width: 100%; }
.tabla--tarjetas .celda-equipo { justify-content: space-between; }
/*
* Mercado de pases: la tarjeta en grilla, no en renglones. Solo para las
* tablas que ya son tarjetas: `tabla--compacta` sola es letra chica.
*
* Apilada, cada jugador se comia una pantalla entera para decir siete
* cosas cortas. Aca los datos van en tres columnas, con la etiqueta
* arriba y el valor debajo, y solo el nombre, el club y el boton toman
* el ancho completo. Se ven tres o cuatro fichas de una.
*/
.tabla--tarjetas.tabla--compacta tr {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--e2) var(--e3);
padding: var(--e3);
/* Un respiro entre fichas: la linea divisoria sigue siendo la de la tabla. */
margin-bottom: var(--e2);
}
.tabla--tarjetas.tabla--compacta tr:last-child { margin-bottom: 0; }
.tabla--tarjetas.tabla--compacta td {
display: block;
padding: 0;
font-size: 0.86rem;
line-height: 1.25;
}
.tabla--tarjetas.tabla--compacta td::before {
display: block;
margin-bottom: 0.05rem;
font-size: 0.58rem;
letter-spacing: 0.07em;
}
/*
* El nombre y el precio comparten el primer renglon: quien es y cuanto
* sale, que es con lo que se decide si vale la pena seguir leyendo. Van
* puestos a mano en la grilla porque en el HTML el precio viene ultimo.
*/
.tabla--tarjetas.tabla--compacta .celda-titular {
grid-row: 1;
grid-column: 1 / 3;
margin-bottom: 0;
padding-bottom: var(--e2);
font-size: 0.98rem;
}
.tabla--tarjetas.tabla--compacta .celda-equipo {
grid-column: span 2;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--e2);
}
/* El club ya se reconoce por el escudo y el nombre. */
.tabla--tarjetas.tabla--compacta .celda-equipo::before { content: none; }
/*
* Plantilla: en el telefono la ficha se queda con lo que se mira para
* decidir. Las nueve facetas, el dorsal, la forma y la moral se leen en
* la tabla de escritorio o en Alineacion; aca solo estorbaban.
*/
.tabla--tarjetas.tabla--compacta .celda-faceta,
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Dorsal"],
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Forma"],
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Moral"] {
display: none;
}
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Precio"],
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Total"],
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Valor"] {
grid-row: 1;
grid-column: 3;
padding-bottom: var(--e2);
border-bottom: 1px dashed var(--borde);
font-size: 0.98rem;
font-weight: 700;
text-align: right;
color: var(--dorado);
}
/* Sin etiqueta: al lado del nombre, la cifra se entiende sola. */
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Precio"]::before,
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Total"]::before,
.tabla--tarjetas.tabla--compacta td[data-etiqueta="Valor"]::before { content: none; }
/*
* Los botones en una sola linea repartida. En plantilla son tres
* -renovar, ceder, vender- y apilados a lo ancho hacian mas alta la
* ficha que los datos que la acompanan.
*/
.tabla--tarjetas.tabla--compacta .celda-acciones {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-top: var(--e1);
}
.tabla--tarjetas.tabla--compacta .celda-acciones form { flex: 1 1 100%; }
.tabla--tarjetas.tabla--compacta .celda-acciones > .boton { flex: 1 1 6rem; width: auto; }
.tabla--tarjetas.tabla--compacta .celda-acciones .boton { padding-block: 0.45rem; }
.tabla--tarjetas.tabla--compacta .celda-vacia { grid-column: 1 / -1; }
/*
* Plantilla, ficha corta. Con ocho datos, tres renglones de cifras y
* los tres botones, cada jugador ocupaba media pantalla. Se guardan las
* amarillas y las rojas -la suspension ya se marca junto al nombre-,
* quedan seis datos en dos renglones y se ajustan relleno, separaciones
* y botones. Entran dos fichas y media por pantalla en vez de una y media.
*/
.tabla--tarjetas.tabla--plantilla tr {
gap: var(--e1) var(--e2);
padding: var(--e2) var(--e3);
/*
* Cada ficha es una caja aparte: con el mismo fondo que el
* envoltorio el margen no se veia y parecian pegadas.
*/
margin: var(--e2);
border: 1px solid var(--borde);
border-radius: var(--r2);
background: var(--panel-alto);
}
.tabla--tarjetas.tabla--plantilla tr:last-child {
margin-bottom: var(--e2);
border-bottom: 1px solid var(--borde);
}
.tabla--tarjetas.tabla--plantilla td[data-etiqueta="Amarillas"],
.tabla--tarjetas.tabla--plantilla td[data-etiqueta="Rojas"] { display: none; }
.tabla--tarjetas.tabla--plantilla .celda-titular,
.tabla--tarjetas.tabla--plantilla td[data-etiqueta="Valor"] {
padding-bottom: var(--e1);
font-size: 0.94rem;
}
/*
* En la ficha del telefono las etiquetas -transferible, las ofertas,
* titular, vence- van todas en su renglon, debajo del nombre. Pegadas
* a el entraba una sola y las demas bajaban sueltas, asi que el nombre
* quedaba con una etiqueta al lado y el resto desparramado.
*
* La celda aca es un bloque y no un flex -lo pone `tabla--compacta`-,
* asi que alcanza con que el nombre se lleve su linea entera.
*/
.tabla--tarjetas.tabla--plantilla .celda-titular__nombre {
display: block;
margin-bottom: var(--e1);
}
.tabla--tarjetas.tabla--plantilla td { font-size: 0.82rem; line-height: 1.2; }
.tabla--tarjetas.tabla--plantilla td::before { margin-bottom: 0; }
.tabla--tarjetas.tabla--plantilla .celda-acciones { margin-top: 0; }
.tabla--tarjetas.tabla--plantilla .celda-acciones .boton {
padding-block: 0.3rem;
font-size: 0.72rem;
}
/*
* Dorsales: un renglon por jugador, no una tarjeta.
*
* Apilada, cada jugador ocupaba media pantalla para decir seis cosas.
* Repartir dorsales se hace mirando dos: que numero tiene puesto y
* quien es. La demarcacion, la edad y la media se leen en Plantilla,
* asi que en este ancho se guardan -`celda-extra`- y el renglon queda
* en dorsal, nombre y el campo para cambiarlo.
*/
/*
* Apilada no hay nada que correr de lado, y ese scroll de reserva
* dibujaba igual su barra: una linea clara cruzando el pie de la lista.
*/
.dorsales .tabla-envoltorio { overflow-x: hidden; }
.dorsales .tabla--tarjetas tr {
display: grid;
/* La primera tiene que dar para dos digitos y para su titulo. */
grid-template-columns: 2.8rem minmax(0, 1fr) 5rem;
align-items: center;
gap: var(--e2);
padding: var(--e2) var(--e3);
}
.dorsales .tabla--tarjetas td {
display: block;
padding: 0;
}
/* Sin cabecera arriba no hacen falta rotulos: se entiende por su lugar. */
.dorsales .tabla--tarjetas td::before { content: none; }
.dorsales .tabla--tarjetas .celda-extra { display: none; }
/*
* La cabecera se queda: dice que es cada columna y es donde se toca
* para ordenar. Va sobre la misma grilla de tres que las filas, asi que
* cada titulo cae sobre lo suyo.
*/
.dorsales .tabla--tarjetas thead { display: block; }
.dorsales .tabla--tarjetas th {
display: block;
/* El fondo pasa a la fila, asi que el titulo ya no se pega solo. */
position: static;
/*
* Y lo pinta solo ella: si cada titulo trae el suyo, la separacion
* entre columnas queda como una ranura mas oscura entre bloques
* claros. En la tabla de escritorio no se nota porque las celdas
* van pegadas.
*/
background: transparent;
/*
* Y su trazo inferior tampoco: la cabecera de tabla lo lleva
* dibujado adentro de cada celda -un `box-shadow` interior, no un
* borde-, asi que apilada salia un tramo suelto debajo de cada
* titulo. La linea que separa la cabecera la pone la fila, entera.
*/
box-shadow: none;
padding: 0;
border-bottom: 0;
/* Ningun titulo se derrama sobre la columna de al lado. */
overflow: hidden;
white-space: nowrap;
}
/* El dorsal y el campo van centrados; el titulo, encima de ellos. */
.dorsales .tabla--tarjetas th:first-child,
.dorsales .tabla--tarjetas th:last-child {
text-align: center;
}
/*
* Con el nombre de la clase solo no alcanza: la regla que apaga el
* titulo corto vive mas abajo en la hoja y, a igual peso, gana la
* ultima. Nombrando tambien al formulario, esta pesa mas y manda.
*/
.dorsales .dorsales__largo { display: none; }
.dorsales .dorsales__corto { display: inline; }
.dorsales .tabla--tarjetas thead tr {
/*
* La misma linea fina que separa un jugador del otro. La gruesa de
* `--borde-fuerte` -blanco calido al 26%- que lleva la cabecera en
* escritorio, aca corta la pantalla al medio: la franja es angosta
* y el trazo queda blanco sobre el verde. El fondo mas claro ya
* alcanza para despegar la cabecera de la lista.
*/
border-bottom: 1px solid var(--borde);
background: var(--panel-alto);
}
.dorsales .tabla--tarjetas .celda-titular {
margin: 0;
padding: 0;
border: 0;
font-size: 0.92rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dorsales .campo__control--dorsal { width: 100%; }
}
/* Zonas de la clasificacion */
.puesto {
display: inline-flex;
align-items: center;
gap: var(--e2);
}
.zona {
display: inline-block;
width: 4px;
height: 22px;
border-radius: 2px;
vertical-align: middle;
background: transparent;
}
.zona--libertadores { background: var(--cesped-claro); }
.zona--sudamericana { background: var(--info); }
.leyenda {
display: flex;
flex-wrap: wrap;
gap: var(--e3) var(--e4);
margin: 0 0 var(--e4);
padding: var(--e2) var(--e3);
list-style: none;
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r2);
font-size: 0.76rem;
color: var(--texto-suave);
}
.leyenda__item {
display: inline-flex;
align-items: center;
gap: var(--e2);
}
/* --- Listas -------------------------------------------------------------- */
/*
* El desglose de ataque y defensa. Ahora vive en la columna angosta de
* Tacticas, asi que las dos listas se acomodan solas: una debajo de la
* otra cuando no hay lugar y lado a lado en cuanto la caja lo permite.
*/
.panel--resumen {
display: grid;
gap: 0 var(--e5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.panel--resumen .panel__titulo { grid-column: 1 / -1; }
/* En una columna la primera lista necesita aire; en dos, no sobra nada. */
.panel--resumen .desglose:last-child { margin-bottom: 0; }
.desglose { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.desglose li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e2) var(--e3);
flex-wrap: wrap;
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
font-size: 0.84rem;
}
/* El rotulo cede primero: la cifra nunca se parte ni se va del panel. */
.desglose li > span { min-width: 0; }
.desglose li > strong { flex: none; font-family: var(--mono); }
.desglose li:last-child { border-bottom: 0; }
/*
* Grafico de barras de ingresos y gastos por fecha (caja del club).
*
* Una columna por fecha con dos barras pegadas: ingresos en verde y gastos
* en rojo, los mismos colores con que el sitio pinta las cifras. Al haber
* dos series, la leyenda de arriba las nombra. El alto sale del atributo
* height del rect (porcentaje del mayor importe entre las dos series), la
* cifra va arriba en tinta de texto y el nombre de la fecha abajo. El
* segundo rect tapa el redondeo de la base: solo se redondea la punta.
*/
.grafico { margin: 0; }
.grafico__titulo {
margin: 0 0 var(--e2);
font-size: 0.8rem;
color: var(--texto-suave);
}
.grafico__leyenda {
list-style: none;
margin: 0 0 var(--e3);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--e2) var(--e4);
font-size: 0.78rem;
color: var(--texto-suave);
}
.grafico__clave {
display: inline-flex;
align-items: center;
gap: 6px;
}
.grafico__clave::before {
content: "";
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--texto-tenue);
}
.grafico__clave--ingresos::before { background: var(--exito); }
.grafico__clave--gastos::before { background: var(--peligro); }
.grafico__columnas {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 6px;
align-items: end;
}
.grafico__columna {
display: grid;
grid-template-rows: 160px auto;
justify-items: center;
gap: 4px;
min-width: 0;
}
/* Las dos barras de una fecha, lado a lado y apoyadas en la misma base. */
.grafico__par {
display: flex;
align-items: end;
justify-content: center;
gap: 2px;
width: 100%;
height: 100%;
}
.grafico__serie {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1 1 0;
min-width: 0;
max-width: 40px;
height: 100%;
}
.grafico__barra {
display: block;
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
.grafico__serie--ingresos .grafico__relleno { fill: var(--exito); }
.grafico__serie--gastos .grafico__relleno { fill: var(--peligro); }
.grafico__serie--ingresos:hover .grafico__relleno { fill: var(--cesped-claro); }
.grafico__serie--gastos:hover .grafico__relleno { fill: var(--peligro-fuerte); }
.grafico__valor,
.grafico__rotulo {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.7rem;
}
/* En pantallas chicas las barras son angostas: la cifra queda en el tooltip y aparece en escritorio. */
.grafico__valor { display: none; font-family: var(--mono); color: var(--texto); }
.grafico__rotulo { color: var(--texto-suave); }
.desglose__total {
margin-top: var(--e1);
padding-top: var(--e3);
border-top: 2px solid var(--borde-fuerte);
font-weight: 800;
font-size: 0.95rem;
}
.desglose__total strong { color: var(--dorado); font-size: 1.05rem; }
.datos { margin: 0; }
.datos__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
}
.datos__fila:last-child { border-bottom: 0; }
.datos__fila dt { font-size: 0.84rem; color: var(--texto-suave); }
.datos__fila dd { margin: 0; font-weight: 700; text-align: right; }
.noticias { list-style: none; margin: 0; padding: 0; }
.noticias li {
display: flex;
gap: var(--e3);
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
font-size: 0.88rem;
}
.noticias li:last-child { border-bottom: 0; }
.noticias__jornada {
flex: none;
font-family: var(--mono);
font-weight: 700;
color: var(--dorado);
}
.historial { list-style: none; margin: 0; padding: 0; }
.historial__item {
display: flex;
align-items: flex-start;
gap: var(--e3);
padding: var(--e3) 0;
border-bottom: 1px dashed var(--borde);
}
.historial__item:last-child { border-bottom: 0; }
.historial__jornada { flex: none; font-family: var(--mono); font-weight: 700; color: var(--dorado); }
.historial__cuerpo { display: flex; flex-direction: column; flex: 1; font-size: 0.86rem; }
.historial__eleccion { color: var(--dorado); }
.historial__desenlace { color: var(--texto-suave); }
.historial__importe { flex: none; font-family: var(--mono); font-weight: 700; }
/* =========================================================================
5. Pantallas
========================================================================= */
/* --- Escritorio: cabecera del proximo partido ---------------------------- */
.cabecera-partido {
position: relative;
container-type: inline-size;
overflow: hidden;
padding: var(--e5) var(--e4);
margin-bottom: var(--e4);
text-align: center;
background:
radial-gradient(ellipse at 50% 0%, rgba(31, 122, 77, 0.5) 0%, transparent 65%),
var(--panel);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r3);
box-shadow: var(--sombra2);
}
.cabecera-partido::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, var(--cesped-claro), var(--dorado), var(--cesped-claro));
}
.cabecera-partido__jornada {
margin: 0 0 var(--e4);
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--dorado);
}
.cabecera-partido__cruce {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e3);
margin-bottom: var(--e4);
}
.cabecera-partido__lado {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e1);
padding: var(--e3) var(--e2);
border: 1px solid transparent;
border-radius: var(--r2);
}
.cabecera-partido__lado.es-propio {
background: rgba(232, 178, 63, 0.12);
border-color: rgba(232, 178, 63, 0.4);
}
.cabecera-partido__nombre {
font-size: 0.92rem;
font-weight: 800;
line-height: 1.2;
}
.cabecera-partido__vs {
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 800;
color: var(--texto-tenue);
padding: var(--e1) var(--e2);
border: 1px solid var(--borde);
border-radius: var(--r4);
}
/*
* El informe del ojeador va en un solo renglon: la frase mas larga ronda los
* ochenta caracteres, asi que el cuerpo se ajusta al ancho de la tarjeta en
* vez de cortar el texto en dos lineas.
*/
.cabecera-partido__resumen {
max-width: 100%;
margin: 0 auto var(--e4);
font-size: clamp(0.66rem, 2.3cqi, 0.9rem);
white-space: nowrap;
color: var(--texto-suave);
}
/* En pantallas muy angostas el renglon unico quedaria ilegible: ahi se parte. */
@media (max-width: 26rem) {
.cabecera-partido__resumen {
font-size: 0.8rem;
white-space: normal;
}
}
.cabecera-partido__cierre {
max-width: 56ch;
margin: 0 auto var(--e4);
color: var(--texto-suave);
}
.cabecera-partido__atajos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--e4);
margin: var(--e4) 0 0;
font-size: 0.82rem;
}
/* --- Highlights del partido ---------------------------------------------- */
.vivo {
padding: var(--e5) var(--e4);
margin-bottom: var(--e4);
background:
radial-gradient(ellipse at 50% 0%, rgba(31, 122, 77, 0.45) 0%, transparent 65%),
var(--panel);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r3);
}
.vivo__marcador {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e3);
margin-bottom: var(--e4);
}
.vivo__equipo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e1);
padding: var(--e2);
border: 1px solid transparent;
border-radius: var(--r2);
text-align: center;
}
.vivo__equipo.es-propio {
background: rgba(232, 178, 63, 0.12);
border-color: rgba(232, 178, 63, 0.4);
}
.vivo__nombre { font-size: 0.9rem; font-weight: 800; }
.vivo__cifras {
display: flex;
align-items: center;
gap: var(--e2);
padding: var(--e2) var(--e4);
background: var(--fondo);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r2);
font-family: var(--mono);
font-size: 2rem;
font-weight: 800;
color: var(--dorado);
/* La tarjeta del arbitro se cuelga del marcador. */
position: relative;
}
.vivo__gol { transition: transform 0.2s ease; }
.vivo__gol.es-nuevo { transform: scale(1.5); color: var(--exito); }
/*
* La tarjeta que muestra el arbitro.
*
* Aparece al costado del marcador, inclinada como recien levantada, se
* sostiene un momento y se va. No tapa nada: amarillas hay varias por
* partido y cualquier cosa mas grande cansaria a la tercera.
*/
.tarjeta-arbitro {
position: absolute;
top: 50%;
width: 26px;
height: 36px;
border-radius: 3px;
transform-origin: bottom center;
pointer-events: none;
animation: tarjeta-arbitro 1.6s ease-out forwards;
}
/*
* Del lado del amonestado: el local a la izquierda del marcador y el
* visitante a la derecha, como estan los escudos. Asi se ve de un vistazo
* quien se comio la tarjeta, sin leer el relato.
*
* La separacion es generosa a proposito: mas cerca, la tarjeta se monta
* sobre el borde del recuadro del equipo y se ve como un error de dibujo.
*/
.tarjeta-arbitro.es-local { right: calc(100% + var(--e5)); }
.tarjeta-arbitro.es-visitante { left: calc(100% + var(--e5)); }
/*
* La propia es un problema: sale apagada y casi derecha, como quien la
* recibe sin ganas. La del rival sale mas viva, mas inclinada y con brillo.
*/
.tarjeta-arbitro--amarilla.es-propia {
background: #c9a227;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
--inclina: -6deg;
--alto: 0.9;
}
.tarjeta-arbitro--amarilla.es-rival {
background: #ffd21f;
box-shadow: 0 0 14px rgba(255, 210, 31, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
--inclina: -14deg;
--alto: 1.06;
}
@keyframes tarjeta-arbitro {
0% {
opacity: 0;
transform: translateY(-40%) rotate(0deg) scale(0.6);
}
18% {
opacity: 1;
transform: translateY(-58%) rotate(var(--inclina)) scale(var(--alto));
}
70% {
opacity: 1;
transform: translateY(-58%) rotate(var(--inclina)) scale(var(--alto));
}
100% {
opacity: 0;
transform: translateY(-85%) rotate(var(--inclina)) scale(var(--alto));
}
}
/* En el telefono el marcador ya va justo: la tarjeta se achica y se arrima. */
@media (max-width: 480px) {
.tarjeta-arbitro {
width: 18px;
height: 25px;
}
.tarjeta-arbitro.es-local { right: calc(100% + var(--e3)); }
.tarjeta-arbitro.es-visitante { left: calc(100% + var(--e3)); }
}
/* Con el movimiento apagado no se muestra: el guion tampoco la crea. */
@media (prefers-reduced-motion: reduce) {
.tarjeta-arbitro { display: none; }
}
/*
* La roja: el momento mas fuerte del partido.
*
* La tarjeta entra grande al centro con un golpe seco y la pantalla se
* tiñe un instante. Acá si se interrumpe a proposito -una expulsion cambia
* el partido- pero todo se apaga en segundo y medio y no se puede tocar.
*/
.expulsion {
position: fixed;
inset: 0;
z-index: 1250;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: expulsion-tinte 1.7s ease-out forwards;
}
/* La nuestra duele: el rojo invade. */
.expulsion--propia { --tinte: rgba(190, 32, 38, 0.42); }
/* La del rival es una buena noticia: el mismo golpe, en dorado. */
.expulsion--rival { --tinte: rgba(232, 178, 63, 0.3); }
.expulsion__tarjeta {
width: 92px;
height: 128px;
border-radius: 7px;
background: #d9262c;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
transform-origin: center;
animation: expulsion-golpe 1.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes expulsion-tinte {
0% { background: transparent; }
12% { background: var(--tinte); }
55% { background: var(--tinte); }
100% { background: transparent; }
}
@keyframes expulsion-golpe {
0% {
opacity: 0;
transform: scale(2.1) rotate(-14deg);
}
14% {
opacity: 1;
transform: scale(1) rotate(-7deg);
}
60% {
opacity: 1;
transform: scale(1) rotate(-7deg);
}
100% {
opacity: 0;
transform: scale(0.94) rotate(-7deg) translateY(-18px);
}
}
/* El marcador tiembla cuando el que se va es de los nuestros. */
.vivo__cifras.es-temblando { animation: marcador-tiembla 0.9s ease-out; }
@keyframes marcador-tiembla {
0%, 100% { transform: translateX(0); }
12% { transform: translateX(-7px); }
26% { transform: translateX(6px); }
40% { transform: translateX(-5px); }
54% { transform: translateX(4px); }
68% { transform: translateX(-2px); }
84% { transform: translateX(1px); }
}
/* El expulsado queda tachado en el relato, como registro de que no esta. */
.relato__item--roja s {
text-decoration-color: var(--peligro);
text-decoration-thickness: 2px;
opacity: 0.75;
}
@media (max-width: 480px) {
.expulsion__tarjeta { width: 68px; height: 95px; }
}
@media (prefers-reduced-motion: reduce) {
.expulsion { display: none; }
.vivo__cifras.es-temblando { animation: none; }
}
/*
* Los papelitos del gol propio.
*
* Caen sobre toda la pantalla, por encima de todo y sin recibir un solo
* clic: son una fiesta, no una capa con la que se pueda interactuar. Cada
* papelito trae sus medidas y sus tiempos en variables propias, que las
* pone el guion al crearlos, para que ninguno caiga igual que otro.
*/
.papelitos {
position: fixed;
inset: 0;
z-index: 1200;
overflow: hidden;
pointer-events: none;
}
.papelito {
position: absolute;
top: -6vh;
left: var(--x);
width: var(--ancho);
height: var(--alto);
background: var(--color);
border-radius: 1px;
opacity: 0.92;
animation: papelito-cae var(--dura) linear var(--espera) forwards;
}
@keyframes papelito-cae {
from {
transform: translate3d(0, 0, 0) rotate(0deg);
}
to {
transform: translate3d(var(--tumbo), 112vh, 0) rotate(var(--giro));
}
}
/* Con el movimiento apagado no cae nada: el guion tampoco los crea. */
@media (prefers-reduced-motion: reduce) {
.papelitos { display: none; }
}
.vivo__separador { color: var(--texto-tenue); }
.vivo__reloj {
display: flex;
align-items: center;
gap: var(--e3);
margin-bottom: var(--e4);
}
.vivo__minuto {
flex: none;
min-width: 3.2rem;
font-family: var(--mono);
font-size: 1.1rem;
font-weight: 800;
color: var(--dorado);
}
.vivo__barra {
flex: 1;
height: 7px;
background: rgba(0, 0, 0, 0.42);
border-radius: 4px;
overflow: hidden;
}
.vivo__barra-relleno {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--cesped-claro), var(--dorado));
transition: width 0.15s linear;
}
.vivo__barra-relleno--0 { width: 0%; }
.vivo__barra-relleno--5 { width: 5%; }
.vivo__barra-relleno--10 { width: 10%; }
.vivo__barra-relleno--15 { width: 15%; }
.vivo__barra-relleno--20 { width: 20%; }
.vivo__barra-relleno--25 { width: 25%; }
.vivo__barra-relleno--30 { width: 30%; }
.vivo__barra-relleno--35 { width: 35%; }
.vivo__barra-relleno--40 { width: 40%; }
.vivo__barra-relleno--45 { width: 45%; }
.vivo__barra-relleno--50 { width: 50%; }
.vivo__barra-relleno--55 { width: 55%; }
.vivo__barra-relleno--60 { width: 60%; }
.vivo__barra-relleno--65 { width: 65%; }
.vivo__barra-relleno--70 { width: 70%; }
.vivo__barra-relleno--75 { width: 75%; }
.vivo__barra-relleno--80 { width: 80%; }
.vivo__barra-relleno--85 { width: 85%; }
.vivo__barra-relleno--90 { width: 90%; }
.vivo__barra-relleno--95 { width: 95%; }
.vivo__barra-relleno--100 { width: 100%; }
.vivo__periodo {
flex: none;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--texto-tenue);
}
.vivo__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e3);
justify-content: center;
}
.vivo__penales {
margin: var(--e4) 0 0;
text-align: center;
font-weight: 700;
color: var(--dorado);
}
.relato {
list-style: none;
margin: var(--e4) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--e2);
}
.relato__item {
display: flex;
align-items: flex-start;
gap: var(--e3);
padding: var(--e2) var(--e3);
background: var(--panel-hueco);
border-left: 3px solid var(--borde-fuerte);
border-radius: var(--r1);
animation: entrar 0.3s ease;
}
.relato__item--gol { border-left-color: var(--exito); background: rgba(111, 216, 152, 0.12); }
.relato__item--roja { border-left-color: var(--peligro-fuerte); }
.relato__item--amarilla { border-left-color: #f0c419; }
.relato__item--lesion { border-left-color: var(--info); }
.relato__item--ocasion { border-left-color: var(--borde-fuerte); opacity: 0.75; }
.relato__minuto {
flex: none;
min-width: 2.6rem;
font-family: var(--mono);
font-weight: 700;
color: var(--dorado);
}
.relato__cuerpo { display: flex; flex-direction: column; font-size: 0.88rem; }
.relato__cuerpo span { color: var(--texto-suave); font-size: 0.82rem; }
/* --- Modalidad de partido ------------------------------------------------- */
.modo-partido {
margin: var(--e4) auto 0;
max-width: 960px;
padding: var(--e3);
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r2);
text-align: center;
}
.modo-partido__titulo {
margin: 0 0 var(--e3);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--texto-tenue);
}
.modo-partido__opciones {
display: grid;
gap: var(--e2);
grid-template-columns: 1fr;
margin-bottom: var(--e3);
}
.opcion--compacta .opcion__cuerpo { padding: var(--e3); text-align: left; }
.opcion--compacta .opcion__titulo {
display: flex;
align-items: center;
gap: var(--e2);
font-size: 0.9rem;
}
.opcion--compacta .opcion__texto { font-size: 0.78rem; }
/*
* Selector segmentado del planteo: las opciones de un grupo en una fila de
* botones y, debajo, la descripcion y los efectos de la elegida. Las
* opciones son labels con su radio; el detalle de cada una viaja en el
* HTML y solo se muestra el de la marcada, con :has().
*/
.segmentado {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--e1);
}
.segmentado__opcion {
display: contents;
cursor: pointer;
}
.segmentado__radio {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.segmentado__boton {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.4rem;
padding: 0.35rem 0.5rem;
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r1);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.15;
text-align: center;
color: var(--texto-suave);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.segmentado__opcion:hover .segmentado__boton { border-color: var(--dorado); color: var(--texto); }
.segmentado__radio:checked + .segmentado__boton {
background: var(--dorado);
border-color: var(--dorado);
color: var(--tinta);
}
.segmentado__radio:focus-visible + .segmentado__boton {
outline: 2px solid var(--dorado);
outline-offset: 2px;
}
/*
* El detalle ocupa el ancho entero, debajo de la fila de botones. Como
* cada opcion aporta su boton y su detalle a la misma grilla, el detalle
* se manda al final con `order` para que no se meta entre dos botones.
*/
.segmentado__boton { order: 0; }
.segmentado__detalle {
display: none;
order: 1;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--e2) var(--e3);
margin-top: var(--e1);
padding: var(--e2) var(--e3);
background: var(--panel-hueco);
border-radius: var(--r1);
}
.segmentado__opcion:has(.segmentado__radio:checked) .segmentado__detalle { display: flex; }
.segmentado__texto {
flex: 1 1 14rem;
min-width: 0;
font-size: 0.8rem;
color: var(--texto-suave);
}
.segmentado__detalle .opcion__modificadores { justify-content: flex-start; }
/*
* Mentalidad, presion, ritmo y marca: un selector debajo de otro. Van
* apretados para que el planteo entero se vea de un vistazo.
*/
.bloque--planteo {
padding: var(--e3);
margin-bottom: var(--e3);
}
.bloque--planteo .bloque__titulo { margin-bottom: var(--e2); }
.bloque--planteo .rejilla { gap: var(--e2); }
.bloque--planteo .bloque__nota {
margin-bottom: 0;
font-size: 0.78rem;
}
/* --- Cierre y arranque de temporada -------------------------------------- */
.proxima-temporada {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e3);
padding: var(--e5) var(--e4);
margin: var(--e4) 0;
text-align: center;
background: var(--panel);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r3);
box-shadow: var(--sombra2);
}
.proxima-temporada--ascenso {
border-color: var(--exito);
background: linear-gradient(160deg, rgba(111, 216, 152, 0.16), var(--panel) 60%);
}
.proxima-temporada--descenso {
border-color: var(--peligro);
background: linear-gradient(160deg, rgba(201, 61, 40, 0.16), var(--panel) 60%);
}
.proxima-temporada__texto {
margin: 0;
max-width: 56ch;
font-size: 1rem;
}
/* --- Sorteo de zonas ------------------------------------------------------ */
.sorteo__cabecera {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e4);
padding: var(--e5) var(--e4);
margin-bottom: var(--e4);
text-align: center;
background:
radial-gradient(ellipse at 50% 0%, rgba(31, 122, 77, 0.45) 0%, transparent 65%),
var(--panel);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r3);
}
.bolillero {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e3);
}
/*
* La maquina entera: esfera arriba, tubo de salida abajo y la base que la
* sostiene. Las medidas estan en pixeles porque toda la geometria -el radio
* de la esfera, donde apoyan las bolillas, por donde cae la que sale- se
* calcula sobre ellas.
*/
.bolillero__maquina {
position: relative;
width: 140px;
height: 186px;
}
/* El tambor: una esfera de vidrio con el aro dorado de la maquina. */
.bolillero__tambor {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 140px;
border-radius: 50%;
/*
* El aro va de sombra y no de borde: asi la caja interior mide los 140
* px completos y el radio de apoyo de las bolillas es exacto.
*
* Son tres anillos, de adentro hacia afuera: el filo claro del metal, el
* cuerpo del aro y la sombra que lo despega del panel. Adentro, la
* penumbra del vidrio y el reflejo del piso.
*/
box-shadow:
0 0 0 2px rgba(242, 234, 216, 0.5),
0 0 0 6px var(--dorado-oscuro),
0 6px 14px rgba(0, 0, 0, 0.45),
inset 0 -14px 26px rgba(0, 0, 0, 0.55),
inset 0 10px 20px rgba(255, 255, 255, 0.06);
background:
radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 46%),
radial-gradient(circle at 50% 118%, rgba(47, 167, 104, 0.28), transparent 55%),
rgba(4, 20, 15, 0.62);
overflow: hidden;
}
/*
* El brillo del vidrio: una franja de luz arriba a la izquierda, como la
* que deja un foco sobre una esfera. Va encima de las bolillas, que es lo
* que hace que se lean como si estuvieran adentro.
*/
.bolillero__tambor::after {
content: "";
position: absolute;
top: 8%;
left: 12%;
width: 46%;
height: 30%;
border-radius: 50%;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
transform: rotate(-18deg);
pointer-events: none;
}
/*
* Las bolillas viven en una capa propia que ocupa todo el tambor: girando
* esa capa, las seis dan la vuelta juntas y sin deformarse, siempre a la
* misma distancia del centro. Girar el tambor en cambio movia tambien el
* vidrio y el reflejo, que tienen que quedarse quietos.
*/
.bolillero__orbita {
position: absolute;
inset: 0;
}
.bolillero__bola {
position: absolute;
width: 22px;
height: 22px;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
/*
* En reposo las seis descansan en el piso del tambor.
*
* Las posiciones estan medidas sobre la circunferencia de apoyo -70 px de
* radio menos los 11 de la bolilla: 59-, repartidas a 24 grados una de otra
* a los lados del punto mas bajo. Asi apoyan en la curva del vidrio, no en
* una linea recta, y ninguna pisa a la de al lado.
*/
.bolillero__bola--1 { top: 63.2%; left: 5.6%; }
.bolillero__bola--2 { top: 76.2%; left: 17.4%; }
.bolillero__bola--3 { top: 83.4%; left: 33.4%; }
.bolillero__bola--4 { top: 83.4%; left: 50.9%; }
.bolillero__bola--5 { top: 76.2%; left: 66.9%; }
.bolillero__bola--6 { top: 63.2%; left: 78.6%; }
/*
* El tubo de salida, pegado al fondo de la esfera: por ahi baja la bolilla
* que sale. La boca de arriba queda tapada por el aro del tambor.
*/
.bolillero__salida {
position: absolute;
top: 128px;
left: 50%;
width: 26px;
height: 42px;
margin-left: -13px;
border-radius: 0 0 8px 8px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.12) 45%, rgba(0, 0, 0, 0.55));
box-shadow: inset 0 0 0 1px rgba(242, 234, 216, 0.22);
overflow: hidden;
}
/* La bolilla que baja por el tubo: solo se ve mientras dura la caida. */
.bolillero__bola-salida {
position: absolute;
top: -20px;
left: 4px;
width: 18px;
height: 18px;
opacity: 0;
}
/* La base: la chapa donde se apoya toda la maquina. */
.bolillero__pie {
position: absolute;
bottom: 0;
left: 50%;
width: 104px;
height: 16px;
margin-left: -52px;
border-radius: 4px 4px 6px 6px;
background: linear-gradient(180deg, var(--dorado-oscuro), rgba(0, 0, 0, 0.72));
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/*
* Girando: la capa de bolillas da vueltas y cada bolilla ademas se sacude
* hacia el centro y vuelve, con un ritmo propio. La vuelta sola se veia
* como un dibujo rigido; el zarandeo desparejo es lo que da la idea de que
* rebotan contra el vidrio.
*/
.bolillero.es-girando .bolillero__orbita { animation: orbita 1.1s linear infinite; }
.bolillero.es-girando .bolillero__bola {
animation: zarandeo 0.42s ease-in-out infinite alternate;
}
.bolillero.es-girando .bolillero__bola--2 { animation-duration: 0.31s; }
.bolillero.es-girando .bolillero__bola--3 { animation-duration: 0.38s; }
.bolillero.es-girando .bolillero__bola--4 { animation-duration: 0.27s; }
.bolillero.es-girando .bolillero__bola--5 { animation-duration: 0.35s; }
.bolillero.es-girando .bolillero__bola--6 { animation-duration: 0.24s; }
/* La esfera acusa el golpe del motor mientras gira. */
.bolillero.es-girando .bolillero__tambor { animation: temblor 0.28s ease-in-out infinite alternate; }
/* Al parar, la bolilla elegida cae por el tubo. */
.bolillero.es-soltando .bolillero__bola-salida { animation: caida 0.5s ease-in forwards; }
@keyframes orbita {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Hacia el centro del tambor: en la capa que gira, eso es "hacia arriba". */
@keyframes zarandeo {
from { transform: translateY(0); }
to { transform: translateY(-7px); }
}
@keyframes temblor {
from { transform: translate(0, 0); }
to { transform: translate(0.5px, -1px); }
}
@keyframes caida {
from { top: -20px; opacity: 0; }
18% { opacity: 1; }
88% { top: 21px; opacity: 1; }
to { top: 21px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bolillero.es-girando .bolillero__orbita,
.bolillero.es-girando .bolillero__bola,
.bolillero.es-girando .bolillero__tambor,
.bolillero.es-soltando .bolillero__bola-salida { animation: none; }
}
.bolillero__estado {
margin: 0;
font-family: var(--mono);
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--dorado);
}
.sorteo__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e3);
justify-content: center;
}
.sorteo__contador {
margin-left: auto;
font-family: var(--mono);
color: var(--texto-tenue);
}
.sorteo__zona {
list-style: none;
margin: 0;
padding: 0;
min-height: 120px;
}
.sorteo__equipo {
display: flex;
align-items: center;
gap: var(--e2);
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
font-size: 0.88rem;
animation: entrar 0.3s ease;
}
.sorteo__equipo:last-child { border-bottom: 0; }
.sorteo__equipo.es-propio {
color: var(--dorado);
font-weight: 800;
}
.sorteo__orden {
flex: none;
width: 1.6rem;
font-family: var(--mono);
font-size: 0.74rem;
color: var(--texto-tenue);
}
.sorteo__nombre { flex: 1; min-width: 0; }
/*
* Las llaves del sorteo de la Copa Argentina: el mismo cruce centrado que en
* los resultados -nombre, escudo, vs, escudo, nombre- pero apretado, porque
* en esa pantalla entran treintaidos de una.
*/
.sorteo__llaves {
list-style: none;
margin: 0;
padding: 0;
min-height: 120px;
}
.sorteo__llave {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e2);
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
font-size: 0.84rem;
animation: entrar 0.3s ease;
}
.sorteo__llave:last-child { border-bottom: 0; }
.sorteo__llave-lado.es-propio {
color: var(--dorado);
font-weight: 800;
}
.sorteo__llave-lado {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--e2);
min-width: 0;
text-align: right;
}
/* El lado visitante es el tercero de la llave, detras del "vs". */
.sorteo__llave-lado:nth-child(3) {
justify-content: flex-start;
text-align: left;
}
.sorteo__llave-vs {
flex: none;
padding: 0 var(--e2);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
color: var(--dorado);
}
@media (prefers-reduced-motion: reduce) {
.sorteo__equipo,
.sorteo__llave { animation: none; }
}
/* --- Pestanas de categoria ------------------------------------------------ */
.pestanas {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-bottom: var(--e4);
padding: var(--e1);
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r2);
}
/*
Barra unica: primero las pestanas que filtran la tabla y despues los
atajos a otras pantallas, con una linea que los separa. Las dos son
pestanas iguales; la linea es lo unico que dice que no llevan al mismo
tipo de sitio.
*/
.pestanas--barra {
align-items: center;
justify-content: center;
}
.pestanas__atajos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e2);
padding-left: var(--e3);
border-left: 1px solid var(--borde);
}
@media (max-width: 575.98px) {
.pestanas__atajos {
width: 100%;
justify-content: center;
padding: var(--e2) 0 0;
border-left: 0;
border-top: 1px solid var(--borde);
}
}
.pestanas__enlace {
display: inline-flex;
align-items: center;
gap: var(--e2);
padding: var(--e2) var(--e4);
border-radius: var(--r1);
color: var(--texto-suave);
font-size: 0.84rem;
font-weight: 700;
}
.pestanas__enlace:hover {
background: var(--panel);
color: var(--texto);
text-decoration: none;
}
.pestanas__enlace.es-activo {
background: var(--dorado);
color: var(--tinta);
}
/* --- Divisiones, ascensos y descensos ------------------------------------ */
.ficha-club__division {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--dorado);
}
.division-titulo {
display: flex;
align-items: baseline;
gap: var(--e2);
margin: var(--e5) 0 var(--e3);
padding-bottom: var(--e2);
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dorado);
border-bottom: 1px solid var(--borde);
}
.division-titulo span {
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--texto-tenue);
}
.panel--ascenso { border-left: 4px solid var(--exito); }
.panel--descenso { border-left: 4px solid var(--peligro); }
.movimientos { list-style: none; margin: 0; padding: 0; }
.movimiento {
display: flex;
align-items: center;
gap: var(--e2);
padding: var(--e2) 0;
border-bottom: 1px dashed var(--borde);
font-size: 0.88rem;
}
.movimiento:last-child { border-bottom: 0; }
.movimiento__nombre { flex: 1; min-width: 0; }
.movimiento__detalle {
flex: none;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--texto-tenue);
}
/* --- Cuadro de la fase final --------------------------------------------- */
.campeon {
display: flex;
align-items: center;
gap: var(--e4);
padding: var(--e4);
margin-bottom: var(--e4);
background: linear-gradient(120deg, rgba(232, 178, 63, 0.24), var(--panel) 60%);
border: 1px solid var(--dorado-oscuro);
border-radius: var(--r3);
box-shadow: var(--sombra2);
}
.campeon__titulo {
margin: 0;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--dorado);
}
.campeon__nombre {
margin: 0;
font-size: 1.4rem;
font-weight: 800;
line-height: 1.15;
}
.cuadro {
display: grid;
gap: var(--e4);
grid-template-columns: 1fr;
margin-bottom: var(--e4);
}
.cuadro__ronda {
padding: var(--e3);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r2);
}
.cuadro__ronda.es-actual {
border-color: var(--dorado);
box-shadow: 0 0 0 2px rgba(232, 178, 63, 0.2);
}
.cuadro__titulo {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e3);
padding-bottom: var(--e2);
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dorado);
border-bottom: 1px solid var(--borde);
}
.cuadro__llaves {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--e2);
}
.llave {
padding: var(--e2);
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r1);
}
.llave.es-propio {
border-color: var(--dorado);
background: rgba(232, 178, 63, 0.12);
}
.llave__lado {
display: flex;
align-items: center;
gap: var(--e2);
padding: 2px 0;
font-size: 0.84rem;
color: var(--texto-tenue);
}
.llave__lado.es-ganador {
color: var(--texto);
font-weight: 800;
}
.llave__nombre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.llave__goles {
flex: none;
min-width: 1.4rem;
text-align: center;
font-family: var(--mono);
font-weight: 800;
}
.llave__penales {
flex: none;
min-width: 1.3rem;
padding: 0 0.25rem;
text-align: center;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--dorado);
border: 1px solid var(--borde);
border-radius: var(--r1);
}
.llave__pendiente {
display: block;
margin-top: var(--e1);
font-size: 0.7rem;
font-style: italic;
color: var(--texto-tenue);
}
/* --- Escritorio: indicadores --------------------------------------------- */
.indicadores {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--e3);
margin-bottom: var(--e4);
}
/*
* Con dos o tres datos, la grilla de cuatro columnas los dejaba amontonados
* contra el borde izquierdo y media caja vacia. Centrados, el bloque se lee
* como un conjunto; el titulo del panel se queda donde estaba.
*/
.indicadores--centrados {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.indicadores--centrados .indicador {
flex: 1 1 11rem;
max-width: 20rem;
}
.indicador {
padding: var(--e3);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r2);
text-align: center;
}
.indicador.es-alerta { border-color: rgba(255, 138, 117, 0.5); }
.indicador__etiqueta {
margin: 0;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--texto-tenue);
}
.indicador__valor {
margin: var(--e1) 0;
font-family: var(--mono);
/* El balance puede ser un importe largo: se achica antes de desbordar. */
font-size: clamp(1.05rem, 4.2vw, 1.5rem);
font-weight: 800;
line-height: 1.1;
overflow-wrap: anywhere;
color: var(--dorado);
}
/*
* Indicador de palabras y no de cifras -una instancia de copa, el nombre de
* un campeon-: sale de la monoespaciada, que es para numeros, y se achica
* para que un nombre largo no rompa la caja.
*/
.indicador__valor--texto {
font-family: var(--fuente);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
}
.indicador__pie {
margin: 0;
font-size: 0.72rem;
color: var(--texto-tenue);
}
.ultimo-partido {
display: flex;
align-items: center;
gap: var(--e3);
margin: 0;
font-size: 0.88rem;
color: var(--texto-suave);
}
.ultimo-partido__marcador {
flex: none;
padding: 0.1rem 0.6rem;
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r1);
font-family: var(--mono);
font-weight: 800;
}
.tabla--compacta { min-width: 0; font-size: 0.82rem; }
.tabla--compacta th,
.tabla--compacta td { padding: 0.4rem 0.5rem; }
/* --- Portada ------------------------------------------------------------- */
.portada__hero {
position: relative;
overflow: hidden;
padding: var(--e6) var(--e4);
margin-bottom: var(--e5);
text-align: center;
background:
radial-gradient(ellipse at 50% -10%, rgba(47, 167, 104, 0.4) 0%, transparent 62%),
var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r3);
}
.portada__titulo {
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.02em;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.portada__bajada {
max-width: 60ch;
margin: 0 auto var(--e5);
color: var(--texto-suave);
}
.portada__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e3);
justify-content: center;
}
.portada__salir { margin: var(--e4) 0 0; }
/* --- Ingreso ------------------------------------------------------------- */
/*
* El formulario de ingreso, al costado del hero.
*
* En el telefono va debajo de la presentacion -primero se lee de que se
* trata y despues se entra-; de 768 para arriba el hero se parte en dos y
* queda al costado, a la vista sin bajar.
*/
.ingreso {
/*
* El ancho va declarado y no librado al `auto`.
*
* Dentro del hero esto es una celda de grilla, y los margenes
* automaticos de la linea de abajo -los que lo centran en el telefono-
* le ganan al estirado: con el ancho en `auto`, el navegador le da el
* que pide su contenido, y lo que pide es el reCAPTCHA con sus 304
* puntos fijos. Resultado: el formulario se iba mas ancho que la caja y
* se cortaba contra el borde. Con el 100% declarado, el ancho es el de
* la celda y el widget se acomoda escalandose.
*/
width: 100%;
max-width: 24rem;
margin: var(--e5) auto 0;
padding: var(--e4);
text-align: left;
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r2);
}
.ingreso__titulo {
display: flex;
align-items: center;
gap: var(--e2);
margin: 0 0 var(--e4);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dorado);
}
/*
* El widget de Google viene con un ancho fijo propio -304 puntos- y no se
* deja redimensionar: es un iframe de otro dominio. Lo que si se le puede
* hacer es escalarlo, y de eso se encarga includes/javascript/ingreso.js,
* que lo lleva al ancho de los campos -agrandandolo o achicandolo, segun la
* pantalla- y le corrige el alto a esta caja.
*
* Mientras tanto -y si el guion no corre- queda centrado, que es como se
* veia antes: nada se rompe sin JavaScript.
*/
.ingreso__captcha {
display: flex;
justify-content: center;
margin: 0 0 var(--e3);
overflow: hidden;
}
/*
* Mientras se lo escala, el widget arranca pegado a la izquierda y crece
* -o se encoge- desde esa esquina: centrado, al escalar se correria hacia
* afuera y se saldria de la caja por la derecha.
*/
.ingreso__captcha.es-estirado { justify-content: flex-start; }
.ingreso__captcha .g-recaptcha { transform-origin: left top; }
.ingreso__boton { width: 100%; }
/* El paso al otro formulario: de entrar a registrarse y al reves. */
.ingreso__pie {
margin: var(--e3) 0 0;
font-size: 0.8rem;
text-align: center;
color: var(--texto-tenue);
}
.ingreso__pie a {
color: var(--dorado);
text-decoration: underline;
}
/* Los campos del registro llevan su ayuda debajo: se aprietan un poco. */
.ingreso .campo { margin-bottom: var(--e3); }
.ingreso .campo__ayuda { margin-top: var(--e1); }
/*
* De 768 para arriba el hero se parte en dos: la presentacion a la
* izquierda y la caja del formulario al costado, a la vista sin bajar. En
* el telefono es una sola columna y el formulario queda debajo.
*/
@media (min-width: 768px) {
.portada__hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--e5);
text-align: left;
}
.portada__bajada { margin-left: 0; }
.portada__acciones { justify-content: flex-start; }
/*
* Al costado del texto no necesita el margen de arriba: va en linea.
*
* Y va acotado al hero a proposito. En "recuperar" la caja no es una
* columna del hero sino un bloque suelto debajo, y ahi los margenes
* automaticos son los que la centran: pisarlos con cero la dejaba
* apoyada contra el borde izquierdo de la pantalla.
*/
.portada__hero .ingreso { margin: 0; }
/*
* Con la sesion abierta no hay segunda columna: todo va en una sola,
* centrada en el medio del hero.
*/
.portada__hero--solo {
grid-template-columns: minmax(0, 1fr);
text-align: center;
}
.portada__hero--solo .portada__bajada { margin-left: auto; }
.portada__hero--solo .portada__acciones { justify-content: center; }
}
/*
* Con la sesion abierta el hero es una sola columna: el bloque de texto
* tiene su ancho maximo propio, asi que se centra en vez de apoyarse contra
* el borde izquierdo.
*/
.portada__hero--solo .portada__texto { margin-inline: auto; }
/*
* Y la portada entera se achica.
*
* Son un saludo y dos bloques: a todo el ancho de una pantalla grande los
* renglones pasaban los mil puntos y el hero quedaba como una caja enorme
* casi vacia. Con techo y centrada se lee como una pantalla de entrada y
* no como un espacio que sobro.
*/
.portada__hero--solo,
.portada__puertas {
max-width: 64rem;
margin-inline: auto;
}
/*
* El boton de cada puerta, centrado en su tarjeta. Va solo acá: en el resto
* del juego las acciones de una tarjeta son varias y arrancan a la
* izquierda, alineadas con el texto de arriba.
*/
.portada__puertas .tarjeta__acciones { justify-content: center; }
/* El cierre de sesion, centrado debajo de las dos puertas. */
.portada__puertas + .portada__salir { text-align: center; }
/* --- Eleccion de club ---------------------------------------------------- */
.eleccion-club { margin: 0 0 var(--e4); padding: 0; border: 0; }
.club { display: block; cursor: pointer; }
.club__radio {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.club__cuerpo {
display: flex;
align-items: center;
gap: var(--e3);
height: 100%;
padding: var(--e3);
background: var(--panel);
border: 2px solid var(--borde);
border-radius: var(--r2);
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.club:hover .club__cuerpo { border-color: var(--borde-fuerte); transform: translateY(-2px); }
.club__radio:checked + .club__cuerpo {
border-color: var(--dorado);
background: var(--panel-alto);
box-shadow: 0 0 0 3px rgba(232, 178, 63, 0.2);
}
.club__radio:focus-visible + .club__cuerpo { outline: 3px solid var(--dorado); outline-offset: 2px; }
.club__datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.club__nombre { font-size: 0.92rem; line-height: 1.25; }
.club__ciudad { font-size: 0.74rem; color: var(--texto-tenue); }
.club__metricas { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.club.es-oculto { display: none; }
.eleccion-club__vacio { color: var(--texto-tenue); font-style: italic; }
/* --- Selector de jornada ------------------------------------------------- */
.selector-jornada {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: var(--e4);
padding: var(--e2);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r2);
}
.selector-jornada__campo { flex: 1; margin: 0; min-width: 0; }
/*
* En el telefono los botones son solo las flechas: con "Anterior" y
* "Siguiente" enteros, el selector del medio se quedaba sin ancho para
* mostrar en que ronda estas. El nombre de cada boton viaja en su
* aria-label, asi que los lectores de pantalla lo leen igual.
*/
.selector-jornada__texto { display: none; }
@media (min-width: 576px) {
.selector-jornada__texto { display: inline; }
}
/* --- Partido y resultados ------------------------------------------------ */
.partido__jornada {
margin: 0;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--dorado);
}
.partido__cruce {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
padding: var(--e4) 0;
}
.partido__equipo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e2);
flex: 1;
text-align: center;
font-size: 0.9rem;
font-weight: 700;
}
.partido__vs {
flex: none;
font-family: var(--mono);
font-size: 0.85rem;
color: var(--texto-tenue);
padding: var(--e1) var(--e3);
border: 1px solid var(--borde);
border-radius: var(--r4);
}
.partido__resumen { font-size: 0.88rem; color: var(--texto-suave); }
.partido__accion { margin: var(--e4) 0 var(--e2); }
.partido__nota { margin: 0; font-size: 0.82rem; text-align: center; color: var(--texto-tenue); }
.marcador-partido {
/* La tarjeta mide su propio ancho: de eso depende si entra el nombre o la sigla. */
container-type: inline-size;
/*
* Y tambien su propio alto: sin esto la grilla estira las dos tarjetas de
* la fila a la altura de la mas alta, y la de al lado del partido propio
* -que viene abierto- quedaba con un hueco enorme aunque este comprimida.
*/
align-self: start;
padding: var(--e3);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r2);
transition: border-color 0.15s ease;
}
.marcador-partido:hover { border-color: var(--borde-fuerte); }
.marcador-partido.es-propio {
border-color: var(--dorado);
background: linear-gradient(180deg, rgba(232, 178, 63, 0.14), var(--panel));
box-shadow: var(--sombra2);
}
.marcador-partido__destaque {
display: inline-block;
margin-bottom: var(--e2);
padding: 0.1rem 0.5rem;
background: var(--dorado);
color: var(--tinta);
border-radius: var(--r1);
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*
* En la copa el rotulo dice de que grupo salio el partido: es un dato, no
* un destaque, asi que va apagado para no competir con el dorado de "Tu
* partido", que en la misma grilla tiene que seguir cantando.
*/
.marcador-partido__destaque--neutro {
background: var(--panel-hueco);
color: var(--texto-suave);
box-shadow: inset 0 0 0 1px var(--borde);
}
.marcador-partido__cruce {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e2);
}
/*
* La tarjeta viene comprimida: el marcador y, debajo, cuantos goles y
* cartones hubo. El detalle se despliega al tocar el resumen.
*
* Es un nativo a proposito: sin JavaScript el partido se sigue
* pudiendo abrir, y el navegador ya se ocupa del teclado y del anuncio del
* estado para los lectores de pantalla.
*/
.marcador-partido__resumen {
display: block;
cursor: pointer;
list-style: none;
border-radius: var(--r1);
}
/* Safari todavia dibuja el triangulo propio con su pseudo-elemento. */
.marcador-partido__resumen::-webkit-details-marker { display: none; }
.marcador-partido__resumen:focus-visible {
outline: 2px solid var(--dorado);
outline-offset: 3px;
}
/*
* El hueco del rotulo: ocupa la misma franja que "Tu partido" o el nombre de
* la instancia, para que todas las tarjetas de la grilla midan igual.
*/
.marcador-partido__destaque--hueco {
visibility: hidden;
background: none;
box-shadow: none;
}
/*
* Los conteos y el aviso de "Sin goles" son la misma linea de pie: van con la
* misma medida para que dos tarjetas comprimidas nunca queden desparejas.
*/
.marcador-partido__conteos,
.marcador-partido > .goleadores__vacio {
display: flex;
align-items: center;
justify-content: center;
gap: var(--e3);
min-height: 1.15rem;
margin: var(--e2) 0 0;
font-family: var(--mono);
font-size: 0.72rem;
font-style: normal;
color: var(--texto-tenue);
}
.marcador-partido__conteo {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* La pelota del conteo de goles, del mismo tamano que los cartones. */
.marcador-partido__pelota {
display: inline-block;
width: 10px;
height: 10px;
flex: none;
border-radius: 50%;
background: var(--texto-suave);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* Chevron: gira hacia arriba cuando la tarjeta queda abierta. */
.marcador-partido__flecha {
width: 7px;
height: 7px;
flex: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.15s ease;
}
.marcador-partido__ficha[open] .marcador-partido__flecha {
transform: rotate(-135deg) translate(-2px, -2px);
}
.marcador-partido__ficha[open] .marcador-partido__conteos { color: var(--dorado); }
.marcador-partido__detalle {
margin-top: var(--e2);
padding-top: var(--e2);
border-top: 1px dashed var(--borde);
}
/* Ya separa el borde del detalle: la lista no necesita su propio margen. */
.marcador-partido__detalle .goleadores { margin-top: 0; }
.marcador-partido__detalle .goleadores__vacio { margin-top: 0; }
/* La cancha del partido, al pie del detalle: solo la llevan los de campo
neutral, donde saber donde se jugo dice algo. */
.marcador-partido__sede {
margin: var(--e2) 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--t-etiqueta, 0.7rem);
color: var(--texto-tenue);
text-align: center;
}
/* Mismo criterio que en las llaves: los dos lados miran al marcador. */
.marcador-partido__equipo {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--e2);
min-width: 0;
text-align: right;
}
.marcador-partido__equipo:last-child {
justify-content: flex-start;
text-align: left;
}
/*
* El nombre nunca corta en dos lineas: si lo hiciera, esa tarjeta quedaria
* mas alta que las demas de la grilla.
*/
.marcador-partido__nombre {
min-width: 0;
overflow: hidden;
font-size: 0.86rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* En tarjetas angostas el nombre corto no entra ("Independiente" es una
* sola palabra y desborda), asi que se muestra la sigla de tres letras.
* El nombre completo queda en el title de la sigla.
*/
.marcador-partido__sigla {
display: none;
font-family: var(--mono);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.04em;
text-decoration: none;
}
@container (max-width: 400px) {
.marcador-partido__nombre { display: none; }
.marcador-partido__sigla { display: inline; }
}
.marcador-partido__cifras {
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.7rem;
background: var(--fondo);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r2);
font-family: var(--mono);
font-size: 1.25rem;
font-weight: 800;
color: var(--dorado);
}
/* La definicion por penales, en la linea de pie y en chico. */
.marcador-partido__penales {
font-weight: 600;
color: var(--texto-suave);
white-space: nowrap;
}
/*
* Goles y tarjetas en dos columnas: el local a la izquierda y el visitante
* a la derecha, cada uno apilado desde arriba en orden de minuto.
*
* Cada item fija su columna y `dense` hace que el grid lo apoye en la
* primera fila libre de esa columna: asi una columna no deja huecos por los
* eventos de la otra.
*/
.goleadores,
.tarjetas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense;
column-gap: var(--e3);
align-content: start;
}
.goleadores__item--local,
.tarjetas__item--local { grid-column: 1; }
.goleadores__item--visitante,
.tarjetas__item--visitante { grid-column: 2; }
.goleadores__nombre,
.tarjetas__nombre {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goleadores { list-style: none; margin: var(--e3) 0 0; padding: 0; font-size: 0.78rem; }
.goleadores__item {
display: flex;
gap: var(--e2);
min-width: 0;
padding: 1px 0;
color: var(--texto-suave);
}
.goleadores__item--visitante { flex-direction: row-reverse; }
.goleadores__minuto { font-family: var(--mono); color: var(--dorado); }
.goleadores__vacio { margin: var(--e3) 0 0; font-size: 0.78rem; font-style: italic; color: var(--texto-tenue); text-align: center; }
.tarjetas {
list-style: none;
margin: var(--e2) 0 0;
padding: var(--e2) 0 0;
border-top: 1px dashed var(--borde);
font-size: 0.76rem;
}
.tarjetas__item {
display: flex;
align-items: center;
gap: var(--e2);
min-width: 0;
padding: 1px 0;
color: var(--texto-tenue);
}
.tarjetas__item--visitante { flex-direction: row-reverse; }
.tarjetas__minuto { font-family: var(--mono); }
.marcador-partido__xg { margin: var(--e2) 0 0; font-size: 0.72rem; color: var(--texto-tenue); }
/* --- Alineacion en lista: el plantel ordenado a mano --------------------- */
.plantel { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
/*
* Con el partido en juego la columna lateral no se dibuja: el planteo no se
* toca con el reloj parado, solo se hacen cambios. Sin esta regla la grilla
* le seguia reservando el lugar y las tablas quedaban mas angostas que el
* aviso de arriba.
*/
.seccion--en-partido .plantel { grid-template-columns: minmax(0, 1fr); }
.plantel__lista { min-width: 0; }
/*
* En una sola columna -mobile y tablet- el atajo del cuerpo tecnico va al
* tope: es un boton, y abajo de la lista de jugadores queda a tres pantallas
* de scroll. La columna lateral se deshace como caja (display: contents) para
* que sus paneles entren en la grilla del plantel y el del tecnico pueda
* subir con order; el hueco entre paneles pasa a ser el gap de la grilla, que
* mide lo mismo que el margen que traian. Desde 992px, con la lateral en su
* columna, todo vuelve a su lugar.
*/
.plantel--tecnico-arriba .plantel__lateral { display: contents; }
.plantel--tecnico-arriba .plantel__lateral > .panel { margin-bottom: 0; }
.plantel--tecnico-arriba .plantel__tecnico { order: -1; }
/*
* Cada bloque es una tabla, y se presenta como las de la clasificacion:
* una caja de fondo panel con borde y esquinas redondeadas, el titulo
* arriba separado por una linea y, debajo, la cabecera de columnas.
*/
.bloque-plantel {
margin-bottom: var(--e4);
background: var(--panel);
border: 1px solid var(--borde);
border-radius: var(--r3);
overflow: hidden;
}
.bloque-plantel__titulo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e2);
margin: 0;
padding: var(--e3);
border-bottom: 1px solid var(--borde);
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dorado);
}
.bloque-plantel__cuenta {
flex: none;
padding: 0 var(--e2);
border-radius: var(--r4);
border: 1px solid var(--borde);
color: var(--texto-suave);
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.jugadores {
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.jugadores__vacio {
padding: var(--e3);
color: var(--texto-tenue);
font-size: 0.86rem;
text-align: center;
}
/*
* Fila del plantel. Todas las zonas usan la misma grilla: asi cualquier
* jugador se puede soltar sobre cualquier otro y las columnas siguen
* alineadas de punta a punta de la pantalla.
*/
/*
* Todas las columnas llevan un ancho fijo menos el nombre, que se estira.
* Si alguna fuera "auto" cada fila la mediria por su propio contenido -una
* con dos cartones, otra sin ninguno- y las columnas dejarian de caer bajo
* su titulo, porque cada fila es una grilla independiente.
*
* Las trece columnas estan siempre: en pantallas angostas la tabla no
* esconde datos, se corre de lado dentro de su envoltorio.
*/
.jugador-fila {
display: grid;
/*
* Dorsal y nombre abren la fila: quien es. Enseguida lo que decide si
* va o no: con cuanto rinde hoy, el estado (amarillas, sancion, lesion)
* y su demarcacion natural. Despues las cifras -edad, forma, moral,
* energia y las cuatro facetas-.
*/
grid-template-columns:
2.4rem minmax(6rem, 1fr) 2.8rem 3.4rem 2.8rem
2.4rem 2.4rem 2.4rem 2.4rem 2.4rem 2.4rem 2.4rem 2.4rem;
align-items: center;
gap: var(--e2);
padding: 0.55rem 0.7rem;
border-bottom: 1px solid var(--borde);
background: var(--panel);
font-size: 0.86rem;
cursor: grab;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.jugador-fila:last-child { border-bottom: 0; }
.jugador-fila:hover,
.jugador-fila:focus-visible {
background: rgba(232, 178, 63, 0.1);
outline: none;
}
.jugador-fila:focus-visible { box-shadow: inset 0 0 0 2px var(--dorado); }
.jugador-fila__puesto { justify-self: start; }
/*
* En los listados de jugadores -titulares, suplentes, no convocados,
* entrenamiento, enfermeria, plantilla, dorsales y mercado de pases- la
* demarcacion es texto pelado: sin chapa, sin borde y del mismo blanco para
* las cuatro lineas. Aca la fila se lee por el dato, no por la banda a la
* que pertenece el jugador; el color por linea se sigue usando en la
* pizarra, donde ubica de un vistazo.
*/
.bloque-plantel__tabla .jugador-fila .chapa--pos,
.jugador-fila--enfermeria .chapa--pos,
.tabla--plantel .chapa--pos,
.tabla--jugadores .chapa--pos,
.once-rival .chapa--pos {
min-width: 0;
padding: 0;
background: none;
border: 0;
color: var(--texto);
}
/*
* Expulsado durante el partido. Queda a la vista pero apagado y con la
* franja roja: sigue en la lista porque estuvo en la cancha, pero no se lo
* puede reemplazar y el equipo termina con uno menos.
*/
.jugador-fila.es-expulsado {
border-left: 3px solid var(--peligro-fuerte);
background: rgba(201, 61, 40, 0.12);
opacity: 0.72;
}
.jugador-fila.es-expulsado .jugador-fila__nombre { text-decoration: line-through; }
.jugador-fila__nombre {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
}
.jugador-fila__dato {
display: none;
color: var(--texto-suave);
font-size: 0.78rem;
}
/*
* Dentro de una tabla de plantel estan todas las columnas siempre: la
* tabla es ancha y se corre de lado en vez de esconder datos. Fuera de
* ella -la enfermeria, por ejemplo- se siguen escondiendo hasta que hay
* lugar.
*/
.bloque-plantel__tabla .jugador-fila__dato {
display: block;
color: var(--texto);
}
/*
* Envoltorio de cada tabla del plantel. Guarda el desborde horizontal
* para que en el telefono se pueda arrastrar la tabla de costado y ver
* las facetas, sin que la pagina entera se vaya de ancho.
*/
.bloque-plantel__tabla {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/*
* Cada tabla declara su ancho minimo: por debajo se corre de lado, no se
* apretuja. La del plantel lleva trece columnas; la de entrenamiento, las
* nueve facetas mas las pastillas, y necesita bastante mas.
*/
.bloque-plantel__tabla > * { min-width: 49rem; }
.bloque-plantel__tabla--entrena > * { min-width: 42rem; }
/* El dorsal abre la fila y esta siempre, hasta en el telefono. */
.jugador-fila__dorsal {
color: var(--texto);
font-family: var(--mono);
font-size: 0.78rem;
text-align: center;
}
.jugador-fila__dato--edad,
.jugador-fila__dato--forma,
.jugador-fila__dato--moral,
.jugador-fila__dato--energia,
.jugador-fila__dato--rasgo {
font-family: var(--mono);
text-align: center;
}
/*
* La energia va siempre en el color del texto, como las demas cifras: el
* cansancio lo cuenta el tooltip, no el color.
*/
.jugador-fila__dato--energia,
.jugador-fila__dato--energia.es-nivel-medio,
.jugador-fila__dato--energia.es-nivel-bajo { font-weight: 700; color: var(--texto); }
/*
* La energia va en el color del texto, como las demas cifras de la fila;
* solo cambia de color cuando el jugador esta cansado o agotado.
*/
.celda-energia,
.celda-energia.es-nivel-alto { font-family: var(--mono); font-weight: 700; color: var(--texto); }
.celda-energia.es-nivel-medio { color: var(--aviso); }
.celda-energia.es-nivel-bajo { color: var(--peligro); }
/*
* Contrato: la cifra avisa sola cuanto queda. En rojo el que se termina con
* esta temporada -hay que renovar o se va libre- y en dorado el que se
* termina con la siguiente, que ya conviene ir arreglando.
*/
.celda-contrato.es-vence { color: var(--peligro); font-weight: 700; }
.celda-contrato.es-por-vencer { color: var(--dorado); }
/* Velocidad, regate, agresividad y calidad: cifras como las demas. */
.jugador-fila__dato--rasgo { font-weight: 700; }
/* La demarcacion va junto al nombre, centrada bajo su rotulo y en negrita. */
.jugador-fila__dato--dem {
text-align: center;
font-weight: 700;
}
/* Forma y moral, como el resto de las cifras de la fila: en negrita. */
.jugador-fila__dato--forma,
.jugador-fila__dato--moral {
font-weight: 700;
}
.es-nivel-alto { color: var(--exito); }
.es-nivel-medio { color: var(--texto-suave); }
.es-nivel-bajo { color: var(--peligro); }
/*
* Los cartones -y el OK de quien no tiene ninguno- van centrados en su
* columna, debajo del rotulo EST y en la misma linea que la edad, la
* forma y la moral, que tambien caen al medio de lo suyo.
*/
.jugador-fila__estado {
justify-self: center;
justify-content: center;
min-width: 0;
overflow: hidden;
}
/*
* Lo que rinde hoy. Es la unica cifra con color propio: el resto de la
* fila va en blanco, como las celdas de la clasificacion, y el verde
* marca de un vistazo cual es el dato que resume a los demas.
*/
.jugador-fila__media {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 700;
text-align: center;
color: var(--exito);
}
/*
* La media de las tablas de jugadores se lee igual que la columna MED:
* la marca sigue siendo un .chapa en el HTML, asi que ademas de pintar
* la cifra hay que apagarle el fondo que trae de fabrica.
*/
.tabla--plantel .chapa--media,
.tabla--jugadores .chapa--media,
.once-rival .chapa--media {
min-width: 0;
padding: 0;
background: none;
border: 0;
color: var(--exito);
font-family: var(--mono);
font-size: 0.82rem;
font-weight: 700;
}
/*
* Cabecera de la tabla. Es una fila mas -misma grilla- para que las
* columnas caigan justo encima de los datos de los tres bloques.
*/
.jugador-fila--cabecera {
background: var(--panel-alto);
border-bottom: 2px solid var(--borde-fuerte);
color: var(--dorado);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: default;
}
.jugador-fila--cabecera:hover { background: var(--panel-alto); }
/* El rotulo de la columna del nombre va sin negrita, como pidio el DT. */
.jugador-fila--cabecera .jugador-fila__nombre { font-weight: 400; }
/* En la cabecera son rotulos, no chapas: sin fondo ni relleno. */
.jugador-fila--cabecera .jugador-fila__puesto,
.jugador-fila--cabecera .jugador-fila__dorsal,
.jugador-fila--cabecera .jugador-fila__dato,
.jugador-fila--cabecera .jugador-fila__estado,
.jugador-fila--cabecera .jugador-fila__media {
justify-self: center;
min-width: 0;
background: none;
border: 0;
padding: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
/* Un renglon del banco sin jugador: reservado y a la espera. */
.jugador-fila.es-vacio {
color: var(--texto-tenue);
font-style: italic;
}
.jugador-fila.es-vacio .jugador-fila__nombre { font-weight: 400; }
/* Fuera de puesto: el mismo codigo de color que las fichas de la pizarra. */
.jugador-fila.es-fuera-de-puesto { box-shadow: inset 3px 0 0 var(--aviso); }
.jugador-fila.es-impropio { box-shadow: inset 3px 0 0 var(--peligro); }
/*
* Tomado: apenas se aprieta, antes de mover, la fila se levanta un poco
* para que se vea que el jugador quedo en la mano.
*/
.jugador-fila.es-tomada {
background: rgba(232, 178, 63, 0.2);
box-shadow: inset 0 0 0 2px var(--dorado), var(--sombra2);
cursor: grabbing;
}
/* Mientras viaja, en su renglon queda el hueco de donde salio. */
.jugador-fila.es-arrastrando {
background: var(--panel-hueco);
box-shadow: inset 0 0 0 1px var(--borde-fuerte);
opacity: 0.45;
cursor: grabbing;
}
.jugador-fila.es-arrastrando > * { visibility: hidden; }
/*
* La copia que sigue al puntero. Va en el para que ninguna caja
* con overflow la recorte, y no recibe eventos: si los recibiera, se
* taparia a si misma y no se sabria sobre que fila esta.
*/
.jugador-fila--fantasma {
position: fixed;
top: 0;
left: 0;
z-index: 1200;
margin: 0;
pointer-events: none;
border: 1px solid var(--dorado);
border-radius: var(--r1);
background: var(--panel-alto);
box-shadow: var(--sombra3);
opacity: 0.96;
cursor: grabbing;
}
/* Fila sobre la que se va a soltar: es la que va a cambiar de lugar. */
.jugador-fila.es-destino {
background: rgba(232, 178, 63, 0.24);
box-shadow: inset 0 0 0 2px var(--dorado);
}
/* Mientras se ordena no se selecciona texto sin querer. */
body.es-ordenando {
user-select: none;
cursor: grabbing;
}
.plantel__lateral { min-width: 0; }
/*
* Los numeros de los paneles de fuerza -ataque, defensa, fuera de puesto,
* el aporte del dibujo, el informe del rival- son lecturas de lo mismo:
* el equipo que esta armado. Van con la misma tinta dorada y sin chapa,
* que la cifra sola se lee mejor al lado de su rotulo. Vale para las dos
* columnas laterales -Alineacion y Tacticas- y para los paneles de Ver
* rival. El aviso de fuera de puesto se mantiene, porque ahi el color si
* dice algo.
*/
.plantel__lateral .chapa--ataque,
.plantel__lateral .chapa--defensa,
.plantel__lateral .chapa--puesto,
.alineacion__lateral .chapa--ataque,
.alineacion__lateral .chapa--defensa,
.alineacion__lateral .chapa--puesto,
.panel--cifras .chapa {
min-width: 0;
padding: 0;
background: none;
border: 0;
color: var(--dorado-claro);
}
/* Con gente fuera de puesto avisa el color de la cifra, no una chapa. */
.plantel__lateral .chapa--puesto.es-alerta,
.alineacion__lateral .chapa--puesto.es-alerta {
background: none;
border: 0;
color: var(--aviso);
}
.panel__cifra {
margin: 0 0 var(--e2);
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
color: var(--dorado);
text-align: center;
}
/* --- Entrenamiento: que trabaja cada uno -------------------------------- */
/*
* El trabajo por linea como matriz: filas por demarcacion, columnas por
* faceta y una casilla en cada cruce. Sin texto repetido y comparable de
* un vistazo. En el telefono la tabla se corre de lado dentro de su
* envoltorio en vez de estirar la pagina.
*/
.matriz-envoltorio {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.matriz {
width: 100%;
min-width: 30rem;
border-collapse: separate;
border-spacing: 0;
text-align: center;
}
.matriz th,
.matriz td {
padding: var(--e2) var(--e1);
border-bottom: 1px solid var(--borde);
}
.matriz thead th {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
color: var(--texto-tenue);
cursor: help;
}
.matriz tbody th { text-align: left; }
.matriz tbody tr:last-child th,
.matriz tbody tr:last-child td { border-bottom: 0; }
.matriz tbody tr:hover td { background: rgba(232, 178, 63, 0.06); }
/* La casilla: un cuadrado hundido que se llena de dorado al marcarse. */
.casilla {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
cursor: pointer;
}
.casilla__marca {
display: block;
width: 1.25rem;
height: 1.25rem;
border: 1px solid var(--borde-fuerte);
border-radius: var(--r1);
background: var(--panel-hueco);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.casilla:hover .casilla__marca { border-color: var(--dorado); }
.faceta__control:checked + .casilla__marca {
background: var(--dorado);
border-color: var(--dorado);
box-shadow: inset 0 0 0 3px var(--tinta);
}
.faceta__control:focus-visible + .casilla__marca {
outline: 2px solid var(--dorado);
outline-offset: 2px;
}
/* Cruce que no aplica (reflejos fuera del arco): un punto apagado. */
.casilla--nula::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--borde);
}
/*
* Cada faceta es una pastilla que se enciende al marcarla. Van al medio
* de su tarjeta: son tres o cuatro por linea y se acomodan en dos
* renglones, que apoyados a la izquierda dejaban el segundo renglon
* corto y la tarjeta desbalanceada.
*/
.facetas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--e2);
}
.faceta { display: inline-flex; cursor: pointer; }
.faceta__control {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/*
* Misma chapa que los dibujos de Tacticas: son la misma clase de control
* -una lista de opciones donde la elegida se enciende en dorado-, asi que
* se ven igual. Monoespaciada, esquinas rectas y fondo hundido.
*/
.faceta__texto {
display: inline-block;
padding: 0.2rem 0.5rem;
border: 1px solid var(--borde);
border-radius: var(--r1);
background: var(--panel-hueco);
color: var(--texto-suave);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.faceta:hover .faceta__texto {
border-color: var(--dorado);
color: var(--texto);
}
.faceta__control:checked + .faceta__texto {
background: var(--dorado);
border-color: var(--dorado);
color: var(--tinta);
}
.faceta__control:focus-visible + .faceta__texto {
outline: 2px solid var(--dorado);
outline-offset: 2px;
}
/*
* Las de la tabla son las mismas etiquetas que las de la linea y que los
* dibujos de Tacticas: un solo formato para el mismo control en todo el
* juego. Solo se aprietan un poco entre si, que en la fila hay ocho.
*/
.faceta--compacta .faceta__texto { letter-spacing: 0.04em; }
/*
* Fila del plantel en Entrenamiento: misma tabla que la de Alineacion,
* con las nueve facetas como celdas que se marcan. En pantallas angostas
* la fila se dobla en dos renglones en vez de correrse de lado.
*/
.jugador-fila--entrena {
grid-template-columns: 2.4rem minmax(6rem, 1fr) 2.2rem repeat(9, 2.6rem) 2.6rem;
cursor: default;
}
/* El que lleva plan propio se distingue del que sigue a su linea. */
.jugador-fila--entrena.es-plan-propio { box-shadow: inset 3px 0 0 var(--dorado); }
/*
* La celda de una faceta en Entrenamiento: el numero del perfil dentro de
* una casilla. Va acotada a la fila porque Plantilla usa la misma clase en
* celdas de tabla comunes.
* Apagada, es un dato; con borde dorado, la linea la entrena; llena de
* dorado, el jugador la entrena por plan propio (la casilla marcada).
*/
.jugador-fila--entrena .celda-faceta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: center;
width: 2.2rem;
height: 1.7rem;
border: 1px solid transparent;
border-radius: var(--r1);
font-family: var(--mono);
font-size: 0.82rem;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jugador-fila--entrena .celda-faceta:hover { border-color: var(--dorado); }
.jugador-fila--entrena .celda-faceta.es-entrenando {
border-color: var(--dorado);
color: var(--dorado-claro);
font-weight: 800;
}
.jugador-fila--entrena .celda-faceta:has(.faceta__control:checked) {
background: var(--dorado);
border-color: var(--dorado);
color: var(--tinta);
}
.jugador-fila--entrena .celda-faceta:has(.faceta__control:focus-visible) {
outline: 2px solid var(--dorado);
outline-offset: 2px;
}
/* La que no se entrena en ese puesto: solo el numero, apagado. */
.jugador-fila--entrena .celda-faceta--fija {
cursor: default;
color: var(--texto-tenue);
}
.jugador-fila--entrena .celda-faceta--fija:hover { border-color: transparent; }
/*
* En pantallas angostas la fila se dobla en dos renglones: arriba quien
* es, abajo las nueve facetas con su sigla encima, que reemplaza a la
* cabecera. Nada se corre de lado.
*/
@media (max-width: 991.98px) {
.bloque-plantel__tabla--entrena > * { min-width: 0; }
.jugador-fila--entrena.jugador-fila--cabecera { display: none; }
.jugador-fila--entrena {
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: var(--e1);
row-gap: var(--e2);
padding: var(--e2);
}
.jugador-fila--entrena .jugador-fila__puesto { grid-row: 1; grid-column: 1 / span 1; }
.jugador-fila--entrena .jugador-fila__nombre { grid-row: 1; grid-column: 2 / span 6; }
/* La edad no pesa para elegir que entrena: en la ficha corta se guarda. */
.jugador-fila--entrena .jugador-fila__dato--edad { display: none; }
.jugador-fila--entrena .jugador-fila__media { grid-row: 1; grid-column: 8 / span 2; }
.jugador-fila--entrena .celda-faceta { grid-row: 2; }
.jugador-fila--entrena .jugador-fila__media {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
line-height: 1.1;
font-family: var(--mono);
font-size: 0.76rem;
text-align: center;
}
.jugador-fila--entrena .celda-faceta {
flex-direction: column;
width: 100%;
height: auto;
padding: 0.15rem 0;
gap: 1px;
line-height: 1.1;
font-size: 0.76rem;
}
.jugador-fila--entrena .celda-faceta::before,
.jugador-fila--entrena .jugador-fila__media::before {
content: attr(data-sigla);
color: var(--texto-tenue);
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.06em;
}
.jugador-fila--entrena .celda-faceta:has(.faceta__control:checked)::before { color: var(--tinta); }
}
/*
* Fila de la enfermeria. Comparte el aire de la lista del plantel, pero
* tiene sus propias columnas: aca lo que importa es cuanto falta para
* volver y si se lo puede tratar.
*/
/*
* La columna del nombre tiene ancho propio -crece hasta 12rem y se
* achica si no hay lugar-, asi las cruces de todas las filas caen en la
* misma vertical y les queda aire a la izquierda, en vez de ir pegadas
* al apellido de cada uno. El sobrante queda entre la cruz y el boton.
*/
.jugador-fila--enfermeria {
grid-template-columns: 2.4rem minmax(min-content, 12rem) minmax(0, 1fr) auto;
cursor: default;
}
.jugador-fila--enfermeria .estado-jugador { justify-self: start; }
/*
* La enfermeria se lee como el resto de las listas: todas las filas del
* mismo color sobre el panel, separadas por la linea de abajo, y el
* dorado reservado para lo que se puede tocar.
*/
.jugador-fila--enfermeria { background: var(--panel); }
.jugador-fila--enfermeria:hover {
background: rgba(232, 178, 63, 0.1);
}
.jugador-fila__tratamiento { justify-self: end; }
.jugador-fila__sin-fisio {
color: var(--texto-tenue);
font-size: 0.78rem;
font-style: italic;
}
/* Lo que sale la sesion, dentro del propio boton. */
.boton__detalle {
display: block;
font-size: 0.66rem;
font-weight: 400;
opacity: 0.8;
}
/* --- Pizarra de tacticas: el once sobre el campo ------------------------- */
.alineacion { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.campo-futbol {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
min-height: 480px;
margin-bottom: var(--e3);
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.5);
border-radius: var(--r2);
background:
repeating-linear-gradient(
180deg,
#1c7247 0,
#1c7247 7.14%,
#196540 7.14%,
#196540 14.28%
);
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.campo-futbol__circulo {
position: absolute;
left: 50%;
top: 50%;
width: 28%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border: 2px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
}
.campo-futbol__area {
position: absolute;
left: 50%;
width: 54%;
height: 13%;
transform: translateX(-50%);
border: 2px solid rgba(255, 255, 255, 0.45);
}
.campo-futbol__area--arriba { top: 0; border-top: 0; }
.campo-futbol__area--abajo { bottom: 0; border-bottom: 0; }
.hueco {
position: absolute;
left: var(--hueco-x, 50%);
top: var(--hueco-y, 50%);
transform: translate(-50%, -50%);
/* Cada linea reparte el ancho de la cancha: ver data/generar-css.php. */
width: var(--hueco-ancho, 27%);
max-width: 130px;
/*
* La ficha es el contenedor de su propio texto: una linea de cinco la
* deja casi a la mitad de ancho que una de dos, y los datos se miden
* contra ese ancho (cqi) en vez de llevar un cuerpo fijo.
*/
container-type: inline-size;
text-align: center;
}
/*
* Arrastre de fichas: se agarra el jugador entero, chapa y ficha. El
* gesto tiene que ganarle al scroll del navegador, de ahi el touch-action.
*/
.hueco[data-arrastre] {
touch-action: none;
cursor: grab;
}
.hueco[data-arrastre]:hover .camiseta__tela,
.hueco[data-arrastre]:focus-visible .camiseta__tela {
stroke: var(--dorado);
stroke-width: 1.6;
}
.hueco[data-arrastre]:hover .camiseta { transform: translateY(-2px); }
.hueco.es-arrastrando {
z-index: 5;
}
.hueco.es-arrastrando { cursor: grabbing; }
.hueco.es-arrastrando .camiseta {
transform: scale(1.08);
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.hueco.es-arrastrando .camiseta__tela {
stroke: var(--dorado);
stroke-width: 2;
}
/*
* Cada titular es una camiseta sobre el campo. No es adorno: el color
* dice la linea de un vistazo -amarilla el arco, azul el fondo, verde
* el medio, naranja el ataque- y adentro se imprime lo que hace falta
* para decidir, en el orden en que se lee una espalda de verdad: el
* apellido arriba, el numero grande al medio y el puesto en la basta.
*/
.camiseta {
position: relative;
display: block;
width: 100%;
max-width: 92px;
margin: 0 auto;
aspect-ratio: 1 / 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
transition: transform 0.15s ease;
}
/* La tela: la silueta rellena, que hace de fondo de los tres datos. */
.camiseta__tela {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: stroke 0.15s ease;
}
.camiseta--por { color: #f0c419; --camiseta-tinta: #2a2100; }
.camiseta--def { color: #4a86bd; --camiseta-tinta: #f6fbff; }
.camiseta--med { color: #3fa96a; --camiseta-tinta: #f2fff7; }
.camiseta--del { color: #e0674a; --camiseta-tinta: #fff6f3; }
/*
* Los tres datos van encima de la tela, cada uno en su franja: el
* apellido cruza los hombros, que es la parte ancha; el numero ocupa el
* pecho, y el puesto se apoya en la basta.
*/
.camiseta__nombre,
.camiseta__media,
.camiseta__puesto {
position: absolute;
left: 6%;
right: 6%;
z-index: 1;
color: var(--camiseta-tinta, var(--texto));
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
/*
* El apellido se sale un poco de la tela hacia los costados: entre ficha y
* ficha siempre queda aire -la franja de cada jugador es mas ancha que su
* camiseta-, y ese margen es justo el que le falta al nombre en las lineas
* de cinco. Crece con la ficha hasta un tope, y nunca baja del cuerpo que
* tenia, asi que en las lineas holgadas se lee bastante mejor que antes.
*/
.camiseta__nombre {
top: 18%;
left: -7%;
right: -7%;
font-size: clamp(0.56rem, 12cqi, 0.74rem);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.camiseta__media {
top: 44%;
font-family: var(--mono);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
}
.camiseta__puesto {
bottom: 10%;
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.12em;
opacity: 0.85;
}
/*
* Jugador fuera de su demarcacion: el vivo de la camiseta cambia de
* color y engorda, mas fuerte cuanto peor le queda el puesto. No es
* decoracion, es lo que el equipo pierde de media en el partido.
*/
.camiseta.es-fuera-de-puesto .camiseta__tela,
.camiseta.es-adaptado .camiseta__tela,
.camiseta.es-forzado .camiseta__tela {
stroke: var(--aviso);
stroke-width: 1.8;
}
.camiseta.es-impropio .camiseta__tela {
stroke: var(--peligro);
stroke-width: 2.2;
}
/*
* Chapa con la demarcacion real, prendida en el hombro izquierdo de la
* camiseta: solo aparece cuando el jugador no es de ese puesto.
*/
.hueco__natural {
position: absolute;
top: -6px;
left: -4px;
z-index: 2;
min-width: 0;
padding: 0 0.2rem;
font-size: 0.5rem;
box-shadow: var(--sombra1);
}
.hueco__natural[hidden] { display: none; }
/* Cuantos jugadores estan fuera de puesto, en el panel de rendimiento. */
.chapa--puesto {
background: var(--panel-hueco);
color: var(--texto-suave);
border: 1px solid var(--borde);
}
.chapa--puesto.es-alerta {
background: var(--aviso);
border-color: var(--aviso);
color: var(--tinta);
}
/*
* Los cartones se salen de la ficha por arriba a la derecha: adentro
* comerian el ancho del apellido, que es lo que hay que leer primero.
*/
.hueco__estado {
position: absolute;
top: -8px;
right: -4px;
z-index: 3;
pointer-events: none;
}
/* Atajo de dibujos: botones con el numero y nada mas. */
.formaciones {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--e2);
margin-bottom: var(--e2);
}
.formaciones__boton {
padding: var(--e2) var(--e3);
background: var(--panel-hueco);
border: 1px solid var(--borde);
border-radius: var(--r1);
color: var(--texto-suave);
font-family: var(--mono);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.formaciones__boton:hover {
border-color: var(--dorado);
color: var(--texto);
}
.formaciones__boton.es-elegida {
background: var(--dorado);
border-color: var(--dorado);
color: var(--tinta);
cursor: default;
}
.banco { list-style: none; margin: 0; padding: 0; }
.banco__item {
position: relative;
display: flex;
align-items: center;
gap: var(--e2);
padding: var(--e2);
margin: 0 calc(var(--e2) * -1);
border-bottom: 1px dashed var(--borde);
border-radius: var(--r1);
font-size: 0.85rem;
transition: background-color 0.15s ease;
}
.banco__item:last-child { border-bottom: 0; }
.banco__nombre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* El selector invisible tapa la fila: los cartones no roban el clic. */
.banco__estado { pointer-events: none; }
/*
* Cada lugar del banco es un selector: el