/* Imagen del asistente de Vida Sana Live (ver avatar.js): asistente ilustrada
   o esfera de conocimiento, con los mismos estados. */
/* Colores de estado: la página anfitriona puede pasar los de su marca
   (--avatar-color-1 acento/pensar, --avatar-color-2 principal/escuchar). */
.vsa { --vsa-escucha: var(--avatar-color-2, #0E9F7E); --vsa-piensa: var(--avatar-color-1, #D9A441); --vsa-habla: #3F7CC0;
       --vsa-color: #9AA9BB; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vsa [hidden] { display: none !important; }
.vsa-escena { --nivel: 0; position: relative; width: clamp(120px, 30vh, 220px); aspect-ratio: 1 / 1; max-width: 100%; }
.vsa-anillos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.vsa-anillos circle { fill: none; }
.vsa-anillo-base { stroke: var(--vsa-color); stroke-opacity: .3; stroke-width: 5; transition: stroke .4s; }
.vsa-anillo-pulso { stroke: var(--vsa-color); stroke-opacity: .45; stroke-width: 3; transform-box: view-box; transform-origin: 120px 120px; transform: scale(calc(1 + var(--nivel) * .09)); opacity: 0; transition: opacity .25s; }
.vsa-anillo-cierre { stroke: var(--vsa-escucha); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: stroke-dashoffset .09s linear, opacity .2s; }
.vsa[data-estado="cerrando"] .vsa-anillo-cierre, .vsa[data-estado="entendido"] .vsa-anillo-cierre { opacity: 1; }
.vsa-orbita { transform-box: view-box; transform-origin: 120px 120px; opacity: 0; transition: opacity .3s; }
.vsa-orbita circle { fill: var(--vsa-escucha); stroke: none; }
.vsa-orbita-2 circle { fill: var(--vsa-piensa); }
.vsa-marco { position: absolute; inset: 8px; border-radius: 50%; }
.vsa-personaje, .vsa-esfera { width: 100%; height: 100%; display: block; }
.vsa-personaje { filter: drop-shadow(0 10px 18px rgba(10, 37, 64, .16)); }

.vsa-cabeza, .vsa-cuerpo, .vsa-cejas, .vsa-ojo, .vsa-ojos { transform-box: fill-box; transform-origin: center; }
.vsa-cabeza { transform-origin: 50% 90%; transition: transform .45s ease; }
.vsa-cejas { transition: transform .12s linear; }
.vsa-ojo { animation: vsa-parpadeo 4.8s infinite; }
.vsa-ojo + .vsa-ojo { animation-delay: .04s; }
.vsa-mic { fill: #6B7C8C; transition: fill .2s; }

/* Burbuja de "pensando": ícono de lo que se consulta + puntos. */
.vsa-pensando {
    position: absolute; top: -4px; right: -10px; z-index: 3;
    display: flex; align-items: center; gap: 7px; background: #FFFFFF; color: #0A7A61;
    border-radius: 18px; padding: 8px 11px; box-shadow: 0 6px 16px rgba(10, 37, 64, .18);
    opacity: 0; transform: scale(.5) translateY(8px); transform-origin: 20% 100%;
    transition: opacity .25s, transform .25s cubic-bezier(.3, 1.5, .6, 1);
}
.vsa-pensando::after { content: ""; position: absolute; left: 10px; bottom: -9px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; box-shadow: -4px 8px 0 -3px #FFFFFF; }
.vsa-pensando i { font-size: 15px; animation: vsa-icono 1.4s ease-in-out infinite; }
.vsa-puntos { display: flex; gap: 3px; }
.vsa-puntos span { width: 5px; height: 5px; border-radius: 50%; background: #0E9F7E; animation: vsa-puntos 1s infinite; }
.vsa-puntos span:nth-child(2) { animation-delay: .15s; }
.vsa-puntos span:nth-child(3) { animation-delay: .3s; }

.vsa-estado { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: #10243A; border-radius: 18px;
              padding: 8px 16px; font-size: 15px; font-weight: 700; line-height: 1.25; box-shadow: 0 2px 10px rgba(30, 42, 54, .08);
              min-height: 36px; max-width: 100%; text-align: center; text-wrap: balance; }
.vsa-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--vsa-color); flex: none; transition: background .3s; }

/* Expresiones de la asesora / el asesor (propuesta de diseño): cejas, mirada,
   boca y los tres puntos dorados de "pensando". */
.vsa-ceja-i, .vsa-ceja-d { transform-box: fill-box; transform-origin: center; transition: transform .35s ease; }
.vsa-ojos { transition: transform .4s ease; }
.vsa-idea circle { fill: var(--vsa-piensa); opacity: 0; }
.vsa[data-estado="procesando"] .vsa-idea circle { animation: vsa-idea 1.1s ease-in-out infinite; }
.vsa[data-estado="procesando"] .vsa-idea circle:nth-child(2) { animation-delay: .16s; }
.vsa[data-estado="procesando"] .vsa-idea circle:nth-child(3) { animation-delay: .32s; }
@keyframes vsa-idea { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ── Estados ──────────────────────────────────────────────────────────── */
.vsa[data-estado="reposo"],
.vsa[data-estado="escuchando"], .vsa[data-estado="cerrando"], .vsa[data-estado="entendido"] { --vsa-color: var(--vsa-escucha); }
.vsa[data-estado="procesando"] { --vsa-color: var(--vsa-piensa); }
.vsa[data-estado="hablando"] { --vsa-color: var(--vsa-habla); }
.vsa[data-estado="apagado"] { --vsa-color: #9AA9BB; }
.vsa[data-estado="reposo"] .vsa-cuerpo { animation: vsa-respira 4s ease-in-out infinite; }
.vsa[data-estado="apagado"] .vsa-personaje { filter: grayscale(.35) drop-shadow(0 10px 18px rgba(10, 37, 64, .1)); opacity: .85; }

.vsa[data-estado="escuchando"] .vsa-cabeza { transform: rotate(4deg) translateY(-1px); }
.vsa[data-estado="escuchando"] .vsa-ceja-i, .vsa[data-estado="escuchando"] .vsa-ceja-d { transform: translateY(-3px); }
.vsa[data-estado="escuchando"] .vsa-ojos { transform: translateX(-1px) scaleY(1.1); }
.vsa[data-estado="escuchando"] .vsa-anillo-pulso { opacity: 1; }
.vsa[data-estado="escuchando"] .vsa-mic,
.vsa[data-estado="cerrando"] .vsa-mic { fill: #22C58B; }
.vsa[data-estado="escuchando"] .vsa-punto { animation: vsa-late .8s infinite; }

.vsa[data-estado="cerrando"] .vsa-cabeza { transform: rotate(3deg); }
.vsa[data-estado="cerrando"] .vsa-ceja-i, .vsa[data-estado="cerrando"] .vsa-ceja-d { transform: translateY(-2px); }

.vsa[data-estado="entendido"] .vsa-cabeza { animation: vsa-asiente .6s ease; }

/* Pensando: órbitas, burbuja con ícono, mirada que busca y texto con brillo. */
.vsa[data-estilo="esfera"][data-estado="procesando"] .vsa-pensando { opacity: 1; transform: scale(1) translateY(0); }
.vsa[data-estilo="esfera"][data-estado="procesando"] .vsa-orbita { opacity: 1; }
.vsa[data-estado="procesando"] .vsa-orbita-1 { animation: vsa-gira 2.2s linear infinite; }
.vsa[data-estado="procesando"] .vsa-orbita-2 { animation: vsa-gira 3.4s linear infinite reverse; }
.vsa[data-estado="procesando"] .vsa-anillo-base { stroke-opacity: .55; stroke-dasharray: 10 14; transform-box: view-box; transform-origin: 120px 120px; animation: vsa-gira 6s linear infinite; }
.vsa[data-estado="procesando"] .vsa-cabeza { transform: rotate(-5deg); }
.vsa[data-estado="procesando"] .vsa-ceja-i { transform: translateY(-1px) rotate(4deg); }
.vsa[data-estado="procesando"] .vsa-ceja-d { transform: translateY(-5px) rotate(-6deg); }
.vsa[data-estado="procesando"] .vsa-ojos { transform: translate(3px, -3px); }
.vsa[data-estado="procesando"] .vsa-punto { animation: vsa-late 1s infinite; }
.vsa[data-estado="procesando"] .vsa-texto {
    background: linear-gradient(90deg, #10243A 0%, #10243A 40%, var(--vsa-piensa) 50%, #10243A 60%, #10243A 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: vsa-brillo 1.6s linear infinite;
}

.vsa[data-estado="hablando"] .vsa-cabeza { animation: vsa-habla 2.4s ease-in-out infinite; }
.vsa[data-estado="hablando"] .vsa-anillo-pulso { opacity: 1; stroke-opacity: .6; }
.vsa[data-estado="hablando"] .vsa-ceja-i, .vsa[data-estado="hablando"] .vsa-ceja-d { transform: translateY(-1px); }
.vsa[data-estado="hablando"] .vsa-punto { animation: vsa-late .5s infinite; }

/* Detección de dinero: símbolos $ que suben y se desvanecen. */
.vsa-moneda {
    position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none;
    font-weight: 800; color: #0E9F7E; text-shadow: 0 2px 6px rgba(14, 159, 126, .35);
    background: #FFF6DD; border: 2px solid #F2B544; border-radius: 50%; width: 1.7em; height: 1.7em;
    display: grid; place-items: center; line-height: 1;
    animation: vsa-moneda 1.6s cubic-bezier(.2, .8, .3, 1) forwards; opacity: 0;
}
@keyframes vsa-moneda {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(.4); }
    20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -260%) scale(.8) rotate(12deg); }
}

/* La esfera dibuja su propio halo: el anillo de pulso sobra. */
.vsa[data-estilo="esfera"] .vsa-anillo-pulso { display: none; }
.vsa[data-estilo="esfera"] .vsa-marco { inset: 0; }

@keyframes vsa-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes vsa-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes vsa-asiente { 0%, 100% { transform: rotate(0); } 35% { transform: translateY(4px); } 70% { transform: translateY(-1px); } }
@keyframes vsa-habla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1.6deg); } 75% { transform: rotate(-1.6deg); } }
@keyframes vsa-mira { 0%, 100% { transform: translate(0, -2px); } 30% { transform: translate(-2.5px, -3px); } 65% { transform: translate(2.5px, -3px); } }
@keyframes vsa-puntos { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes vsa-icono { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes vsa-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes vsa-gira { to { transform: rotate(360deg); } }
@keyframes vsa-brillo { from { background-position: 100% 0; } to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) { .vsa * { animation: none !important; transition: none !important; } }

/* ── Orbe ─────────────────────────────────────────────────────────────── */
.vsa[data-estilo="orbe"] .vsa-anillos { display: none; }
.vsa-orbe { --orbe-desde: #22d3ee; --orbe-hasta: #d946ef; --orbe-nivel: 0;
            position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.vsa-orbe-aura { position: absolute; inset: -14%; border-radius: 50%;
                 background: radial-gradient(circle, color-mix(in srgb, var(--orbe-hasta) 45%, transparent) 0%, transparent 68%);
                 opacity: calc(.35 + var(--orbe-nivel) * .6); filter: blur(18px); transition: opacity .2s; }
.vsa-orbe-anillo { position: absolute; inset: -4%; border-radius: 50%;
                   border: 2px solid color-mix(in srgb, var(--orbe-desde) 55%, transparent);
                   transform: scale(calc(1 + var(--orbe-nivel) * .06)); transition: transform .12s linear; }
.vsa-orbe-disco { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
                  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%),
                              linear-gradient(135deg, var(--orbe-desde), var(--orbe-hasta));
                  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--orbe-hasta) 70%, transparent),
                              inset 0 -12px 30px rgba(0,0,0,.18); display: grid; place-items: center; }
.vsa-orbe-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.vsa-orbe-nucleo { position: absolute; inset: 32%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
                   opacity: calc(.4 + var(--orbe-nivel)); }
.vsa-orbe-barras { position: relative; z-index: 1; display: flex; align-items: center; gap: 6%; height: 46%; width: 56%; justify-content: center; }
.vsa-orbe-barra { flex: 1; max-width: 9%; height: var(--h); border-radius: 99px; background: rgba(255,255,255,.92);
                  box-shadow: 0 0 10px rgba(255,255,255,.55); transform: scaleY(.22); transform-origin: center; }
.vsa-orbe[data-estado="procesando"] .vsa-orbe-anillo { border-top-color: #fff; animation: vsa-orbe-gira 1.2s linear infinite; }
@keyframes vsa-orbe-gira { to { transform: rotate(360deg); } }
/* Apagado: el orbe se apaga de verdad (sin color ni halo), para no confundirse con reposo. */
.vsa-orbe[data-estado="apagado"] .vsa-orbe-disco { filter: saturate(.2) brightness(1.04); }
.vsa-orbe[data-estado="apagado"] .vsa-orbe-aura { opacity: .12; }
.vsa-orbe[data-estado="apagado"] .vsa-orbe-barra { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .vsa-orbe-anillo { animation: none !important; }
    .vsa-orbe-barra { transition: none; }
}

/* ── Orbe v2 (de marca): colores de la página anfitriona (--avatar-color-1/2),
   corona cónica que gira (rápido al pensar), brillo de vidrio y cinco barras. */
.vsa-orbe--v2 { --orbe-desde: var(--avatar-color-1, #0EE7C5); --orbe-hasta: var(--avatar-color-2, #6366F1); }
.vsa-orbe--v2 .vsa-orbe-anillo { inset: -2%; border-width: 1px; }
.vsa-orbe-corona { position: absolute; inset: -7%; border-radius: 50%;
                   background: conic-gradient(from 0deg, var(--orbe-desde), transparent 30%, var(--orbe-hasta) 55%, transparent 80%, var(--orbe-desde));
                   -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
                   mask: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
                   opacity: calc(.55 + var(--orbe-nivel) * .45); animation: vsa-orbe-gira 9s linear infinite; }
.vsa-orbe--v2[data-estado="procesando"] .vsa-orbe-corona,
.vsa-orbe--v2[data-estado="entendido"] .vsa-orbe-corona { animation-duration: 1.4s; opacity: 1; }
.vsa-orbe--v2[data-estado="apagado"] .vsa-orbe-corona { animation-play-state: paused; opacity: .35; }
.vsa-orbe-brillo { position: absolute; left: 18%; top: 9%; width: 46%; height: 26%; border-radius: 50%;
                   background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(2px); }
.vsa-orbe--v2 .vsa-orbe-barras { gap: 8%; width: 50%; }
.vsa-orbe--v2 .vsa-orbe-barra { max-width: 12%; }
@media (prefers-reduced-motion: reduce) { .vsa-orbe-corona { animation: none !important; } }
/* En v2 los dos colores de marca no se mezclan (naranja sobre teal da oliva): el
   disco es vidrio del color 2 (claro arriba, profundo abajo) y el color 1 vive
   solo en la corona y el halo, que es lo que gira y respira con la voz. */
.vsa-orbe--v2 .vsa-orbe-disco {
    background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.45), transparent 36%),
                linear-gradient(165deg, color-mix(in srgb, var(--orbe-hasta) 62%, #fff) 0%, var(--orbe-hasta) 48%,
                                color-mix(in srgb, var(--orbe-hasta) 62%, #04121A) 100%);
    box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--orbe-hasta) 75%, transparent),
                inset 0 -10px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.18);
}
.vsa-orbe--v2 .vsa-orbe-aura { background: radial-gradient(circle, color-mix(in srgb, var(--orbe-desde) 40%, transparent) 0%, transparent 66%); }