/* DASHBOARD */
.dashboard-container {
    color: var(--text-color) !important;
}


/*CARRUSEL*/
.dashboard-carrusel .slick-prev, .dashboard-carrusel .slick-next, .dashboard-carrusel-long .slick-next, .dashboard-carrusel-long .slick-prev {
    margin-top: 20px;
    width: 30px;
    height: 30px;
}

/*.dashboard-carrusel .slick-prev {
    left: 25px !important;
}
*/
.dashboard-carrusel .slick-next {
    right: -17px !important;
}

    .dashboard-carrusel .slick-prev:before, .dashboard-carrusel .slick-next:before {
        background-size: 17px 17px;
        width: 17px;
        height: 17px;
    }

#dash-long .slick-prev::before, #dash-long .slick-next::before {
    background-size: 30px 30px !important;
    width: 30px !important;
    height: 30px !important;
}

.dashboard-head {
    height: 13em;
    margin: 0 0 0 0;
}

.dashboard-animation {
    /* border: 1px sol3id green; */
    background-color: var(--dash-animation-container-background);
    height: 100%;
    padding: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    z-index: -1;
}

/*LISTA*/
.Anual .icon-cont {
    /* b0cc78 */
    background: var(--dash-list-group-ProyeAnual-icon-background);
}

.Ejercido .icon-cont {
    /* 67c7bc */
    background: var(--dash-list-group-ProyEjercido-icon-background);
}

.Retenido .icon-cont {
    /* f9a24b */
    background: var(--dash-list-group-ProyRetenido-icon-background);
}

.PorRetener .icon-cont {
    /* ebc44f */
    background: var(--dash-list-group-ProyPorRetener-icon-background);
}

.PorEjercer .icon-cont {
    /* #71B383 */
    background: var(--dash-list-group-ProyePorEjercer-icon-background);
}

/*WAVES*/

.inner-header {
    height: 40%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* background: red; */
    position: absolute;
}

.flex { /*Flexbox for containers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.waves-container {
    height: 100%;
}

.waves {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 40px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    /* margin-bottom:-7px; fix for safari gap */
    /* min-height:100px;
  max-height:150px; */
}

.content {
    position: relative;
    height: 100%;
    text-align: center;
    background-color: white;
}

/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }

    100% {
        transform: translate3d(85px,0,0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 100%;
        min-height: 40px;
    }

    .body {
        overflow-y: scroll !important;
    }
}


.dashboard-carrusel {
    display: flex;
    position: flex;
    /*    top: 4rem;
*/
    z-index: 2;
    height: 9rem;
}


.dash-card {
    position: relative;
    border-radius: var(--card-border-radius);
    /* border: 1px solid purple; */
    background: var(--dash-card-background);
    padding: .5rem;
    height: 100%;
    transition: 0.3;
    z-index: 1;
    /* transition: background 4s ease-out; */
    /* box-shadow: 5px 5px .6rem #8692a7b2,
  -5px -5px .6rem #feffffb0; */
    /* height: 5rem; */
}

    .dash-card::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: var(--card-border-radius);
        z-index: -1;
        transition: opacity 0.5s linear;
        opacity: 0;
    }

    .dash-card:hover::before {
        opacity: 1;
    }

    .dash-card:hover .dash-carrusel-item-icon {
        transition: box-shadow 0.7s linear;
        box-shadow: none;
    }

/*COLORES DE ICONOS PERSONALIZADOS, CARDS DE CARRUSEL*/
.TotalColaborador .dash-carrusel-item-icon {
    /*eb5d6f*/
    background: var(--dash-carrusel-card-TColab-icon-background);
}

.TotalColaborador::before,
.statistical-table.dashboard.ETotalColaborador .mud-table-container {
    background: var(--dash-carrusel-card-TColab-background-hover);
    /* background: linear-gradient(360deg, #ecf5ffe8 0%, #ecf5ffe8 20%, #F8C5CB 40%,  #F6B9C1 60%, #F5ADB7 80%, #F3A2AD 100%); */
}

.TotalMujer .dash-carrusel-item-icon {
    /* 943385 */
    background: var(--dash-carrusel-card-TMujer-icon-background);
}

.TotalMujer::before,
.statistical-table.dashboard.ETotalMujer .mud-table-container {
    background: var(--dash-carrusel-card-TMujer-background-hover);
}

.TotalNoBinario .dash-carrusel-item-icon {
    /* 943385 */
    background: var(--dash-carrusel-card-TNoBinario-icon-background);
}

.TotalNoBinario::before,
.statistical-table.dashboard.ETotalNoBinario .mud-table-container {
    background: var(--dash-carrusel-card-TNoBinario-background-hover);
}


.TotalHombre .dash-carrusel-item-icon {
    /* 4482e9 */
    background: var(--dash-carrusel-card-THombre-icon-background);
}

.TotalHombre::before,
.statistical-table.dashboard.ETotalHombre .mud-table-container {
    background: var(--dash-carrusel-card-THombre-background-hover);
}

.antiguedad .dash-carrusel-item-icon {
    /* #dcac45 */
    background: var(--dash-carrusel-card-Antiguedad-icon-background);
}

.antiguedad::before,
.statistical-table.dashboard.EAntiguedad .mud-table-container {
    background: var(--dash-carrusel-card-Antiguedad-background-hover);
}


.DiaTrabajo .dash-carrusel-item-icon {
    /* 1fc3d4 */
    background: var(--dash-carrusel-card-DiaTrabajo-icon-background);
}

.DiaTrabajo::before,
.statistical-table.dashboard.EDiaTrabajado .mud-table-container {
    background: var(--dash-carrusel-card-DiaTrabajo-background-hover);
}


.DiaAusente .dash-carrusel-item-icon {
    /* f58a55 */
    background: var(--dash-carrusel-card-DiaAusente-icon-background);
}

.DiaAusente::before,
.statistical-table.dashboard.EDiaAusentismo .mud-table-container {
    background: var(--dash-carrusel-card-DiaAusente-background-hover);
}


.AltaAnual .dash-carrusel-item-icon {
    /* 00db9b */
    background: var(--dash-carrusel-card-AltaAnual-icon-background);
}

.AltaAnual::before,
.statistical-table.dashboard.EAltaAnual .mud-table-container {
    background: var(--dash-carrusel-card-AltaAnual-background-hover);
}


.BajaAnual .dash-carrusel-item-icon {
    /* e8523e */
    background: var(--dash-carrusel-card-BajaAnual-icon-background);
}

.BajaAnual::before,
.statistical-table.dashboard.EBajaAnual .mud-table-container {
    background: var(--dash-carrusel-card-BajaAnual-background-hover);
}


.Incapacidad .dash-carrusel-item-icon {
    /* a487d5 */
    background: var(--dash-carrusel-card-Incapacidad-icon-background);
}

.Incapacidad::before,
.statistical-table.dashboard.EIncapacidad .mud-table-container {
    background: var(--dash-carrusel-card-Incapacidad-background-hover);
}


.Indemnizacion .dash-carrusel-item-icon {
    /* 3f7d9f */
    background: var(--dash-carrusel-card-Indemnizacion-icon-background);
}

.Indemnizacion::before,
.statistical-table.dashboard.EIndemnizacion .mud-table-container {
    background: var(--dash-carrusel-card-Indemnizacion-background-hover);
}

