/*
Tipo: Clase que asigna colores como variables constantes
Proyecto: Sitio Bases de Datos
*/
/* :root {
    --main-principal-color: #006954;
    --main-extra-color-1: #00B591;
    --main-secondary-color: #27826F;
    --main-important-color: red;
    --main-body-color:#f8f9fa;
    --main-white-color: white;
    --main-black-color: black; 

    --main-brb-red: #770717;
    --main-brb-white: white;
    --main-brb-gray: #ced4da;
} */
 /* 
SECCIÓN: FUENTES
*/
/* 
TIPO: IMPORTACIONES DE FUENTES 
PROYECTO: EVALUACIONES 
@import url('https://fonts.googleapis.com/css2?family=Figtree&family=Inter:wght@200&family=Poppins:wght@200&family=Sarabun:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Figtree&family=Inter:wght@200&family=Poppins:wght@200&family=Sarabun:wght@100&display=swap');

*/
 /*Lora*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/*Roboto condensed*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* --main-principal-color: #b84c0b; */
    --main-principal-color: #6f4f46;
    --main-extra-color-1: #00B591;
    --main-secondary-color: #f9c361;
    --main-important-color: red;
    --main-body-color: #f0eee7;
    --main-body-secondary-color: rgb(214 203 173 / 31%);
    --main-white-color: white;
    --main-black-color: black; 

    --main-brb-red: #770717;
    --main-brb-white: white;
    --main-brb-gray: #ced4da;

    --main-principal-button-color: #b84c01;
    --main-secondary-button-color: #fac362;

    --bs-font-sans-serif: "Roboto Condensed", sans-serif;
    --bs-font-serif: "Lora", serif;
}

body{
    font-family: var(--bs-font-sans-serif);
    font-size: .9 rem !important;
    background-color: var(--main-body-color) !important;
}

h1, h2, h3, h4, h5, h6{
    color: var(--main-principal-color) !important;
    font-family: var(--bs-font-serif);
}

.ml-1 {
    margin-left:  .25rem !important;
}

.brown_label{
    color: var(--main-principal-color) !important;
}


.bg-body-secondary{
    background-color: var(--main-body-secondary-color);
}

.card-bd:hover .card-img-overlay, .card-bd:focus .card-img-overlay {
    background-color: rgba(47, 21, 4, 0.85) !important;
}
.card-bd h5{
    color: var(--main-white-color);
}
.card-bd .card-img-overlay{
    background-color: rgba(47, 21, 4, 0.45) !important;
}

/* Agenda */
.modal_reserva_fechas{
    background: #f1f1f1;
    margin-top: 2%;
    padding-bottom: 2%;
}

/* Estilo para los números de los días en el calendario */
.fc-daygrid-day-number {
    color: var(--main-principal-color);
    font-weight: bold;
}

/* Estilo para los botones primarios */
.fc .fc-button-primary {
    background-color: var(--main-white-color);
    border-color: var(--main-principal-color);
    color: var(--main-principal-color);
}

/* Estilo para los botones primarios activos y no deshabilitados */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--main-white-color);
    border-color: var(--main-principal-color);
    color: var(--main-principal-color);
}

/* Hover para los botones primarios */
.fc .fc-button-primary:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.fc .fc-button-primary:not(:disabled):active:hover {
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);
    color: var(--main-white-color);
} 

/* Fin agenda */


