/*
 * $eco_lastModByCoder = '07.01.2026 14:22';
 * FONTS
 */
/* raleway-300 - latin */
@font-face {
    font-family : 'Raleway-Light';
    font-style  : normal;
    font-weight : 300;
    src         : url('../fonts/raleway-v11-latin-300.eot');
    /* IE9 Compat Modes */
    src: local('Raleway Light'),
        local('Raleway-Light'),
        url('../fonts/raleway-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/raleway-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/raleway-v11-latin-300.woff') format('woff'), /* Modern Browsers */
        url('../fonts/raleway-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/raleway-v11-latin-300.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
    font-family : 'Raleway-Regular';
    font-style  : normal;
    font-weight : 400;
    src         : url('../fonts/raleway-v11-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Raleway'), local('Raleway-Regular'), url('../fonts/raleway-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/raleway-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/raleway-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/raleway-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/raleway-v11-latin-regular.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
    font-family : 'Raleway-Medium';
    font-style  : normal;
    font-weight : 500;
    src         : url('../fonts/raleway-v11-latin-500.eot');
    /* IE9 Compat Modes */
    src: local('Raleway Medium'), local('Raleway-Medium'), url('../fonts/raleway-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/raleway-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/raleway-v11-latin-500.woff') format('woff'), /* Modern Browsers */
        url('../fonts/raleway-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/raleway-v11-latin-500.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-600 - latin */
@font-face {
    font-family : 'Raleway-SemiBold';
    font-style  : normal;
    font-weight : 600;
    src         : url('../fonts/raleway-v11-latin-600.eot');
    /* IE9 Compat Modes */
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url('../fonts/raleway-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/raleway-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/raleway-v11-latin-600.woff') format('woff'), /* Modern Browsers */
        url('../fonts/raleway-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/raleway-v11-latin-600.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
    font-family : 'Raleway-Bold';
    font-style  : normal;
    font-weight : 700;
    src         : url('../fonts/raleway-v11-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Raleway Bold'), local('Raleway-Bold'), url('../fonts/raleway-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/raleway-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/raleway-v11-latin-700.woff') format('woff'), /* Modern Browsers */
        url('../fonts/raleway-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/raleway-v11-latin-700.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-800 - latin */
@font-face {
    font-family : 'Raleway-ExtraBold';
    font-style  : normal;
    font-weight : 800;
    src         : url('../fonts/raleway-v11-latin-800.eot');
    /* IE9 Compat Modes */
    src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url('../fonts/raleway-v11-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/raleway-v11-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/raleway-v11-latin-800.woff') format('woff'), /* Modern Browsers */
    url('../fonts/raleway-v11-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/raleway-v11-latin-800.svg#Raleway') format('svg');
    /* Legacy iOS */
}
/* raleway-900 - latin */
@font-face {
    font-family : 'Raleway-Black';
    font-style  : normal;
    font-weight : 900;
    src         : url('../fonts/raleway-v11-latin-900.eot');
    /* IE9 Compat Modes */
    src: local('Raleway Black'), local('Raleway-Black'), url('../fonts/raleway-v11-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/raleway-v11-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/raleway-v11-latin-900.woff') format('woff'), /* Modern Browsers */
    url('../fonts/raleway-v11-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/raleway-v11-latin-900.svg#Raleway') format('svg');
    /* Legacy iOS */
}

body, html {
    width            : 100%;
    height           : 100%;
    overflow-x       : hidden;
    padding          : 0;
}

.boton-abajo {
    margin-top  : 30px;
    margin-left : 220px;
    margin-bottom: 100px;
}

.label-azul {
    font-size   : 14px;
    text-align  : left;
    font-family : 'Raleway-Bold';
    color       : #006974;
}

.labelCaja {
    font-size   : 14px;
    text-align  : left;
    font-family : 'Raleway-Bold';
}

.labelCaja2 {
    font-size   : 14px;
    text-align  : left;
    font-family : 'Raleway-Light';
}

.label-azul2 {
    font-size   : 14px;
    text-align  : left;
    font-family : 'Raleway-Light';
    color       : #006974;
    cursor: pointer;
}

h1 {
    font-size   : 35px;
    text-align  : left;
    font-family : 'Raleway-Bold';
}

h4 {
    font-size      : 30px;
    text-align     : left;
    font-family    : 'Raleway-Light';
    color          : #006974;
    text-shadow    : 0 0 1px rgba(0, 0, 0, 0.1);
    margin-left    : 26.7%;  
    letter-spacing : 3px;
}

h5 {
    font-family    : 'Raleway-Light';
    text-shadow    : 0 0 1px rgba(0, 0, 0, 0.1);
}

.help-pass {
    font-size      : 12px;
    font-family    : 'Raleway-Bold';
    color          : #006974;    
}

/* I N D E X */
.encabezado {
    padding : 20px;
}

.encabezado-container {
    padding-top : 1px;
}

.encabezado-container .logos {
    overflow : hidden;
    width    : 150px;
    float    : left;
    height   : 180px;
}

.logos img {
    max-width: 100%;
}

.encabezado-container .logo-entidad {
    overflow : hidden;
    width    : 150px;
}

.logo-entidad img {
    max-width: 100%;
}

.encabezado-container .image-link {
    overflow : hidden;
    float    : left;
}

.image-link img {
    max-width: 100%;
}

.encabezado-container .app-link {
    float        : left;
    margin-left  : 5px;
    font-size    : 16px;
    text-align   : left;
    font-family  : 'Raleway-Regular';
    padding-top  : 16px;
    margin-right : 20px;
}

.logo-login {
    width  : 500px;
    height : 400px;
}

.container-logo-home {
    display         : flex;
    justify-content : center;
    width           : 100%;
    height          : 40%;    
}

.logo-home {
    height     : 100%;
    object-fit : contain;
}

.text-eco {
    width       : 100%;
    height      : 5%;  
}

.info-home {
    width            : 100%;
    height           : 45%;
    background-color : #FFF;
}

.body-error {
    margin-top: 20%;
}

.contenido-informativo {
    padding     : 5px 15% 10px 0px;
    text-align  : justify;
    font-size   : 16px;
    font-family : 'Raleway-Light';
    color       : #000000; 
    margin-top  : 0px;
}

.detalle-info {
    text-align  : justify;
    font-size   : 18px;
    font-family : 'Raleway-Light';
    color       : var(--colorLetraDatos);
    margin-top  : 0px;
    background  : transparent;
    border      : none;
    word-break  : keep-all; 
}


.info-contenido {
    margin-top  : 0px;
}

.deta-pag {
    font-size   : 16px;
    font-family : 'Raleway-Regular';
    color       : var(--colorLetraDatos);
}

/* E N D   I N D E X */


/* L O G I N */

/* E N D   L O G I N */


/* C U E N T A */
.logo-cuenta {
    position: relative;
    top: 100px;
    width  : 448px;
    height : 448px;
}
/* E ND    C U E N T A */

/*************************************************************************************************/
#main {
    /* width       : 100%; */
    height      : 100%;
}

#logo-nav {
    width  : 192px;
    height : 140px;
}
/** Cajas Numericas **/
.ttip {
    background    : color-mix(in srgb, var(--colorFondoBotones) 70%, white);;
    border        : 2px solid color-mix(in srgb, var(--colorFondoBotones) 70%, white);;
    color         : var(--colorLetraBotones);
    border-radius : 6px;
    padding       : 2px;
    position      : absolute;
    z-index       : 1;
    right         : 0;
    bottom        : 45px;
}
.ttip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--colorFondoBotones) 70%, white) transparent transparent transparent;
}

/** Cajas Numericas Grilla **/
.ttip-grid {
    background    : color-mix(in srgb, var(--colorFondoBotones) 70%, white);
    border        : 2px solid color-mix(in srgb, var(--colorFondoBotones) 70%, white);;
    color         : var(--colorLetraBotones);
    top           : -8px;
    border-radius : 6px;
    padding       : 2px;
    position      : relative;
    z-index       : 1;
}
.ttip-grid::after {
    content      : "";
    position     : absolute;
    top          : 105%;
    margin-left  : -20px;
    border-width : 8px;
    border-style : solid;
    border-color : color-mix(in srgb, var(--colorFondoBotones) 70%, white) transparent transparent transparent;
}

.declaracion {
    font: 14px 'Raleway-SemiBold';
    color: #000;
    background-color: white;

    padding-left: 10px;    
    border     : 0;
    width: 150px;
    height: 50px;
}

.selectFiltro {
    font: 14px 'Raleway-SemiBold';
    color: #000;
    background-color: white;

    padding-left: 10px;    
    border     : 0;
    width: 370px;
    height: 50px;
}

.selectFiltro.liquidar {
    width: 480px;
}
.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 5px;
    margin-bottom: 5px;
    margin-top: -5px;
    padding-top: 2px;
    cursor: pointer;
    font-size: 26px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control-checkbox .control_indicator:after {
    border       : solid var(--colorFondoBotones);
    border-width : 0 4px 4px 0;
}

input[type=checkbox] {
   width: 20px;
   height: 20px;
   border-color: 1px solid #E2E2E2;    
   background-color: white;
}

/* Formularios */
.fondo-blanco .form-group-f {
    padding: 0;
}

.titulos-form {
    font-size   : 20px;
    font-family : 'Raleway-Bold';
    color       : #006974;     
}

.input-capa {
    padding-left: 10px;    
    border     : 1px solid #E2E2E2;
    background : #FFF;
    width      : 270px;
    height     : 50px;
    font-size    : 14px;
    color        : #000;    
}

.input-form-lg {
    padding-left: 10px;
    border: 1px solid #E2E2E2;
    background: #FFF;
    width: 100%;
    height: 55px;
    font-size: 14px;
    color: #000;
}


.input-form-md {
    padding-left: 10px;    
    border     : 1px solid #E2E2E2;
    background : #FFF;
    width      : 100%;
    height     : 50px;
    font-size    : 14px;
    color        : #000;    
}

.input-form-sm {
    padding-left : 10px;    
    border       : 1px solid #E2E2E2;
    background   : #FFF;
    width        : 120px;
    height       : 50px;
    font-size    : 14px;
    color        : #000;    
}

.input-form-xs {
    padding-left : 10px;    
    border       : 1px solid #E2E2E2;
    background   : #FFF;
    width        : 100%;
    height       : 50px;
    font-size    : 14px;
    color        : #000;    
}

.select-form {
   font: 14px 'Raleway-SemiBold';
   color: #000;
   background-color: white;
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 0px;
   padding-left: 10px;    
   border           : 1px solid #E2E2E2;
   width: 100%;
   height: 50px;
   background:
       url(../images/flecha-gris-1.png),
       linear-gradient(to right, #FFF, #FFF),
       #FFF
       ;
   background-position:
       96%,
       85%,
       100%
       ;
   background-size:
       35px 35px,
       2px 80%,
       100% 100%
       ;
   background-repeat: no-repeat;
}

.select-form:focus {
   color            : rgb(0, 0, 0) !important;     
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 0px;

   background-position:
       96%,
       85%,
       100%
       ;
   background-size:
       35px 35px,
       2px 80%,
       100% 100%
       ;
   background-repeat: no-repeat;
}

.select-form-md {
   font: 14px 'Raleway-SemiBold';
   color: #000;
   background-color: white;
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 0px;
   padding-left: 10px;    
   border           : 1px solid #E2E2E2;
   width: 320px;
   height: 50px;
   background:
       url(../images/flecha-gris-1.png),
       linear-gradient(to right, #FFF, #FFF),
       #FFF
       ;
   background-position:
       96%,
       85%,
       100%
       ;
   background-size:
       35px 35px,
       2px 80%,
       100% 100%
       ;
   background-repeat: no-repeat;
}

.select-form-md:focus {
   color            : rgb(0, 0, 0) !important;     
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 0px;

   background-position:
       96%,
       85%,
       100%
       ;
   background-size:
       35px 35px,
       2px 80%,
       100% 100%
       ;
   background-repeat: no-repeat;
}

.input-form-lg {
    padding-left : 10px;    
    border       : 1px solid #E2E2E2;
    background   : #FFF;
    width        : 793px;
    height       : 55px;
    font-size    : 14px;
    color        : #000;    
}

.select-form {
    font             : 14px 'Raleway-SemiBold';
    color            : #000;
    background-color : white;
    padding-left     : 10px;    
    border           : 1px solid #E2E2E2;
    width            : 370px;
    height           : 50px;
}

.select-form-md {
    font             : 14px 'Raleway-SemiBold';
    color            : #939598;
    background-color : white;
    padding-left     : 10px;    
    border           : 1px solid #E2E2E2;
    width            : 320px;
    height           : 50px;
}

.titulosEncabezados {
    font-size     : 35px;
    font-family   : 'Raleway-Bold';
    margin-bottom : 15px;
}

.espacios {
    height: 40px;
}

.separar {
    height: 20px;
}

.fondo-blanco {
    padding: 18px;
    background-color: #FFFFFF;
}

/* Formularios */
.fondo-blanco .form-group-f {
    padding-left: 0;
}

.fondo-gris {
    background-color: #F8F8F8;
}

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 5px;
    margin-bottom: 5px;
    margin-top: -5px;
    padding-top: 2px;
    cursor: pointer;
    font-size: 16px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control_indicator {
    border        : 1px solid var(--sombraBotones);
    position      : absolute;
    top           : 4px;
    left          : 0;
    height        : 30px;
    width         : 32px;
    background    : var(--fondoContenido);
    border-radius : 8px;
}

.control-radio .control_indicator {
    border-radius: undefined%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #ffffff;
}

.control input:checked ~ .control_indicator {
    background: #ffffff;
}

.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #ffffff;
}

.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control_indicator:after {
    display: block;
}

.control-checkbox .control_indicator:after {
    left: 8px;
    top: 2px;
    width: 7px;
    height: 14px;
    opacity: 1.0;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

/* Menu para cerrar sesion*/
.seccionesdropdown {
    padding          : 5px;
    width            : 100%;
    height           : 40px;
    background-color : color-mix(in srgb, var(--colorFondoBotones) 20%, transparent);
}

.seccionesdropdown:focus,
.seccionesdropdown:hover {
    background-color : color-mix(in srgb, var(--colorFondoBotones) 30%, transparent);
}

.dropdown {
    position : relative;
    display  : inline-block;
}

#menu-opciones li {
    display       : block;
    width         : 100%;
    padding       : 8px 15px;
    box-sizing    : border-box;
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
}

#menu-opciones li:last-child {
    border-bottom: none;
}

#menu-opciones li a {
    display         : block;
    width           : 100%;
    text-decoration : none;
}

.item-drop-down {
    margin      : 0;
    white-space : normal;
    word-wrap   : break-word;
}

#menu-opciones li {
    align-items     : center;
    justify-content : flex-start;
    width           : 100%;
    height          : auto;
    min-height      : 35px;
    padding         : 6px 10px;
    box-sizing      : border-box;
    border-bottom   : 1px solid rgba(0, 0, 0, 0.1);
}

