@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* 1. INICIO - ESTILOS GENERALES */

    /* PALETA DE COLORES PRINCIPAL -------------------------------------------------*/
:root {
    /* Colores Principales */
    --main-c1: #ab0033; /* Rojo */
    --main-c2: #bc955c; /* Cafe */
    --main-c3: #ddc9a3; /* Cafe Claro */
    --main-c4: #54565a; /* Gris */
    /* Colores Secundarios */
    --main-white: #ffffff;
    --main-black: black;
    /* Fuente gobierno */
    --main-font-gob: "Montserrat";
    --main-font-system: "Montserrat";
    /* Reescripcion de variables */
    --vz-topnav-item-active-color: var(--main-c1) !important;
    --vz-vertical-menu-item-hover-color: var(--main-c1) !important;
    --vz-vertical-menu-item-active-color: var(--main-c1) !important;
    --vz-vertical-menu-sub-item-hover-color: var(--main-c1) !important;
    --vz-vertical-menu-sub-item-active-color: var(--main-c1) !important;
    --vz-vertical-menu-item-hover-color: var(--main-white);
    --vz-vertical-menu-item-active-color: var(--main-white);
    --vz-vertical-menu-sub-item-hover-color: var(--main-white);
    --vz-vertical-menu-sub-item-active-color: var(--main-white);
    --swiper-theme-color: var(--main-c1) !important;
}
    /* ----------------------------------------------------------------------------------*/

    /* INICIO - FUENTE DEL SISTEMA -------------------------------------------------*/

    body {
        font-family: var(--main-font-system),"Open Sans", sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--main-font-system),"Open Sans", sans-serif !important;
    }

    span {
        font-family: var(--main-font-system),"Open Sans", sans-serif !important;
    }

    a {
        font-family: var(--main-font-system),"Open Sans", sans-serif !important;
    }


    /* INICIO - PALETA DE COLORES PRINCIPALES - TEXTO -------------------------------------------------*/
        .txt-c1 {
            color: var(--main-c1) !important;
        }

        .txt-c2 {
            color: var(--main-c2) !important;
        }

        .txt-c3 {
            color: var(--main-c3) !important;
        }

        .txt-c4 {
            color: var(--main-c4) !important;
        }

        .txt-white {
            color: var(--main-white) !important;
        }

        .txt-black {
            color: var(--main-black) !important;
        }
    /* FIN - PALETA DE COLORES PRINCIPALES - TEXTO -------------------------------------------------*/


    /* INICIO - PALETA DE COLORES PRINCIPALES - BACKGROUND  -------------------------------------------------*/
        .bg-c1 {
            background: var(--main-c1) !important;
        }

        .bg-c2 {
            background: var(--main-c2) !important;
        }

        .bg-c3 {
            background: var(--main-c3) !important;
        }

        .bg-c4 {
            background: var(--main-c4) !important;
        }

        .bg-black {
            background: var(--main-black) !important;
        }

        .bg-white {
            background: var(--main-white) !important;
        }
    /* FIN - PALETA DE COLORES PRINCIPALES - BACKGROUND  -------------------------------------------------*/


    /* INICIO - PALETA DE COLORES PRINCIPALES - BACKGROUND-COLOR  -------------------------------------------------*/
        .bg-01-cl {
            background-color: var(--main-c1) !important;
        }

        .bg-02-cl {
            background-color: var(--main-c2) !important;
        }

        .bg-03-cl {
            background-color: var(--main-c3) !important;
        }

        .bck-cl-gray {
            background-color: var(--main-c4) !important;
        }

        .bck-cl-black {
            background-color: var(--main-black) !important;
        }
    /* FIN - PALETA DE COLORES PRINCIPALES - BACKGROUND-COLOR  ------------------------------------------------- */


    /* INICIO - BOTONES NORMALES  -------------------------------------------------*/
        .btn-01-cl {
            background-color: var(--main-c1) !important;
            border-color: var(--main-c1)!important;
        }

        .btn-02-cl {
            background-color: var(--main-c2) !important;
            border-color: var(--main-c2) !important;
        }

        .btn-03-cl {
            background-color: var(--main-c3) !important;
            border-color: var(--main-c3) !important;
        }
      
    /* FIN - BOTONES NORMALES  ------------------------------------------------- */


    /* INICIO - BOTONES TRANSPARENTES -------------------------------------------------*/

        .btn-c1-light {
            color: var(--main-c1);
            border-color: var(--main-c1);
            border-radius: 15px;
            background: white;
            cursor: pointer;
        }

        .btn-c1-light:hover {
            color: white !important;
            border-color: var(--main-c1);
            background: var(--main-c1);
        }

        .btn-c2-light {
            color: var(--main-c2);
            border-color: var(--main-c2);
            border-radius: 15px;
            background: white;
            cursor: pointer;
        }

        .btn-c2-light:hover {
            color: white !important;
            border-color: var(--main-c2);
            background: var(--main-c2);
        }

        .btn-c3-light {
            cursor: pointer;
            background: white;
            color: var(--main-c3);
            border-color: var(--main-c3);
        }

        .btn-c3-light:hover {
            color: white !important;
            border-color: var(--main-c3);
            background: var(--main-c3);
        }

        .btn-c4-light {
            cursor: pointer;
            background: white;
            color: var(--main-c4);
            border-color: var(--main-c4);
        }

        .btn-c4-light:hover {
            color: white !important;
            border-color: var(--main-c4);
            background: var(--main-c4);
        }


    /* FIN - BOTONES TRANSPARENTES -------------------------------------------------*/


    /* INICIO - BORDES -------------------------------------------------*/

        .border-c1 {
            border-color: var(--main-c1)!important;
        }

        .border-c2 {
            border-color: var(--main-c2) !important;
        }

        .border-c3 {
            border-color: var(--main-c3) !important;
        }

        .border-c4 {
            border-color: var(--main-c4) !important;
        }

    /* FIN - BORDES -------------------------------------------------*/


    /* INICIO - TITULOS FUENTE GOBIERNO -------------------------------------------------*/

        .gob-t1-titles {
            font-family: var(--main-font-gob);
            font-weight: 700;
            color: var(--main-c1) !important;
        }

        .gob-t2-titles {
            font-family: var(--main-font-gob);
            font-weight: 700;
            color: var(--main-c2) !important;
        }

    /* FIN - TITULOS FUENTE GOBIERNO -------------------------------------------------*/



    /* INICIO - ANIMACION CARGANDO CONTENIDO */
    .line {
        height: 12px;
        margin: 10px;
        animation: pulse 1s infinite ease-in-out;
        -webkit-animation: pulse 1s infinite ease-in-out;
    }


    @keyframes pulse {
        0% {
            background-color: rgba(165, 165, 165, .1);
        }

        50% {
            background-color: rgba(165, 165, 165, .3);
        }

        100% {
            background-color: rgba(165, 165, 165, .3);
        }
    }

    @-webkit-keyframes pulse {
        0% {
            background-color: rgba(165, 165, 165, .1);
        }

        50% {
            background-color: rgba(165, 165, 165, .3);
        }

        100% {
            background-color: rgba(165, 165, 165, .3);
        }
    }
    /* FIN - ANIMACION CARGANDO CONTENIDO */



    /*** COLOR DE ELEMENTO DE CONTRACCION DE FILAS EN DATATABLE RESPONSIVE  */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
        background-color: #ab0033 !important;
        border-color: var(--vz-secondary-bg);
    }
    /* FIN */


    /**  COLORES DE SELECCION - LISTA DESPLEGABLE SELECT2 */
    .select2-container--default .select2-results__option[aria-selected=true]:hover {
        background-color: #ab0033 !important;
        color: #fff;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #ab0033 !important;
        color: white;
    }
    /* FIN */




    /*** INICIO - ESTILOS PARA ENTRADAS/INPUTS INVALIDOS Y VALIDOS EN UN FORMULARIO  **/
    .invalidate-input {
        border-color: var(--vz-form-invalid-border-color) !important;
        padding-right: calc(1.5em + 1rem) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f06548'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f06548' stroke='none'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right calc(0.375em + 0.25rem) center !important;
        background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem) !important;
    }


    .validate-input {
        border-color: var(--vz-form-valid-border-color) !important;
        padding-right: calc(1.5em + 1rem) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300bd9d' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right calc(0.375em + 0.25rem) center !important;
        background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem) !important;
    }
    /**  FIN - ESTILOS PARA ENTRADAS/INPUTS INVALIDOS Y VALIDOS EN UN FORMULARIO */



    /* INICIO - RECURRENTES -------------------------------------------------*/

        .txt-disabled {
            color: #bdbab480 !important;
        }

        .btn-action {
            font-size: 20px;
        }

        .btn-disabled {
            cursor: none !important;
        }

        .page-content {
            padding: calc(135px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
        }

        table.dataTable.no-footer {
            border-bottom: none;
        }

    /* FIN - RECURRENTES -------------------------------------------------*/

/* 1. FIN - ESTILOS GENERALES */




/* 2. INICIO - ESTILOS COMPONENTES */

    /* INICIO - TOP BAR  -------------------------------------------------*/
        .img-tn {
            width: 250px;
        }

        #top-bar {
            height: 75px;
            background-color: var(--main-white);
            border-bottom: var(--main-c1);
            border-bottom-width: 4.5px;
            border-bottom-style: solid;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 9999;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    /* FIN - TOP BAR  ----------------------------------------------------*/


    /* INICIO - TOP NAV  -------------------------------------------------*/
        .title-app {
            position: relative;
            align-items: center;
            margin-top: 26px;
            font-size: 25px;
            line-height: 20px;
            text-align: start;
        }

        .border-c1 {
            border-color: var(--main-c1) !important;
        }
    /* FIN - TOP NAV -------------------------------------------------*/

/* 2. FIN - ESTILOS COMPONENTES */





/* 3. INICIO - ESTILOS SECCIONES  */

    /**************** INICIO ESTILOS - INTERFAZ:LOGIN  *********************/
        .content-hidden {
            display: none !important;
        }

        .error-message {
            text-align: center;
            color: red;
        }

        #img-lg-1 {
            width: 480px;
        }

        #img-lg-2 {
            width: 400px;
        }

    /**************** FIN ESTILOS - INTERFAZ:LOGIN  *********************/

    /**************** INICIO ESTILOS - INTERFAZ: HOME  *********************/

        #btnBuscar {            
            width: 100%;
            justify-content: center;
        }

    /**************** FIN ESTILOS - INTERFAZ: HOME  *********************/




