/* Fondo general */
body {
    background: linear-gradient(294deg, #78BE20 1.06%, rgba(120, 190, 32, .2) 51.22%, rgba(0, 94, 184, 0) 100.81%), linear-gradient(325deg, #005EB8 11.55%, #002F4F 72.47%);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 0;

}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../images/body-background.svg") no-repeat right top;
    background-size: cover;
    opacity: .7;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}

body,
html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;

    font-family: "Nunito Sans";
}

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

/* Contenedor principal del login */
.login-container {
    margin: 0 auto;
    padding: 0 24px;
    /* Altura completa de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    /* Espaciado entre el logo y el frame */
    overflow-y: auto;
    /* Permitir scroll si es necesario */
    padding-bottom: 40px;
    max-width: 450px;
}

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

.separator {
    display: none;
    color: #FFF;
    height: 1px;
    margin: 28px 0;
    opacity: 1;
}

/* Frame de login */
.login-frame {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Espaciado entre elementos */
    align-self: stretch;
    margin: 0 auto;
    padding: 15px;
    position: relative;
}

/* 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 */
}

.welcome-text {
    width: 100%;

    font-family: "Nunito Sans";
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
    color: #0BB4D2;
}

.subtitle-text {
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    color: #FFF;
}


input {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 10px;

    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    padding: 12px 12px 12px 16px;
    background: #F2F2F2;
    border: none;
    border-radius: 70px;
    outline: none;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #333231;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #333231 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.no_shadow {
    box-shadow: none;
    border: 2px solid #807D7B;
    background: #F2F2F2;
}

input::placeholder {}

input:read-only {}

input:disabled {}

select {
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    padding: 12px 40px 12px 16px;
    border-radius: 70px;
    border: 2px solid #807D7B;
    background: #F2F2F2;
    outline: none;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background-image: url(../images/login/icon-select-arrow.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #333231;
}

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

.error {
    border: 2px solid red;
}

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

    width: fit-content;
    padding: 2px 20px 2px 0px;

    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #FFF;
}



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

    /* párrafo extra small/regular */
    font-family: "Nunito Sans";
    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 */
}


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

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    height: auto;
    padding: 10px 30px;
    background: #78BE20;
    border-radius: 24px;
    border: 2px solid #78BE20;
    cursor: pointer;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #FFF;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    background: #91c552;
    border: 2px solid #91c552;
}

.btn-login:active {
    transform: translateY(1px);
    background: #78BE20;
    border: 2px solid #78BE20;
}

.btn-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    height: auto;
    padding: 10px 30px;
    background: #005EB8;
    border-radius: 24px;
    border: 2px solid #005EB8;
    cursor: pointer;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #FFF;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-register:hover {
    transform: translateY(-2px);
    background: #0BB4D2;
    border: 2px solid #0BB4D2;
}

.btn-register:active {
    transform: translateY(1px);
    background: #005EB8;
    border: 2px solid #005EB8;
}


.btn-cancelar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    height: auto;
    padding: 10px 30px;
    background: transparent;
    border-radius: 24px;
    border: 2px solid #FFF;
    cursor: pointer;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #FFF;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cancelar:hover {
    transform: translateY(-2px);
    color: #042957;
    background: #ffffff99;
    border: 2px solid #ffffff99;
}

.btn-cancelar:active {
    transform: translateY(1px);
    color: #042957;
    background: #ffffff99;
    border: 2px solid #ffffff99;
}

.btn-cancelar2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    height: auto;
    padding: 10px 30px;
    background: transparent;
    border-radius: 24px;
    border: 2px solid #78BE20;
    cursor: pointer;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #78BE20;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cancelar2:hover {
    transform: translateY(-2px);
    color: #78BE20;
    background: #78be2036;
    border: 2px solid #78be2036;
}

.btn-cancelar2:active {
    transform: translateY(1px);
    color: #78BE20;
    background: #78be2036;
    border: 2px solid #78be2036;
}

.forgot-password-link {
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    color: #0BB4D2;
}

.forgot-registration {
    margin: 0;

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

.close_avatars {
    cursor: pointer;
    z-index: 10;
    width: 32px
}



.tit_registro {
    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #333231;
}

.label-input2 {
    display: flex;
    padding: 2px 20px 2px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: fit-content;

    font-family: "Nunito Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #333231;
}


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

.not-registered-label {
    font-family: "Myriad Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    /* Centrado horizontal */
    color: #FFF;
    /* Texto blanco */
    display: block;
    /* Asegura que ocupe toda la línea */
    margin-bottom: 16px;
    /* Espaciado con respecto al botón */
}

.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: "Myriad Pro", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    color: var(--Blanco, #FFF);
    margin: 0;
}

/* Párrafo bold */
.paragraph-bold {
    font-family: "Myriad Pro", 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;
}


/* Formulario de registro oculto con animación */
.registro-container {
    position: fixed;
    top: 300%;
    /* Oculto al inicio */
    width: 100%;
    height: 100vh;
    background: white;
    color: black;
    padding: 0px 0px;
    border-radius: 0px;
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.3);
    transition: top 0.5s ease-in-out;
    z-index: 100;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.75);
}

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

/* 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: 10px;
    right: 10px;
    cursor: pointer;
}

.no-scroll {
    overflow: hidden;
}

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

.avatar {
    width: 90px;
    height: 90px;
    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: 15px;
    cursor: pointer;
    display: flex;
    gap: 7px;

    width: 120px;

    font-family: "Nunito Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #005EB8;
}

.seleccionado {
    border: 5px solid #EF4757;
    border-radius: 50%;
    cursor: pointer;
}

.avatar_sin_seleccion {
    border-radius: 50%;
    cursor: pointer;
}

.text-espera {
    color: #FFF;
    text-align: center;
    font-family: 'Regular';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 80%;
}


/* Media queries */
@media (max-width: 575px) {
    /* body {

        background: linear-gradient(113deg, #29CFB4 0.67%, #084EA3 86.48%);

        background-attachment: fixed;
    } */

    .mostrar {
        top: 3%;
    }

    .registro-container {
        border-radius: 12px 12px 0px 0px;
    }


    .fondo_image {
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 0;
        pointer-events: none;
    }

    .fondo_image2 {
        position: fixed;
        top: 0px;
        right: 0px;
        height: 90vh;
        z-index: 0;
        pointer-events: none;
    }

    .welcome-text {
        font-size: 36px;
        line-height: 44px;
    }

    .subtitle-text {
        font-size: 20px;
        line-height: 30px;
    }

    .separator {
        display: block;
    }
}