/*
 * Kit Aiden UI · Búsqueda que se expande. Es el CSS module de Arc (expanding-search.module.css) traducido a
 * clases aui-expanding-search-<parte>, con las variables de kit/foundation.css tal cual: mismos tamaños,
 * colores, radios y tiempos. Los !important solo protegen botón e input del CSS agresivo de los paneles.
 * Lo único que no está en Arc: las vistas «buscando» y «error» de la búsqueda en el servidor (con los
 * mismos tokens que la vista vacía) y la vista saliente durante el fundido (data-leaving).
 */

/* La raíz es el carril en el que el campo puede crecer. Solo la cápsula y el panel reciben el puntero,
   así que un carril en reposo nunca tapa lo que hay debajo. */
.aui-expanding-search { position: relative; box-sizing: border-box; width: 100%; min-width: var(--control-height-md); height: var(--control-height-md); pointer-events: none; font-family: var(--font-body); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; -webkit-font-smoothing: antialiased; }
.aui-expanding-search *, .aui-expanding-search *::before, .aui-expanding-search *::after { box-sizing: border-box; }
.aui-expanding-search [hidden] { display: none !important; }

/* Una sola cápsula es a la vez el botón y el campo. Su ancho va en un muelle y su radio sigue al ancho,
   de círculo al radio del control. */
