/* helix-agent.css: Helix Agent (boton con mascota + panel lateral), 2026-09-17.
   Todo cuelga de .helix-app y lleva «hxag» para no tocar nada de fuera. Usa los tokens del tema
   (helix-tokens.css), asi que el tema claro y el oscuro salen solos.
   La mascota son tres capas: cuerpo (render), cara (ojos en SVG) y senal (el punto con el degradado
   de la marca). Cada estado anima una capa distinta; con «reducir movimiento» queda todo quieto. */

/* ---------- Boton flotante ---------- */
/* Capsula de cristal, como la barra lateral: la mascota va dentro, no suelta sobre el fondo. */
.helix-app .hxag-lanzador {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 850;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-2, 0 14px 34px rgba(0, 0, 0, .32));
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.helix-app .hxag-lanzador[hidden] { display: none; }
.helix-app .hxag-lanzador:hover { transform: translateY(-2px); border-color: var(--border-2); }
.helix-app .hxag-lanzador:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 4px; }
.helix-app .hxag-lanzador-etiqueta {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 6px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full, 999px);
  background: var(--bg-elevated);
  color: var(--text-1);
  box-shadow: var(--shadow-2, 0 10px 28px rgba(0, 0, 0, .22));
  font: 600 12.5px var(--font-sans);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.helix-app .hxag-lanzador:hover .hxag-lanzador-etiqueta,
.helix-app .hxag-lanzador:focus-visible .hxag-lanzador-etiqueta { opacity: 1; transform: translate(0, -50%); }

/* ---------- Panel ---------- */
.helix-app .hxag-panel {
  position: fixed;
  z-index: 860;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--bg-elevated);
  color: var(--text-1);
  visibility: hidden;
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s linear 260ms;
}
.helix-app .hxag-panel[hidden] { display: none; }
.helix-app .hxag-panel.is-abierto { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.helix-app .hxag-cab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border-1);
}
.helix-app .hxag-cab-textos { flex: 1 1 auto; min-width: 0; }
.helix-app .hxag-cab-nombre {
  font: 650 15px var(--font-sans);
  letter-spacing: -.01em;
  color: var(--text-1);
  /* Nunca desborda sobre los botones: si el panel es estrecho, se recorta el titulo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helix-app .hxag-cab-sub {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helix-app .hxag-cab-sub:empty { display: none; }
/* El margen separa el primer icono del nombre: pegados parecian parte del titulo. */
/* El saldo va discreto: solo el importe. «Recargar» esta dentro de la hoja que abre el chip;
   con la palabra al lado, el titulo «Helix Agent» se quedaba sin sitio y pisaba los botones. */
.helix-app .hxag-cab .hxa-chip-saldo .hxa-chip-accion { display: none; }
.helix-app .hxag-cab-acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 12px;
}
.helix-app .hxag-icono {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.helix-app .hxag-icono:hover { background: var(--bg-sunken); color: var(--text-1); }
.helix-app .hxag-icono:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.helix-app .hxag-cuerpo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .helix-app .hxag-panel {
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: 420px;
    overflow: hidden;
    border: 1px solid var(--border-1);
    border-radius: 22px;
    box-shadow: var(--shadow-2, 0 18px 50px rgba(0, 0, 0, .30));
    transform: translateX(24px);
  }
  .helix-app .helix-shell.hxag-listo { transition: padding-right 260ms var(--ease-out); }
  /* La Bandeja con un lead abierto tiene su caja de escribir abajo a la derecha: el boton sube.
     Arriba esta la fila de acciones del lead, asi que esa fila le reserva su hueco: si no, el
     boton tapaba «Mas» (el tercero, pegado al borde derecho). */
  .helix-app .helix-shell.inbox-active:has(.helix-split-detail .helix-lead-detail) ~ .hxag-lanzador { bottom: 104px; }
  .helix-app .helix-shell.inbox-active:not(.hxag-abierto):has(~ .hxag-lanzador:not([hidden]))
    .helix-split-detail .helix-lead-detail-actionbar { padding-right: 86px; }
}
/* Solo a partir de 1360 px la pantalla se estrecha; por debajo el panel se superpone, para no dejar
   el chat del lead en un canuto (a 1024 px se quedaria en 72 px). */
