/* dialogos.css – Visual dos diálogos SweetAlert2 (ver dialogos.js), igual em todas as páginas:
   app.php (depois do style.css, antes do collaboration.css), index.php, convite.php e os
   slides. As cores são os tokens do :root do style.css; as páginas que não o carregam usam os
   mesmos valores escritos aqui. */

.swal2-popup {
  color: var(--color-text, #f2f2f7);
  background: var(--modal-bg, #16161e);
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--modal-radius, 16px);
  box-shadow: var(--modal-shadow, 0 24px 64px rgba(0, 0, 0, 0.6));
}

.swal2-title {
  color: #fff;
  font-size: 1.35em;
}

.swal2-html-container {
  color: var(--color-text-muted, #a9a9bd);
}

.swal2-input,
.swal2-select,
.swal2-textarea {
  color: var(--color-text, #f2f2f7);
  background: var(--field-bg, #1f1f29);
  border: 1px solid var(--field-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--field-radius, 8px);
  box-shadow: none;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
  border-color: var(--color-select, #88aaff);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(136, 170, 255, 0.45));
}

.swal2-styled {
  border-radius: var(--radius-sm, 6px);
  font-weight: 600;
}

.swal2-validation-message {
  color: var(--color-text, #f2f2f7);
  background: #2a2a38;
}

.swal2-container.swal2-backdrop-show {
  background: var(--modal-overlay, rgba(6, 6, 12, 0.72));
}

.swal2-loader {
  border-color: var(--color-select, #88aaff) transparent var(--color-select, #88aaff) transparent;
}

/* Toasts (autosave, notificações em tempo real): o SweetAlert2 os deixa brancos por uma
   regra mais específica (.swal2-popup.swal2-toast), e o texto herdava o cinza-claro acima
   — ficava quase ilegível. Mesmo tema escuro dos diálogos. */
.swal2-popup.swal2-toast {
  color: var(--color-text, #f2f2f7);
  background: var(--modal-bg-raised, #1c1c26);
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.35));
}

.swal2-popup.swal2-toast .swal2-title {
  color: #fff;
}

.swal2-popup.swal2-toast .swal2-html-container {
  color: var(--color-text-muted, #a9a9bd);
}

/* Ícones em Font Awesome dentro do círculo colorido do próprio SweetAlert (iconesDosDialogos) */
.swal2-icon.swal-icone-fa .swal2-icon-content {
  font-size: 2.4em;
}

.swal2-toast .swal2-icon.swal-icone-fa .swal2-icon-content {
  font-size: 1.1em;
}