/* auth.css */
/* Este archivo contiene los estilos específicos para las páginas de login y registro. */

/* Estilos para el cuerpo de las páginas de autenticación */
/* Se usa body.auth-body para aumentar la especificidad y evitar conflictos con style.css */
body.auth-body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Aplicación del degradado radial característico */
    background-color: var(--color-primary-dark); /* Color de respaldo */
    background-image: radial-gradient(circle at 50% 15%, 
        rgba(255, 51, 136, 0.4) 0%, 
        rgba(196, 0, 107, 0.15) 40%, 
        var(--color-primary-dark) 75%
    );
    background-repeat: no-repeat;
    padding: 1rem; /* Padding para mejorar la responsividad en pantallas pequeñas */
    box-sizing: border-box;
    overflow: auto; /* Se asegura de que el scroll sea posible si el contenido excede la pantalla */
}

/* Contenedor principal para los formularios */
.auth-container {
    width: 100%;
    max-width: 24rem; /* 384px */
    padding: 2rem;
}

/* Estilo para los inputs de login/registro */
.input-login {
    background-color: #AEB8C6; /* --color-input-bg */
    color: var(--color-text-dark);
    height: 3rem; /* 48px */
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 500;
}
.input-login::placeholder {
    color: var(--color-text-dark);
    opacity: 0.6;
}
.input-login:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(174, 184, 198, 0.5);
}

/* Estilo para el botón principal de los formularios */
.accent-button {
    background-color: var(--color-accent-start);
    color: white;
    width: 100%;
    height: 3rem; /* 48px */
    border-radius: 9999px; /* rounded-full */
    font-weight: 800; /* extrabold */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(196, 0, 107, 0.4);
}
.accent-button:hover {
    background-color: var(--color-accent-end);
    box-shadow: 0 6px 20px rgba(255, 51, 136, 0.5);
}