#main {
    min-width: 340px;
}

.panel-container {
    width: 100%;
    min-height: calc(100vh - var(--alto-info-bar-container));
    display: flex;
    justify-content: center;
}

/*Panel Main*/

.panel {
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.panel--active {
    display: flex;
}

.panel-main {
    /*display: flex;*/
    gap: 15px;
    flex-direction: column;
    /*padding-top: 40px;*/
    max-width: 1500px;
}

.panel-main__form {
    flex: 40%;
    display: flex;
    /*gap: 24px;
    flex-direction: column;
    /*padding: 60px 40px;*/
    padding: 30px;
}

.panel-main__icon {
    flex: 60%;
    display: flex;
    justify-content: end;
    align-items: end;
}

    .panel-main__icon > img {
        width: 100%;
    }

.welcom-text {
    font-size: 30px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}
.welcom-text-10 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: justify;
    color: #FFFFFF;
}

    .welcom-text span {
        color: #FFFFFF;
    }

.info-folio {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .info-folio > p,
    .info-folio > label {
        /*width: 100%;*/
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 300;
        /*text-align: right;*/
    }

.send-folio {
    align-self: flex-start;
    padding: 10px 50px !important;
}

@media only screen and (min-width: 700px) {
    .welcom-text {
        font-size: 40px;
    }

    .panel-main {
        flex-direction: row;
        /*padding: 30px 0 0 40px;*/
    }

    .panel-main__form {
        padding: 40px;
        padding-right: 0;
    }
}


@media only screen and (min-width: 1400px) {
    .welcom-text {
        font-size: 50px;
    }

    .info-folio > p,
    .info-folio > label {
        font-size: 20px;
    }
}
/*Incio Sears*/

.panel-inicio-container {
    width: 100%;
    height: var(--alto-panel-inicio-container);
    padding: 20px 20px 30px;
    align-items: flex-start;
    background-color: #EA0029;
    flex-direction: column;
    align-items: center;
}

.panel-inicio {
    display: flex;
    width: 100%;
    /*height: 100%;*/
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 30px;
    max-width: 1100px;
    flex-direction: column;
    gap: 30px;
    display:flex;
}

   /* .panel-inicio > img {
        object-fit: cover;
    }*/

.panel-inicio-label {
    font-size: 25px;
    color: #EA0029;
    font-weight: 500;
}

.gallery {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* **Centra** las imágenes horizontalmente */
    padding: 10px; /* Un poco de espacio alrededor */
    margin: 0 auto; /* Opcional: Centra el contenedor principal */
}

/* Estilos para cada Imagen/Elemento */
.image-item {
    /* Calcula el ancho para que 4 elementos quepan en una fila (100% / 4) = 25% menos un margen para la separación */
    width: calc(20% - 20px);
    margin: 10px; /* Margen para separar las imágenes entre sí */
    box-sizing: border-box; /* Asegura que el padding/margin no altere el 25% */
}

    /* Asegura que la imagen dentro del contenedor sea responsiva */
    .image-item img {
        width: 100%; /* La imagen ocupa el 100% del contenedor image-item */
        height: auto; /* Mantiene la proporción */
        /*display: block;*/ /* Elimina espacio extra debajo de las imágenes */
        border-radius: 5px; /* Opcional: bordes redondeados */
    }

.img-normal {
    display: block;
}

.img-hover {
    display: none;
}

.image-item:hover .img-normal {
    display: none;
}

.image-item:hover .img-hover {
    display: block;
}

/* 📱 Media Query para Teléfonos (Pantallas Pequeñas: Menos de 400px) */
@media (max-width: 400px) {
    .image-item { /* En pantallas muy pequeñas, muestra solo 1 imagen por fila (100%) */
        width: calc(100% - 20px);
    }
}

/* 💻 Media Query para Tablets (Pantallas Medianas: Entre 401px y 600px) */
@media (min-width: 401px) and (max-width: 600px) {
    .image-item {
        /* En tablets, muestra 2 imágenes por fila (50%) */
        width: calc(50% - 20px);
    }
}

/* 💻 Media Query para Tablets (Pantallas Medianas: Entre 601px y 750px) */
@media (min-width: 601px) and (max-width: 750px) {
    .image-item {
        /* En tablets, muestra 2 imágenes por fila (50%) */
        width: calc(33% - 20px);
    }
}

/* 💻 Media Query para Tablets (Pantallas Medianas: Entre 751px y 900px) */
@media (min-width: 751px) and (max-width: 900px) {
    .image-item {
        /* En tablets, muestra 2 imágenes por fila (50%) */
        width: calc(25% - 20px);
    }
}

.send-inicio {
    align-self: center;
    padding: 10px 50px !important;
}

/*Titular*/

.panel-titular-container {
    width: 100%;
    height: 100%;
    padding: 20px 20px 30px;
    align-items: flex-start;
    background-color: #FFFFFF;
}

.panel-titular {
    display: flex;
    width: 100%;
    /*height: 100%;*/
    background-color: #EA0029;
    border-radius: 20px;
    padding: 30px;
    max-width: 1100px;
    flex-direction: column;
    gap: 30px;
}

.panel-titular-label {
    font-size: 25px;
    color: #FFFFFF;
    font-weight: 500;
}

.titular-form__reversed {
    flex-direction: column-reverse
}

.send-titular {
    align-self: center;
    padding: 10px 50px !important;
}

/*----- genero input -----*/
.genero__container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.genero__option {
    /*width: 160px;*/
    /*height: 180px;*/
    border-radius: 20px;
    /*border: 1px solid #BEC9CC;*/
    background: #0000001a;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding: 10px 30px;*/
    padding: 10px 20px;
    gap: 10px;
    cursor: pointer;
}

.genero__input {
    display: none;
}

.genero__option__fake {
    align-self: end;
    width: 24px;
    height: 24px;
    background-color: white;
    border: 1px solid#BEC9CC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.genero__option__label {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
}

.genero__img {
    height: 80px;
}

/*.genero__option .genero__input:checked ~ .genero__option__label {
    color: #0AD1AB;
    font-weight: 700;
}*/

.genero__option .genero__input:checked ~ .genero__option__fake {
    background-color: #0D2E55;
}

/*.genero__option:is(:has(.genero__input:checked)) {
    border-radius: 8px;
    border: 1px solid #0AD1AB;*/
/*background: #FFF;*/
/*box-shadow: 0px 0px 10px 0px rgba(10, 209, 171, 0.61);
}*/
/*----- genero input -----*/

@media only screen and (min-width: 700px) {
    .panel-titular {
        /*width: 90%;*/
    }

    .titular-form__reversed {
        flex-direction: row;
    }

    .send-titular {
        align-self: flex-end;
    }

    .genero__option {
        padding: 10px 30px;
    }

    .genero__img {
        height: 96px;
    }

    .genero__option__label {
        font-size: 20px;
    }
}

/*confirmar token*/

.panel-confirmar {
    /*padding: 30px;*/
    padding-bottom: 0;
    /*display: flex;*/
    width: 100%;
    /*height: 100%;*/
    /*max-width: 700px;*/
    /*flex-direction: column;*/
    /*gap: 30px;*/
    /*align-items: flex-start;*/
}

.confirm-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}