/* Instagram */
.instagram-media{
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.nav-tab-intermedia button{
    background: linear-gradient(var(--main-body-color),95%, #d4cfcf) !important;
    color: var(--main-black-color) !important;
}
.nav-tab-intermedia button.active{
    background: var(--main-white-color) !important;
    color: var(--main-black-color) !important;
}
.nav-tab-content-intermedia .tab-pane{
    min-height: 150px;
}

.text-principal{
    color: var(--main-principal-color);
}

.lista_errores {
    color: inherit;
    text-decoration: none;
}



/* 
SECCIÓN: MARCOS PRINCIPALES, RECTÁNGULOS Y ALINEACIÓN 
*/
/* 
TIPO: CLASE QUE CREA LOS 4 RECTÁNGULOS PEQUEÑOS QUE CONTIENEN LOS INPUTS Y BOTONES PRINCIPALES DEL SITIO
PROYECTO: EVALUACIONES  
*/
.rectangulo{
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-inline: 1px solid;
    padding: 20px;
    min-height: 190px;
    min-width: 300px;
}

/*
TIPO: CLASE QUE MANTIENE LOS TÍTULOS DE LAS 4 SECCIONES PRINCIPALES DEL SITIO ALINEADOS CON LOS 4 RECTÁNGULOS PEQUEÑOS
PROYECTO: EVALUACIONES
*/
.titulo-centrado{
    background-color: var(--main-body-color);
    padding-left: 5px;
    padding-right: 15px;
    transform: translate(5%,-40%)!important;
    color: var(--main-black-color) !important;
    max-width: 275px;
}

/* 
TIPO: CLASE QUE SEPARA Y ALINEA LOS 4 RECTÁNGULOS QUE CONTIENEN LOS ELEMENTOS PRINCIPALES DEL SITIO
PROYECTO: EVALUACIONES
*/
.separacion{
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

/* 
TIPO: CLASE QUE PONE PADDING Y ACOMODA LOS TÍTULOS A PARTIR DE 768 PIXELES
PROYECTO: EVALUACIONES
*/
@media (min-width: 768px){
    .sep-media{
         padding-top: 30px;
         padding-inline: 40px;
    }  

    .titulo-centrado{
        background-color: var(--main-body-color);
        padding-left: 5px;
        padding-right: 15px;
        transform: translate(5%,-40%)!important;
        color: var(--main-black-color) !important;
        max-width: fit-content;
    }
}

/* 
TIPO: CLASE QUE PONE PADDING Y ACOMODA LOS TÍTULOS A PARTIR DE 1400 PIXELES
PROYECTO: EVALUACIONES
*/
@media (min-width: 1400px){
    .sep-media{
        padding-top: 70px;
        padding-inline: 60px;
    }

    .titulo-centrado{
        background-color: var(--main-body-color);
        padding-left: 5px;
        padding-right: 15px;
        transform: translate(5%,-40%)!important;
        color: var(--main-black-color) !important;
        max-width: fit-content;
    }
}



/* 
SECCIÓN: BOTONES Y "CALIFIQUE NUESTRO SERVICIO" 
*/
/*
TIPO: CLASE QUE MANTIENE LOS GRUPOS DE BOTONES CENTRADOS EN LOS RECTÁNGULOS PEQUEÑOS
PROYECTO: EVALUACIONES
*/
.boton-centrado{
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-top: 15px;
}

/*
TIPO: CLASE QUE HACE LOS BOTONES VERDE ITAM
PROYECTO: EVALUACIONES
*/
.btn-verde{
    color: var(--main-principal-color);
    border-color: var(--main-principal-color);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

/*
TIPO: CLASE QUE MANTIENE EL HOVER DE LOS BOTONES FUNCIONANDO
PROYECTO: EVALUACIONES
*/
.btn-verde:hover{
    color: var(--main-white-color);
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);
}

/*
TIPO: CLASE QUE MANTIENE LOS BOTONES DEL MISMO COLOR AÚN CUANDO SON SELECCIONADOS
PROYECTO: EVALUACIONES
*/
.btn-check:checked+.btn-verde{
    color: var(--main-white-color);
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);
}

/*
TIPO: CLASE QUE AÑADE UN MARGEN AL BOTÓN DE ENVIAR
PROYECTO: EVALUACIONES
*/
.btn-separacion{
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
    margin-bottom: 25px;
}

/*
TIPO: CLASE QUE SIRVE PARA LA FUNCIÓN "ADD CLASS" DE JAVASCRIPT QUE MANTIENE ACTIVOS LOS BOTONES DE LAS ESTRELLAS 
PROYECTO: EVALUACIONES
*/
.activa-estrella{
    color: var(--main-white-color) !important;
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);  
} 

/* 
SECCIÓN: TIPO DE USUARIO 
*/
/* 
TIPO: CLASE QUE HACE LOS INPUTS TENGAN EL BORDE INFERIOR COLOR VERDE
PROYECTO: EVALUACIONES
*/
.subrayado-verde{
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-radius: 0px !important;
    border-bottom: solid !important;
    border-bottom-color: var(--main-principal-color) !important;
    padding-block: 5px !important;
    padding-left: 5px !important;
}

/* 
TIPO: CLASE QUE HACE LOS INPUTS TENGAN EL BORDE INFERIOR COLOR ROJO CUANDO HAY UN ERROR
PROYECTO: EVALUACIONES
*/
.subrayado-rojo{
    border-top: 0px !important;
    border-right: 0px!important;
    border-left: 0px !important;
    border-radius: 0px !important;
    border-bottom: solid !important;
    border-bottom-color: var(--main-important-color) !important;
    padding-block: 5px !important;
    padding-left: 5px !important;
}

/* 
TIPO: CLASE QUE HACE LOS INPUTS TENGAN UNA SEPARACIÓN ENTRE ELLOS
PROYECTO: EVALUACIONES
*/
.margen-inputs{
    margin-inline: 5px;
}

/*
TIPO: CLASE QUE HACE ELIMINA EL BORDE DE LOS INPUTS
PROYECTO: EVALUACIONES 
*/
.sin-borde{
    border: 0px;
}

/*
TIPO: CLASE QUE MANTIENE LAS NAV PILLS CENTRADAS EN LOS RECTÁNGULOS PEQUEÑOS
PROYECTO: EVALUACIONES
*/
.nav-centrado{
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-color: var(--main-principal-color);
    --bs-nav-link-hover-color: var(--main-principal-color) !important;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-top: 15px;
}

/*
TIPO: CLASE QUE MANTIENE LAS NAV PILLS DE COLOR VERDE CUANDO EL MOUSE SE COLOCA SOBRE ELLAS 
PROYECTO: EVALUACIONES
*/
.nav-verde:hover{
    color: var(--main-white-color);
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);
}

