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

    height: 100%;
    min-height: 100vh;
    background-image: url('../images/dots-top-white.svg'), url('../images/dots-bottom-white.svg') !important;
    background-position: top left, bottom left !important;
    background-size: 100%, 100% !important;
    background-repeat: repeat-x, repeat-x !important;     
    background: #002855;  
    margin: 0;
    padding: 0;    

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



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

.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 {
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: center;
    justify-content: center;
    gap: 36px;

    margin: 0 auto;
    padding: 0 24px;
    padding-bottom: 40px;
    overflow-y: auto;    
}

.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: 290px;
    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 {
    font-family: "Rubik", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; 
    color: #FFF;
}

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


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

    width: 100%;
    background: #FFF;
    padding: 12px 18px;
    border: none;
    border-radius: 100px;    
    outline: none;
}

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

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


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;
    
    font-family: "Rubik", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    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: "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;
    justify-content: center;
    align-items: center;
    gap: 8px;

    width: 100%;
    height: 44px;
    padding: 8px 18px;
    border: none;
    border-radius: 100px;
    background: #E9BA2E;
    cursor: pointer;
    transition: all 0.1s ease;

    font-family: "Rubik", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #002855;
}
.btn-login:active { 
    background: #FFE38F;
    transform: scale(0.96);
}

/* 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: "Rubik", 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 {
    background: #E6E7EB;
    border: 2px solid #E6E7EB;   
    pointer-events: none;   

    color: #9198AB;    
}


.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: "Rubik", 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: "Rubik", 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: "Rubik", 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: 0;
    width: 100%;
    height: 100vh;
    background: white;
    color: black;
    padding: 0 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;
}
.registro-container .label-input {
    display: flex;    
    justify-content: start;
    align-items: center;
    gap: 10px;   
    
    padding: 0 0 8px 0;
    
    font-family: "Rubik", 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: 10px;
    right: 10px;
    cursor: pointer;
}

#avatars_container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 12px;

    width: 100%;
    max-width: 1000px;
    left: 100%;
    padding: 24px 24px 100px !important;
    border: none;
    box-shadow: none !important;
}
.img_close_avatars{
    position: relative;
    margin-right: auto;
    cursor: pointer;
}
.img_close_avatars:active {
  opacity: 0.7;
  transform: scale(0.97);
}
#avatars_container h2{   
    margin: 0;
    padding-bottom: 12px;

    font-family: "Rubik", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    color: #3B6C95;
}
.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: "Rubik", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #353535;
}

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

.avatar_sin_seleccion {
    border-radius: 50%;
}

.text-espera {
    width: 100%;
    max-width: 236px;
    margin: 0;

    font-family: "Rubik", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #FFF;
}

/* Media queries */
@media (min-width: 575px) {
    /* 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;
    }

}