.CFDITimbrado .dash-carrusel-item-icon {
    /* #00BFA5 */
    background: linear-gradient(145deg, #00ac95, #00ccb1);
}

.CFDITimbrado::before,
.statistical-table.dashboard.ECfdiTimbrado .mud-table-container {
    background: var(--dash-carrusel-card-Indemnizacion-background-hover);
}


.IndiceRotacion .dash-carrusel-item-icon {
    /* #880E4F */
    background: var(--dash-carrusel-card-IndiceRotacion-icon-background);
}

.IndiceRotacion::before,
.statistical-table.dashboard.EIndiceRotacion .mud-table-container {
    background: var(--dash-carrusel-card-IndiceRotacion-background-hover);
}


.Cumpleanios .dash-carrusel-item-icon {
    /* #880E4F */
    background: var(--dash-carrusel-card-Cumpleanios-icon-background);
}

.Cumpleanios::before,
.statistical-table.dashboard.ECumpleanios .mud-table-container {
    background: var(--dash-carrusel-card-Cumpleanios-background-hover);
}

.Aniversario .dash-carrusel-item-icon {
    /* #880E4F */
    background: var(--dash-carrusel-card-Aniversario-icon-background);
}

.Aniversario::before,
.statistical-table.dashboard.EAniversario .mud-table-container {
    background: var(--dash-carrusel-card-Aniversario-background-hover);
}


.dash-carrusel {
    padding-top: 16px;
    /* border: 1px solid red; */
    width: 100%;
    height: 145px;
    /* border: 1px solid blue; */
}

.dash-carrusel-link {
    margin-bottom: 1rem;
    font-family: var(--font-Poppins);
    font-size: .6rem;
    color: var(--text-color-lght);
    position: relative;
}

    .dash-carrusel-link:after {
        position: absolute;
        z-index: -1;
    }

.dash-card .dash-carrusel-link:nth-child(1) {
    margin-left: .2rem;
}

.dash-card .dash-carrusel-link:nth-child(2) {
    margin-right: .2rem;
}


.dash-card .dash-carrusel-link:after {
    content: "";
    width: 3px;
    height: 2px;
    right: 0;
    bottom: 0;
}

.dash-card .dash-carrusel-link:nth-child(2):focus:after,
.dash-card .dash-carrusel-link:nth-child(2):hover:after {
    width: 100%;
    height: 2px;
}

.dash-card .dash-carrusel-link:nth-child(1):after {
    content: "";
    width: 3px;
    height: 2px;
    left: 0;
    bottom: 0;
}

.dash-card .dash-carrusel-link:nth-child(1):focus:after,
.dash-card .dash-carrusel-link:nth-child(1):hover:after {
    width: 100%;
    height: 2px;
}



.dash-card .dash-carrusel-link {
    display: inline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color 1s ease;
}

    .dash-card .dash-carrusel-link:focus,
    .dash-card .dash-carrusel-link:hover {
        outline: 0;
        color: var(--title-section-color);
        -webkit-transition: color 1s ease;
        -moz-transition: color 1s ease;
        -ms-transition: color 1s ease;
        -o-transition: color 1s ease;
        transition: color 1s ease;
        cursor: pointer;
    }

    .dash-card .dash-carrusel-link:after,
    .dash-card .dash-carrusel-link:before {
        -webkit-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }

    .dash-card .dash-carrusel-link:focus:after,
    .dash-card .dash-carrusel-link:focus:before,
    .dash-card .dash-carrusel-link:hover:after,
    .dash-card .dash-carrusel-link:hover:before {
        outline: 0;
        background-color: var(--title-section-color);
        -webkit-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }


/*ICONOS**/
.list-item.icon .icon-cont, .dash-carrusel-item-icon {
    display: flex !important;
    position: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--dash-card-icon-border-radius);
}

.dashboard-container .list-body .list-item.icon .icon-cont, .dash-carrusel-item-icon {
    /* border: 1px solid grey; */
    width: 25px;
    height: 25px;
    box-shadow: var(--dash-card-icon-shadow);
}

    /*.statistical-container .dash-carrusel-item-icon {
    width: 50px;
    height: 50px;
}
*/ .dashboard-container .list-body .list-item.icon .icon-cont i, .dash-carrusel-item-icon i {
        font-size: 1rem;
        color: var(--white-color);
    }

/*.statistical-container .dash-carrusel-item-icon i {
    font-size: 2.3rem;
}
*/



.dash-carrusel-item-numero {
    /* padding-top: .5em; */
    font-size: 2.2em;
}

.fullwidth-right .dashboard-container .dash-carrusel-item-numero {
    font-size: 2.3em;
}


/*.statistical-container .dash-carrusel-item-numero {
    font-size: 3.9em;
}
*/ /* @media (max-width: 800px) {

  .dash-carrusel-item-numero{
  font-size: 11px;
  }

} */
.dash-carrusel .dash-card {
    width: 80%;
    height: 115px;
    padding: 10px;
    margin: auto;
}

.statistical-container .dash-carrusel .dash-card {
    width: 40%
}
/*.statistical-container .dash-carrusel .dash-card.total {
    width: 70%;
    height: 130px;
    padding: 10px;
    margin: auto;
    box-shadow: var(--table-shadow)
}
*/
.dashboard-container .dash-carrusel .dash-card.antiguedad .dash-carrusel-item-numero span {
    font-size: 14px;
}

.dash-carrusel-item-icon {
    margin-bottom: 5px;
}



/* enfermedad general 
maternidad
riesgo de trabajo */

.dash-carrusel-item-titulo {
    font-size: 12px;
    font-family: var(--font-Poppins);
}

/*.statistical-container .dash-carrusel-item-titulo {
    font-size: 1.3rem;
}
*/

/*FONT PARA NÚMEROS*/
.dash-carrusel-item-numero, .list-item.cifra, .list-item.porcentaje, .box-cifra {
    font-family: var(--font-Rubik-Sans);
}

/*FONT TITULOS Y CONTENIDO*/
.dashboard-container .list-group-item.titulo,
.dashboard-container .card-box .box-titulo-principal,
.dashboard-container .box-titulo-principal {
    color: var(--title-color);
    font-family: var(--font-Poppins);
}

/* .dash-row{
  display: grid; 
 
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  
  gap: 0px;
  height: 100%;

  border: 1px solid red;
} */

/*DASHBOARD LISTA*/
.dashboard-container .list-body,
.dashboard-container .list-group-item {
    position: relative;
    display: block;
    font-size: 12px;
    padding: .3rem 1rem;
    text-decoration: none;
    background: none;
    border: none;
}

.dashboard-container .list-body {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 0.6fr 1.7fr 0.7fr;
    gap: 0px;
    height: 100%;
}


.dashboard-container .list-group-item.titulo {
    padding-left: .4rem;
}

.dashboard-container .box-titulo-principal {
    padding: .3rem 1rem;
}


.list-body:hover {
    /* position: absolute; */
    /* background: red; */
    background: var(--dash-card-background);
    box-shadow: var(--dash-list-group-shadow-hover);
    margin-bottom: .5rem;
    border-radius: 1rem;
    /* top: 0;
  right: 0;
  bottom: 0;
  left: 0; */
    transform: scale(1.1);
}

    .list-body:hover .list-item.icon .icon-cont {
        width: 20px;
        height: 20px;
        margin-left: .5rem;
    }

        .list-body:hover .list-item.icon .icon-cont i {
            font-size: .8rem;
        }

/*CARD BOX*/
.card-box, .second-card-box {
    font-size: 12px;
    z-index: 3;
}

    .card-box .box-cifra, .second-card-box .box-cifra {
        font-size: 1.4rem;
    }

    .card-box .row .dash-card.fondoAhorro .box-cifra {
        font-size: .77rem;
    }

    .card-box .row .dash-card {
        position: relative;
        z-index: 1;
    }
/* .card-box .row .dash-card::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: -1;
  width: auto;
  height: auto;
} */

.svg-card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: var(--card-border-radius);
}

    .svg-card svg g g {
        transition: 0.5s linear;
    }



.range .svg-card svg g > g:nth-child(1) {
    animation: move-bubble-1-1 50s cubic-bezier(1,.5,.5,1) infinite;
}

.range .svg-card svg g > g:nth-child(2) {
    animation: move-statistic-bubble-2 50s ease-in-out infinite;
}

@keyframes move-statistic-bubble-2 {
    from {
        transform: translate3d(160px, 40px,0);
    }

    50% {
        transform: translate3d(160px, 60px,0);
    }

    to {
        transform: translate3d(160px, 40px,0);
    }
}

.range .svg-card svg g > g:nth-child(3) {
    animation: move-statistic-bubble-3 50s cubic-bezier(1,1,1,1) infinite;
}

@keyframes move-statistic-bubble-3 {
    from {
        transform: translate3d(270px, 80px,0);
    }

    50% {
        transform: translate3d(275px,85px,0);
    }

    to {
        transform: translate3d(270px, 80px,0);
    }
}

.range .svg-card svg g > g:nth-child(4) {
    animation: move-statistic-bubble-4 50s cubic-bezier(1,1,1,1) infinite;
}

@keyframes move-statistic-bubble-4 {
    from {
        transform: translate3d(205px, 16px,0);
    }

    50% {
        transform: translate3d(214px, 20px,0);
    }

    to {
        transform: translate3d(205px, 16px,0);
    }
}


