.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.container .row {
   margin: auto;
   margin-top: 15px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.col{
    border-radius: 10px;
    background: linear-gradient(45deg, #f7f0e207, #F7F0E2);
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 15px 15px 0 #a6082556;
    max-width: 50%;
    min-width: 48%;
}

.col-manodeobra{
       border-radius: 10px;
    background: linear-gradient(45deg, #f7f0e207, #F7F0E2);
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 15px 15px 0 #a6082556;
    max-width: 20%;
    font-size: 25px;
    display: inline-grid;
}

.col-transacciones{
       border-radius: 10px;
    background: linear-gradient(45deg, #f7f0e207, #F7F0E2);
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 15px 15px 0 #a6082556;
    max-width: 30%;
}


.chart-container{
    min-width: 100%;
    min-height: 40vh;
}

@media (max-width: 1420px) {
    .col{
    border-radius: 10px;
    background: linear-gradient(45deg, #f7f0e248, #F7F0E2);
    padding-top: 10px;
    max-width: 100%;
    min-width: 100%;
    }

}


.btn {
    background-color: #29b990;
    border: none;
    border-radius: 10px;
    padding: 0;
    font-size: 1.1rem;
    margin-top: 1%;
    display: flex;
    /* Changed to flex display */
    align-items: center;
    min-width: 320px;
    max-width: 320px;
    text-align: center;
}

.btn:hover {
    background-color: #17795E;
    border: none;
    border-radius: 10px;
    padding: 0;
    font-size: 1.1rem;
    margin-top: 1%;
    align-items: center;
}

.btn .button__icon {
    margin-right: 0;
    margin-left: auto;
    /* Push to right side */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #17795E;
    border-radius: 6px;
    flex: 0 0 auto;
    transition: transform .2s ease, background-color .2s ease, left .2s ease;
}

.btn .button__text {
    color: #1a0000;
    white-space: nowrap;
    transition: color .2s ease;
    font-weight: bold;
    padding-left: 12px;
    display: flex;
    align-items: center;
}

.buttons {
        gap: 10px;
    display: flex
;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

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

.btn:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
}

/* Eliminados estilos anteriores que deformaban el layout:
   .button, .button__icon, .button__text { transition: all 0.6s; ... }
   .button .button__icon { width:20%; height:40px; transform: ... }
   .button:hover .button__text { color: transparent; }
   .button:hover .button__icon { width: 228px; transform: ... }
   .button:active { border: 20px solid ... }
*/