@media (min-width: 1360px) {
  .helix-app .helix-shell.hxag-abierto { padding-right: 446px; }
}
@media (max-width: 1023px) {
  /* Cabecera compacta: con el saldo y los tres botones, «Helix Agent» se quedaba sin sitio. */
  .helix-app .hxag-cab { padding-left: 12px; gap: 6px; }
  .helix-app .hxag-cab-acciones { gap: 2px; padding-left: 6px; }
  .helix-app .hxag-cab .hxa-icono { width: 30px; height: 30px; }
  .helix-app .hxag-cab .hxa-chip { padding: 0 9px; }
  .helix-app .hxag-cab-nombre { font-size: 14px; }
  .helix-app .hxag-lanzador {
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
  .helix-app .hxag-panel {
    inset: 0;
    z-index: 8900;
    transform: translateY(24px);
    padding-top: env(safe-area-inset-top);
  }
  /* Dentro de la ficha de un lead, el boton taparia la caja de escribir. */
  .helix-app .helix-shell:has(.helix-tab-pane.is-active .helix-lead-detail) ~ .hxag-lanzador { display: none; }
}

/* ---------- Aviso de estreno ---------- */
.helix-app .hxag-novedad {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim, rgba(0, 0, 0, .55));
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.helix-app .hxag-novedad.is-abierta { opacity: 1; }
.helix-app .hxag-novedad-hoja {
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--border-1);
  border-radius: 24px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-2, 0 24px 60px rgba(0, 0, 0, .45));
  transform: translateY(14px) scale(.98);
  transition: transform 260ms var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.helix-app .hxag-novedad.is-abierta .hxag-novedad-hoja { transform: none; }
/* La imagen se funde con la hoja por abajo: si se corta a hueso se ve la linea del recorte. */
.helix-app .hxag-novedad-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 23px 23px 0 0;
  background: #0d0d10;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
}
.helix-app .hxag-novedad-texto { padding: 18px 22px 22px; }
.helix-app .hxag-novedad-etiqueta {
  font: 600 11.5px var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.helix-app .hxag-novedad-texto h2 {
  margin: 0 0 8px;
  font: 700 21px var(--font-sans);
  letter-spacing: -.02em;
  color: var(--text-1);
}
.helix-app .hxag-novedad-texto p { margin: 0 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.helix-app .hxag-novedad-donde { color: var(--text-3); font-size: 13.5px; }
.helix-app .hxag-novedad-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* En movil, hoja desde abajo a todo el ancho: el dialogo centrado se queda corto de sitio. */
@media (max-width: 599px) {
  .helix-app .hxag-novedad { padding: 0; align-items: flex-end; }
  .helix-app .hxag-novedad-hoja {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
  }
  .helix-app .hxag-novedad-img { aspect-ratio: 5 / 3; border-radius: 23px 23px 0 0; }
  .helix-app .hxag-novedad-texto h2 { font-size: 19px; }
  .helix-app .hxag-novedad-pie { flex-direction: column-reverse; }
  .helix-app .hxag-novedad-pie .helix-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .helix-app .hxag-novedad,
  .helix-app .hxag-novedad-hoja { transition: none; }
}

/* ---------- Mascota ---------- */
.helix-app .hxag-m {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--hxag-m, 56px);
  height: var(--hxag-m, 56px);
  --hxag-ojo: #fff;
  transition: transform 180ms var(--ease-out);
}
.helix-app .hxag-m-cuerpo,
.helix-app .hxag-m-cara { position: absolute; inset: 0; width: 100%; height: 100%; }
.helix-app .hxag-m-cuerpo { object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }
/* Los ojos brillan dentro del visor, como en el render. */
.helix-app .hxag-m-cara { filter: drop-shadow(0 0 calc(var(--hxag-m, 56px) * .05) rgba(255, 255, 255, .75)); }
.helix-app .hxag-m-ojos {
  transform: translate(var(--hxag-mx, 0px), var(--hxag-my, 0px));
  transition: transform 180ms var(--ease-out), opacity 160ms var(--ease-out);
}
.helix-app .hxag-m-ojo {
  fill: var(--hxag-ojo);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 90ms ease-out;
}
.helix-app .hxag-m.is-parpadeo .hxag-m-ojo { transform: scaleY(.12); }
.helix-app .hxag-m-felices {
  fill: none;
  stroke: var(--hxag-ojo);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
/* Signo sobre la cabeza: curiosidad en reposo, sorpresa al terminar. Nada de emojis. */
.helix-app .hxag-m-signo {
  position: absolute;
  top: -14%;
  right: -6%;
  min-width: 34%;
  padding: 0 4%;
  border-radius: var(--r-full, 999px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  font: 700 calc(var(--hxag-m, 56px) * .3) / calc(var(--hxag-m, 56px) * .42) var(--font-sans);
  text-align: center;
  opacity: 0;
  transform: translateY(20%) scale(.6);
  pointer-events: none;
}
.helix-app .hxag-m.is-signo .hxag-m-signo { animation: hxag-signo 1400ms var(--ease-out); }
.helix-app .hxag-m-halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 122, 255, 0), rgba(0, 122, 255, .45), rgba(184, 75, 255, .45), rgba(255, 107, 53, .45), rgba(255, 59, 48, 0));
  filter: blur(calc(var(--hxag-m, 56px) * .12));
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

/* Reposo: flota, parpadea y los ojos van cambiando de sitio (los mueve el JS). */
.helix-app .hxag-m[data-e="reposo"] { animation: hxag-flotar 4s ease-in-out infinite; }

.helix-app .hxag-m[data-e="saludo"] { animation: hxag-salto 700ms var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)); }
.helix-app .hxag-m[data-e="saludo"] .hxag-m-ojos,
.helix-app .hxag-m[data-e="hecho"] .hxag-m-ojos { opacity: 0; }
.helix-app .hxag-m[data-e="saludo"] .hxag-m-felices,
.helix-app .hxag-m[data-e="hecho"] .hxag-m-felices { opacity: 1; }

