/* VERIFICAÇÃO EM DUAS ETAPAS (sistema/2FA.md) — telas de configurar, códigos de recuperação e bloco "Segurança".
   Só tokens do tema (claro/escuro). O QR code fica sempre preto no branco (é o que a câmera lê melhor), com moldura. */
.df { display:flex; flex-direction:column; gap:10px; min-width:0; }
.df-passos { display:flex; gap:6px; margin:0 0 4px; }
.df-passos span { flex:1; height:5px; border-radius:99px; background:var(--surface); }
.df-passos span.on { background:var(--acc); }
.df-selo { font-size:38px; line-height:1; }
.df-tit { font-family:var(--f-titulo); color:var(--head); font-size:21px; font-weight:600; margin:0; line-height:1.25; }
.df-h3 { font-family:var(--f-titulo); color:var(--head); font-size:15px; font-weight:700; margin:6px 0 0; }
.df-sub { color:var(--mt); font-size:13.5px; margin:0; line-height:1.5; }
.df-sub b { color:var(--tx); }
.df-lista { margin:0; padding-left:20px; font-size:13.5px; color:var(--tx); display:grid; gap:4px; }
.df-apps { display:grid; gap:8px; }
.df-app { border:1px solid var(--ln); border-radius:12px; padding:10px 12px; background:var(--bg); font-size:13.5px; color:var(--head); }
.df-app small { display:block; color:var(--mt); font-size:12.5px; margin-top:2px; }
.df-app a { color:var(--acc-tx); font-weight:700; text-decoration:none; }
.df-tag { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--okbg); color:var(--ok); vertical-align:middle; }
.df-btn { width:100%; border:0; border-radius:12px; padding:13px; background:var(--acc); color:var(--onacc); font:900 15px var(--f-texto); cursor:pointer; margin-top:4px; text-align:center; text-decoration:none; display:block; box-sizing:border-box; }
.df-btn:disabled { opacity:.45; cursor:not-allowed; }
.df-btn.sec { background:transparent; color:var(--acc-tx); border:1px solid var(--ln); font-weight:700; font-size:14px; padding:11px; }
.df-btn.sec.perigo { color:var(--perigo, var(--warn)); }
.df-btn.mini { width:auto; padding:7px 12px; margin:0; font-size:13px; flex:none; }
.df-link { background:none; border:0; padding:4px 0; color:var(--acc-tx); font:700 13px var(--f-texto); cursor:pointer; text-decoration:none; align-self:center; }
.df-btn:focus-visible, .df-link:focus-visible, .df input:focus-visible, .df-bloco input:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.df-qr { align-self:center; width:min(240px, 100%); background:#fff; border-radius:16px; padding:10px; border:1px solid var(--ln); box-shadow:0 8px 24px rgba(0,0,0,.12); box-sizing:border-box; }
.df-qr svg { display:block; width:100%; height:auto; }
.df-manual { font-size:13.5px; color:var(--tx); background:var(--surface); border-radius:12px; padding:10px 12px; }
.df-manual summary { cursor:pointer; font-weight:700; color:var(--acc-tx); }
.df-manual .df-sub { margin-top:8px; }
.df-chave { display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.df-chave code { flex:1 1 200px; font:700 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.06em; color:var(--head); background:var(--card); border:1px dashed var(--ln); border-radius:10px; padding:8px 10px; overflow-wrap:anywhere; user-select:all; }
.df-abrir { font-size:12.5px; }
@media (min-width: 861px) and (hover: hover) { .df-abrir { display:none; } } /* no computador não há app para abrir */
.df-campo { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--mt); }
.df-campo input { padding:12px 14px; border-radius:12px; border:1px solid var(--ln); background:var(--bg); font:inherit; font-size:15px; color:var(--tx); }
.df-codigo { font-size:24px !important; letter-spacing:8px; text-align:center; font-variant-numeric:tabular-nums; }
.df-erro { background:var(--warnbg); color:var(--warn); padding:10px 12px; border-radius:10px; font-size:13.5px; }
.df-erro[hidden] { display:none; }
.df-ok { background:var(--okbg); color:var(--ok); padding:10px 12px; border-radius:10px; font-size:13.5px; }
.df-codigos { list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; background:var(--surface); border-radius:14px; counter-reset:dfc; }
.df-codigos li { counter-increment:dfc; display:flex; align-items:center; gap:6px; min-width:0; }
.df-codigos li::before { content:counter(dfc) "."; color:var(--mt); font-size:11px; width:18px; text-align:right; flex:none; }
.df-codigos code { font:700 14.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--head); letter-spacing:.04em; overflow-wrap:anywhere; }
.df-acoes-lado { display:flex; gap:8px; flex-wrap:wrap; }
.df-acoes-lado .df-btn { width:auto; flex:1 1 180px; margin-top:0; }
.df-check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--tx); cursor:pointer; }
.df-check input { margin-top:2px; width:18px; height:18px; accent-color:var(--acc); flex:none; }
.df-carregando { opacity:.6; pointer-events:none; }
/* bloco Segurança (app e Painel) */
.df-pagina { max-width:640px; }
.df-bloco { background:var(--card); color:var(--tx); border:1px solid var(--ln); border-radius:var(--r-card, 18px); padding:18px; display:flex; flex-direction:column; gap:10px; box-sizing:border-box; min-width:0; }
.df-bloco-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.df-bloco-topo h3 { margin:0; color:var(--head); font-family:var(--f-titulo); font-size:17px; }
.df-pill { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--surface); color:var(--mt); }
.df-pill.ok { background:var(--okbg); color:var(--ok); }
.df-pill.warn { background:var(--warnbg); color:var(--warn); }
.df-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13.5px; }
.df-kv dt { color:var(--mt); } .df-kv dd { margin:0; color:var(--head); overflow-wrap:anywhere; }
.df-alerta { color:var(--warn); }
.df-nota { color:var(--mt); font-size:12.5px; margin:0; }
.df-senha { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--ln); padding-top:10px; }
.df-bloco .df { border-top:1px solid var(--ln); padding-top:12px; }
/* aviso do plano B (CM_2FA_DESLIGADA) no Painel */
.df-desligada { position:fixed; left:0; right:0; bottom:0; z-index:9000; box-shadow:0 -6px 20px rgba(0,0,0,.25); background:var(--warn); color:#fff; font-weight:700; padding:12px 16px; text-align:center; font-size:14px; }
@media (max-width: 480px) { .df-codigos { grid-template-columns:1fr 1fr; padding:10px; } .df-codigos code { font-size:13px; } .df-tit { font-size:19px; } }