/* ============================================= RESPONSIVE — Mobile & Tablet & Desktop ============================================= Estructura de breakpoints: ≥ 641px → tablet/desktop (nav + escudos-bar fijos) ≤ 640px → móvil (solo nav fijo; escudos-bar oculta) ≤ 600px → móvil pequeño (ajustes tipográficos y de layout) ≤ 400px → móvil muy pequeño (micro-pantallas) */ /* ───────────────────────────────────────────── OFFSET GLOBAL PARA ELEMENTOS FIJOS (navbar + escudos) ───────────────────────────────────────────── El navbar ocupa 68px (position:fixed, top:0). La barra de escudos ocupa ~72px adicionales (position:fixed, top:68px). En móvil (≤640px) la barra de escudos se oculta, por lo que solo hay que compensar el navbar. Las páginas con sección .hero gestionan su propio offset en hero.css. El resto reciben padding-top en body según el viewport y si tienen la barra de escudos o no. Se usan media queries mutuamente excluyentes (≥641px / ≤640px) para evitar conflictos de especificidad entre reglas. Soporte :has() → Chrome 105+, Safari 15.4+, Firefox 121+ ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── iOS — evitar el auto-zoom al enfocar inputs del modal ───────────────────────────────────────────── Safari en iOS hace zoom automático al enfocar un con font-size < 16px y a veces NO revierte el zoom al cerrar el teclado, dejando la página "alejable"/desajustada (pasa al iniciar sesión). Forzar 16px lo evita. En escritorio el tamaño ya ronda 16px, así que no cambia nada visible allí. */ .modal .modal-content form input { font-size: 16px; } /* ───────────────────────────────────────────── Evitar scroll horizontal por el drawer móvil ───────────────────────────────────────────── El menú lateral (.mobile-drawer) se oculta con `transform: translateX(100%)` fuera del borde derecho; su caja genera scroll horizontal en toda la página si no se recorta el eje X (pasaba en juego-moderno.html). Lo recortamos una sola vez aquí —en vez de que cada página repita la regla— para que sea uniforme. */ html { overflow-x: hidden; /* Reserva SIEMPRE el ancho de la barra de scroll vertical. Al poner overflow-x:hidden, pasa a gestionar el scroll y su barra vertical aparecía/desaparecía según el contenido, desplazando lateralmente los elementos centrados (navbar, barra de escudos) al cargar y navegar. `scrollbar-gutter: stable` mantiene el ancho constante → sin ese salto. */ scrollbar-gutter: stable; } body { overflow-x: hidden; } /* Tablet y desktop (≥641px): escudos-bar visible y fija. Separamos páginas con y sin esa barra. */ @media (min-width: 641px) { /* Páginas con barra de escudos: noticias, tienda, equipo… */ body:not(:has(.hero)):has(.escudos-bar) { padding-top: 140px; /* 68px nav + 72px escudos */ } /* Páginas sin barra de escudos: clasificación, perfil, juego… */ body:not(:has(.hero)):not(:has(.escudos-bar)) { padding-top: 80px; /* 68px nav + 12px margen visual */ } } /* Móvil (≤640px): escudos-bar oculta; solo compensar el navbar. */ @media (max-width: 640px) { body:not(:has(.hero)) { padding-top: 68px; /* altura exacta del navbar */ } /* La escudos-bar se oculta a ≤640px; quitar sus 52px del hero */ .hero { padding-top: calc(68px + var(--space-10)); } } /* ── ESCUDOS EN DRAWER ── */ .mobile-drawer__section-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); padding: var(--space-3) var(--space-4) var(--space-1); } .mobile-drawer__escudos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-4); } .mobile-drawer__escudos a { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); padding: var(--space-1); transition: background var(--transition); } .mobile-drawer__escudos a:hover { background: var(--color-surface-offset); } .mobile-drawer__escudos img { width: 36px; height: 36px; object-fit: contain; opacity: 0.75; transition: opacity 0.15s, transform 0.15s; } .mobile-drawer__escudos img:hover { opacity: 1; transform: scale(1.1); } /* ── MOBILE OVERLAY ── */ .mobile-overlay { position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; } .mobile-overlay.open { opacity: 1; visibility: visible; } /* ── MOBILE DRAWER ── */ .mobile-drawer { position: fixed; top: 0; right: 0; z-index: 200; width: min(320px, 85vw); height: 100dvh; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-8) var(--space-6); gap: var(--space-2); } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); } .mobile-drawer__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); color: var(--color-text); } .mobile-drawer__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted); transition: color var(--transition), background var(--transition); } .mobile-drawer__link:hover, .mobile-drawer__link:focus { color: var(--color-text); background: var(--color-surface-offset); } .mobile-drawer__link.active { color: var(--color-primary); background: var(--color-primary-glow); } .mobile-drawer__link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; } .mobile-drawer__divider { height: 1px; background: var(--color-divider); margin: var(--space-3) 0; } .mobile-drawer__actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); } /* ── TABLET ≤1024px ── */ @media (max-width: 1024px) { .hero__inner { gap: var(--space-10); } .footer__grid { grid-template-columns: 2fr 1fr 1fr; } .footer__grid > div:last-child { grid-column: 1 / -1; } } /* ── NAV: colapsa a hamburguesa ≤1200px ── La barra horizontal tiene muchos elementos y solo cabe holgada dentro del contenedor (--content-wide: 1200px). Por debajo de ese ancho se desbordaba y recortaba "Registrarse", así que el nav pasa al menú lateral antes que el resto del layout (que sigue colapsando a 900px). */ @media (max-width: 1200px) { /* Ocultar elementos de navegación de escritorio */ .nav__links { display: none; } .nav__search { display: none; } #btn-login, #btn-register { display: none; } /* Ocultar nombre y "Salir" del nav; se mantienen avatar y escudo favorito. */ .nav-user__name, #nav-user .btn--sm { display: none; } /* Escudo del equipo favorito reducido para que encaje junto al avatar */ .nav-equipo__badge { width: 30px; height: 30px; } /* Compactar el gran hueco logo↔iconos para dar holgura cuando hay sesión iniciada (avatar + escudo); invisible cuando sobra espacio. */ .nav__inner { gap: var(--space-3); } /* Un poco de aire entre el escudo y la hamburguesa */ .nav__menu-btn { margin-left: var(--space-2); display: flex; } /* El botón HyperChallenge del nav se convierte en icono circular para que el hamburguesa tenga espacio. El texto se elimina y se sustituye por el rayo SVG vía nav-component.js. */ .nav__right .btn--accent { width: 36px; height: 36px; padding: 0; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Círculo: se muestra el icono ⚡ y se oculta el texto */ .nav__right .btn--accent .hc-text { display: none; } .nav__right .btn--accent .hc-icon { display: block; } .nav__right .btn--accent svg { width: 18px; height: 18px; flex-shrink: 0; } } /* ── TABLET / SMALL DESKTOP ≤900px ── */ @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); } .hero__panel { order: -1; } .news-grid { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .hc-banner__inner { flex-direction: column; text-align: center; } .hc-banner__cta { justify-content: center; } /* Hero: los grid items tienen min-width:auto por defecto y no se encogen más allá de su contenido, provocando overflow horizontal. min-width:0 permite que el grid los comprima al ancho disponible. */ .hero__left, .hero__panel { min-width: 0; width: 100%; } /* El subtítulo tiene max-width:44ch que en móvil puede superar el ancho del viewport; lo limitamos al contenedor. */ .hero__subtitle { max-width: 100%; } /* Tables: horizontal scroll */ .full-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .full-table-wrap table { min-width: 700px; } } /* ── MOBILE ≤600px ── */ @media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-wrap: wrap; gap: var(--space-4); justify-content: center; text-align: center; } .hero__stats { flex-direction: column; gap: var(--space-4); } .hc-banner { padding: var(--space-8) 0; } .hero { min-height: auto; padding-top: calc(68px + var(--space-10)); padding-bottom: var(--space-16); } .hero__title { font-size: clamp(2.5rem, 1rem + 6vw, 5rem); } .container { padding-inline: var(--space-4); } .container--wide { padding-inline: var(--space-4); } /* Panel cards: smaller padding */ .panel-card__header { padding: var(--space-3) var(--space-4); } .standings-table th, .standings-table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } /* Clasificación completa en móvil: compactar la columna EQUIPO para que los PUNTOS entren en pantalla sin scroll horizontal. */ .full-table-wrap table { min-width: 600px; } .full-table-wrap table td, .full-table-wrap table th { padding: var(--space-2) var(--space-1); } /* El número de posición, más centrado entre el borde y el escudo. */ .full-table-wrap table td:first-child, .full-table-wrap table th:first-child { padding-left: var(--space-3); padding-right: var(--space-2); } /* El badge ASCENSO/PLAYOFF es redundante en móvil (la fila ya va coloreada por zona): se oculta para liberar el ancho que empuja los puntos fuera. */ .full-table-wrap .zone-badge { display: none; } /* Escudo pegado al nombre y nombre algo más corto → columna EQUIPO estrecha. */ .full-table-wrap .standings-row__team { gap: var(--space-2); } .full-table-wrap .standings-row__name { max-width: 100px; } .match-row { padding: var(--space-2) var(--space-3); gap: var(--space-2); } .match-team { font-size: var(--text-xs); } /* Ticker adjust */ .ticker { height: 44px; } .ticker__track { gap: var(--space-4); } /* Section headers */ .section { padding-block: var(--space-10); } } /* ── VERY SMALL ≤400px ── */ @media (max-width: 400px) { .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { justify-content: center; text-align: center; } .hc-banner__cta { flex-direction: column; align-items: stretch; } .hc-banner__cta .btn--white { text-align: center; justify-content: center; } .nav__inner { padding-inline: var(--space-3); } /* Escudo favorito aún más pequeño para no saturar el nav estrecho */ .nav-equipo__badge { width: 26px; height: 26px; } .equipo-card img { max-width: 100px; } } /* ── ZOOM SUPPORT ── */ @media (min-resolution: 1.5dppx) { .full-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } }