/*---------------------------------------- Fuentes ------------------------------------------------*/
/*#region*/

@font-face {
    font-family: "OpenSans-Bold";
    src: url("../../fonts/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-BoldItalic";
    src: url("../../fonts/OpenSans-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-ExtraBold";
    src: url("../../fonts/OpenSans-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-ExtraBoldItalic";
    src: url("../../fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-Italic";
    src: url("../../fonts/OpenSans-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-Light";
    src: url("../../fonts/OpenSans-Light.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-LightItalic";
    src: url("../../fonts/OpenSans-LightItalic.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-Regular";
    src: url("../../fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-Semibold";
    src: url("../../fonts/OpenSans-Semibold.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans-SemiboldItalic";
    src: url("../../fonts/OpenSans-SemiboldItalic.ttf") format("truetype");
}

/*#endregion*/







/*------------------------------- Globales -------------------------------*/
/*#region*/

:root {
    --blanco: #fff;
    --negro: #444;
    --gris-fuerte: #353535;
    --azul-oscuro: #111b2b;
    --verde: #198754;
    --base-clr: #11121a;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --accent-clr: #5e63ff;
    --secondary-text-clr: #b0b3c1;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.5;
}

html {
    font-size: 62.5%;
    font-family: OpenSans-Regular;
}

body {
    font-size: 1.4rem;
}

body::-webkit-scrollbar {
    width: 10px; /* Tamaño del scroll en vertical */
    height: 10px; /* Tamaño del scroll en horizontal */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
body::-webkit-scrollbar-thumb {
    background: var(--text-clr);
    border-radius: 4px;
}

    /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
    body::-webkit-scrollbar-thumb:hover {
        background: var(--text-clr);
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    }

    /* Cambiamos el fondo cuando esté en active */
    body::-webkit-scrollbar-thumb:active {
        background-color: var(--text-clr);
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del track */
    body::-webkit-scrollbar-track {
        background: var(--hover-clr);
        border-radius: 0;
    }

    /* Cambiamos el fondo cuando esté en active o hover */
    body::-webkit-scrollbar-track:hover,
    body::-webkit-scrollbar-track:active {
        background: var(--hover-clr);
    }


main {
    overflow: auto;
    padding: 0 2rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
}

@media (max-width: 1280px) {
    .container {
        max-width: 92%;
    }
}






.background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

    .background img {
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: -1;
        object-fit: cover;
        object-position: bottom;
    }







.btn {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    color: var(--blanco);
    padding: 0.5rem 1.5rem;
    border-radius: 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

.btn-azul-oscuro {
    background-color: var(--azul-oscuro);
}

.btn-verde {
    background-color: var(--verde);
}

    .btn:active {
        transform: scale(0.98);
        box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }




select.form-control {
    cursor: pointer;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 1.5rem;
    font-size: 1.2rem;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2.5rem;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

    .form-control:focus {
        border-color: var(--blanco);
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--blanco);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--blanco);
    }

    .form-control::-moz-placeholder {
        color: #999;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        color: #999;
    }

    .form-control::-webkit-input-placeholder {
        color: #999;
    }

    .form-control::-ms-expand {
        background-color: transparent;
        border: 0;
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
        background-color: #eee;
        opacity: 1;
    }

    .form-control[disabled],
    fieldset[disabled] .form-control {
        cursor: not-allowed;
    }

textarea.form-control {
    height: auto;
}

textarea {
    resize: none;
}

/*#endregion*/








/*------------------------------- Aside -------------------------------*/
/*#region*/

.main {
    display: grid;
    grid-template-columns: auto 1fr;
}

aside {
    box-sizing: border-box;
    height: 100vh;
    width: 200px;
    padding: 5px 0;
    background-color: var(--base-clr);
    border-right: 1px solid var(--line-clr);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: hidden;
    text-wrap: nowrap;
}

    aside.close {
        padding: 5px;
        width: 45px;
    }





    aside .logo-container {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 5px;
        .logo

{
    font-weight: 600;
}

}

#toggle-btn {
    margin-left: auto;
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    svg

{
    transition: rotate 150ms ease;
}

}

#toggle-btn:hover {
    background-color: var(--hover-clr);
}







#navbar {
    display: block;
    max-height: calc(100vh - 41px - 40px);
    overflow-y: auto;
    overflow-x: hidden;
}

    #navbar::-webkit-scrollbar {
        width: 10px; /* Tamaño del scroll en vertical */
        height: 10px; /* Tamaño del scroll en horizontal */
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del thumb */
    #navbar::-webkit-scrollbar-thumb {
        background: var(--text-clr);
        border-radius: 4px;
    }

        /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
        #navbar::-webkit-scrollbar-thumb:hover {
            background: var(--text-clr);
            box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
        }

        /* Cambiamos el fondo cuando esté en active */
        #navbar::-webkit-scrollbar-thumb:active {
            background-color: var(--text-clr);
        }

    /* Ponemos un color de fondo y redondeamos las esquinas del track */
    #navbar::-webkit-scrollbar-track {
        background: var(--hover-clr);
        border-radius: 4px;
    }

        /* Cambiamos el fondo cuando esté en active o hover */
        #navbar::-webkit-scrollbar-track:hover,
        #navbar::-webkit-scrollbar-track:active {
            background: var(--hover-clr);
        }








    #navbar ul {
        list-style: none;
    }

        #navbar ul li.active > button > svg {
            fill: var(--accent-clr);
        }

        #navbar > ul > li.active > a {
            color: var(--accent-clr);
            svg {
                fill: var(--accent-clr);
        }

        
}