/* 3. FIN - ESTILOS SECCIONES  */





/* INICIO - FOOTER ---------------------------------------------------*/
.footer,
.app-footer {
    padding: 0px 0;
    border-top: 3px solid var(--main-c2);
    
    display: flex;
    align-items: center
}

.app-footer {
    background: var(--main-c1) !important;
}

.footer-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.8rem;
    font-weight: 400;
    padding-top: 14px;
    font-size: 10px;
}
/* FIN - FOOTER ------------------------------------------------------*/








/* 4. INICIO - REGLAS REPONSIVE  */


@media only screen and (max-width: 695px) {


    /* INICIO- COMPONENTE - TOP BAR */
    .img-tn {
        width: 160px;
    }
    /* FIN- COMPONENTE - TOP BAR */
   
    /* INICIO- COMPONENTE - TOP NAV */
    .card-element-header-search {
        align-items: baseline;
        flex-direction: column;
        line-height: 80px;
    }
    /* FIN- COMPONENTE - TOP NAV */

}

@media only screen and (max-width: 830px) {
    
    /* INICIO- COMPONENTE - TOP NAV */
    #txtBuscar {
        width: 170px;
    }

    #btnExportarUsuarios {
        margin-bottom: 10px;
    }
    /* FIN- COMPONENTE - TOP NAV */

}