/*
TIPO: CLASE QUE MANTIENE LOS LABELS DE LAS NAV PILLS DE COLOR VERDE Y CUANDO SE COLOCA EL MOUSE 
SOBRE ELLAS LOS LABELS SE CAMBIAN A COLOR BLANCO
PROYECTO: EVALUACIONES
*/
.nav-verde{
    color: var(--main-principal-color);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

/*
TIPO: CLASE QUE MANTIENE LAS NAV PILLS DE COLOR VERDE CUANDO ESTÁN ACTIVAS 
PROYECTO: EVALUACIONES
*/
.navs-tipo-de-usuario .nav-verde.active{
    color: var(--main-white-color);
    background-color: var(--main-principal-color);
}

/*
TIPO: CLASE QUE HACE EL BORDE DE LAS NAV PILLS IGUAL QUE EL BORDE DE LOS BOTONES 
PROYECTO: EVALUACIONES
*/
.nav-borde-redondo{
    border: 1px solid var(--main-principal-color);
    border-radius: 5px;
}

/* 
SECCIÓN: MODAL DE INICIO
*/
/*
TIPO: CLASE QUE HACE QUE EL FONDO DEL MODAL SEA GRIS TRANSLÚCIDO
PROYECTO: EVALUACIONES
*/
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
 }

/*
TIPO: CLASE QUE HACE QUE EL TAMAÑO DE A LETRA SEA RESPONSIVO
PROYECTO: EVALUACIONES
*/
/* @media (min-width: 490px){
    h3, .h3 {
    font-size: calc(1.9rem + .0vw);
    }

    h4, .h4 {
        font-size: 1.6rem;
    }
} */

/*
TIPO: CLASE QUE HACE QUE EL TAMAÑO DE A LETRA SEA RESPONSIVO
PROYECTO: EVALUACIONES
*/
/* @media (min-width: 1200px){
    h3, .h3 {
     font-size: 2.70rem;
     }
 } */

