/* rd-dialog.css — il dialogo del sito, al posto delle finestre di sistema.
   ═══════════════════════════════════════════════════════════════════════════
   Stessa grammatica del foglio Sicurezza (.sx-sheet): velo scuro, pannello che
   sale, una sola azione piena e un'uscita discreta. Tutto sui token --ds-*,
   nessun colore inventato.

   Regola della casa: un elemento, un colore pieno. Il gradiente compare solo
   come luce ambientale dietro l'icona, mai come vernice sui bordi.
   ═══════════════════════════════════════════════════════════════════════════ */

.rdlg {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body.rdlg-bloccato { overflow: hidden; }

.rdlg-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--ds-dur-normal) var(--ds-ease);
}
.rdlg.is-aperto .rdlg-back { opacity: 1; }

.rdlg-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 26px 26px 22px;
  border-radius: var(--ds-r-box, 20px);
  border: 1px solid var(--ds-line, rgba(255, 255, 255, .12));
  background: var(--ds-surface, #121215);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity var(--ds-dur-normal) var(--ds-ease), transform var(--ds-dur-normal) cubic-bezier(.2, .7, .3, 1);
}
.rdlg.is-aperto .rdlg-panel { opacity: 1; transform: none; }

/* L'icona: tondo neutro, colore secondo il tono. La luce dietro e' ambiente. */
.rdlg-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ds-raised, #1c1c20);
  color: var(--ds-dim, #a1a1a8);
}
.rdlg--avviso .rdlg-ic {
  color: var(--ds-accent-text, #ff9d5c);
  background:
    radial-gradient(60px circle at 50% 50%, rgba(255, 107, 0, .16), transparent 70%),
    var(--ds-raised, #1c1c20);
}
.rdlg--ok .rdlg-ic { color: var(--ds-ok, #34d399); }

.rdlg-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: var(--ds-w-bold, 700);
  letter-spacing: -.01em;
  color: var(--ds-text, #f5f5f7);
}
.rdlg-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ds-dim, #a1a1a8);
}

.rdlg-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
}

/* L'azione utile e' piena e sta sopra: e' la via d'uscita, non un dettaglio. */
.rdlg-primary {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--ds-control-h, 44px);
  padding: 0 20px;
  border: none;
  border-radius: var(--ds-r-pill, 999px);
  background: var(--ds-accent, #ff6b00);
  color: var(--ds-on-accent, #1a1206);
  font: inherit;
  font-size: 14.5px;
  font-weight: var(--ds-w-bold, 700);
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
.rdlg-primary:hover { background: #ff8636; }

.rdlg-ghost {
  appearance: none;
  -webkit-appearance: none;
  /* Era 40. E' un comando, e la sua cornice a riposo non esiste (fondo
     trasparente, nessun bordo): la scatola puo' crescere davvero, e a riposo
     non si vede alcuna differenza. In cambio le due azioni del dialogo hanno la
     stessa altezza, che e' anche cio' che dice il commento qui sopra. */
  min-height: var(--ds-control-h, 44px);
  padding: 0 20px;
  border: none;
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-dim, #a1a1a8);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
.rdlg-ghost:hover { color: var(--ds-text, #f5f5f7); background: rgba(255, 255, 255, .05); }

.rdlg-primary:focus-visible,
.rdlg-ghost:focus-visible {
  outline: 2px solid var(--ds-accent-text, #ff9d5c);
  outline-offset: 2px;
}

/* Chi ha chiesto meno movimento vede il dialogo comparire, non salire: lo fa
   gia' il blocco unico di tokens.css, che azzera la durata delle transizioni.
   Lo stato finale non serve rimetterlo a posto a mano, perche' lo dichiara gia'
   .rdlg.is-aperto .rdlg-panel, che e' piu' specifico. */

@media (max-width: 420px) {
  .rdlg { padding: 14px; align-items: flex-end; }
  .rdlg-panel { width: 100%; padding: 22px 20px 18px; }
}