/* Busqueda inteligente del POS (IA-6): boton ON/OFF junto al buscador
   y estilos del flyout cuando muestra resultados de Nexo IA o del
   catalogo de proveedor local. Colores fijos de marca Nexo (no
   var(--pos-sale-brand)/--nexo-brand configurables del negocio),
   consistente con la decision de identidad fija tomada en IA-5. */

/* .pos-reference-search ya define su propio grid de 3 columnas en
   pos-cart.css (icono, input, limpiar) -- se agrega una columna mas
   para el boton de IA entre el input y el boton de limpiar. */
.pos-reference-search {
  grid-template-columns: 36px minmax(0, 1fr) 34px 38px;
}

.pos-busqueda-ia-toggle {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--pos-sale-line, rgba(15, 23, 42, .16)) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--pos-sale-muted, #64748b) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pos-busqueda-ia-toggle .ui-icon {
  width: 18px;
  height: 18px;
  color: inherit;
}

.pos-busqueda-ia-toggle:hover {
  border-color: #2563ff !important;
  color: #2563ff !important;
}

.pos-busqueda-ia-toggle.activo {
  background: linear-gradient(135deg, #2563ff, #7c3aed) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Borde animado tipo Siri/Apple Intelligence cuando la busqueda con
   Nexo IA esta activa -- paleta fija de marca Nexo
   (#2563ff/#7c3aed/#00d4ff, misma paleta que el personaje de IA-5),
   girando alrededor del borde sin tocar el centro (nunca tapa el
   input). Tecnica de doble background-clip (padding-box + border-box)
   en vez de mask-composite -- ese primer intento se veia bien en
   Chrome/local pero fallaba en el navegador real del usuario (el
   circulo salia relleno en vez de solo el anillo); background-clip
   es mucho mas viejo y estable, sin necesitar mascaras. */
@property --nexo-siri-angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pos-reference-search.ia-activa {
  border: 2px solid transparent !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-image:
    linear-gradient(var(--pos-sale-bg-solida, var(--pos-sale-card, #fff)), var(--pos-sale-bg-solida, var(--pos-sale-card, #fff))),
    conic-gradient(from var(--nexo-siri-angulo, 0deg), #2563ff, #7c3aed, #00d4ff, #2563ff) !important;
  animation: nexoSiriGiro 3.5s linear infinite;
}

@keyframes nexoSiriGiro {
  to {
    --nexo-siri-angulo: 360deg;
  }
}

.pos-flyout-nota {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2563ff;
}

.pos-flyout-row-catalogo {
  opacity: .82;
  border-style: dashed;
}