/* Fondo general */
body {
    background: linear-gradient(246deg, #8D3089 23.5%, #EE2D24 100%);
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

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

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

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

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

#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));*/
    filter: drop-shadow(0px 40px 25px rgba(125, 1, 75, 0.8));
}

/* 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: "Myriad Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
}

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

.corner-image img {
    width: 100%;
    height: auto;
}

/* Logo centrado */
.logo-container {
    padding-top: 64px;
    padding-bottom: 30px;
    /* Espaciado superior del logo */
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

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

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

/* Texto "BIENVENIDO" */
.welcome-text {
    color: var(--Blanco, #FFF);
    text-align: center;
    font-family: 'Almaq';
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
    /* 127.273% */
    text-transform: uppercase;
    /* 122.222% */

    max-width: 661px;
    width: 100%;
}

/* Subtítulo debajo de "BIENVENIDO" */
.subtitle-text {
    color: var(--Blanco, #FFF);

    /* H4 */
    font-family: "Myriad Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    /* 133.333% */
}


input {
    font-family: "Myriad Pro";
    display: flex;
    margin-bottom: 16px;
    width: 100%;
    border: none;




    display: flex;
    height: 48px;
    padding: 12px 12px 12px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 70px;
    background: var(--Blanco, #FFF);
    color: var(--Gris, #4B4A49);

    /* párrafo small_Regular */
    font-family: "Myriad Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

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: #4B4A49 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.no_shadow {
    box-shadow: none;
    border-radius: 70px;
    border: 2px solid var(--Gris_2, #C6CAD5);
    background: var(--Gris_03, #EFF0F4);
    display: flex;
    height: 48px;
    padding: 12px 12px 12px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    width: 100%;
}

input::placeholder {}

input:read-only {}

input:disabled {}

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;
    padding: 2px 20px 2px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF;
    width: fit-content;
    /* 125% */


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

.label-input2 {
    display: flex;
    padding: 2px 20px 2px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    /* 125% */

    color: var(--Gris, #4B4A49);

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

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

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

/* Botón "Iniciar sesión" */
.btn-login {
    width: fit-content;
    /* Hug: El ancho se ajusta al contenido */
    height: auto;
    /* Hug: La altura se ajusta al contenido */
    padding: 10px 30px;
    /* Espaciado interno */
    display: flex;
    gap: 12px;
    /* Espaciado entre elementos dentro del botón (si aplica) */
    border-radius: 24px;
    /* Bordes redondeados */
    background: #8D3089;
    border: 2px solid #8D3089;
    /* Color de fondo */
    color: #FFF;
    /* Texto blanco */
    font-family: "Myriad Pro", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    line-height: 24px;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Efecto de interacción */
}

.btn-login:hover {
    transform: translateY(-2px);
    background: #3D0A37;
    border: 2px solid #3D0A37;
    /* Efecto al pasar el cursor */

    /* Sombras más intensas */
}

.btn-login:active {
    transform: translateY(1px);
    background: #3D0A37;
    border: 2px solid #3D0A37;
    /* Efecto de presionado */

    /* Sombras más sutiles */
}

/* Botón "Iniciar sesión" */
.btn-cancelar {
    width: fit-content;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 24px;
    border: 2px solid #FFF;
    background: transparent;
    color: #FFF;
    text-align: center;

    /* párrafo small/bold */
    font-family: "Myriad Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    display: flex;
    padding: 10px 30px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 150% */

}

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

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

/* Botón "registro" */
.btn-cancelar2 {
    width: fit-content;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 24px;
    border: 2px solid #8D3089;
    background: transparent;
    color: #8D3089;
    text-align: center;

    /* párrafo small/bold */
    font-family: "Myriad Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    display: flex;
    padding: 10px 30px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 150% */

}

.btn-cancelar2:hover {
    transform: translateY(-2px);
    color: #3D0A37;
    background: #FFF;
    border: 2px solid #3D0A37;
}

.btn-cancelar2:active {
    transform: translateY(1px);
    color: #3D0A37;
    background: #FFF;
    border: 2px solid #3D0A37;
}

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

.linea {
    border-bottom: 1px solid transparent;
}

.btn_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.tit_registro {
    color: var(--Gris, #4B4A49);

    /* párrafo small_bold */
    font-family: "MyriadProBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 150% */
}

/* Enlace "Olvidé mi contraseña" */
.forgot-password-link {
    display: block;
    /* Asegura que ocupe el ancho completo */
    margin-top: 8px;
    /* Espaciado con respecto al botón superior */
    padding: 8px 1px;
    font-family: "Myriad Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    /* Sin subrayado */
    color: #FFF;
    /* Texto blanco */
    background: none;
    /* Sin fondo adicional */
}

.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;

    color: #8D3089;

    /* párrafo small_Regular */
    font-family: "Myriad Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    width: 120px;
    /* 150% */
}

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

.avatar_sin_seleccion {
    border-radius: 50%;
}

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


.footer_a {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 10px;
}

@media (max-width: 900px) {
    .footer_a {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        align-items: center;
        gap: 10px 40px;
        text-align: center;

    }

}


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

        background: linear-gradient(246deg, #8D3089 23.5%, #EE2D24 100%);

        background-attachment: fixed;
    }

    .mostrar {
        top: 3%;
    }

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


    .fondo_image {
        position: fixed;
        top: 0px;
        right: 0px;
        height: auto;
        width: 100%;
        z-index: 0;
        pointer-events: none;
    }

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

    #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));*/
        filter: none;
    }


    /* Texto "BIENVENIDO" */
    .welcome-text {
        color: var(--Blanco, #FFF);
        text-align: center;
        font-family: Almaq;
        font-size: 23.165px;
        font-style: normal;
        font-weight: 400;
        line-height: 29.483px;
        /* 127.273% */
        text-transform: uppercase;
        /* 122.222% */

        max-width: 661px;
        width: 100%;
        z-index: 1;
    }

    /* Subtítulo debajo de "BIENVENIDO" */
    .subtitle-text {
        color: #FFF;
        font-family: "Myriad Pro";
        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;
    }

    .linea {
        border-bottom: 1px solid #FFF;
    }

}