/*$eco_lastModByCoder = '26.02.2026 12:43';*/

/* Oculta la barra de desplazamiento para Chrome, Safari y Opera */
::-webkit-scrollbar {
    display: none;
}

/* Oculta la barra de desplazamiento para IE, Edge y Firefox */
html, body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.row {
    width  : 100%;
    margin : 0;
}

a:hover {
    text-decoration : none;
}

input::-ms-clear {
    display: none;
}

select {
    appearance         : none;
	-webkit-appearance : none;
	-moz-appearance    : none;
}

html {
    overflow-x : hidden;
}

p {
    margin-bottom : 0;
}

.body-logo {
    background-color    : var(--colorFondoLogo);
    background-image    : url('../../logos/logo.png');
    background-position : 50px center;
    background-repeat   : no-repeat;
    background-size     : auto 100%;
    height              : 100px;
    box-shadow          : 0px 3px 6px var(--colorCajas);
}

.form-login {
    margin  : 5px;
    padding : 20px;
}

.textoMay {
    text-transform : uppercase;
}

@media (max-width: 767px) {
    .body-logo {
        position            : fixed;
        top                 : 0px;
        right               : 0px;
        z-index             : 3;
        background-position : 20px center;
    }
}

@media (max-width: 376px) {
    .dialogo-visualizar {
        width  : 370px;
        height : 550px;
    }
}

.modal-open {
    overflow : visible;
}

@media (min-width: 1400px) {
    .body-logo {
        height : 110px;
    }
}

.index-contenido {
    display   : flex;
    flex-wrap : wrap;
    width     : 100%;
    height    : calc(100vh - 100px);
}

.contenido-titulo,
.contenido-form {
    flex       : 1 1 50%;
    box-sizing : border-box;
}

.contenido-titulo {
    background-color : var(--colorFondoBanner1);
}

.contenido-form {
    background-image    : url('../../assets/images/fondo.png');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : 100% 0%;

    opacity: 1;
}

button:focus,
input:focus,
select:focus {
  outline : 2px solid var(--colorFondoBotones);
}

.titulo {
    color : var(--colorLetraTitulos);
}

.titulo {
    font           : normal normal bold clamp(28px, 2.9vw, 42px) / clamp(32px, 3vw, 44px) 'Montserrat', sans-serif;
    letter-spacing : -0.97px;
    opacity        : 1;
}

h3.titulo {
    font           : normal normal bold clamp(18px, 1.67vw, 24px)/clamp(22px, 2vw, 29px) 'Montserrat', sans-serif;
    margin         : 0px;
    letter-spacing : -0.55px;
    color          : var(--colorLetraTitulos);
}

h4.titulo {
    font           : normal normal bold clamp(14px, 1.25vw, 18px) / clamp(20px, 2vw, 29px) 'Montserrat', sans-serif;
    letter-spacing : -0.41px;
}

.subtitulo {
    color : var(--colorLetraTitulos2);
    font  : normal normal bold clamp(10px, 0.85vw, 12px) / clamp(12px, 1vw, 14px) 'Tahoma', sans-serif;
}

.borde-interno {
    margin        : 25px 30px;
    height        : calc(100vh - 150px);

    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}

.contenido-titulo .borde-interno {
    border        : 1px solid var(--colorCajas);
    border-radius : 10px;
    opacity       : 1;
}

.borde-interno .posicionTitulo {
    display         : flex;
    width           : 100%;
    justify-content : flex-end;
    padding-right   : 20%;
}

.borde-interno.form {
    margin : 25px 8.3%;
}

.borde-interno img{
    width     : 75%;
    max-width : 800px;
}

.caja-form {
    width     : 100%;
    padding   : 8px;
    max-width : 390px;

    background : color-mix(in srgb, var(--colorFondoBanner2) 40%, transparent);
    filter     : brightness(1.15);

    border-radius   : 30px;
    backdrop-filter : blur(10px);
    box-shadow      : 0 4px 30px rgba(0, 0, 0, 0.1);
}

.caja-form .contenido {
    padding       : 7.64%;
    background    : color-mix(in srgb, var(--colorFondoBanner2) 60%, transparent);
    filter        : brightness(1);
    border        : 1px solid var(--colorCajas);
    border-radius : 20px;
    opacity       : 1;
}


.input-text,
.input-select {
    background-color : var(--colorFondoBanner2);
    filter           : brightness(0.9);
    border           : 1px solid var(--colorCajas);
    border-radius    : 10px;
    font             : normal 12px/14px 'Tahoma', sans-serif;
    padding          : 8px 14px 8px 14px;
    color            : var(--colorLetraDatos);
}