.puntos {
    position: relative;
    left: -45px;
    top: 2px;
}
/* Menu para cerrar sesion*/

/* MODALES DIRECCION*/
.footer-modales {
    font-family  : 'Raleway-Regular';
    font-size    : 14px;
    color        : #000000;
}

.color-numerales {
    color       : #939598;
    font-family : 'Raleway-Light';
    font-size    : 21px;
}

.guion-direccion {
    position: relative;
    left: 5px;
    width: 10px;
    height: 0px;
    background-color : #939598;
    border           : 1px solid #B4B4B4;
}

.control-filtro {                                                    
   font-family: arial;                                       
   display: block;                                           
   position: relative;                                       
   padding-left: 5px;                                        
   margin-bottom: 5px;                                       
   margin-right: 20px;                                       
   margin-top: -5px;                                         
   padding-top: 2px;                                         
   cursor: pointer;                                          
   font-size: 16px;                                          
}                                                             
.control-filtro input {                                              
   position: absolute;                                       
   z-index: -1;                                              
   opacity: 0;                                               
}      
.control-indicator-filtro {                                          
   position: static;                                         
   top: 0px;                                                 
   left: 0;                                                  
   height: 30px;                                             
   width: 32px;                                              
   background: #ffffff;                                      
   margin: -8px;                                             
   margin-top: 0px;                                          
                                                             
}                                                             
.control-radio-filtro .control-indicator-filtro {                          
   border-radius: undefined%;                                
}     
.control-filtro:hover input ~ .control-indicator-filtro,                    
.control-filtro input:focus ~ .control-indicator-filtro {                   
   background: #ffffff;                                      
}                                                             
                                                             
