/* ── Padrão canônico: diálogos e toast ────────────────────────────────────────
   TROCAR os tokens pelos do app antes de colar. Nada de cor chumbada: em app com
   tema escuro, hex fixo aqui vira caixa branca no escuro. */
.ui-dialog-bg {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(2, 6, 23, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ui-dialog {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; max-width: 430px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  animation: ui-dialog-in .18s ease-out both;
}
.ui-dialog h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text); }
.ui-dialog p {
  margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
/* Herda a pele de input do painel — nada de aparência default do browser. */
.ui-dialog input { width: 100%; margin: 0 0 18px; box-sizing: border-box; }
/* Os botões do diálogo se bastam: NÃO dependem das classes do app. Em vários apps
   `.btn` só existe dentro de um container (ex.: `.auth-card .btn` no Ponto) e o botão
   sairia sem pele nenhuma — aparência default do browser, que é o que viemos tirar. */
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ui-dialog-actions button {
  min-width: 106px; padding: 9px 16px; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  transition: filter .12s, background .12s;
}
.ui-dialog-actions button:hover { filter: brightness(.97); }
.ui-dialog-actions button.primary { background: var(--primary, #2563eb); border-color: transparent; color: #fff; }
.ui-dialog-actions button.danger  { background: var(--danger, #dc2626); border-color: transparent; color: #fff; }
.ui-dialog-actions button:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  .ui-dialog-actions { flex-direction: column-reverse; }
  .ui-dialog-actions button { width: 100%; }
}

#toast-root { position: fixed; right: 16px; bottom: 16px; z-index: 10001; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--ok, #10b981);
  border-radius: 10px; padding: 11px 15px; font-size: 14px; max-width: 340px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16); cursor: pointer;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { border-left-color: var(--err, #dc2626); }
.toast.warn  { border-left-color: var(--warn, #d97706); }
.toast.info  { border-left-color: var(--info, #0ea5e9); }