/* Fondo general */
body {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 100vh;
    background-position: top left, bottom left !important;
    background-size: 100%, 100% !important;
    background-repeat: repeat-x, repeat-x !important;
    background: #FFF;
    margin: 0;
    padding: 0;

    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #616160;
}

.lineas_index {
    display: block;
    position: fixed;
    height: 10vh;
    bottom: 21px;
    left: 0;
    z-index: 0;
}

.logo-fresenius {
    position: fixed;
    bottom: 21px;
    right: 21px;
}

.background_shadow {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.max-width-login {
    max-width: 100% !important;
    width: 540px !important;
}

#logo {
    /*box-shadow: 0px 242.174px 67.727px 0px rgba(125, 1, 75, 0.01), 0px 155.977px 61.57px 0px rgba(125, 1, 75, 0.04), 0px 88.25px 53.36px 0px rgba(125, 1, 75, 0.15), 0px 38.994px 38.994px 0px rgba(125, 1, 75, 0.26), 0px 10.262px 20.523px 0px rgba(125, 1, 75, 0.29);*/

    /*filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));*/

}


/* COntenedor codigo*/
.code-container {
    width: 320px;
    max-width: 100%;
    padding: 0;
}

.code-container p {
    color: #FFF;
    font-family: "Regular";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}


/* Contenedor principal del login */
.login-container {
    display: flex;
    width: 463px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    /* Espaciado entre el logo y el frame */
    overflow-y: auto;
    display: none;
}

.login-container p {
    color: #FFF;
    font-family: "Regular";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

/* Imagen en la esquina superior izquierda */
.corner-image {
    position: absolute;
    width: 240px;
    /* height: 104px; */
    opacity: 1;
    z-index: 0;
    margin-top: 0px;
    left: 0px;
}

.corner-image img {
    width: 240px;
}

/* Logo centrado */
.logo-container {
    padding: 0;
    padding-top: 31px;
    text-align: center;
}

.logo-container img {
    width: 540px;
    max-width: 100%;
    height: auto;
}

/* Frame de login */
.login-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

/* Grupo de título */
.title-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0px;
    /* Sin separación entre título y subtítulo */
}

