/* 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: 900px !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));*/
    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;
}

.login-container p {
    color: #FFF;
    font-family: "Trebuchet MS";
    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;
}

.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: #870051;

    /* h2 */
    font-family: Nulshock;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    /* 122.222% */
}

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

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


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

    /* elevacion_02 */
    box-shadow: 0px 23px 7px 0px rgba(102, 0, 61, 0.01), 0px 15px 6px 0px rgba(102, 0, 61, 0.09), 0px 8px 5px 0px rgba(102, 0, 61, 0.30), 0px 4px 4px 0px rgba(102, 0, 61, 0.51), 0px 1px 2px 0px rgba(102, 0, 61, 0.59);
}

.no_shadow {
    box-shadow: none;
    border-radius: 0px 12px 12px 12px;
    border: 2px solid #323234;
    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;
}

.label-input {
    display: flex;
    padding: 2px 20px 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px 60px 0px 0px !important;
    border: 2px solid #323234;
    background: #323234;
    color: #FFF;
    font-family: "Trebuchet MS";
    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: "Trebuchet MS";
    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 */
    gap: 12px;
    /* Espaciado entre elementos dentro del botón (si aplica) */
    border-radius: 24px;
    /* Bordes redondeados */
    background: #0074BE;
    /* Color de fondo */
    color: #FFF;
    /* Texto blanco */
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        /* Efecto interno */
        0px 4px 4px 0px #004F8082,
        0px 8px 5px 0px #004F804D,
        0px 15px 6px 0px #004F8017,
        0px 23px 7px 0px #004F8003,
        0px 4px 4px 0px #00000040;
    /* Sombras externas */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Efecto de interacción */
}

.btn-login:hover {
    transform: translateY(-2px);
    /* Efecto al pasar el cursor */
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        0px 4px 4px 0px #004F8082,
        0px 8px 5px 0px #004F804D,
        0px 15px 6px 0px #004F8017,
        0px 23px 7px 0px #004F8003,
        0px 6px 6px 0px #00000060;
    /* Sombras más intensas */
}

.btn-login:active {
    transform: translateY(1px);
    /* Efecto de presionado */
    box-shadow:
        3px 4px 10px 0px #31ABF8 inset,
        0px 4px 4px 0px #004F8082 inset,
        0px 8px 5px 0px #004F804D inset,
        0px 4px 4px 0px #00000040;
    /* 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 var(--Primary-azul-500, #0074BE);
    background: var(--Blanco, #FFF);
    color: var(--Primary-azul-500, #0074BE);
    text-align: center;

    /* párrafo small/bold */
    font-family: "Trebuchet MS";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 150% */

    /* 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: "Trebuchet MS", 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: "Trebuchet MS", 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: "Trebuchet MS", 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: "Trebuchet MS", 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 */
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    color: black;
    padding: 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;
}

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



/* 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: Nulshock;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

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

}