@font-face{
    font-family: 'montserrat';
    src: url(../assets/fonts/Montserrat-VariableFont_wght.ttf);
}

@font-face{
    font-family: 'roboto-black';
    src: url(../assets/fonts/Roboto-Black.ttf);
}

@font-face{
    font-family: 'roboto-bold';
    src: url(../assets/fonts/Roboto-Bold.ttf);
}

@font-face{
    font-family: 'roboto-light';
    src: url(../assets/fonts/Roboto-Light.ttf);
}

@font-face{
    font-family: 'roboto-medium';
    src: url(../assets/fonts/Roboto-Medium.ttf);
}

@font-face{
    font-family: 'roboto-regular';
    src: url(../assets/fonts/Roboto-Regular.ttf);
}

@font-face{
    font-family: 'roboto-thin';
    src: url(../assets/fonts/Roboto-Thin.ttf);
}

:root{
    /* colors */
    --main-white : #fcfcfc;
    --main-black : #000000;
    --main-gray : #666666;

    --dark-gray : #4b4b4b;
    --light-gray : #7d7d7d;
    --white-gray : #959393;
    --second-color : #587679;
    --second-color-main: #71979b ;
    --gray-blue:#455671;
    --main-blue: #276aa1;
    --dark-blue: #45647F;


    /* --background: #fff3b0; */
    --background: #f1f3f4;
    

    /* fonts */
    --montserrat : 'montserrat';
    --roboto-thin : 'roboto-thin';
    --roboto-light : 'roboto-light';
    --roboto-regular : 'roboto-regular';
    --roboto-medium : 'roboto-medium';
    --roboto-bold : 'roboto-bold';
    --roboto-black : 'roboto-black';
    --tilt-neon: 'Tilt Neon';
    --titles: 'Lobster';
}

.notify {
    z-index: 99999 !important;
}

.slide{
    width: 100%;
    background-color: var(--dark-gray);
    height: 450px;
}

body{
    background-color: var(--background);
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.872); */
}

.main{
    width: 100%;
    padding: 0px 0px;
}

.container{
    width: 100%;
    padding: 0px 100px !important;
}

