/* ===== Base negra inmediata (evita rosa/gris al cargar) ===== */ html, body { height: 100%; margin: 0; padding: 0; background: #000 !important; overscroll-behavior: none; } /* El data-sa-theme está en el , creamos contexto y subimos el contenido */ [data-sa-theme="10"] { position: relative; z-index: 1; background: transparent !important; /* no pintes fondo aquí */ } /* ===== Fondo con imagen en capa fija, a pantalla completa ===== Lo ponemos en ::before para que nunca se “corte” */ html::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), /* oscurecido sutil */ url('/static/v4/img/bg/10.jpg') center center / cover no-repeat; z-index: 0; /* queda detrás del body */ will-change: transform; transform: translateZ(0); } /* Contenedores semitransparentes para ver el fondo */ [data-sa-theme="10"] .login, [data-sa-theme="10"] .card, [data-sa-theme="10"] .content, [data-sa-theme="10"] .page-loader, [data-sa-theme="10"] .sidebar { background-color: rgba(0, 0, 0, 0.6) !important; } /* ==== Header/Menu sólidos en móvil ==== */ @media (max-width: 1199.98px) { [data-sa-theme="10"] .header { position: sticky; top: 0; z-index: 1050; background-color: #0f1418 !important; /* Vidrio opcional: background-color: rgba(15,20,24,0.9) !important; backdrop-filter: saturate(120%) blur(6px); -webkit-backdrop-filter: saturate(120%) blur(6px); */ } [data-sa-theme="10"] .sidebar { background-color: #0f1418 !important; } [data-sa-theme="10"] .sidebar .user__info { background-color: #141a1f !important; } [data-sa-theme="10"] .navigation a, [data-sa-theme="10"] .navigation .active > a { color: #fff !important; } } /* Altura mínima del contenido para evitar “cortes” cuando hay poco contenido */ .main, .content { min-height: 100vh; }