/* Pensando: el halo del anillo gira, la esfera se balancea y los ojos van de un lado a otro. */
.helix-app .hxag-m[data-e="pensando"] { animation: hxag-balanceo 2.2s ease-in-out infinite; }
.helix-app .hxag-m[data-e="pensando"] .hxag-m-halo { opacity: .85; animation: hxag-girar 2.4s linear infinite; }
.helix-app .hxag-m[data-e="pensando"] .hxag-m-ojos { animation: hxag-mirar 2.4s ease-in-out infinite; }

.helix-app .hxag-m[data-e="escribiendo"] .hxag-m-ojo { animation: hxag-entornar 600ms ease-in-out infinite alternate; }
.helix-app .hxag-m[data-e="escribiendo"] .hxag-m-halo { opacity: .4; }

.helix-app .hxag-m[data-e="hecho"] { animation: hxag-rebote 600ms var(--ease-out); }

.helix-app .hxag-m[data-e="error"] { animation: hxag-temblor 320ms ease-in-out; }
.helix-app .hxag-m[data-e="error"] .hxag-m-ojo { transform: translateY(12%) scaleY(.55); }

.helix-app .hxag-m[data-e="sin_saldo"] { transform: rotate(-8deg); animation: hxag-respirar 5s ease-in-out infinite; }
.helix-app .hxag-m[data-e="sin_saldo"] .hxag-m-ojo { transform: scaleY(.3); }

@keyframes hxag-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes hxag-salto { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12%) scale(1.04); } 100% { transform: translateY(0) scale(1); } }
@keyframes hxag-balanceo { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hxag-girar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes hxag-mirar { 0%, 100% { transform: translate(-6%, -8%); } 50% { transform: translate(6%, -8%); } }
@keyframes hxag-entornar { 0% { transform: scaleY(1); } 100% { transform: scaleY(.55); } }
@keyframes hxag-rebote { 0% { transform: translateY(0); } 35% { transform: translateY(-14%); } 100% { transform: translateY(0); } }
@keyframes hxag-temblor { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6%); } 75% { transform: translateX(6%); } }
@keyframes hxag-signo {
  0% { opacity: 0; transform: translateY(20%) scale(.6); }
  18% { opacity: 1; transform: translateY(-10%) scale(1.08); }
  30% { transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16%) scale(.9); }
}
@keyframes hxag-respirar { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .helix-app .hxag-m,
  .helix-app .hxag-m * { animation: none !important; transition: none !important; }
  .helix-app .hxag-m[data-e="pensando"] .hxag-m-halo { opacity: .6; }
  .helix-app .hxag-panel { transition: none; }
}