/* Segurança de acesso (reforma, Diagnóstico 6): diálogos, cadastro do
 * aplicativo autenticador e delegação. Só tokens. O QR traz o próprio fundo
 * branco, para o celular ler nos dois temas. */

@layer telas {
  .dialogo-seguranca {
    width: min(560px, calc(100vw - 32px)); max-height: 85vh; box-sizing: border-box;
    padding: var(--e-5); border: 1px solid var(--linha); border-radius: var(--raio-3);
    background: var(--superficie); color: var(--texto);
  }
  .dialogo-seguranca::backdrop { background: var(--veu); }
  .dialogo-seguranca h2 { margin: 0 0 var(--e-3); font-size: var(--fs-5); }
  .dialogo-seguranca h3 { margin: var(--e-4) 0 var(--e-2); font-size: var(--fs-3); }
  .dialogo-seguranca .acoes-linha { margin-top: var(--e-4); }

  .seg-passos { display: grid; gap: var(--e-2); margin: 0 0 var(--e-3); padding-left: var(--e-5); }
  .seg-qr { width: 200px; margin: var(--e-3) 0; }
  .seg-qr svg { display: block; width: 100%; height: auto; border-radius: var(--raio-2); }
  .seg-chave { font-size: var(--fs-2); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
  .seg-recuperacao {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-2);
    margin: var(--e-3) 0; padding: 0; list-style: none;
  }
  .seg-competencias {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-2);
    margin: var(--e-3) 0; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio-2);
  }
  .seg-competencias legend { padding: 0 var(--e-1); font-size: var(--fs-2); color: var(--texto-2); }
  .seg-liberacoes { display: grid; gap: var(--e-2); margin: 0; padding-left: var(--e-5); }
  .permissao-verbo { margin-left: var(--e-2); font-size: var(--fs-1); color: var(--texto-2); }

  /* Senhas da conta (5.13.1): até 320 px cada, em coluna no celular, com "Mostrar". */
  .formulario.seg-senhas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 320px)); }
  .seg-senha { position: relative; max-width: 320px; }
  .seg-senha input { width: 100%; padding-right: 80px; }
  .seg-mostrar {
    position: absolute; top: 50%; right: var(--e-1); transform: translateY(-50%); min-height: 28px; padding: 0 var(--e-2);
    border: 0; border-radius: var(--raio-1); background: transparent; color: var(--link); font: inherit; font-size: var(--fs-2);
    font-weight: 500; cursor: pointer;
  }
  .seg-mostrar:hover { background: var(--acao-suave); }
  .seg-mostrar:focus-visible { outline: none; box-shadow: var(--anel-foco); }
  @media (max-width: 760px) {
    .formulario.seg-senhas { grid-template-columns: minmax(0, 320px); }
  }
}