/*
 * Aiden UI · dialog
 * CSS module de Arc (registry/components/dialog/dialog.module.css) traducido a clases .aui-dialog-<parte>, con
 * las MISMAS variables de kit/foundation.css. El movimiento (que en Arc hace Motion) va en dialog.js con la API
 * de animaciones web; aquí quedan los mismos tiempos para movimiento reducido.
 *
 * Correspondencia: .overlay → -overlay · .content → -content · .header → -header · .title → -title ·
 * .description → -description · .swap → -swap · .close → -close · .body → -body
 *
 * Única diferencia: z-index de Arc + 100000 (50 → 100050), para quedar por encima de las cabeceras fijas de los
 * paneles. El orden entre componentes del kit es el de Arc (dialog 50 < toast 60 < popover 80 < tooltip 90).
 */
.aui-dialog-overlay { position: fixed; inset: 0; z-index: 100050; background: oklch(10% 0 0 / .46); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
/* Centrado con márgenes automáticos (como un <dialog> nativo), así transform queda libre para el muelle de entrada. */
.aui-dialog-content { position: fixed; z-index: 100051; inset: 0; box-sizing: border-box; width: min(calc(100vw - var(--space-8)), 440px); height: fit-content; max-height: calc(100vh - var(--space-8)); max-height: calc(100dvh - var(--space-8)); margin: auto; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); text-align: left; }
.aui-dialog-content, .aui-dialog-content *, .aui-dialog-content *::before, .aui-dialog-content *::after { box-sizing: border-box; }
.aui-dialog-content:focus { outline: none; }
/* El contenido prestado que el CSS del panel oculta con una clase (ver prestar() en dialog.js). */
[data-aui-prestado] { display: block !important; }
/* Mientras las capas se van, los clics pasan: el disparador puede volver a abrir el diálogo a mitad de salida. */
.aui-dialog-overlay[data-state="closed"], .aui-dialog-content[data-state="closed"] { pointer-events: none !important; }

.aui-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); border-bottom: 1px solid var(--border); }
.aui-dialog-header[data-sin-titulo] { justify-content: flex-end; }
.aui-dialog-title { margin: 0 !important; padding: 0 !important; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-lg) !important; font-weight: 500 !important; letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-transform: none; }
.aui-dialog-description { margin: var(--space-2) 0 0; padding: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-dialog-title, .aui-dialog-description { position: relative; overflow-wrap: anywhere; }
.aui-dialog-swap { display: block; }
/* El interlineado va en el propio texto, así un reset de títulos del panel no encoge el título ni descoloca el botón. */
.aui-dialog-title .aui-dialog-swap { line-height: var(--leading-body); }

/* Botones blindados: los paneles ponen fondo, borde, relleno y sombra a todo <button> con !important. */
.aui-dialog-content .aui-dialog-close { -webkit-appearance: none !important; appearance: none !important; min-width: 0 !important; min-height: 0 !important; box-shadow: none !important; background-image: none !important; text-transform: none !important; text-shadow: none !important; float: none !important; line-height: 1 !important; }
/* Botón de icono compacto: pulsación rápida y vuelta con muelle. El margen negativo lo centra en la primera línea del título. */
.aui-dialog-content .aui-dialog-close { flex: 0 0 auto; margin: calc((var(--text-lg) * var(--leading-body) - var(--space-8)) / 2) 0 !important; display: grid !important; place-items: center; width: var(--space-8) !important; height: var(--space-8) !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: var(--radius-control) !important; background: color-mix(in oklab, var(--surface-muted) 50%, transparent) !important; color: var(--text-secondary) !important; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-dialog-close svg { display: block; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .aui-dialog-content .aui-dialog-close:hover { background: var(--surface-muted) !important; color: var(--foreground) !important; } }
.aui-dialog-content .aui-dialog-close:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
.aui-dialog-body { padding: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-body); }

@media (prefers-reduced-motion: reduce) {
  .aui-dialog-content .aui-dialog-close, .aui-dialog-content .aui-dialog-close:active { transition: none; }
  .aui-dialog-content .aui-dialog-close:active { transform: none; }
}