/* Texto "BIENVENIDO" */
.welcome-text {
    color: var(--azul-01, #0063BE);
    font-feature-settings: 'liga'off;

    /* h2/bold */
    font-family: "Nunito Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
}

/* Subtítulo debajo de "BIENVENIDO" */
.subtitle-text {
    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;
}


input {
    width: 100%;
    height: 44px;
    padding: 8px 10px 8px 16px;
    background: #FFFFFF;
    border-radius: 40px;
    border: 2px solid #0063BE;
    outline: none;

    color: var(--azul-02, #0C2863);

    /* Body/bold */
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

input::placeholder {
    font-size: 24px;
    color: #58585B;
    -webkit-text-fill-color: #58585B;
}

input:focus {
    /* border: 3px solid #002F6C;
    -webkit-box-shadow: 0 0 8px 1000px #F7F7F7 inset; */
}

input:hover {
    /* -webkit-box-shadow: 0 0 0px 1000px #F7F7F7 inset; */
}

input:read-only {
    background: transparent;
    -webkit-box-shadow: none !important;
    border: 3px solid transparent !important;
    padding: 10px 20px;
    border: none;
    outline: none;
}

.no_shadow {
    background: #FFF;
    border-radius: 100px;
    border: 2px solid #3B6C95;
}


input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #2c6cb0;
    /* Azul similar al de la imagen */
    cursor: pointer;
    box-shadow: none;
    margin-bottom: 0px;
}

input.error {
    border: 2px solid red !important;
}


select {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    background: #FFF;
    padding: 12px 18px;
    border-radius: 100px;
    border: 2px solid #3B6C95;
    outline: none;

    appearance: none;
    /* Para la mayoría de navegadores modernos */
    -webkit-appearance: none;
    /* Safari / Chrome */
    -moz-appearance: none;
    /* Firefox */
    background: none;
    padding-right: 1em;
}

.label-input {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;

    padding: 0 0 8px 0;

    color: var(--azul-02, #0C2863);
    font-feature-settings: 'liga'off;

    /* Body/bold */
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.div_checkbox {
    font-size: 18px;
    color: #4a4a4a;
    display: flex;
    gap: 10px;
    color: var(--Text-500, #58585B);

    /* párrafo extra small/regular */
    font-family: "Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

/* Inputs transparentes dentro de imágenes */
.input-transparent {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #323234;
    outline: none;
    /* Evitar bordes al enfocar */
}

/*Contenedor de botoens*/
.bottons_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    margin-top: 14px;
}

/* Botón "Iniciar sesión" */
.btn-login {
    display: flex;
    height: 48px;
    padding: 10px 60px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    background: var(--azul-01, #0063BE);
    box-shadow: 0 8px 14px 0 rgba(12, 40, 99, 0.20);

    color: var(--Supporting-blanco, #FFF);
    text-align: center;
    font-feature-settings: 'liga'off;

    /* Title/bold */
    font-family: "Nunito Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
    margin: auto;
    margin-bottom: 100px;
}

.btn-login:hover {
    background: #0C2863;
}

/* Botón "Cancelar" */
.btn-cancelar {
    display: flex;
    padding: 10px 30px;
    justify-content: center;
    align-items: center;
    gap: 12px;

    width: fit-content;
    padding: 8px 18px;
    background: #FFF;
    border-radius: 100px;
    border: 2px solid #E9BA2E;
    cursor: pointer;
    transition: all 0.1s ease;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #002855;
}

.btn-cancelar:active {
    background: #FFE38F;
    transform: scale(0.96);
}

/* Boton desactivado */
.disabled {
    pointer-events: none;
    opacity: 0.2;
}


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

/* Enlace "Olvidé mi contraseña" */
.forgot-password-link {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    color: #FFF;
}

.challenges-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #FFF 0%, #FFF 100%);
    margin: 4px auto;
    /* Centrar y separar elementos */
}

.challenges-line-yellow {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #E9BA2E 0%, #E9BA2E 100%);
    margin: 10px 0 24px 0;
    /* Centrar y separar elementos */
}

.not-registered-label {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    color: #FFF;
}

#resetForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 18px;
}

.corner-down-image {
    position: absolute;
    bottom: 20px;
    /* Alineado al fondo del contenedor */
    right: 20px;
    /* Mismo padding que la imagen de la esquina izquierda */
    display: none;
    align-items: center;
    /* Centrado vertical con el botón */
    justify-content: flex-end;
    width: 103px;
    /* Ancho de la imagen */
    height: 104px;
    /* Altura de la imagen */
    z-index: 1;
}

.corner-down-image2 {
    display: flex;
    position: absolute;
    bottom: -20px;
    right: -10px;
    /* Mismo padding que la imagen de la esquina izquierda */
    align-items: center;
    /* Centrado vertical con el botón */
    justify-content: flex-end;
    width: 103px;
    /* Ancho de la imagen */
    height: 104px;
    /* Altura de la imagen */
    z-index: 1;
}

.corner-down-image img {
    width: 100%;
    /* Ajusta al ancho del contenedor */
    height: auto;
    /* Mantiene proporciones */
}

/* Enlaces */
a {
    font-size: 14px;
    color: var(--Primary-azul-500, #0074BE);
}

/* Sección de párrafos */
.info-section {
    display: flex;
    padding: 40px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(180deg, rgba(0, 62, 102, 0.60) 0%, rgba(9, 9, 25, 0.60) 54.38%);
}

/* Párrafo regular */
.paragraph-regular {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #353535;
    margin: 0;
}

/* Párrafo bold */
.paragraph-bold {
    font-family: "Regular", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 133.333% */
    color: var(--Primary-verde-500, #D3DF4E);
    margin: 0;
}

.eye {
    position: absolute;
    right: 10px;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
}

.usuario {
    position: absolute;
    left: 25px;
    top: 55%;
    transform: translateY(10%);
    cursor: pointer;
}


/* Formulario de registro oculto con animación */
.registro-container {
    position: fixed;
    top: 300%;
    /* Oculto al inicio */
    left: 50%;
    max-width: 100%;
    height: 100vh;
    transition: top 0.5s ease-in-out;
    z-index: 100;
    overflow-y: auto;

    display: flex;
    width: 1152px;
    padding: 40px 20px 40px 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transform: translateX(-50%);

    border-radius: 20px 20px 0 0;
    background: var(--blanco, #FFF);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);
}

.registro-container .label-input {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;

    padding: 0 0 8px 0;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #001A37;
}

.register_field {
    margin-bottom: 14px;
}

/* Mostrar el formulario */
.mostrar {
    top: 3%;
}

/* Botón de cerrar */
.cerrar {
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    float: right;
}

#cerrarRegistro {
    position: absolute;
    top: -6px;
    right: -1px;
    cursor: pointer;
}

#avatars_container {
    display: none;
    border: none;
    box-shadow: none !important;
}

.img_close_avatars {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.img_close_avatars:active {
    opacity: 0.7;
    transform: scale(0.97);
}

#avatars_container h2 {
    margin: 0;
    padding-bottom: 12px;

    font-family: "Nunito Sans", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    color: #3B6C95;
    padding-bottom: 0;
}

.avatars_buttons {
    display: flex;
    flex-direction: column;

    height: calc(100vh - 190px - 3%);
    margin: 0 !important;
}

#listado_avatars {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 24px;
}

.avatars_buttons .bottons_container {
    margin-top: auto;
}

.no-scroll {
    overflow: hidden;
}

.profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.upload-btn {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-btn img {
    width: 24px;
    height: 24px;
}

.file-input {
    display: none;
}

.upload-text {
    margin-top: 10px;
    cursor: pointer;

    text-align: center;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #353535;
}

.seleccionado {
    border: 3px solid #001A37;
    border-radius: 50%;
}

.avatar_sin_seleccion {
    border-radius: 50%;
}



.subtitle_login {
    color: var(--azul-01, #0063BE);
    text-align: center;
    font-feature-settings: 'liga'off;

    /* h2/bold */
    font-family: "Nunito Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    margin-bottom: 20px;
    display: block;
}

#abrirRegistro {
    display: flex;
    height: 48px;
    padding: 10px 60px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    background: var(--azul-01, #0063BE);
    box-shadow: 0 8px 14px 0 rgba(12, 40, 99, 0.20);
    width: fit-content;
    margin: auto;
}

.block_sep svg {
    max-width: 100%;
}

.block_register span {
    color: var(--azul-01, #0063BE);
    text-align: center;
    font-feature-settings: 'liga'off;

    /* Title/bold */
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    display: block;
    margin-bottom: 20px;
}

.block_register label {
    color: var(--azul-02, #0C2863);
    font-feature-settings: 'liga'off;

    /* Body/bold */
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#equipo_login {
    margin-bottom: 20px;
}

#register .title_card h3 {
    margin-top: 30px;
    margin-bottom: 0px;
    color: var(--azul-01, #0063BE);
    font-feature-settings: 'liga'off;

    /* h2/bold */
    font-family: "Nunito Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#register .title_card {
    padding-left: 0px;
}

#register .title_card svg {
    width: 100%;
}

#form_registro {
    display: block;
    max-width: 952px;
    margin: 0 auto;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 40px;
}

#form_registro .paragraph-regular {
    color: var(--secundarios-fucsia, #BE0062);
    font-feature-settings: 'liga'off;
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}



.content_register {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
    margin-top: 20px;
    flex-direction: column;
    width: 100%;
}

.profile-container {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 20px;
    background: var(--Grises-03, #F7F7F7);
    width: 275px;
    max-width: 100%;
}

.profile-container span {
    color: var(--azul-02, #0C2863);
    font-feature-settings: 'liga'off;

    /* Big txt/regular */
    font-family: "Nunito Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.profile-container .btn_avatar {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    border: 2px solid var(--azul-01, #0063BE);
    background: var(--tonos-adicionales-gray-05, #FBFAF9);
}

.profile-container .btn_avatar span {
    color: var(--azul-01, #0063BE);
    text-align: center;
    font-feature-settings: 'liga'off;

    /* Body/bold */
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.profile-container .btn_avatar span em {
    color: var(--secundarios-fucsia, #BE0062);
}

.content_register .register_field label {
    color: var(--azul-01, #0063BE);
    font-feature-settings: 'liga'off;

    /* Title/bold */
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.content_register .register_field label em {
    color: var(--secundarios-fucsia, #BE0062);
}

.content_register .register_field span {
    color: var(--azul-02, #0C2863);
    font-feature-settings: 'liga'off;

    /* Big txt/regular */
    font-family: "Nunito Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.content_register .register_field input {
    background: var(--Grises-03, #F7F7F7);
    display: flex;
    height: 40px;
    padding: 0 10px 0 12px;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    color: var(--azul-02, #0C2863);
    font-feature-settings: 'liga'off;

    /* Title/bold */
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
    border-radius: 0;
}

#participantes_wrapper .participante-row {
    display: flex;
    gap: 8px;
    align-self: stretch;
}

#participantes_wrapper .participante-row .btn-icon {
    border: none;
    background-color: transparent;
}

#participantes_wrapper .participante-row:not(:last-child) {
    margin-bottom: 16px;
}

.btn-login--1 {
    display: flex;
    height: auto;
    padding: 10px 40px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 40px;
    background: var(--azul-01, #0063BE);
    color: var(--Supporting-blanco, #FFF);
    text-align: center;
    font-feature-settings: 'liga'off;
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 261px !important;
    max-width: 100%;
}

.btn-login--1:disabled {
    background: var(--Supporting-Gray-2, #E2DFDA);
    pointer-events: none;
    opacity: 1;
}

.registro-container,
.registro-container .w-100,
.registro-container #div1,
.registro-container #form_registro {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#avatars_container .card_title {
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}

#avatars_container .card_line,
#avatars_container #listado_avatars {
    padding-left: 0px;
}

#avatars_container .card_line {
    margin-bottom: 36px;
}

#avatars_container .card_line svg {
    width: 100%;
}

#avatars_container #listado_avatars {
    gap: 13px;
    flex-wrap: wrap;
    justify-content: center;
}

#avatars_container .img_avatar_box {
    display: flex;
    width: 85px;
    padding: 0;
}

#avatars_container .img_avatar_box img {
    width: 100%;
}


/* Media queries */
@media (min-width: 768px) {

    /* Subtítulo debajo de "BIENVENIDO" */
    .subtitle-text {
        color: #FFF;
        font-family: "Regular";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        /* 140% */
    }

    .corner-down-image {
        display: flex;
    }

    .corner-down-image2 {
        display: none;
    }

    .corner-image {
        margin-top: 32px;
        margin-left: 12px;
    }

    .lineas_index {
        display: block;
        position: fixed;
        height: 30vh;
        bottom: 21px;
        left: 0;
        z-index: 0;
    }

    .logo-fresenius {
        position: fixed;
        bottom: 21px;
        right: 61px;
    }

    #register .title_card h3 {
        margin-bottom: 0;
        margin-top: 0;
        color: var(--azul-01, #0063BE);
        font-feature-settings: 'liga'off;
        font-family: "Nunito Sans";
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    #register .title_card {
        padding-left: 40px;
    }

    .content_register {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        flex: 1 0 0;
        align-self: stretch;
        margin-top: 20px;
        flex-direction: row;
    }

    #avatars_container .card_line,
    #avatars_container #listado_avatars {
        padding-left: 74px;
    }

    #avatars_container #listado_avatars {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: left;
    }

    #avatars_container .img_avatar_box {
        display: flex;
        width: 120px;
        padding: 0;
    }


    .btn-login {
        margin-bottom: 10px;
        font-size: 24px;
    }

    #avatars_container .img_avatar_box {
        display: flex;
        width: 100px;
        padding: 0;
    }



}