/*
 * Aiden UI · button
 * CSS module de Arc (registry/components/button/button.module.css) traducido a la clase .aui-button con variantes por
 * atributo, con las MISMAS variables de kit/foundation.css (Arc tal cual). Funciona sin JS: basta la clase.
 *
 * Correspondencia: .button → .aui-button · .primary/.secondary/.ghost/.danger → [data-variant="…"] (primary si no hay) ·
 * .sm/.md/.lg → [data-size="…"] (md si no hay) · .labelSlot → -slot · .labelContent → -content · .labelPhase → -phase ·
 * .loader → -loader · .spinner → -spinner · .loadingLabel → -loading-label
 *
 * Lo único añadido: font-family (Arc la hereda del body, que en Arc es Inter), los estilos de <a> y el blindaje con
 * !important frente al CSS agresivo de los paneles. La pulsación (escala) la hace el JS, como Motion en Arc.
 */

.aui-button {
    position: relative; display: inline-flex !important; box-sizing: border-box; min-height: var(--control-height-md) !important; height: auto !important; width: auto;
    align-items: center; justify-content: center; gap: var(--space-2); margin: 0;
    border: 1px solid transparent !important; border-radius: var(--radius-control) !important; padding: 0 var(--space-4) !important;
    font: inherit; font-family: var(--font-body) !important; font-size: var(--text-sm) !important; font-weight: 500 !important; line-height: var(--leading-body) !important;
    letter-spacing: normal; text-transform: none !important; text-shadow: none !important; text-decoration: none !important; white-space: nowrap; vertical-align: middle;
    background-image: none !important; box-shadow: none; -webkit-appearance: none; appearance: none; float: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.aui-button:disabled { cursor: not-allowed; opacity: .52; }
.aui-button[aria-busy="true"] { cursor: progress; }
/* Los anclajes de capas flotantes nunca encogen: Radix abre en pointerdown y mediría un disparador encogido. */
.aui-button:is([aria-haspopup]:not([aria-haspopup="false"]), [data-state], [role="combobox"]) { transform: none !important; }
.aui-button > svg, .aui-button-phase svg { flex: none; }
.aui-button svg { display: block; }

/* El hueco sigue en muelle el ancho de la etiqueta nueva. La saliente sale del flujo contra el propio hueco. */
.aui-button-slot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-button-slot[data-morphing] { clip-path: inset(-50% calc(var(--space-3) * -1)); }
.aui-button-content { display: inline-flex; flex: none; align-items: center; }
.aui-button-phase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }
.aui-button-phase[data-leaving] { position: absolute; pointer-events: none; }

/* Variantes (sin data-variant = primary). */
.aui-button, .aui-button[data-variant="primary"] { color: var(--background) !important; background: var(--foreground) !important; border-color: var(--foreground) !important; }
.aui-button[data-variant="secondary"] { color: var(--foreground) !important; background: var(--surface) !important; border-color: var(--border) !important; }
.aui-button[data-variant="ghost"] { color: var(--text-secondary) !important; background: transparent !important; border-color: transparent !important; }
.aui-button[data-variant="danger"] { color: var(--danger) !important; background: var(--surface) !important; border-color: var(--border) !important; }
@media (hover: hover) and (pointer: fine) {
    .aui-button:is(:not([data-variant]), [data-variant="primary"]):hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }
    .aui-button[data-variant="secondary"]:hover:not(:disabled) { background: var(--surface-muted) !important; box-shadow: var(--shadow-resting); }
    .aui-button[data-variant="ghost"]:hover:not(:disabled) { color: var(--foreground) !important; background: var(--surface-muted) !important; }
    .aui-button[data-variant="danger"]:hover:not(:disabled) { border-color: var(--danger) !important; background: var(--surface-muted) !important; }
}
/* Respuesta de color al pulsar, para que el tacto y los disparadores de menú (que no encogen) también contesten. */
.aui-button:is(:not([data-variant]), [data-variant="primary"]):active:not(:disabled) { opacity: .84; }
.aui-button:is([data-variant="secondary"], [data-variant="ghost"]):active:not(:disabled) { color: var(--foreground) !important; background: var(--surface-muted) !important; }
.aui-button[data-variant="danger"]:active:not(:disabled) { border-color: var(--danger) !important; background: var(--surface-muted) !important; }

/* Tamaños (sin data-size = md). */
.aui-button[data-size="sm"] { min-height: var(--control-height-sm) !important; padding-inline: var(--space-3) !important; font-size: var(--text-sm) !important; }
.aui-button[data-size="md"] { min-height: var(--control-height-md) !important; }
.aui-button[data-size="lg"] { min-height: var(--control-height-lg) !important; padding-inline: var(--space-5) !important; font-size: var(--text-sm) !important; }

/* Carga: rueda centrada y etiqueta invisible (sigue ocupando su sitio, así el botón no cambia de tamaño). */
.aui-button-loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-4); height: var(--space-4); margin: calc(var(--space-4) / -2); }
.aui-button-spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: aui-button-spin .7s linear infinite; }
.aui-button-loading-label { opacity: 0; }
@keyframes aui-button-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .aui-button { transition: none; }
    .aui-button-slot { transition: opacity var(--duration-instant) linear; }
    .aui-button-spinner { animation-duration: .01ms; animation-iteration-count: 1; }
}