.range .svg-card svg g > g:nth-child(6) {
    animation: move-statistic-bubble-6 40s cubic-bezier(1,.5,.5,1) infinite;
}

@keyframes move-statistic-bubble-6 {
    from {
        transform: translate3d(58px, 60px,0);
    }

    50% {
        transform: translate3d(40px, 45px,0);
    }

    to {
        transform: translate3d(58px, 60px,0);
    }
}

.range .svg-card svg g > g:nth-child(7) {
    animation: move-statistic-bubble-7 30s ease) infinite;
}

@keyframes move-statistic-bubble-7 {
    from {
        transform: translate3d(-8px, 98px,0);
    }

    50% {
        transform: translate3d(5px, 110px,0);
    }

    to {
        transform: translate3d(-8px, 98px,0);
    }
}

.range .svg-card svg g > g:nth-child(5) {
    animation: move-statistic-bubble-5 35s cubic-bezier(1,.5,.5,1) infinite;
}

@keyframes move-statistic-bubble-5 {
    from {
        transform: translate3d(10px, 9px,0);
    }

    50% {
        transform: translate3d(-20px, 25px,0);
    }

    to {
        transform: translate3d(10px, 9px,0);
    }
}


/*    

    .svg-card svg g > g:nth-child(2) {
        animation: move-bubble-1-1 50s cubic-bezier(1,.5,.5,1) infinite;
    }

    .svg-card svg g > g:nth-child(2) {
        animation: move-bubble-1-1 50s cubic-bezier(1,.5,.5,1) infinite;
    }

    .svg-card svg g > g:nth-child(2) {
        animation: move-bubble-1-1 50s cubic-bezier(1,.5,.5,1) infinite;
    }


*/




.card-box .row:nth-child(1) .dash-card .svg-card svg g > g:nth-child(1) {
    animation: move-bubble-1-1 50s cubic-bezier(1,.5,.5,1) infinite;
}

.card-box .row:nth-child(1) .dash-card .svg-card svg g > g:nth-child(2) {
    animation: move-bubble-1-2 50s cubic-bezier(.2,.3,.7,1) infinite;
}

.card-box .row:nth-child(1) .dash-card .svg-card svg g > g:nth-child(3) {
    animation: move-bubble-1-3 50s cubic-bezier(.7,.4,.2,.1) infinite;
}

@keyframes move-bubble-1-1 {
    from {
        transform: translate3d(153px,111px,0);
    }

    50% {
        transform: translate3d(90px, 100px,0);
    }

    to {
        transform: translate3d(153px,111px,0);
    }
}

@keyframes move-bubble-1-2 {
    from {
        transform: translate3d(248px, 104px,0);
    }

    50% {
        transform: translate3d(200px, 80px,0);
    }

    to {
        transform: translate3d(248px, 104px,0);
    }
}

@keyframes move-bubble-1-3 {
    from {
        transform: translate3d(214px,16px,0);
    }

    50% {
        transform: translate3d(105px,35px,0);
    }

    to {
        transform: translate3d(214px,16px,0);
    }
}

.card-box .row:nth-child(2) .dash-card .svg-card svg g > g:nth-child(1) {
    animation: move-bubble-2-1 30s cubic-bezier(1,.5,.5,1) infinite;
    animation-delay: 3s;
}

.card-box .row:nth-child(2) .dash-card .svg-card svg g > g:nth-child(2) {
    animation: move-bubble-2-2 50s cubic-bezier(.2,.3,.7,1) infinite;
}

.card-box .row:nth-child(2) .dash-card .svg-card svg g > g:nth-child(3) {
    animation: move-bubble-2-3 50s cubic-bezier(.7,.4,.2,.1) infinite;
    animation-delay: 6s;
}

.card-box .row:nth-child(2) .dash-card .svg-card svg g > g:nth-child(4) {
    animation: move-bubble-2-4 35s cubic-bezier(.1,.5,.2,.1) infinite;
    animation-delay: 5s;
}

@keyframes move-bubble-2-1 {
    from {
        transform: translate3d(20px,110px,0);
    }

    50% {
        transform: translate3d(35px, 10px,0);
    }

    to {
        transform: translate3d(20px,110px,0);
    }
}

@keyframes move-bubble-2-2 {
    from {
        transform: translate3d(160px, 50px,0);
    }

    50% {
        transform: translate3d(50px, 150px,0);
    }

    to {
        transform: translate3d(160px, 50px,0);
    }
}

@keyframes move-bubble-2-3 {
    from {
        transform: translate3d(180px,25px,0);
    }

    50% {
        transform: translate3d(70px,20px,0);
    }

    to {
        transform: translate3d(180px,20px,0);
    }
}

@keyframes move-bubble-2-4 {
    from {
        transform: translate3d(190px,65px,0);
    }

    50% {
        transform: translate3d(150px,100px,0);
    }

    to {
        transform: translate3d(190px,65px,0);
    }
}

.card-box .row:nth-child(3) .dash-card .svg-card svg g > g:nth-child(1) {
    animation: move-bubble-3-1 40s cubic-bezier(.5,.3,.3,.5) infinite;
}

.card-box .row:nth-child(3) .dash-card .svg-card svg g > g:nth-child(2) {
    animation: move-bubble-3-2 50s cubic-bezier(.2,.3,.7,1) infinite;
    animation-delay: 2s;
}

.card-box .row:nth-child(3) .dash-card .svg-card svg g > g:nth-child(3) {
    animation: move-bubble-3-3 45s cubic-bezier(.7,.4,.2,.1) infinite;
}

.card-box .row:nth-child(3) .dash-card .svg-card svg g > g:nth-child(4) {
    animation: move-bubble-3-4 30s cubic-bezier(1,2,.2,.1) infinite;
    animation-delay: 5s;
}

@keyframes move-bubble-3-1 {
    from {
        transform: translate3d(183px,6px,0);
    }

    50% {
        transform: translate3d(5px, 70px,0);
    }

    to {
        transform: translate3d(183px,6px,0);
    }
}

@keyframes move-bubble-3-2 {
    from {
        transform: translate3d(150px, 50px,0);
    }

    50% {
        transform: translate3d(180px, 27px,0);
    }

    to {
        transform: translate3d(150px, 50px,0);
    }
}

@keyframes move-bubble-3-3 {
    from {
        transform: translate3d(180px,65px,0);
    }

    50% {
        transform: translate3d(200px,107px,0);
    }

    to {
        transform: translate3d(180px,65px,0);
    }
}

@keyframes move-bubble-3-4 {
    from {
        transform: translate3d(10px,9px,0);
    }

    50% {
        transform: translate3d(-35px,60px,0);
    }

    to {
        transform: translate3d(10px,9px,0);
    }
}




/* .card-box .row:nth-child(3) .dash-card{
background: red;
} */

@media (max-width: 800px) {
    .body {
        overflow-y: scroll;
    }

    #wrapper.fullwidth-right .dash-carrusel .dash-card {
        width: 50%;
    }

    #wrapper .dash-carrusel .dash-card {
        width: 100%;
    }

    #wrapper .dashboard-container .list-body .list-item.icon .icon-cont, .dash-carrusel-item-icon {
        /* border: 1px solid grey; */
        width: 22px;
        height: 22px;
    }

    .dashboard-container .list-body .list-item.icon .icon-cont i,
    .dashboard-container .dash-carrusel-item-icon i {
        font-size: .8rem;
    }
    /*    .statistical-container .dash-carrusel-item-icon i {
        font-size: 2.3rem;
    }

*/ .fullwidth-right .dash-carrusel-item-numero {
        /* padding-top: 1.5rem; */
        font-size: 30px;
    }
    /*.statistical-container .dash-carrusel-item-numero {*/
    /* padding-top: 1.5rem; */
    /*font-size: 3.9em;
    }*/

    #wrapper .dash-carrusel-item-numero {
        /* padding-top: 1.5rem; */
        font-size: 24px;
    }
}

@media (min-width: 1000px) {
    .dashboard-container .card-box .row {
        height: calc(95% / 3);
    }
}

@media (max-height: 600px) {
    .dashboard-head {
        height: 10.6rem;
    }

    .dashboard-carrusel {
        top: -1rem;
    }

    .list-item.icon {
        height: 22px;
        width: 22px;
    }
}

