/*
* C:\public\assets\css\auth.css
* Estilos específicos para las páginas de login y registro.
* SOLO se aplican cuando body.auth-page o body.register-page está activo.
*/

body.auth-page,
body.register-page {
    /* Mantenemos background-color aquí para el fondo de la página,
       y añadimos flexbox para centrar el wrapper principal */
    background-color: var(--dark-grey);
    /* Un fondo suave para toda la página */
    display: flex;
    /* Añadido para centrar el contenido principal vertical y horizontalmente */
    flex-direction: column;
    /* Apila el contenido (header, wrapper, footer) */
    min-height: 100vh;
    /* Asegura que ocupe al menos toda la altura de la ventana */
}

/* Contenedor para centrar el formulario */
body.auth-page .auth-wrapper,
body.register-page .auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajusta la altura para tener en cuenta nav y footer.
       Usamos flex-grow para que el wrapper ocupe el espacio disponible
       y empuje el footer al final si el contenido es corto. */
    flex-grow: 1;
    padding: 1.5rem 1rem;
    /* Padding reducido para más compactación */
}

body.auth-page .auth-container,
body.register-page .auth-container {
    background-color: var(--white);
    padding: 2rem;
    /* Padding ligeramente reducido para compactación */
    border-radius: 8px;
    /* Redondeo consistente */
    max-width: 380px;
    /* Ancho máximo ligeramente más pequeño para compactación */
    width: 90%;
    /* Asegura que ocupe el ancho en móviles */
    text-align: center;
}

body.auth-page h2,
body.register-page h2 {
    color: var(--primary-color);
    /* Títulos con color primario */
    margin-bottom: 1.5rem;
    /* Espacio debajo del título */
    font-size: 2rem;
    /* Tamaño de título consistente */
    font-weight: 600;
}

/* Estilos para los grupos de formulario (etiqueta e input) */
body.auth-page .form-group,
body.register-page .form-group {
    margin-bottom: 0.5rem;
    /* Espacio entre campos reducido */
    text-align: left;
    /* Alinea etiquetas a la izquierda */
}

body.auth-page .form-group label,
body.register-page .form-group label {
    display: block;
    /* Asegura que la etiqueta esté en su propia línea */
    margin-bottom: 0.5rem;
    /* Espacio entre etiqueta y input */
    color: var(--secondary-color);
    /* Color secundario para etiquetas */
    font-weight: 500;
    font-size: 0.95rem;
}

/* Estilos para campos de entrada de texto, email y password */
body.auth-page input[type="text"],
body.auth-page input[type="email"],
body.auth-page input[type="password"],
body.register-page input[type="text"],
body.register-page input[type="email"],
body.register-page input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    /* Padding de inputs reducido para compactación */
    border: 1px solid var(--border-color);
    /* Borde sutil */
    border-radius: 5px;
    /* Bordes redondeados */
    font-size: 1rem;
    color: var(--text-color);
    box-sizing: border-box;
    /* Incluye padding y borde en el ancho total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.auth-page input[type="text"]:focus,
body.auth-page input[type="email"]:focus,
body.auth-page input[type="password"]:focus,
body.register-page input[type="text"]:focus,
body.register-page input[type="email"]:focus,
body.register-page input[type="password"]:focus {
    border-color: var(--primary-color);
    /* Borde primario al enfocar */
    box-shadow: 0 0 0 2px rgba(0, 118, 165, 0.2);
    /* Sombra sutil al enfocar */
    outline: none;
    /* Eliminar el contorno por defecto del navegador */
}


/* Estilos para el enlace "Ya tienes cuenta?" o "No tienes cuenta?" */
body.auth-page .auth-link,
body.register-page .auth-link {
    margin-top: 1.2rem;
    /* Espacio superior reducido */
    font-size: 0.9rem;
    /* Tamaño de fuente más pequeño */
    color: var(--text-color);
}

body.auth-page .auth-link a,
body.register-page .auth-link a {
    color: var(--primary-color);
    /* Enlace con color primario */
    text-decoration: none;
    /* Sin subrayado por defecto */
    font-weight: 500;
    transition: color 0.3s ease;
}

body.auth-page .auth-link a:hover,
body.register-page .auth-link a:hover {
    color: var(--secondary-color);
    /* Color secundario al hacer hover */
    text-decoration: underline;
    /* Subrayado al hacer hover */
}

/* Estilos para mensajes de alerta (éxito/error) */
body.auth-page .alert,
body.register-page .alert {
    padding: 0.8rem;
    /* Padding de alertas reducido */
    margin-bottom: 1rem;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    font-size: 0.95rem;
    /* Tamaño de fuente reducido */
}

body.auth-page .alert-danger,
body.register-page .alert-danger {
    background-color: var(--error-light-bg);
    /* Usar variable para fondo de error */
    color: var(--error-color);
    border: 1px solid var(--error-border);
    /* Usar variable para borde de error */
}

/* Asegúrate de tener estas variables definidas en style.css:
:root {
    --error-color: #dc3545; // Rojo para errores
    --error-light-bg: #f8d7da; // Fondo claro para alertas de error
    --error-border: #f5c6cb; // Borde para alertas de error
}
*/

body.auth-page .alert-success,
body.register-page .alert-success {
    background-color: var(--success-light-bg);
    /* Usar variable para fondo de éxito */
    color: var(--success-color);
    border: 1px solid var(--success-border);
    /* Usar variable para borde de éxito */
}

/* Asegúrate de tener estas variables definidas en style.css:
:root {
    --success-color: #28a745; // Verde para éxito
    --success-light-bg: #d4edda; // Fondo claro para alertas de éxito
    --success-border: #c3e6cb; // Borde para alertas de éxito
}
*/

/* Media Queries para Responsividad */
@media (max-width: 768px) {

    body.auth-page .auth-container,
    body.register-page .auth-container {
        padding: 1.5rem;
        /* Padding más reducido en móvil */
        max-width: 320px;
        /* Ancho máximo más pequeño en móvil */
    }

    body.auth-page h2,
    body.register-page h2 {
        font-size: 1.8rem;
        /* Título más pequeño en móvil */
        margin-bottom: 1rem;
    }

    body.auth-page .form-group label,
    body.register-page .form-group label {
        font-size: 0.9rem;
    }

    body.auth-page input[type="text"],
    body.auth-page input[type="email"],
    body.auth-page input[type="password"],
    body.register-page input[type="text"],
    body.register-page input[type="email"],
    body.register-page input[type="password"] {
        padding: 0.7rem;
        /* Inputs más compactos en móvil */
        font-size: 0.9rem;
    }

    body.auth-page .button-primary,
    body.register-page .button-primary {
        padding: 0.8rem 1rem;
        /* Botones más compactos en móvil */
        font-size: 1rem;
    }


}

@media (max-width: 480px) {

    body.auth-page .auth-container,
    body.register-page .auth-container {
        padding: 1.2rem;
        /* Aún más pequeño para pantallas muy estrechas */
        width: 95%;
        /* Ocupa casi todo el ancho disponible */
    }
}