*{
    margin : 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

h1{
    font-family: var(--roboto-black);
}

h3, h4, h5{
    font-family: var(--roboto-bold);
}

h2{
    font-family: var(--titles);
}

.budget h2{
    font-family: var(--roboto-bold);
}

p{
    font-family: var(--roboto-medium);
}

body{
    font-size: 18px;
}

.d-none{
    display: none !important;
}

.contenedor{
    width: 90%;
    max-width: 1080px ;
    margin: 0 auto ;
}

.tr-Pendiente, .tr-pendiente{
    background-color: #418ecd !important;
}

.tr-facturado, .tr-facturado-afip{
    background-color: #c77dff !important;
}

.tr-Rechazado, .tr-cerrado, .tr-Cancelado{
    background-color: rgb(179, 23, 23) !important;
}

.tr-resuelto, .tr-Aprobado, .tr-Pagado{
    background-color: rgb(20, 147, 20) !important;
}

.tr-proceso, .tr-Proceso{
    background-color: var(--dark-blue);
}


.tit{
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}

.data-header-mobile{
    display: none;
}

.t-center{
    text-align: center;
}

.t-white{
    color: var(--main-white);
}

/* btn volver arriba */
    .btn-volver-arriba a{
        display: flex;
        position: fixed;
        bottom: 125px;
        right: 20px;
        margin-right: -100px;
        transition: all .7s ease;
        z-index: 9999;
    } 
    
    .btn-volver-arriba a i{
        font-size: 50px;
        cursor: pointer;
        transition: all .3s ease;
        color: var(--light-gray);
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .btn-volver-arriba a i:hover{
        font-size: 65px;
        color: var(--dark-blue);
    }

/* boton wpp */
    .btn-wpp{
        display: flex;
        position: fixed;
        right: 20px;
        bottom: 50px;
        z-index: 99999;
    }
    
    .btn-wpp a i{
        color: #25D366;
        cursor: pointer; 
        font-size: 55px;
        transition: all .3s ease;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .btn-wpp a i:hover{
       font-size: 65px;
       color: #128C7E;
    }

/* nav */
    .mobile-menu{
        color: var(--main-white);
    }

    .mobile-menu i{
        color: var(--main-white);
        font-size: 35px;
    }

    .nav-header{
        position: relative;
        z-index: 1000;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: fit-content;
        background-color: transparent;
        align-items: center;
        justify-content: space-between;
    }

    .nav-header .data-header{
        display: flex;
        flex-direction: row;
    }

    .nav-header .data-header div, 
    .data-header-mobile div{
        display: flex;
        flex-direction: row;
        padding: 0px 30px;
        align-items: center;
    }

    i{
        padding: 0px 10px;
    }

    label{
        font-family: var(--roboto-regular)
    }

    .data-header div i, 
    .data-header div p, 
    .data-header-mobile div i, 
    .data-header-mobile div p{
        font-size: 25px;
        color: var(--dark-gray);
    }

    .nav-header img{
        padding: 15px 30px;
        height: 135px;
    }

    nav{
        position: relative;
        z-index: 100;
        width: 100%;
        height: 50px;
        background-color: #276aa1;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    nav div{
        width: 100% !important;
    }

    nav div a{
        color: var(--main-white);
    }
    
    nav .nav-links{
        display: flex;
        flex-direction: row;
    }
    
    .nav-link{
        padding: 0px 20px;
        font-size: 25px;
        font-family: var(--tilt-neon);
        transition: all .4s ease-in-out;
        color: var(--background);
    }

    .nav-link:hover{
        font-weight: 800;
        color: var(--main-white);
    }

    nav .nav-social{
        display: flex;
        flex-direction: row;
        justify-content: end;
    }

    nav .nav-social a{
        padding: 0px 10px;
        font-size: 25px;
        text-shadow: 6px 6px 11px rgba(0, 0, 0, 0.7);
        transition: all .3s ease-in-out;
    }

    nav .nav-social a:hover{
        color: var(--background);
        text-shadow: unset !important;
    }

    .fixed_header{
        position: fixed !important;
        top: 0 !important;
        box-shadow: 7px 7px 15px 1px rgba(0, 0, 0, 0.5);
    }

    .nav-information{
        display: flex;
        flex-direction: row;
        justify-content: center;
        background: #111;
        color: #e5e7eb;
        width: 100%;
        height: 30px;
        padding: 0px 30px;
    }

    /* nav mobile */
        .nav-links-mobile{
            width: 100%;
            position: absolute;
            top: -250px;
            background-color:var(--main-blue);
            flex-direction: column;
            display: flex;
            justify-content: space-evenly;
            align-content: space-evenly;
            align-items: baseline;
            height: 240px;
            z-index: 2000;
            box-shadow: 3px 4px 8px #00000090;
        }

        .nav-links-mobile .nav-link{
            color: var(--main-white);
        }
    /* nav mobile */

.charts{
    display: flex;
    flex-direction: row;
}

.charts .chart{
    width: 260px;
    height: 180px;
    position: relative;

}

.charts .chart h4{
    text-align: center ;
    color: var(--dark-blue);
    font-size: 20px;
}

.charts .chart canvas{
    padding: 0px 20px !important;
}

#budgetsChart, #budgetsDebtChart {
    width: 200px;
    height: 200px;
}

.total-billed{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.total-billed h4{
    font-size: 26px;
    color: var(--dark-blue);
}
/* Contact */
    #contact-us-div{
        padding-top: 20px;
        margin: 40px 0px;
    }

    .contact-us{
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        background-color: var(--dark-gray);
    }

    .budget, .contact-data{
        width: 50%;
        padding: 0px 50px;
        margin: 20px 0px;
    }

    .budget h2{
        color: var(--main-white);
        text-align: center;
    }
    
    .budget-form{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .budget-form{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
    }

    .span-obligatorios{
        color: var(--main-white);
        font-family: var(--roboto-thin);
    }

    .form-group{
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    .form-group input{
        height: 70px;
        background: transparent;
        border: none;
        border-bottom:solid var(--main-white);
        outline: none;
        color: var(--main-white);
        font-size: 20px;
        font-family: var(--roboto-medium);
    }

    .form-group input:focus{
        transition: all .5s ease-in-out;
        border-bottom:solid var(--second-color-main);
    }

    .form-group input::placeholder {
        color: #dad7d7 !important;
        font-family: var(--roboto-thin) !important;
    }

    .form-group input:focus{
        outline: none !important;
        border-color: var(--main-blue);
    }
    
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus
    {
        /* border-bottom: none!important; */
        -webkit-text-size-adjust: 20px !important;
        -webkit-text-fill-color: #f0e9e9 !important;
        -webkit-box-shadow: 40px 0  0px 100px #4b4b4b  inset !important;
    }
    

    .form-group label{
        font-family: var(--roboto-light);
        color: var(--main-white);
    }

    .form-group .input-error{
        margin-top: 10px;
        color: red;
        font-family: var(--roboto-bold);
    }

    .form-group:nth-child(2){
        grid-column: 1/4;
        grid-row: 1;
    }

    .form-group:nth-child(3){
        grid-column: 4/7;
        grid-row: 1;
    }

    .form-group:nth-child(4){
        grid-column: 1/3;
        grid-row: 2;
    }

    .form-group:nth-child(5){
        grid-column: 3/5;
        grid-row: 2;
    }

    .form-group:nth-child(6){
        grid-column: 5/7;
        grid-row: 2;
    }

    .form-group:nth-child(7){
        grid-column: 1/7;
        grid-row: 3;
    }

    .form-group:nth-child(8){
        grid-column: 1/7;
        grid-row: 4;
    }

    .form-group:nth-child(9){
        grid-column: 1/7;
        grid-row: 5;
    }

    .boton-form{
        grid-column: 1/7;
        grid-row: 6;
        margin-top: 20px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        font-family: var(--roboto-medium);
        font-size: 20px;
        background-color: var(--main-blue);
        color: var(--main-white);
        box-shadow: 4px 5px 8px #00000086;
        transition: all .4s ease-in-out;
    }

    .boton-form:hover{
        background-color: var(--background);
        color: var(--main-blue);
        box-shadow: unset;
    }

    #mapa{
        margin-top: 40px;
        width: 100%;
        border-radius: 15px;
    }

    .contact-data{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-bottom: 40px;
        justify-content: space-between;
    }

    .contact-data div{
        margin: 5px 0px;
        width: 48%;
        display: flex;
        flex-direction: row;
        color: var(--main-white);
        font-size: 22px;
        align-items: center;
    }

    .box{
        display: flex;
        justify-content: center;
        width: 55px !important;
    }

    .box i{
        padding: 0px !important;
    }
/* contact */


/* services */
    .services{
        margin: 90px 0px;
        padding-top: 90px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
    }

    .services h2{
        font-size: 50px;
        color: var(--dark-gray);
        text-align: center;
    }

    .services .data{
        margin-bottom: 40px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .services .data .service{
        margin: 20px 0px;
        width: 450px !important;
        height: 200px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service i{
        color: var(--dark-gray);
        font-size: 70px;
        margin-bottom: 15px;
        transition: all .3s ease-in-out;
        text-shadow: 4px 5px 9px rgba(0, 0, 0, 0.3);
        cursor: default;
    }

    .service i:hover{
        color: var(--main-blue);
        font-size: 85px;
        text-shadow: none;
    }

    .service h3{
        color: var(--dark-gray);
        overflow-wrap: break-word;
        text-align: center;
        font-size: 30px;
    }

    .service img{
        box-shadow: 4px 4px 6px #0000006b;
        border-radius: 10px !important;
    }

    .service a{
        margin-top: 15px;
        font-family: var(--roboto-bold);
        color: var(--main-blue);
    }

    .icon-div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px !important;
        height: 140px !important;
    }

    .see-more-services{
        padding: 10px 0px;
        border-radius: 10px;
        font-size: 25px;
        width: 40%;
        color: var(--main-white);
        text-align: center;
        background-color: var(--main-blue);
        font-family: var(--roboto-light);
        transition: all .3s ease-in-out;
        box-shadow: 2px 4px 10px #00000090;
    }

    .see-more-services:hover{
       background-color: var(--dark-gray);
       box-shadow: unset;
    }

    /* services index */
        .index-services{
            padding: 0px 45px !important;
        }

        .index-services .services{
            padding-top: 0px !important;
        }

        .index-services .services .data{
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .index-services .services .data .service{
            flex-direction: row;
            width: 48% !important;
            height: 100% !important;
            margin: 60px 0px;
        }

        .index-services .services .data .service img{
            width: 350px;
        }

        .index-services .services .data .service div{
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-content: space-between;
        }

        .index-services .services .data .service div h3{
            margin-bottom: 20px;
            text-align: start !important;
        }

        .index-services .services .data .service div p{
            font-family: var(--roboto-medium);
            color: var(--dark-gray);            
        }

        .index-services .services h2{
            margin-bottom: 50px;
        }

        .original{
            display: inline;
        }

        .see-more{
            cursor: pointer;
            display: inline-block;
            color: #666;
            font-size: 19px;
            line-height: 2;
            margin-top: 10px;
            width: 100%;
        }

        .extra{
            opacity: 0;
            max-height: 0;
            font-size: 0;
            transition: .2s ease;   
        }

        input[type='checkbox']{
            position: relative;
            height: 50px;
            display: none;
            appearance: none;
        }

        input[type='checkbox'] ~ .see-more:before{
            content: '▽ Ver mas. ';
        }
          
        input[type='checkbox']:checked ~ .see-more:before{
            content: 'Ver menos. △' ;
        }

        .extra:has(~input[type='checkbox']:checked){
            opacity: 1;
            font-size: inherit;
            max-height: 999em;
        }
    /* services index */

    /* services show */        
        .show-service .service{
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            width: 100% !important;
            justify-content: center;
            align-items: center;
        }

        .show-service .service i{
            cursor:auto;
        }

        .show-service .service i:hover{
            color: var(--second-color);
            font-size: 110px;   
        }
    /* services show */
/* services */


/* about us */
    .about-us{
        margin: 50px 0px;
        padding-top: 40px !important;
        width: 100%;
        background-color: var(--main-blue) !important;
    }

    .about-us h2{
        margin: 40px 0px;        
        font-size: 50px;
        color: var(--background);
        text-align: center;
        text-shadow: 1px 3px 6px #0000008b;
    }

    .references h2{
        margin-top: 40px;
        margin-bottom: 20px;     
        font-size: 50px;
        color: var(--dark-gray);
        text-align: center;
    }

    .about-us p{
        font-size: 25px;
        color: var(--background);
        margin: 30px 0px;        
        text-align: center;
        margin-bottom: 70px !important;
    }

    .about-us p span{
        font-weight: 600;
    }

    .skill p,
    .reference p{
        font-size: 30px;
    }

    #about-us{
        padding-top: 40px;
    }

    .skills{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

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

    .skill i{
        font-size: 70px;
        color: var(--background);
        text-shadow: 2px 3px 5px #00000075;
    }


    .our-references{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

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

    .reference i{
        font-size: 80px;
        color: var(--dark-gray);
    }

    .reference span{
        font-size: 70px;
        font-family: var(--roboto-regular);
        color: var(--dark-gray);
        margin-left: 25px;
    }

    .reference p{
        margin-top: 0px;
        color: var(--dark-gray);
    }
/* about us */


/* footer */
    footer{
        margin-top: 5px;
        width: 100%;
        height: 190px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0px 100px;
    }

    .contact-footer{
        display: flex;
        flex-direction: column;
    }

    .contact-footer div{
        display: flex;
        flex-direction: row;
        color: var(--main-white);
        font-size: 22px;
        margin: 10px 0px;
        align-items: center;
    }

    .contact-footer div .box{
        margin: 0px !important;
    }

    .footer-logo{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-logo img{
        width: 180px;
        height: 100%;
    }

    .developed-by{
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .developed-by span{
        font-size: 20px;
        font-family: var(--roboto-bold);
        color: var(--dark-gray) !important;
    }

    .developed-by span a{
        color: var(--dark-gray) !important;
    }

/* footer */

/* alert message */
    .message-alert{
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: -100px;
        margin: 0px auto;
        width: 100%;
        height: 100px;
        z-index: 999999;
        animation: 8s linear 0s show-hide;
    }
    
    .message-alert h2{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100% ;
        width: 75%;
        background-color: #128c7ead;
        font-size: 28px;
        color: white;
        text-align: center;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    @keyframes show-hide {
        0% {top: 0px;}
        25% {top: 0px;}
        50% {top: 0px;}
        75% {top: 0px;}
        100% {top: -100px;}        
      }
/* alert message */

/* carrousel */
    .carousel {
        width: 100%;
        overflow: hidden;
    }
    
    .carousel-inner {
        display: flex;
        /* animation: carouselMove 300s linear infinite; */
    }
    
    .carousel-item {
        flex: 0 0 auto;
        margin-right: 20px; /* Espacio entre cada logo */
    }
    
    /* @keyframes carouselMove {
        from { transform: translateX(0); }
        to { transform: translateX(-100%); }
    } */
    
    .carousel-item img {
        margin: 0px 10px;
        max-width: 100%;
        max-height: 160px ;
    }
/* carrousel */

/* Panel de control */
.panel{
    padding: 20px 80px;
    display: flex;
    flex-direction: column;
}

.panel .important-data{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel .important-data h3{
    font-size: 45px ;
}

.panel-footer{
    height: 300px !important;
    width: 100%;
}

.important-data .important-data-bank{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.important-data .important-data-bank h4{
    font-size: 35px !important;
    width: 100%;
    text-align: start !important;
}

.important-data .important-data-bank img{
    width: 1000px !important;
}

.changelog-div{
    width: 100%;
    height: 100vh;
    background-color: #000000dd;
    position: fixed;
    z-index: 999999999;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.changelog{
    background-color: var(--background);
    width: 60%;
    height: 80%;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 40px;
}

.changelog span{
    font-size: 50px;
    font-family: var(--roboto-bold);
    color: var(--main-blue);
}

.changelog div{
    background-color: #d3d7d8;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    padding: 0px 30px;
}

.changes span{
    font-size: 20px;
    width: 100%;
    text-align: start;
    color: var(--dark-blue);
}

.changes .title{
    text-align: center !important;
    font-size: 30px;
}

.version{
    font-size: 24px;
    color: #494d4d;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-family: var(--roboto-light);
}

.login{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("/assets/img/buildings.png") ;
    background-size: cover;
}

.login form{
    display: flex;
    flex-direction: column;
    background-color: var(--main-blue);
    padding: 60px 60px;
    border-radius: 20px;
    margin-top: 70px;
    box-shadow: 10px 10px 15px #0000009a;
}

.login form span{
    color: white;
    margin-bottom: 40px;
    font-weight: 700;
}

.login form input{
    border-color: var(--main-white) !important;
    color: var(--main-white) !important;
}

.login form h4{
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-bottom: 25px;
    color: var(--main-white) !important;
}

.login form input::placeholder{
    color: var(--main-white) !important;
}

.login form .button-show:hover{
    background-color: var(--main-white) !important;
    color: var(--main-blue) !important;
}

.options{
    color: var(--main-white) !important;
    font-family: var(--tilt-neon) !important;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    -webkit-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
    outline: none; /* Quita el borde de enfoque */
    border: none; /* Quita el borde del select */
}

.options option{
    background-color: var(--main-blue) !important;
}

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

.tables{
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tables h3{
    color: var(--dark-gray);
    text-align: center;
    font-size:50px;
    margin-top: 30px;
}

.filters-sale{
    width: 100% !important;
}

.filters-sale form{
    width: 100% !important;
}

.filters-sale form .sale-status{
    width: 25% !important;
    
}

.filters-sale form .sale-search{
    width: 20% !important;
    padding: 0px 20px;
}

.filters-sale form .sale-search input{
    width: 100% !important;
}

.filters-sale form .sale-date{
    width: 17.5% !important;
}

.filters-sale form .button{
    width: 10% !important;
}





.tables .filters,
.clients .tables .filters{
    width: 100%;
}

.clients .tables .filters{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.filter-order{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: end;
}

.filter-order span{
    font-family: var(--roboto-light);
    margin-right: 20px;
    font-size: 22px;
}

/* .sale-status{
    min-width: 500px !important;
} */

.tables .filters form{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 20px 0px;
}

.tables .filters form select{
    width: 220px;
}

.tables .filters form div input,
.tables .filters form div span{
    font-family: var(--roboto-light);
    font-size: 22px;
}

.tables .filters form div input{
    border: unset !important;
    border-bottom: 3px solid var(--main-blue) !important;
}
/* 
.tables .filters form select,
.tables .filters form div{
    margin-right: 50px;
} */

.tables .filters form button{
    margin-left: 30px;
}



table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

thead{   
    height: 40px;
}

thead tr{
    background-color: var(--main-blue);
}

thead tr th{
    color: var(--main-white);
}

tbody{
    background-color: var(--main-gray);
}

th, td{
    color: var(--main-white);
    font-family: var(--roboto-medium);
    border: 1px solid var(--main-white);
    padding: 0px 10px;
}

th{
    padding: 20px 10px;
}

.row-table{
    transition: all .2s ease-in-out;
}

.row-table:hover {
    filter: brightness(0.8);
    cursor: pointer;
}

.row-table .circle-status {
    font-size: 70px;
    margin-right: 20px;
    height: fit-content;
}

.row-table .Pendiente {
    color: var(--main-blue) !important;
}

.row-table .Aprobado{
    color: rgb(23, 179, 23) !important;
}

.row-table .facturado{
    color: #c77dff !important;
}

.row-table .Rechazado,
.row-table .Vencido
{
    color: rgb(179, 23, 23) !important;
}

tr{
    background-color: #3c86c2;
    text-overflow: ellipsis;
}

/* tr:nth-child(even){
    background-color: rgb(215, 210, 210);
} */

.title-panel{
    font-size: 60px;
    margin-right: 40px;
    color: var(--dark-gray);
    font-family: var(--tilt-neon);
}

.buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.button{
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    font-family: var(--roboto-medium);
}

.buttons .button{
    font-size: 16px;
    padding: 7px 10px;
}

.button-white{
    background-color: transparent;
    color: white;
    border: 3px solid white;
}

.button-white:hover{
    background-color: white;
    color: var(--main-blue);
}

.button-show{
    background-color: transparent;
    color: var(--main-blue);
    border: 3px solid var(--main-blue);
}

.button-show:hover{
    background-color: var(--main-blue);
    color: white;
}

.button-edit{
    background-color: transparent;
    color: green;
    border: 3px solid green;
}

.button-edit:hover{
    background-color: green;
    color: white;
}

.button-delete{
    background-color: transparent;
    color: red;
    border: 3px solid red;
}

.button-delete:hover{
   background-color: red;
   color: white;
}

.button-aprobe{
    background-color: transparent;
    color: green;
    border: 3px solid green;
}

.button-aprobe:hover{
    background-color: green;
    color: white;
}

.button-check{
    background-color: transparent;
    color: var(--main-blue);
    border: 3px solid var(--main-blue);
}

.button-check:hover{
    background-color: var(--main-blue);
    color: white;
}

.message-div{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.message-div-tickets span{
    font-size: 32px !important;
    font-family: var(--roboto-light);
    color: var(--dark-gray);
    margin-left: 40px ;
}

.message-div span{
    font-size: 40px;
    font-family: var(--roboto-light);
    color: var(--dark-gray);
}


.t-name{
    width: 20%;
}

.t-desc{
    width: 65%;
}

.t-act{
    width: 15%;
}

.add-button{
    width: 100%;
    margin: 20px 0px;
    padding: 10px 0px;
    background-color: var(--main-blue);
    border: 3px solid var(--main-blue);
    color: var(--main-white);
    border-radius: 20px;
    text-align: center;
    font-size: 30px; 
    font-family: var(--roboto-medium);
    cursor: pointer;
    transition: all .3s ease-in-out;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.608);
}

.add-button:hover{
    background-color: transparent !important;
    color: var(--main-blue);
    box-shadow: unset;
}

.create{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: unset !important;
}

.create-form{
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    width: 60%;
    background-color: var(--main-white);
    padding: 30px 30px;
    box-shadow: 3px 4px 9px #000000b1;
    border-radius: 30px;
}

.client{
    width: 100%;
    padding: 20px 60px;
}

.client h3{
    font-size: 60px;
    font-family: var(--roboto-light);
    color: var(--dark-gray);
    margin-bottom: 30px;
}

.client .data{
    display: flex;
    flex-direction: row;
    background-color: var(--main-blue);
    width: 100%;
    border-radius: 40px;
    padding: 50px 50px;
}

.client .data .client-data{
    display: flex;
    flex-direction: column;
    width: 50%;
}
.client .data .client-debt{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.client .data .client-debt .debt{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.client .data .client-debt .debt span{
    color: var(--main-white);
    font-size: 60px;
    font-family: var(--roboto-medium);
}

.client .data .client-debt .debt .debt-amount{
    font-size: 100px;
    font-family: var(--roboto-light);
    padding-left: 20px;
}

.client .data .client-data div{
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
}

.client .data .client-data div span{
    color: var(--main-white);
    font-family: var(--roboto-medium);
    font-size: 30px;
    width: 20% !important;
}

.client .data .client-data div .data-value{
    font-family: var(--roboto-light) !important;
    padding-left: 20px;
    width: 80% !important;
}


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

.pagination{
    display: flex;
    flex-direction: row;
}

.pagination li a,
.pagination li span{
    background-color: transparent !important;
    color: white !important;
    font-size: 28px;
    padding: 0px 10px;
    cursor: pointer;
}

.pagination .active{
    color: white !important;
    font-weight: 700 !important;
    text-shadow: 3px 5px 12px #000000cb;
}

.pagination .disabled span{
    color: rgb(163, 162, 162) !important;
}

.clients-create,
.budgets-create,
.taxes-create,
.sales-create,
.user-create,
.boards-create,
.tickets-create{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tickets-create div{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.tickets-create div span{
    font-size: 22px;
    font-family: var(--roboto-light);
    color: var(--gray-blue);
}

.tickets-create .select{
    width: 50%;
}

.tickets-create .select select{
    width: 80%;
    padding-top: 10px;
}

.tickets-create .textareas{
    width: 100%;
    margin-top: 20px;
}

.tickets-create .textareas textarea{
    width: 100%;
    height: 85px;
    font-size: 20px;
    color: var(--gray-blue);
    font-family: var(--roboto-regular);
    border: unset;
    border-bottom: 3px solid var(--main-blue);
}

.boards-create input{
    width: 100%;
}

.boards-create .color-selector{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.boards-create .color-selector span{
    font-family: var(--roboto-light);
    font-size: 24px;
}

.boards-create .color-selector input{
    border: none !important;
    width: 100px !important;
    margin-left: 20px;
    margin-bottom: 0px !important;
}

.user-create .form-input{
    width: 47%;
}

.clients-create select{
    width: 48% !important;
}

.clients-create .parent{
    width: 100%;
}

.clients-create .parent .chosen-container{
    width: 100% !important;
}


/* .clients-create input,
.clients-create select,
.budgets-create input,
.taxes-create input,
.login form .user,
.login form .pass,
.sales-create input,
.user-create input{
    margin-bottom: 20px;
    height: 40px;
    background-color: transparent;
    border: unset;
    border-bottom: 3px solid var(--main-blue);
    font-size: 22px;
} */

.form-input{
    margin-bottom: 20px;
    height: 40px;
    background-color: transparent;
    border: unset;
    border-bottom: 3px solid var(--main-blue);
    font-size: 22px;
}

.clients-create .div-obv,
.clients-create .div-bank{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--roboto-light);
    font-family: 22px;
    margin-top: 20px;
}

.clients-create .div-obv textarea,
.clients-create .div-bank textarea{
    max-width: 100%;
    min-width: 100%;
    margin-top: 10px;
    min-height: 100px !important;
    font-size: 25px;
    border-bottom: 3px solid var(--main-blue);
}

.search-input{
    height: 40px;
    background-color: transparent;
    border: unset;
    border-bottom: 3px solid var(--main-blue);
    font-size: 22px;
}

select{
    background-color: transparent;
    border: unset;
    border-bottom: 3px solid var(--main-blue);
    font-size: 22px;
}

.chosen-single{
    font-family: var(--roboto-light) !important;
    font-size: 25px !important;
    height: unset !important;
}

.chosen-single span{
   margin: 10px 0px;
}

.chosen-search-input{
    font-size: 20px !important;
    font-family: var(--roboto-regular);
}

.chosen-results li{
    font-size: 22px;
    font-family: var(--roboto-light);
}

.search-choice{
    padding: 10px 15px !important;
    background-image: unset !important;
    background-color: var(--main-blue) !important;
}

.search-choice span{
    font-size: 18px !important;
    font-family: var(--roboto-medium);
    color: var(--main-white);
    margin-right: 10px;
}

.clients-create .fantasy,
.clients-create .parent,
.clients-create .name, 
.clients-create .lastname,
.clients-create .email,
.clients-create .phone,
.clients-create .cellphone,
.clients-create .address,
.clients-create .cuit,
.clients-create .agip,
.clients-create .afip
{
    width: 48%;
}

.tr-clients .t-phones{
    width: 10% !important;
}

.tr-clients .t-cat{
    width: 10% !important;
}

.tr-clients .t-act{
    width: 16% !important;
}

.tr-clients .t-cuit{
    width: 11%;
}

.tr-clients .t-email{
    width: 16%;
}

.tr-clients .t-parent{
    width: 11% ;
}

.tr-clients .t-fantasy,
.tr-clients .t-address{
    width: 12% !important;
}

.tr-budgets .t-act{
    width: 16%;
}

.tr-budgets .th-observations{
    width: 12%;
}

.tr-budgets .th-amount,
.tr-budgets .th-taxes,
.tr-budgets .th-status,
.tr-budgets .th-total{
    width: 7%;
}

.tr-budgets .th-discount{
    width: 4%;
}

.tr-budgets .th-created{
    width: 8%;
}

.tr-budgets .th-currency{
    width: 4%;
}

.tr-budgets .th-first{
    width: 4%;
}

.tr-budgets .th-clients,
.tr-budgets .th-services{
    width: 11%;
}

.tr-sales .th-first{
    width: 4%;
}

.tr-sales .th-status,
.tr-sales .th-created,
.tr-sales .th-debt,
.tr-sales .th-total{
    width: 9%;
}

.tr-sales .th-clients,
.tr-sales .th-actions{
    width: 10%;
}

.tr-sales .th-services{
    width: 14%;
}

.tr-sales .th-obvservations{
    width: 20%;
}


.filter-tickets{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.filter-tickets .select{
    margin-right: 30px;
    width: 400px;
}

.filter-tickets div span{
    font-size: 16px;
    font-family: var(--roboto-light);
    margin-right: 20px;
}

.tr-tickets .th-status,
.tr-tickets .th-user,
.tr-tickets .th-act{
    width: 8%;
}

.tr-tickets .th-date{
    width: 15%;
}

.tr-tickets .th-desc{
    width: 36%;
}

.tr-tickets .th-cat,
.tr-tickets .th-prior
{
    width: 5%;
}

.row-table td .button{
    padding: unset !important;
}

.row-table td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px !important;
}

.t-body-tickets tr td{
    font-size: 22px;
    padding: 15px 8px;
    white-space: nowrap; /* evita que el texto haga salto de línea */
    overflow: hidden; /* oculta el texto que se desborda */
    text-overflow: ellipsis;
}

.tickets-create .span-ticket{
    width: 50%;
    font-size: 25px;
    font-family: var(--roboto-light);
    margin-bottom: 20px;
}


.tickets-create .select{
    margin-bottom: 20px;
}

.budgets-create .select,
.sales-create .select{
    width: 48%;
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
}

.budgets-create .taxes,
.sales-create .taxes{
    width: 100% !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
}

.sales-create .s-facturador{
    width: 100% !important;
}

.budgets-create .dates,
.sales-create .dates{
    width: 48%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.budgets-create .textareas,
.sales-create .textareas{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.budgets-create .status{
    width: 100% ;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
}


.taxes-create .name,
.taxes-create .amount{
    width: 48%;
    margin-bottom: 20px;
}

.sales-create .advance{
    display: flex;
    flex-direction: column;
    width: 14%;
}

.budgets-create .currency{
    width: 20%;
}

.budgets-create .advance{
    display: flex;
    flex-direction: column;
    width: 20%;
}

.budgets-create .expenses{
    width: 20%;
}

.sales-create .expenses{
    display: flex;
    flex-direction: column;
    width: 14%;
}

.sales-create .currency{
    width: 9% !important;
}

.budgets-create .amount{
    display: flex;
    flex-direction: column;
    width: 20%;
}

.budgets-create .expenses{
    display: flex;
    flex-direction: column;
    width: 20%;
}

.sales-create .amount{
    width: 14%;
    display: flex;
    flex-direction: column;
}

.sales-create .cuotes{
    width: 28%;
    margin-bottom: 54px;
    display: flex;
    flex-direction: column;
}

.sales-cuote{
    background-color: #6c757d;
}

.Pagado{
    background-color: rgb(18, 143, 18) !important;
}

.budgets-create .dcto,
.sales-create .dcto{
    display: flex;
    flex-direction: column;
    width: 9%;
}

.budgets-create .dcto input,
.sales-create .dcto input{
    width: 70%;
}

.sales-create .dcto .tit-span,
.budgets-create .dcto .tit-span{
    font-size: 18px;
    color: var(--main-black) !important;
}

.budgets-create .dcto span,
.sales-create .dcto span{
    width: 30%;
    font-size: 30px;
    color: var(--main-blue);
}

.show-sale{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.show-sale a{
    width: 80%;
}

.receipt{
    margin-top: 40px;
    width: 80%;
    display: flex;
    flex-direction: column;
    background-color: var(--main-blue);
    padding: 20px 20px;
}

.afip-data{
    display: flex;
    flex-direction: row;
}

.receipt .client-data{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 20px;
    border: 2px solid var(--main-white);
    border-collapse: collapse;
}

.afip-data .block-left, 
.afip-data .block-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 20px 20px;
    border: 2px solid var(--main-white);
    border-collapse: collapse;
}

.afip-data .block-left .title,
.afip-data .block-right .title{
    text-align: center;
    font-family: var(--roboto-medium);
    font-size: 30px;
    margin-bottom: 40px;
    color: var(--main-white);
}

.afip-data .block-left .block-data .data,
.receipt .client-data .data{
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

.receipt .client-data .data{
    width: 50%;
    margin-bottom: 20px;
}

.afip-data .block-left .block-data .data span,
.afip-data .block-right .first .data span,
.afip-data .block-right .second .data span,
.show-dates .data span,
.receipt .client-data .data span{
    text-wrap: nowrap;
    font-family: var(--roboto-bold);
    font-size: 22px;
    vertical-align:middle;
    margin-right: 20px;
    color: var(--main-white);
}

.afip-data .block-left .block-data .data p,
.afip-data .block-right .first .data p,
.afip-data .block-right .second .data p,
.show-dates .data p,
.receipt .client-data .data p{
    text-wrap: wrap;
    font-family: var(--roboto-light);
    font-size: 20px;
    vertical-align: baseline;
    color: var(--main-white);
}

.afip-data .block-right .first{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.afip-data .block-right .second{
    display: flex;
    flex-direction: column;
}

.afip-data .block-right .first .data,
.afip-data .block-right .second .data{
    display: flex;
    flex-direction: row; 
    margin-right: 30px;
}

.receipt .show-dates{
    display: flex;
    flex-direction: row;
    border: 2px solid var(--main-white);
    border-collapse: collapse;
    margin: 20px 0px;
    justify-content: space-between;
    padding: 10px 20px;
}

.receipt .show-dates .data{
    display: flex;
    flex-direction: row;
}

.receipt .service-data{
    margin-top: 30px;
}

.receipt .service-data tbody tr{
    height: fit-content !important;
}

.receipt .service-data tbody tr td{ 
    padding: 15px 5px;
    vertical-align: sub;
    color: var(--main-white);
} 

.show-budget{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.show-budget .buttons{
    margin-top: 30px;
    width: 60%;
    justify-content: center;
}

.show-budget .buttons a,
.show-budget .buttons form{
    margin: 0px 20px;
}

.show-budget .budget{
    padding: 0px !important;
    width: 60%;
}

.show-budget .budget h2{
    background-color: var(--main-blue);
    width: 100%;
    margin: 20px 0px;
    font-size: 35px !important;
    border: 2px solid var(--light-gray);
}

.show-budget .budget .client-data{
    border: 2px solid var(--light-gray);
}

.show-budget .budget .client-data h2{
    font-size: 25px !important;
    padding: 10px 0px !important;
    margin: 0px !important;
}

.show-budget .budget .client-data p{
    font-size: 22px !important;
    color: var(--dark-gray);
    padding: 5px 40px
}

.show-budget .budget .client-data p span{
    padding-right: 10px;
}

.show-budget .budget .budget-dates{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 2px solid var(--light-gray);
    margin: 10px 0px;
    padding: 5px 40px;
}

.show-budget .budget .budget-dates p{
   color: var(--dark-gray);
   font-size: 27px;
   font-family: var(--roboto-light) !important;
}

.budget .tables{
    width: 100% !important;
    border: 2px solid var(--light-gray);
}

.t-left{
    text-align: center;
}

.budget-show-row td{
    padding: 20px 10px;
}


.row-total{
    background-color: var(--main-blue) !important;
    color: var(--main-white) !important; 
    font-size: 20px;
    font-weight: 700;
    text-align: end !important;
}

.tr-taxes .t-act{
    width: 15%;
}

.tr-taxes .th-amount{
    width: 15%;
}

.tr-taxes .th-name{
    width: 25%;
}

.form-span{
    font-family: var(--montserrat);
    margin-bottom: 5px;
}

.send-button{
    margin-top: 30px;
    width: 100%;
    height: 60px;
    background-color: var(--main-blue) !important;
    color: var(--main-white);
    border: unset !important;
    border-radius: 15px;
    font-size: 22px;
    cursor: pointer;
}

.send-button:hover{
    background-color: var(--main-white) !important;
    color: var(--main-blue);
    border: 3px solid  var(--main-blue)!important;
}

.moneda{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    background-color: var(--main-blue);
    border-radius: 20px;
    padding: 20px 30px;
    color: var(--main-white) !important;
}

.moneda .transaccion{
    margin: 39px 0px;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between !important;
}

.moneda .transaccion .compra,
.moneda .transaccion .venta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.user-show{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-card{
    width: 80%;
    background-color: var(--main-blue);
    display: flex;
    flex-direction: row;
    margin: 90px 0px;
    align-items: center;
    padding: 60px 40px;
    border-radius: 60px;
    box-shadow: 3px 9px 20px #000000a1;
    
}

.user-card .user-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.user-card .user-img i{
    font-size: 200px;
    color: var(--main-white);
}

.user-card .user-img h3{
    font-size: 50px;
    font-family: var(--roboto-light);
}

.user-data{
    display: flex;
    flex-direction: column;
    width: 75%;
}

.user-data-row{
    display: flex;
    flex-direction: row;
}

.user-data-row span{
    font-size: 30px;
    font-family: var(--roboto-medium);
    color: var(--main-white);
    margin-right: 20px;
    text-wrap: nowrap;
}

.user-data-row p{
    font-size: 30px;
    font-family: var(--roboto-thin);
    color: var(--main-white);
}

.boards{
    display: flex;
    justify-content: center;
}

.show-boards{
    width: 100%;
    margin-bottom: 120px;
    margin-top: 60px;
}

.boards-index{
    width: 100%;
    padding: 0px 120px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.boards-card{
    min-width: 320px;
    max-width: 320px;
    border-radius: 20px;
    height: 120px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
    margin: 10px 30px;
    transition: all .4s ease-in-out;
    box-shadow: 4px 3px 7px #000000cd;
    margin-bottom: 40px;
}

.boards-card:hover{
    background-color: var(--gray-blue);
}

.boards-card span{
    color: white;
    font-family: var(--roboto-medium);
    font-size: 22px;
    text-align: center;
    text-wrap: wrap;
}

.this-board{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.this-board .board-title{
    width: 100%;
    padding: 10px 40px;
    filter: brightness(90%);
}

.this-board .board-title span{
    color: var(--main-white);
    font-size: 45px;
    font-family: var(--roboto-medium);
}

.this-board .board-title a{
    color: var(--main-white);
    font-size: 35px;
    font-family: var(--roboto-medium);
}

.this-board .board-body{
    width: 100%;
    height: 100vh;
    padding: 20px 20px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden; 
}

.this-board .board-body .board-column{
    min-width: 350px !important;
    max-width: 350px; /* opcional, para limitar el tamaño */
    height: fit-content; 
    max-height: 100%;
    padding: 20px;
    background-color: var(--gray-blue);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin-right: 25px;
}

.board-column .add-card{
    width: 100%;
}

.board-column .add-card button{
    width: 100%;
    padding: 12px 0px;
    font-size: 18px;
    font-family: var(--roboto-medium);
    color: var(--main-white);
    margin-top:40px;
    border: unset;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--gray-blue);
    transition: all .4s ease-in-out;
}

.board-column .add-card button:hover{
    background-color: #3b3535 ;
}

.column-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

.column-header span,
.column-header a{
    color: var(--main-white);
    font-family: var(--roboto-light);
    font-size: 20px;
}

.column-header .dots{
    cursor: pointer;
    background-color: transparent;
    color: var(--main-white);
    box-shadow: none;
}

.column-header .column-menu {
    display: none;
    position: absolute;
    top: 100%;   /* debajo del header */
    right: -100px;    /* alineado a la derecha */
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 5px;
    z-index: 10;
    background-color: var(--main-blue);
}

.column-header .column-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.column-header .column-menu li {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--main-white);
    font-family: var(--roboto-light);
}

.column-header .column-menu li:hover {
    background: var(--dark-blue);
}

.column-header a{
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.column-header a:hover{
    font-weight: 800;
}

.column-body{
    overflow-y: auto;
    flex-grow: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 10px; 
    box-sizing: border-box; 
}

.column-body::-webkit-scrollbar {
    width: 8px;
}

.column-body::-webkit-scrollbar-track {
    background-color: #4e4d4d !important; 
    border-radius: 10px;
}

.column-body::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 10px;
}

.board-card {
    background-color: var(--main-white);
    padding: 20px 10px;
    border-radius: 10px;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap; /* evita que los elementos se vayan a otra fila */
    overflow: hidden; /* opcional, evita desbordes raros */
}

.board-card .card-title {
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 🔑 permite que el texto se baje si es necesario */
    word-break: break-word; /* 🔑 para cortar palabras largas */
}

.board-card span {
    font-family: var(--roboto-bold);
    color: var(--main-blue);
    padding: 0px 10px;
    word-break: break-word; /* 🔑 importante para cortar el texto largo */
    white-space: normal; /* 🔑 permite múltiples líneas */
    flex: 1; /* toma el espacio restante */
}

.board-card i{
    color: #276aa1aa;
    width: 10%;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.board-card i:hover{
    color: var(--main-blue);
}

/* reports */

.budget-period{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.budget-period h3{
    font-size: 40px;
    color: var(--dark-blue);
}

.budget-period-data{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.budget-period-data .data{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.budget-period-data .data span{
    font-size: 40px;
}


/* media queries */

    @media screen and (max-width: 1700px){
        .container {
            padding: 0px 80px !important;
        }

        .contact-data p{
            font-size: 20px;
        }
    }

   
    @media screen and (max-width: 1500px){
        .services .data .service {
            width: 400px !important;
        }

        .service h3 {
            font-size: 27px;
        }

        .contact-data{
            flex-direction: column;

        }

        .contact-data div{
            width: 100%;
        }

        .index-services .services .data .service div h3{
            font-size: 28px;
        }

        .index-services .services .data .service {
            width: 80% !important;
            margin: 0px !important;
        }


        .carousel-item img {
            max-height: 140px !important;
        }

        .index-services .services .data .service{
            margin-bottom: 30px  !important;
            align-items: flex-start;
        }
    }

    @media screen and (max-width: 1400px){
        .data-header div i, .data-header div p {
            font-size: 22px;
        }

        nav div{
            padding: 0px 30px;
        }

        .reference p {
            font-size: 23px !important;
        }
    
        .reference span {
            font-size: 60px;
            
        }

        .reference i{
            font-size: 70px;
        }

        .nav-link{
            font-size: 25px !important;
        }

        .services .data .service{
            width: 360px !important;
        }
    }

    @media screen and (max-width: 1300px){
        .service h3{
            font-size: 26px;
        }

        .form-group:nth-child(2) {
            grid-column: 1/7;
        }

        .form-group:nth-child(3) {
            grid-column: 1/7;
            grid-row: 2 !important;
        }

        .form-group:nth-child(4), .form-group:nth-child(5), .form-group:nth-child(6) {
            grid-row: 3 !important;
        }

        .form-group:nth-child(7) {
            grid-row: 4 !important;
        }

        .form-group:nth-child(8) {
            grid-row: 5 !important;
        }

        .boton-form{
            grid-row: 6 !important;
        }

        .contact-data div:nth-child(1){
            margin-top: 0px;
        }

        .box{
            margin-top: 10px !important;
        }

        .about-us{
            padding-top: 20px !important;
        }

        .about-us p{
            font-size: 23px;
        }

        .about-us h2{
            font-size: 44px !important;
        }

        .our-references{
            padding-top: 10px !important;
        }

        .contact-data{
            justify-content: unset !important;
        }

        .index-services .services .data{
            align-items: center !important;
        }

        .index-services .services .data .service {
            width: 90% !important;
        }

        .index-services .services .data .service img{
            height: 250px !important;
        }

        .index-services .services .data .service div{
            height: 250px !important;
        }

        .index-services .services{
            padding-top: 20px !important;
        }

        .carousel-item img {
            max-height: 130px !important;
        }
    }

    @media screen and (max-width: 1200px){
        .form-group{
            margin-bottom: 20px;
        }

        .form-group input{
            height: 50px;
        }

        .nav-link{
            font-size: 22px;
        }

        .budget, .contact-data{
            padding: 0px 30px;            
        }

        #mapa{
            height: 350px !important;
        }

        .contact-data{
            padding-right: 0px !important;
        }

        .budget{
            padding-left: 0px !important;
        }

        .reference span{
            margin-left: 10px !important;
            font-size: 55px !important;
        }

        .reference i{
            font-size: 60px !important;
        }

        .services .data .service{
            width: 300px !important;
        }

        .carousel-item img {
            max-height: 125px !important;
        }
    }

    @media screen and (max-width: 1100px){
        .data-header div i, .data-header div p{
            font-size: 18px;
        }

        .nav-link{
            font-size: 20px;
        }

        nav{
            height: 60px;
        }

        nav .nav-social a{
            font-size: 25px;
        }

        .services .data .service{
            width: 280px !important;
            margin: 10px 10px !important;
        }

        .service h3{
            font-size: 22px;
        }

        .nav-header .data-header div, .data-header-mobile div{
            padding: 0px 15px !important;
        }

        .about-us p{
            font-size: 24px !important;
            padding: 0px !important;
        }

        .reference i {
            font-size: 60px;
        }

        .reference span{
            font-size: 50px;
        }

        .index-services .services .data .service{
            margin-bottom: 40px !important;
        }

        .index-services .services .data .service img{
            height: 230px !important;
        }

        .index-services .services .data .service div{
            height: 230px !important;
        }
    }

    @media screen and (max-width: 1024px){
        .container{
            padding: 0px 50px !important;
        }

        .nav-link{
            font-size: 24px !important;
        }

        .index-services .services .data .service div p{
            font-size: 16px !important;
        }

        .index-services .services .data, .index-services .services .data .service{
            width: 100% !important;
        }

        .message-alert h2{
             font-size: 18px !important;
        }
    }

    @media screen and (max-width: 920px){
        .nav-header .data-header{
            flex-direction: column;
            align-items: self-end;
            height: 100%;
            justify-content: space-evenly;
        }

        .data-header div i, .data-header div p{
            font-size: 22px;
        }

        .contact-us{
            flex-direction: column;
        }

        .budget, .contact-data{
            width: 100%;
        }

        .contact-data{
            margin-top: 40px;
        }

        #nav-pc{
            display: none;
        }

        .services .data .service{
            width: 250px !important;
        }

        .contact-data{
            flex-direction: row !important;
        }

        .contact-data div {
            width: 50%;
        }

        .our-references{
            flex-wrap: wrap;
        }

        .reference{
            width: 50% !important;
            margin-bottom: 30px !important;
        }

        .index-services .services .data .service img{
            height: 200px !important;
            width: 300px !important;
        }

        .index-services .services .data .service div{
            height: 200px !important;
        }

        .index-services .services .data .service div h3{
            font-size: 25px !important;
            margin-bottom: 14px !important;
        }

        .services h2{
            font-size: 35px !important;
        }

        .carousel-item img{
            max-height: 110px !important;
        }
    }

    @media screen and (max-width: 800px){
        .nav-link{
            font-size: 17px;
        }

        .nav-header{
            height: 150px;
        }

        #contact-us-div{
            padding-top: 50px;
        }

        .service h3{
            font-size: 20px;
        }

        .container{
            padding: 0px 70px;
        }

        .services .data .service{
            width: 200px !important;
        }

        .services{
            padding-top: 30px !important;
            margin-top: 0px !important;
        }

        .contact-data div{
            font-size: 20px !important;
        }

        .index-services .services .data .service div h3{
            font-size: 22px !important;
            margin-bottom: 10px !important;
        }

        .index-services .services .data .service img{
            width: 250px !important;
        }

        .index-services .services .data .service div{
            margin-left: 20px !important;
        }
        
        .message-alert h2{
            font-size: 16px !important;
        }
    }

    @media screen and (max-width: 800px){
        .contact-data div{
            font-size: 24px;
        }

        .contact-us{
            padding-bottom: 0px !important;
        }
    }

    @media screen and (max-width: 700px){
        .see-more-services {
            width: 70% !important;
        }

        .contact-data{
            flex-direction: column !important;
        }

        .contact-data div{
            width: 100%;
        }

        .skill p{
            font-size: 20px !important;
        }

        .skill i{
            font-size: 55px !important;
        }

        .index-services .services .data .service img {
            width: 220px !important;
            height: 180px !important;
        }

        .services .data .service{
            width: 180px !important;
        }

        .references h2{
            font-size: 40px !important;
        }

    }

    @media screen and (max-width: 600px){
        .data-header div i, .data-header div p{
            font-size: 20px;
        }

        .nav-header img{
            padding-left: 0px !important;
            padding-right: 15px;
        }

        .container{
            padding: 0px 40px;
        }

        .nav-header{
            flex-direction: column;
        }

        .data-header{
            display: none !important;
        }

        .data-header-mobile{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .email-estudio i,
        .address-estudio i, 
        .phone-estudio i,
        .email-estudio p,
        .address-estudio p, 
        .phone-estudio p{
            font-size: 20px !important;
        }

        .email-estudio{
            width: 100%;
            justify-content: center;
        }
        
        .address-estudio, 
        .phone-estudio{
            width: 50%;
            padding: 0px !important;
            justify-content: center;
        }

        .services .data .service{
            width: 145px !important;
            height: 180px !important;
        }

        .service h3{
            font-size: 16px !important;
        }

        .services h2{
            font-size: 40px !important;
        }


        .form-group:nth-child(3){
            grid-row: 3 !important;
        }

        .form-group:nth-child(4){
            grid-row: 4 !important;
            grid-column: 1/7 !important;
        }

        .form-group:nth-child(5) {
            grid-row: 5 !important;
            grid-column: 1/7 !important;
        }

        .form-group:nth-child(6) {
            grid-row: 6 !important;
            grid-column: 1/7 !important;
        }

        .form-group:nth-child(7) {
            grid-row: 7 !important;
        }
        .form-group:nth-child(8) {
            grid-row: 8 !important;
        }

        .boton-form{
            grid-row: 9 !important;
        }

        .index-services .services h2{
            font-size: 30px !important;
        }

        .skills{
            flex-wrap: wrap;
        }

        .skill{
            width: 50% !important;
        }

        .budget, .contact-data{
            padding: 0px !important;
        }

        .carousel-item img{
            max-height: 90px !important;
        }

        .reference p{
            text-align: center;
        }

        .nav-header {
            height: 138px !important;
        }

        .nav-header img {
        
            height: 120px !important;
        }
    }

    @media screen and (max-width: 650px){
        .index-services .services .data .service{
            flex-direction: column;
            margin-bottom: 10px !important;
        }

        .index-services .services .data .service img{
            width: 300px !important;
            height: 200px !important;
            margin-bottom: 25px !important;
        }

        .index-services .services .data .service div h3{
            text-align: center !important;
        }

        .index-services .services .data .service div p{
            text-align: center !important;
        }

        .index-services .services .data .service div{
            margin-left: 0px !important;
        }

        .index-services .services .data, .index-services .services .data .service{
            width: unset !important;
        }

        .message-alert h2{
            font-size: 14px !important;
        }


        .index-services .services .data .service{
            margin-bottom: 20px !important;
        }
    }


    @media screen and (max-width: 500px){
        .data-header div i, .data-header div p{
            font-size: 17px;
        }

        .services{
            padding-top: 30px !important;
        }

        .services .data .service {
            height: 200px !important;
            width: 170px !important;
        }

        .nav-header img{
            padding-left: 0px !important;
            padding-right: 15px;
        }

        .btn-wpp, .btn-volver-arriba a {
            right: 12px;
        }

        .form-group{
            grid-column: 1/7 !important;
        }

        .form-group:nth-child(3){
            grid-row: 3;
        }

        .form-group:nth-child(4){
            grid-row: 4;
        }

        .form-group:nth-child(5) {
            grid-row: 5;
        }

        .form-group:nth-child(6) {
            grid-row: 6;
        }

        .form-group:nth-child(7) {
            grid-row: 7;
        }

        .boton-form{
            grid-row: 8;
        }

        .budget, .contact-data{
            padding: 0px 55px;
        }

        .budget h2{
            font-size: 22px;
        }

        .contact-us{
            padding-top: 5px;
        }

        .contact-data div{
            font-size: 20px;
            justify-content: center;
        }

        .container{
            padding: 0px 25px;
        }

        .contact-data{
            padding: 0px 20px;
        }

        .budget{
            padding: 0px 40px !important;
        }

        .nav-header img{
            padding: 0px !important;
        }

        .about-us p{
            font-size: 20px !important;
        }

        .about-us h2{
            font-size: 34px !important;
        }

        .skill p{
            margin-top: 10px !important;
            margin-bottom: 30px !important;
            font-size: 16px !important;
        }

        .about-us p{
            margin-bottom: 30px !important;
        }

        .services .data .service{
            width: 170px !important;
        }

        nav .nav-social{
            padding-right: 0px !important;
        }

        .container{
            padding: 0px 20px !important;
        }

        nav .nav-links{
            padding-left: 0px !important;
        }

        .reference div{
            margin-bottom: 10px !important;
        }

        .references h2{
            font-size: 35px !important;
        }

        .service h3{
            font-size: 20px !important;
        }

        .carousel-item img{
            max-height: 75px !important;
        }

        .references h2{
            font-size: 30px !important;
        }
        
        .nav-header img {
            padding-top: 20px !important;
            height: 120px !important;
        }

        .footer-logo img {
            width: 135px !important;
        }

        footer{
            height: 140px !important;
        }

        .service i{
            font-size: 55px !important;
        }

        .services .data .service{
            height: 140px !important;
        }

        .service i{
            margin-bottom: 0px !important;
        }

    }

    @media screen and (max-width: 440px){        
        .email-estudio i,
        .address-estudio i, 
        .phone-estudio i,
        .email-estudio p,
        .address-estudio p, 
        .phone-estudio p{
            font-size: 17px !important;
        }

        .see-more-services {
            width: 75% !important;
        }

        .reference i{
            font-size: 45px !important;
        }

        .reference span{
            font-size: 40px !important;
        }

        .carousel-item img{
            max-height: 65px !important;
        }

        .services .data .service{
            width: 150px !important;
        }

        .about-us p{
            font-size: 18px !important;
        }

        .about-us-content{
            padding-top: 1px !important;
        }

        .skill p{
            font-size: 16px !important;
        }
    }

    @media screen and (max-width: 400px){
        .reference i{
            font-size: 40px !important;
        }

        .reference span{
            font-size: 30px !important;
        }

        .reference p{
            font-size: 18px !important;        
        }

        .service h3{
            font-size: 18px !important;
        }
    }