.control-filtro input:checked ~ .control-indicator-filtro {                 
   background: #ffffff;                                      
}     
.control-filtro:hover input:not([disabled]):checked ~ .control_indica
.control-filtro input:checked:focus ~ .control-indicator-filtro {           
   background: #ffffff;                                      
}                                                             
.control-filtro input:disabled ~ .control-indicator-filtro {                
   background: #e6e6e6;                                      
   opacity: 0.6;                                             
   pointer-events: none;                                     
}  
.control-indicator-filtro:after {                                    
   box-sizing: unset;                                        
   content: '';                                              
   position: absolute;                                       
   display: none;                                            
}                                                             
.control-filtro input:checked ~ .control-indicator-filtro:after {           
   display: block;                                           
}   
.control-checkbox-filtro .control-indicator-filtro:after {                  
   left: 8px;                                                
   top: 2px;                                                 
   width: 7px;                                               
   height: 14px;                                             
   border-width: 0 4px 4px 0;                                
   transform: rotate(45deg);                                 
}                                                             
.control-checkbox-filtro input:disabled ~ .control-indicator-filtro:after { 
   border-color: #7b7b7b;                                    
}  

/* Formularios */
.th-liquidaciones {
    background-color: #F8F8F8;
}

.input-liquidaciones {
    border: 1px solid #E2E2E2;
    padding: 6px;
}

