/* ═══════════════════════════════════════════════════════════════
   Avatar de SofIA — animaciones por estado y huecos donde se pinta

   Es una ilustración autocontenida: sus colores (navy de la marca, naranja de la
   cara, pared de oficina) van escritos aquí a propósito y NO cambian con el tema,
   igual que el logo. Lo que toca al resto de la página (bordes, sombras) sí usa
   var(--token).

   Solo se mueve el hueco activo: las filas viejas llevan `.is-still`.
   ═══════════════════════════════════════════════════════════════ */
.sfa { --led: #ED7D22; --ring: #3fd08f; --ease: cubic-bezier(.3,.7,.25,1); position: relative; width: var(--sfa-size, 200px); flex: none; }
.sfa-svg { width: 100%; display: block; overflow: visible; }
.sfa-svg * { transform-box: view-box; }

/* trazos de la cara */
.sfa .ln { fill: none; stroke: #ff9d42; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sfa .th { stroke-width: 3.6; }
.sfa .th2 { stroke-width: 5; }
.sfa .fl { fill: #ff9d42; }
.sfa .sfa-glow { opacity: .85; }

/* piezas */
.sfa-rig  { transform-origin: 200px 480px; }
.sfa-head { transform-origin: 200px 236px; transition: transform .6s var(--ease); }
.sfa-wave { transform-origin: 322px 308px; }
.sfa-led  { fill: var(--led); transition: fill .4s; }
.sfa-arm-up { opacity: 0; transition: opacity .25s; }
.sfa-arm-down { transition: opacity .25s; }
.sfa-lines { opacity: 0; }
.sfa-tabglow { opacity: 0; transition: opacity .4s; }
.sfa-tabscan { opacity: 0; }
.sfa-typing rect { transform-box: fill-box; transform-origin: left center; }
.sfa-zz .z { opacity: 0; transform-box: fill-box; }
.sfa-holo .sfa-hrow { opacity: 0; transform-box: fill-box; }
.sfa-bubble { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transition: opacity .25s; }
.sfa-bubble .bdot { transform-box: fill-box; transform-origin: center; }
.sfa-arm-mic, .sfa-hand-mic { opacity: 0; transition: opacity .25s; }
.sfa-nowifi { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transition: opacity .25s; }
.sfa-hand-mic { transform-box: fill-box; transform-origin: 70% 90%; }

/* Tamaño chico: sin pestañas y con ojos más grandes. Con el ojo diminuto, la pestaña
   se fundía con él y formaba una diagonal que se leía como enojo. */
.sfa-svg--head .lash { display: none; }
/* En «Sin conexión» la pestaña cae hacia afuera (tristeza, no enojo): se queda. */
.sfa-svg--head .f-off .lash { display: inline; }
.sfa-svg--head .eye { transform: scale(1.32); }
.sfa-svg--head .ln { stroke-width: 8.5; }
.sfa-svg--head .th { stroke-width: 4.6; }
.sfa-svg--head .sfa-bubble, .sfa-svg--head .sfa-holo, .sfa-svg--head .sfa-nowifi { display: none; }

/* caras: solo se ve la del estado; cambian con un fundido corto */
.sfa .f { opacity: 0; transition: opacity .22s; }
.sfa .f * { transform-box: fill-box; transform-origin: center; }
.sfa[data-state="idle"] .f-idle, .sfa[data-state="hello"] .f-hello, .sfa[data-state="listen"] .f-listen,
.sfa[data-state="search"] .f-search, .sfa[data-state="think"] .f-think, .sfa[data-state="write"] .f-write,
.sfa[data-state="done"] .f-done, .sfa[data-state="wake"] .f-wake, .sfa[data-state="off"] .f-off { opacity: 1; }


/* ── Disponible ── */
.sfa[data-state="idle"] .sfa-rig { animation: sfa-float 4.4s ease-in-out infinite; }
.sfa[data-state="idle"] .blink  { animation: sfa-blink 4.6s infinite; }
.sfa[data-state="idle"] .sfa-led { animation: sfa-pulse 2.6s ease-in-out infinite; }

/* ── Saludo ── */
.sfa[data-state="hello"] .sfa-arm-up { opacity: 1; }
.sfa[data-state="hello"] .sfa-arm-down { opacity: 0; }
.sfa[data-state="hello"] .sfa-wave { animation: sfa-wave .55s ease-in-out infinite alternate; }
.sfa[data-state="hello"] .sfa-lines { animation: sfa-pulse .55s ease-in-out infinite alternate; }
.sfa[data-state="hello"] .sfa-head { transform: rotate(-3deg); }
.sfa[data-state="hello"] .bob { animation: sfa-bob .55s ease-in-out infinite alternate; }
.sfa[data-state="hello"] .sfa-rig { animation: sfa-float 2.2s ease-in-out infinite; }

/* ── Atenta ── */
.sfa[data-state="listen"] { --ring: #63b3ff; }
.sfa[data-state="listen"] .sfa-head { transform: rotate(-5deg) translateY(-2px); }
.sfa[data-state="listen"] .look  { animation: sfa-look 2.6s ease-in-out infinite; }
.sfa[data-state="listen"] .brows { animation: sfa-brows 2.6s ease-in-out infinite; }
.sfa[data-state="listen"] .sfa-led { fill: #ffb366; }
.sfa[data-state="listen"] .sfa-rig { animation: sfa-float 3.4s ease-in-out infinite; }

/* ── Consultando ── */
.sfa[data-state="search"] { --ring: #63b3ff; }
.sfa[data-state="search"] .sfa-head { transform: rotate(-1.5deg); }
.sfa[data-state="search"] .read { animation: sfa-read 1.5s ease-in-out infinite; }
.sfa[data-state="search"] .sfa-holo .sfa-hrow { animation: sfa-holo 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .32s); }
.sfa[data-state="search"] .sfa-led { animation: sfa-pulse .7s ease-in-out infinite; }

/* ── Analizando ── */
.sfa[data-state="think"] { --ring: #8ec8ff; }
.sfa[data-state="think"] .sfa-head { animation: sfa-ponder 3s ease-in-out infinite; }
.sfa[data-state="think"] .up { animation: sfa-up 3s ease-in-out infinite; }
.sfa[data-state="think"] .sfa-bubble { opacity: 1; animation: sfa-pop .45s var(--ease) both, sfa-bfloat 2.4s ease-in-out .45s infinite; }
.sfa[data-state="think"] .bdot { animation: sfa-bdot 1.1s ease-in-out infinite; animation-delay: var(--d); }

/* ── Redactando ── */
.sfa[data-state="write"] { --ring: #63b3ff; }
.sfa[data-state="write"] .sfa-arm-mic, .sfa[data-state="write"] .sfa-hand-mic { opacity: 1; }
.sfa[data-state="write"] .sfa-arm-down { opacity: 0; }
.sfa[data-state="write"] .sfa-hand-mic { animation: sfa-adjust 1.8s ease-in-out infinite; }
.sfa[data-state="write"] .sfa-head { animation: sfa-talkbob .9s ease-in-out infinite; }
.sfa[data-state="write"] .talk { animation: sfa-talk .9s ease-in-out infinite; }
.sfa[data-state="write"] .wbrows { animation: sfa-wbrows .9s ease-in-out infinite; }
.sfa[data-state="write"] .wblink { animation: sfa-blink 3.4s infinite; }
.sfa[data-state="write"] .speak { animation: sfa-speak .9s ease-in-out infinite; }
.sfa[data-state="write"] .sfa-typing rect { animation: sfa-type 1.6s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
.sfa[data-state="write"] .sfa-tabglow { opacity: .35; }

/* ── Respuesta lista ── */
.sfa[data-state="done"] .sfa-arm-up { opacity: 1; }
.sfa[data-state="done"] .sfa-arm-down { opacity: 0; }
.sfa[data-state="done"] .sfa-wave { animation: sfa-wave .3s ease-in-out 4 alternate both; }
.sfa[data-state="done"] .sfa-lines { animation: sfa-pulse .3s ease-in-out 4 alternate both; }
.sfa[data-state="done"] .sfa-head { animation: sfa-nod .9s var(--ease) both; }
.sfa[data-state="done"] .spark { animation: sfa-twinkle 1.1s ease-in-out infinite; }
.sfa[data-state="done"] .sfa-led { fill: #3fd08f; }

/* ── Despertando ── */
.sfa[data-state="wake"] { --led: #f5a524; --ring: #f5a524; }
.sfa[data-state="wake"] .sfa-head { animation: sfa-doze 3.2s ease-in-out infinite; }
.sfa[data-state="wake"] .z { animation: sfa-z 1.8s ease-out infinite; animation-delay: var(--d); }
.sfa[data-state="wake"] .snore { animation: sfa-snore 1.8s ease-in-out infinite; }
.sfa[data-state="wake"] .sfa-led { animation: sfa-pulse 1s steps(2, jump-none) infinite; }
.sfa[data-state="wake"] .sfa-screen { opacity: .75; }

/* ── Sin conexión ── */
.sfa[data-state="off"] { --led: #ef5350; --ring: #ef5350; }
.sfa[data-state="off"] .sfa-arm-mic, .sfa[data-state="off"] .sfa-hand-mic { opacity: 1; }
.sfa[data-state="off"] .sfa-arm-down { opacity: 0; }
.sfa[data-state="off"] .sfa-hand-mic { animation: sfa-check 2.2s ease-in-out infinite; }
.sfa[data-state="off"] .sfa-head { animation: sfa-worry 3.2s ease-in-out infinite; }
.sfa[data-state="off"] .plead { animation: sfa-plead 3.2s ease-in-out infinite; }
.sfa[data-state="off"] .wbrows { animation: sfa-brow-worry 3.2s ease-in-out infinite; }
.sfa[data-state="off"] .quiver { animation: sfa-quiver .5s ease-in-out infinite alternate; }
.sfa[data-state="off"] .sfa-nowifi { opacity: 1; animation: sfa-pop .45s var(--ease) both, sfa-alert 1.6s ease-in-out .45s infinite; }
.sfa[data-state="off"] .sfa-led { animation: sfa-pulse 1.6s ease-in-out infinite; }

/* ── keyframes ── */
@keyframes sfa-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sfa-blink  { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes sfa-pulse  { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes sfa-spin   { to { transform: rotate(360deg); } }
@keyframes sfa-wave   { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes sfa-bob    { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes sfa-look   { 0%, 100% { transform: translateX(0); } 30%, 60% { transform: translateX(6px) translateY(3px); } }
@keyframes sfa-brows  { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes sfa-read { 0%, 100% { transform: translateX(-7px); } 78% { transform: translateX(7px); } }
@keyframes sfa-scan   { from { transform: translateY(0); } to { transform: translateY(80px); } }
@keyframes sfa-ponder { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(7deg) translateY(-2px); } }
@keyframes sfa-up     { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } }
@keyframes sfa-dot    { 0%, 100% { opacity: .2; transform: scale(.7); } 40% { opacity: 1; transform: scale(1.1); } }
@keyframes sfa-talk { 0%, 100% { transform: scale(.85, .3); } 15% { transform: scale(1.35, 1.45); } 32% { transform: scale(1.05, .55); } 50% { transform: scale(1.4, 1.25); } 66% { transform: scale(.95, .35); } 84% { transform: scale(1.25, 1.15); } }
@keyframes sfa-type   { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
@keyframes sfa-nod    { 0% { transform: none; } 35% { transform: rotate(2deg) translateY(6px); } 70% { transform: translateY(-1px); } 100% { transform: none; } }
@keyframes sfa-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .6; } 50% { transform: scale(1.25) rotate(45deg); opacity: 1; } }
@keyframes sfa-doze   { 0%, 100% { transform: rotate(6deg) translateY(5px); } 50% { transform: rotate(8deg) translateY(8px); } }
@keyframes sfa-z      { 0% { opacity: 0; transform: translate(0, 6px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px) scale(1.1); } }
@keyframes sfa-snore  { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.25); } }
@keyframes sfa-shake  { 0% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80%, 100% { transform: rotate(-4deg) translateY(4px); } }

@keyframes sfa-holo { 0% { opacity: 0; transform: translateX(calc(var(--dx) * -16px)); } 25%, 70% { opacity: .9; } 100% { opacity: 0; transform: translateX(calc(var(--dx) * 12px)); } }
@keyframes sfa-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sfa-bfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sfa-bdot { 0%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }
@keyframes sfa-adjust { 0%, 100% { transform: rotate(0) translate(0, 0); } 30% { transform: rotate(-6deg) translate(-1px, -2px); } 60% { transform: rotate(3deg) translate(1px, 1px); } }
@keyframes sfa-talkbob { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-1.5deg) translateY(-2px); } 60% { transform: rotate(1.5deg) translateY(0); } }
@keyframes sfa-wbrows { 0%, 100% { transform: translateY(0); } 15%, 50% { transform: translateY(-4px); } 32%, 66% { transform: translateY(0); } }
@keyframes sfa-speak { 0%, 100% { transform: translateY(0); } 15%, 50% { transform: translateY(-1.5px); } }

@keyframes sfa-check { 0%, 100% { transform: rotate(0) translate(0, 0); } 20% { transform: rotate(-8deg) translate(-2px, -3px); } 35% { transform: rotate(4deg) translate(1px, 0); } 50% { transform: rotate(-6deg) translate(-1px, -2px); } 70% { transform: rotate(0) translate(0, 0); } }
@keyframes sfa-worry { 0%, 100% { transform: rotate(-3deg) translateY(3px); } 30% { transform: rotate(2.5deg) translateY(3px); } 55% { transform: rotate(-2deg) translateY(4px); } 75% { transform: rotate(-3deg) translateY(4px); } }
@keyframes sfa-plead { 0%, 100% { transform: translateY(0); } 45%, 70% { transform: translateY(-2.5px); } }
@keyframes sfa-brow-worry { 0%, 100% { transform: translateY(0); } 45%, 70% { transform: translateY(-3px); } }
@keyframes sfa-quiver { from { transform: translateY(0) scaleX(1); } to { transform: translateY(.8px) scaleX(.94); } }
@keyframes sfa-alert { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }


/* ───────────── huecos ─────────────
   row  → cuadrado de esquinas redondeadas junto a cada respuesta (más grande que el
          ícono de 40 px para aprovechar el espacio y que se lea la cara)
   head → cabecera del chat;  hero → portada de la bienvenida.
   Sin `html.tpava-on` (apagado por el developer) cabecera y portada no existen y la
   fila vuelve al ícono de Tecport de siempre. */
.tpava-head, .tpava-hero { display: none; }
.tpava-on .tpava-head, .tpava-on .tpava-hero { display: block; }

.ava.ava--ai.tpava {
  width: 46px; height: 46px; border-radius: 12px; padding: 0;
  position: relative; overflow: hidden; background: #dfe7ef;
  box-shadow: 0 0 0 1px var(--border-2), var(--shadow-sm);
}
.tpava-head {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  position: relative; overflow: hidden; background: #dfe7ef;
  box-shadow: 0 0 0 1px var(--border-2), var(--shadow-sm);
}
.tpava-hero {
  width: 230px; max-width: 62vw; margin: 0 auto; border-radius: 22px; overflow: hidden;
  background: #dfe7ef; box-shadow: 0 0 0 1px var(--border-2), var(--shadow-md);
}
.tpava .sfa, .tpava-head .sfa, .tpava-hero .sfa { width: 100%; }

/* Punto de estado en la esquina: lo que se lee de un vistazo en tamaño chico. */
.tpava-dot {
  position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, #3fd08f); box-shadow: 0 0 0 2px #fff; transition: background .3s;
}
[data-tpava][data-state="listen"], [data-tpava][data-state="search"],
[data-tpava][data-state="write"] { --dot: #3d8be0; }
[data-tpava][data-state="think"] { --dot: #6aa8ea; }
[data-tpava][data-state="wake"]  { --dot: #f5a524; }
[data-tpava][data-state="off"]   { --dot: #ef5350; }
[data-tpava][data-state="search"] .tpava-dot, [data-tpava][data-state="think"] .tpava-dot,
[data-tpava][data-state="write"] .tpava-dot, [data-tpava][data-state="wake"] .tpava-dot { animation: sfa-dot 1s ease-in-out infinite; }
@keyframes sfa-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Filas viejas: quietas. */
.is-still .sfa *, .is-still .tpava-dot { animation: none !important; }

@media (max-width: 720px) {
  .ava.ava--ai.tpava { width: 40px; height: 40px; border-radius: 11px; }
  .tpava-head { width: 38px; height: 38px; border-radius: 10px; }
}

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