/* ==========================================================
   MAYAN EDMS 4.12
   IDENTIDAD VISUAL INSTITUCIONAL
   ========================================================== */


/* ==========================================================
   1. TIPOGRAFÍA INSTITUCIONAL
   ========================================================== */

@font-face {
    font-family: "Criticized";

    src: url("/criticized.ttf") format("truetype");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}


/* ==========================================================
   2. PALETA INSTITUCIONAL
   ========================================================== */

:root {

    /* COLORES PRIMARIOS */

    --brand-primary: #882345;
    --brand-orange: #E98300;


    /* COLORES SECUNDARIOS */

    --brand-wine-dark: #822433;
    --brand-gray: #8B8D8E;
    --brand-orange-dark: #E17000;
    --brand-black: #000000;


    /* COLORES COMPLEMENTARIOS */

    --brand-white: #FFFFFF;
    --brand-background: #F5F3F4;
    --brand-surface: #FFFFFF;
    --brand-border: #DEDEDE;
    --brand-text: #262126;
    --brand-text-muted: #727272;


    /* TIPOGRAFÍA */

    --brand-font: "Criticized", Arial, sans-serif;


    /* VARIABLES BOOTSTRAP */

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 136, 35, 69;

    --bs-secondary: var(--brand-gray);
    --bs-secondary-rgb: 139, 141, 142;

    --bs-body-font-family: var(--brand-font);

    --bs-body-bg: var(--brand-background);
    --bs-body-color: var(--brand-text);

    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 136, 35, 69;

    --bs-link-hover-color: var(--brand-wine-dark);
    --bs-link-hover-color-rgb: 130, 36, 51;
}


/* ==========================================================
   3. MODO CLARO
   ========================================================== */

:root,
[data-bs-theme="light"] {

    --brand-background: #F5F3F4;
    --brand-surface: #FFFFFF;

    --brand-text: #262126;
    --brand-text-muted: #727272;

    --brand-border: #DEDEDE;

    --bs-body-bg: var(--brand-background);
    --bs-body-color: var(--brand-text);

}


/* ==========================================================
   4. MODO OSCURO
   ========================================================== */

[data-bs-theme="dark"] {

    --brand-background: #1C171A;
    --brand-surface: #292226;

    --brand-text: #F4EFF1;
    --brand-text-muted: #B8ADB1;

    --brand-border: #51464B;

    --bs-body-bg: var(--brand-background);
    --bs-body-color: var(--brand-text);

    --bs-link-color: #E98300;
    --bs-link-hover-color: #FFB14D;

}


/* ==========================================================
   5. TIPOGRAFÍA GENERAL
   ========================================================== */

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select {

    font-family: var(--brand-font) !important;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--brand-font);

}


/* ==========================================================
   6. FONDO GENERAL
   ========================================================== */

body {

    background-color: var(--brand-background);

    color: var(--brand-text);

}


/* ==========================================================
   7. BARRA DE NAVEGACIÓN
   ========================================================== */

.navbar,
.navbar.bg-primary,
.navbar.bg-dark {

    background-color: var(--brand-primary) !important;

}


.navbar .navbar-brand,
.navbar .nav-link,
.navbar a {

    color: var(--brand-white) !important;

}


.navbar .nav-link:hover,
.navbar .navbar-brand:hover {

    color: #F4C4D2 !important;

}


/* ==========================================================
   8. BOTONES PRIMARIOS
   ========================================================== */

.btn-primary {

    --bs-btn-color: #FFFFFF;

    --bs-btn-bg: #882345;
    --bs-btn-border-color: #882345;

    --bs-btn-hover-color: #FFFFFF;

    --bs-btn-hover-bg: #822433;
    --bs-btn-hover-border-color: #822433;

    --bs-btn-active-color: #FFFFFF;

    --bs-btn-active-bg: #6F1C36;
    --bs-btn-active-border-color: #6F1C36;

}


/* ==========================================================
   9. BOTONES SECUNDARIOS
   ========================================================== */