.p-texto-liquidaciones {
    text-align: center;
}

.tbody-liquidaciones {
    border-left: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
}

.texto-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.div-liquidaciones {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}


.modalcontainer {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 11000;
    margin: -50px 0 0 -150px;

    background    : var(--fondoContenido) !important;
    border-radius : 20px;
    border        : 1px solid var(--sombraBotones);
    min-width     : 330px;
    min-height    : 190px;
    display       : none;
}

.textoMay {
    text-transform: uppercase;
}

.btn-confirm {

    font-size             : 14px;
    text-align            : center;
    font-family           : 'Raleway-Bold';
    background-color      : var(--fondo-botones);
    -moz-border-radius    : 28px;
    -webkit-border-radius : 28px;
    border-radius         : 28px;
    display               : inline-block;
    cursor                : pointer;
    color                 : var(--color-botones);
    padding               : 16px 31px;
    text-decoration       : none;
}

.btn-confirm:hover {
    filter: brightness(120%);
}
.btn-confirm:active {
    position:relative;
    top:1px;
}

.enmascarar {
    height: 50px;
    color: #555;
    background-color: #fff;
    background-image: none;
    /*border: 1px solid #ccc;*/
    border-left: none;
}

.enmascarar-focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.hidden {
    display:none;
}

.subirBotonGuardarLiqui {
    width    : 150px;
    left     : 10px;
    position : relative;
    top      : -290px;
}

