/* Definición de colores en la raíz */
:root {
    --color-principal-texto-fondonoblanco:#fff;
    /*--color-texto-oscuro-tenue:#808184;
    --color-texto-oscuro:#5e5d5d;*/
    --color-secundario-texto-oscuro:#c06306;
    --color-error-texto:#b40b27;


    --color-trasparencia-principal-fondo:rgba(0,0,0,0);
    --color-principal-fondo:#004c85;
    --color-principal-oscuro-fondo:#003c69;
    --color-muyclaro-fondo:#fff;
    --color-secundario-fondo:#ffc78e;
    --color-terciario-fondo:#00ae8d;
    --color-secundario-fondo-boton:#ff9933;
    --color-secundario-oscuro-fondo-boton:#fa8918;

    --color-principal-borde:#013761;
    --color-separador-borde-fondonoblanco:#fff;
    --color-sombra-oscura-borde-fondonoblanco:rgba(0, 0, 0, 0.2);
    --color-secundario-borde:#ff9933;
    --color-terciario-borde:#00ae8d;
    --color-oscuro-borde:#8a8a8a;


    /* Elementos */
    --color-fondo-principal:#fff;
    --color-blanco-t100: rgba(255, 255, 255, 0); 

    /* Textos */
    --color-texto-oscuro-fuerte:#1b1b1b;
    --color-texto-oscuro:#5e5d5d;
    --color-texto-oscuro-tenue:#808184;
    --color-texto-claro:#fff;

    /*Sombras*/
    --color-sombra-oscura:rgba(0, 0, 0, 0.8);
    --color-sombra:rgba(0, 0, 0, 0.5);
    --color-sombra-clara:rgba(0, 0, 0, 0.2);

    /* Colores a usar */
    --color-primario: #005cb8; /* Azul */
    --color-primario-t75: #005cb8BF; /* Azul opacidad 75%*/
    --color-primario-t50: #005cb880; /* Azul opacidad 50% */
    --color-primario-t25: #005cb840; /* Azul opacidad 25% */
    --color-primario-aclarar-75: color-mix(in srgb, #005cb8, #fff 25%); /* Azul aclara al 75% */
    --color-primario-aclarar-50: color-mix(in srgb, #005cb8, #fff 50%); /* Azul aclara al 50% */
    --color-primario-aclarar-25: color-mix(in srgb, #005cb8, #fff 75%); /* Azul aclara al 25% */
    --color-primario-oscurecer-75: color-mix(in srgb, #005cb8, #000 25%); /* Azul oscurece al 75% */
    --color-primario-oscurecer-50: color-mix(in srgb, #005cb8, #000 50%); /* Azul oscurece al 50% */
    --color-primario-oscurecer-25: color-mix(in srgb, #005cb8, #000 75%); /* Azul oscurece al 25% */

    --color-secundario: #ff7e2e; /* Naranja */
    --color-secundario-t75: #ff7e2eBF; /* Naranja al 75%*/
    --color-secundario-t50: #ff7e2e80; /* Naranja al 50% */
    --color-secundario-t25: #ff7e2e40; /* Naranja al 25% */
    --color-secundario-aclarar-75: color-mix(in srgb, #ff7e2e, #fff 25%); /* Naranja aclara al 75% */
    --color-secundario-aclarar-50: color-mix(in srgb, #ff7e2e, #fff 50%); /* Naranja aclara al 50% */
    --color-secundario-aclarar-25: color-mix(in srgb, #ff7e2e, #fff 75%); /* Naranja aclara al 25% */
    --color-secundario-oscurecer-75: color-mix(in srgb, #ff7e2e, #000 25%); /* Naranja oscurece al 75% */
    --color-secundario-oscurecer-50: color-mix(in srgb, #ff7e2e, #000 50%); /* Naranja oscurece al 50% */
    --color-secundario-oscurecer-25: color-mix(in srgb, #ff7e2e, #000 75%); /* Naranja oscurece al 25% */

    --color-terciario: #00ae8d; /* Verde */
    --color-terciario-t75: #00ae8dBF; /* Verde al 75%*/
    --color-terciario-t50: #00ae8d80; /* Verde al 50% */
    --color-terciario-t25: #00ae8d40; /* Verde al 25% */
    --color-terciario-aclarar-75: color-mix(in srgb, #00ae8d, #fff 25%); /* Verde aclara al 75% */
    --color-terciario-aclarar-50: color-mix(in srgb, #00ae8d, #fff 50%); /* Verde aclara al 50% */
    --color-terciario-aclarar-25: color-mix(in srgb, #00ae8d, #fff 75%); /* Verde aclara al 25% */
    --color-terciario-oscurecer-75: color-mix(in srgb, #00ae8d, #000 25%); /* Verde oscurece al 75% */
    --color-terciario-oscurecer-50: color-mix(in srgb, #00ae8d, #000 50%); /* Verde oscurece al 50% */
    --color-terciario-oscurecer-25: color-mix(in srgb, #00ae8d, #000 75%); /* Verde oscurece al 25% */

    --color-cuaternario: #f6b333; /* Amarillo */
    --color-cuaternario-t75: #f6b333BF; /* Amarillo al 75%*/
    --color-cuaternario-t50: #f6b33380; /* Amarillo al 50% */
    --color-cuaternario-t25: #f6b33340; /* Amarillo al 25% */
    --color-cuaternario-aclarar-75: color-mix(in srgb, #f6b333, #fff 25%); /* Amarillo aclara al 75% */
    --color-cuaternario-aclarar-50: color-mix(in srgb, #f6b333, #fff 50%); /* Amarillo aclara al 50% */
    --color-cuaternario-aclarar-25: color-mix(in srgb, #f6b333, #fff 75%); /* Amarillo aclara al 25% */
    --color-cuaternario-oscurecer-75: color-mix(in srgb, #f6b333, #000 25%); /* Amarillo oscurece al 75% */
    --color-cuaternario-oscurecer-50: color-mix(in srgb, #f6b333, #000 50%); /* Amarillo oscurece al 50% */
    --color-cuaternario-oscurecer-25: color-mix(in srgb, #f6b333, #000 75%); /* Amarillo oscurece al 25% */

    --color-info: #0dcaf0; /* Celeste */
    --color-info-t75: #0dcaf0BF; /* Celeste al 75%*/
    --color-info-t50: #0dcaf080; /* Celeste al 50% */
    --color-info-t25: #0dcaf040; /* Celeste al 25% */
    --color-info-aclarar-75: color-mix(in srgb, #0dcaf0, #fff 25%); /* Celeste aclara al 75% */
    --color-info-aclarar-50: color-mix(in srgb, #0dcaf0, #fff 50%); /* Celeste aclara al 50% */
    --color-info-aclarar-25: color-mix(in srgb, #0dcaf0, #fff 75%); /* Celeste aclara al 25% */
    --color-info-oscurecer-75: color-mix(in srgb, #0dcaf0, #000 25%); /* Celeste oscurece al 75% */
    --color-info-oscurecer-50: color-mix(in srgb, #0dcaf0, #000 50%); /* Celeste oscurece al 50% */
    --color-info-oscurecer-25: color-mix(in srgb, #0dcaf0, #000 75%); /* Celeste oscurece al 25% */

    --color-cuidado: #ffc78e; /* Crema Oscuro */
    --color-cuidado-t75: #ffc78eBF; /* Crema Oscuro al 75%*/
    --color-cuidado-t50: #ffc78e80; /* Crema Oscuro al 50% */
    --color-cuidado-t25: #ffc78e40; /* Crema Oscuro al 25% */
    --color-cuidado-aclarar-75: color-mix(in srgb, #ffc78e, #fff 25%); /* Crema Oscuro aclara al 75% */
    --color-cuidado-aclarar-50: color-mix(in srgb, #ffc78e, #fff 50%); /* Crema Oscuro aclara al 50% */
    --color-cuidado-aclarar-25: color-mix(in srgb, #ffc78e, #fff 75%); /* Crema Oscuro aclara al 25% */
    --color-cuidado-oscurecer-75: color-mix(in srgb, #ffc78e, #000 25%); /* Crema Oscuro oscurece al 75% */
    --color-cuidado-oscurecer-50: color-mix(in srgb, #ffc78e, #000 50%); /* Crema Oscuro oscurece al 50% */
    --color-cuidado-oscurecer-25: color-mix(in srgb, #ffc78e, #000 75%); /* Crema Oscuro oscurece al 25% */

    --color-ayuda: #6610f2; /* Indigo */
    --color-ayuda-t75: #6610f2BF; /* Indigo al 75%*/
    --color-ayuda-t50: #6610f280; /* Indigo al 50% */
    --color-ayuda-t25: #6610f240; /* Indigo al 25% */
    --color-ayuda-aclarar-75: color-mix(in srgb, #6610f2, #fff 25%); /* Indigo aclara al 75% */
    --color-ayuda-aclarar-50: color-mix(in srgb, #6610f2, #fff 50%); /* Indigo aclara al 50% */
    --color-ayuda-aclarar-25: color-mix(in srgb, #6610f2, #fff 75%); /* Indigo aclara al 25% */
    --color-ayuda-oscurecer-75: color-mix(in srgb, #6610f2, #000 25%); /* Indigo oscurece al 75% */
    --color-ayuda-oscurecer-50: color-mix(in srgb, #6610f2, #000 50%); /* Indigo oscurece al 50% */
    --color-ayuda-oscurecer-25: color-mix(in srgb, #6610f2, #000 75%); /* Indigo oscurece al 25% */

    --color-ok: #198754; /* Verde Oscuro */
    --color-ok-t75: #198754BF; /* Verde Oscuro al 75%*/
    --color-ok-t50: #19875480; /* Verde Oscuro al 50% */
    --color-ok-t25: #19875440; /* Verde Oscuro al 25% */
    --color-ok-aclarar-75: color-mix(in srgb, #198754, #fff 25%); /* Verde Oscuro aclara al 75% */
    --color-ok-aclarar-50: color-mix(in srgb, #198754, #fff 50%); /* Verde Oscuro aclara al 50% */
    --color-ok-aclarar-25: color-mix(in srgb, #198754, #fff 75%); /* Verde Oscuro aclara al 25% */
    --color-ok-oscurecer-75: color-mix(in srgb, #198754, #000 25%); /* Verde Oscuro oscurece al 75% */
    --color-ok-oscurecer-50: color-mix(in srgb, #198754, #000 50%); /* Verde Oscuro oscurece al 50% */
    --color-ok-oscurecer-25: color-mix(in srgb, #198754, #000 75%); /* Verde Oscuro oscurece al 25% */
    
    --color-error: #dc3545; /* Rojo Oscuro */
    --color-error-t75: #dc3545BF; /* Rojo Oscuro al 75%*/
    --color-error-t50: #dc354580; /* Rojo Oscuro al 50% */
    --color-error-t25: #dc354540; /* Rojo Oscuro al 25% */
    --color-error-aclarar-75: color-mix(in srgb, #dc3545, #fff 25%); /* Rojo Oscuro aclara al 75% */
    --color-error-aclarar-50: color-mix(in srgb, #dc3545, #fff 50%); /* Rojo Oscuro aclara al 50% */
    --color-error-aclarar-25: color-mix(in srgb, #dc3545, #fff 75%); /* Rojo Oscuro aclara al 25% */
    --color-error-oscurecer-75: color-mix(in srgb, #dc3545, #000 25%); /* Rojo Oscuro oscurece al 75% */
    --color-error-oscurecer-50: color-mix(in srgb, #dc3545, #000 50%); /* Rojo Oscuro oscurece al 50% */
    --color-error-oscurecer-25: color-mix(in srgb, #dc3545, #000 75%); /* Rojo Oscuro oscurece al 25% */
  }

/* Inicio style comun a todos los modulos */
body{
    font-size: 18px;
    background: var(--color-fondo-principal);
}

#loadingModal{
    display: block; 
    background-color: var(--color-primario-t75);
}

#loadingModal #modalRueda{
    color: var(--color-texto-claro);
}

#loadingModal #loadingModal-content {
    color: var(--color-texto-claro);
    border: none;
    background-color: var(--color-blanco-t100);
}

#loadingModal #loadingModal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.headercustom{
    background: var(--color-primario);
    border-bottom: 1px solid var(--color-primario);
    color: var(--color-texto-claro);
}

/*Falta cambiar color*/
#menuSubItem{
    background: #0283e6;
}

@media (max-width: 768px) { 
    .header-logo{
        width:80%;
    } 
}

@media (min-width: 992px) { 
    #botonlogout{
        right: 0 !important;
        padding-right: .25rem !important;
        position: absolute !important;
    } 
}

/*Falta cambiar color*/
@media (max-width: 991px) { 
    .navbar-nav a.nav-link{
        border-bottom: var(--bs-border-width) var(--bs-border-style)  !important;
        border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
    } 
}

.homecontenido{
    margin-top: 17vh;
    margin-bottom: 10px;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
}

.imgservicios{
    max-width: 50%;
}
.card-home-desabilitar{
    background-color :#5e3c3c21;
}

.card-title-home{
    color: var(--color-texto-oscuro-tenue);
}

.card-text-home{
    font-size: 14px;
    color: var(--color-texto-oscuro-tenue);
}

.footer{
    bottom: 0;
    width: 100%;
    background: var(--color-primario);
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--color-primario);
    color: var(--color-texto-claro);
}

.footer p{
    margin: 0;;
}

.infocontacto{
    border-left: 2px solid var(--color-texto-claro);
}

@media (max-width: 767px) { 
    .infocontacto{
        border-left: 0px ;
        padding-top:20px;
    } 
}

.telutilespie{
    border-left: 2px solid var(--color-texto-claro);
}

@media (max-width: 767px) { 
    .telutilespie{
        border-left: 0px;
        padding-top:20px;
    } 
}

.footer img {
    max-width: 100%;
    height: auto;
    width: auto/9;
} 

.footercierre{
    background: var(--color-primario-oscurecer-75);
}
/* Fin style comun a todos los modulos */

/* Inicio Pagina En construccion */
.contenidoEnconstruccion{
    display: flex;
    justify-content: center;
    align-items: center;
}

.construction-card {
    background-color: var(--color-secundario-25);
    border-radius: 15px;
    box-shadow: 0 8px 20px var(--color-sombra-clara);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    color:var(--color-texto-oscuro);
}

.construction-icon {
    font-size: 5rem;
    color: var(--color-primario);
}
/* Fin Pagina En construccion */

/* Inicio style Tasas Vigentes y Tasas Adeudadas*/
.titulo-der{
    color: var(--color-texto-oscuro-tenue);
}

.titulo-izq{
    color: var(--color-texto-oscuro-tenue);
}

.titulo-der-color{
    color: var(--color-texto-oscuro-tenue);
}

.titulo-izq-color{
    color: var(--color-texto-oscuro-tenue);
}

.titular{
    padding-top: 10px;
    margin-bottom: 8px;
}

.formulario-tasas{
    color: var(--color-texto-oscuro);
    border-style: solid ;
    border-width: 1px;;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}

.color-texto-select{
    color: var(--color-texto-oscuro);
}

.color-texto-formulario{
    color: var(--color-texto-oscuro)!important;
}

.g-recaptcha > div > div{
    text-align: center;
    width: auto !important;
    height: auto !important;
}

.g-recaptcha {
    justify-content: center;
    text-align: center;
    transform:scale(0.77);
}

@media only screen and (max-width: 1200px) {
    .g-recaptcha {
        justify-content: center;
        text-align: center;
        transform:scale(0.77);
    }
}

span.error-tasa-formulario{
    color: var(--color-error-oscurecer-75);
    font-size: 0.7em; 
    font-style:italic;
}

span.error-formulario{
    color: var(--color-error-oscurecer-75);
    font-size: 0.7em; 
    font-style:italic;
}

.btn-color-secundario{
    background: var(--color-secundario-aclarar-75);
    color: var(--color-texto-claro);
}

.btn-color-secundario:hover, .btn-color-secundario:focus{
    background: var(--color-secundario);
    color: var(--color-texto-claro);
}

.btn-color-terciario{
    background: var(--color-terciario-aclarar-75);
    color: var(--color-texto-claro);
}

.btn-color-terciario:hover, .btn-color-terciario:focus{
    background: var(--color-terciario);
    color: var(--color-texto-claro);
}

.titulo-modalinformar{
    color: var(--color-texto-oscuro-tenue);
}

.alert-exito-modalinformar {
    color: var(--color-terciario-oscurecer-50);
    background: var(--color-terciario-aclarar-25);
    border-color: var(--color-terciario-aclarar-75);
}

.alert-aviso-modalinformar {
    color: var(--color-cuaternario);
    background: var(--color-cuaternario-aclarar-25);
    border-color: var(--color-cuaternario-aclarar-75);
}

.alert-error-modalinformar {
    color: var(--color-error-aclarar-75);
    background: var(--color-error-aclarar-25);
    border-color: var(--color-aclarar-75);
}

    /* Inicio estilo para impresion directa de web */
    @media print {
        #logoEncabezadoWeb{
            content: url("../img/logoicon/logo-impresion.png"); 
            width: 150px;
        }

        td:last-child,
        th:last-child {
            display: none;
        }

        h5 {
            display: none;
        }

        .titulo-izq-color{
            font-size: 23px;
        }
        
    }
    /* Fin estilo para impresion directa de web */
/* Fin style Tasas Vigentes */



















/* Inicio style para todo Login */
.login-logo{    
    width: 100%;
    max-width: 112px;
}

.card-bg-azul{
    background: #3366cc;
    color: #fff;
}

.button-naranja{
    background: #ff9933;
    color: #fff;
}

.button-naranja:hover{
    background: #f87e05;
    color: #fff;
}

.button-naranja:focus{
    background: #f87e05;
    color: #fff;
}

.button-verde{
    background: #00AE8D;
    color: #fff;
}

.button-verde:hover{
    background: #00AE8D;
    color: #fff;
}

.button-verde:focus{
    background: #00AE8D;
    color: #fff;
}

span.error-login-formulario{
    color: #b40b27; 
    font-size: 0.7em; 
    font-style:italic;
}

.texto-alternativas{
    color: var(--color-texto-oscuro-tenue) ;
}

/* Corrige z-index para que la validación aparezca sobre el modal */
span.error-login-formulario{
    color: var(--color-texto-oscuro-tenue);
    font-size: 0.7em; 
    font-style:italic;
    position: relative;
    z-index: 1100; 
}
/* Fin style para todo Login  */

/* Estilo para el menú activo */
.menu-activo {
    background-color: var(--color-secundario) !important;
    color: var(--color-texto-claro) !important;
    border-radius: 5px;
}

/* -------------------- */
/* Ajustes de impresión */
/* -------------------- */
@media print {
    @page { size: landscape; margin: 10mm; }

    /* Ocultar navegación/menú del encabezado, dejando logo */
    header nav .navbar-toggler,
    header nav .navbar-collapse,
    header nav .navbar-nav,
    header nav .nav,
    header nav .dropdown,
    header nav .btn,
    header nav a:not(.navbar-brand) {
        display: none !important;
    }

    /* Ocultar todo el pie */
    footer {
        display: none !important;
    }

    /* Evitar sombras/colores fuertes en impresión */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}