/* ============================================================
   login-custom.css — Página de Login
   Apenas estilos exclusivos desta página.
   O restante vem de: design-system.css → typography.css
                      → components.css → layouts.css
   ============================================================ */

/* Fundo com gradiente suave */
body {
    background: linear-gradient(
        to bottom,
        rgba(var(--color-primary-rgb), 0.05) 0%,
        var(--color-bg-body) 100%
    );
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Área central de conteúdo */
.main-content-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: var(--spacing-xl) 0;
}

/* Container do formulário */
.login-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Card do formulário */
.form-section {
    background-color: var(--color-bg-body);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

/* Título dentro do card */
.form-section-title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

/* Links abaixo do formulário */
.login-links {
    text-align: center;
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-base);
}
.login-links a {
    color: var(--color-text-link);
    font-weight: var(--font-weight-medium);
}
.login-links a:hover {
    text-decoration: underline;
}

/* Link "Esqueci minha senha" */
.forgot-password-link {
    margin-top: var(--spacing-md);
    text-align: center;
}

/* Botão do modal de envio de link */
.btn-enviar-link {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
}

/* Overrides de modal para esta página */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}
.modal-header  { border-bottom-color: var(--color-border); padding: 1.5rem; }
.modal-body    { padding: 1.5rem; }
.modal-footer  {
    border-top-color: var(--color-border);
    padding: 1rem 1.5rem;
    justify-content: center;
}
.modal-title   { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* Tamanho específico do botão de login nesta página */
#btnLogin {
    width: 100%;
}

@media (max-width: 576px) {
    .form-section          { padding: 2rem 1.5rem; }
    .main-content-wrapper  { padding: var(--spacing-md); }
    .modal-header,
    .modal-body,
    .modal-footer          { padding: 1rem; }
}