.dash-carrusel-long {
}

#Provisiones-1,
#Provisiones-2,
#Ejercidos-1 {
    box-shadow: none;
    font-size: 13px !important;
}

    #Ejercidos-1 tr,
    #Ejercidos-1 td {
        box-shadow: none;
        border-bottom: 1px dotted var(--secondary-300);
        border-top-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
    }

    #Provisiones-1 tr,
    #Provisiones-1 td,
    #Provisiones-2 tr,
    #Provisiones-2 td {
        box-shadow: none;
        border-bottom: 1px dotted var(--primary-700);
        border-top-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
    }

    #Provisiones-1.table tr:last-child tr,
    #Provisiones-2.table tr:last-child tr,
    #Ejercidos-1.table tr:last-child tr {
        border-bottom-width: 0px;
    }


@keyframes scaleIn {
    from {
        width: 50rem;
    }

    to {
        transform: scale(.5);
    }
}

@keyframes scaleOut {
    from {
        transform: scale(.5);
    }

    to {
        transform: scale(1);
    }
}

.dash-card.scaleIn {
    animation: scaleIn 0.5s ease-out;
}

.dash-card.scaleOut {
    animation: scaleOut 0.5s ease-out;
}

#Ejercidos-1 thead tr th:first-child,
#Provisiones-1 thead tr th:first-child,
#Provisiones-2 thead tr th:first-child {
    border-top-left-radius: 12px;
}

#Ejercidos-1 thead tr th:last-child,
#Provisiones-1 thead tr th:last-child,
#Provisiones-2 thead tr th:last-child {
    border-top-right-radius: 12px;
}

#ContratosVencidosHoy,
#ContratosVencidos {
    overflow: visible;
    position: inherit;
    font-family: var(--font-Poppins);
    font-weight: 700;
    animation: fluido 5s ease-in-out infinite;
    background: linear-gradient(-45deg, #B71C1C, #E53935, #EF5350);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: #C2185B7A 4px 2px 2px;
}

#ContratosVencidosSemana {
    overflow: visible;
    position: inherit;
    font-family: var(--font-Poppins);
    font-weight: 700;
    animation: fluido 5s ease-in-out infinite;
    background: linear-gradient(-45deg, #FF6F00, #FFA000, #FFCA28);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: #C2185B7A 4px 2px 2px;
}



.tables-dashboard {
    height: 345px;
    overflow-y: auto;
    margin-top: 17px;
}

.cabeceras-tables-dashboard {
    position: sticky;
    top: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: 88vh;
    background-color: var(--TablaEstadisticasCabeceras);
}

/*-------------------------------------------- CARRUSEL 3D -------------------------------------------------*/

/*
    Summary:
    Estilos para componentes visuales de un carrusel 3D y otros elementos gráficos en una interfaz.
    Incluye gradientes, animaciones, y transformaciones 3D.

    Example:
    Usar las clases definidas para aplicar gradientes y animaciones a contenedores.
*/

