/* Modal canônico do Design System — só tokens `--ds-modal-*` e `--panel-*`/`--ds-*`; nenhum hex solto.
   Posição e tamanho vêm de `style={{ left, top, width, height }}` (SystemDialog.geometria.ts); aqui ficam
   os limites, as alças, a área única de rolagem e o modo celular. */
.dialog { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: var(--ds-modal-lg); max-width: calc(100vw - var(--ds-modal-margin)); height: auto; min-width: min(var(--ds-modal-min-w), calc(100vw - var(--ds-modal-margin))); min-height: min(var(--ds-modal-min-h), calc(100dvh - 2 * var(--ds-modal-margin))); max-height: calc(100dvh - 2 * var(--ds-modal-margin)); padding: 0; border: 1px solid var(--panel-border); border-radius: var(--ds-modal-radius); background: var(--panel-surface); color: var(--panel-foreground); box-shadow: var(--ds-modal-shadow); overflow: hidden; z-index: var(--ds-modal-z); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: var(--ds-modal-backdrop); }
/* Largura de abertura por tamanho; o inline style assume depois da medição. */
.sm { width: var(--ds-modal-sm); }
.md { width: var(--ds-modal-md); }
.lg { width: var(--ds-modal-lg); }
.xl { width: var(--ds-modal-xl); }
/* Abertura com fundido curto; nenhum movimento sob preferência de movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: ds-modal-abrir 160ms ease-out; }
  @keyframes ds-modal-abrir { from { opacity: 0; } to { opacity: 1; } }
}
.header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-5); padding: 22px var(--ds-space-6); border-bottom: 1px solid var(--panel-border); background: var(--panel-surface-elevated); flex-shrink: 0; cursor: move; touch-action: none; user-select: none; }
.mobile .header { cursor: default; touch-action: auto; user-select: text; }
.header h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.header p { margin: 6px 0 0; color: var(--panel-foreground-muted); font-size: .875rem; overflow-wrap: anywhere; }
.header button { display: inline-flex; gap: var(--ds-space-2); align-items: center; min-height: var(--ds-target-min); border: 1px solid var(--panel-border); border-radius: var(--ds-space-2); background: var(--panel-surface); color: var(--panel-foreground); padding: 6px var(--ds-space-3); font: inherit; cursor: pointer; }
.header button:hover { background: var(--panel-surface-elevated); }
.dialog :focus-visible { outline: 2px solid var(--panel-focus); outline-offset: 2px; }
.header:focus-visible { outline-offset: -4px; }
/* Única área rolável; container query para o conteúdo em colunas. */
.content { flex: 1 1 auto; padding: var(--ds-space-6); min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; container-type: inline-size; }
.twoColumns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-6); align-items: start; }
@container (max-width: 720px) { .twoColumns { grid-template-columns: minmax(0, 1fr); } }
.footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-6); border-top: 1px solid var(--panel-border); background: var(--panel-surface-elevated); flex-shrink: 0; }
/* Alças de redimensionar: 4 bordas + 4 cantos, por cima do conteúdo, dentro do dialog (o clique no fundo continua sendo só o backdrop). */
.alca { position: absolute; z-index: 1; touch-action: none; background: transparent; }
.alca:focus-visible { outline: 2px solid var(--panel-focus); outline-offset: -2px; background: var(--panel-focus); opacity: .5; }
.alca_n { top: 0; left: var(--ds-modal-handle); right: var(--ds-modal-handle); height: var(--ds-modal-handle); cursor: ns-resize; }
.alca_s { bottom: 0; left: var(--ds-modal-handle); right: var(--ds-modal-handle); height: var(--ds-modal-handle); cursor: ns-resize; }
.alca_e { right: 0; top: var(--ds-modal-handle); bottom: var(--ds-modal-handle); width: var(--ds-modal-handle); cursor: ew-resize; }
.alca_w { left: 0; top: var(--ds-modal-handle); bottom: var(--ds-modal-handle); width: var(--ds-modal-handle); cursor: ew-resize; }
.alca_ne { top: 0; right: 0; width: calc(2 * var(--ds-modal-handle)); height: calc(2 * var(--ds-modal-handle)); cursor: nesw-resize; }
.alca_sw { bottom: 0; left: 0; width: calc(2 * var(--ds-modal-handle)); height: calc(2 * var(--ds-modal-handle)); cursor: nesw-resize; }
.alca_nw { top: 0; left: 0; width: calc(2 * var(--ds-modal-handle)); height: calc(2 * var(--ds-modal-handle)); cursor: nwse-resize; }
.alca_se { bottom: 0; right: 0; width: calc(2 * var(--ds-modal-handle)); height: calc(2 * var(--ds-modal-handle)); cursor: nwse-resize; }
/* Celular (≤ 600 px): tela cheia, sem mover nem redimensionar (as alças não são renderizadas). */
.mobile { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; min-width: 0; min-height: 0; border: 0; border-radius: 0; }
.mobile .header, .mobile .content { padding: var(--ds-space-4); }
.mobile .footer { padding: var(--ds-space-3) var(--ds-space-4); }