/* 07 · Asistente flotante y "señalar en pantalla" */

.asistente-boton { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(33, 31, 75, .35); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.asistente-boton svg { width: 24px; height: 24px; }
.asistente-boton:hover { transform: scale(1.06); }
.asistente-boton.abierto { background: var(--primary-dark, var(--primary)); }

.asistente { position: fixed; right: 22px; bottom: 86px; z-index: 55; width: min(400px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 110px));
  display: flex; flex-direction: column; background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-modal, 0 12px 40px rgba(0,0,0,.25)); overflow: hidden; animation: asistente-entra .18s ease-out; }
@keyframes asistente-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.asistente-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--primary); color: #fff; }
.asistente-cabecera .tenue { color: rgba(255,255,255,.75); font-size: 12px; }
.asistente-cabecera .boton.mini.cerrar { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.asistente-mensajes { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; font-size: 13px; }
.burbuja { max-width: 92%; padding: 9px 12px; border-radius: 12px; line-height: 1.45; }
.burbuja p { margin: 0; }
.burbuja ul { margin: 6px 0 0; padding-left: 18px; }
.burbuja li { margin: 2px 0; }
.burbuja.yo { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.ella { align-self: flex-start; background: var(--papel); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.burbuja .acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.burbuja .error { color: var(--error); }
.asistente-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--borde); background: var(--g50); }
.asistente-chips .ctx { width: 100%; margin: 2px 0 0; font-size: 12px; }
.chip-pregunta { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--primary); background: var(--primary-light); color: var(--primary-dark); font: 600 12px var(--fuente-ui); cursor: pointer; text-align: left; }
.chip-pregunta:hover { background: var(--primary); color: #fff; }
.asistente-entrada { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--borde); background: var(--papel); }
.asistente-entrada .campo { flex: 1; }
.asistente-entrada .boton.primario svg { width: 16px; height: 16px; }

/* señalar en pantalla */
.foco-fondo { position: fixed; inset: 0; z-index: 80; }
.foco-hueco { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .62); outline: 2px solid var(--acento, #f59e0b); pointer-events: none; transition: top .2s, left .2s, width .2s, height .2s; }
.foco-globo { position: fixed; max-width: 330px; padding: 12px 14px; border-radius: 10px; background: var(--papel); color: var(--texto); box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }