/* Etiqueta pill "acento de IA" — CSS puro.
   Uso: <span class="nf-pill-ia"><i></i>Asistente IA</span>
   El texto se pone en mayúsculas por CSS: escríbalo en caja normal. */
.nf-pill-ia{
  display:inline-flex;align-items:center;gap:9px;
  height:28px;padding:0 14px;
  border-radius:999px;
  background:var(--nf-amber-500,#ffab00);
  color:#fff;
  font:600 11px/1 var(--nf-font-ui,"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif);
  letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
  vertical-align:middle;
}
/* punto pulsante: núcleo fijo + halo que respira */
.nf-pill-ia > i{
  position:relative;width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 auto;
}
.nf-pill-ia > i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:currentColor;
  animation:nf-pill-pulse 1.8s var(--nf-ease-standard,cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes nf-pill-pulse{
  0%{transform:scale(.5);opacity:.45}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .nf-pill-ia > i::after{animation:none;opacity:.3;transform:scale(.9)}
}

/* Variantes */
.nf-pill-ia--sm{height:22px;padding:0 11px;font-size:10px;letter-spacing:1.2px;gap:7px}
.nf-pill-ia--lg{height:34px;padding:0 18px;font-size:12px;letter-spacing:1.8px;gap:11px}
/* Ámbar oscurecido: mismo acento, contraste AA para texto blanco */
.nf-pill-ia--contraste{background:#b87700}
/* Texto navy sobre el ámbar de marca: máximo contraste */
.nf-pill-ia--navy{background:var(--nf-amber-500,#ffab00);color:var(--nf-navy-500,#2f4154)}
/* Sobre superficies oscuras */
.nf-pill-ia--outline{background:transparent;color:var(--nf-amber-500,#ffab00);box-shadow:inset 0 0 0 1px currentColor}