.btn-secondary {

    --bs-btn-color: #000000;

    --bs-btn-bg: #8B8D8E;
    --bs-btn-border-color: #8B8D8E;

    --bs-btn-hover-color: #FFFFFF;

    --bs-btn-hover-bg: #707274;
    --bs-btn-hover-border-color: #707274;

}


/* ==========================================================
   10. BOTONES DE ACCIÓN NARANJA
   ========================================================== */

.btn-warning {

    --bs-btn-color: #000000;

    --bs-btn-bg: #E98300;
    --bs-btn-border-color: #E98300;

    --bs-btn-hover-color: #000000;

    --bs-btn-hover-bg: #E17000;
    --bs-btn-hover-border-color: #E17000;

}


/* ==========================================================
   11. BOTONES OUTLINE
   ========================================================== */

.btn-outline-primary {

    --bs-btn-color: #882345;
    --bs-btn-border-color: #882345;

    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #882345;
    --bs-btn-hover-border-color: #882345;

}


/* ==========================================================
   12. ENLACES
   ========================================================== */

a:not(.btn) {

    color: var(--bs-link-color);

}


a:not(.btn):hover {

    color: var(--bs-link-hover-color);

}


/* ==========================================================
   13. FORMULARIOS
   ========================================================== */

.form-control:focus,
.form-select:focus {

    border-color: var(--brand-orange);

    box-shadow: 0 0 0 0.2rem rgba(233, 131, 0, 0.20);

}


/* ==========================================================
   14. TARJETAS
   ========================================================== */

.card {

    background-color: var(--brand-surface);

    border-color: var(--brand-border);

}


.card-header {

    border-bottom-color: var(--brand-border);

}


/* ==========================================================
   15. TABLAS
   ========================================================== */

.table thead th {

    background-color: var(--brand-primary);

    color: #FFFFFF;

    border-color: var(--brand-primary);

}


.table {

    --bs-table-color: var(--brand-text);

}


/* ==========================================================
   16. PAGINACIÓN
   ========================================================== */

.pagination .page-item.active .page-link {

    background-color: var(--brand-primary);

    border-color: var(--brand-primary);

    color: #FFFFFF;

}


.pagination .page-link {

    color: var(--brand-primary);

}


/* ==========================================================
   17. INDICADORES Y ETIQUETAS
   ========================================================== */

.badge.bg-primary {

    background-color: var(--brand-primary) !important;

}


.badge.bg-secondary {

    background-color: var(--brand-gray) !important;

}


.badge.bg-warning {

    background-color: var(--brand-orange) !important;

    color: #000000 !important;

}


/* ==========================================================
   18. BARRAS DE PROGRESO
   ========================================================== */

.progress-bar {

    background-color: var(--brand-orange);

}


/* ==========================================================
   19. ALERTAS
   ========================================================== */

.alert-warning {

    background-color: #FFF0DB;

    color: #663500;

    border-color: var(--brand-orange-dark);

}


/* ==========================================================
   20. BORDES INSTITUCIONALES
   ========================================================== */

.border-primary {

    border-color: var(--brand-primary) !important;

}


.text-primary {

    color: var(--brand-primary) !important;

}


.bg-primary {

    background-color: var(--brand-primary) !important;

}


/* ==========================================================
   21. ACCESIBILIDAD
   ========================================================== */

:focus-visible {

    outline: 3px solid var(--brand-orange);

    outline-offset: 2px;

}


/* ==========================================================
   22. RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

    body {

        font-size: 14px;

    }

}
/* =====================================================
   ENCABEZADOS DE TARJETAS Y SUS HIPERVÍNCULOS
   ===================================================== */

/* Hipervínculos del encabezado */

.card-header a:not(.btn),
.card-header .btn-link,
.card-header .dropdown-toggle {

    color: #FFFFFF !important;

}

/* Iconos del encabezado */

.card-header i,
.card-header svg,
.card-header .fa,
.card-header .fas {

    color: #FFFFFF !important;

}

/* Estado hover de los enlaces */