.texto-titulo {
    color: #6cbc44;
    text-align: center;
    font-family: 'Raleway-Bold';
}

.texto-detalle {
    color: #000;
    text-align: center;
    font-size: 20px;
}
.divEmail {
    border: 1px; 
    border-color: #7E7F77;
    background-color: #FFFFFF;
    width:80%;
    padding-left: 20x;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}

@keyframes spin-example {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

/* ESTILOS */
body::-webkit-scrollbar {
  width : 6px;
}

body::-webkit-scrollbar-thumb {
  background-color : rgba(0, 0, 0, 0.3);
  border-radius    : 3px;
}

body.scroll-y-hidden {
  overflow-y          : hidden;
  overscroll-behavior : none;
  position            : fixed;
}

body.scroll-y-hidden::-webkit-scrollbar {
  display : none;
}

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

/* Encabezado */
.seccion-encabezado {
    display         : flex;
    justify-content : space-between;
}

.seccion-derecha {
    display     : flex;
    height      : 40px;
    align-items : center;
}

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

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-password-toggle-button {
    display: none !important;
}

.textoMay {
    text-transform : uppercase;
}

.modal-open {
    overflow : visible;
}

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

    opacity : 1;
}

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

.contenido-form {
    background-image    : url('../../logos/inicio.png');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : 100% 0%;
    opacity             : 1;
}

.contenido-titulo {
    background-image:
        linear-gradient(to bottom, var(--fondo), transparent),
        url('../../logos/fondo.png');

    background-size    : cover, cover;
    background-repeat  : no-repeat, no-repeat;
    background-position: 0% 0%, 0% 0%;
}

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

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

.titulo.subtitulo {
    color          : var(--colorLetraTitulos);
    padding-bottom : 25px;

}

.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;
}

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(--colorLetraTituloCajas);
    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;
}

.contenido-form .borde-interno {
    justify-content : center;
}

.contenido-titulo .borde-interno {
  position: relative;
  padding: 1px;
}

.contenido-titulo .borde-interno::before {
    content       : "";
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    bottom        : 0;
    border-radius : 10px;
    border        : 1px solid transparent;
    background    : linear-gradient(to bottom, var(--colorFondoLogo), transparent) border-box;

    -webkit-mask           : linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite : destination-out;
    mask-composite         : exclude;

    pointer-events: none;
}

.borde-interno .posicionTitulo {
    display         : flex;
    width           : 100%;
    justify-content : flex-end;
    padding         : 10% 15% 0 0;
    flex-direction  : column;
    align-items     : flex-end;
}

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

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

.caja-home {
    background-color : var(--colorFondoBotones);
    border-radius    : 6px;
    align-self       : flex-start;
    margin           : 10px;
}

.caja-form {
    width      : 100%;
    padding    : 8px;
    max-width  : 550px;
    max-height : calc(100vh - 110px);
    filter     : brightness(1.15);

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

.caja-form .contenido {
    padding         : 10% 11% 7.64%;
    background      : color-mix(in srgb, color-mix(in srgb, var(--fondo) 15%, white), transparent);
    backdrop-filter : blur(30px);
    border          : 1px solid var(--sombraBotones);
    border-radius   : 20px;
    opacity         : 1;
    max-height      : 100%;
}

#link-instructivo {
    padding-top: 25px;
}

.app-link,
.app-link:link,
.app-link:visited {
    color           : color-mix(in srgb, var(--sombraBotones) 80%, black);
    text-decoration : none;
    transition      : color 0.3s;
}

.app-link:hover,
.app-link:active {
    color : color-mix(in srgb, var(--sombraBotones) 60%, black);
}

