/* Estilos globales para content_header en todo el proyecto */
.content-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 15px !important;
    padding: 25px 30px !important;
    margin: 20px 15px 30px 15px !important; /* Margen mejorado para separación */
    color: white !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ajuste del wrapper principal */
.content-wrapper {
    padding-top: 10px !important;
}

.content-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
    animation: float 20s infinite linear;
}

.content-header h1 {
    color: white !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    position: relative !important;
    z-index: 2 !important;
}

.content-header h1 i {
    margin-right: 15px !important;
    font-size: 1.8rem !important;
    color: #ffd700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.content-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important;
    position: relative !important;
    z-index: 2 !important;
}

.content-header hr {
    border: none !important;
    height: 3px !important;
    background: linear-gradient(90deg, #ffd700, #fff, #ffd700) !important;
    border-radius: 3px !important;
    margin: 15px 0 0 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    position: relative !important;
    z-index: 2 !important;
}

@keyframes float {
    0% { transform: translateX(-100px) translateY(-100px) rotate(0deg); }
    100% { transform: translateX(-100px) translateY(-100px) rotate(360deg); }
}

/* Responsive para headers */
@media (max-width: 768px) {
    .content-header {
        padding: 20px !important;
        text-align: center !important;
    }
    
    .content-header h1 {
        font-size: 1.5rem !important;
    }
    
    .content-header p {
        font-size: 1rem !important;
    }
}

/* Asegurar que los estilos se apliquen por encima de AdminLTE */
.content-wrapper .content-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 15px !important;
    padding: 25px 30px !important;
    margin-bottom: 25px !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

/* ========================================
   Estilos para Layout Fijo
   ======================================== */

/* Asegurar que el sidebar permanezca fijo */
.layout-fixed .main-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 1038 !important;
    width: 250px !important;
    transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out !important;
}

/* Cuando el sidebar está colapsado, reducir su ancho (no ocultarlo) */
.sidebar-collapse .main-sidebar {
    width: 4.6rem !important; /* Ancho colapsado mostrando solo iconos */
}

/* Cuando el sidebar está colapsado y se pasa el mouse, aumentar z-index */
.sidebar-collapse .main-sidebar:hover {
    z-index: 1050 !important; /* Por encima de todo para que no quede por debajo */
    width: 250px !important; /* Expandir al pasar el mouse */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important; /* Sombra para dar profundidad */
}

/* Asegurar que el navbar permanezca fijo */
.layout-fixed .main-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0px !important; /* Cambiado de 250px a 0px para que ocupe todo el ancho */
    z-index: 1037 !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* Ajustar el contenido cuando el sidebar está fijo */
.layout-fixed .content-wrapper {
    margin-left: 250px !important;
    margin-top: 57px !important;
    padding-top: 20px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* Scrollbar personalizado para el sidebar */
.main-sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.main-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
}

.main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Ajustes cuando el sidebar está colapsado */
.sidebar-collapse .main-header {
    margin-left: 4.6rem !important; /* Ajustar al ancho del sidebar colapsado */
}

.sidebar-collapse .content-wrapper {
    margin-left: 4.6rem !important; /* Ajustar al ancho del sidebar colapsado */
}

.sidebar-collapse .main-footer {
    margin-left: 4.6rem !important; /* Ajustar al ancho del sidebar colapsado */
}

/* Cuando el sidebar NO está colapsado */
body:not(.sidebar-collapse) .layout-fixed .main-header {
    margin-left: 250px !important;
}

/* Asegurar transiciones suaves y parejas para todos los elementos */
.main-sidebar,
.content-wrapper,
.main-header,
.main-footer {
    transition-property: margin-left, transform !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease-in-out !important;
}

/* Responsive - En móviles el sidebar se oculta */
@media (max-width: 991.98px) {
    .layout-fixed .main-header {
        left: 0 !important;
        margin-left: 0 !important;
    }
    
    .layout-fixed .content-wrapper {
        margin-left: 0 !important;
    }
    
    /* En móviles sí ocultamos completamente el sidebar */
    .sidebar-collapse .main-sidebar {
        transform: translateX(-250px) !important;
    }
    
    .sidebar-open .main-sidebar {
        transform: translateX(0) !important;
    }
}

/* Mejorar el contenido scrollable */
.content-wrapper {
    min-height: calc(100vh - 57px) !important;
    background-color: #f4f6f9 !important;
}

/* Asegurar que el footer también se ajuste correctamente */
.layout-fixed .main-footer {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

.sidebar-collapse .main-footer {
    margin-left: 0 !important;
}

/* ========================================
   Ajuste del main-header cuando se abre/cierra el sidebar
   ======================================== */

@media (min-width: 768px) {
    /* El main-header siempre debe empezar desde left: 0 para que se vea el botón */
    .layout-fixed .main-header {
        left: 0px !important;
    }
    
    /* Cuando el sidebar está abierto, agregar margen izquierdo completo */
    body:not(.sidebar-collapse) .main-header {
        margin-left: 250px !important;
    }
    
    /* Cuando el sidebar está colapsado, margen reducido */
    .sidebar-collapse .main-header {
        margin-left: 4.6rem !important;
    }
}