/* Estilos para titulos y subtitulos  20-10-2024 */
.titulo-fondo-primary-centrado-16 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    font-weight: bold;
    /* border: 1px solid; */
    font-size: 1.6em;
    background-color: #02468e;
    color: white;
}

.titulo-fondo-primary-12 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    /* border: 1px solid; */
    font-size: 1.2em;
    background-color: #02468e;
    color: white;
    padding-left:5px;
    padding-bottom: 5px;
}


.titulo-fondo-gris-10 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.0em;
    background-color: #D33038;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}


.titulo-fondo-gris-13 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.3em;
    background-color: #D33038;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}

.titulo-fondo-azul-13 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.3em;
    background-color: #3232f3cd;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}


.titulo-fondo-gris1-10 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.0em;
    background-color: #c7c8c4;
    color: black;
    padding-left:5px;
    padding-bottom: 5px;
}


.titulo-fondo-verde-10 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.0em;
    background-color: #049aad;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}

.titulo-fondo-azul-10 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.0em;
    background-color: #02468e;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}


.titulo-fondo-verde-12 { 
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: left;
    text-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #049aad;
    color: white !important;
    padding-left:5px;
    padding-bottom: 5px;
}

.titulo-subrayado-16 {
    padding: 0;
    margin: 0;
    font-size: 1.6em;
    border-bottom: 1px solid;
}

/****************************************************************************/
/* Esto acerca los inputs cuando se muestra por computadora                 */
/* Cuando se muestre por dispositivos moviles deberias deshabilitar         */ 
/* esta configuracion                                                       */
/****************************************************************************/
.close-horizontal {
    /* padding-left: 2px;
    padding-right: 2px; */
    margin-left: 2px;
    margin-right: 2px;
    padding: 0;
}

.marco-externo {
    padding: 10px 10px;   
}

/* label.control-label:after {
    content: " *";
    color: red;
} */

.required > label.control-label::after {
    content: " *";
    color: red;
}

/* p.control-label:after {
    content: " *";
    color: red;
} */

.btn-find {
    margin-top: 30px;
}

#id-respuesta {
    display: flex;
    justify-content: center;   /* Centra en el eje x */
    align-items: center; /* Centra en el eje y */
}

/* Estilo para movil (telefono) */
@media ( max-width: 576px ) {
    .close-horizontal {
        margin: 2px 0px;
    }

    .btn-find {
        margin-top: 5px;
    }
}

.contenido-centrado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenido-derecha {
    display: flex;
    flex-direction: column;
    /* justify-content: right; */
    align-items: flex-end;
}


/* blanco */
.svg-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7473%) hue-rotate(359deg) brightness(102%) contrast(99%);
}

/* negro */
.svg-icon-black {
    filter: invertir(0.4) sepia(1) rotar tono(20 grados) saturar(1000%);
}


/* azul claro */
.svg-icon-blue {
    filter: invert(25%) sepia(85%) saturate(4309%) hue-rotate(223deg) brightness(91%) contrast(75%);
    /*rojo filter: invert(8%) sepia(100%) saturate(6520%) hue-rotate(1deg) brightness(82%) contrast(106%); */
}

/* rojo */
.svg-icon-red {
    filter: invert(8%) sepia(100%) saturate(6520%) hue-rotate(1deg) brightness(82%) contrast(106%);
}


.svg-icon-sm {
    width: 15px;
    height: 15px;
}


.svg-icon-md {
    width: 25px;
    height: 25px;
}


.svg-icon-lg {
    width: 35px;
    height: 35px;
}

.svg-icon-xl {
    width: 45px;
    height: 45px;
}

/* Estilo para el modulo de caja, donde se selecciona las porciones */
/* que se pagaran. Esta afecta a la section que muestra el monto en */
/* divisa y el monto en moneda nacional */
.container-resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;

    column-gap: 5px;
}

.resumen-pago {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}


.menu-fast {
    display: flex;
    justify-content: flex-end;
}


/* Estilo para el formulario de login */
.site-login {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.logo-company {
    max-width: 100px;   
}

.container-logo-company {
    display: flex;
    flex-direction: column;
    align-items:center;
}

.label-login {
    text-align: center;
}


.site-change-password {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 50px auto;
    /* border: 2px solid red; */
    
}

.container-autenticador {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin:30px auto;
    /* border: 2px solid green; */
}

main-no-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
}