.card-header a:not(.btn):hover,
.card-header .btn-link:hover,
.card-header .dropdown-toggle:hover {

    color: #FFFFFF !important;
    text-decoration: none;

}
/* =====================================================
   MENÚ DESPLEGABLE SUPERIOR
   ===================================================== */

/* Fondo del menú */

.navbar .dropdown-menu {

    background-color: #882345 !important;

    border: 1px solid #822433 !important;

    --bs-dropdown-bg: #882345;

    --bs-dropdown-color: #FFFFFF;

    --bs-dropdown-link-color: #FFFFFF;

    --bs-dropdown-link-hover-color: #FFFFFF;

    --bs-dropdown-link-hover-bg: #822433;

    --bs-dropdown-link-active-color: #FFFFFF;

    --bs-dropdown-link-active-bg: #822433;

}

/* Textos de las opciones */

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a {

    color: #FFFFFF !important;

}

/* Iconos del menú */

.navbar .dropdown-menu i,
.navbar .dropdown-menu svg,
.navbar .dropdown-menu .fa,
.navbar .dropdown-menu .fas {

    color: #FFFFFF !important;

}

/* Efecto al pasar el cursor */

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus {

    background-color: #822433 !important;

    color: #FFFFFF !important;

}

/* Separadores entre opciones */

.navbar .dropdown-menu .dropdown-divider {

    border-top-color: rgba(255, 255, 255, 0.30);

}

/* Texto secundario */

.navbar .dropdown-menu .text-muted {

    color: #FFFFFF !important;

    opacity: 0.85;

}
/* =====================================================
   23. BARRA LATERAL PRINCIPAL DE MAYAN
   ===================================================== */

/* Fondo general de la barra lateral */

#menu-main {
    background-color: #822433 !important;
    color: #FFFFFF !important;
}

/* Elementos interiores */

#menu-main .offcanvas-body,
#menu-main .offcanvas-header,
#menu-main .accordion,
#menu-main .accordion-item {
    background-color: #822433 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Enlaces y opciones */

#menu-main a,
#menu-main button,
#menu-main .nav-link,
#menu-main [role="button"] {
    color: #FFFFFF !important;
}

/* Iconos */

#menu-main i,
#menu-main svg,
#menu-main .fa,
#menu-main .fas,
#menu-main .far {
    color: #FFFFFF !important;
}

/* Opciones al pasar el cursor */

#menu-main a:hover,
#menu-main button:hover,
#menu-main .nav-link:hover {
    background-color: #882345 !important;
    color: #FFFFFF !important;
}

/* Elementos seleccionados */

#menu-main .active,
#menu-main .selected,
#menu-main [aria-current="page"] {
    background-color: #882345 !important;
    color: #FFFFFF !important;
}

/* Botones de expansión */

#menu-main .accordion-button {
    background-color: #822433 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

#menu-main .accordion-button:not(.collapsed) {
    background-color: #882345 !important;
    color: #FFFFFF !important;
}

/* Bordes divisores */

#menu-main hr,
#menu-main .border-bottom {
    border-color: rgba(255,255,255,0.20) !important;
}
/* =====================================================
   24. CABINETS - DISEÑO RESPONSIVO
   MAYAN EDMS 4.12
   ===================================================== */


/* CONTENEDOR PRINCIPAL */

.row:has(> div > #jstree) {
    min-width: 0;
}


/* =====================================================
   PANTALLAS GRANDES
   ===================================================== */

@media (min-width: 992px) {

    /* Distribución mediante CSS Grid */

    .row:has(> div > #jstree) {

        display: grid !important;

        grid-template-columns:
            minmax(240px, 0.4fr)
            minmax(0, 1fr);

        gap: 1rem;

        align-items: start;

        margin-inline: 0 !important;

    }

    /* Columna Navigation */

    .row:has(> div > #jstree) > div:has(> #jstree) {

        width: auto !important;

        max-width: none !important;

        flex: none !important;

        min-width: 0 !important;

        margin-inline-end: 0 !important;

    }

    /* Columna del listado */

    .row:has(> div > #jstree) > div:has(> #jstree) + div {

        width: auto !important;

        max-width: none !important;

        flex: none !important;

        min-width: 0 !important;

    }

}