/*
TIPO: CLASE QUE HACE QUE EL TÍTULO DEL MODAL SEA VERDE
PROYECTO: EVALUACIONES
*/
h3{
     color: var(--main-principal-color);
}

/*
TIPO: CLASE QUE HACE QUE EL TEXTO DEL MODAL SEA NEGRO
PROYECTO: EVALUACIONES
*/ 
.fuente{
     color: var(--main-black-color);
}

/*
TIPO: CLASE QUE HACE QUE QUITA EL MARCO BLANCO DEL MODAL BODY
PROYECTO: EVALUACIONES
*/ 
/* .modal-body {
     position: relative;
     flex: 1 1 auto;
     padding: 0%;
} */

/*
TIPO: CLASE QUE AÑADE UNA SEPARACIÓN ENTRE LOS ELEMENTOS DEL MODAL
PROYECTO: EVALUACIONES
*/
.separacion-modal {
     padding: 0px;
     padding-left: 15px;
     padding-right: 15px;
}
 


/* 
Cambios Ernesto de main_sitio.css a main.css
*********************************************
*********************************************
*********************************************
*********************************************
*********************************************
*********************************************
*/

/*
Tipo: Clase que no decora el texto en barra de navegación
Proyecto: Sitio Bases de Datos
*/
.navbar a{
    text-decoration: none;
    border: 2px solid white;
}

/*
Tipo: Clase que subraya el texto debajo del puntero en barra de navegación
Proyecto: Sitio Bases de Datos
*/
.navbar a:hover, .navbar a:focus{
    /* text-decoration: underline; */
    border-bottom: 2px solid #b84c0b;
}
.navbar-middle a:hover, .navbar-middle a:focus{
    /* text-decoration: underline; */
    border-bottom: 2px solid #b84c0b;
    border-top: 2px solid #b84c0b;
}