/*
    Para:
    Fondo de la tabla de provisiones.
    
    Value:
    Utiliza un gradiente de color que combina transparencia con tonos aqua.
*/
.tabla-provisiones {
    background: linear-gradient(180deg, #00000000 5%, #4db6ac26 20%, #00b9a66b 45%);
}

/*
    Para:
    Tarjetas del dashboard.
    
    Value:
    Gradiente transparente con un tono azul claro.
*/
.dash-card-tables {
    background: linear-gradient(360deg, rgba(141,185,244,255) 0%, transparent 100%);
}

/*
    Para:
    Carrusel del dashboard.
    
    Value:
    Gradiente similar al de las tarjetas y animación de aparición.
*/
.dash-card-carrusel {
    background: linear-gradient(360deg, rgba(141,185,244,255) 0%, transparent 100%);
    animation: aparecer 1s ease-out forwards;
}

/*
    Code:
    Animación para elementos que aparecen de manera gradual.

    Returns:
    Cambia la opacidad de 0 a 1 durante 1 segundo.
*/
@keyframes aparecer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
    Summary:
    Contenedor principal del carrusel 3D.

    Remark:
    Establece dimensiones y oculta desbordes para mantener el enfoque visual en el carrusel.
*/
.contenedorCarrusel3D {
    height: 45vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/*
    Summary:
    Contenedor interno con perspectiva 3D.

    Remark:
    Proporciona un efecto visual de profundidad.
*/
.content-all3D {
    width: 280px;
    margin: auto;
    height: 40vh;
    perspective: 800px;
    position: relative;
    transform-style: preserve-3d;
}

/*
    Summary:
    Estructura del carrusel con rotación automática.

    Example:
    Pausar la animación al pasar el ratón.
*/
.content-carrousel3D {
    width: 100%;
    height: 40vh;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotar 60s infinite linear;
    transform-origin: center center 0;
}

    /*
    Para:
    Pausar la rotación automática.

    Remark:
    Mejora la interacción visual al detener la animación durante la interacción del usuario.
*/
    .content-carrousel3D:hover {
        animation-play-state: paused;
        cursor: pointer;
    }

    /*
    Para:
    Secciones del carrusel.

    Value:
    Cada sección se posiciona en un ángulo diferente para simular la rotación 3D.
*/
    .content-carrousel3D section {
        position: absolute;
        width: 85%;
        height: 40vh;
        top: 50%;
        left: 50%;
        transform-origin: center;
        transform-style: preserve-3d;
    }

        /*
    Code:
    Efecto de sombreado al pasar el ratón sobre una sección.
*/
        .content-carrousel3D section:hover {
            box-shadow: 0px 0px 20px 0px black;
        }

        /*
    See:
    Transformaciones individuales para cada sección del carrusel.

    Remark:
    Los ángulos de rotación y las traducciones Z aseguran que las secciones mantengan una distancia uniforme.
*/
        .content-carrousel3D section:nth-child(1) {
            transform: translate(-60%, -145%) rotateY(0deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(2) {
            transform: translate(-60%, -145%) rotateY(30deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(3) {
            transform: translate(-60%, -145%) rotateY(60deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(4) {
            transform: translate(-60%, -145%) rotateY(90deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(5) {
            transform: translate(-60%, -145%) rotateY(120deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(6) {
            transform: translate(-60%, -145%) rotateY(150deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(7) {
            transform: translate(-60%, -145%) rotateY(180deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(8) {
            transform: translate(-60%, -145%) rotateY(210deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(9) {
            transform: translate(-60%, -145%) rotateY(240deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(10) {
            transform: translate(-60%, -145%) rotateY(270deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(11) {
            transform: translate(-60%, -145%) rotateY(300deg) translateZ(420px);
        }

        .content-carrousel3D section:nth-child(12) {
            transform: translate(-60%, -145%) rotateY(330deg) translateZ(420px);
        }

.card3D-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
}


/* Estilo base para cada tarjeta */
.content-carrousel3D .card3D {
    width: 200px;
    height: 17vh;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: all 300ms;
    background-color: white;
    margin: 2vw;
    text-align: center;
    position: absolute;
    transition: transform 0.5s; /* Transición para el giro de la card */
    transform-style: preserve-3d; /* Necesario para las transformaciones 3D */
    transform: rotateY(0deg);
    transition: background 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Caras de la card */
.front3D, .back3D {
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imagen-Carrusel {
    width: 13vw; /* Ajusta esto al tamaño deseado */
    height: 20vh; /* Ajusta esto según el diseño */
    overflow: hidden; /* Recorta cualquier contenido desbordado */
    /*border-radius: 8px;*/ /* Opcional, para bordes redondeados */
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .imagen-Carrusel img {
        width: 13vw; /*Asegura que la imagen ocupe todo el ancho del contenedor */
        height: 10vh; /*Ajusta la altura al contenedor */
        object-fit: contain; /*Recorta y centra la imagen mientras mantiene la proporción */
        display: block; /*Elimina el espacio en blanco extra */
        margin-top: 20px;
    }


/* Cara trasera */
.back3D {
    justify-content: center;
    /* background: #f2f2f2;*/
    transform: rotateY(180deg);
}

@keyframes rotar {
    from {
        transform: rotateX(-12deg) rotateY(360deg);
    }

    to {
        transform: rotateX(-12deg) rotateY(0deg);
    }
}

/* Encabezado del mes */
.mes-header {
    position: absolute;
    top: 0; /* Posición relativa a la tarjeta */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-size: 14px;
    z-index: 1; /* Asegura que quede encima de la tarjeta */
}

.title-carrusel {
    top: 15px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1;
    font-size: 10px;
}


.cardCompleta {
    padding: 25px 30px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 1000;
    height: 45vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    animation: aparecer 1s ease-out forwards;
}

    .cardCompleta.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .cardCompleta.visible {
        opacity: 1;
        visibility: visible;
    }

.card-
title {
    text-align: center;
    color: #00A3E0;
    font-size: 1.2rem;
    margin: 10px 0 25px 0;
}

/* Estilos para cada mes */
.mes-1 {
    background: linear-gradient(180deg, transparent 5%, #64b5f677 45%, #1565c0ad 100%);
}

.mes-2 {
    background: linear-gradient(180deg, transparent 5%, #64b5f677 45%, #1565c0ad 100%);
}

.mes-3 {
    background: linear-gradient(135deg, rgba(160, 190, 220, 0.6) 0%, rgba(150, 210, 200, 0.5) 100%); /* Transitioning to soft sage */
}

.mes-4 {
    background: linear-gradient(135deg, rgba(150, 210, 200, 0.6) 0%, rgba(140, 200, 180, 0.5) 100%); /* Soft spring green */
}

.mes-5 {
    background: linear-gradient(135deg, rgba(140, 200, 180, 0.6) 0%, rgba(180, 210, 140, 0.5) 100%); /* Light greenish-yellow */
}

.mes-6 {
    background: linear-gradient(135deg, rgba(180, 210, 140, 0.5) 0%, rgba(200, 200, 120, 0.3) 100%); /* Soft summer yellow */
}

.mes-7 {
    background: linear-gradient(135deg, rgba(200, 200, 120, 0.5) 0%, rgba(220, 180, 100, 0.3) 100%); /* Warm summer tone */
}

.mes-8 {
    background: linear-gradient(135deg, rgba(220, 180, 100, 0.4) 0%, rgba(230, 160, 90, 0.2) 100%); /* Late summer warmth */
}

.mes-9 {
    background: linear-gradient(135deg, rgba(230, 160, 90, 0.3) 0%, rgba(220, 140, 80, 0.2) 100%); /* Early autumn */
}

.mes-10 {
    background: linear-gradient(135deg, rgba(220, 140, 80, 0.3) 0%, rgba(200, 130, 70, 0.2) 100%); /* Mid autumn */
}

.mes-11 {
    background: linear-gradient(135deg, rgba(200, 130, 70, 0.3) 0%, rgba(180, 120, 140, 0.3) 100%); /* Autumn to winter transition */
}

.mes-12 {
    background: linear-gradient(135deg, rgba(180, 120, 140, 0.4) 0%, rgba(190, 220, 240, 0.4) 100%); /* Back to winter blue */
}


/*Estilos tema claro para los carruseles de Rueda PROV, Rueda IMSS/ISR y el carrusel de provisiones*/
:root {
    /* Variables para tema claro del carrusel*/
    --text-color-Carruseles-Rueda: #000000;
    --primercircleRueda-gradient-1: rgba(179, 217, 235, 0.7);
    --primercircleRueda-gradient-2: rgba(44, 187, 255, 0.6);
    --primer-circleRueda-gradient-1: rgba(173, 213, 233, 0.7);
    --primer-circleRueda-gradient-2: rgba(87, 198, 255, 0.6);
    --circleRueda-gradient-1: #beb3eb;
    --circleRueda-gradient-2: #ae2cff;
    --second-circleRueda-gradient-1: #d8a9ff;
    --second-circleRueda-gradient-2: #e6e0f7;
    --mes-headerRueda-color: #3c3c3c;
    /* Variables para colores de meses en tema claro */
    --mesRueda-1-gradient-1: #c5e1f677;
    --mesRueda-1-gradient-2: #a1c4e6cc;
    --mesRueda-3-gradient-1: #b3e5fc77;
    --mesRueda-3-gradient-2: #81d4fa99;
    --mesRueda-4-gradient-1: #d0eac077;
    --mesRueda-4-gradient-2: #a5d6a799;
    --mesRueda-5-gradient-1: #e6eea755;
    --mesRueda-5-gradient-2: #d4e15766;
    --mesRueda-6-gradient-1: #ffe08255;
    --mesRueda-6-gradient-2: #ffb74d66;
    --mesRueda-7-gradient-1: #ffcc9966;
    --mesRueda-7-gradient-2: #ffb07466;
    --mesRueda-8-gradient-1: #fff59d66;
    --mesRueda-8-gradient-2: #fdd83566;
    --mesRueda-9-gradient-1: #ffe8a155;
    --mesRueda-9-gradient-2: #f9c74f66;
    --mesRueda-10-gradient-1: #ffccbc66;
    --mesRueda-10-gradient-2: #f5a67166;
    --mesRueda-11-gradient-1: #c8e6c955;
    --mesRueda-11-gradient-2: #81c78466;
    --PROVISION-card-1-gradient-1: #bbdefb77;
    --PROVISION-card-1-gradient-2: #1e88e5ad;
    --PROVISION-card-2-gradient-1: #90caf977;
    --PROVISION-card-2-gradient-2: #1976d2ad;
    --PROVISION-card-3-gradient-1: #a5d6a777;
    --PROVISION-card-3-gradient-2: #388e3cad;
    --PROVISION-card-4-gradient-1: #ffab9177;
    --PROVISION-card-4-gradient-2: #f57c00ad;
    --PROVISION-card-5-gradient-1: #ffe08277;
    --PROVISION-card-5-gradient-2: #f9a825ad;
    --PROVISION-card-6-gradient-1: #fff17677;
    --PROVISION-card-6-gradient-2: #fdd835ad;
    --PROVISION-card-7-gradient-1: #ffcc8077;
    --PROVISION-card-7-gradient-2: #fb8c00ad;
    --PROVISION-card-8-gradient-1: #ffd54f77;
    --PROVISION-card-8-gradient-2: #ff6f00ad;
    --PROVISION-card-9-gradient-1: #dce77577;
    --PROVISION-card-9-gradient-2: #c0ca33ad;
    --PROVISION-card-10-gradient-1: #c5e1a577;
    --PROVISION-card-10-gradient-2: #7cb342ad;
    --PROVISION-card-11-gradient-1: #81d4fa77;
    --PROVISION-card-11-gradient-2: #0288d1ad;
    --PROVISION-card-12-gradient-1: #64b5f677;
    --PROVISION-card-12-gradient-2: #1565c0ad;
    --PROVISION-card-13-gradient-1: #64b5f677;
    --PROVISION-card-13-gradient-2: #1565c0ad;
}
/*Estilos tema oscuro para  los carruseles de Rueda PROV, Rueda IMSS/ISR y el carrusel de provisiones*/
.dark-theme {
    /*variables para los carruseles tema Oscuro*/
    --text-color-Carruseles-Rueda: #ffffff;
    --circleRueda-gradient-1: #7e71ad;
    --circleRueda-gradient-2: #8e22cc;
    --second-circleRueda-gradient-1: #a879cc;
    --second-circleRueda-gradient-2: #b6b0c7;
    --mes-headerRueda-color: #c3c3c3;
    /* Variables para colores de meses (tema oscuro) */
    --mesRueda-1-gradient-1: #2c4d6faa;
    --mesRueda-1-gradient-2: #254b71cc;
    --mesRueda-3-gradient-1: #25707faa;
    --mesRueda-3-gradient-2: #0d4e65cc;
    --mesRueda-4-gradient-1: #3e5e38aa;
    --mesRueda-4-gradient-2: #2a5a30cc;
    --mesRueda-5-gradient-1: #5a632faa;
    --mesRueda-5-gradient-2: #5d6522cc;
    --mesRueda-6-gradient-1: #7d5c1faa;
    --mesRueda-6-gradient-2: #7d5e17cc;
    --mesRueda-7-gradient-1: #7d4f22cc;
    --mesRueda-7-gradient-2: #7d3d17cc;
    --mesRueda-8-gradient-1: #7d7422cc;
    --mesRueda-8-gradient-2: #7d6117cc;
    --mesRueda-9-gradient-1: #7d6520aa;
    --mesRueda-9-gradient-2: #7d5417cc;
    --mesRueda-10-gradient-1: #7d3222cc;
    --mesRueda-10-gradient-2: #7d2617cc;
    --mesRueda-11-gradient-1: #2c5a2faa;
    --mesRueda-11-gradient-2: #1e4f1ecc;
    --PROVISION-card-1-gradient-1: #bbdefb77;
    --PROVISION-card-1-gradient-2: #1e88e5ad;
    --PROVISION-card-2-gradient-1: #90caf977;
    --PROVISION-card-2-gradient-2: #1976d2ad;
    --PROVISION-card-3-gradient-1: #a5d6a777;
    --PROVISION-card-3-gradient-2: #388e3cad;
    --PROVISION-card-4-gradient-1: #ffab9177;
    --PROVISION-card-4-gradient-2: #f57c00ad;
    --PROVISION-card-5-gradient-1: #ffe08277;
    --PROVISION-card-5-gradient-2: #f9a825ad;
    --PROVISION-card-6-gradient-1: #fff17677;
    --PROVISION-card-6-gradient-2: #fdd835ad;
    --PROVISION-card-7-gradient-1: #ffcc8077;
    --PROVISION-card-7-gradient-2: #fb8c00ad;
    --PROVISION-card-8-gradient-1: #ffd54f77;
    --PROVISION-card-8-gradient-2: #ff6f00ad;
    --PROVISION-card-9-gradient-1: #dce77577;
    --PROVISION-card-9-gradient-2: #c0ca33ad;
    --PROVISION-card-10-gradient-1: #c5e1a577;
    --PROVISION-card-10-gradient-2: #7cb342ad;
    --PROVISION-card-11-gradient-1: #81d4fa77;
    --PROVISION-card-11-gradient-2: #0288d1ad;
    --PROVISION-card-12-gradient-1: #64b5f677;
    --PROVISION-card-12-gradient-2: #1565c0ad;
    --PROVISION-card-13-gradient-1: #64b5f677;
    --PROVISION-card-13-gradient-2: #1565c0ad;
}
/*----------------------------------------------- CARRUSEL PVS ---------------------------------------------*/
/*Variables para la rotacion de la rueda*/
.row-RuedaProv {
    --rotateRuedaProv-speed: 30;
    --countRuedaProv: 12;
    --easeInOutSineRuedaProv: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    --easingRuedaProv: cubic-bezier(1, 1, 1, 1);
}
/*Tamaño general del carrusel*/
.void {
    margin: -20%;
    height: 48vh;
    position: relative;
}

/*Tamaño de las cards de cada mes que giran al rededor de los circulos*/
#card-list {
    list-style-type: none;
    padding: 0;
    position: relative;
    width: 91%;
    margin-top: 35%;
    left: 23%;
    z-index: 1;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    #card-list {
        width: 90%; /* Reduce el tamaño en pantallas pequeñas */
        left: 5%; /* Ajusta la posición */
        margin-top: 0; /* Elimina el margen superior en pantallas pequeñas */
    }
}

/* Media query para pantallas muy pequeñas, como dispositivos móviles */
@media (max-width: 480px) {
    #card-list {
        width: 95%; /* Ajusta aún más el tamaño */
        left: 2.5%; /* Pequeña corrección en el desplazamiento */
        margin-top: 0; /* Eliminar o ajustar el margen superior */
    }
}

#card-list:hover * {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/*Variables para ajustar el tamaño y la posicion de las cards en el carrusel*/
.content-carrouselRuedaProv li {
    position: absolute;
    top: 45%;
    width: 70%;
    -webkit-animation: rotateCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
    animation: rotateCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
}

/*Estilo de los nombres de los meses y las animaciones de girar*/
.cardRuedaProv {
    width: 12%; /* Aumento el tamaño para que se ajuste mejor */
    padding: 15px 50px; /* Ajusto el padding */
    gap: 1px;
    border-radius: var(--card-border-radius);
    font-family: 'Inter', sans-serif;
    color: var(--text-color-Carruseles-Rueda); /* Usar variable para el color del texto */
    cursor: pointer;
    text-align: left;
    -webkit-animation: rotateCCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
    animation: rotateCCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
}

/*Estilos al momento de seleccionar una card y mostrar la tabla del mes*/
.MostrarCardPVS {
    width: 12%; /* Aumento el tamaño para que se ajuste mejor */
    padding: 15px 50px; /* Ajusto el padding */
    gap: 1px;
    border-radius: var(--card-border-radius);
    font-family: 'Inter', sans-serif;
    color: var(--text-color-Carruseles-Rueda); /* Usar variable para el color del texto */
    text-align: left;
    -webkit-animation: rotateCCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
    animation: rotateCCWRuedaProv calc(var(--rotateRuedaProv-speed) * 1s) var(--easingRuedaProv) infinite;
}

/* Animacion de retraso de cada tarjeta */
.content-carrouselRuedaProv li:nth-child(2),
.content-carrouselRuedaProv li:nth-child(2) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -1s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -1s);
}

.content-carrouselRuedaProv li:nth-child(3),
.content-carrouselRuedaProv li:nth-child(3) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -2s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -2s);
}

.content-carrouselRuedaProv li:nth-child(4),
.content-carrouselRuedaProv li:nth-child(4) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -3s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -3s);
}

.content-carrouselRuedaProv li:nth-child(5),
.content-carrouselRuedaProv li:nth-child(5) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -4s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -4s);
}

.content-carrouselRuedaProv li:nth-child(6),
.content-carrouselRuedaProv li:nth-child(6) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -5s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -5s);
}

.content-carrouselRuedaProv li:nth-child(7),
.content-carrouselRuedaProv li:nth-child(7) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -6s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -6s);
}

.content-carrouselRuedaProv li:nth-child(8),
.content-carrouselRuedaProv li:nth-child(8) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -7s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -7s);
}

.content-carrouselRuedaProv li:nth-child(9),
.content-carrouselRuedaProv li:nth-child(9) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -8s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -8s);
}

.content-carrouselRuedaProv li:nth-child(10),
.content-carrouselRuedaProv li:nth-child(10) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -9s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -9s);
}

.content-carrouselRuedaProv li:nth-child(11),
.content-carrouselRuedaProv li:nth-child(11) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -10s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -10s);
}

.content-carrouselRuedaProv li:nth-child(12),
.content-carrouselRuedaProv li:nth-child(12) .cardRuedaProv {
    -webkit-animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -11s);
    animation-delay: calc((var(--rotateRuedaProv-speed)/var(--countRuedaProv)) * -11s);
}

/*Tamaño, posicion y color de cada uno de los circulos*/
.center-circle {
    position: absolute;
    width: 13vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--primercircleRueda-gradient-1), var(--primercircleRueda-gradient-2));
    border-radius: 50%;
}