.caja-texto {
    color : var(--colorLetraDatos);
}

.modal-texto {
    color : var(--colorLetraTitulos2);
        font: normal normal 12px/12px 'Montserrat', sans-serif;
}

.formulario {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
}

.caja-input {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.caja-boton {
    display         : flex;
    justify-content : center;
}

.button-form {
    background    : var(--colorFondoBotones);
    box-shadow    : 2px 2px 4px var(--sombraBotones);
    border-radius : 10px;
    opacity       : 1;

    color          : var(--colorLetraBotones);
    text-align     : center;
    font           : normal normal bold clamp(10px, 0.85vw, 12px) / clamp(12px, 1vw, 14px) 'Tahoma', sans-serif;
    letter-spacing : 0px;
    border         : var(--colorFondoBotones);

    padding: 13px 70px;
}

.caja-select {
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    gap             : 7px;
}

.input-select {
     flex : 1 1 auto;
}

select option {
    white-space : normal;
    word-wrap   : break-word;
    padding     : 8px 10px;
    line-height : 1.4;
    color       : var(--colorLetraDatos) !important;
}

select {
    width      : 100%;
    max-width  : 100%;
    box-sizing : border-box;
}

.caja-select .button-select {
    width               : 30px;
    background-color    : var(--colorFondoBotones);
    box-shadow          : 2px 2px 4px var(--sombraBotones);
    border              : none;
    cursor              : pointer;
    background-image    : url('../../assets/images/flecha.png');
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 16px;
    border-radius       : 10px;
}

.alertaVacio {
    font  : normal 12px/14px 'Tahoma', sans-serif;
    color : darkred;
}

.modal-dialog,
.modal-content,
.modal-borde-externo,
.modal-borde-interno,
.modal-body-certificado
{
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.modal-tabla.modal-dialog {
    max-width: none !important;
    margin: 15vh auto;
}

.modal-borde-interno {
    position : relative;
}

.modal-borde-interno .button-modal {
    position      : absolute;
    width         : 30px;
    height        : 30px;
    background    : var(--colorFondoBotones);
    box-shadow    : 0px 3px 6px var(--sombraBotones);
    border-radius : 10px;
    cursor        : pointer;
}

.notificacion .modal-borde-interno button {
    top   : 10px;
    right : 30px;
}

.tabla .modal-borde-interno button {
    display     : flex;
    top         : 20px;
    right       : 30px;
    align-items : center;
    box-shadow  : 2px 2px 4px var(--sombraBotones);
    color       : var(--colorLetraBotones);
    border      : var(--colorFondoBotones);
}

.modal-content {
    background    : var(--colorFondoBanner2);
    border-radius : 72px;
}

.notificacion.modal-content {
    height : 295px;
    width  : 495px;
}

.tabla.modal-content {
    width      : 73vw;
    max-height : 80%;
    max-width: 700px;
}

.modal-borde-externo {
    background      : var(--colorFondoLogo);
    border-radius   : 45px;
    opacity         : 1;
    backdrop-filter : blur(30px);
    filter          : brightness(1.15);
}

.notificacion .modal-borde-externo {
    width  : 414px;
    height : 213px;
}

.tabla .modal-borde-externo {
    width      : 93%;
    max-height : 100%;
    margin     : 40px;
}

.modal-borde-interno {
    border        : var(--colorFondoBanner1);
    background    : var(--colorFondoBanner2);
    border-radius : 20px;
    filter        : brightness(0.88);
}

.notificacion .modal-borde-interno {
    width  : 398px;
    height : 197px;
}

.tabla .modal-borde-interno {
    width           : 98%;
    max-height      : 96%;
    margin          : 10px;
    flex-direction  : column;
    align-items     : normal;
    justify-content : flex-start;
    padding         : 40px 30px 20px;
    border-radius   : 9%;
    background      : var(--colorFondoBanner2);
    border          : 1px solid var(--sombraBotones);;
}

.modal-body-certificado {
    width           : 334px;
    height          : auto;
    padding         : 10px;
    color           : var(--colorFondoBanner2);
    border          : var(--colorFondoBanner1);
    border-radius   : 10px;
    backdrop-filter : blur(15px);
}

.modal-notificacion {
    background-color : var(--colorFondoLogo);
    padding          : 6px 14px;
    font             : normal normal normal 12px/14px 'Tahoma', sans-serif;
    letter-spacing   : 0px;
    color            : var(--colorLetraTitulo2);
}

.modal-body-tabla {
    padding       : 10px;
    border-radius : 10px;
    background    : color-mix(in srgb, var(--colorFondoBanner2) 45%, white);
    border        : 1px solid color-mix(in srgb, var(--colorFondoBanner1) 40%, transparent);

    border-radius   : 10px;
    backdrop-filter : blur(15px);
    margin-top      : 35px;
}

.button-modal:hover,
.button-select:hover,
.button-form:hover,
.botonPdf:hover
 {
    background-color : var(--colorOverBotonPrincipal);
    border-color     : var(--colorFondoBanner1);
    filter           : brightness(0.88) ;
}

#contenido-modal {
    font  : normal normal normal 12px / 14px 'Tahoma', sans-serif;
    color : var(--colorLetraDatos);
}

.table.tablaPrincipal > tbody > tr:hover {
    background-color: var(--colorFondoBanner2) !important;
}

#listados td, #listados th {
    padding: 6px;
}

