/* C-11 Modal on native <dialog>: focus trap, Esc and inert background come from the browser. */
.modal {
  width: calc(100% - 2 * var(--sp-7)); max-width: 560px; max-height: calc(100dvh - 2 * var(--sp-7));
  padding: var(--sp-9); border: none; border-top: 6px solid var(--accent); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-menu);
}
.modal::backdrop { background: var(--overlay-modal); }
.modal[open] { display: flex; flex-direction: column; gap: 18px; }
.modal__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); }
.modal__titulo { margin: 0; font-size: var(--fs-card-title); font-weight: 600; }
.modal__subtitulo { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.modal__fechar {
  flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-field-panel); background: transparent; color: var(--ink); cursor: pointer;
}
.modal__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); }
.modal__texto { margin: 0; color: var(--ink-2); }
.modal__lista { margin: 0; padding-left: var(--sp-8); color: var(--ink-2); font-size: 14px; }
.modal__alerta { margin: 0; font-size: var(--fs-small); color: var(--danger-text); }
.modal__rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
}

/* Read-only value with a copy button (W-07 link, W-10 e-mail). */
.copia { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.copia__texto {
  flex: 1 1 240px; min-width: 0; height: var(--btn-panel); padding: 0 var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-field-panel);
  background: var(--bg); color: var(--ink); font-size: var(--fs-small);
}
.modal--perigo { border-top-color: var(--danger); }
/* Bottom card on the phone (I-04): same dialog, anchored low, no accent border. */
.modal--rodape { margin-bottom: var(--sp-5); border-top: none; }
.modal__empilhado { display: flex; flex-direction: column; gap: var(--sp-3); }
.modal__form { display: flex; flex-direction: column; gap: 18px; }

/* Radio choice as cards inside a modal (W-06.5). */
.opcoes { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; border: none; }
.opcoes legend { margin-bottom: var(--sp-4); padding: 0; }
.opcao {
  display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--r-field-panel); cursor: pointer;
}
.opcao:has(input:checked) { border-color: var(--brand); background: var(--accent-soft); }
.opcao input { margin: 3px 0 0; accent-color: var(--brand); width: 18px; height: 18px; flex: 0 0 18px; }
.opcao__titulo { display: block; font-weight: 600; }
.opcao__texto { display: block; font-size: var(--fs-small); color: var(--ink-2); }

/* W-04.1 template choice inside the WhatsApp modal (one pressed at a time). */
.opcoes-modelo { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.opcoes-modelo legend { padding: 0; margin-bottom: var(--sp-2); }
.opcoes-modelo__lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opcao-modelo {
  min-height: var(--touch-min); padding: 0 var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.opcao-modelo[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--brand); font-weight: 600; }