/* ══════════════════════════════════════════════════════════════════════ PAGE: maintenance (modo mantenimiento global) Prefijo: .maintenance-* (página) y .platform-maintenance-* (banner global) Elementos: - .platform-maintenance-banner — aviso fijo arriba mientras el modo está activo. Lo monta/desmonta renderMaintenanceBanner() en js/services/platform.js, que además pone/quita .platform-maintenance-active en . - .platform-maintenance-banner--tester — la variante que ve un tester (migración 124): el mismo aviso fijo, pero en verde y sin atenuar nada, porque el tester sí puede estudiar. Va con .platform-maintenance-tester en en vez de .platform-maintenance-active. - .maintenance-page, .maintenance-card, ... — la vista /maintenance. El banner es `fixed`, así que el shell TIENE que ceder ese alto o el aviso tapa la topbar y el logo. De ahí --maint-banner-h y los offsets de abajo. ══════════════════════════════════════════════════════════════════════ */ :root { --maint-banner-h: 42px; } /* ─── 1. Banner global ─────────────────────────────────────────────── */ .platform-maintenance-banner { position: fixed; inset: 0 0 auto; z-index: 5000; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--maint-banner-h); padding: 8px 18px; background: #43208f; color: #fff; box-shadow: 0 2px 12px rgba(36, 16, 89, .22); font-size: .86rem; font-weight: 650; line-height: 1.35; text-align: center; } .platform-maintenance-banner .material-symbols-outlined { font-size: 18px; } /* Verde y no morado: el tester debe distinguir de un vistazo "estoy pasando por encima del mantenimiento" de "estoy bloqueado", sobre todo cuando prueba con dos cuentas abiertas en la misma pantalla. */ .platform-maintenance-banner--tester { background: #0f6b4a; box-shadow: 0 2px 12px rgba(10, 60, 42, .22); } /* ─── 2. Offsets del shell mientras el banner está visible ─────────── */ /* Con box-sizing:border-box (css/base.css) el padding se come parte del 100vh en vez de sumarse, así que no aparece scroll extra. */ /* Los offsets valen para las dos variantes: el banner ocupa el mismo alto tanto si bloquea como si no. Lo que NO se comparte es el atenuado del punto 4. */ .platform-maintenance-active .dashboard-layout, .platform-maintenance-active #standalone-outlet, .platform-maintenance-tester .dashboard-layout, .platform-maintenance-tester #standalone-outlet { padding-top: var(--maint-banner-h); } /* El sidebar es sticky top:0 y mide 100vh: hay que bajarlo y encogerlo. */ .platform-maintenance-active .sidebar, .platform-maintenance-tester .sidebar { top: var(--maint-banner-h); height: calc(100vh - var(--maint-banner-h)); } /* La topbar móvil NO se toca a propósito. La clase base .mobile-topbar es `fixed`, pero renderTopbar() siempre añade un modificador (--profile, --settings, --default) y los tres la vuelven `position: relative !important`. Darle `top` a un elemento relative lo desplaza sin mover su hueco: la cabecera se montaba encima del contenido (la línea partiendo el nombre en /profile, la flecha de volver sobre "CUENTA" en /settings). Va dentro de #view-outlet, así que ya baja sola con el padding del shell. */ .platform-maintenance-active, .platform-maintenance-tester { scroll-padding-top: calc(var(--maint-banner-h) + 12px); } /* ─── 3. Vista /maintenance ────────────────────────────────────────── */ .maintenance-page { min-height: min(620px, calc(100dvh - 110px)); display: grid; place-items: center; padding: 32px 20px; } .maintenance-card { width: min(100%, 540px); padding: 42px 34px; border: 1px solid var(--border, #e5e3eb); border-radius: 24px; background: var(--surface, #fff); text-align: center; box-shadow: 0 16px 42px rgba(33, 25, 54, .09); } .maintenance-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #7647ff, #5b21d6); } .maintenance-icon .material-symbols-outlined { font-size: 30px; } .maintenance-eyebrow { margin: 0 0 6px; color: var(--violet, #6c2bff); font-size: .72rem; font-weight: 800; letter-spacing: .13em; } .maintenance-card h1 { margin: 0 0 12px; font-size: clamp(1.55rem, 4vw, 2rem); } .maintenance-card p { max-width: 430px; margin: 0 auto; color: var(--text-secondary, #686372); line-height: 1.6; } .maintenance-card .maintenance-note { margin-top: 10px; font-size: .9rem; } .maintenance-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; } /* ─── 4. Navegación atenuada ───────────────────────────────────────── */ /* Los enlaces de aprendizaje siguen ahí durante el mantenimiento; sin esto parecen operativos y rebotan a /maintenance al hacer clic. Mismo tratamiento visual que .sidebar-link--coming-soon (sidebar.css). Se seleccionan por href a propósito: renderSidebar()/renderBottomNav() vuelven a pintar la navegación en cada ruta del shell, así que marcarlos por JS se perdería en el siguiente render. En CSS aguanta solo. Ni al admin ni al tester les aplica, y por motivos distintos: al admin no se le monta banner ninguno, y al tester se le monta con .platform-maintenance-tester, que este bloque no mira. El tester puede entrar a esas cuatro rutas, así que atenuárselas sería mentirle. */ .platform-maintenance-active :is(.sidebar-link, .bottom-nav-item, .drawer-link):is( [href="#/learn"], [href="#/quizzes"], [href="#/simulacros"], [href="#/progress"] ) { opacity: .45; cursor: not-allowed; } .platform-maintenance-active :is(.sidebar-link, .drawer-link):is( [href="#/learn"], [href="#/quizzes"], [href="#/simulacros"], [href="#/progress"] ):hover { background: transparent; } @media (max-width: 520px) { .maintenance-card { padding: 34px 22px; border-radius: 20px; } .platform-maintenance-banner { font-size: .79rem; } }