/* ==========================================================================
   Asistente público (página de acceso) y Balam, el jaguar que se pasea.
   ========================================================================== */

/* ── el jaguar ───────────────────────────────────────────────────────────── */
.jaguar{position:fixed;left:0;bottom:14px;z-index:70;width:104px;height:54px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:filter .2s}
.jaguar:hover{filter:drop-shadow(0 6px 14px rgba(var(--pz-naranja-6-rgb),.55)) brightness(1.06)}
.jaguar:focus-visible{outline:3px solid rgba(var(--b-rgb),1);outline-offset:4px;border-radius:12px}
.jaguarCuerpo{width:100%;height:100%;will-change:transform}
.jaguarCuerpo svg,.jaguarCuerpo .jagImg{width:100%;height:100%;display:block}
/* El jaguar es UNA sola ilustración, sin patas ni cola sueltas: el SVG trae 153
   trazos planos y sin grupos, así que no se pueden animar por dentro.

   Para que camine de verdad se usan copias recortadas de la MISMA imagen, movidas
   por separado, como un títere: al ser la misma imagen, encajan sin costura.
   Las tres capas van superpuestas y solo se ve entera la primera. */

/* Se apilan en el mismo sitio, una encima de otra. */
.jaguarCuerpo{position:relative}
.jaguarCuerpo .jagImg{position:absolute;inset:0}

/* Solo se ve la franja recortada de cada copia. */
.jagPatasA{clip-path:inset(62% 55% 0 12%)}      /* patas de delante */
.jagPatasB{clip-path:inset(62% 22% 0 52%)}      /* patas de atrás  */
.jagCola{clip-path:inset(26% 0 40% 78%)}      /* la cola */

/* El cuerpo entero, con el vaivén del paso. */
.jaguar.andando .jagImg:first-child{animation:andarJaguar .58s ease-in-out infinite}
@keyframes andarJaguar{
  0%,100%{transform:translateY(0) rotate(-1.1deg)}
  50%{transform:translateY(-2.5px) rotate(1.1deg)}
}

/* Las patas, en contrafase: cuando una baja, la otra sube. Eso es lo que se lee
   como «está caminando» y no como «está botando». */
.jaguar.andando .jagPatasA{animation:pasoA .58s ease-in-out infinite}
.jaguar.andando .jagPatasB{animation:pasoB .58s ease-in-out infinite}
@keyframes pasoA{0%,100%{transform:translateY(0)}50%{transform:translateY(3.5px)}}
@keyframes pasoB{0%,100%{transform:translateY(3.5px)}50%{transform:translateY(0)}}

/* La cola, meciéndose. El eje está en su base, a la derecha del recorte. */
.jaguar.andando .jagCola{animation:colaJaguar 1.15s ease-in-out infinite;
  transform-origin:66% 55%}
@keyframes colaJaguar{
  0%,100%{transform:rotate(-2.5deg)}
  50%{transform:rotate(3deg)}
}
.jaguarBurbuja{position:absolute;bottom:56px;left:0;white-space:nowrap;
  background:linear-gradient(135deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1));color:var(--t-sobre-acento, rgba(var(--blanco-rgb),1));font:600 12.5px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:6px 11px;border-radius:12px;box-shadow:0 10px 24px rgba(var(--negro-rgb),.45);
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.jaguarBurbuja::after{content:'';position:absolute;left:22px;bottom:-6px;width:0;height:0;
  border:6px solid transparent;border-top-color:rgba(var(--c-rgb),1);border-bottom:0}
.jaguar:hover .jaguarBurbuja,.jaguar.saluda .jaguarBurbuja{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .jaguar .jagImg{animation:none!important}
}
@media (max-width:640px){.jaguar{width:78px;height:41px;bottom:10px}}

/* ── panel del asistente público ─────────────────────────────────────────── */
.asist{position:fixed;right:18px;bottom:18px;z-index:80;width:min(430px,94vw);height:min(620px,84vh);
  display:flex;flex-direction:column;background:rgba(var(--card-rgb),.92);border:1px solid rgba(var(--blanco-rgb),.14);
  border-radius:18px;box-shadow:0 26px 70px rgba(var(--negro-rgb),.62);backdrop-filter:blur(14px);overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:rgba(var(--tx-rgb),1)}