.confirm-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    padding: 60px 30px 30px;
    max-width: 600px;
}

.confirm-text {
    /*width: 100%;*/
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 300;
    text-align: center;
}

.send-again {
    /*width: 100%;*/
    color: white;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.confirm-img-bottom-wrapper {
    margin-top: auto;
    width: 100%;
    max-width: 700px;
}

.confirm-img-web {
    width: 100%;
    display: none;
}

.confirm-img-mobil {
    width: 100%;
}

@media only screen and (min-width: 700px) {
    .confirm-text {
        font-size: 40px;
    }

    .panel-confirmar {
        /*align-items: flex-start;*/
    }

    .panel-titular-label {
        font-size: 35px;
    }

    .confirm-img-web {
        display: block;
    }

    .confirm-img-mobil {
        display: none;
    }

    .confirm-wrapper {
        padding-bottom: 0;
    }
}



/*Panel dependiente*/

.panel-dependientes-container {
    /*width: 100%;*/
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

    .panel-dependientes-container .dependiente-container-img {
        width: 100%;
        /*flex: 1;*/
        /*margin-top: -100px;*/
        display: flex;
        align-items: flex-end;
    }

        .panel-dependientes-container .dependiente-container-img .dependiente-img-web {
            width: 100%;
            display: none;
        }

        .panel-dependientes-container .dependiente-container-img .dependiente-img-mobil {
            width: 100%;
        }

.panel-dependientes-wrapper {
    width: 100%;
    z-index: 9; /*1*/
    padding: 30px;
}

.panel-dependientes {
    display: flex;
    width: 100%;
    background-color: #EA0029;
    border-radius: 20px;
    padding: 30px;
    max-width: 1100px;
    flex-direction: column;
    gap: 30px;
    /**/
    /*min-height: 90%;*/
    /*margin-left: 20px;
    margin-right: 20px;*/
    /*margin-bottom: 30px*/
}

.panel-dependientes-label {
    font-size: 25px;
    color: white;
    font-weight: 500;
}

.dependientes__container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dependientes__form,
.dependientes__form--buttons {
}

.dependientes__container > :first-child label {
    display: block;
}

.dependientes__form__label {
    color: white !important;
    margin-bottom: 24px !important;
}

.dependientes__remove {
    display: flex;
    justify-content: flex-start;
}

.dependientes__remove__icon {
    border-radius: 18px;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    background-color: #FFFFFF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

    .dependientes__remove__icon > .remove-icon {
        display: none;
    }

    .dependientes__remove__icon > .remove-text {
        color: #0D2E55;
        display: block;
    }

.button__add-dependiente {
    align-self: flex-start;
    padding: 10px 20px !important;
    color: #EA0029 !important;
    font-weight: 500 !important;
}

.button__send-dependientes {
    align-self: center;
    padding: 10px 50px !important;
    /*color: white !important;*/
    font-weight: 500 !important;
}

.button__omitir-dependientes {
    align-self: center;
    padding: 10px 50px !important;
    /*color: white !important;*/
    background-color: white !important;
    font-weight: 500 !important;
    transition: 0.3s ease
}

    .button__omitir-dependientes:hover {
        background-color: #FFFFFF !important;
        /*color: #EA0029 !important;*/
    }

.dependiente__aux-element__hidde {
    display: none;
}

.dependiente__hidde {
    display: none;
}

@media only screen and (min-width: 700px) {
    .dependientes__form, .dependientes__form--buttons {
        max-width: 90%;
    }

    .panel-dependientes-label {
        font-size: 35px;
    }

    .dependientes__form__label {
        display: none;
    }

    .dependientes__remove {
        justify-content: center;
        align-items: center;
    }

    .dependientes__remove__icon {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
    }

        .dependientes__remove__icon > .remove-icon {
            display: block;
        }

        .dependientes__remove__icon > .remove-text {
            display: none;
        }

    .button__add-dependiente {
        padding: 10px 50px !important;
    }

    .button__send-dependientes {
        align-self: flex-start;
    }

    .button__omitir-dependientes {
        align-self: flex-end;
    }

    .dependiente__aux-element__hidde {
        display: flex;
    }

    .panel-dependientes-container .dependiente-container-img .dependiente-img-web {
        display: block;
    }

    .panel-dependientes-container .dependiente-container-img .dependiente-img-mobil {
        display: none;
    }

    .panel-dependientes-container .dependiente-container-img {
        /*Se utilizan cuando esta fijo*/
        /*flex: 1;*/
        /*margin-top: -100px;*/
        /**/
        width: 45%;
        max-width: 600px;
        display: flex;
        align-items: flex-end;
        position: absolute;
        bottom: 0;
    }
}


/*Beneficios*/

.panel-beneficios-container {
    width: 100%;
    height: 100%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.beneficios-wrapper {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.beneficios-info {
    /*flex: 50%;*/
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.beneficios-welcome {
    font-size: 45px;
    font-weight: 300;
    color: #EA0029;
    line-height: 1.2;
}

.beneficios-text {
    font-size: 25px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.2;
}

.beneficios-img, .beneficios-steps-container {
    /*flex: 50%;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.beneficios-steps-container {
    flex-direction: column;
    gap: 30px;
}

.beneficios-img img {
    width: 100%;
    max-width: 400px;
}

.beneficios-button-container,
.beneficios-button-back--web,
.beneficios-button-back--mobil {
    align-items: center;
    max-width: 300px;
    align-self: center;
}

.beneficios-button-back--web {
    display: none;
}

.beneficios-button-back--mobil {
    max-width: 200px;
}



.beneficios-button,
.beneficios-button__blue {
    border: 3px solid #FFFFFF;
    background-color: white;
    font-size: 18px;
    color: #EA0029;
    padding: 10px 50px;
    border-radius: 19px;
    width: 100%;
    cursor: pointer;
    /*padding: 10px 50px !important;*/
}

.beneficios-button__blue {
    border: 3px solid #EA0029;
    background-color: #EA0029;
    color: white;
}

    .beneficios-button__blue::after {
        content: url('../static/arrow-down.svg');
        height: 14px;
        /*position: absolute;
        right: 20px;*/
        margin-left: 15px;
    }

.Input__list--beneficios {
    /*width: 100%;*/
    /*max-width: 300px;*/
    max-height: 200px;
    /*padding: 15px;*/
    background-color: white;
    border: 1px solid #DCDCDC;
    /*border-radius: 5px;*/
    border-radius: 0 0 5px 5px;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: 99; /*2*/
    /* left: 0;
    top: 55px;*/
    /*bottom: 0;*/
}

    .Input__list--beneficios > p {
        width: 100%;
        padding: 10px;
        font-weight: 500;
        border-bottom: 1px solid rgb(187, 187, 187);
        /*cursor: pointer;*/
        color: #EA0029;
        line-height: 1.2;
    }

.beneficios-steps {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 20px 20px 20px;
    margin-top: 30px;
}

    .beneficios-steps > .step-number {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background-color: #EA0029;
        color: white;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: 700;
        top: -30px;
        left: calc(50% - 30px);
    }

    .beneficios-steps > .step-text {
        font-size: 20px;
        color: #EA0029;
        line-height: 1.2;
        text-align: center;
        width: 100%;
    }

@media only screen and (min-width: 700px) {
    .beneficios-wrapper {
        /*height: auto;*/
        max-width: 1500px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .beneficios-welcome {
        font-size: 50px;
    }

    .beneficios-text {
        font-size: 30px;
    }

    .beneficios-info,
    .beneficios-img,
    .beneficios-steps-container {
        flex: 50%;
    }

        .beneficios-img img {
            max-width: none;
        }

    .beneficios-button-container {
        max-width: 350px;
        align-self: self-start;
    }

    .beneficios-button-back--web {
        display: block;
        max-width: 200px;
        align-self: self-start;
    }

    .beneficios-button-back--mobil {
        display: none;
    }

    .beneficios-steps {
        margin-left: 40px;
        max-width: 470px;
        padding: 40px 80px;
        min-height: 120px;
        margin-top: 0;
    }

        .beneficios-steps > .step-number {
            left: -40px;
            top: auto;
            height: 80px;
            width: 80px;
            font-size: 40px;
        }

        .beneficios-steps > .step-text {
            font-size: 16px;
            text-align: left;
        }
}

@media only screen and (min-width: 1400px) {
    .beneficios-welcome {
        font-size: 60px;
    }

    .beneficios-text {
        font-size: 40px;
    }
}


#cvsSignaturePad {
    border: 1px solid #000;
    width: 380px;
    height: 250px;
    color: white;
    display: block;
    offset-position: center;
}