/* ---------- Segurança da conta (/seguranca), login em etapas e regras de senha ---------- */

/* página */
.secp .card.pad,.secp .set-row[id]{scroll-margin-top:96px}
.secp h2.h3{display:flex;align-items:center;gap:10px}
.secp h2 .tile{width:30px;height:30px;border-radius:10px}
.secp h2 .tile .i{width:16px;height:16px}
.secp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-jump{align-self:flex-start;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
.sec-jump .chip{min-height:32px;white-space:nowrap}
.sec-required b{display:block;margin-bottom:2px}
.secp .set-row>div:first-child{min-width:0}
.secp .set-row p .badge{margin-left:4px;vertical-align:1px}
.secp .row{flex-wrap:wrap}

/* checkup: anel de pontuação */
.sec-checkup{flex-direction:row;align-items:flex-start;gap:20px}
.sec-score{--p:0;--c:var(--good);width:104px;height:104px;border-radius:50%;flex:none;display:grid;place-content:center;text-align:center;position:relative;
  background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--surface-3) 0)}
.sec-score::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface-solid)}
.sec-score b,.sec-score span{position:relative}
.sec-score b{font-size:30px;line-height:1;font-weight:650;font-variant-numeric:tabular-nums}
.sec-score span{font-size:12px;color:var(--ink-2)}
.sec-score.mid{--c:var(--warn)}
.sec-score.low{--c:var(--bad)}
.sec-items{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.sec-items li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sec-items li:last-child{border-bottom:0}
.sec-items li>.i{width:18px;height:18px;flex:none;color:var(--warn)}
.sec-items li.is-ok>.i{color:var(--good)}
.sec-items li.is-ok span{color:var(--ink-2)}
@media (max-width:560px){
  .sec-checkup{flex-direction:column;align-items:center;text-align:center}
  .sec-checkup .grow{width:100%;text-align:left}
}

/* listas de aparelhos, sessões, atividade e chaves */
.sec-list,.sec-keys{list-style:none;display:flex;flex-direction:column}
.sec-list li,.sec-keys li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.sec-list li:last-child,.sec-keys li:last-child{border-bottom:0}
.sec-list .grow,.sec-keys .grow{min-width:0;overflow-wrap:anywhere}
.sec-ico{width:36px;height:36px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--ink-2)}
.sec-ico .i{width:18px;height:18px}
.sec-events li.warn .sec-ico{background:var(--warn-soft);color:var(--warn)}
.sec-keys{margin:8px 0}
.sec-keys li>.i{width:18px;height:18px;flex:none;color:var(--ink-2)}
.sec-keys-row{align-items:flex-start}
.sec-keys-row .row{margin-top:8px}
@media (max-width:560px){
  .sec-list li,.sec-keys li{flex-wrap:wrap}
  .sec-list li>.grow{flex:1 1 calc(100% - 48px)}
  .sec-keys li>.grow{flex:1 1 calc(100% - 30px)}
  .sec-list li>.row,.sec-list li>.btn{margin-left:48px}
  .sec-keys li>.row{margin-left:30px}
  .secp .set-row{flex-wrap:wrap}
  .secp .set-row>div:first-child{flex:1 1 100%}
  .secp .set-row:has(>.switch){flex-wrap:nowrap}
  .secp .set-row:has(>.switch)>div:first-child{flex:1 1 auto}
}

/* formulários pequenos */
.sec-form{gap:12px}
.sec-inline{margin-top:10px;align-items:center}
.sec-inline input{max-width:170px;min-height:40px;border-radius:12px;border:1px solid var(--line);padding:0 12px;font-size:15px}
.sec-inline input:focus{outline:2px solid var(--primary);border-color:transparent}
.sec-inline .err{flex-basis:100%}
.sec-at{display:flex;align-items:stretch}
.sec-at>span{padding:0 12px;min-height:48px;display:grid;place-items:center;border:1px solid var(--line);border-right:0;border-radius:14px 0 0 14px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.sec-at input{border-radius:0 14px 14px 0!important;flex:1;min-width:0}
.uname-hint{font-size:13px;color:var(--ink-2);min-height:0}
.uname-hint:empty{display:none}
.uname-hint.bad{color:var(--bad)}
.uname-hint.good{color:var(--good)}
.sec-code-in{font-variant-numeric:tabular-nums;letter-spacing:.18em;font-size:20px!important;text-align:center}
.sec-code-in::placeholder{letter-spacing:.18em}

/* janela do aplicativo autenticador e códigos de recuperação */
.sec-steps{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;margin:4px 0 10px}
.sec-key{font:600 17px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;background:var(--surface-2);border:1px dashed var(--line);border-radius:14px;padding:12px 14px;text-align:center;overflow-wrap:anywhere;margin-bottom:8px}
.sec-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.sec-codes code{font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface-2);border-radius:10px;padding:10px;text-align:center;letter-spacing:.05em}

/* regras de senha (cadastro, nova senha, troca) */
.pw-rules{list-style:none;display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.pw-rules li{display:flex;gap:8px;align-items:flex-start}
.pw-rules li .i{width:15px;height:15px;flex:none;margin-top:1px;opacity:.55}
.pw-rules li.is-ok{color:var(--good)}
.pw-rules li.is-ok .i{opacity:1}
.pw-rules+.fine{margin-top:4px}
.pw-err:empty{display:none}

/* login em etapas */
.login-or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:13px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-alt{gap:10px}
.login-methods{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.login-methods .meta{font-size:13px}
.login-locked{display:flex;gap:8px;align-items:flex-start;text-align:left}
.login-locked .i{flex:none;margin-top:2px}
.login-channel{border:0;padding:0;margin:0;gap:10px}
.login-channel legend{font-weight:600;font-size:14px;margin-bottom:8px}
.login-channel .check>span>.meta,.check>span>span.meta{display:block}
.auth-card .eyebrow .i{width:14px;height:14px;vertical-align:-2px}

/* equipe: chave de segurança na tela de verificação */
.adm-or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:13px;margin:4px 0}
.adm-or::before,.adm-or::after{content:"";flex:1;height:1px;background:var(--line)}
.adm-lock .btn.block{width:100%}

/* painel: pedidos de aprovação */
.adm-apv{list-style:none;display:flex;flex-direction:column;gap:10px}
.adm-apv-item{display:flex;align-items:center;gap:16px;padding:14px 16px}
.adm-apv-item .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.adm-apv-sum{font-size:14.5px;overflow-wrap:anywhere}
.adm-apv-own{max-width:220px;text-align:right}
@media (max-width:640px){.adm-apv-item{flex-direction:column;align-items:stretch}.adm-apv-own{max-width:none;text-align:left}}

/* atalho na página de conta */
.acct-sec-link{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);color:inherit;text-decoration:none}
.acct-sec-link:hover{border-color:var(--primary)}
.acct-sec-link .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-sec-link .meta{font-size:13px}
@media (max-width:560px){.acct-sec-link{flex-wrap:wrap}}

/* imprimir só os códigos de recuperação */
@media print{
  body.print-codes>*:not(#modal-root){display:none!important}
  body.print-codes #modal-root .modal-back{position:static;background:none;backdrop-filter:none}
  body.print-codes #modal-root .modal{box-shadow:none;border:0;max-width:none}
  body.print-codes #modal-root .modal-actions,body.print-codes #modal-root .x{display:none!important}
  body.print-codes .sec-codes code{background:none;border:1px solid #999}
}