/*
  dicode.ai — Proteger PDF (/proteger-pdf): a caixa da senha atual, os dois campos da senha para
  abrir lado a lado (um embaixo do outro no celular), o botão "Mostrar senha", a dica de força da
  senha e a lista de travas. Só os tokens do design system (dicode.css): cantos retos, sem sombra
  nem gradiente, linhas de 1px, laranja só como marca, alvos de toque de 44 px, pensado primeiro
  para o celular (cabe em 320 px sem rolar de lado).
*/

.pp { display: grid; gap: 24px; min-width: 0; }
.pp [hidden] { display: none !important; }
.pp-nova, .pp-grupo { display: grid; gap: 12px; min-width: 0; }
.pp-nova { gap: 24px; }

/* ---------- Senha atual (PDF que já pede senha) ---------- */
.pp-atual {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.pp-atual-titulo { margin: 0; font-size: 17px; font-weight: 700; }
.pp-linha { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pp-linha .entrada { flex: 1 1 180px; min-width: 0; width: 100%; }
.pp-linha .botao { flex: none; min-height: 48px; }

/* ---------- Senha para abrir e a repetição ---------- */
.pp-senhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
@media (max-width: 560px) { .pp-senhas { grid-template-columns: minmax(0, 1fr); } }
.pp-senhas .campo { min-width: 0; }
.pp-senha { font-family: var(--fonte-mono), monospace; letter-spacing: .02em; }

/* "Mostrar senha": botão com cara de link, sublinhado, com área de toque de 44 px */
.pp-ver {
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-ver:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

/* Força da senha: o quadradinho de 7 px do design system antes do texto (laranja = curta;
   preto = razoável ou boa) */
.pp-forca { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; }
.pp-forca:empty { display: none; }
.pp-forca::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--preto); }
.pp-forca[data-nivel="curta"]::before { background: var(--laranja); }
.pp-forca[data-nivel="boa"] { font-weight: 600; }

.pp-esquecer { max-width: 720px; margin: 0; font-weight: 600; }

/* ---------- Travas ---------- */
.pp-lista-travas { display: grid; gap: 0; }
.pp-lista-travas .opcao { flex-wrap: wrap; gap: 4px 10px; }
.pp-herdada { color: var(--cinza); }
.pp-herdadas { margin: 0; }
.pp-travas .entrada { max-width: 360px; }