/*
Tipo: Clase que asigna color de fondo al body-page 
Proyecto: Sitio Bases de Datos
*/
body {
    background-color: var(--main-body-color);
}
/*
Tipo: Clase que asigna color de fondo verde itam en barra superior
Proyecto: Sitio Bases de Datos
*/
.bg-itam{
    background-color: var(--main-principal-color)!important;
}
/*
Tipo: Clase que asigna color de fondo blanco distinto en barra de navegación
Proyecto: Sitio Bases de Datos
*/
.bg-light{
    background-color: var(--main-white-color) !important;
}
/*
Tipo: Clase que asigna color al texto de barra superior
Proyecto: Sitio Bases de Datos
*/
.navbar-dark *{
    color: var(--main-white-color) !important;
}
/*
Tipo: Clase que asigna color al texto de barra de navegación
Proyecto: Sitio Bases de Datos
*/
.navbar-light *{
    color: var(--main-black-color) !important;
}
/*
Tipo: Clase que subraya el texto debajo del puntero en barra de navegación
Proyecto: Sitio Bases de Datos
*/
.navbar-dark a:focus, .navbar-dark a:hover{
    color: var(--main-white-color)!important;
    text-decoration: underline;
}
/*
Tipo: Clase que modifica tamaño de icono en tarjetas
Proyecto: Sitio Bases de Datos
*/
.icono-central{
    font-size: 2em;
}
/*
Tipo: Función que amplia y modifica las tarjetas laterales
Proyecto: Sitio Bases de Datos
*/
@media (min-width: 1024px){
    /* .home-principal {
        background-attachment: fixed !important;
    } */
    /* .card{
        min-width: 250px;
    } */
}
/*
Tipo: Clase que muestra imagen detrás de sección "Bases de datos"
Proyecto: Sitio Bases de Datos
*/
.home-principal {
    width: 100%; 
    height: 300px;
    background-size: cover !important;
    background-position: center center !important;
    vertical-align: top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    position: relative;
}
/*
Tipo: Clase que oscurece imagen detrás de sección "Bases de datos"
Proyecto: Sitio Bases de Datos
*/
.home-principal:before {
    content: "";
    background: rgb(47 21 4 / 70%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
/*
Tipo: Clase que da color y forma al texto "Bases de datos"
Proyecto: Sitio Bases de Datos
*/
.home-principal h1 {
    /* margin: 0 0 10px 0;
    line-height: 56px; */
    color: var(--main-white-color);
    /* font-size: 48px;
    font-weight: 700; */
    position: relative;
}
/*
Tipo: Clase que controla efectos de trancisiones
Proyecto: Sitio Bases de Datos
*/
@media (max-width: 992px){
    /* Trancisiones */
    .collapse:not(.show) {
        display: none !important;
    }
    .card-middle {
        top: -20%;
        position: relative;
    }
}
/*
Tipo: Clase que modifica fuentes de barra superior
Proyecto: Sitio Bases de Datos
*/
.small-caps{
    font-variant: small-caps;
}
/*
Tipo: Clase que modifica entorno de preguntas frecuentes
Proyecto: Sitio Bases de Datos
*/
.btn-itam{
    color: var(--main-white-color);
    background: var(--main-principal-color);
}
/*
Tipo: Clase que ilumina o sombrea entorno de preguntas frecuentes
Proyecto: Sitio Bases de Datos
*/
.btn-itam:hover, .btn-itam:focus{
    color: var(--main-white-color);
    background: var(--main-secondary-color);
}
/*
Tipo: Clase que modifica entorno de cancelar en términos y condiciones 
Proyecto: Sitio Bases de Datos
*/
.btn-light{
    border: 1px solid #ced4da;
    background: var(--main-white-color);
}
/*
Tipo: Clase que ilumina o sombrea preguntas de tarjetas laterales
Proyecto: Sitio Bases de Datos
*/
.btn-light:hover, .btn-light:focus, .btn-light:active{
    color: var(--main-white-color);
    background-color: var(--main-principal-button-color) !important;
}
/*
Tipo: Clase que cambia el color en ventana emergente de preguntas frecuentes
Proyecto: Sitio Bases de Datos
*/
.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #e2d0bc54;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0%);
}
/*
Tipo: Clase que especifica peso de la fuente en ventana emergente de preguntas frecuentes
Proyecto: Sitio Bases de Datos
*/
.accordion-button{
    font-weight: 500;
}
/*
Tipo: Clase que espacia las preguntas en ventana emergente de preguntas frecuentes
Proyecto: Sitio Bases de Datos
*/
.accordion-item {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125) !important;
    margin: 15px;
}
/*
Tipo: Clase que modifica color
Proyecto: Sitio Bases de Datos
*/
a{
    color: var(--main-principal-color);
}
/*
Tipo: Clase que modifica color con puntero encima
Proyecto: Sitio Bases de Datos
*/
a:hover, a:focus{
    color: var(--main-principal-color);
    text-decoration: none;
}
/*
Tipo: Clase que deriva de clase a que modifica color
Proyecto: Sitio Bases de Datos
*/
a.page-link{
    color: var(--main-principal-color);
}
/*
Tipo: Clase que deriva de clase a que modifica color con puntero encima
Proyecto: Sitio Bases de Datos
*/
a.page-link:hover, a.page-link:focus{
    color: white;
    background: var(--main-secondary-color);
}
/*
Tipo: Clase que indica en el cursor símbolo de acceso denegado en abecedario
Proyecto: Sitio Bases de Datos
*/
li.disabled{
    cursor: not-allowed;
}
/*
Tipo: Clase que indica en el cursor símbolo de mano en abecedario
Proyecto: Sitio Bases de Datos
*/
li.page-item{
    cursor: pointer;
}
/*
Tipo: Clase que indica ... 
Proyecto: Sitio Bases de Datos
*/
li.disabled > a{
    background-color: #f8f9fa !important;
}
/*
Tipo: Clase que justifica texto en api catálogo 
Proyecto: Sitio Bases de Datos
*/
.text-justify{
    text-align: justify;
}
/*
Tipo: Clase que asigna color verde itam en api catálogo 
Proyecto: Sitio Bases de Datos
*/
h2{
    color: var(--main-principal-color);
}
/*
Tipo: Clase que modifica enlace tipo botón guía de uso  en api catálogo 
Proyecto: Sitio Bases de Datos
*/
.pill-guia{
    z-index: 2;
    text-decoration: none;
}
/*
Tipo: Clase que subraya enlace tipo botón guía de uso  en api catálogo
Proyecto: Sitio Bases de Datos
*/
.pill-guia:hover, .pill-guia:focus{
    color: white;
    background: var(--main-secondary-color);
    text-decoration: underline;
}
/*
Tipo: Clase que hace borde en aviso!
Proyecto: Sitio Bases de Datos
*/
.alert-itam{
    color: #000000;
    background-color: #ffffff;
    border-color: var(--main-principal-color);
}
/*
Tipo: Clase que modifica visualización del vìnculo en api catálogo
Proyecto: Sitio Bases de Datos
*/
.vinculo_completo{
    color: inherit;
    text-decoration: none;
}
/*
Tipo: Clase que subraya vínculo al poner puntero en api catálogo
Proyecto: Sitio Bases de Datos
*/
.vinculo_completo:hover, .vinculo_completo:focus{
    text-decoration: underline;
}
/*
Tipo: Clase que cambia color del vìnculo en api catálogo
Proyecto: Sitio Bases de Datos
*/
.vinculo_completo h3{
    color: var(--main-principal-color);
}
/*
Tipo: Clase que cambia color en tarjeta filtros
Proyecto: Sitio Bases de Datos
*/
.form-check-input:checked {
    background-color: var(--main-principal-color);
    border-color: var(--main-principal-color);
}
/*
Tipo: Clase que da color al borde de aviso de privacidad
Proyecto: Sitio Bases de Datos
*/
.border-itam{
    border-color: var(--main-principal-color) !important;
}
/*
Tipo: Clase que modifica posición de tarjetas
Proyecto: Sitio nuevas_adquisiciones
*/
.card-middle{
    top: -40%;
    position: relative;
}
/*
Tipo: Clase que modifica tamaño de la cubierta del libro
Proyecto: Sitio nuevas_adquisiciones
*/
.cubierta{
    width: 50%;
    height: 13.5em;
}
/*
Tipo: Clase que pone cuadro en titulo 
Proyecto: Sitio de interes
*/
  .square{
    border-style: none;
    border-width: 1px;
    font-size: 1.65rem;
    background-color: rgb(255, 255, 255);
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 3%;
  }

  /*
TIPO: CLASE QUE HACE LOS BOTONES VERDE ITAM
PROYECTO: Sitio de interes 
*/
.btn-verde2{
    color: var(--main-principal-color);
    border-color: var(--main-principal-color);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

/*
TIPO: CLASE QUE MANTIENE EL HOVER DE LOS BOTONES FUNCIONANDO
PROYECTO: Sitio de interes
*/
.btn-verde2:hover{
    color: var(--main-white-color);
    background-color: var(--main-secondary-color);
    border-color: var(--main-secondary-color);
}


/*
    ADMIN CSS
*/

/* Login */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
.main-login{
    width: 100%;
    height: 100vh;
    background: url(./img/fondos/pantalla/biblioteca.png) top center;
    background-size: cover;
    position: relative;
    align-items: center;
    padding-top: 55px;
    padding-bottom: 40px;
}
.main-login:before {
    content: "";
    background: rgb(0 0 0 / 72%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
.form-signin-login {
    width: 100%;
    max-width: 430px;
    margin: auto;
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */

/* Encabezados */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
.encabezado_general{
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 2rem;
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */

/* Alertas de errores */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
.alert-danger {
    --bs-alert-color: var(--main-brb-red);
    --bs-alert-bg: var(--main-white-color);
    --bs-alert-border-color: var(--main-brb-red);
    border-radius: 0px;
}
.listado_errores a{
    color: var(--main-black-color);
}
.listado_errores a:hover, .listado_errores a:focus{
    color: var(--main-brb-red);
    text-decoration: none;
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */

/* Modulos (Listado) */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
.module-card{
    max-width: 540px;
    font-size: .9em;
}
.module-card a{
    text-decoration: none;
    color: var(--main-black-color);
}
.module-card a:hover, a:focus{
    color: var(--main-black-color);
}
.module-card a:hover .card-title, a:focus .card-title{
    text-decoration: underline;
}
.module-card .icono i{
    font-size: 4.5em !important;
    color: var(--main-secondary-color);
}
.module-card .card-title{
    color: var(--main-principal-color);
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */

/* Acordeón */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
.accordion-button{
    font-weight: 500;
    font-size: .4em !important;
}
.btn-acordion {
    color: var(--main-principal-color) !important;
}
.accordion-parameters .label-general{
    color: var(--main-principal-color);
    font-size: .875em;
}
.accordion-parameters .input-alto {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
.accordion-parameters .form-floating>.form-select {
    min-height: 64px !important;
    padding-left: 5px;
}
.accordion-parameters .form-floating label{
    padding-left: 5px;
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */

/* Progress bars */
/* ------------------------------------------------------------- */
.progress-bar{
    background-color: var(--main-principal-color) !important;
}
/* ------------------------------------------------------------- */

/* Tablas */
/* ------------------------------------------------------------- */
.table-reportes>thead>tr>th{
    background: var(--main-principal-color);
    color: white;
    font-variant: all-petite-caps;
    text-align: center;
    border: 1px solid white;
}
.table-reportes>thead th.vacio_limite {
    border: 0px !Important;
    background-color: var(--main-background)!important;
}
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: inherit;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    border-spacing: 2px;
    border-color: grey;
    font-variant: normal;
}
/* ------------------------------------------------------------- */

/* Swal */
/* ------------------------------------------------------------- */
.swal2-modal{
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-radius: 0px !important;
}
.swal2-title{
    border-bottom: 1px solid var(--main-brb-gray) !important;
    color: var(--main-principal-color) !important;
    font-weight: 100 !important;
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    line-height: 30px !important;
    text-align: left !important;
    padding: 0px !important;
    padding-top: 10px !important;
    padding-bottom: 7px !important;
}
.swal2-html-container{
    font-size: 1.125em !important;
    font-weight: 300 !important;
    line-height: normal !important;
    word-wrap: break-word !important;
    text-align: left !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px !important;
}
.swal2-styled{
    background-color: var(--main-principal-color) !important;
    color: var(--main-brb-white) !important;
    width: 120px !important;
    border-radius: 0px !important;
}
/* ------------------------------------------------------------- */

/* Botones */
/* ------------------------------------------------------------- */
.btn-itam{
    color: white;
    background-color: var(--main-principal-button-color);
    border-color: var(--main-principal-button-color);
}
.btn-itam:hover, .btn-itam:focus {
    color: black;
    background-color: var(--main-secondary-button-color);
}
.btn-itam-inverso {
    color: var(--main-principal-color) !important;
    background-color: var(--main-brb-white) !important;
    border-color: var(--main-principal-color) !important;
    border-radius: 0px !important;
}
.btn-itam-inverso:hover, .btn-itam-inverso:focus {
    color: var(--main-brb-white) !important;
    background-color: var(--main-principal-color) !important;
    border-color: var(--main-principal-color) !important;
}
.btn-preguntas-frecuentes{
    color: white;
    padding: 10px 30px;
    font-weight: 600;
    background-color: var(--main-principal-button-color);
    border-color: var(--main-principal-button-color);
}
.btn-preguntas-frecuentes:hover, .btn-preguntas-frecuentes:focus {
    color: black;
    background-color: var(--main-secondary-button-color);
}
/* ------------------------------------------------------------- */

/* Inputs */
/* ------------------------------------------------------------- */
select, input{
    border: none !important;
    border-bottom: 1px solid var(--main-brb-gray) !important;
    border-radius: 0px !important;
}
/* ------------------------------------------------------------- */

/*Para el switch*/
.switch {
    display: inline-block;
    height: 18px;
    position: relative;
    width: 45px;
    margin-bottom: 0px;
}

.switch input {
    display:none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 11px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 11px;
}

input:checked + .slider {
    background-color: #6f4f46;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}