@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..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";
    /* Fuente gobierno */
    --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 - FUENTES DEL SISTEMA - TEXTO -------------------------------------------------*/

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 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.nofooter {
    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: 13px;
    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: 40px;
    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:CONCEPTOS  *********************/

.btn-show {
    width: 180px;
    height: 45px;
    border-radius: 50px;
    border: none;
    transition: all 0.5s ease-in-out;
    font-size: 16px;
    display: flex;
    align-items: center;
    background: var(--main-c1);
    color: #f5f5f5;
}

    .btn-show .icon {
        position: absolute;
        height: 40px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
    }

    .btn-show .text {
        transform: translateX(65px);
    }

    .btn-show:hover .icon {
        width: 175px;
    }

    .btn-show:hover .text {
        transition: all 0.5s;
        opacity: 0;
    }

    .btn-show:focus {
        outline: none;
    }

    .btn-show:active .icon {
        transform: scale(0.85);
    }

/**************** FIN ESTILOS - INTERFAZ:CONCEPTOS  *********************/


/* 3. FIN - ESTILOS SECCIONES  */





/* 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 */
    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;
    }
}


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


    /* INICIO- COMPONENTE - NAV BAR */
    .img-tn {
        width: 150px;
    }
    /* FIN- COMPONENTE - NAV BAR */
    footer {
        height: 78px !important;
    }
}


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



    /* INICIO- COMPONENTE - NAV BAR */
    .img-tn {
        width: 134px;
    }
    /* FIN- COMPONENTE - NAV BAR */
    footer {
        height: 78px !important;
    }
}




table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: #ab003300 !important;
    border-color: var(--vz-secondary-bg);
    color: var(--main-c1) !important;
}