/* ---- Cristal (glassmorphism): toda la app ---- Seleccionable en Ajustes → Estilo (Normal/Cristal), independiente del tema claro/oscuro. Por defecto (data-estilo="normal" o sin el atributo) estas reglas no aplican y todo se queda con el aspecto de siempre. Aplica a cualquier .card (todas las pantallas comparten esa clase base) más la barra superior/inferior, para que la sensación sea consistente en toda la app y no solo en un par de pantallas sueltas. El cristal necesita algo de color detrás para notarse (blur sobre un fondo plano no se ve): de ahí el fondo con degradado radial en (ver más abajo), en vez de un div aparte con position:fixed. */ :root[data-estilo="cristal"] .card, :root[data-estilo="cristal"] .card-cristal, :root[data-estilo="cristal"] .tarjeta-partido, :root[data-estilo="cristal"] .tarjeta-rivales { background: var(--cristal-fondo); border: 1px solid var(--cristal-borde); border-radius: var(--radio); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--sombra), inset 0 1px 0 var(--cristal-brillo); position: relative; } :root[data-estilo="cristal"] header.topbar { background-image: none; background-color: var(--cristal-fondo); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); color: var(--texto); border-bottom: 1px solid var(--cristal-borde); box-shadow: none; } :root[data-estilo="cristal"] header.topbar select, :root[data-estilo="cristal"] .boton-gestion { background: var(--superficie-alta); border-color: var(--cristal-borde); color: var(--texto); } :root[data-estilo="cristal"] .boton-gestion:active { background: var(--cristal-fondo); } :root[data-estilo="cristal"] nav.bottomnav { background: var(--cristal-fondo); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--cristal-borde); } /* El fondo va en #app (el contenedor que envuelve toda la app), sin "fixed": así se estira con el contenido real (#app crece con su contenido, no está limitado a la altura del viewport) y cubre del todo sin importar cuánto mida la pantalla ni a qué se haya hecho scroll — nada de intentar mantenerlo "clavado" al viewport. */ :root[data-estilo="cristal"] #app { background: linear-gradient( 135deg, color-mix(in srgb, var(--verde) 18%, var(--gris-100)) 0%, var(--gris-100) 42%, var(--gris-100) 58%, color-mix(in srgb, var(--acento-2) 18%, var(--gris-100)) 100% ); } :root[data-estilo="cristal"] .modal-contenido { background: var(--cristal-fondo); border: 1px solid var(--cristal-borde); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--sombra-alta), inset 0 1px 0 var(--cristal-brillo); } :root[data-estilo="cristal"] .modal-cerrar { border: 1px solid var(--cristal-borde); background: var(--cristal-fondo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }