/** Index v1.2.1**/

/* Custom properties */
:root {
    --text: #1E1F26;
    --blackSemi: #000000DE; /* Black 87% */
    --primary: #1B98E0;
    --titles: #FFFFFF;
    --blueFiniquito: #083667;
    --blueFiniquitoSecondary: #0E54AF;
    --blueBorder: #3889F7;
    --blueFiniquitoItem: #2E55A5;
    --blueFiniquitoSubItem: #2379A3;
    --greenFiniquito: #088D6D;
    --orangeFiniqutoL: #ff5722;
    --orangeFiniqutoM: #F97316;
    --orangeFiniqutoS: #FF7A00;
    --blueSkyFiniquito: #1585B5;
    --whiteFiniquito: #FFF;
    --greyFiniquito: #6D788D80;
    --textSize: 16px;
  }

@font-face {
    font-family: 'Clear Sans Bold';
    src: url('../fonts/clear-sans/ClearSans-Bold.ttf');
}

@font-face {
    font-family: 'Clear Sans Italic';
    src: url('../fonts/clear-sans/ClearSans-Italic.ttf');
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/clear-sans/ClearSans-Regular.ttf');
}

@font-face {
    font-family: 'Clear Sans Thin';
    src: url('../fonts/clear-sans/ClearSans-Thin.ttf');
}

/* Nunito */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Fonts/web/fonts/Nunito-Regular.woff2');
}

@font-face {
    font-family: 'Nunito Bold';
    src: url('../fonts/nunito/Fonts/web/fonts/Nunito-Bold.woff2');
}

@font-face {
    font-family: 'Nunito Italic';
    src: url('../fonts/nunito/Fonts/web/fonts/Nunito-Italic.woff2');
}

html, body, input, button, textarea, select, .btn, .card, .navbar, h1, h2, h3, h4, h5, h6, p, span, label, article, aside, footer, header, nav, section{
    font-family: 'Nunito', sans-serif !important;
}

h1, h4, h5, li, span{
    cursor: default;
}

#main{
    font-family: 'Nunito', sans-serif !important;
    margin-top: 2%;
    padding-top: 2em;
    min-height: auto;
}

.breadcrumb{
    padding: 0 1em;
    color: #000;
    text-decoration:none;
    font-size: small;
}

.breadcrumb a{
    color: #afafaf;
}

.breadcrumb a:last-child{
    color: #000000;
}

#footer{
    /* margin-top: 2em !important; */
    background-color: var(--blueFiniquito);
    bottom: 0;
}
#footer .row{
    margin-bottom: auto !important;
    display:flex;
    flex-wrap: wrap;
}
#footer #footerInfo{
    text-align: center;
    display: flex;
    align-items: center;
}

#footer #footerInfo a{
    color: var(--whiteFiniquito);
    text-decoration: none;
}

#footer #footerInfo a i{
    vertical-align: middle;
    font-size: 1.4em;
    padding-right: .2em;
}

/* Menú Movil */
    .nav-wrapper a{
        color: #000;
    }

    @media (max-width: 992px){
/*        color: red;*/
    }

/* Menú */
    #menu{
        background-color: var(--blueFiniquito) !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2em !important;
    }

    #menu ul{
        height: -webkit-fill-available;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #menu li a{
        font-weight: 500 !important;
        color: var(--whiteFiniquito) !important;
        font-size: var(--textSize) !important;
        text-align: center;
        transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
        line-height: 1.1em;
    }

    #menu li a i{
        height: 2px;
        line-height: var(--textSize);
        margin-left: 2px;
    }

    #menu li a:hover{
        background-color: transparent !important;
        /* border-radius: 5px; */
        padding: 5px 10px;
    }

    #menu li a::after {
        content: "";
        display: block;
        height: 2px;
        width: 0;
        background: var(--whiteFiniquito);
        margin-bottom: auto;
        transition: width 0.3s ease-in-out;
    }

    #menu  li a:hover::after {
        width: 100%;
    }

    #menu #dropdown-resource, #menu #dropdown-profile{
        height: auto;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        overflow: hidden;

        && a{
            text-align: left;
            color: var(--text) !important;
        }
    }

    #menu .dropdown-content{
         margin-left: 1.5em !important;
    }

    #menu #dropdown-resource a:hover, #menu #dropdown-profile a:hover{
        background-color: #fff !important;
    }

    #menu #dropdown-profile a {

        && svg, span{
            vertical-align: middle;
            cursor: pointer;    
        }
    }

    #menu #li-trigger li:hover, #menu #li-trigger a:hover,  #menu #li-trigger-profile li:hover, #menu #li-trigger-profile a:hover{
        background-color: transparent !important;
    }

    #menu .dropdown-trigger:hover::after, #menu .profile-btn:hover::after{
        background-color: transparent !important;
        height: 0px;
        width: 0px;
    }

    #menu {

        & .subscribe-btn:hover, .login-btn:hover, .profile-btn:hover{
            transition: none;
        }

        & .subscribe-btn::after, .login-btn::after, .profile-btn::after{
            background-color: transparent !important;
            height: 0px;
            width: 0px;
            margin-bottom: auto;
            padding: 0;
        }
    }

     /* Gradiente para botón Suscribirse */
    .gradient-btn-blue {
        background: linear-gradient(135deg, #00c6ff, #0072ff);
        border-radius: 30px;
        padding: 0 22px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 114, 255, 0.5);
        transition: all 0.3s ease;
    }

    .gradient-btn-blue:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 114, 255, 0.6);
    }

    .brand-logo{
        position: relative !important;
        margin-top: 3vh;
    }

    @media (max-height: 700px){
        .brand-logo{
            height: 65px;
            /* margin-top: 1.5%; */
            margin-left: 2%;
        }	
    }

    @media (min-height: 701px){
        .brand-logo{
            max-height: 9vh;
            /* margin-top: 1.5%; */
            margin-left: 2%;
        }
    }

/* FAQ */
    #faq{
        margin-top: 4%;
    }

    @media (max-width: 990px){
        #faq{
            margin-top: 14%;
        }
    }

/* Whatsapp */
    .btn-wsp{
        position: fixed;
        width: 55px;
        height: 55px;
        line-height: 58px;
        bottom: 30px;
        right: 30px;
        background-color: var(--primary);
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }

    .btn-wsp:hover{
        text-decoration: none;
        background-color: #fff;
        color: var(--primary);
    }

/* site/calculate */
    #specialWarning, #modalWarning {
        font-size: 1.4em;
    }

    #specialWarning i, #modalWarning i {
        font-size: 1.5em;
        vertical-align: middle;
        margin-right: 0.5em;
    } 
    
    #specialWarning p > span {
        font-weight: bold;
    }

    #resultDisplay{
        display: flex;
        align-items: center;
        color: #FFF;
        border-radius: 16px;
        background-color: var(--blueFiniquito);
        /* margin-left: 33%; */
        padding: 10px 0;
        gap: 16px;
        box-shadow: 0px 1.55px 15.5px 0px #0000001F;
        box-shadow: 0px 6.2px 7.75px 0px #00000024;
        box-shadow: 0px 3.1px 6.2px -1.55px #00000033;
        text-align-last: center;
    }

    #resultMsg h1{
        font-size: medium !important;
        text-wrap: balance;
	}
    
    .resultTitle{
        font-size: 24;
        font-size: 24px;
        font-weight: 700;
        line-height: 28.13px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin: 0.5em 0;
    }

    .resultValue{
        font-size: 35px;
        font-weight: 700;
        /* line-height: 46.88px; */
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin: 0.5em .5em;
    }

    @media( width <= 620px ){
        .resultTitle{
            font-size: 1.5em !important;
            text-align: center !important;
        }
        .resultValue{
            font-size: 1.9em !important;
        }
    }

    #calculateTop{
        background-color: #FFF;
        color: #000;

        && a{
            color: var(--blueFiniquito);
            text-decoration: underline;
        }
    }

    #calculateTop h3{
        font-weight: 600;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0px;
        vertical-align: middle;
    }

    #calculate {
        background-color: #EEF3FA;
        padding-top: 2em;
    }
    
    #resume h1, #titleView, .titleView{
        color: var(--blueFiniquito);
        font-size: 40px;
        font-weight: 700;
        line-height: 46.88px;
        text-align: center;
        vertical-align: middle;
    }

    #resume h2, .sectionTitle{
        font-size: 24px;
        font-weight: 600;
        line-height: 28.13px;
        text-align: left;
        color: var(--blackSemi) !important;
        padding: 0 0 20px 0;
        
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .slogan{
        color: #000000 !important;
        font-size: 16px;
        font-weight: 400;
        line-height: 18.75px;
        letter-spacing: 0px;
        text-align: center;
        vertical-align: middle;
    }

    .titleInput{
        font-size: 16px;
        /* font-weight: 500; */
        line-height: 22px;
        text-align: left;
        color: #000000 !important;
        margin-top: 1em 0;

        font-weight: 600;
        letter-spacing: 0px;
        vertical-align: middle;
    }

    #calculate input{
        height: 1.5em !important;
        margin-bottom: 1em;
    }

    /* #causalSection{
        padding: 0 0 1em 0 !important;
    } */

    #dateSection .card-content, #infoSection .card-content, #orderDetail .card-content{
        padding-top: .5em !important;
    }

    .date-start, .date-end{
        margin: 1em;
        padding: 0;
    }

input.select-dropdown.dropdown-trigger {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1.5em !important;
    max-width: -webkit-fill-available !important;
}

.dropdown-content li>a, .dropdown-content li>span{
    color: var(--text) !important;
}

.switch-label {
    color: var(--greyFiniquito);
    font-weight: normal;
    transition: font-weight 0.2s;
}

.switch-label.active {
    color: var(--text);
    font-weight: bold;
}

.card{
    background-color: #F9FBFF;
    padding: 0 0 2.0em 0 !important;
    padding: 0 1.5em 2.0em 0 !important;
    box-shadow: none;
}

#calculate-form .titleInput{
    font-size: 1em;
    font-weight: 600;
}

.blue-item{
    color: var(--blueFiniquitoItem);
}

.card-info{
    display: flex;
    align-items: center;
    border: 1px solid #ceeaf5;
    border-radius: 8px;
    background-color: #E3F7FF;
    color: #333;
    gap: 16px;
    padding: 4px 16px;
    margin-bottom: 2em;
    cursor: default;

    &&.errorWarning{
        background-color: #FFEBEE;
        border-color: #FFCDD2;
        color: #B71C1C;

        && i{
            color: #B71C1C;
        }

        && .card-info-text{
            color: #B71C1C;
        }
    }
}

#orderDetail .card-info{
    max-width: none;
}

.card-info i{
    color: var(--blueFiniquito);
}

.card-info-text{
    font-size: 1em;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--blackSemi);
}

#orderDetail .card-info-text{
    line-height: 1.1;
    margin-left: 1em;
}

.card-info-text-title{
    color: #000;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    margin: 0.5em 0 0 0;
}

.infoSection {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 3fr));
    gap: 20px; */
    /* padding: 20px; */
}

.isVariable{
    display: none;
}

#divHolidayExtraClass{
    border: 1px solid var(--blueBorder);
    border-radius: 8px;
    padding: 2em 2em;
    margin-top: 1.5em;
}

.holidayExtraClass > div:first-child{
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: .5em 0;
    align-items: center; */
}

#holidayExtra .holidayExtraClass > div{
    display: flex;
    align-items: center;
}

.holidayExtraClass{
    padding-top: 1em;
}

.holidayExtraClass div{
    padding-left: 0 !important;
}

.holidayExtraClass .holidayExtraClassStart {
    /* grid-column: span 2 / span 2; */
}

.holidayExtraClass .holidayExtraClassEnd {
    /* grid-column: span 2 / span 2; */
    /* grid-column-start: 3; */
}

.holidayExtraClass i {
    grid-column-start: 5;
    color: rgb(255, 73, 73);
    cursor: pointer;
}

.switch label input[type=checkbox]:checked+.lever:after {  
    background-color: var(--blueFiniquitoItem);
}

.switch label input[type=checkbox]:checked+.lever{
    background-color: var(--blueFiniquitoSubItem);
}

#calculate #holidaySection .card-info{
    max-width: none;
}

#EXTZONE_SET{
    margin-top: 0;
}

#calculate .buttonAction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blueFiniquito);
    background-color: transparent; /* Fondo blanco */
    border: 1px solid var(--greyFiniquito);; /* Borde azul */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* text-transform: uppercase; */
    margin-top: 1em;
    margin-left: 1em;
}

@media screen and (max-width: 660px) {
    #calculate .buttonAction{
        display: 100%;
        padding: 3px 5px;
    }

    #calculate .buttonAction .buttonAction-text{
        display: none;
    }
}

#calculate .buttonAction:hover {
    background-color: #e6f0ff; /* Fondo azul claro al pasar el mouse */
}

#calculate .buttonAction:active {
    background-color: #d0e4ff; /* Fondo más oscuro al presionar */
}

#calculate .buttonAction svg {
    width: 16px; /* Tamaño del icono */
    height: 16px;
    fill: #2f5ba8; /* Color del icono */
}

.infoIcon{
    color: var(--blueFiniquitoItem);
    cursor: help;
}

#calculate input[type="date"]{
    text-transform: uppercase;
}

#calculate input[type="date"]::-webkit-calendar-picker-indicator{
    filter: brightness(0) saturate(100%) invert(26%) sepia(84%) saturate(1086%) hue-rotate(197deg) brightness(89%) contrast(86%); /* Similar al --blueFiniquitoItem */
}

#calculate #holidayExtra div{
    margin: .2em 0;
}

.btnSection{
    background-color: var(--blueFiniquito) !important;
    text-transform: uppercase;
    font-weight: 300 !important;
    align-content: center;
}

.btnSection-orange{
    background-color: var(--orangeFiniqutoL) !important;
}

.btnSectionSecondary{
    border-radius: 8px;
    border-color: transparent;
    background-color: var(--blueFiniquitoSecondary);
    padding-top: 7px;
    padding-right: 22px;
    padding-bottom: 7px;
    padding-left: 22px;
    color: #FFF;
    vertical-align: middle;
    cursor: pointer;

    &&:hover{
        background-color: var(--blueFiniquito) !important;
        color: #FFF;
    }
    
    && svg{
        /* Se implementó el CSS en el mismo elemento, por temas de compatibilidad en dispositivos de menor tamaño. */
    }
}

.btnSectionSecondary:focus, .btnSectionSecondary:active{
    background-color: var(--blueFiniquitoSecondary) !important;
}

#calculate .modal{
    z-index: 99;
}

#calculate #modalTypeWorker{
    width: 40vw !important;
}

#calculate #modalTypeWorker .btnSection{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

#calculate #modalTypeWorker svg, #resume #modalExample svg{
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}
#calculate .modal .modal-close, #resume .modal .modal-close{
    color: var(--blueFiniquitoItem);
    text-transform: uppercase;
}

#calculate #modalResume{
    width: 60vw !important;
    max-height: 95vh;
    top: 2% !important;
}

@media screen and (width <= 600px){
    #calculate #modalResume{
        width: 90vw !important;
    }
}

#calculate #modalResume h1{
    margin-bottom: 0;
}

#calculate #modalResume p, #calculate #modalResume li, #resume #resumeDetail p, #orderDetail #orderResume p, #orderResume li{
    text-align: left;
}

#calculate #modalResume ul{
    padding-left: 2.5em;
}

/* #calculate #modalResume li, #orderResume li{
    list-style-type: disc;
} */

#calculate #modalResume span, #resume #resumeDetail span, #orderDetail #orderResume span{
    font-weight: 700;
}

#calculate #modalResume #resumeButtonSection .row{
    margin-bottom: .5em;
}

@media screen and (width <= 500px ) {
    #resumeButtonSection div:first-child{
        justify-content: flex-start !important;
    }
}

#calculate #modalResume #resumeFieldHolidaysTable li{
    line-height: 1.5em;
}

#calculate #modalResume .textTable{
    margin-bottom: 0;
}

#calculate .modal h1{
    font-size: 18px;
    font-weight: 400;
    line-height: 21.78px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--text);
}

#calculate .modal p, #calculate .modal li{
    /* font-family: Inter; */
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    letter-spacing: 0.15000000596046448px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--text);
}

.modal .closeModal{
    filter: brightness(0) saturate(100%) invert(26%) sepia(84%) saturate(1086%) hue-rotate(197deg) brightness(89%) contrast(86%); /* Similar al --blueFiniquitoItem */
}

.holidaysTable li{
    list-style-type: disc !important;
    margin-left: 2.5em;

}

#resume #resumeDetail p{
    color: var(--text);
    /* font-family: Roboto; */
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

#resume #resumeDetailInfo{
    background: none !important;
}

#resume #resumeDownload .card, #cardPlansContainer .card, #cardPlansContainerSmall .card, .cardElementOption{
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    padding: initial !important;
}

#resume #resumeDownload .card-header, .cardElementOption .card-header{
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px;
}

#resume #resumeDownload .card-header.orange, .cardElementOption .card-header.orange{
    background-color: #ff5722 !important;
}

#resume #resumeDownload .card-header.green, .cardElementOption .card-header.green{
    background-color: #069573 !important;
}

#resume #resumeDownload .card-header.blue, #cardPlansContainer .card-header.blue, #cardPlansContainerSmall .card-header.blue, .cardElementOption .card-header.blue{
    background-color: var(--blueSkyFiniquito) !important;
}

#resume #resumeDownload h3 {
    /* font-family: Roboto; */
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0px;
    text-align: center;
}

.cardElementOption h3 {
    /* font-family: Roboto; */
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0px;
    text-align: center;
}

@media(width <= 992px){
    #resume #resumeDownload #resumeDownloadOptions{
        gap: 2em;
    }
}

@media(width <= 600px){
    #resume #resumeDownload #resumeDownloadOptions{
        display: grid;
        justify-content: center !important;
    }
}

#resume #resumeDownload .card, .cardElementOption .card{
    margin-left: 0;
    display: flex;
    flex-direction: column;
}

#resume #resumeDownload .card-price p, .cardElementOption .card-price p{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}

#resume #resumeDownload .card-list ul, .cardElementOption .card-list ul{
    list-style: none;
    padding: 0;
    text-align: left;
}

#resume #resumeDownload .card-list li, .cardElementOption .card-list li{
    margin-bottom: 10px;
    display: flex;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6em;
}

#resume #resumeDownload .card-list li i {
    margin-right: 10px;
}

@media( 660px <= width <= 992px){
    #resumeDownloadOptions .card-list {
        min-height: 9em;
    }
}

@media( 990px <= width <= 1200px){
    #resume #resumeDownload .card-header-first-item, .cardElementOption .card-header-first-item{
        margin-bottom: 0 !important;
    }
}

#resume #resumeDownload .card-footer, .cardElementOption .card-footer{
    margin-top: auto;
    /* position: absolute; */
    position-area: center;
    margin-bottom: 2em;
}

.exampleLink{
    color: var(--blueFiniquitoItem);
    text-decoration: underline;
}

/* #resume #resumeContactUs .card{
    background-color: var(--blueFiniquitoSecondary);
    margin-top: 20px;
    margin-bottom: 20px;
}

#resume #resumeContactUs .card-content p{
    color: var(--whiteFiniquito);
    margin-bottom: 10px;
    font-size: var(--text);
}

#resume #resumeContactUs .card-content a{
    color: var(--blueFiniquitoItem) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
} */

#resumeContactUs{
    background-color:#e2e8f0; 
    padding: 2em 0;

    && h2{
        text-align:center; 
        margin-bottom: .5em;
        padding-bottom: 0;
    }

    && p{
        color:#000;
    }

    && i{
        font-size: 1.1em;
    }

    && a{
        vertical-align: middle;
    }
}
@media (width < 370px ){
    #resumeContactUs a{
        font-size: 0.8em !important;
    }
}

#resumeFaq{
    && .itemFaq{
        background:#ffffff; 
        border:1px solid #cbd5e1; 
        border-radius:10px; 
        padding:1rem 1.25rem
    }

    && summary{
        font-weight:600; 
        cursor:pointer
    }

    && strong{
        font-weight: bold;
    }
    
}
.itemFaq + .itemFaq{
    margin-top:1rem
}

#orderDetail #orderResume p{
    color: var(--text);
}

.noteImportant{
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    
    & p{
        max-height: 3.6em; /* ≈ 2 líneas (1.8em por línea aprox) */
        overflow: hidden;
        margin-bottom: 0;
    }
    && p.expandedText {
        max-height: none;
    }
}

@media (width > 700px){
    .noteImportant p{
        max-height: none;
    }
}

#callback{
    padding: 1em 0 0 2em;
}

#callbackAction{
    display: flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    color: #6c6c6c;
    font-weight: 500;
    cursor: pointer;
}

#callbackAction i{
    font-size: .9em;
}


#buttonSection{
    padding-top: 5vh;
}

.skipToolTip{
    cursor: default;
}

.material-tooltip{
    background-color: #616161;
    max-width: 30em;
    text-align: left;
    border-radius: 10px;
}

#buttonTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: white;
    border: 3px solid #002f5f; /* azul oscuro */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #002f5f;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
  }

  #buttonTop i {
    font-weight: 900;
    font-size: 1.1em;
  }

  #buttonTop:hover {
    background-color: #002f5f;
    color: white;
  }

.pagination li.active{
    background-color: var(--blueFiniquito)
}

#cardPlansContainer .btn-group .btn-flat.active, #cardPlansContainerSmall .btn-group .btn-flat.active {
    background-color: #e3f2fd;
    border-bottom: 2px solid    #0d47a1;
}

#cardPlansContainer .price, #cardPlansContainerSmall .price {
    font-weight: bold;
}


#cardPlansContainer .card-header, #cardPlansContainerSmall .card-header {
    padding: 4px;
}

#cardPlansContainer h4, #cardPlansContainerSmall h4 {
    font-size: clamp(1rem, 2.2308rem + -0.4103vw, 1.8rem);
}

#modalPlans{
    /* width: 40vw !important; */
    width: clamp(480px, 40vw, 520px) !important;
    max-height: 95%;
}

#modalPlans h4{
    margin-bottom: 0;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 1.2em;
}

#modalPlans button span {
    color: #FFF;
    cursor: pointer !important;
}

#modalPlans button {
    text-transform: none !important;
}

#footerModalPlans{
    margin-bottom: 5px !important;
}

#hirePlan{
    padding-bottom: 3em;
}

#hirePlan a{
    color: var(--blueFiniquito);
}

#hirePlan p{
    color: var(--text);
}

#hirePlan #totalHire{
    font-size: 1.5em;
}

#divCreate, #divUpdate {
    padding-bottom: 2em;
    
    && h4{
		font-weight: bolder;
		letter-spacing: 2px;
	}
}

/* Evitar que se seleccione el elemento */
summary, .collapsible-header{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/** MARK: MODAL GLOBAL **/
#modalGlobalContact{
    max-width: 40vw;
    max-height: 80vh;
}

@media( width < 1000px ){
    #modalGlobalContact{
        max-width: 60vw;
    }
}

@media( width < 700px ){
    #modalGlobalContact{
        max-width: 80vw;
        max-height: 90vh;
    }
}

#modalExample {
    height: fit-content !important;
    max-height: 92vh;
    top: 5% !important;
}

#modalExample embed {
    width: 100%;
    height: 60vh;
}

#modalExample .tabs{
    background-color: #0000000a;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    && .tab a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;

        &&.active{
            background-color: #0e54af38;
        }
    } 
}
    
#modalExample .tab-example{
    padding-top: 1em !important;
}

#modalExample .indicator{
    display: none;
}

.lists{
    padding-left: 1.1em !important;

    && li{
        list-style: disc !important;
        font-size: .9em;
    }
}

.split-sections{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:1rem;
    margin:3.5rem 0 1.5rem;
   
    && span{
      font-size:1.35rem;      /* más grande */
      font-weight:800;
      color:var(--headline);
      letter-spacing:.1px;
      white-space:nowrap;
    }
}

.split-sections::before, .split-sections::after{
    content:"";
    height:2px;
    background:linear-gradient(90deg, transparent 0%, #cbd5e1 20%, #cbd5e1 80%, transparent 100%);
    border-radius:2px;
}

@media(width <= 992px){
    #resumeDownloadFirst{
        margin-left: auto !important;
        padding-left: inherit !important;
    }
}

@media(width <= 992px){
    #cardPlansContainer .card-content-phrases{
        min-height: 6em !important;
    }
}

@media(width <= 660px){
    #cardPlansContainer .card-content-phrases, #cardPlansContainerSmall .card-content-phrases{ 
        min-height: 3em !important;
    }

    #resumeDownloadOptions .card-content-phrases{
        min-height: 3em !important;
    }
}

@media( 662px < width < 992px ){
    #resumeDownloadOptions .card-content-phrases{
        min-height: 3lh !important;
    }
}

@media( 992px < width < 1200px ){
    #resumeDownloadOptions .card-content-phrases{
        min-height: 4lh !important;
    }
    #resumeDownloadOptions .card-list-first{
        min-height: 4lh;
    }
}

@media( 1200px < width < 1350px ){
    #resumeDownloadOptions .card-content-phrases{
        min-height: 3lh !important;
    }
    #resumeDownloadOptions .card-list-first{
        min-height: 3lh;
    }
}

@media( 1450px <= width ){
    #resumeDownloadOptions .card-content-phrases span{
        height: calc(1.5em * 2);
        display: block;
    }
    #resumeDownloadOptions .card-list-first{
        min-height: 2lh;
    }
}

/* Tamaños: */
/* sm: width <= 662px */
/* md: width <= 992px */
/* lg1024: width <= 1200px */
/* lg2048: width <= 1350px */
/* xl: width <= 1460px */
/* 2xl: width >= 1460px */