﻿/* Estilos para el contenedor de la tarjeta principal */
.login-card-wrapper {
    background: white; /* Color de fondo del card */
    border-radius: 1.5rem; /* Bordes más redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Importante para que los bordes redondeados funcionen en las subsecciones */
    width: 100%; /* Ocupa el 100% del ancho de su columna contenedora */
}

/* Sección de la ilustración (el "chavo") */
.illustration-section {
    background-color: #f7f9fc; /* Color de fondo claro para la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Espaciado interno */
    height: 100%; /* Ocupa la altura completa */
}

.illustration-image {
    max-width: 100%;
    height: auto;
}

/* Sección del formulario */
.form-section {
    padding: 2.5rem; /* Espaciado interno (ajusta el p-5 que tenías) */
}

/* Ajuste para el contenedor de formulario en el centro */
.login-container-wrap {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: unset; /* O simplemente NO definirlo */
}

body {
    /* GRADIENTE DE FONDO */
    background: #0a2052;
    background: -webkit-linear-gradient(to right, #0a2052, #f49237);
    background: linear-gradient(to right, #0a2052, #f49237);
    overflow: hidden; /* Oculta barras de desplazamiento */
    height: 100vh;
    margin: 0;
}
/* Estilos de las estrellas (copiados de tu código) */
.star0 {
    height: 1px;
    width: 1px;
    opacity: 1;
    position: absolute;
}

.star1 {
    height: 2px;
    width: 2px;
    border-radius: 50%;
    opacity: .7;
    position: absolute;
}

.star2 {
    height: 3px;
    width: 3px;
    border-radius: 50%;
    opacity: .7;
    position: absolute;
}

.star3 {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    opacity: .7;
    position: absolute;
}
/* El universo debe ocupar todo el fondo y estar detrás de todo */
#universe {
    position: fixed; /* Fijo para que cubra toda la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del formulario */
}