#listados {
    border-collapse : separate;
    border-spacing  : 0 6px;
    font            : normal normal normal 12px/14px 'Tahoma', sans-serif;
    color           : var(--sombraBotones);
    border          : none;
}

#listados th {
    font             : normal normal bold 12px/14px 'Tahoma', sans-serif;
    background-color : var(--sombraBotones);
    color            : var(--colorLetraTitulos);
    border           : none;
}

#listados tr {
    background-color : var(--colorFondoLogo);
}

#listados td {
    border-top : none;
     color     : var(--colorLetraDatos);
}

#listados_paginate .paginate_button.current {
    background-image : none !important;
    background       : var(--colorFondoBotones);
    color            : var(--colorLetraBotones) !important;
    border-color     : var(--colorLetraBotones) !important;
    box-shadow       : 0px 3px 6px var(--colorFondoBanner1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover  {
    background-image : none !important;
    box-shadow       : none !important;
    color            : var(--colorLetraDatos) !important;
    background-color : var(--colorOverBotonPrincipal) !important;
    border-color     : var(--colorFondoBanner1) !important;
}

.botonPdf {
    font             : normal normal bold 12px/14px 'Tahoma', sans-serif;
    background-color : var(--colorFondoBotones);
    color            : var(--colorLetraTitulos);
    border-radius    : 10px;
    padding          : 8px 15px;
    transition       : background-color 0.3s, color 0.3s, transform 0.2s;
}

#divMovil {
    display       : none;
    margin-top    : 20px;
    border        : 1px solid  color-mix(in srgb, var(--colorFondoBanner1) 60%, transparent);
    border-radius : 10px;
}

.filaMovil {
    font-size        : 14px;
    margin           : 10px;
    padding          : 5px;
    font-size        : 14px;
    background-color : var(--colorFondoLogo);
}

.filaMovil div {
    margin : 5px 0;
}

.filaMovil hr {
    border     : 0;
    border-top : 1px solid var(--colorFondoBanner1);
    margin     : 0;
}

.accionesMovil {
    display: flex;
    justify-content: center;
    margin-top : 10px;
}

@media screen and (min-width: 768px) {
    html, body {
        height     : 100%;
        overflow-y : hidden !important;
    }
}

@media (max-width: 768px) {
    #tableDesktop {
        display : none;
    }

    #divMovil {
        display : block;
    }

    .contenido-titulo,
    .contenido-form {
        flex : 1 1 100%;
    }

    .borde-interno {
        margin : 10px 15px;
        height : calc(100vh - 120px);
    }

    .borde-interno img{
        width : 100%;
    }

    .index-contenido {
        padding-top : 100px;
    }
}

@media (max-width: 556px) {
    .body-logo {
        height : 80px;
    }

    .index-contenido {
        padding-top : 80px;
        height      : calc(100vh - 80px);
    }

    .notificacion.modal-content {
        width         : 330px;
        height        : 235px;
        border-radius : 48px;
    }

    .tabla.modal-content {
        width      : 95vw;
        max-height : 80%;
    }

    .notificacion .modal-borde-externo {
        width  : 263px;
        height : 161px;
    }

    .notificacion .modal-borde-interno {
        width  : 250px;
        height : 147px;
    }

    .modal-body-certificado {
        width   : 234px;
        padding : 5px;
    }

    .modal-dialog {
        margin : 1.5rem;
    }

    .notificacion .modal-borde-interno button {
        top   : 8px;
        right : 8px;
    }
}

@media (max-width: 376px) {
    .body-logo {
        height : 70px;
    }

    .index-contenido {
        padding-top : 70px;
        height      : calc(100vh - 70px);
    }
}