.asist[hidden]{display:none!important}
.asistCab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;
  border-bottom:1px solid rgba(var(--blanco-rgb),.12);cursor:move;user-select:none;touch-action:none}
.asistCab b{font-size:14px}
.asistCab .quien{display:block;font-size:11px;color:rgba(var(--mut-rgb),1);font-weight:400}
.asistBtns{display:flex;align-items:center;gap:6px}
.asistBtns button{background:rgba(var(--blanco-rgb),.07);border:1px solid rgba(var(--blanco-rgb),.14);color:rgba(var(--tx-rgb),1);
  border-radius:9px;padding:5px 9px;font:inherit;font-size:13px;line-height:1;cursor:pointer}
.asistBtns button:hover{background:rgba(var(--blanco-rgb),.13)}
.asistBtns button.on{background:linear-gradient(135deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1));border-color:transparent}
.asistBtns button.grabando{background:rgba(var(--pz-rojo-8-rgb),1);border-color:transparent;animation:latidoMic 1s infinite}
@keyframes latidoMic{0%,100%{opacity:1}50%{opacity:.55}}
#asistMic.on{background:rgba(var(--pz-rojo-8-rgb),1);border-color:transparent;animation:latidoMic 1s infinite}
.asistLog{flex:1;overflow:auto;padding:13px;display:flex;flex-direction:column;gap:11px}
.asistMsg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.asistMsg.yo{align-self:flex-end;background:linear-gradient(135deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1));color:var(--t-sobre-acento, rgba(var(--blanco-rgb),1));border-bottom-right-radius:4px}
.asistMsg.bot{align-self:flex-start;background:rgba(var(--blanco-rgb),.07);border:1px solid rgba(var(--blanco-rgb),.13);border-bottom-left-radius:4px}
.asistMsg b{color:rgba(var(--blanco-rgb),1)}
.asistMsg code{background:rgba(var(--blanco-rgb),.1);padding:1px 5px;border-radius:5px;font-size:12px}
.asistKpis{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.asistKpi{background:rgba(var(--blanco-rgb),.06);border:1px solid rgba(var(--blanco-rgb),.12);border-radius:9px;
  padding:5px 10px;font-size:10.5px;color:rgba(var(--mut-rgb),1);min-width:60px}
.asistKpi b{display:block;font-size:16px;color:rgba(var(--tx-rgb),1)}
.asistKpi.k0{background:linear-gradient(135deg,rgba(var(--a-rgb),.22),rgba(var(--c-rgb),.18));border-color:rgba(var(--a-rgb),.45)}
.asistKpi.k1{background:rgba(var(--pz-azul-13-rgb),.16);border-color:rgba(var(--pz-azul-13-rgb),.42)}
.asistKpi.k2{background:rgba(var(--pz-rojo-10-rgb),.15);border-color:rgba(var(--pz-rojo-10-rgb),.4)}
.asistKpi.k3{background:rgba(var(--ok-rgb),.14);border-color:rgba(var(--ok-rgb),.38)}
.asistGraf{margin-top:9px;padding:8px 10px;background:rgba(var(--blanco-rgb),.04);
  border:1px solid rgba(var(--blanco-rgb),.12);border-radius:11px}
.asistGraf .titulo{margin:0 0 6px;font-size:10.5px;color:rgba(var(--mut-rgb),1);text-transform:uppercase;letter-spacing:.04em}
.asistGraf .fila{display:grid;grid-template-columns:minmax(60px,34%) 1fr auto;gap:7px;align-items:center;
  font-size:11px;padding:2px 0}
.asistGraf .etq{color:rgba(var(--mut-rgb),1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asistGraf .pista{height:10px;border-radius:99px;background:rgba(var(--blanco-rgb),.09);overflow:hidden}
.asistGraf .barra{height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1))}
.asistGraf .val{font-variant-numeric:tabular-nums;color:rgba(var(--tx-rgb),1);min-width:30px;text-align:right}
.asistTabla{max-height:220px;overflow:auto;margin-top:9px;border:1px solid rgba(var(--blanco-rgb),.13);border-radius:11px}
.asistTabla table{width:100%;border-collapse:collapse;font-size:11.5px}
.asistTabla table{table-layout:fixed;width:100%}
.asistTabla th,.asistTabla td{overflow-wrap:anywhere;padding:6px 8px;border-bottom:1px solid rgba(var(--blanco-rgb),.07);text-align:left}
.asistTabla th{background:rgba(var(--blanco-rgb),.07);color:rgba(var(--mut-rgb),1);position:sticky;top:0;font-size:10px;
  text-transform:uppercase;letter-spacing:.03em}
.asistTabla tbody tr:nth-child(even){background:rgba(var(--blanco-rgb),.025)}
.asistSugs{display:flex;gap:6px;flex-wrap:wrap;padding:7px 11px 0;max-height:96px;overflow:auto}
.asistSugs button{max-width:100%;min-width:0;overflow-wrap:anywhere;text-align:left;background:rgba(var(--blanco-rgb),.06);border:1px solid rgba(var(--blanco-rgb),.13);color:rgba(var(--mut-rgb),1);
  border-radius:99px;padding:6px 10px;font-size:11.5px;cursor:pointer;font-family:inherit;text-align:left}
.asistSugs button:hover{color:rgba(var(--tx-rgb),1);border-color:rgba(var(--a-rgb),1)}
.asistForm{display:flex;gap:7px;padding:11px;border-top:1px solid rgba(var(--blanco-rgb),.12)}
.asistForm input{flex:1;background:rgba(var(--blanco-rgb),.06);border:1px solid rgba(var(--blanco-rgb),.14);
  border-radius:11px;color:rgba(var(--tx-rgb),1);padding:10px 12px;font-size:13.5px;font-family:inherit}
.asistForm input:focus{outline:2px solid rgba(var(--a-rgb),1);outline-offset:1px}
.asistForm button{background:linear-gradient(135deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1));color:var(--t-sobre-acento, rgba(var(--blanco-rgb),1));border:0;border-radius:11px;
  padding:0 16px;font:600 13.5px inherit;cursor:pointer}