.second-circle {
    position: absolute;
    width: 18vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--primer-circleRueda-gradient-1), var(--primer-circleRueda-gradient-2));
    opacity: 0.5;
    border-radius: 50%;
}

.last-circle {
    position: absolute;
    width: 21vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--primer-circleRueda-gradient-1), var(--primer-circleRueda-gradient-2));
    opacity: 0.25;
    border-radius: 50%;
}

/* Animaciones, para asegurar que las tarejetas giren al rederdor de los circulos.*/
@-webkit-keyframes rotateCWRuedaProv {
    from {
        transform: translate3d(0px, -50%, -1px) rotate(0deg);
    }

    to {
        transform: translate3d(0px, -50%, -1px) rotate(-360deg);
    }
}

@keyframes rotateCWRuedaProv {
    from {
        transform: translate3d(0px, 1%, 1px) rotate(0deg);
    }

    to {
        transform: translate3d(0px, 1%, 1px) rotate(-360deg);
    }
}

@-webkit-keyframes rotateCCWRuedaProv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCCWRuedaProv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes pulseGlowRuedaProv {
    from {
        background-size: 60%;
    }

    to {
        background-size: 100%;
    }
}

@keyframes pulseGlowRuedaProv {
    from {
        background-size: 60%;
    }

    to {
        background-size: 100%;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    .cardRuedaProv {
        flex: 1 1 calc(50% - 16px);
    }

    .center-circle {
        width: 20vw;
    }

    .second-circle {
        width: 25vw;
    }

    .last-circle {
        width: 35vw;
    }
}

@media (max-width: 480px) {
    .cardRuedaProv {
        flex: 1 1 100%;
    }

    .center-circle {
        width: 30vw;
    }

    .second-circle {
        width: 40vw;
    }

    .last-circle {
        width: 50vw;
    }
}

/*Card que se muestra cuando se selecciona un mes, ajusta la posicion y el tamaño de la card, ademas de la visibilidad y opacidad de la card*/
.cardInfoProv {
    padding: 0px 30px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 1000;
    height: 45vh;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: left;
    overflow: hidden;
    position: relative;
    animation: aparecer 1s ease-out forwards;
}

    .cardInfoProv.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .cardInfoProv.visible {
        opacity: 1;
        visibility: visible;
    }

/*Titulo de los meses, diseño y posicion*/
.mes-header-Rueda {
    position: absolute;
    top: 0; /* Posición relativa a la tarjeta */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-size: 14px;
    z-index: 1; /* Asegura que quede encima de la tarjeta */
    color: var(--mes-headerRueda-color);
    font-family: var(--font-Poppins);
}

/*Colores para cada uno de los meses usando variables*/
/* Diciembre */
.cardRuedaProv.mesRueda-1 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}
/* Noviembre */
.cardRuedaProv.mesRueda-2 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}
/* Octubre */
.cardRuedaProv.mesRueda-3 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-3-gradient-1) 45%, var(--mesRueda-3-gradient-2) 70%);
}
/* Septiembre */
.cardRuedaProv.mesRueda-4 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-4-gradient-1) 45%, var(--mesRueda-4-gradient-2) 70%);
}
/* Agosto */
.cardRuedaProv.mesRueda-5 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-5-gradient-1) 45%, var(--mesRueda-5-gradient-2) 70%);
}
/* Julio */
.cardRuedaProv.mesRueda-6 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-6-gradient-1) 45%, var(--mesRueda-6-gradient-2) 70%);
}
/* Junio */
.cardRuedaProv.mesRueda-7 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-7-gradient-1) 45%, var(--mesRueda-7-gradient-2) 70%);
}
/* Mayo */
.cardRuedaProv.mesRueda-8 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-8-gradient-1) 45%, var(--mesRueda-8-gradient-2) 70%);
}
/* Abril */
.cardRuedaProv.mesRueda-9 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-9-gradient-1) 45%, var(--mesRueda-9-gradient-2) 70%);
}
/* Marzo */
.cardRuedaProv.mesRueda-10 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-10-gradient-1) 45%, var(--mesRueda-10-gradient-2) 70%);
}
/* Febrero */
.cardRuedaProv.mesRueda-11 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-11-gradient-1) 45%, var(--mesRueda-11-gradient-2) 70%);
}
/* Enero */
.cardRuedaProv.mesRueda-12 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}