/* =====================================================
   ÁRBOL DE NAVEGACIÓN
   ===================================================== */

#jstree {

    width: 100% !important;

    max-width: 100% !important;

    max-height: 65vh;

    min-width: 0;

    overflow: auto !important;

    box-sizing: border-box;

    padding: 0.5rem;

    overscroll-behavior: contain;

}


/* Evitar que las carpetas desborden el panel */

#jstree .jstree-container-ul {

    min-width: max-content;

}


/* =====================================================
   LISTADO DE DOCUMENTOS
   ===================================================== */

.row:has(> div > #jstree) > div:has(> #jstree) + div {

    min-width: 0;

}


/* =====================================================
   TABLETAS Y MÓVILES
   ===================================================== */

@media (max-width: 991.98px) {

    /* Una columna para ambas secciones */

    .row:has(> div > #jstree) {

        display: grid !important;

        grid-template-columns: minmax(0, 1fr);

        gap: 1rem;

        margin-inline: 0 !important;

    }

    /* Ajustar las columnas */

    .row:has(> div > #jstree) > div:has(> #jstree),
    .row:has(> div > #jstree) > div:has(> #jstree) + div {

        width: auto !important;

        max-width: none !important;

        flex: none !important;

        min-width: 0 !important;

        margin-inline-end: 0 !important;

    }

    /* Reducir la altura del árbol */

    #jstree {

        max-height: 40vh;

        overflow: auto !important;

    }

}


/* =====================================================
   AJUSTES PARA PANTALLAS MUY PEQUEÑAS
   ===================================================== */

@media (max-width: 576px) {

    #jstree {

        max-height: 35vh;

        padding: 0.25rem;

    }

}
/* =========================================
   LOGOTIPO PERSONALIZADO MAYAN EDMS
   ========================================= */

/* Contenedor del logotipo */

.navbar-brand {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;

    font-size: 0 !important;
    line-height: 0 !important;
}

/* Ocultar los elementos originales */

.navbar-brand > * {
    display: none !important;
}

/* Mostrar el nuevo logotipo */

.navbar-brand::before {
    content: "";

    display: block;

    width: 180px;
    height: 50px;

    background-image: url("/logo-KidZania.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Adaptación para dispositivos móviles */

@media (max-width: 576px) {

    .navbar-brand::before {
        width: 125px;
        height: 38px;
    }

}
/* =====================================================
   25. UNIFICACIÓN DE COLOR DE BARRAS
   MAYAN EDMS 4.12
   ===================================================== */

/* Fondo principal de la barra lateral */

#menu-main {
    background-color: #882345 !important;
    color: #FFFFFF !important;
}

/* Contenedores interiores */

#menu-main .offcanvas-body,
#menu-main .offcanvas-header,
#menu-main .accordion,
#menu-main .accordion-item,
#menu-main .accordion-collapse {
    background-color: #882345 !important;
    color: #FFFFFF !important;
}

/* Encabezados de secciones */

#menu-main .accordion-button,
#menu-main .accordion-button:not(.collapsed) {
    background-color: #882345 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* Hipervínculos */

#menu-main a,
#menu-main .nav-link,
#menu-main button {
    color: #FFFFFF !important;
}

/* Iconos */

#menu-main i,
#menu-main svg,
#menu-main .fa,
#menu-main .fas {
    color: #FFFFFF !important;
}

/* Elementos seleccionados */

#menu-main .active,
#menu-main .selected,
#menu-main [aria-current="page"] {
    background-color: #822433 !important;
    color: #FFFFFF !important;
}

/* Efecto hover */

#menu-main a:hover,
#menu-main button:hover,
#menu-main .nav-link:hover {
    background-color: #822433 !important;
    color: #FFFFFF !important;
}

/* Separadores */

#menu-main hr,
#menu-main .border-bottom {
    border-color: rgba(255,255,255,0.20) !important;
}