.aui-expanding-search-shell { position: absolute; top: 0; right: 0; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--control-height-md) / 2 - (var(--control-height-md) / 2 - var(--radius-control)) * var(--aui-es-open, 0)); background: var(--surface); color: var(--text-secondary); pointer-events: auto; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-expanding-search[data-anchor="start"] .aui-expanding-search-shell { right: auto; left: 0; }
.aui-expanding-search-shell[data-expanded] { border-color: var(--border-strong); color: var(--foreground); }
.aui-expanding-search-shell:has(> .aui-expanding-search-trigger:focus-visible), .aui-expanding-search-shell:has(> .aui-expanding-search-input:focus) { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--focus-ring); color: var(--foreground); }
@media (hover: hover) and (pointer: fine) {
  .aui-expanding-search-shell:not([data-expanded]):hover { background: var(--surface-muted); color: var(--foreground); }
  .aui-expanding-search-shell[data-expanded]:not(:has(> .aui-expanding-search-input:focus)):hover { border-color: var(--foreground); }
  .aui-expanding-search .aui-expanding-search-shell button.aui-expanding-search-clear:hover { background: var(--surface-muted) !important; color: var(--foreground) !important; }
}
/* Una pulsación compacta mientras aún es botón; al soltar, manda el muelle del cambio de forma. */
.aui-expanding-search-shell:not([data-expanded]):has(> .aui-expanding-search-trigger:active) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-standard), var(--duration-instant); }
.aui-expanding-search .aui-expanding-search-shell button.aui-expanding-search-trigger { position: absolute !important; z-index: 1; inset: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aui-expanding-search-trigger:focus-visible { outline: none; }
/* La lupa va en el borde de entrada: centrada en el círculo, viaja con ese borde hasta su sitio en el campo. */
.aui-expanding-search-icon { position: absolute; top: calc(50% - 9px); left: calc(var(--control-height-md) / 2 - 10px); pointer-events: none; }
.aui-expanding-search .aui-expanding-search-shell input.aui-expanding-search-input { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 40px 0 38px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--foreground) !important; font: inherit !important; font-size: var(--text-sm) !important; letter-spacing: var(--tracking-body) !important; line-height: normal !important; text-transform: none !important; text-overflow: ellipsis; outline: none; -webkit-appearance: none; appearance: none; }
.aui-expanding-search-input:focus-visible { outline: none; }
.aui-expanding-search-input::placeholder { color: var(--text-muted); opacity: 1; }
.aui-expanding-search-input[inert] { pointer-events: none; }
/* El texto de ayuda espera a que la forma empiece a moverse y entra fundiéndose; al cerrar, sale primero. */
.aui-expanding-search-input { opacity: 0; transition: opacity 80ms var(--ease-standard); }
.aui-expanding-search-shell[data-expanded] .aui-expanding-search-input { opacity: 1; transition: opacity 200ms var(--ease-enter) 80ms; }
.aui-expanding-search .aui-expanding-search-shell button.aui-expanding-search-clear { position: absolute !important; z-index: 1; top: calc(50% - 14px) !important; right: 7px !important; display: none !important; width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; place-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: transparent !important; box-shadow: none !important; color: var(--text-muted) !important; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.aui-expanding-search .aui-expanding-search-shell button.aui-expanding-search-clear[data-visible] { display: grid !important; }
.aui-expanding-search-clear svg { display: block; }

/* Una capa flotante: su ancho es el del campo, así que la primera vez se despliega desde él; su contenido
   mantiene el ancho final y va pegado al borde de entrada. */
.aui-expanding-search-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
.aui-expanding-search[data-anchor="start"] .aui-expanding-search-panel { right: auto; left: 0; }
.aui-expanding-search-body { position: relative; width: calc(var(--aui-es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
.aui-expanding-search-view { position: relative; }
.aui-expanding-search-view[data-leaving] { position: absolute; left: 6px; right: 6px; pointer-events: none; }
/* Un hueco de flex, no márgenes: un grupo que se va nunca deja que el margen del siguiente se cuele. */
.aui-expanding-search-listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; }
.aui-expanding-search-group { position: relative; }
.aui-expanding-search-group-label { padding: 8px 12px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
/* Las esquinas anidadas bajan del panel lo que mide su margen. El resalte va bajo el contenido de cada
   fila, así que el texto nunca se tapa mientras viaja. */
.aui-expanding-search-option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: calc(var(--radius-panel) - 6px); color: var(--foreground); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.aui-expanding-search-highlight { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: color-mix(in oklab, var(--foreground) 6%, transparent); pointer-events: none; }
.aui-expanding-search-option-icon { display: grid; flex: none; width: 18px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
.aui-expanding-search-option[data-active] .aui-expanding-search-option-icon { color: var(--foreground); }
.aui-expanding-search-option-text { display: grid; min-width: 0; }
.aui-expanding-search-option-title, .aui-expanding-search-option-meta { overflow: hidden; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
.aui-expanding-search-option-title { color: var(--foreground); font-size: var(--text-sm); }
.aui-expanding-search-option-meta { color: var(--text-muted); font-size: var(--text-xs); }
.aui-expanding-search-mark { padding: 0; background: none; color: var(--foreground); font-weight: 500; }
.aui-expanding-search-empty { display: grid; gap: 2px; padding: 12px 12px 14px; }
.aui-expanding-search-empty-title { margin: 0; overflow-wrap: anywhere; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
.aui-expanding-search-empty-hint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
.aui-expanding-search-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Propio de Aiden (no está en Arc): buscando en el servidor y el error, con los tokens de la vista vacía. */
.aui-expanding-search-loading { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-expanding-search-spin { flex: none; animation: aui-expanding-search-spin .8s linear infinite; }
@keyframes aui-expanding-search-spin { to { transform: rotate(360deg); } }
.aui-expanding-search .aui-expanding-search-panel button.aui-expanding-search-retry { justify-self: start; margin: 8px 0 0 !important; padding: 0 12px !important; height: var(--control-height-sm) !important; min-height: 0 !important; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; background: var(--surface) !important; box-shadow: none !important; color: var(--foreground) !important; font: inherit !important; font-size: var(--text-sm) !important; font-weight: 500 !important; text-transform: none !important; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-expanding-search .aui-expanding-search-panel button.aui-expanding-search-retry:hover { background: var(--surface-muted) !important; } }

@media (prefers-reduced-motion: reduce) {
  .aui-expanding-search-shell, .aui-expanding-search-clear, .aui-expanding-search-option-icon { transition: none; }
  .aui-expanding-search-shell:not([data-expanded]):has(> .aui-expanding-search-trigger:active) { transform: none; }
  .aui-expanding-search-input { transition: opacity 100ms var(--ease-standard); }
  .aui-expanding-search-shell[data-expanded] .aui-expanding-search-input { transition: opacity 150ms var(--ease-enter); }
  .aui-expanding-search-spin { animation: none; }
}