/* Painéis Acessos e Responsáveis, folha de PINs (tela e impressão) e janela do convite. */
.acesso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.acesso-item {
  display: grid; gap: var(--esp-2);
  padding: var(--esp-3); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-2);
}
.acesso-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-3); color: var(--texto-forte); }
.acesso-login { font-size: var(--tam-1); color: var(--texto-suave); overflow-wrap: anywhere; }
.acesso-estado {
  font-size: var(--tam-1); font-weight: 700; padding: 0 var(--esp-2); border-radius: 99px;
  border: 1px solid var(--borda-controle); color: var(--texto-forte); background: var(--superficie-suave);
}
.acesso-estado[data-estado="ativo"] { border-color: var(--positivo-borda); background: var(--positivo-fundo); color: var(--positivo-texto); }
.acesso-estado[data-estado="bloqueado"] { border-color: var(--coral-700); background: var(--negativo-tom); color: var(--coral-700); }
.acesso-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ---- Folha (tela) ---- */
.dialogo--folha { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.folha-alerta {
  padding: var(--esp-3) var(--esp-4); margin: var(--esp-3) 0;
  background: var(--negativo-tom); color: var(--coral-700); border: 1px solid var(--coral-700); border-radius: var(--raio-1);
}
.folha-endereco { color: var(--texto-suave); overflow-wrap: anywhere; }
.folha-corpo { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--esp-3); }
.folha-cartao { padding: var(--esp-4); border: 2px dashed var(--borda-controle); border-radius: var(--raio-2); background: var(--neutro-0); break-inside: avoid; }
.folha-nome { font-size: var(--tam-3); font-weight: 700; color: var(--texto-forte); margin-bottom: var(--esp-2); overflow-wrap: anywhere; }
.folha-cartao dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--esp-3); font-size: var(--tam-1); }
.folha-cartao dt { color: var(--texto-suave); }
.folha-cartao dd { margin: 0; color: var(--texto-forte); overflow-wrap: anywhere; }
.folha-login { font-weight: 700; font-size: var(--tam-2); }
.folha-pin { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.18em; }
.folha-botoes { position: sticky; bottom: 0; background: var(--superficie); padding-top: var(--esp-3); }

/* ---- Convite ---- */
.convite-codigo {
  margin: var(--esp-3) 0; padding: var(--esp-3); text-align: center; overflow-wrap: anywhere;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; color: var(--texto-forte);
  background: var(--superficie-suave); border-radius: var(--raio-1);
}
#dlg-convite label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--texto-forte); }

/* ---- Impressão: só a folha sai no papel, um recorte por pessoa ---- */
@media print {
  body > *:not(#dlg-folha) { display: none !important; }
  dialog:not(#dlg-folha) { display: none !important; }
  #dlg-folha {
    position: static !important; display: block !important; width: auto !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; box-shadow: none !important; overflow: visible !important; animation: none !important;
  }
  #dlg-folha::backdrop { display: none; }
  .folha-botoes, .folha-alerta { display: none !important; }
  .folha-corpo { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
  .folha-cartao { border: 1.5px dashed #000; padding: 6mm; color: #000; }
  .folha-nome, .folha-cartao dd, .folha-cartao dt { color: #000; }
}