/* =========================================================================
   FOOTER DINÁMICO Y NATURAL (STICKY FOOTER FLEXBOX)
   ========================================================================= */

html,
body {
    height: 100%;
    margin: 0;
}

/* El contenedor general del template envuelve toda la página en columna */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* El contenido principal (content-wrapper) crece de manera flexible ocupando el espacio necesario */
.content-wrapper {
    flex: 1 0 auto;
}

/* El footer se ubica de forma natural al final y baja si el contenido es extenso */
.main-footer {
    flex-shrink: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 15px;
    z-index: 10;
}

/* =========================================================================
   CORRECCIÓN DEFINITIVA DE MODALES Y CAPAS EN ADMINLTE
   ========================================================================= */

/* Asegurar que el fondo oscuro del modal se posicione correctamente y no bloquee clics válidos */
.modal-backdrop {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040 !important;
    background-color: #000000 !important;
    opacity: 0.5 !important;
}

/* Forzar que la ventana del modal esté siempre por encima de cualquier otro elemento */
.modal {
    z-index: 1050 !important;
    overflow-y: auto !important;
}

/* Evitar que elementos del layout principal atrapen los eventos de los modales */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
    /* Evita saltos extraños en la barra de desplazamiento */
}

/* Asegurar que el panel lateral o wrappers no interfieran con las capas flotantes */
.main-sidebar,
.main-header,
.content-wrapper {
    z-index: auto;
    /* Restablece contextos de apilamiento conflictivos */
}

/* =========================================================================
   ESTILO MODERNO MUNAY KHLEAN - PANEL IZQUIERDO VERDE OSCURO / SUBMÓDULOS VERDE CLARO
   ========================================================================= */

:root {
    --mk-primary-dark: #074629;
    /* Verde oscuro principal del panel */
    --mk-primary: #0a5c36;
    /* Verde corporativo */
    --mk-submenu-bg: #0f7646;
    /* Verde claro para los submódulos */
    --mk-submenu-hover: #128c52;
    /* Verde un poco más claro para hover en submódulos */
    --mk-bg-light: #f8fafc;
    /* Fondo general de la página */
    --mk-text-light: #ffffff;
    /* Texto blanco */
    --mk-border-dark: rgba(255, 255, 255, 0.1);
    /* Borde sutil transparente */
}

/* Fondo general y estructura */
body,
.wrapper,
.content-wrapper {
    background-color: var(--mk-bg-light) !important;
}

/* Ocultar barra superior (Header clásico de AdminLTE) para dejar limpio el diseño */
.main-header {
    display: none !important;
}

/* Ajustar el contenedor principal para que ocupe todo el ancho sin la cabecera */
.content-wrapper,
.right-side {
    margin-left: 230px !important;
    margin-top: 0 !important;
}

@media (max-width: 767px) {

    .content-wrapper,
    .right-side {
        margin-left: 0 !important;
    }
}

/* =========================================================================
   LOGIN
   ========================================================================= */

.login-page {
    height: 100vh !important;
    /* Ocupa toda la altura de la pantalla */
    display: flex !important;
    align-items: center !important;
    /* Centrado vertical */
    justify-content: center !important;
    /* Centrado horizontal */
    background: url('../public/images/fondo.webp') no-repeat center center fixed !important;
    background-size: cover !important;
    margin: 0;
}

/* Capa opcional para oscurecer un poco el fondo y que el formulario resalte */
.login-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Negro al 30% de opacidad */
    z-index: -1;
}

/* Estilo extra para que el cuadro de login se vea más moderno */
.login-box-body {
    border-radius: 10px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.7);
}