.input-text,
.input-select,
.input-form,
.select-form {
    background    : transparent;
    filter        : brightness(0.9);
    border        : 1px solid var(--sombraBotones);
    border-radius : 10px;
    font          : normal 12px/14px 'Tahoma', sans-serif;
    padding       : 8px 14px 8px 14px;
    height        : 40px;
    color         : var(--colorLetraDatos);
    width         : 100% ;
}

.input-form.disabled {
    background : color-mix(in srgb, var(--fondoBarraLateral) 20%, transparent);
}

.input-text:-webkit-autofill,
.input-select:-webkit-autofill,
.input-form:-webkit-autofill,
.select-form:-webkit-autofill {
    -webkit-text-fill-color : var(--colorLetraDatos) !important;
    -webkit-box-shadow      : 0 0 0 1000px transparent inset !important;

    background-color : transparent !important;
    caret-color      : var(--colorLetraDatos);
    transition       : background-color 9999s ease-in-out 0s;
}

.input-text:-webkit-autofill:hover,
.input-select:-webkit-autofill:hover,
.input-form:-webkit-autofill:hover,
.select-form:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--colorLetraDatos) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.input-text:-webkit-autofill:focus,
.input-select:-webkit-autofill:focus,
.input-form:-webkit-autofill:focus,
.select-form:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--colorLetraDatos) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.caja-texto, .encabezados-modales {
    font  : normal normal normal clamp(10px, 0.85vw, 12px) / clamp(12px, 1vw, 14px) 'Tahoma', sans-serif;
    color : var(--colorLetraDatos);
}
.caja-texto-bold {
    font  : normal normal bold clamp(10px, 0.85vw, 12px) / clamp(12px, 1vw, 14px) 'Tahoma', sans-serif;
    color : var(--colorLetraDatos);
}
.modal-texto {
    color : var(--colorLetraTitulos2);
    font  : normal normal 12px/12px 'Montserrat', sans-serif;
}

.formulario {
    display        : flex;
    flex-direction : column;
}

.caja-input {
    display        : flex;
    flex-direction : column;
    width          : 100%;
}

.caja-input2 {
    display        : flex;
    flex-direction : column;
    width          : 50%;
}

.caja-input-x {
    display         : flex;
    justify-content : space-between;
}

.caja-boton {
    display         : flex;
    justify-content : center;
    padding         : 5px 0px;
}

.caja-links {
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

button:disabled {
    opacity        : 1 !important;
    cursor         : not-allowed;
    pointer-events : none;
}

.button-form,
.button-general,
.btn-info {
    background    : var(--colorFondoBotones);
    border        : 1px solid 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;
}

.button-general,
.btn-info {
    width  : 176px;
    height : 35px;
}

.button-form {
    width           : 65%;
    max-width       : 250px;
    padding         : 13px 70px;
    text-decoration : none;
}

.boton-link,
.boton-link:link,
.boton-link:visited,
.boton-link:hover,
.boton-link:active {
    text-decoration: none;
}

.boton-link {
    background    : var(--colorFondoBotones);
    border        : 1px solid 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;

    width     : 65%;
    max-width : 250px;
    padding   : 13px 70px;
}

.boton-link:hover {
    background : var(--sombraBotones);
}

/* Active (cuando haces clic) */
.boton-link:active {
    background : var(--sombraBotones);
}

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

.caja-fecha {
    display : flex;
    gap     : 10px
}

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

select option {
    white-space : normal;
    word-wrap   : break-word;
    padding     : 8px 10px;
    line-height : 1.4;
    color       : var(--colorLetraDatos) !important;
    background  : color-mix(in srgb, var(--fondoCajasBuscando) 30%, transparent);*/
}

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

.caja-select .button-select {
    width               : 40px;
    background-color    : var(--colorFondoBotones);
    border              : none;
    cursor              : pointer;
    background-image    : url('../images/menu-desplegable.png');
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 30px;

    box-shadow    : 2px 2px 4px var(--sombraBotones);
    border        : 1px solid var(--sombraBotones);
    border-radius : 10px;
}

.button-eye,
.button-dot {
    background-color : var(--colorFondoBotones);
    border           : none;
    cursor           : pointer;
    background-size  : 30px;

    box-shadow    : 2px 2px 4px var(--sombraBotones);
    border        : 1px solid var(--sombraBotones);
    border-radius : 10px;
}

.button-eye {
    width : 40px;
}

.button-dot {
    width : 30px;
}

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

.mensajesAlerta {
    display: flex;
    gap: 10px;
}

/* Modales */
.modal-content {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-direction  : column;
}

/* Modal Notificación */
.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* ocupa toda la altura de la ventana */
    margin: 0 auto; /* centrado horizontal */
}

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

