/* ============================================================
   APA LFIM — Asistente de preguntas frecuentes (js/asistente.js)
   Usa los tokens de styles.css (:root). Azul = institución: el rojo queda
   para «Hazte socio» y el verde para WhatsApp, así no compiten.
   Sitio del lanzador: encima del botón de WhatsApp (abajo a la derecha).
   ============================================================ */

.apa-chat-launcher{
  position:fixed; right:24px; bottom:24px; z-index:74;
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 14px;
  border:none; border-radius:999px; cursor:pointer;
  background:var(--blue-d); color:#fff; font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.6), 0 10px 28px -10px rgba(15,31,82,.7), 0 2px 6px rgba(20,26,36,.18); /* aro claro: se distingue también sobre las bandas azules */
  transition:transform .25s var(--ease-out), background-color .2s, opacity .2s, bottom .5s var(--ease-out);
}
body:has(#wa) .apa-chat-launcher{ bottom:92px; }   /* 24 + 56 (WhatsApp) + 12 */
.apa-chat-launcher svg{ width:24px; height:24px; flex:none; }
@media (hover:hover) and (pointer:fine){ .apa-chat-launcher:hover{ transform:translateY(-2px); background:var(--blue); } }
.apa-chat-launcher:active{ transform:scale(.97); }
.apa-chat-launcher:focus-visible{ outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(21,42,107,.45); }
.apa-chat-open .apa-chat-launcher{ opacity:0; pointer-events:none; }

.apa-chat-panel{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:384px; max-width:calc(100vw - 24px);
  height:600px; max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--canvas); color:var(--ink); border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(20,26,36,.45), 0 2px 8px rgba(20,26,36,.12);
  font-family:var(--font-body);
  opacity:0; transform:translateY(14px) scale(.98); transform-origin:100% 100%; pointer-events:none; visibility:hidden;
  transition:opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.apa-chat-panel.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .2s ease, transform .3s var(--ease-out), visibility 0s; }

/* cabecera */
.apa-chat-head{ display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px; background:var(--blue-d); color:#fff; }
.apa-chat-head__av{ width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; overflow:hidden; }
.apa-chat-head__av img{ width:26px; height:26px; object-fit:contain; }
.apa-chat-head__t{ flex:1; min-width:0; line-height:1.25; }
.apa-chat-head__title{ display:block; font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em; }
.apa-chat-head__sub{ display:block; font-size:12.5px; color:var(--on-blue-2); margin-top:2px; }
.apa-chat-head__close{ cursor:pointer; border:none; background:transparent; color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; }
.apa-chat-head__close svg{ width:20px; height:20px; }
.apa-chat-head__close:hover{ background:rgba(255,255,255,.14); }
.apa-chat-head__close:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

/* conversación */
.apa-chat-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px; background:var(--canvas-2); display:flex; flex-direction:column; gap:10px; }
.apa-chat-body:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.apa-msg{ max-width:88%; font-size:15px; line-height:1.5; padding:10px 14px; border-radius:14px; overflow-wrap:anywhere; }
.apa-msg--bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.apa-msg--user{ align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.apa-msg--bot a{ color:var(--blue); font-weight:600; }
.apa-msg b{ font-weight:700; }
.motion .apa-msg{ animation:rise .3s var(--ease-out) both; }

/* fichas de temas */
.apa-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; background:var(--canvas-2); }
.apa-chip{ cursor:pointer; background:#fff; color:var(--blue); border:1px solid var(--line-strong); font:inherit; font-weight:600; font-size:14px; line-height:1.2; padding:9px 13px; min-height:38px; border-radius:999px; transition:background-color .15s, color .15s, border-color .15s; }
@media (hover:hover) and (pointer:fine){ .apa-chip:hover{ background:var(--blue); color:#fff; border-color:var(--blue); } }
.apa-chip:active{ transform:scale(.97); }
.apa-chip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* Tras la primera pregunta los temas pasan a una fila deslizable. */
.apa-chips.is-compact{ flex-wrap:nowrap; overflow-x:auto; padding-top:8px; padding-bottom:8px; border-top:1px solid var(--line); scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 86%,transparent); mask-image:linear-gradient(to right,#000 86%,transparent); }
.apa-chips.is-compact::-webkit-scrollbar{ display:none; }
.apa-chips.is-compact .apa-chip{ flex:none; white-space:nowrap; }
.apa-chips.is-compact::after{ content:""; flex:none; width:36px; }
.apa-followups{ display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; max-width:94%; margin-top:-2px; }

/* campo de texto */
.apa-chat-foot{ border-top:1px solid var(--line); background:#fff; padding:10px 12px 12px; }
.apa-chat-inputrow{ display:flex; gap:8px; align-items:flex-end; }
.apa-chat-input{ flex:1; resize:none; border:1px solid var(--line-strong); border-radius:10px; padding:11px 12px; font:inherit; font-size:16px; line-height:1.35; color:var(--ink); background:#fff; max-height:96px; }
.apa-chat-input::placeholder{ color:var(--ink-3); }
.apa-chat-input:focus{ outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue); }
.apa-chat-send{ flex:none; width:46px; height:46px; border:none; border-radius:10px; background:var(--blue-d); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background-color .15s; }
.apa-chat-send svg{ width:20px; height:20px; }
.apa-chat-send:hover{ background:var(--blue); }
.apa-chat-send:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.apa-chat-disclaimer{ font-size:12px; color:var(--ink-3); text-align:center; margin-top:8px; line-height:1.4; }

/* móvil: el lanzador es un círculo encima de WhatsApp y el panel ocupa la pantalla */
@media (max-width:640px){
  .apa-chat-launcher{ right:12px; bottom:76px; width:52px; height:52px; padding:0; justify-content:center; gap:0; }
  body:has(#wa) .apa-chat-launcher{ bottom:138px; }                 /* 76 + 52 + 10 */
  .motion .hero-cta-in .apa-chat-launcher{ bottom:16px; }
  .motion .hero-cta-in:has(#wa) .apa-chat-launcher{ bottom:78px; }  /* WhatsApp baja a 16 mientras se ve el botón del hero */
  .apa-chat-launcher__lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .apa-chat-panel{ left:8px; right:8px; top:8px; bottom:8px; width:auto; height:auto; max-width:none; max-height:none; transform-origin:100% 100%; }
}
@media (prefers-reduced-motion:reduce){
  .apa-chat-panel, .apa-chat-launcher, .apa-chip{ transition:none; }
  .apa-msg{ animation:none !important; }
}
@media print{ .apa-chat-launcher, .apa-chat-panel{ display:none; } }

/* WhatsApp dentro del asistente: franja fija bajo la cabecera */
.apa-chat-human{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px 8px 16px; background:#fff; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2); line-height:1.3; }
.apa-chat-human a{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 14px 0 10px; border-radius:999px; background:#075e54; color:#fff; font-weight:700; font-size:14px; text-decoration:none; transition:background-color .15s; }
.apa-chat-human a svg{ width:20px; height:20px; }
.apa-chat-human a:hover{ background:#064c44; }
.apa-chat-human a:focus-visible{ outline:2px solid #075e54; outline-offset:2px; }