/* Opción A: Añadir una sombra suave al logo */
.login-box-body img {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Opción B: Darle un fondo oscuro solo al logo para que las letras blancas resalten */
.logo-container {
    background-color: #2c3e50;
    /* Un azul marino oscuro */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}



/* =========================================================================
   PANEL LATERAL (SIDEBAR) - VERDE OSCURO
   ========================================================================= */
.main-sidebar {
    background-color: var(--mk-primary-dark) !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 230px;
    z-index: 810;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
    padding-top: 0px;
}

.sidebar {
    padding-bottom: 20px;
}

.sidebar-menu {
    padding: 10px 0 !important;
}

/* Encabezados de sección en el sidebar (Ej: MÓDULO DE APRENDIZAJE) */
.sidebar-menu>.header {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    padding: 10px 15px 5px 15px !important;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Menú Principal */
.sidebar-menu>li>a {
    color: var(--mk-text-light) !important;
    border-left: 3px solid transparent;
    padding: 12px 15px !important;
    font-weight: 500;
    display: flex !important;
    align-items: flex-start !important;
    position: relative !important;
    transition: all 0.25s ease;
}

.sidebar-menu>li>a>span.menu-text {
    flex: 1 !important;
    padding-right: 25px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
}

.menu-icon {
    color: var(--mk-text-light) !important;
    width: 24px;
    text-align: center;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Hover y Activo del Menú Principal */
.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
    color: var(--mk-text-light) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: #ffffff !important;
}

/* Flecha desplegable */
.sidebar-menu>li>a>.pull-right {
    position: absolute !important;
    right: 15px !important;
    top: 18px !important;
    transform: translateY(0) !important;
    margin: 0 !important;
    transition: transform 0.3s ease !important;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-menu>li.active>a>.pull-right {
    transform: rotate(-90deg) !important;
}

/* =========================================================================
   SUBMÓDULOS - FONDO VERDE CLARO
   ========================================================================= */
.skin-blue .sidebar-menu .treeview-menu,
.sidebar .sidebar-menu .treeview-menu {
    background-color: var(--mk-submenu-bg) !important;
    /* Verde claro distintivo */
    margin: 4px 10px !important;
    border-radius: 6px !important;
    padding: 6px 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.treeview-menu>li>a {
    color: #ffffff !important;
    padding: 8px 15px 8px 32px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: flex-start !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3;
}

.treeview-menu>li>a>span {
    flex: 1 !important;
    white-space: normal !important;
}

.treeview-menu>li>a>.menu-icon,
.treeview-menu>li>a>i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    margin-top: 1px;
    color: #ffffff !important;
    flex-shrink: 0;
}

/* Hover y Activo para Submódulos */
.treeview-menu>li>a:hover {
    background-color: var(--mk-submenu-hover) !important;
    color: #ffffff !important;
    border-radius: 4px;
}

.treeview-menu>li.active>a {
    background-color: var(--mk-submenu-hover) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 4px;
}

/* Barra de desplazamiento elegante para el panel */
.main-sidebar::-webkit-scrollbar {
    width: 5px;
}

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

/* =========================================================================
   ESTILOS FINALES RESPONSIVOS Y COLAPSO DE SIDEBAR
   ========================================================================= */

@media (max-width: 767px) {

    /* Mostrar cabecera móvil y ocultar botón de colapso de PC */
    .mobile-header-custom {
        display: flex !important;
    }

    .pc-collapse-btn-container {
        display: none !important;
    }

    /* Ajustar contenido y panel drawer en celulares */
    .content-wrapper,
    .right-side {
        margin-left: 0 !important;
        margin-top: 55px !important;
    }

    .main-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        width: 82% !important;
        max-width: 280px !important;
        z-index: 1050 !important;
    }

    body.mobile-menu-active .main-sidebar {
        transform: translateX(0) !important;
    }
}

@media (min-width: 768px) {

    /* Ocultar cabecera móvil en computadoras */
    .mobile-header-custom {
        display: none !important;
    }

    /* Mostrar botón de colapso para PC */
    .pc-collapse-btn-container {
        display: block !important;
    }

    /* Comportamiento cuando AdminLTE contrae el sidebar en PC (.sidebar-collapse) */
    body.sidebar-collapse .sidebar-logo-container img.logo-img-dynamic {
        max-height: 25px !important;
        /* Logo más pequeño al contraer */
        content: url('../public/images/logo_icono.ico');
        /* Opcional: cambia a icono si prefieres */
    }

    body.sidebar-collapse .user-details-text,
    body.sidebar-collapse .logout-text {
        display: none !important;
        /* Oculta textos de usuario al contraer */
    }

    body.sidebar-collapse .sidebar-footer {
        padding: 10px 5px !important;
        text-align: center;
    }
}


/* =========================================================================
   REEMPLAZO GLOBAL DE BOTONES PRIMARIOS Y ESTADOS ACTIVE/HOVER
   ========================================================================= */

.btn-primary,
.skin-blue .btn-primary {
    background-color: var(--mk-primary, #0a5c36) !important;
    border-color: var(--mk-primary-dark, #074629) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-color: #074629 !important;
    /* Un tono un poco más oscuro para el hover */
    border-color: #05331e !important;
    color: #ffffff !important;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover {
    background-color: #0a5c36 !important;
    border-color: #074629 !important;
    opacity: 0.65;
}

/* =========================================================================
   REEMPLAZO GLOBAL DE SIDEBARS
   ========================================================================= */

/* Contenedor de cabecera reutilizable basado en tu paleta verde */
.sidebar-header.mk-bg-primary {
    padding: 10px !important;
    background-color: var(--mk-primary, #0a5c36) !important;
    color: #ffffff !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.sidebar-header.mk-bg-primary h4 {
    color: #ffffff !important;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* =========================================================================
   BARRA DE DESPLAZAMIENTO
   ========================================================================= */

/* 1. Ancho de la barra (Delgado) */
::-webkit-scrollbar {
    width: 6px;
    /* Ancho para scroll vertical */
    height: 6px;
    /* Alto para scroll horizontal */
}

/* 2. El fondo de la barra (Track) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color de fondo muy claro */
    border-radius: 0px;
    /* Sin bordes redondeados */
}

/* 3. La barra que se desplaza (Thumb) */
::-webkit-scrollbar-thumb {
    background: #cccccc;
    /* Color plomo claro */
    border-radius: 0px;
    /* Sin bordes redondeados */
}

/* 4. Cambio de color al pasar el mouse (Hover) */
::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    /* Plomo un poco más oscuro al interactuar */
}

/* 5. Eliminar flechas (Botones de scroll) */
::-webkit-scrollbar-button {
    display: none;
}


/* =========================================================================
   CENTRADO DE DATATABLES
   ========================================================================= */

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: center;
}