.button-modal {
    width    : 30px;
    height   : 30px;

    background    : var(--colorFondoBotones);
    box-shadow    : 0px 3px 6px var(--sombraBotones);
    border        : 1px solid var(--sombraBotones);
    border-radius : 10px;
    cursor        : pointer;
}

.modal-content .button-modal {
    position : absolute;
    top      : 10px;
    right    : 5px;
}

#btnSi, #btnNo {
    width: 40px;
}

.modal-content {
    background    : var(--fondoContenido) !important;
    border-radius : 20px;
    border        : 1px solid var(--sombraBotones);
    min-width     : 330px;
    min-height    : 190px;
}

.notificacion.modal-content {
    width  : 330px;
    height : 210px;
}

.modal-body-declaracion {
    width  : 334px;
    height : auto;
}

.modal-notificacion {
    padding : 50px 14px 8px;
    font    : normal normal normal 12px/14px 'Tahoma', sans-serif;

    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 20px;
}

.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(--sombraBotones) 40%, transparent);

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

.modal-datos {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    padding        : 0 20px 10px;
    gap            : 10px;
}

.button-notificacion {
    background-color : var(--colorFondoBotones);
    border-color     : var(--sombraBotones);
    color            : var(--colorLetraBotones);

    border-radius : 10px;
    height        : 35px;
    min-width     : 55px;
}

#btnAceptar {
    width: 190px;
}

.button-modal:hover,
.button-select:hover,
.button-eye:hover,
.button-dot:hover,
.button-form:hover,
.button-general:hover,
.btn-info:hover,
.button-notificacion:hover,
.caja-home:hover
{
    background-color : var(--sombraBotones);
    border-color     : var(--sombraBotones);
}

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

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

/* Colores */
.colorLetraTitulos {
    color : var(--colorLetraTitulos);
}

.color-fondo {
    background-color : var(--fondo);
}

.color-letra-menu {
    color : var(--colorLetraBotones);
}

.colorFondoBarraLateral {
    background : var(--fondoBarraLateral) ;
}

.colorFondoContenido {
    background : var(--fondoContenido);
}

.colorLetraTituloCajas {
    color : var(--colorLetraTituloCajas)
}

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

.color-letra-menu {
    color : var(--colorLetraMenu);
}

/* Select */
select:focus {
    background-color: ${fondoCajasBuscando} !important;
}

.fondoCajasBuscando {
    background-color: var(--fondoCajasBuscando);
}

@media (max-width: 1000px) {
    .container-logo-home {
        height: auto;
    }
}

/* Mi cuenta */
.rigth-cuenta {
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

.caja-inputs {
    display        : flex;
    gap            : 5px;
    flex-direction : column;
    margin         : 30px 0 20px;
    min-width      : 430px;
}

/*Forms */
.right-main {
    display        : flex;
    flex-direction : column;
    margin         : 20px 5%;
    gap            : 15px;
}

.caja-doble {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 15px;
}

.caja-doble2 {
    display               : grid;
    grid-template-columns : 0.2fr 1fr;
    gap                   : 15px;
    margin-bottom         : 25px;
}

.caja-triple {
    display               : grid;
    grid-template-columns : 0.2fr 0.5fr 0.5fr;
    gap                   : 15px;
    margin-bottom         : 25px;
    padding               : 0 15px;
}

#input-forms .caja-input {
    margin-bottom : 10px;
}

/* Tablas */
.body-tabla {
    padding       : 10px;
    border-radius : 10px;
    border        : 1px solid var(--sombraBotones);

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

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

.table.tablaPrincipal td, .table.tablaPrincipal th {
    padding: 6px;
}

.table.tablaPrincipal {
    font   : normal normal normal 12px/14px 'Tahoma', sans-serif;
    color  : var(--colorLetraDatos);
}

.table.tablaPrincipal th {
    font             : normal normal bold 12px/14px 'Tahoma', sans-serif;
    background-color : color-mix(in srgb, var(--fondoGrillas) 40%, transparent 60%);
    color            : var(--colorLetraTituloGrillas);
}

.table.tablaPrincipal tr {
    background-color : var(--fondoContenido);
}

.table.tablaPrincipal td {
    border-top : none;
}

.table.tablaPrincipal > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--colorFondoBotones) 12%, white) !important;
}

.table-bordered th,
.table-bordered td,
.table-bordered {
    border: 1px solid var(--sombraBotones) !important;
}

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

    .caja-form .contenido {
        padding : 10% 5%;
    }

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

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

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

    .caja-inputs {
        min-width: 80%;
    }

    .caja-doble {
        display        : flex;
        flex-direction : column;
    }

    body.scroll-y-hidden {
        overflow-y : scroll;
    }

    .caja-input2 {
        width : 100%;
    }
}

