/* ========================================================================== RefSim — Simulador arbitral IFAB Hoja de estilos v3 · identidad "cabina VAR" · arquitectura multipágina -------------------------------------------------------------------------- Compartida por todas las páginas: index.html (Hub), modo-practica.html, modo-examen.html y estadisticas.html. ÍNDICE 01. Tokens (variables) + temas white-label 02. Reset y base 03. Layout general 04. Scorebug (cabecera) 05. Selector de idioma y acceso 06. Modal de autenticación 07. Publicidad 08. Monitor VAR y campo 09. Marcador de posición 10. Panel de situación 11. Botones de decisión 12. Feedback 13. Pie de página 13b–13j. Utilidades, tema, breadcrumb, hero, resumen, tarjetas del hub, intro de examen, acta de examen, página de estadísticas 14. Responsive 15. Accesibilidad y preferencias ========================================================================== */ /* ========================================================================== 01. TOKENS ========================================================================== */ :root { /* --- Superficies --- */ --noche: #070E0C; --noche-2: #0A1512; --panel: #0F1A16; --panel-alto: #142520; --panel-glass: rgba(20, 37, 32, 0.62); --linea: rgba(237, 237, 230, 0.10); --linea-fuerte: rgba(237, 237, 230, 0.22); /* --- Acentos arbitrales --- */ --amarilla: #F5C518; --amarilla-clara: #FFD95A; --amarilla-oscura: #B98F0A; --roja: #E63946; --roja-clara: #FF5C6B; --roja-oscura: #9B1F2B; /* --- Césped --- */ --verde: #2E9B5E; --verde-claro: #3FD684; --verde-oscuro: #1B5E3C; --cesped-a: #2B8F58; --cesped-b: #24794A; /* --- Texto --- */ --papel: #EDEDE6; --tenue: #93A79E; --tenue-oscuro: #62786F; /* --- Tipografía --- */ --fuente-display: 'Barlow Condensed', 'Inter', sans-serif; --fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --paso-0: 0.94rem; --paso-1: 1.05rem; --paso-2: 1.45rem; --paso-3: 2rem; /* --- Formas y profundidad --- */ --radio-s: 8px; --radio-m: 14px; --radio-l: 20px; --radio-pill: 999px; --sombra: 0 24px 50px -24px rgba(0, 0, 0, 0.85); --sombra-suave: 0 10px 24px -14px rgba(0, 0, 0, 0.7); --brillo-amarillo: 0 0 0 1px rgba(245, 197, 24, 0.35), 0 10px 28px -14px rgba(245, 197, 24, 0.55); --brillo-verde: 0 0 0 1px rgba(63, 214, 132, 0.35), 0 10px 28px -14px rgba(63, 214, 132, 0.55); /* --- Ritmo y movimiento --- */ --gap: 18px; --ancho-max: 1120px; --rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1); --medio: 260ms cubic-bezier(0.22, 0.8, 0.3, 1); --lento: 520ms cubic-bezier(0.22, 0.8, 0.3, 1); /* --- Lienzo de referencia del campo (coordenadas posX / posY) --- */ --campo-ancho-ref: 760; --campo-alto-ref: 450; /* --- Identidad (logotipo) --- */ --marca-logo-tam: 34px; } /* ========================================================================== 01b. TEMAS — sistema white-label -------------------------------------------------------------------------- Todo el archivo consume únicamente los tokens de arriba (--amarilla, --verde, --roja, --noche…), nunca valores sueltos. Para vestir RefSim con la identidad de otra federación no se toca ni una regla: se añade un bloque de tema aquí y se activa con ``. Ejemplo incluido: "atlantico" (acento azul/naranja) demuestra el patrón. Para una federación real, basta con sustituir los seis valores de acento y, si aplica, el logotipo en el del header. ========================================================================== */ :root[data-tema="atlantico"] { --amarilla: #FFB238; --amarilla-clara: #FFC968; --amarilla-oscura: #C77E10; --verde: #2E7FD6; --verde-claro: #5FA8F5; --verde-oscuro: #1B4A80; --cesped-a: #2C6FB8; --cesped-b: #24599A; } /* Segundo ejemplo de tema white-label: acento granate/oro. */ :root[data-tema="granate"] { --amarilla: #D6A24B; --amarilla-clara: #E8C27A; --amarilla-oscura: #A8791F; --verde: #8C1D2B; --verde-claro: #B9394A; --verde-oscuro: #5C1220; --cesped-a: #7A1B2A; --cesped-b: #611521; } /* ========================================================================== 02. RESET Y BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; font-family: var(--fuente-texto); font-size: var(--paso-0); line-height: 1.55; color: var(--papel); background-color: var(--noche); background-image: radial-gradient(1100px 620px at 50% -18%, rgba(46, 155, 94, 0.18), transparent 62%), radial-gradient(760px 420px at 100% 0%, rgba(245, 197, 24, 0.07), transparent 60%), linear-gradient(180deg, var(--noche-2), var(--noche) 55%); background-attachment: fixed; border-top: 3px solid var(--amarilla); -webkit-font-smoothing: antialiased; } /* Textura fina de "señal de emisión" sobre todo el fondo */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px ); opacity: 0.6; } img, svg { display: block; max-width: 100%; } button, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--amarilla); outline-offset: 3px; border-radius: var(--radio-s); } ::selection { background: rgba(245, 197, 24, 0.3); } /* ========================================================================== 03. LAYOUT GENERAL ========================================================================== */ /* Cristal reutilizable: base de todos los paneles */ .scorebug, .sidebar, .topbar, .monitor, .panel, .ad-slot, .auth-card, .glass-panel { background: linear-gradient(165deg, rgba(25, 45, 38, 0.86), rgba(12, 24, 20, 0.92)); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: var(--sombra); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } /* ========================================================================== 03b. APP SHELL — sidebar (escritorio) + topbar + bottombar (móvil) -------------------------------------------------------------------------- Sustituye la antigua cabecera "scorebug" de ancho completo por un panel de navegación lateral fijo en escritorio y una barra inferior de pestañas en móvil, siguiendo el patrón de dashboard de referencia. ========================================================================== */ .app-shell { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 22px 20px 0; display: flex; align-items: flex-start; gap: 20px; } /* --- Sidebar (navegación principal, ≥960px) --- */ .sidebar { position: sticky; top: 22px; flex: 0 0 232px; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 16px; max-height: calc(100dvh - 44px); overflow-y: auto; scrollbar-width: thin; } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; margin-bottom: 8px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); } .sidebar__mark { flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(63, 214, 132, 0.4)); } .sidebar__brandname { font-family: var(--fuente-display); font-weight: 800; font-size: 1.32rem; letter-spacing: 0.3px; } .sidebar__brandname b { color: var(--verde-claro); font-weight: 800; } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; } .sidebar .navlink { padding: 11px 12px; border-radius: var(--radio-m); border-bottom: none; font-size: 0.87rem; } .sidebar .navlink:hover { color: var(--papel); background: rgba(255, 255, 255, 0.05); } .sidebar .navlink.is-activo { color: var(--noche); background: linear-gradient(180deg, var(--verde-claro), var(--verde)); box-shadow: 0 10px 24px -14px rgba(63, 214, 132, 0.6); } .sidebar__ajustes { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linea); } .sidebar__ajustes > summary { list-style: none; cursor: pointer; } .sidebar__ajustes > summary::-webkit-details-marker { display: none; } .sidebar__ajustes[open] > summary { color: var(--papel); background: rgba(255, 255, 255, 0.05); } .sidebar__ajustes-panel { padding: 12px 12px 2px; animation: subir var(--medio) both; } .sidebar__ajustes-titulo { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tenue-oscuro); margin-bottom: 8px; } /* --- Columna de contenido principal --- */ .app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); } /* --- Topbar --- */ .topbar { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 18px; overflow: hidden; } .topbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--verde-claro) 18%, var(--amarilla) 82%, transparent); opacity: 0.85; } .topbar__brand { display: none; align-items: center; gap: 9px; color: inherit; text-decoration: none; flex-shrink: 0; } .topbar__mark { filter: drop-shadow(0 0 8px rgba(63, 214, 132, 0.35)); } .topbar__brandname { font-family: var(--fuente-display); font-weight: 800; font-size: 1.25rem; } .topbar__spacer { flex: 1 1 auto; } .topbar__stats { flex-shrink: 0; } .topbar__reloj { flex-shrink: 0; } .topbar__controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } /* --- Bottombar (navegación principal, móvil) --- */ .bottombar { display: none; } /* ========================================================================== 04. SCOREBUG (cabecera) ========================================================================== */ .scorebug { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 22px; padding: 15px 20px; overflow: hidden; } /* Filo superior amarillo del grafismo televisivo */ .scorebug::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amarilla) 18%, var(--verde-claro) 82%, transparent); opacity: 0.85; } .scorebug__brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; } .scorebug__mark { flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.35)); } .scorebug h1 { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.1rem); letter-spacing: 0.3px; line-height: 0.95; } .scorebug__tag { color: var(--tenue); font-size: 0.8rem; margin-top: 2px; } .scorebug__controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* --- Marcador de estadísticas --- */ .scorebug__stats { display: flex; gap: 8px; } .stat { position: relative; min-width: 76px; padding: 6px 12px; text-align: right; background: rgba(8, 18, 15, 0.55); border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; } /* Franja de progreso de la precisión: se alimenta de --valor-precision (JS) */ .stat:nth-child(2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verde-claro); width: var(--valor-precision, 0%); transition: width var(--lento); } .stat dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.4px; color: var(--tenue-oscuro); } .stat dd { font-family: var(--fuente-display); font-size: 1.7rem; font-weight: 700; line-height: 1.05; color: var(--verde-claro); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(63, 214, 132, 0.28); } .stat:nth-child(2) dd { color: var(--papel); text-shadow: none; } .stat:nth-child(3) dd { color: var(--amarilla-clara); text-shadow: 0 0 18px rgba(245, 197, 24, 0.25); } /* ========================================================================== 04b. NAVEGACIÓN PRINCIPAL ========================================================================== */ .scorebug__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .navlink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 0.82rem; font-weight: 600; color: var(--tenue); background: none; border: none; border-bottom: 2px solid transparent; text-decoration: none; cursor: pointer; transition: color var(--rapido), border-color var(--rapido); } .navlink svg { flex-shrink: 0; } .navlink:hover { color: var(--papel); } .navlink.is-activo { color: var(--verde-claro); border-bottom-color: var(--verde-claro); } /* ========================================================================== 05. SELECTOR DE IDIOMA Y ACCESO ========================================================================== */ .idioma { display: flex; gap: 4px; padding: 3px; background: rgba(8, 18, 15, 0.6); border: 1px solid var(--linea); border-radius: var(--radio-pill); } .idioma button { padding: 4px 9px; font-size: 0.95rem; line-height: 1; background: transparent; border: 1px solid transparent; border-radius: var(--radio-pill); cursor: pointer; transition: background var(--rapido), transform var(--rapido), border-color var(--rapido); } .idioma button:hover { background: rgba(63, 214, 132, 0.12); transform: translateY(-1px); } .idioma button[aria-pressed="true"], .idioma button.is-activo { background: rgba(63, 214, 132, 0.18); border-color: rgba(63, 214, 132, 0.45); color: var(--verde-claro); } .btn-acceso { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 0.8rem; font-weight: 700; color: var(--noche); background: linear-gradient(180deg, var(--verde-claro), var(--verde)); border: none; border-radius: var(--radio-pill); cursor: pointer; box-shadow: var(--brillo-verde); transition: transform var(--rapido), box-shadow var(--rapido), filter var(--rapido); } .btn-acceso:hover { transform: translateY(-1px); filter: brightness(1.06); } .btn-acceso:active { transform: translateY(0); } #auth-container-ui { display: flex; align-items: center; gap: 8px; } /* Pill de cuenta autenticada, en la cabecera: solo avatar + nombre. El botón de cerrar sesión vive aparte, al pie de la página (ver .pie-sesion / .btn-cerrar-sesion-pie más abajo). */ .cuenta-pill { padding: 5px 12px; background: rgba(8, 18, 15, 0.6); border: 1px solid var(--linea); border-radius: var(--radio-pill); } .cuenta-pill__avatar { font-size: 0.1rem; } .cuenta-pill__nombre { font-size: 0.78rem; font-weight: 700; color: var(--papel); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Botón "Cerrar sesión" al pie de página --- */ .pie-sesion { display: flex; justify-content: center; padding: 4px 0 18px; } .pie-sesion:empty { display: none; } .btn-cerrar-sesion-pie { padding: 9px 20px; font-size: 0.82rem; font-weight: 700; color: var(--papel); background: rgba(230, 57, 70, 0.18); border: 1px solid rgba(230, 57, 70, 0.45); border-radius: var(--radio-pill); cursor: pointer; transition: background var(--rapido); } .btn-cerrar-sesion-pie:hover { background: rgba(230, 57, 70, 0.32); } .ajustes-card { max-width: 360px; } /* ========================================================================== 06. MODAL DE AUTENTICACIÓN ========================================================================== */ #auth-modal, #ajustes-modal { position: fixed; inset: 0; z-index: 1000; /* display lo gobierna el JS (none / flex) */ justify-content: center; align-items: center; padding: 20px; background: rgba(3, 8, 6, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: velo var(--medio) both; } @keyframes velo { from { opacity: 0; } to { opacity: 1; } } .auth-card { position: relative; width: 100%; max-width: 390px; padding: 26px 24px 22px; border-radius: var(--radio-l); animation: subir var(--medio) both; } @keyframes subir { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .auth-card h3 { font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; } .auth-card__intro { color: var(--tenue); font-size: 0.86rem; margin-bottom: 18px; } .auth-card__cerrar { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; font-size: 1.3rem; line-height: 1; color: var(--tenue); background: none; border: none; border-radius: 50%; cursor: pointer; transition: color var(--rapido), background var(--rapido); } .auth-card__cerrar:hover { color: var(--papel); background: rgba(255, 255, 255, 0.08); } .campo-texto { display: block; width: 100%; margin-bottom: 12px; padding: 12px 14px; color: var(--papel); background: rgba(8, 18, 15, 0.7); border: 1px solid var(--linea); border-radius: var(--radio-s); transition: border-color var(--rapido), box-shadow var(--rapido); } .campo-texto::placeholder { color: var(--tenue-oscuro); } .campo-texto:focus { outline: none; border-color: rgba(245, 197, 24, 0.55); box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.14); } .auth-card__acciones { display: flex; gap: 10px; margin-top: 4px; } .btn-auth { text-decoration: none; flex: 1; padding: 11px 12px; font-weight: 700; font-size: 0.9rem; color: var(--noche); border: none; border-radius: var(--radio-s); cursor: pointer; transition: transform var(--rapido), filter var(--rapido); } .btn-auth--primario { background: linear-gradient(180deg, var(--verde-claro), var(--verde)); } .btn-auth--secundario { background: linear-gradient(180deg, var(--amarilla-clara), var(--amarilla)); } .btn-auth:hover { transform: translateY(-1px); filter: brightness(1.06); } #auth-status { margin-top: 14px; font-size: 0.8rem; text-align: center; color: var(--tenue); min-height: 1.2em; } /* --- Botón "Continuar con Google" y separador --- */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 12px; margin-bottom: 16px; font-weight: 600; font-size: 0.9rem; color: var(--papel); background: rgba(237, 237, 230, 0.06); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); cursor: pointer; transition: transform var(--rapido), background var(--rapido); } .btn-google:hover { background: rgba(237, 237, 230, 0.12); transform: translateY(-1px); } .btn-google svg { flex-shrink: 0; } .auth-divisor { position: relative; text-align: center; margin-bottom: 16px; color: var(--tenue-oscuro); font-size: 0.74rem; } .auth-divisor::before, .auth-divisor::after { content: ""; position: absolute; top: 50%; width: calc(50% - 68px); height: 1px; background: var(--linea); } .auth-divisor::before { left: 0; } .auth-divisor::after { right: 0; } /* --- Enlace "¿Olvidaste tu contraseña?" --- */ .auth-link-olvido { display: block; width: 100%; margin: -4px 0 14px; padding: 0; background: none; border: none; color: var(--tenue); font-size: 0.78rem; text-align: right; text-decoration: underline; cursor: pointer; transition: color var(--rapido); } .auth-link-olvido:hover { color: var(--amarilla-clara); } /* --- Vistas del modal: selector / iniciar sesión / registrarse --- */ .auth-vista { display: none; } #auth-modal[data-modo="selector"] .auth-vista[data-vista="selector"], #auth-modal[data-modo="login"] .auth-vista[data-vista="login"], #auth-modal[data-modo="registro"] .auth-vista[data-vista="registro"] { display: block; animation: subir var(--rapido) both; } .auth-opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .btn-auth--bloque { display: block; width: 100%; padding: 13px 14px; font-size: 0.95rem; text-align: center; } .auth-vista .btn-auth--bloque { margin-top: 2px; } .auth-volver { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: none; color: var(--tenue); font-size: 0.82rem; text-align: center; cursor: pointer; transition: color var(--rapido); } .auth-volver:hover { color: var(--papel); } .auth-card__nota { color: var(--tenue-oscuro); font-size: 0.75rem; margin-top: 10px; } /* En móvil, la tarjeta de acceso ocupa el ancho disponible y los campos son lo bastante altos para tocarlos con el dedo. */ @media (max-width: 480px) { #auth-modal { padding: 12px; align-items: flex-start; overflow-y: auto; } .auth-card { max-width: 100%; margin: 12px 0; padding: 22px 18px 18px; } .campo-texto { font-size: 16px; /* evita el zoom automático de iOS al enfocar */ padding: 13px 14px; } .btn-auth--bloque, .btn-google { padding: 14px 12px; } } /* ========================================================================== 07. PUBLICIDAD ========================================================================== */ .ad-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px 14px; background: rgba(15, 26, 22, 0.5); box-shadow: none; } .ad-slot__label { font-size: 0.66rem; letter-spacing: 0.4px; color: var(--tenue-oscuro); } .ad-slot__unit { width: 100%; display: flex; justify-content: center; min-height: 90px; } .ad-slot--rectangle .ad-slot__unit { min-height: 250px; } /* Agrupa dos .ad-slot (p. ej. los dos espacios de una misma página cuando van juntos): en pantallas anchas se colocan uno junto a otro, en móvil se apilan. No cambia el aspecto de cada .ad-slot por separado. */ .ad-group { display: flex; flex-wrap: wrap; gap: var(--gap); } .ad-group .ad-slot { flex: 1 1 260px; } /* Modo Carrera: durante el partido (campo, descripción, respuestas) no se muestra publicidad, igual que ya se oculta el pie de página — así la pantalla de juego no cambia respecto a como funciona ahora. Fuera del partido (inicio, dashboard, resúmenes) la publicidad se ve con normalidad. */ body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .ad-slot, body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .ad-group { display: none; } /* ========================================================================== 07b. TARJETAS DE MODO ========================================================================== */ .modecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .modecard { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-align: left; background: linear-gradient(165deg, rgba(25, 45, 38, 0.86), rgba(12, 24, 20, 0.92)); border: 1px solid var(--linea); border-radius: var(--radio-m); cursor: pointer; transition: border-color var(--rapido), transform var(--rapido), background var(--rapido); } .modecard:hover { transform: translateY(-1px); border-color: var(--linea-fuerte); } .modecard.is-activo { border-color: rgba(46, 155, 94, 0.5); background: linear-gradient(165deg, rgba(46, 155, 94, 0.22), rgba(12, 24, 20, 0.94)); box-shadow: 0 0 0 1px rgba(46, 155, 94, 0.35); } .modecard__icono { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radio-s); background: rgba(46, 155, 94, 0.16); color: var(--verde-claro); } .modecard__icono--ambar { background: rgba(245, 197, 24, 0.16); color: var(--amarilla); } .modecard__icono--tenue { background: rgba(147, 167, 158, 0.14); color: var(--tenue); } .modecard__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .modecard__texto strong { font-size: 0.92rem; font-weight: 700; color: var(--papel); } .modecard__texto small { font-size: 0.76rem; color: var(--tenue); } .modecard__reloj { margin-left: auto; display: none; align-items: center; font-family: var(--fuente-display); font-size: 0.95rem; font-weight: 700; color: var(--amarilla); flex-shrink: 0; } /* ========================================================================== 08. MONITOR VAR Y CAMPO ========================================================================== */ .review { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap); align-items: start; } .monitor { position: relative; overflow: hidden; } /* Corchetes de encuadre: el gesto "cámara de revisión" del monitor VAR. Es el único elemento decorativo con movimiento propio de la página. */ .hud-esquina { position: absolute; z-index: 6; width: 22px; height: 22px; pointer-events: none; opacity: 0.8; transition: opacity var(--medio), width var(--medio), height var(--medio); } .hud-esquina--tl { top: 10px; left: 10px; border-top: 2px solid var(--amarilla); border-left: 2px solid var(--amarilla); } .hud-esquina--tr { top: 10px; right: 10px; border-top: 2px solid var(--amarilla); border-right: 2px solid var(--amarilla); } .hud-esquina--bl { bottom: 10px; left: 10px; border-bottom: 2px solid var(--amarilla); border-left: 2px solid var(--amarilla); } .hud-esquina--br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--amarilla); border-right: 2px solid var(--amarilla); } .monitor:hover .hud-esquina { width: 28px; height: 28px; opacity: 1; } .monitor__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; font-size: 0.76rem; letter-spacing: 0.3px; color: var(--tenue); background: rgba(8, 18, 15, 0.55); border-bottom: 1px solid var(--linea); flex-wrap: wrap; } .monitor__badge { display: inline-flex; align-items: center; gap: 9px; } .monitor__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--roja); box-shadow: 0 0 10px var(--roja); animation: parpadeo 2.2s ease-in-out infinite; } .monitor__nav { display: inline-flex; align-items: center; gap: 6px; } .monitor__pill { padding: 3px 10px; font-size: 0.72rem; font-weight: 700; color: var(--amarilla); background: rgba(245, 197, 24, 0.12); border: 1px solid rgba(245, 197, 24, 0.35); border-radius: var(--radio-pill); white-space: nowrap; } .monitor__flecha { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--tenue); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linea); border-radius: 50%; cursor: pointer; transition: color var(--rapido), border-color var(--rapido); } .monitor__flecha:hover:not(:disabled) { color: var(--papel); border-color: var(--linea-fuerte); } .monitor__flecha:disabled { opacity: 0.35; cursor: not-allowed; } @keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --- El campo --- */ .pitch-stage { position: relative; width: 100%; } .pitch { position: relative; width: 100%; aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref); overflow: hidden; background-color: var(--cesped-b); background-image: repeating-linear-gradient( 90deg, var(--cesped-a) 0 6.25%, var(--cesped-b) 6.25% 12.5% ); } /* Foco de estadio + viñeta: da volumen al césped plano */ .pitch::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 50% -20%, rgba(255, 255, 255, 0.2), transparent 55%), radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%); mix-blend-mode: soft-light; } /* Capa de emisión: líneas de barrido muy sutiles */ .pitch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 4px ); opacity: 0.45; } .pitch__line, .pitch__circulo { position: absolute; border: 2px solid rgba(255, 255, 255, 0.78); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* Perímetro del terreno */ .pitch__line--borde { inset: 4%; } .pitch__centro { top: 4%; bottom: 4%; left: 50%; width: 0; transform: translateX(-1px); border-width: 0 0 0 2px; box-shadow: none; } .pitch__circulo { top: 50%; left: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; } /* Punto central */ .pitch__circulo::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.85); border-radius: 50%; transform: translate(-50%, -50%); } .pitch__area-izq, .pitch__area-der { top: 20%; bottom: 20%; width: 15%; } .pitch__area-izq { left: 4%; border-left: none; } .pitch__area-der { right: 4%; border-right: none; } .pitch__area-chica-izq, .pitch__area-chica-der { top: 34%; bottom: 34%; width: 6.5%; } .pitch__area-chica-izq { left: 4%; border-left: none; } .pitch__area-chica-der { right: 4%; border-right: none; } /* Puntos de penalti */ .pitch__area-izq::after, .pitch__area-der::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.85); border-radius: 50%; transform: translateY(-50%); } .pitch__area-izq::after { right: 14%; } .pitch__area-der::after { left: 14%; } /* ========================================================================== 08b. BARRA DE REPRODUCCIÓN Y METADATOS ========================================================================== */ .playbar { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: rgba(8, 18, 15, 0.72); border-top: 1px solid var(--linea); } .playbar__play { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--noche); background: var(--papel); border: none; border-radius: 50%; cursor: pointer; } .playbar__tiempo { flex-shrink: 0; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--tenue); } .playbar__barra { position: relative; flex: 1; height: 4px; background: rgba(255, 255, 255, 0.14); border-radius: var(--radio-pill); overflow: visible; } .playbar__progreso { position: absolute; inset: 0 auto 0 0; width: 52%; background: var(--verde-claro); border-radius: var(--radio-pill); } .playbar__thumb { position: absolute; top: 50%; left: 52%; width: 10px; height: 10px; background: var(--papel); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); } .playbar__chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 22px; padding: 0 7px; font-size: 0.65rem; font-weight: 700; color: var(--tenue); background: rgba(255, 255, 255, 0.08); border: none; border-radius: 5px; cursor: pointer; } .playbar__chip--hd { cursor: default; color: var(--papel); } .monitor__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); } .meta__item { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: rgba(10, 21, 18, 0.92); } .meta__icono { flex-shrink: 0; font-size: 1rem; opacity: 0.9; } .meta__item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .meta__label { font-size: 0.66rem; font-weight: 600; color: var(--tenue-oscuro); } .meta__valor { font-size: 0.84rem; font-weight: 700; color: var(--papel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Práctica y Examen ya no muestran el bloque "Minuto" (dato de tiempo no necesario para resolver la jugada), así que su monitor__meta pasa a 2 columnas en vez de 3. Acotado a estas dos páginas mediante data-pagina para no afectar a Carrera, que conserva su barra de reproducción y su metadato de minuto tal cual estaban. Solo aplica por encima del punto de corte móvil (680px), donde monitor__meta ya se colapsa a 1 columna. */ @media (min-width: 681px) { body[data-pagina="practica"] .monitor__meta, body[data-pagina="examen"] .monitor__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 09. MARCADOR DE POSICIÓN -------------------------------------------------------------------------- El JS posiciona con left/top. Con el parche de coordenadas (%) el punto cae siempre donde toca, en cualquier tamaño de pantalla. ========================================================================== */ .marcador-accion { position: absolute; z-index: 5; width: 18px; height: 18px; background: var(--roja); border: 3px solid var(--papel); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5); animation: aterrizaje var(--lento) both, foco 2s 0.4s infinite; } /* Retícula de seguimiento VAR alrededor del punto */ .marcador-accion::before { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border: 1px dashed rgba(255, 255, 255, 0.65); border-radius: 50%; animation: giro 9s linear infinite; } @keyframes aterrizaje { from { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } 60% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes foco { 0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); } 70% { box-shadow: 0 0 0 18px rgba(230, 57, 70, 0), 0 4px 12px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0), 0 4px 12px rgba(0, 0, 0, 0.5); } } @keyframes giro { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ========================================================================== 10. PANEL DE SITUACIÓN ========================================================================== */ .panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; } .situation__id { display: inline-block; margin-bottom: 10px; padding: 3px 11px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px; color: var(--verde-claro); background: rgba(46, 155, 94, 0.14); border: 1px solid rgba(46, 155, 94, 0.4); border-radius: var(--radio-pill); } .panel h2 { font-family: var(--fuente-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.12; margin-bottom: 8px; text-wrap: balance; } .panel p { color: var(--tenue); font-size: var(--paso-0); line-height: 1.62; max-width: 62ch; } /* Entrada de cada jugada nueva: un único gesto, sin ruido */ .situation { animation: jugada-entra var(--medio) both; } @keyframes jugada-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ========================================================================== 11. BOTONES DE DECISIÓN ========================================================================== */ .decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .decision { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 13px 30px 13px 16px; font-family: var(--fuente-texto); font-weight: 600; font-size: 0.9rem; text-align: left; color: var(--papel); background: linear-gradient(180deg, rgba(28, 50, 42, 0.75), rgba(16, 30, 25, 0.9)); border: 1px solid var(--linea); border-radius: var(--radio-s); cursor: pointer; overflow: hidden; transition: transform var(--rapido), border-color var(--rapido), box-shadow var(--rapido), background var(--rapido), opacity var(--medio); } /* Canto de color: identifica la familia de decisión de un vistazo */ .decision::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--canto, var(--tenue-oscuro)); opacity: 0.85; transition: width var(--rapido), opacity var(--rapido); } .decision:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--linea-fuerte); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px color-mix(in srgb, var(--canto, var(--tenue-oscuro)) 45%, transparent); } /* Chip de atajo de teclado: refuerza la lectura "consola de mando" del panel */ .decision__tecla { position: absolute; top: 10px; right: 10px; flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; color: var(--tenue-oscuro); background: rgba(8, 18, 15, 0.6); border: 1px solid var(--linea); border-radius: 5px; transition: color var(--rapido), border-color var(--rapido); } .decision__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .decision__titulo { font-weight: 700; font-size: 0.9rem; color: var(--papel); } .decision__desc { font-weight: 500; font-size: 0.76rem; line-height: 1.35; color: var(--tenue); } .decision:hover:not(:disabled) .decision__tecla { color: var(--canto, var(--papel)); border-color: color-mix(in srgb, var(--canto, var(--tenue-oscuro)) 50%, transparent); } .decision:hover:not(:disabled)::before { width: 5px; opacity: 1; } .decision:active:not(:disabled) { transform: translateY(0); } .decision:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* Familias de decisión */ .decision--clean { --canto: var(--verde); } .decision--foul { --canto: var(--tenue); } .decision--yellow { --canto: var(--amarilla); } .decision--red { --canto: var(--roja); } .decision--penalty { --canto: var(--papel); } .decision--penalty-yellow{ --canto: var(--amarilla-oscura); } .decision--penalty-red { --canto: var(--roja-oscura); } .decision--indirect { --canto: #7C83FD; } .decision--goal { --canto: var(--verde-claro); } .decision--offside { --canto: #4EA8DE; } .decision--clean:hover:not(:disabled) { border-color: rgba(46, 155, 94, 0.5); } .decision--yellow:hover:not(:disabled) { border-color: rgba(245, 197, 24, 0.5); } .decision--red:hover:not(:disabled) { border-color: rgba(230, 57, 70, 0.5); } .decision--penalty-red:hover:not(:disabled) { border-color: rgba(230, 57, 70, 0.5); } .decision__glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; font-size: 1rem; } .decision--clean .decision__glyph { color: var(--verde-claro); } .decision--foul .decision__glyph { color: var(--tenue); } .decision__card { display: inline-block; width: 13px; height: 18px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transition: transform var(--rapido); } .decision--yellow .decision__card { background: var(--amarilla); } .decision--red .decision__card { background: var(--roja); } .decision:hover:not(:disabled) .decision__card { transform: rotate(-9deg) translateY(-1px); } /* Estados opcionales tras responder (ver parche JS del README) */ .decision.es-correcta { opacity: 1; border-color: var(--verde-claro); background: linear-gradient(180deg, rgba(46, 155, 94, 0.32), rgba(16, 30, 25, 0.9)); box-shadow: 0 0 0 1px rgba(63, 214, 132, 0.4); } .decision.es-elegida-fallo { opacity: 1; border-color: var(--roja); background: linear-gradient(180deg, rgba(230, 57, 70, 0.28), rgba(16, 30, 25, 0.9)); } /* ========================================================================== 12. FEEDBACK ========================================================================== */ .feedback { position: relative; padding: 16px 16px 16px 18px; background: rgba(8, 18, 15, 0.55); border: 1px solid var(--linea); border-left: 3px solid var(--tenue-oscuro); border-radius: var(--radio-s); animation: veredicto var(--medio) both; } @keyframes veredicto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .feedback.oculto { display: none; } .feedback.acierto { border-left-color: var(--verde-claro); background: linear-gradient(90deg, rgba(46, 155, 94, 0.16), transparent 55%), rgba(8, 18, 15, 0.55); } .feedback.fallo { border-left-color: var(--roja); background: linear-gradient(90deg, rgba(230, 57, 70, 0.14), transparent 55%), rgba(8, 18, 15, 0.55); } .feedback h3 { font-family: var(--fuente-display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 6px; } .feedback.acierto h3 { color: var(--verde-claro); } .feedback.fallo h3 { color: var(--roja-clara); } .feedback p { color: var(--tenue); margin-bottom: 14px; font-size: 0.9rem; } .btn-siguiente { padding: 11px 22px; font-weight: 700; font-size: 0.9rem; color: var(--noche); background: linear-gradient(180deg, var(--verde-claro), var(--verde)); border: none; border-radius: var(--radio-s); cursor: pointer; transition: transform var(--rapido), filter var(--rapido), box-shadow var(--rapido); } .btn-siguiente:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px -16px rgba(63, 214, 132, 0.9); } .btn-siguiente:active { transform: translateY(0); } /* ========================================================================== 12b. TICKER INFERIOR ========================================================================== */ .ticker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; background: linear-gradient(165deg, rgba(25, 45, 38, 0.86), rgba(12, 24, 20, 0.92)); border: 1px solid var(--linea); border-radius: var(--radio-m); flex-wrap: wrap; } .ticker__msg { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--tenue); } .ticker__msg svg { color: var(--verde-claro); flex-shrink: 0; } .ticker__marca { padding: 4px 12px; font-size: 0.72rem; font-weight: 700; color: var(--verde-claro); background: rgba(46, 155, 94, 0.14); border: 1px solid rgba(46, 155, 94, 0.4); border-radius: var(--radio-pill); white-space: nowrap; } /* ========================================================================== 13. PIE DE PÁGINA ========================================================================== */ .footer-legal { padding: 26px 10px 34px; text-align: center; font-size: 0.8rem; color: var(--tenue-oscuro); } .footer-legal__marca { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--fuente-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2px; color: var(--tenue); } .footer-legal__logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; opacity: 0.92; } .footer-links { margin-top: 6px; } .footer-links a { color: var(--tenue); text-decoration: none; transition: color var(--rapido); } .footer-links a:hover { color: var(--amarilla); text-decoration: underline; } .footer-links span { margin: 0 8px; } /* ========================================================================== 13b. UTILIDADES ========================================================================== */ .oculto { display: none !important; } /* ========================================================================== 13c. SELECTOR DE TEMA (white-label) ========================================================================== */ .tema-selector { display: flex; gap: 6px; padding: 4px 6px; background: rgba(8, 18, 15, 0.6); border: 1px solid var(--linea); border-radius: var(--radio-pill); } .tema-dot { width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform var(--rapido), border-color var(--rapido); } .tema-dot:hover { transform: translateY(-1px) scale(1.06); } .tema-dot.is-activo { border-color: var(--papel); } .tema-dot--clasico { background: linear-gradient(135deg, #F5C518, #2E9B5E); } .tema-dot--atlantico { background: linear-gradient(135deg, #FFB238, #2E7FD6); } .tema-dot--granate { background: linear-gradient(135deg, #D6A24B, #8C1D2B); } /* ========================================================================== 13d. BREADCRUMB Y CABECERA DE PÁGINA INTERIOR ========================================================================== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--tenue); } .breadcrumb a { color: var(--tenue); text-decoration: none; transition: color var(--rapido); } .breadcrumb a:hover { color: var(--amarilla); } .breadcrumb__actual { color: var(--papel); font-weight: 600; } .page-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; } .page-heading h2 { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.9rem); } .page-heading p { color: var(--tenue); font-size: 0.9rem; max-width: 62ch; } /* ========================================================================== 13e. HERO DEL MENÚ PRINCIPAL ========================================================================== */ .hero { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 44px 32px; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(63, 214, 132, 0.16), transparent 55%), linear-gradient(165deg, rgba(25, 45, 38, 0.92), rgba(10, 21, 18, 0.96)); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra); } .hero__interior { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .hero__texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 420px; } .hero__grafico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(63, 214, 132, 0.22), rgba(63, 214, 132, 0.02) 70%); border: 1px solid rgba(63, 214, 132, 0.22); } .hero__grafico img { width: 88px; height: 88px; opacity: 0.92; filter: drop-shadow(0 0 22px rgba(63, 214, 132, 0.45)); } .hero__kicker { display: inline-flex; align-self: flex-start; padding: 5px 13px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; color: var(--verde-claro); background: rgba(63, 214, 132, 0.14); border: 1px solid rgba(63, 214, 132, 0.4); border-radius: var(--radio-pill); text-transform: uppercase; } .hero h1 { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); line-height: 1.05; max-width: 18ch; } .hero p { color: var(--tenue); font-size: 1rem; max-width: 56ch; } .hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .btn-hero-primario, .btn-hero-secundario { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-weight: 700; font-size: 0.92rem; border-radius: var(--radio-pill); text-decoration: none; transition: transform var(--rapido), filter var(--rapido), box-shadow var(--rapido); } .btn-hero-primario { color: var(--noche); background: linear-gradient(180deg, var(--verde-claro), var(--verde)); box-shadow: var(--brillo-verde); } .btn-hero-secundario { color: var(--papel); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linea-fuerte); } .btn-hero-primario:hover, .btn-hero-secundario:hover { transform: translateY(-1px); filter: brightness(1.05); } /* ========================================================================== 13f. RESUMEN DE PROGRESO (mini panel de estadísticas) ========================================================================== */ .resumen-progreso { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .resumen-progreso .stat-card { padding: 16px 18px; text-align: center; } .resumen-progreso .stat-card dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4px; color: var(--tenue-oscuro); margin-bottom: 6px; } .resumen-progreso .stat-card dd { font-family: var(--fuente-display); font-size: 1.9rem; font-weight: 700; color: var(--verde-claro); } .resumen-progreso .stat-card:nth-child(2) dd { color: var(--papel); } .resumen-progreso .stat-card:nth-child(3) dd { color: var(--amarilla-clara); } .aviso-invitado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; font-size: 0.85rem; color: var(--tenue); background: rgba(63, 214, 132, 0.08); border: 1px solid rgba(63, 214, 132, 0.3); border-radius: var(--radio-m); } .aviso-invitado a, .aviso-invitado button { flex-shrink: 0; } /* ========================================================================== 13f2. FILA SUPERIOR DEL HUB — hero + panel de progreso lateral ========================================================================== */ .dashboard-top { display: flex; align-items: stretch; gap: var(--gap); } .dashboard-top .hero { flex: 1 1 480px; min-width: 0; } .progreso-panel { flex: 0 0 300px; display: flex; flex-direction: column; gap: 16px; padding: 24px 22px; } .progreso-panel h3 { font-family: var(--fuente-display); font-size: 1.1rem; font-weight: 700; } .progreso-panel__lista { display: flex; flex-direction: column; gap: 12px; } .progreso-panel__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); } .progreso-panel__fila:last-child { padding-bottom: 0; border-bottom: none; } .progreso-panel__fila dt { font-size: 0.78rem; color: var(--tenue); } .progreso-panel__fila dd { font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 700; color: var(--verde-claro); font-variant-numeric: tabular-nums; } .progreso-panel__fila:nth-child(2) dd { color: var(--papel); } .progreso-panel__fila:nth-child(3) dd { color: var(--amarilla-clara); } .aviso-invitado--panel { flex-direction: column; align-items: flex-start; margin-top: auto; } .aviso-invitado--panel button { align-self: stretch; justify-content: center; } /* ========================================================================== 13g. TARJETAS DE MODO — versión enlace grande (hub) ========================================================================== */ .modecards--hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .modecard-link { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; text-align: left; text-decoration: none; color: var(--papel); overflow: hidden; transition: transform var(--medio), border-color var(--rapido), box-shadow var(--medio); } .modecard-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(245, 197, 24, 0.10), transparent 60%); opacity: 0; transition: opacity var(--medio); } .modecard-link:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); } .modecard-link:hover::after { opacity: 1; } .modecard-link__icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radio-m); background: rgba(245, 197, 24, 0.14); color: var(--amarilla); } .modecard-link__icono--verde { background: rgba(46, 155, 94, 0.16); color: var(--verde-claro); } .modecard-link__icono--ambar { background: rgba(245, 197, 24, 0.16); color: var(--amarilla); } .modecard-link__icono--tenue { background: rgba(147, 167, 158, 0.14); color: var(--tenue); } .modecard-link strong { font-family: var(--fuente-display); font-size: 1.25rem; font-weight: 700; } .modecard-link p { color: var(--tenue); font-size: 0.86rem; line-height: 1.4; } .modecard-link__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--verde-claro); } /* ========================================================================== 13h. INTRODUCCIÓN DE EXAMEN ========================================================================== */ .examen-intro { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; } .examen-intro ul { display: flex; flex-direction: column; gap: 8px; padding-left: 2px; list-style: none; } .examen-intro li { display: flex; align-items: flex-start; gap: 10px; color: var(--tenue); font-size: 0.92rem; } .examen-intro li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--amarilla); } /* ========================================================================== 13i. ACTA DE EXAMEN Y HISTORIAL (compartido examen / estadísticas) ========================================================================== */ .acta { padding: 22px; background: rgba(10, 21, 18, 0.95); border: 1px solid var(--amarilla); border-radius: var(--radio-m); } .acta__titulo { font-family: var(--fuente-display); font-size: 1.5rem; color: var(--amarilla); margin-bottom: 6px; } .acta__linea { font-size: 0.95rem; margin-bottom: 4px; } .acta__linea--tenue { color: var(--tenue); font-size: 0.85rem; margin-bottom: 12px; } .acta__subtitulo { font-size: 0.95rem; margin-bottom: 8px; color: var(--amarilla-clara); } .acta__lista { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; } .acta__item { padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--tenue-oscuro); border-radius: 4px; font-size: 0.84rem; } .acta__item--ok { border-left-color: var(--verde-claro); } .acta__item--fail { border-left-color: var(--roja); } .acta__item-titulo { margin-bottom: 3px; } .acta__item-detalle { color: var(--tenue); font-size: 0.8rem; } .acta__item-explicacion { color: var(--tenue-oscuro); font-size: 0.78rem; margin-top: 3px; } .acta__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .acta__acciones > * { flex: 1; min-width: 180px; text-align: center; } .acta__link-historial { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ========================================================================== 13j. PÁGINA "MIS PARTIDOS" ========================================================================== */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .stats-grid .stat-card { padding: 16px 14px; text-align: center; } .stats-grid .stat-card dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3px; color: var(--tenue-oscuro); margin-bottom: 6px; } .stats-grid .stat-card dd { font-family: var(--fuente-display); font-size: 1.55rem; font-weight: 700; color: var(--verde-claro); } .stats-grid .stat-card:nth-child(2) dd { color: var(--papel); } .stats-grid .stat-card:nth-child(3) dd { color: var(--amarilla-clara); } .login-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; } .login-cta__texto h3 { font-family: var(--fuente-display); font-size: 1.1rem; margin-bottom: 4px; } .login-cta__texto p { color: var(--tenue); font-size: 0.85rem; max-width: 52ch; } .hist-lista { display: flex; flex-direction: column; gap: 10px; } .hist-item { padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--linea); border-left: 3px solid var(--tenue-oscuro); border-radius: var(--radio-s); } .hist-item--ok { border-left-color: var(--verde-claro); } .hist-item--fail { border-left-color: var(--roja); } .hist-item__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 10px; } .hist-item__nota { font-weight: 700; font-size: 0.95rem; color: var(--verde-claro); } .hist-item__meta { color: var(--tenue); font-size: 0.78rem; } .hist-vacio { color: var(--tenue); text-align: center; font-size: 0.9rem; padding: 26px 10px; } /* ========================================================================== 13k. PÁGINA "LIGAS / CLASIFICACIÓN" ========================================================================== */ .ranking-tabla { display: flex; flex-direction: column; } .ranking-fila { display: grid; grid-template-columns: 44px 1fr 90px 100px 110px; align-items: center; gap: 10px; padding: 12px 10px; border-bottom: 1px solid var(--linea); } .ranking-fila:last-child { border-bottom: none; } .ranking-fila--cabecera { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tenue-oscuro); border-bottom: 1px solid var(--linea-fuerte); } .ranking-col-pos { font-family: var(--fuente-display); font-weight: 700; color: var(--tenue); text-align: center; } .ranking-col-jugador { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ranking-col-num { font-family: var(--fuente-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .ranking-col-puntos { color: var(--amarilla); } .ranking-fila--oro .ranking-col-pos { color: var(--amarilla); text-shadow: 0 0 14px rgba(245, 197, 24, 0.5); } .ranking-fila--plata .ranking-col-pos { color: var(--papel); } .ranking-fila--bronce .ranking-col-pos { color: #C97A3D; } .ranking-fila--yo { background: rgba(63, 214, 132, 0.08); border-radius: var(--radio-s); } .ranking-tag-yo { display: inline-block; padding: 1px 7px; margin-left: 4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--noche); background: var(--verde-claro); border-radius: var(--radio-pill); vertical-align: middle; } /* --- Selector de vista: Ranking Global / Mis Ligas --- */ .ranking-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 3px; background: rgba(8, 18, 15, 0.6); border: 1px solid var(--linea); border-radius: var(--radio-pill); } .ranking-tab { padding: 8px 16px; font-size: 0.82rem; font-weight: 700; color: var(--tenue); background: transparent; border: 1px solid transparent; border-radius: var(--radio-pill); cursor: pointer; transition: background var(--rapido), color var(--rapido); } .ranking-tab:hover { color: var(--papel); } .ranking-tab.is-activo { color: var(--noche); background: linear-gradient(180deg, var(--verde-claro), var(--verde)); } /* --- Ligas privadas: crear / unirse / listado --- */ .ligas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .ligas-card { padding: 22px; display: flex; flex-direction: column; } .ligas-card h3 { font-family: var(--fuente-display); font-size: 1.1rem; margin-bottom: 2px; } .ligas-card p { color: var(--tenue); font-size: 0.85rem; margin-bottom: 12px; } .ligas-form { display: flex; gap: 10px; flex-wrap: wrap; } .ligas-form .campo-texto { flex: 1; min-width: 160px; margin-bottom: 0; } .ligas-form button { border: none; cursor: pointer; white-space: nowrap; } .ligas-status { margin-top: 10px; font-size: 0.8rem; min-height: 1.2em; color: var(--tenue); } .liga-item { padding: 14px 16px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--linea); border-radius: var(--radio-s); } .liga-item:last-child { margin-bottom: 0; } .liga-item__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .liga-item__cabecera strong { font-family: var(--fuente-display); font-size: 1.05rem; } .liga-item__codigo { display: block; margin-top: 2px; color: var(--tenue); font-size: 0.78rem; } .liga-item__codigo code { padding: 1px 6px; color: var(--amarilla-clara); background: rgba(245, 197, 24, 0.1); border-radius: 4px; font-family: var(--fuente-texto); letter-spacing: 0.5px; } .liga-item__acciones { display: flex; gap: 8px; flex-wrap: wrap; } .liga-item__acciones .btn-auth { flex: none; padding: 8px 12px; font-size: 0.78rem; } .liga-item__ranking { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); } /* ========================================================================== 14. RESPONSIVE ========================================================================== */ @media (max-width: 960px) { .app-shell { flex-direction: column; gap: 14px; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } .sidebar { display: none; } .topbar__brand { /* No debe encogerse nunca: si no hay sitio, es .topbar__controles quien cede espacio (ver más abajo), así el logo y el nombre no quedan tapados por el selector de idioma. */ display: flex; flex: 0 0 auto; min-width: 0; } .topbar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; } .topbar__brandname { font-size: 1.05rem; } .topbar__mark { width: 22px; height: 22px; } .topbar__spacer { display: none; } .topbar__stats { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: stretch; gap: 4px; min-width: 0; margin: 0; } .topbar__stats .stat { min-width: 0; padding: 2px 7px; text-align: center; } .topbar__stats .stat dt { font-size: 0.55rem; letter-spacing: 0.2px; } .topbar__stats .stat dd { font-size: 1.02rem; line-height: 1.1; } .topbar__reloj { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .topbar__controles { /* Puede encoger y, si hace falta, envolver sus propios elementos en una segunda línea (hereda flex-wrap: wrap) — así nunca se superpone ni tapa el logo/nombre de .topbar__brand, que ya no encoge. */ flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 6px; margin-left: 0; } .btn-acceso { padding: 7px 9px; } .btn-acceso span { display: none; } #auth-container-ui.cuenta-pill { gap: 5px; padding: 4px 8px; } .cuenta-pill__avatar { font-size: 0.74rem; } .cuenta-pill__nombre { max-width: 5ch; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; align-items: stretch; justify-content: space-around; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(7, 14, 12, 0.97), rgba(7, 14, 12, 0.9)); border-top: 1px solid var(--linea); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } .bottombar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1px; color: var(--tenue); text-decoration: none; border-radius: var(--radio-s); transition: color var(--rapido), background var(--rapido); } .bottombar__link svg { flex-shrink: 0; } .bottombar__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .bottombar__link:hover { color: var(--papel); } .bottombar__link.is-activo { color: var(--verde-claro); background: rgba(63, 214, 132, 0.12); } } @media (max-width: 900px) { /* Orden en móvil: cabecera (fuera de .review) → dos columnas horizontales: IZQUIERDA el campo + la descripción de la jugada (agrupados por common.js en un contenedor ".review__col-campo" SOLO a partir de este ancho, sin tocar IDs, datos ni lógica: el campo y el texto siguen siendo los mismos elementos, solo se reordenan visualmente), DERECHA las decisiones y el resultado (.panel). Así la descripción queda justo debajo del campo y las decisiones "suben" para empezar arriba del todo en su columna, en vez de dejar hueco. Por encima de este ancho, common.js deshace la agrupación y todo vuelve exactamente a como estaba (campo a la izquierda; descripción, decisiones y resultado apilados a la derecha). */ .review { grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); grid-template-rows: auto; align-items: start; gap: 10px; } .review > .review__col-campo { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; align-self: start; position: sticky; top: 8px; } /* Antes de que common.js agrupe el campo y la descripción (o si el navegador no ejecuta JS), .monitor sigue siendo hijo directo de .review: se mantiene visible y en su sitio igualmente. */ .review > .monitor { grid-column: 1; grid-row: 1; align-self: start; } .review > .panel { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .review .situation { min-width: 0; padding: 10px 12px; overflow: visible; background: linear-gradient(165deg, rgba(25, 45, 38, 0.86), rgba(12, 24, 20, 0.92)); border: 1px solid var(--linea); border-radius: var(--radio-m); } .review .situation .situation__id { margin-bottom: 6px; } .review .situation h2, .review .panel h2 { font-size: 1.0rem; margin-bottom: 6px; } .review .situation p, .review .panel p { font-size: 0.8rem; line-height: 1.4; } /* La columna derecha es más estrecha que el ancho completo de la pantalla, así que las decisiones pasan a una sola columna (en vez de las 2 columnas del escritorio) para que el texto de cada botón se siga leyendo bien. */ .review .decisions { grid-template-columns: 1fr; } /* Campo vertical: el terreno (.pitch, líneas, áreas, círculo) y el marcador de la jugada que colocan game.js/carrera.js NO cambian: sigue siendo el mismo rectángulo de referencia 760×450 con posiciones en %, calculadas siempre sobre CAMPO_REF en el JS. Lo único que se hace aquí es girar ese rectángulo 90° con CSS y recalcular su tamaño (ancho ⇄ alto intercambiados) para que, ya girado, aproveche la columna estrecha en vertical sin recortes ni deformar el círculo central ni las áreas. */ .pitch-stage { width: 100%; aspect-ratio: calc(var(--campo-alto-ref) / var(--campo-ancho-ref)); overflow: hidden; } .pitch-stage .pitch { position: absolute; top: 50%; left: 50%; width: calc(100% * var(--campo-ancho-ref) / var(--campo-alto-ref)); height: calc(100% * var(--campo-alto-ref) / var(--campo-ancho-ref)); aspect-ratio: auto; transform: translate(-50%, -50%) rotate(90deg); } .monitor:fullscreen .pitch-stage, .monitor:-webkit-full-screen .pitch-stage { width: 100%; aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref); } .monitor:fullscreen .pitch-stage .pitch, .monitor:-webkit-full-screen .pitch-stage .pitch { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: var(--campo-ancho-ref) / var(--campo-alto-ref); transform: none; } .review .monitor__bar { display: none; } .review .monitor__meta, .review .playbar, .review .hud-esquina { display: none; } .review .monitor { padding: 6px; overflow: hidden; } .decision__desc, .decision__tecla { display: none; } .decision { align-items: center; min-height: 44px; padding: 10px 12px; font-size: 0.82rem; gap: 8px; } .app-shell { padding: 10px 10px 0; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } .idioma button { min-width: 36px; padding: 5px 8px; font-size: 0.72rem; } .dashboard-top { flex-direction: column; } .progreso-panel { flex: 1 1 auto; } .hero__interior { flex-direction: column; align-items: flex-start; } .hero__grafico { display: none; } .modecards { grid-template-columns: 1fr; } .modecards--hub { grid-template-columns: 1fr; } .resumen-progreso { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); } .hero { padding: 32px 24px; } .ligas-grid { grid-template-columns: 1fr; } } /* ========================================================================== 15b. CABECERA COMPACTA — PANTALLA DE JUEGO (móvil) -------------------------------------------------------------------------- Ajustes adicionales, SOLO en móvil y SOLO en las páginas de juego (Práctica, Examen, Carrera), para reducir la altura de la cabecera y el scroll necesario para llegar al campo, la descripción, las opciones y el resultado. No toca estructura HTML, datos ni lógica de juego: son únicamente ajustes de densidad visual (paddings, tamaños de fuente y, cuando la jugada ya está respondida, ocultar las opciones no elegidas apoyándose en las clases que game.js/carrera.js ya añaden). ========================================================================== */ @media (max-width: 900px) { /* --- Cabecera (topbar) más compacta --- */ body[data-pagina="practica"] .topbar, body[data-pagina="examen"] .topbar, body[data-pagina="carrera"] .topbar { padding: 6px 10px; gap: 6px; } body[data-pagina="practica"] .topbar__mark, body[data-pagina="examen"] .topbar__mark, body[data-pagina="carrera"] .topbar__mark { width: 20px; height: 20px; } body[data-pagina="practica"] .btn-acceso, body[data-pagina="examen"] .btn-acceso, body[data-pagina="carrera"] .btn-acceso { padding: 6px 8px; } body[data-pagina="practica"] #auth-container-ui.cuenta-pill, body[data-pagina="examen"] #auth-container-ui.cuenta-pill, body[data-pagina="carrera"] #auth-container-ui.cuenta-pill { padding: 3px 4px 3px 8px; } /* --- Menos aire entre cabecera y contenido --- */ body[data-pagina="practica"] .app-content, body[data-pagina="examen"] .app-content, body[data-pagina="carrera"] .app-content { gap: 10px; } body[data-pagina="practica"] .review, body[data-pagina="examen"] .review, body[data-pagina="carrera"] .review { gap: 8px; } /* --- Resultado sin scroll extra: al responder, las opciones no elegidas se recogen para dejar sitio a la explicación. Se apoya en las clases "es-correcta" / "es-elegida-fallo" / "es-elegida-gestion" que ya añade el JS existente; si el navegador no soporta :has(), el diseño actual (sin recoger) se mantiene igual que antes del cambio. */ body[data-pagina="practica"] .decisions:has(~ #panel-feedback:not(.oculto)), body[data-pagina="carrera"] #partido-decisiones:has(~ #partido-panel-feedback:not(.oculto)) { grid-template-columns: 1fr; gap: 6px; } body[data-pagina="practica"] .decisions:has(~ #panel-feedback:not(.oculto)) .decision:not(.es-correcta):not(.es-elegida-fallo), body[data-pagina="carrera"] #partido-decisiones:has(~ #partido-panel-feedback:not(.oculto)) .decision:not(.es-correcta):not(.es-elegida-fallo):not(.es-elegida-gestion) { display: none; } /* --- Explicación del resultado, algo más compacta --- */ body[data-pagina="practica"] .feedback, body[data-pagina="carrera"] .feedback { padding: 12px 14px; } body[data-pagina="practica"] .feedback h3, body[data-pagina="carrera"] .feedback h3 { font-size: 1.05rem; margin-bottom: 4px; } body[data-pagina="practica"] .feedback p, body[data-pagina="carrera"] .feedback p { font-size: 0.82rem; margin-bottom: 10px; } body[data-pagina="practica"] .btn-siguiente, body[data-pagina="carrera"] .btn-siguiente { padding: 9px 18px; font-size: 0.84rem; } /* --- Carrera: durante el partido, el título de la página y el aviso de inicio de sesión (que son fijos, no parte de ninguna vista) no aportan nada mientras se está jugando y solo añaden scroll antes del campo. Se ocultan únicamente cuando la vista de partido está activa (carrera.js quita "oculto" de #vista-carrera-partido); el resto de pantallas de Carrera (intro, perfil, dashboard, resúmenes) no se ven afectadas. */ body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) .page-heading, body[data-pagina="carrera"] main:has(#vista-carrera-partido:not(.oculto)) #carrera-aviso-invitado { display: none; } /* Igual que Práctica/Examen ya hacen: durante el partido de Carrera, el pie de página tampoco aporta nada por encima del resultado y solo suma scroll. Fuera del partido (dashboard, resúmenes…) sigue mostrándose exactamente igual que antes. */ body[data-pagina="carrera"] .app-content:has(#vista-carrera-partido:not(.oculto)) .footer-legal { display: none; } } @media (max-width: 680px) { .scorebug { padding: 13px 14px; } .scorebug__nav { order: 4; width: 100%; justify-content: space-between; border-top: 1px solid var(--linea); padding-top: 8px; } .navlink span { display: none; } .navlink { padding: 6px; } .playbar__tiempo { display: none; } .scorebug__controles { width: 100%; justify-content: space-between; gap: 10px; } .scorebug__stats { order: 3; width: auto; gap: 4px; } .stat { flex: 1; min-width: 0; text-align: center; padding: 3px 8px; } .stat dd { font-size: 1.05rem; } .decisions { gap: 7px; } body[data-pagina="practica"] .breadcrumb, body[data-pagina="examen"] .breadcrumb, body[data-pagina="carrera"] .breadcrumb, body[data-pagina="practica"] .ticker, body[data-pagina="examen"] .ticker, body[data-pagina="carrera"] .ticker, body[data-pagina="practica"] .footer-legal, body[data-pagina="examen"] .footer-legal { display: none; } .progreso-panel { padding: 12px 14px; } .progreso-panel h3 { font-size: 0.95rem; margin-bottom: 8px; } .progreso-panel__fila dd { font-size: 1.1rem; } .marcador-accion { width: 15px; height: 15px; border-width: 2px; } .marcador-accion::before { width: 34px; height: 34px; } .hero { padding: 26px 18px; border-radius: var(--radio-m); } .hero__acciones { flex-direction: column; } .btn-hero-primario, .btn-hero-secundario { justify-content: center; } .resumen-progreso { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .acta__acciones { flex-direction: column; } .acta__acciones > * { min-width: 0; } .login-cta { flex-direction: column; align-items: flex-start; } .ranking-fila { grid-template-columns: 34px 1fr 74px; } .ranking-col-opcional { display: none; } .ligas-form { flex-direction: column; } .ligas-form .campo-texto { min-width: 0; } .liga-item__cabecera { flex-direction: column; align-items: flex-start; } } @media (max-width: 420px) { /* El nombre "RefSim" debe verse siempre en la cabecera, en todas las páginas — aquí solo se reduce un poco más el tamaño de letra para ganar espacio en pantallas muy estrechas, ya no se oculta. */ .topbar__brandname { font-size: 0.92rem; } .resumen-progreso { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .decision__glyph, .decision__card { display: none; } .cuenta-pill__nombre { max-width: 3.5ch; font-size: 0.6rem; } } /* ========================================================================== 15. ACCESIBILIDAD Y PREFERENCIAS ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (prefers-contrast: more) { :root { --tenue: #C3D2CB; --linea: rgba(237, 237, 230, 0.28); } } @media print { .ad-slot, #auth-modal, .decisions { display: none; } }