/* Fondo general */
body {
    background-image: url('../mobile/bg_img_mobile.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

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

.max-width-login {
    width: 100%;
    max-width: 600px !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 {
    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;
}

.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 {
    margin: 0 auto;
    padding: 0 24px;
    /* Altura completa de la pantalla */
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    /* Espaciado entre el logo y el frame */
    overflow-y: auto;
}

.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-top: 64px;
    padding-bottom: 30px;
    /* Espaciado superior del logo */
    text-align: center;
}

.logo-container img {
    max-width: 172px;
    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: #FFFFFF;

    /* h2 */
    font-family: 'Bold';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* 122.222% */
}

/* Subtítulo debajo de "BIENVENIDO" */
.subtitle-text {
    color: #323234;

    /* Titulo big/Bold */
    font-family: "Regular";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    /* 140% */
}


input {
    font-family: "Regular";
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 0px 12px 12px 12px;
    border: 2px solid #A6AEC4;
    background: var(--Blanco, #FFF);
    margin-bottom: 20px;
    width: 100%;

}

.no_shadow {
    box-shadow: none;
    border-radius: 0px 12px 12px 12px;
    border: 2px solid #A6AEC4;
    background: var(--Blanco, #FFF);
}

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

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

.input-simple {
    border: 2px solid transparent;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 24px;
}

select {

    font-family: "Regular";
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 0px 12px 12px 12px;
    border: 2px solid #A6AEC4;
    background: var(--Blanco, #FFF);
    margin-bottom: 20px;
    width: 100%;
}

.label-input {
    display: flex;
    padding: 2px 20px 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px 10px 0px 0px !important;
    background: #EF4757;
    color: #FFF;
    font-family: "Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    width: fit-content;
    /* 125% */
}

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

/* Botón "Iniciar sesión" */
.btn-login {
    width: fit-content;
    /* Hug: El ancho se ajusta al contenido */
    height: auto;
    display: flex;
    width: 100%;
    height: 60px;
    padding: 10px 30px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    /* Sombras externas */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Efecto de interacción */
    border-radius: 12px;
    background: var(--rojo, #EF4757);
    color: var(--Blanco, #FFF);
    text-align: center;
    font-family: 'Regular';
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    border: none;
    /* 100% */
    /* 100% */
}

.btn-login:hover {
    transform: translateY(-2px);
    /* Efecto al pasar el cursor */
    background: #7A1822;
    /* Sombras más intensas */
}

.btn-login:active {
    transform: translateY(1px);
    /* Efecto de presionado */
    background: #7A1822;
}

/* 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-radius: 12px;
    border: 2px solid var(--rojo, #EF4757);
    background: var(--Blanco, #FFF);
    color: var(--rojo, #EF4757);
    text-align: center;
    font-family: 'Regular';
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 100% */

    /* elevacion_04 */
    box-shadow: 0px 23px 7px 0px rgba(190, 190, 192, 0.01), 0px 15px 6px 0px rgba(190, 190, 192, 0.09), 0px 8px 5px 0px rgba(190, 190, 192, 0.30), 0px 4px 4px 0px rgba(190, 190, 192, 0.51), 0px 1px 2px 0px rgba(190, 190, 192, 0.59);
    /* Efecto de interacción */
}

.btn-cancelar:hover {
    transform: translateY(-2px);
}

.btn-cancelar:active {
    transform: translateY(1px);
}


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

/* 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 10px;
    font-family: "Regular", 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, #FFF 0%, #FFF 100%);
    margin: 16px auto;
    /* Centrar y separar elementos */
}

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

.not-registered-label {
    font-family: "Regular", 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: "Regular", 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: "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: 0;
    width: 100%;
    height: 100vh;
    background: white;
    color: black;
    padding: 10px 0px 30px 0px;
    border-radius: 15px 15px 0 0;
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.3);
    transition: top 0.5s ease-in-out;
    z-index: 100;
    overflow-y: auto;
}

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

.close_avatars {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.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;
    color: #123456;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}

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

/* Media queries */
@media (min-width: 575px) {
    body {
        background-image: url('../desktop/bg_img_desktop.png');
        background-size: cover;
    }

    /* Texto "BIENVENIDO" */
    .welcome-text {
        color: #FFF;
        font-family: 'Bold';
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

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

}