/* ============================================
   ESTILOS PERSONALIZADOS PARA EL LOGO - TAMAÑO AUMENTADO
   MÁXIMA ESPECIFICIDAD PARA SOBRESCRIBIR ADMINLTE
   ============================================ */

/* FORZAR TAMAÑO DEL LOGO - SELECTORES DE MÁXIMA ESPECIFICIDAD */
/* Usando múltiples clases y elementos para máxima especificidad */
html body .wrapper .main-sidebar .brand-link img.brand-image.elevation-3,
html body .wrapper .sidebar .brand-link img.brand-image.elevation-3,
html body .main-sidebar .brand-link img.brand-image.elevation-3,
html body .sidebar .brand-link img.brand-image.elevation-3,
body .main-sidebar .brand-link img.brand-image.elevation-3,
body .sidebar .brand-link img.brand-image.elevation-3,
.main-sidebar .brand-link img.brand-image.elevation-3,
.sidebar .brand-link img.brand-image.elevation-3,
img.brand-image.elevation-3,
.brand-image.elevation-3,
.brand-link img.brand-image,
.main-sidebar img.brand-image,
.sidebar img.brand-image,
.brand-link img,
img[class*="brand-image"],
/* Selectores adicionales para máxima cobertura */
.main-sidebar a img,
.sidebar a img,
.brand-link img[src*="Logo"],
img[src*="Logo"] {
    max-width: 250px !important;
    max-height: 90px !important;
    width: 250px !important;
    height: auto !important;
    min-width: 200px !important;
    object-fit: contain !important;
    padding: 10px 0 !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Logo en el sidebar cuando está expandido - CENTRADO */
.main-sidebar:not(.sidebar-mini) .brand-link img,
.sidebar:not(.sidebar-mini) .brand-link img,
.main-sidebar:not(.sidebar-mini) img.brand-image,
.sidebar:not(.sidebar-mini) img.brand-image,
.main-sidebar:not(.sidebar-mini) a img,
.sidebar:not(.sidebar-mini) a img {
    max-width: 250px !important;
    max-height: 90px !important;
    width: 250px !important;
    height: auto !important;
    min-width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
}

/* Logo en el navbar superior */
.navbar .navbar-brand img.brand-image,
.navbar-brand img.brand-image,
.navbar .navbar-brand img,
.navbar-brand img {
    max-width: 280px !important;
    max-height: 90px !important;
    width: 280px !important;
    height: auto !important;
    min-width: 250px !important;
}

/* Logo cuando el sidebar está colapsado (mini) - TAMAÑO MÁS PEQUEÑO */
.sidebar-mini .brand-link img,
.main-sidebar.sidebar-mini .brand-link img,
.sidebar-mini img.brand-image,
.main-sidebar.sidebar-mini img.brand-image,
body.sidebar-mini .main-sidebar .brand-link img,
body.sidebar-mini .sidebar .brand-link img {
    max-width: 50px !important;
    max-height: 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 6px !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Contenedor del logo con más espacio - CENTRADO PERFECTO */
.main-sidebar .brand-link,
.sidebar .brand-link,
.brand-link {
    padding: 1.25rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 120px !important;
    height: auto !important;
    overflow: visible !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Contenedor del logo cuando está colapsado - TAMAÑO MÁS PEQUEÑO */
.sidebar-mini .brand-link,
.main-sidebar.sidebar-mini .brand-link,
body.sidebar-mini .main-sidebar .brand-link,
body.sidebar-mini .sidebar .brand-link {
    padding: 0.75rem 0.5rem !important;
    min-height: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

/* Asegurar que el contenedor tenga suficiente espacio y esté centrado */
.main-sidebar .brand-link {
    padding: 1.25rem 1rem !important;
    min-height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Forzar ancho del sidebar para acomodar logo */
.main-sidebar:not(.sidebar-mini),
.sidebar:not(.sidebar-mini) {
    min-width: 250px !important;
}

/* Asegurar que el menú hamburguesa esté visible y no oculto por el logo */
.navbar .navbar-toggler,
.navbar-toggler,
[data-widget="pushmenu"],
button[data-widget="pushmenu"],
.navbar .btn[data-widget="pushmenu"] {
    z-index: 10000 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar que el menú hamburguesa esté especialmente visible cuando el sidebar está colapsado */
.sidebar-mini ~ .content-wrapper .navbar .navbar-toggler,
body.sidebar-mini .navbar .navbar-toggler,
body.sidebar-mini [data-widget="pushmenu"],
body.sidebar-mini button[data-widget="pushmenu"] {
    z-index: 10001 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Asegurar que el sidebar tenga text-align center */
.main-sidebar:not(.sidebar-mini) .brand-link,
.sidebar:not(.sidebar-mini) .brand-link {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Mejoras adicionales para el logo colapsado */
.sidebar-mini .brand-link:hover img,
.main-sidebar.sidebar-mini .brand-link:hover img {
    transform: scale(1.05) !important;
    transition: transform 0.2s ease !important;
}

/* Asegurar que el logo colapsado tenga buen contraste */
.sidebar-mini .brand-link img,
.main-sidebar.sidebar-mini .brand-link img {
    filter: brightness(1.1) !important;
    transition: all 0.3s ease !important;
}

/* Logo en modo responsive */
@media (max-width: 991.98px) {
    img.brand-image,
    .brand-image,
    .brand-link img {
        max-width: 250px !important;
        max-height: 85px !important;
        width: 250px !important;
        min-width: 200px !important;
    }
    
    .navbar-brand img.brand-image,
    .navbar-brand img {
        max-width: 220px !important;
        max-height: 80px !important;
        width: 220px !important;
        min-width: 180px !important;
    }
}

/* Sobrescribir cualquier estilo inline - MÁXIMA PRIORIDAD */
img[style*="opacity"].brand-image,
.brand-link img[style*="opacity"],
img[style].brand-image,
.brand-link img[style],
img.brand-image[style],
.main-sidebar img[style],
.sidebar img[style] {
    max-width: 250px !important;
    max-height: 90px !important;
    width: 250px !important;
    height: auto !important;
    min-width: 200px !important;
    object-fit: contain !important;
}

/* ============================================
   ESTILOS PARA PRELOADER - CENTRADO VERTICAL
   ============================================ */

/* Contenedor del preloader - Centrado vertical y horizontal */
/* NO usar !important en display para permitir que AdminLTE lo oculte */
.preloader,
.preloader-wrapper,
.preloader-fullscreen,
.preloader-fullscreen-wrapper,
.preloader-cwrapper,
.preloader-cwrapper-wrapper,
[class*="preloader"],
[class*="preloader-fullscreen"],
[class*="preloader-cwrapper"] {
    /* Solo centrar cuando está visible - no forzar display */
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar posición y tamaño - pero permitir que display sea controlado por JS */
.preloader,
.preloader-fullscreen,
[class*="preloader"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Usar flex solo si no está oculto - NO forzar height */
    display: flex;
    /* Permitir que height sea controlado por JS */
    height: 100%;
    /* Transición suave para el desvanecimiento y desplazamiento */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out !important;
}

/* Animación de desvanecimiento con desplazamiento hacia arriba para el preloader */
@keyframes fadeOutPreloader {
    from {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50px);
    }
}

/* Clase para aplicar la animación de desvanecimiento con desplazamiento hacia arriba */
.preloader.fade-out,
.preloader-fullscreen.fade-out,
[class*="preloader"].fade-out {
    animation: fadeOutPreloader 0.5s ease-out forwards !important;
    transform: translateY(-50px) !important;
    opacity: 0 !important;
}

/* Ocultar preloader cuando tiene height: 0 o está oculto - después de la animación */
.preloader[style*="height: 0"],
.preloader[style*="height:0"],
.preloader-fullscreen[style*="height: 0"],
.preloader-fullscreen[style*="height:0"],
[class*="preloader"][style*="height: 0"],
[class*="preloader"][style*="height:0"] {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transform: translateY(-50px) !important;
    /* Esperar a que termine la animación antes de ocultar */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out, height 0s linear 0.5s !important;
}

/* Para el modo fullscreen - asegurar que ocupe toda la pantalla */
body > .preloader,
body > [class*="preloader-fullscreen"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important;
    display: flex;
    /* Permitir que height sea controlado por JS */
    height: 100vh;
    /* Transición suave para el desvanecimiento y desplazamiento */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out !important;
}

/* Ocultar preloader fullscreen cuando tiene height: 0 - después de la animación */
body > .preloader[style*="height: 0"],
body > .preloader[style*="height:0"],
body > [class*="preloader-fullscreen"][style*="height: 0"],
body > [class*="preloader-fullscreen"][style*="height:0"] {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transform: translateY(-50px) !important;
    /* Esperar a que termine la animación antes de ocultar */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out, height 0s linear 0.5s !important;
}

/* Imagen del preloader - Centrada perfectamente */
.preloader img,
.preloader-wrapper img,
.preloader-fullscreen img,
.preloader-cwrapper img,
[class*="preloader"] img,
[class*="preloader"] > img {
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
}

/* Para el modo cwrapper - centrado dentro del content-wrapper */
.preloader-cwrapper,
[class*="preloader-cwrapper"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que cualquier elemento dentro del preloader esté centrado */
.preloader > *,
[class*="preloader"] > * {
    margin: 0 auto !important;
    display: block !important;
}

/* REGLA CRÍTICA: Ocultar preloader cuando está oculto o tiene height 0 - con animación */
.preloader[style*="height: 0"],
.preloader[style*="height:0"],
.preloader[style*="display: none"],
.preloader[style*="display:none"],
.preloader-fullscreen[style*="height: 0"],
.preloader-fullscreen[style*="height:0"],
.preloader-fullscreen[style*="display: none"],
.preloader-fullscreen[style*="display:none"],
[class*="preloader"][style*="height: 0"],
[class*="preloader"][style*="height:0"],
[class*="preloader"][style*="display: none"],
[class*="preloader"][style*="display:none"] {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-50px) !important;
    /* Esperar a que termine la animación antes de ocultar completamente */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out, height 0s linear 0.5s, width 0s linear 0.5s !important;
}

/* Ocultar preloader cuando sus hijos están ocultos */
.preloader:has(> *[style*="display: none"]),
.preloader:has(> *[style*="display:none"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}