/* Estilo compartilhado pelas páginas de autenticação (login, criar conta,
   recuperar senha, definir senha). Split layout responsivo: hero verde +
   form clean. Em mobile, hero compacto em cima e form embaixo. */

.auth-page { min-height: 100vh; background: #f5f7f5; position: relative; }

/* Seletor de idioma flutuante no canto superior direito das páginas de auth. */
.auth-locale-switcher {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 10;
}
@media (max-width: 767.98px) {
    .auth-locale-switcher { top: 0.6rem; right: 0.75rem; }
}

.auth-hero {
    background: linear-gradient(135deg, #2d7a3e 0%, #1e5b2c 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 2.5rem 1.75rem 2.5rem;
}
.auth-hero-top { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-hero-main-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    filter: brightness(0) invert(1);
}
.auth-hero .tagline {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.45;
    opacity: 0.92;
    max-width: 460px;
}

/* Logos institucionais — cores naturais sobre faixa branca compacta
   (necessária pra logos coloridos serem visíveis no fundo verde). */
.auth-hero-logos { margin-top: 1.5rem; }
.auth-hero-logos-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.1rem;
    background: #fff;
    border-radius: 6px;
    padding: 10px 14px;
}
.auth-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex: 0 0 auto;
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.auth-hero-logo:hover, .auth-hero-logo:focus {
    opacity: 1;
    transform: translateY(-2px);
}
.auth-hero-logo img {
    max-height: 40px;
    max-width: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Form (lado direito) */
.auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}
.auth-form { width: 100%; max-width: 380px; }
.auth-form h1 { font-size: 1.5rem; font-weight: 500; margin-bottom: 1.5rem; }
.auth-form .form-control { padding: 0.7rem 0.9rem; font-size: 1rem; }
.auth-form .form-label { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.35rem; }
.auth-form .btn-primary {
    padding: 0.7rem;
    font-weight: 500;
    font-size: 1rem;
}

/* Mobile: hero em cima, encolhido */
@media (max-width: 767.98px) {
    .auth-hero {
        padding: 2rem 1.5rem 1.25rem;
        text-align: center;
        align-items: center;
    }
    .auth-hero-main-logo { max-width: 220px; margin-bottom: 1rem; }
    .auth-hero .tagline { font-size: 1.1rem; }
    .auth-hero-logos { padding-top: 0.9rem; }
    .auth-hero-logos-line { gap: 0.65rem 1rem; }
    .auth-hero-logo { height: 32px; }
    .auth-hero-logo img { max-height: 32px; max-width: 85px; }
}