/*---------------------------------Carrusel ISR E IMSS-------------------------------------*/
/*Variables para la rotacion de la rueda*/
.row-RuedaIS {
    --rotateRuedaIS-speed: 30;
    --countRuedaIS: 12;
    --easeInOutSineRuedaIS: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    --easingRuedaIS: cubic-bezier(1, 1, 1, 1);
}

/*Contenedor principal del carrusel, ajusta el tamaño del carrusel en general*/
.void {
    margin: -20%;
    height: 48vh;
    position: relative;
}

/*Ajusta el tamaño y la pocion de las cards*/
#card-list {
    list-style-type: none;
    padding: 0;
    position: relative;
    width: 91%;
    margin-top: 35%;
    left: 23%;
    z-index: 1;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    #card-list {
        width: 90%;
        left: 5%;
        margin-top: 0;
    }
}

/* Media query para pantallas muy pequeñas, como dispositivos móviles */
@media (max-width: 480px) {
    #card-list {
        width: 95%;
        left: 2.5%;
        margin-top: 0;
    }
}

/*Detiene la rotacion de las cards al poner el cursor encima*/
#card-list:hover * {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/*Ajusta la rotacion de las cards */
.content-carrouselRuedaIS li {
    position: absolute;
    top: 45%;
    width: 70%;
    -webkit-animation: rotateCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
    animation: rotateCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
}

/*Tamaño de cada una de las cards, tipo de letra, animacion y espacio entre cada una*/
.cardRuedaIS {
    width: 12%;
    padding: 15px 50px;
    gap: 1px;
    border-radius: var(--card-border-radius);
    font-family: 'Inter', sans-serif;
    color: var(--text-color-Carruseles-Rueda); /* Usar variable para el color del texto */
    cursor: pointer;
    /* Usar variables para los gradientes */
    /* background-image: linear-gradient(var(--card-gradient-1), var(--card-gradient-2), var(--card-gradient-3)); */
    text-align: left;
    -webkit-animation: rotateCCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
    animation: rotateCCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
}

/*Estilos cuando se selecciona un mes*/
.MostrarCardIS {
    width: 12%;
    padding: 15px 50px;
    gap: 1px;
    border-radius: var(--card-border-radius);
    font-family: 'Inter', sans-serif;
    color: var(--text-color-Carruseles-Rueda); /* Usar variable para el color del texto */
    text-align: left;
    -webkit-animation: rotateCCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
    animation: rotateCCWRuedaIS calc(var(--rotateRuedaIS-speed) * 1s) var(--easingRuedaIS) infinite;
}

/* Animacion para retrasar el giro de cada una de las cars */
.content-carrouselRuedaIS li:nth-child(2),
.content-carrouselRuedaIS li:nth-child(2) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -1s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -1s);
}

.content-carrouselRuedaIS li:nth-child(3),
.content-carrouselRuedaIS li:nth-child(3) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -2s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -2s);
}

.content-carrouselRuedaIS li:nth-child(4),
.content-carrouselRuedaIS li:nth-child(4) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -3s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -3s);
}

.content-carrouselRuedaIS li:nth-child(5),
.content-carrouselRuedaIS li:nth-child(5) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -4s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -4s);
}

.content-carrouselRuedaIS li:nth-child(6),
.content-carrouselRuedaIS li:nth-child(6) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -5s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -5s);
}

.content-carrouselRuedaIS li:nth-child(7),
.content-carrouselRuedaIS li:nth-child(7) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -6s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -6s);
}

.content-carrouselRuedaIS li:nth-child(8),
.content-carrouselRuedaIS li:nth-child(8) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -7s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -7s);
}

.content-carrouselRuedaIS li:nth-child(9),
.content-carrouselRuedaIS li:nth-child(9) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -8s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -8s);
}

.content-carrouselRuedaIS li:nth-child(10),
.content-carrouselRuedaIS li:nth-child(10) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -9s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -9s);
}

.content-carrouselRuedaIS li:nth-child(11),
.content-carrouselRuedaIS li:nth-child(11) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -10s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -10s);
}

.content-carrouselRuedaIS li:nth-child(12),
.content-carrouselRuedaIS li:nth-child(12) .cardRuedaIS {
    -webkit-animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -11s);
    animation-delay: calc((var(--rotateRuedaIS-speed)/var(--countRuedaIS)) * -11s);
}

/*Tamaño, posicion y color de cada uno de los circulos*/
.center-circle1 {
    position: absolute;
    width: 13vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--circleRueda-gradient-1), var(--circleRueda-gradient-2));
    border-radius: 50%;
}

.second-circle1 {
    position: absolute;
    width: 18vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--second-circleRueda-gradient-1), var(--second-circleRueda-gradient-2));
    opacity: 0.5;
    border-radius: 50%;
}

.last-circle1 {
    position: absolute;
    width: 21vw;
    aspect-ratio: 1 / 1;
    left: 19%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, var(--second-circleRueda-gradient-1), var(--second-circleRueda-gradient-2));
    opacity: 0.25;
    border-radius: 50%;
}

/* Animations */
@-webkit-keyframes rotateCWRuedaIS {
    from {
        transform: translate3d(0px, -50%, -1px) rotate(0deg);
    }

    to {
        transform: translate3d(0px, -50%, -1px) rotate(-360deg);
    }
}

@keyframes rotateCWRuedaIS {
    from {
        transform: translate3d(0px, 1%, 1px) rotate(0deg);
    }

    to {
        transform: translate3d(0px, 1%, 1px) rotate(-360deg);
    }
}