.asistForm button[disabled]{opacity:.55;cursor:progress}
.asistPie{font-size:11px;color:rgba(var(--mut-rgb),1);padding:0 12px 10px;text-align:center}
.asistPie a{color:rgba(var(--b-rgb),1)}
@media (max-width:560px){
  .asist{right:0;left:0;bottom:0;width:100%;height:80vh;border-radius:18px 18px 0 0}
}

/* ── El asistente de Vue ───────────────────────────────────────────────────
   El resto de los estilos del asistente ya estaban y se reutilizan tal cual:
   el componente usa los MISMOS nombres de clase. Aquí solo va lo que no
   existía: el botón que lo abre y los avisos de estado. */

/* El botón de abrir, abajo a la derecha. Va donde luego aparece el panel, para
   que al abrirlo no salte de sitio. */
.asistAbrir{position:fixed;right:18px;bottom:18px;z-index:79;display:inline-flex;
  align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:999px;
  font:600 13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:rgba(var(--blanco-rgb),1);
  cursor:pointer;background:linear-gradient(135deg,rgba(var(--a-rgb),1),rgba(var(--c-rgb),1));
  box-shadow:0 12px 30px rgba(var(--a-rgb),.38);transition:transform .15s,filter .2s}
.asistAbrir:hover{transform:translateY(-2px);filter:brightness(1.08)}
.asistAbrir:focus-visible{outline:3px solid rgba(var(--blanco-rgb),1);outline-offset:3px}
.asistAbrir span{font-size:16px;line-height:1}

/* El saludo, cuando todavía no hay conversación. */
.asistHola{margin:0;font-size:13px;line-height:1.5;color:rgba(var(--pz-azul-16-rgb),1)}
.asistHola b{color:rgba(var(--blanco-rgb),1)}

/* Los avisos de estado: pensando, grabando, entendiendo. */
.asistPensando{margin:2px 0;font-size:12px;color:rgba(var(--mut-rgb),1);font-style:italic}
.asistError{margin:6px 0 0;font-size:12.5px;color:var(--err,rgba(var(--err-rgb),1))}

@media (max-width:560px){
  .asistAbrir{right:10px;bottom:10px;padding:10px 13px;font-size:12.5px}
}