/* Telas do 2FA (django-two-factor-auth) no layout de login do Unfold. Os templates do pacote que não foram
   sobrescritos (cadastro do autenticador, códigos reserva...) vêm com h1, p e classes do Bootstrap (.btn):
   aqui eles ganham o visual do Unfold, com as cores dele (variáveis --color-* que o skeleton do Unfold define). */
.acesso-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 32px;
                color: var(--color-font-subtle-light); font-size: 12px; line-height: 1.35; }
.acesso-marca img { height: 44px; width: auto; }
.acesso-marca span { padding-left: 12px; border-left: 1px solid var(--color-base-200); }
.dark .acesso-marca img { filter: brightness(0) invert(1); }  /* logotipo em branco no tema escuro, como no painel da direita */
.dark .acesso-marca span { border-color: var(--color-base-700); }
.acesso > .acesso-rodape { margin: 32px 0 0; color: var(--color-font-subtle-light); font-size: 12px; }
.dark .acesso-marca, .dark .acesso-rodape { color: var(--color-font-subtle-dark); }

/* título no padrão do unauthenticated_title.html do Unfold */
.acesso > h1 { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--color-base-200);
               color: var(--color-primary-600); font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.dark .acesso > h1 { border-color: var(--color-base-800); color: var(--color-primary-500); }
.acesso > p, .acesso > form > p { margin: 0 0 16px; line-height: 1.6; }
.acesso > ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; font-family: ui-monospace, monospace; }
.acesso p > a:not(.btn) { color: var(--color-primary-600); }
.dark .acesso p > a:not(.btn) { color: var(--color-primary-500); }
.acesso img[src*="qrcode"], .acesso img[alt="QR Code"] { display: block; width: 200px; max-width: 100%; margin: 8px auto;
                                                         padding: 8px; border-radius: var(--border-radius, 6px); background: #fff; }
.acesso .alert-warning { padding: 10px 12px; border-radius: var(--border-radius, 6px); background: #fef3c7; color: #92400e; }

/* botões do Bootstrap como os do Unfold (components/button.html) */
.acesso .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px;
               border: 1px solid transparent; border-radius: var(--border-radius, 6px); font-weight: 500; white-space: nowrap;
               text-decoration: none; cursor: pointer; background: var(--color-base-100); color: var(--color-font-important-light); }
.dark .acesso .btn { background: var(--color-base-800); color: var(--color-font-important-dark); }
.acesso .btn-primary, .acesso .btn-success, .dark .acesso .btn-primary, .dark .acesso .btn-success { background: var(--color-primary-600); color: #fff; }
.acesso .btn-link, .dark .acesso .btn-link { background: transparent; color: var(--color-primary-600); }
.acesso .btn:hover { opacity: .85; }
.acesso .btn-block { display: flex; width: 100%; }
.acesso .float-right { float: right; }

/* opção de método no cadastro do autenticador (RadioSelect) */
.acesso input[type=radio] { accent-color: var(--color-primary-600); margin-right: 6px; }