/* NV-ADDON-CONNECT · oferta de Connect (MCP) en una linea: add-on para Pro Individual sin conector,
   planes /pro para anonimos y free; nada para quien ya tiene Connect (founder 16-sep).
   Dos superficies, una misma pieza: la ficha del fallo (fila entre la tabla de
   metadatos y el recuadro Resumen, decision founder 12-sep) y el pie de la primera
   respuesta con fuentes del chat. Misma gramatica que el nudge .nv-connect-cta que
   ya vive en el chat (banda --oc-bg-alt, filete --oc-line, boton navy 12px):
   una frase en peso de cuerpo, UNA accion en navy con flecha y un cierre x discreto.
   Solo tokens --oc-*; los dos logos traen su color de marca en el SVG, igual que en
   la casilla de Connect de pro.html. */
.nv-addon{display:flex;align-items:center;gap:10px;margin:0;padding:8px 8px 8px 12px;
  background:var(--oc-bg-alt);border:1px solid var(--oc-line);border-radius:var(--oc-r-sm);
  font-family:var(--oc-font-sans);font-size:13px;line-height:1.45;color:var(--oc-body);
  text-align:left;hyphens:manual;-webkit-hyphens:manual}
.nv-addon-logos{display:inline-flex;align-items:center;gap:5px;flex:none}
.nv-addon-logo{width:14px;height:14px;display:block}
.nv-addon-txt{flex:1 1 auto;min-width:0}
.nv-addon-cta{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--oc-navy);
  font-weight:600;text-decoration:none;white-space:nowrap;padding:6px 8px;border-radius:var(--oc-r-sm);
  font-variant-numeric:tabular-nums;
  transition:color var(--oc-dur) var(--oc-ease),background var(--oc-dur) var(--oc-ease)}
.nv-addon-cta svg{width:13px;height:13px;flex:none;transition:transform var(--oc-dur) var(--oc-ease)}
.nv-addon-cta:hover{color:var(--oc-navy-500);background:var(--oc-navy-100)}
.nv-addon-cta:hover svg{transform:translateX(2px)}
.nv-addon-cta:focus-visible{outline:none;box-shadow:var(--oc-focus-ring)}
.nv-addon-cta.is-busy{color:var(--oc-mute);background:none;pointer-events:none}
.nv-addon-off{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;border-radius:var(--oc-r-sm);color:var(--oc-mute);cursor:pointer;
  transition:color var(--oc-dur) var(--oc-ease),background var(--oc-dur) var(--oc-ease)}
.nv-addon-off svg{width:14px;height:14px}
.nv-addon-off:hover{color:var(--oc-ink);background:var(--oc-navy-100)}
.nv-addon-off:focus-visible{outline:none;box-shadow:var(--oc-focus-ring)}

/* Ficha: misma caja que .resumen-ia (margen 22px 26px 0, radio --oc-r), en --oc-surface
   para no competir con el fondo tintado del Resumen que va justo debajo. */
.nv-addon--ficha{margin:22px 26px 0;background:var(--oc-surface);border-radius:var(--oc-r);
  padding:9px 10px 9px 16px;font-size:13.5px}
.nv-addon--ficha+.resumen-ia{margin-top:12px}
/* Chat: dentro de la burbuja, al ritmo de .fuentes-details (10px arriba). */
.burbuja-bot>.nv-addon{margin-top:12px}

@media(max-width:640px){
  .nv-addon{flex-wrap:wrap;padding:8px 6px 8px 12px}
  .nv-addon-logos{display:none}                                   /* en 390px el ancho es para la frase */
  .nv-addon-txt{flex:1 1 180px}
  .nv-addon-cta{flex-basis:100%;order:4;padding:8px 0 2px}        /* debajo, alineada con la frase */
  .nv-addon-off{order:3;width:40px;height:40px;margin:-6px -2px -6px 0}      /* area tactil 40px sin inflar la caja */
  .nv-addon--ficha{margin:18px 16px 0;padding:8px 8px 8px 14px}              /* .resumen-ia va a 16px de lado en movil */
}
@media(prefers-reduced-motion:reduce){.nv-addon-cta,.nv-addon-cta svg,.nv-addon-off{transition:none}}