/**
 * DragonsPix - Critical CSS (Anti-FOUC)
 * Este archivo debe cargarse PRIMERO para prevenir flash de contenido sin estilo
 * Incluye solo los estilos más críticos para la carga inicial
 */

/* ============================================
   BASE STYLES - Aplicación inmediata
   ============================================ */

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Fondo para páginas de autenticación (login/register) */
body.nft-auth-page,
body.login-page,
body.register-page {
    background: #050720 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fondo para páginas internas (dashboard) */
body:not(.nft-auth-page):not(.login-page):not(.register-page) {
    background: #070B24 !important;
}

/* Fondo fijo universal que nunca desaparece */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #070B24;
    z-index: -1;
}

/* Override para páginas de auth */
body.nft-auth-page::before,
body.login-page::before,
body.register-page::before {
    background: #050720;
}

/* Prevenir backgrounds blancos */
.main-content, 
.auth-main,
.container,
.container-fluid {
    opacity: 1;
    background: transparent;
}

/* ============================================
   PRELOADER - Visible inmediatamente
   ============================================ */

/* Solo mostrar si existe el elemento #preloader en el HTML */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #070B24;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out;
}

body.nft-auth-page #preloader,
body.login-page #preloader,
body.register-page #preloader {
    background: #050720;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Loading animation - 3 DOTS STYLE */
#loading-center {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loading-center-absolute {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* 3 puntos de carga estilo moderno */
.object {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #6366f1;
    animation: bounce 1.4s infinite ease-in-out both;
}

.object#object_one {
    animation-delay: -0.32s;
}

.object#object_two {
    animation-delay: -0.16s;
}

.object#object_three {
    animation-delay: 0s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   FADE-IN SUAVE DEL CONTENIDO
   ============================================ */

/* Solo aplicar fade-in en páginas con preloader (páginas internas) */
body.overflow-hidden .sidebar,
body.overflow-hidden .main-content:not(#preloader) {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.overflow-hidden.loaded .sidebar,
body.overflow-hidden.loaded .main-content {
    opacity: 1;
}

/* Para páginas de auth SIN preloader, mostrar contenido inmediatamente */
body.nft-auth-page .auth-main,
body.login-page .auth-main,
body.register-page .auth-main {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADA
   ============================================ */

* {
    scrollbar-color: #6366f1 #070B24;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: #070B24;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    body::before {
        background-attachment: fixed;
        background-size: cover;
    }
}

/* ============================================
   OVERFLOW CONTROL
   ============================================ */

html {
    overflow-x: hidden;
}

body.overflow-hidden {
    overflow: hidden;
}