/* --- ESTILOS BASE Y CONTENEDOR PRINCIPAL (.main) --- */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: serif;
    background-image: url("img/fondos/Background_Inicio1.png");
    background-size: cover;
    background-position-y: -40px;
    transition: background-image 1s ease-in-out;
}

.main {
    width: 350px;
    height: 550px; /* Altura fija del contenedor principal */
    background: linear-gradient(45deg, #00c878, #642C8E); /* Degradado de fondo */
    border-radius: 10px; /* Bordes redondeados del contenedor principal */
    box-shadow: 5px 20px 50px #000;
    overflow: hidden; /* Muy importante para ocultar el contenido que se extiende más allá de los bordes redondeados */

    /* --- ¡CRUCIAL para position: absolute del .singup! --- */
    position: relative; /* Define el contexto de posicionamiento para los elementos absolutos internos */
    
    /* Configuración flexbox para organizar los hijos */
    display: flex;
    flex-direction: column; /* Apila .login y .singup verticalmente */
    align-items: center; /* Centra los elementos hijos horizontalmente */
}

/* --- ESTILOS DEL CONTENEDOR DE LOGIN (.login) --- */
.login {
    position: relative; /* Por si algún elemento interno lo necesita */
    width: 100%;
    
    /* --- ¡CORRECCIÓN CLAVE AQUÍ! --- */
    /* Calculamos la altura de .login para que ocupe el espacio restante por encima de .singup. */
    /* El valor restado (150px) debe coincidir con la 'height' de .singup. */
    height: calc(100% - 150px); 

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el contenido (label, botón) verticalmente dentro de .login */
    padding-bottom: 0; /* Asegura que no haya espacio extra debajo del login que separe .singup */
}

/* --- ESTILOS DEL CONTENEDOR BLANCO (.singup) --- */
.singup {
    /* --- ¡CORRECCIÓN CLAVE AQUÍ! --- */
    /* ELIMINAR 'transform: translateY(-105px);' de aquí. ESTÁ CAUSANDO EL PROBLEMA. */

    /* --- POSICIONAMIENTO ABSOLUTO PARA PEGARLO AL FONDO --- */
    position: absolute; /* Saca a .singup del flujo normal para un control de posición exacto */
    bottom: 0;          /* ¡PEGA EL BORDE INFERIOR DEL .singup AL BORDE INFERIOR DEL .main! */
    left: 0;            /* Lo pega al lado izquierdo del .main */
    width: 100%;        /* Asegura que ocupe todo el ancho del .main */
    
    /* --- ALTURA FIJA DEL BLOQUE BLANCO --- */
    height: 150px; /* **AJUSTA ESTE VALOR** si deseas que el bloque blanco sea más alto o más bajo. */
                   /* Recuerda que debe coincidir con el valor restado en 'height: calc()' de .login. */
    
    background: #eee; /* Color de fondo blanco/gris claro */
    
    /* --- CONTROL DE BORDES REDONDEADOS: SOLO ARRIBA --- */
    border-top-left-radius: 15%; 
    border-top-right-radius: 15%; 
    border-bottom-left-radius: 0; /* Asegura que la esquina inferior izquierda sea recta */
    border-bottom-right-radius: 0; /* Asegura que la esquina inferior derecha sea recta */
    
    padding: 0; /* No necesitamos padding aquí, la altura es fija y la imagen se controla con max-height */

    /* --- CENTRADO DE LA IMAGEN DENTRO DE .singup --- */
    display: flex;
    justify-content: center; /* Centrado horizontal de la imagen */
    align-items: center;   /* Centrado vertical de la imagen */
}

/* --- ESTILOS DE LA IMAGEN DEL LOGO (.img-login) --- */
.img-login {
    max-width: 90%; /* La imagen no será más ancha que el 90% de su contenedor .singup */
    /* --- AJUSTA ESTE VALOR para hacer la imagen más grande o pequeña --- */
    max-height: 80%; /* El logo ocupará hasta el 80% de la altura de .singup. Ajusta este porcentaje. */
                       /* Si el logo se ve cortado en el .singup, REDUCE este porcentaje o AUMENTA la 'height' de .singup. */
    width: auto;   /* Permite que el ancho se ajuste manteniendo la proporción */
    height: auto;  /* Mantiene la relación de aspecto de la imagen */

    object-fit: contain; /* Asegura que la imagen entera sea visible sin deformarse (se escala para caber) */
    object-position: center; /* Centra la imagen dentro de su propio espacio de object-fit */

    display: block; /* Evita cualquier espacio extra por debajo de la imagen */
    margin: 0; /* Elimina cualquier margen predeterminado */
}

/* --- OTROS ESTILOS --- */
.chk {
    display: none;
}

label {
    color: #fff;
    font-size: 2.3em;
    justify-content: center;
    display: flex;
    margin: 60px;
    font-weight: bold;
    transition: .5s ease-in-out;
}

.hsvf {
    font-size: 1.3em;
    color: #000; /* Nota: esta regla está en el CSS que me pasaste, pero la etiqueta '.hsvf' no está en tu HTML actual. */
    position: absolute; /* Nota: esta regla está en el CSS que me pasaste, pero la etiqueta '.hsvf' no está en tu HTML actual. */
    margin: 60px 0px; /* Nota: esta regla está en el CSS que me pasaste, pero la etiqueta '.hsvf' no está en tu HTML actual. */
}

.btnIniciarSesion {
    background-color: transparent;
    border: none;
    height: 20px; /* Esto parece una altura muy pequeña para un botón */
    font-size: 1.5em;
    color: #fff;
}

.form {
    display: flex;
    flex-direction: column; /* Asegura que los elementos dentro del formulario estén en columna */
    color: #fff;
    align-items: center;
    /* vertical-align: middle; - esto no es válido para flexbox, 'align-items: center' ya lo hace */
}

.form a {
    color: #fff;
    font-size: 1.3em;
    text-decoration: none;
}

#boton_login {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box; /* Asegura que padding se incluya en el ancho/alto */
    display: flex;
    justify-content: center;
}

#googleLogin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #5bb3a0, #7a30a2);
    color: white;
    padding: 14px 20px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: 'Pixelify Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    max-width: 100%;
    width: 100%;
    text-align: center;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}

#googleLogin i {
    margin-right: 8px;
    color: white;
    font-size: 18px;
}

#googleLogin:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* --- MEDIA QUERIES --- */
@media (max-width: 1500px) {
    /* .main {
        width: 250px;
        height: 400px;
    } */
    /* .login {
        height: calc(100% - 120px); 
    }
    .singup {
        height: 120px; 
    }
    .img-login {
        max-height: 80%; 
    } */
}

@media (max-width: 768px) {
    .main {
        width: 90vw;
        height: 90vh;
    }
    .login {
        height: calc(100% - 100px); /* Sincronizado con la nueva altura de .singup */
    }
    .singup {
        height: 100px; /* Altura del bloque blanco para móviles */
    }
    .img-login {
        max-height: 80%; /* Se adapta a la nueva altura de .singup */
    }
}

@media (max-width: 500px) {
    body {
        width: 100vw;
        height: 100vh;
    }

    .main {
        background-color: red;
        width: 50%;
        height: 50%;
    }
    .login {
        height: calc(100% - 100px); /* Sincronizado con la nueva altura de .singup */
    }
    .singup {
        height: 80px; /* Altura del bloque blanco para móviles */
    }

    #googleLogin{
        font-size: 0.7rem;
    }

        /* Texto de "LOGIN" más grande */
    label {
        font-size: 1.5em !important;
        margin: 40px 0 !important;
    }

    .img-login{
        width: 150px;
    }

}