.caja-modal {
    margin         : 0 40px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 10px;
}

/* Checkbox */
.document-checkbox {
    appearance         : none;
    -webkit-appearance : none;
    width              : 20px;
    height             : 20px;
    border             : 1px solid var(--sombraBotones);
    border-radius      : 4px;
    background-color   : var(--fondoContenido);
    cursor             : pointer;
    position           : relative;
    transition         : all 0.2s ease;
}

/* Dibuja el ✔ cuando está marcado */
.document-checkbox:checked::after {
    content      : "";
    position     : absolute;
    color        : var(--colorFondoBotones);
    left         : 6px;
    top          : 0px;
    border       : solid var(--colorFondoBotones);
    border-width : 0 3px 3px 0;
    transform    : rotate(45deg);
    width        : 7px;
    height       : 14px;
}

/* Estado deshabilitado */
.document-checkbox:disabled {
    opacity : 0.5;
    cursor  : not-allowed;
}

/* Evita el borde negro al hacer click o foco */
.document-checkbox:focus,
.document-checkbox:active,
.document-checkbox:focus-visible {
    outline    : none !important;
    box-shadow : none !important;
}

/* Chrome y Edge */
.document-checkbox::-webkit-focus-inner {
    border  : 0 !important;
    outline : 0 !important;
}

/* Firefox */
.document-checkbox::-moz-focus-inner {
    border : 0 !important;
}

.right-total {
    display         : flex;
    justify-content : flex-end;
    align-items     : center;
    padding-right   : 29px;
    gap             : 5px;
}

.left-datos {
    display         : flex;
    margin          : 20px 0;
    justify-content : space-between;
}

/* Dropdown */
.dropdown-select {
    position      : absolute;
    top           : 93%;
    left          : 0;
    right         : 0;
    background    : #fff;
    border        : 1px solid var(--sombraBotones);;
    border-radius : 10px;
    max-height    : 300px;
    overflow-y    : auto;
    z-index       : 1000;
    box-shadow    : 0 8px 16px rgba(0, 0, 0, 0.1);
    margin        : 0 15px;
    width         : calc(100% - 79px);
    display       : none;
}

.dropdown-select.active {
    display : block;
}

.dropdown-select::-webkit-scrollbar {
    width : 8px;
}

.dropdown-select::-webkit-scrollbar-track {
    background : #f1f1f1;
}

.dropdown-select::-webkit-scrollbar-thumb {
    background    : #4CAF50;
    border-radius : 4px;
}

.dropdown-select::-webkit-scrollbar-thumb:hover {
    background : #45a049;
}

/* Opciones */
.option-item {
    padding       : 12px 15px;
    border-bottom : 1px solid #f0f0f0;
    cursor        : pointer;
    transition    : background 0.2s ease;
    display       : flex;
    align-items   : center;
    gap           : 10px;
    user-select   : none;
}

.option-item:hover {
    background : #f9fff7;
}

.option-item:last-child {
    border-bottom : none;
}

.option-item label {
    flex   : 1;
    cursor : pointer;
    color  : var(--colorLetraDatos);
    font   : normal 12px / 14px 'Tahoma', sans-serif;
    margin : 0;
}

@media (max-width: 556px) {
    .body-logo {
        background-size : auto 90%;
    }

    .seccion-encabezado {
        display        : flex;
        flex-direction : column;
        gap            : 8px;
    }

    .seccion-izquierda {
        display         : flex;
        justify-content : center;
    }

    .seccion-derecha {
        justify-content : flex-end;
    }

    #title-impuesto,
    .contenido-informativo {
        margin-left : 15px !important;
    }

    .text-eco h4 {
        margin-left : 60px !important;
    }

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

    .caja-form .contenido {
        padding: 5% 4%;
    }

    .titulo.subtitulo {
        padding-bottom: 6px;
    }

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

    .modal-dialog {
        margin : 1.5rem;
    }
}

@media (max-width: 376px) {
    .body-logo {
        background-size : auto 70%;
    }

    .borde-interno {
        margin: 25px;
    }

    .boton-link {
        width: 87%;
    }

    .caja-inputs {
        min-width : 90%;
    }
}

@media (max-height: 695px) {
    .input-text, .input-select {
        height: 30px;
    }

    .button-form {
        width: 50%;
        padding: 10px 10px;
        text-decoration: none;
    }

    .caja-select .button-select {
        width: 35px;
    }

    .titulo.subtitulo {
        padding-bottom: 8px;
    }

    .caja-form .contenido {
        padding: 6% 11% 6%;
    }
}