/*
 * Aiden UI · empty-state
 * CSS module de Arc (registry/components/empty-state/empty-state.module.css) traducido a clases
 * .aui-empty-state-<parte>, con las MISMAS variables de kit/foundation.css.
 *
 * Correspondencia: .root → .aui-empty-state · .icon → -icon · .glyph → -glyph · .frame → -frame · .copy → -copy ·
 * .line → -line · .action → -action · @keyframes empty-state-icon → aui-empty-state-icon. Los selectores
 * de etiqueta de Arc (.root h3, .root p) se conservan, así el marcado de PHP sin -frame ni -line se ve igual.
 */
.aui-empty-state { display: flex; box-sizing: border-box; width: 100%; flex-direction: column; align-items: center; padding: clamp(var(--space-8), 8vw, var(--space-12)) var(--space-5); text-align: center; font-family: var(--font-body); }
.aui-empty-state * { box-sizing: border-box; }
.aui-empty-state-icon { position: relative; display: grid; width: var(--space-12); height: var(--space-12); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-muted); color: var(--text-secondary); animation: aui-empty-state-icon var(--duration-considered) var(--ease-enter) both; }
.aui-empty-state-icon svg { display: block; }
.aui-empty-state-glyph { display: grid; place-items: center; }
.aui-empty-state-frame { width: 100%; max-width: 100%; }
.aui-empty-state-copy { display: flow-root; }
.aui-empty-state h3 { position: relative; margin: var(--space-5) 0 0; color: var(--foreground); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); letter-spacing: normal; }
.aui-empty-state p { position: relative; max-width: 18rem; margin: var(--space-2) auto 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
/* El texto centrado se reparte en líneas parejas, así una descripción nueva nunca deja una palabra sola. */
.aui-empty-state-line { display: block; text-wrap: balance; }
.aui-empty-state-action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
/* El icono se asienta una vez cuando aparece el estado; los cambios posteriores se funden en su sitio. */
@keyframes aui-empty-state-icon { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .aui-empty-state-icon { animation: none; } }