@-webkit-keyframes rotateCCWRuedaIS {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCCWRuedaIS {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes pulseGlowRuedaIS {
    from {
        background-size: 60%;
    }

    to {
        background-size: 100%;
    }
}

@keyframes pulseGlowRuedaIS {
    from {
        background-size: 60%;
    }

    to {
        background-size: 100%;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    .cardRuedaIS {
        flex: 1 1 calc(50% - 16px);
    }

    .center-circle1 {
        width: 20vw;
    }

    .second-circle1 {
        width: 25vw;
    }

    .last-circle1 {
        width: 35vw;
    }
}

@media (max-width: 480px) {
    .cardRuedaIS {
        flex: 1 1 100%;
    }

    .center-circle1 {
        width: 30vw;
    }

    .second-circle1 {
        width: 40vw;
    }

    .last-circle1 {
        width: 50vw;
    }
}

/*Ajusta el tamaño y la posicion de las cards al seleccionar un mes, ademas de su visibilidad*/
.cardInfoIS {
    padding: 0px 30px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 1000;
    height: 45vh;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: left;
    overflow: hidden;
    position: relative;
    animation: aparecer 1s ease-out forwards;
}

    .cardInfoIS.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .cardInfoIS.visible {
        opacity: 1;
        visibility: visible;
    }

/*Ajusta el titulo de cada uno de los meses*/
.mes-header-RuedaIS {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-size: 14px;
    z-index: 1;
    color: var(--mes-headerRueda-color); /* Usar variable para el color del texto */
    font-family: var(--font-Poppins);
}

/*Colores para cada uno de los meses - usando variables CSS*/
/* Diciembre */
.cardRuedaIS.mesRuedaIS-1 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}
/* Noviembre */
.cardRuedaIS.mesRuedaIS-2 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}
/* Octubre */
.cardRuedaIS.mesRuedaIS-3 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-3-gradient-1) 45%, var(--mesRueda-3-gradient-2) 70%);
}
/* Septiembre */
.cardRuedaIS.mesRuedaIS-4 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-4-gradient-1) 45%, var(--mesRueda-4-gradient-2) 70%);
}
/* Agosto */
.cardRuedaIS.mesRuedaIS-5 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-5-gradient-1) 45%, var(--mesRueda-5-gradient-2) 70%);
}
/* Julio */
.cardRuedaIS.mesRuedaIS-6 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-6-gradient-1) 45%, var(--mesRueda-6-gradient-2) 70%);
}
/* Junio */
.cardRuedaIS.mesRuedaIS-7 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-7-gradient-1) 45%, var(--mesRueda-7-gradient-2) 70%);
}
/* Mayo */
.cardRuedaIS.mesRuedaIS-8 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-8-gradient-1) 45%, var(--mesRueda-8-gradient-2) 70%);
}
/* Abril */
.cardRuedaIS.mesRuedaIS-9 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-9-gradient-1) 45%, var(--mesRueda-9-gradient-2) 70%);
}
/* Marzo */
.cardRuedaIS.mesRuedaIS-10 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-10-gradient-1) 45%, var(--mesRueda-10-gradient-2) 70%);
}
/* Febrero */
.cardRuedaIS.mesRuedaIS-11 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-11-gradient-1) 45%, var(--mesRueda-11-gradient-2) 70%);
}
/* Enero */
.cardRuedaIS.mesRuedaIS-12 {
    background: linear-gradient(180deg, transparent 5%, var(--mesRueda-1-gradient-1) 45%, var(--mesRueda-1-gradient-2) 70%);
}


/*-------------------------------carrusel provisiones ------------------------------------*/
/*Contenedor principal de las tarjestas, permite ajustar el tamaño en general de las tarjetas*/
.wrapperProvision {
    width: 100%;
    height: 48vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    padding: 0 44px;
}
/*Permite ajusatr la posicion, distancia y tamaño de cad card*/
.containerProvision {
    height: 43vh;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
}
/*Esttilos de cada card al estar seleccionada*/
.optionProv {
    width: 2vw;
    height: 40vh;
    border-radius: var(--card-border-radius);
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    box-shadow: var(--dash-card-icon-shadow);
    opacity: 0.7;
    transform: scale(0.9);
    position: relative;
}
    /* Colores de cada card */
    .optionProv:nth-child(1),
    .optionProv:nth-child(1).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-1-gradient-1) 45%, var(--PROVISION-card-1-gradient-2) 100%);
    }

    .optionProv:nth-child(2),
    .optionProv:nth-child(2).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-2-gradient-1) 45%, var(--PROVISION-card-2-gradient-2) 100%);
    }

    .optionProv:nth-child(3),
    .optionProv:nth-child(3).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-3-gradient-1) 45%, var(--PROVISION-card-3-gradient-2) 100%);
    }

    .optionProv:nth-child(4),
    .optionProv:nth-child(4).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-4-gradient-1) 45%, var(--PROVISION-card-4-gradient-2) 100%);
    }

    .optionProv:nth-child(5),
    .optionProv:nth-child(5).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-5-gradient-1) 45%, var(--PROVISION-card-5-gradient-2) 100%);
    }

    .optionProv:nth-child(6),
    .optionProv:nth-child(6).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-6-gradient-1) 45%, var(--PROVISION-card-6-gradient-2) 100%);
    }

    .optionProv:nth-child(7),
    .optionProv:nth-child(7).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-7-gradient-1) 45%, var(--PROVISION-card-7-gradient-2) 100%);
    }

    .optionProv:nth-child(8),
    .optionProv:nth-child(8).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-8-gradient-1) 45%, var(--PROVISION-card-8-gradient-2) 100%);
    }

    .optionProv:nth-child(9),
    .optionProv:nth-child(9).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-9-gradient-1) 45%, var(--PROVISION-card-9-gradient-2) 100%);
    }

    .optionProv:nth-child(10),
    .optionProv:nth-child(10).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-10-gradient-1) 45%, var(--PROVISION-card-10-gradient-2) 100%);
    }

    .optionProv:nth-child(11),
    .optionProv:nth-child(11).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-11-gradient-1) 45%, var(--PROVISION-card-11-gradient-2) 100%);
    }

    .optionProv:nth-child(12),
    .optionProv:nth-child(12).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-12-gradient-1) 45%, var(--PROVISION-card-12-gradient-2) 100%);
    }

    .optionProv:nth-child(13),
    .optionProv:nth-child(13).active {
        background: linear-gradient(180deg, transparent 5%, var(--PROVISION-card-13-gradient-1) 45%, var(--PROVISION-card-13-gradient-2) 100%);
    }

    /*Tamaño y posicion de la card que seleccionan*/
    .optionProv.active {
        width: 52vw;
        height: 38vh;
        opacity: 1 !important;
        transform: scale(1.02);
        z-index: 1;
    }

        .optionProv.active ~ .optionProv {
            transform: translateX(40px);
        }
/*Ajusta el nombre del mes cuando la card no esta seleccionada*/
.iconProvision {
    background: transparent;
    width: auto; /* Permitir que se ajuste dinámicamente */
    max-width: 25px; /* Limitar el ancho máximo */
    height: auto;
    min-height: 100px; /* Tamaño mínimo para evitar colapsos */
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-left: 8px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transition: all .4s ease-in-out;
    font-weight: bold;
    position: relative;
    top: 20px;
    font-size: clamp(0.7rem, 2vw, 0.9rem); /* Se adapta al tamaño de la pantalla */
    letter-spacing: 0.5px;
    line-height: 1;
    word-wrap: break-word; /* Forzar el ajuste del texto */
    overflow: hidden; /* Evitar desbordamientos */
    text-align: center;
    white-space: normal; /* Permitir saltos de línea */
    font-family: var(--font-Poppins);
}

.optionProv.active .iconProvision {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
}

/*Muestra y ajusta de manera correcta la infromacion de las cards*/
.descriptionProvision {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    height: 35vh;
    width: 884px;
    opacity: 0;
    transform: translateY(30px);
    transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    position: relative;
    margin-top: 9%;
}
    /*
    .descriptionProvision p {
        padding-top: 5px;
        font-size: 14px;
        line-height: 0.9em;
    }*/

    .descriptionProvision h4 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 18px;
        color: var(--title-color);
        font-family: var(--font-Poppins);
        margin-top: 10px;
    }

.optionProv.active .descriptionProvision {
    opacity: 1 !important;
    transform: translateY(-70px) !important;
}