/* ========================================================================== 4UTO Office — telas de autenticação Login (layout dividido), segundo fator e recuperação de senha. Cores só pelos tokens de variables.css: o traz data-brand × data-theme. ========================================================================== */ @import url("variables.f952999a3336.css"); /* ── Base ────────────────────────────────────────────────────────────────── */ .auth-body { min-height: 100vh; margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } /* ── Login: layout dividido ──────────────────────────────────────────────── */ .auth-split { display: flex; min-height: 100vh; } /* Painel da marca: a cor cheia da marca (Marinho ou Grafite) nos dois modos. */ .auth-split-marca { flex: 0 0 55%; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem 3.5rem; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); } /* Wordmark negativa: 4UTO em Gelo/Areia (sidebar-active não inverte no escuro). */ .auth-split-marca .wordmark-4uto { color: var(--color-sidebar-active); font-size: 32px; } .auth-split-marca .wordmark-office { font-size: 12px; } .auth-split-chamada { max-width: 420px; } .auth-split-chamada h2 { margin: 0 0 1rem; font-family: var(--font-title); font-size: 2.1rem; font-weight: 600; line-height: 1.25; color: var(--color-sidebar-active); } .auth-split-chamada p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--color-sidebar-text); } .auth-split-destaques { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .auth-split-destaque { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--color-sidebar-text); } .auth-split-destaque .material-symbols-outlined { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--color-sidebar-hover); color: var(--color-accent); font-size: 20px; } .auth-split-destaque strong { display: block; font-weight: 600; color: var(--color-sidebar-active); } .auth-split-destaque small { display: block; font-size: 0.8125rem; color: var(--color-sidebar-text); } /* Painel do formulário */ .auth-split-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: var(--color-card); overflow-y: auto; } .auth-form-box { width: 100%; max-width: 400px; } /* Wordmark clara acima do formulário: só aparece quando o painel da marca some. */ .auth-marca-movel { display: none; justify-content: center; margin-bottom: 2rem; } .auth-form-cabecalho { margin-bottom: 2rem; text-align: center; } .auth-titulo { margin: 0 0 0.35rem; font-family: var(--font-title); font-size: 1.75rem; font-weight: 600; color: var(--color-text); } .auth-subtitulo { margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); } .auth-divisor { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; font-size: 0.8125rem; color: var(--color-text-muted); } .auth-divisor::before, .auth-divisor::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .auth-rodape { margin: 2rem 0 0; text-align: center; font-size: 0.8125rem; color: var(--color-text-muted); } /* Força da senha */ .auth-senha-forca { margin-top: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); font-size: 0.8125rem; } .auth-senha-forca-cabecalho { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; } .auth-senha-forca-rotulo, .auth-senha-forca-texto { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; } .auth-senha-forca-rotulo { color: var(--color-text-secondary); } .auth-senha-forca-texto { min-width: 48px; font-weight: 600; text-align: right; } .auth-senha-barra { flex: 1; height: 5px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-border); } .auth-senha-barra-cheia { width: 0; height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease, background-color 0.3s ease; } .auth-senha-regras { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.75rem; } .auth-senha-regra { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; color: var(--color-text-muted); transition: color 0.2s; } .auth-senha-regra.ok { color: var(--color-success-text); } .auth-senha-regra.fail { color: var(--color-danger-text); } .auth-senha-regra-icone { flex-shrink: 0; width: 14px; font-weight: 700; text-align: center; } /* ── Telas em cartão central (segundo fator, senha) ─────────────────────── */ .auth-wrapper { width: 100%; max-width: 440px; padding: 2rem 1rem; } .auth-branding { display: flex; justify-content: center; margin-bottom: 1.5rem; } .auth-branding .wordmark-4uto { font-size: 36px; } .auth-branding .wordmark-office { font-size: 12px; } .auth-card { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-card); color: var(--color-text); } .auth-card h2 { font-family: var(--font-title); font-size: 1.5rem; font-weight: 600; color: var(--color-text); } .auth-card-icone { font-size: 48px; color: var(--color-primary); } .auth-card-icone.grande { font-size: 64px; } .auth-card-icone.sucesso { color: var(--color-success-text); } .auth-card-icone.erro { color: inherit; } .auth-body .auth-codigo { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 8px; } /* ── Componentes compartilhados (Bootstrap recolorido pela marca) ───────── */ .auth-body .form-label { margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .auth-body .form-control { min-height: 44px; padding: 0.6rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-card); color: var(--color-text); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .auth-body .form-control::placeholder { color: var(--color-text-muted); opacity: 1; } /* Foco: borda de 2px na cor da marca (1px de borda + 1px de sombra interna) e halo suave. */ .auth-body .form-control:focus { border-color: var(--color-primary); background-color: var(--color-card); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-primary-surface); } .auth-body .form-control.is-invalid, .auth-body .form-control.is-invalid:focus { border-color: var(--color-danger-text); } .auth-body .input-group-text { min-height: 44px; border-color: var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-muted); } .auth-body .input-group .material-symbols-outlined, .auth-body .btn .material-symbols-outlined { font-size: 20px; vertical-align: middle; } .auth-body .input-group-text:hover { color: var(--color-text-secondary); } .auth-body .form-check-input { border-color: var(--color-border); } .auth-body .form-check-input:checked { border-color: var(--color-primary-solid); background-color: var(--color-primary-solid); } .auth-body .form-check-label { font-size: 0.875rem; color: var(--color-text-secondary); } /* Botão principal: a cor sólida da marca, texto sobre o primário. */ .auth-body .btn-primary, .auth-body .auth-botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-height: 44px; border: 1px solid var(--color-primary-solid); border-radius: var(--radius-md); background-color: var(--color-primary-solid); color: var(--color-on-primary); font-size: 0.9375rem; font-weight: 600; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .auth-body .btn-primary:hover, .auth-body .btn-primary:active, .auth-body .auth-botao:hover, .auth-body .auth-botao:active { border-color: var(--color-primary-dark); background-color: var(--color-primary-dark); color: var(--color-on-primary); } .auth-body .btn-primary:disabled, .auth-body .auth-botao:disabled { opacity: 0.65; cursor: not-allowed; } .auth-body .btn-outline-secondary { min-height: 44px; border-color: var(--color-border); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-text); font-weight: 500; } .auth-body .btn-outline-secondary:hover, .auth-body .btn-outline-secondary:active { border-color: var(--color-text-muted); background: var(--color-bg-secondary); color: var(--color-text); } /* Links: a cor da marca (no escuro, o primário já é o tom claro legível). */ .auth-body a:not(.btn) { color: var(--color-primary); font-weight: 500; text-decoration: none; } .auth-body a:not(.btn):hover { color: var(--color-primary-dark); text-decoration: underline; } .auth-body a:not(.btn) .material-symbols-outlined { font-size: 16px; vertical-align: middle; } /* Alvo mínimo de toque (24px) no link de recuperação. */ .auth-body .auth-link-senha { display: inline-block; min-height: 24px; padding: 4px 0; font-size: 0.875rem; } .auth-body .alert { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; } .auth-body .alert .material-symbols-outlined { font-size: 20px; } .auth-body .text-muted { color: var(--color-text-secondary) !important; } /* ── Responsivo ──────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .auth-split-marca { display: none; } .auth-marca-movel { display: flex; } .auth-split-form { padding: 2.5rem 1rem; background: var(--color-bg); } } @media (max-width: 575.98px) { .auth-wrapper { padding: 1.5rem 1rem; } .auth-senha-regras { grid-template-columns: 1fr; } } /* ── Foco visível (WCAG 2.4.7 / 1.4.11) ─────────────────────────────────── */ .auth-body :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .auth-body .btn:focus-visible, .auth-body .form-check-input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; box-shadow: none; } .auth-body .form-control:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 0; }