#navbar a,
#navbar .dropdown-btn,
aside .logo {
    border-radius: 5px;
    padding: 0.6rem;
    text-decoration: none;
    color: var(--text-clr);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dropdown-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}



.logo-container svg,
#navbar svg {
    flex-shrink: 0;
    fill: var(--text-clr);
}

#navbar a span,
#navbar .dropdown-btn span {
    flex-grow: 1;
}

#navbar a:hover,
#navbar .dropdown-btn:hover {
    background-color: var(--hover-clr);
}

#navbar .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
    >div

{
    overflow: hidden;
}

}

#navbar .sub-menu.show {
    grid-template-rows: 1fr;
}

.dropdown-btn svg {
    transition: 200ms ease;
}

.rotate svg:last-child {
    rotate: 90deg;
}

#sidebar .sub-menu a,
#navbar .sub-menu-nested-container .dropdown-btn {
    padding-left: 2rem;
}

#navbar .sub-menu-nested-container .sub-menu a {
    padding-left: 4rem;
}



li > ul.sub-menu > div {
    background-color: var(--gris-fuerte);
}

li.sub-menu-nested-container > ul.sub-menu > div {
    background-color: var(--base-clr);
}





@media (max-width: 1000px) {
    .main {
        grid-template-columns: 1fr;
    }

    aside {
        width: 100%;
        height: auto;
        padding: 0;
    }

        aside.close {
            width: 100%;
            padding: 0;
            position: relative;
        }




        aside .logo-container {
            margin-top: 5px;
        }





    #navbar {
        display: grid;
        grid-template-rows: 0fr;
        transition: 300ms ease-in-out;
        max-height: calc(100vh - 40px);
    }

        #navbar.show-navbar {
            grid-template-rows: 1fr;
        }

        #navbar ul {
            overflow: hidden;
        }

        #navbar.show-navbar ul {
            overflow: visible;
        }
}

/*#endregion*/








/*------------------------------- Footer -------------------------------*/
/*#region*/

footer {
    background-color: var(--base-clr);
    padding: 1rem 0;
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .footer-container p {
        color: var(--blanco);
    }

/*#endregion*/







/*---------------------------------------- Sweet alert ------------------------------------------------*/
/*#region*/

.swal2-popup.swal2-toast .swal2-title {
    font-size: 1.8rem !important;
    margin: 0.2rem 1rem !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
    font-size: 1.3rem !important;
}

/*#endregion*/




/*---------------------------------------- Picker ------------------------------------------------*/
/*#region*/

.datepicker-controls .view-switch,
.datepicker-controls .next-button,
.datepicker-controls .prev-button,
.datepicker-button.today-button.today-btn {
    background-color: var(--base-clr);
    color: var(--blanco);
    font-size: 1.5rem;
    padding: 0.2rem
}


/*#endregion*/
/*---------------------------------------- Loading ------------------------------------------------*/
/*#region*/
.loader-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.6);
}

.loader-container-active {
    display: block;
}

.loader {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFFFFF #FFFFFF transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    .loader::after,
    .loader::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent transparent var(--accent-clr) var(--accent-clr);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotationBack 0.5s linear infinite;
        transform-origin: center center;
    }

    .loader::before {
        width: 40px;
        height: 40px;
        border-color: var(--hover-clr) var(--hover-clr) transparent transparent;
        animation: rotation 1.5s linear infinite;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


/*#endregion*/