@media only screen and (max-width: 995px) {

    /* INICIO- INTERFAZ - LOGIN */
        #img-lg-1 {
            width: 400px;
        }

        #img-lg-2 {
            width: 320px;
        }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 770px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 290px;
    }

    #img-lg-2 {
        width: 210px;
    }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 570px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 210px;
    }

    #img-lg-2 {
        width: 150px;
    }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 520px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 255px;
    }

    #img-lg-2 {
        width: 150px;
    }
    /* FIN- INTERFAZ - LOGIN */

}

@media only screen and (max-width: 370px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 190px;
    }

    #img-lg-2 {
        width: 110px;
    }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 360px) {


    /* INICIO- COMPONENTE - NAV BAR */
    .img-tn{
        width: 150px;
    }
    /* FIN- COMPONENTE - NAV BAR */

}


@media only screen and (max-width: 320px) {

    /* INICIO- COMPONENTE - NAV BAR */
    .img-tn {
        width: 134px;
    }
    /* FIN- COMPONENTE - NAV BAR */

}



@media only screen and (max-width: 370px) {

    /* INICIO- INTERFAZ - HOME */
    #img-lg-1 {
        width: 190px;
    }

    #img-lg-2 {
        width: 110px;
    }
    /* FIN- INTERFAZ - HOME */

}




@media only screen and (max-width: 370px) {

    /**************** INICIO ESTILOS - INTERFAZ: HOME  *********************/

    #btnBuscar {
        margin: 10px 0px 10px !important;
        width: 100%;
        justify-content: center;
    }

    /**************** FIN ESTILOS - INTERFAZ: HOME  *********************/

}






@media only screen and (max-width: 995px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 400px;
    }

    #img-lg-2 {
        width: 320px;
    }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 770px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 290px;
    }

    #img-lg-2 {
        width: 210px;
    }
    /* FIN- INTERFAZ - LOGIN */

}


@media only screen and (max-width: 570px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 210px;
    }

    #img-lg-2 {
        width: 150px;
    }
    /* FIN- INTERFAZ - LOGIN */
    footer {
        height: 78px !important;
    }
}


@media only screen and (max-width: 570px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 210px;
    }

    #img-lg-2 {
        width: 150px;
    }
    /* FIN- INTERFAZ - LOGIN */
    footer {
        height: 78px !important;
    }
}



@media only screen and (max-width: 520px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 190px;
    }

    #img-lg-2 {
        width: 150px;
    }

    /* FIN- INTERFAZ - LOGIN */
    footer {
        height: 78px !important;
    }
}




@media only screen and (max-width: 370px) {

    /* INICIO- INTERFAZ - LOGIN */
    #img-lg-1 {
        width: 190px;
    }

    #img-lg-2 {
        width: 110px;
    }
    /* FIN- INTERFAZ - LOGIN */


    footer {
        height: 78px !important;
    }
}