/* =========================================================================
   CHATBOT — burbuja y ventana de conversación

   Se apoya en los tokens de color de style.css (--brand, --accent…), así que
   al rebrandear la landing el chat cambia con ella. Va en su propio archivo
   para que el chat sea un módulo suelto: se lleva a otra promoción copiando
   chat.php, chat.css, chat.js y conocimiento.md.

   El z-index queda por debajo del aviso de cookies (150) a propósito: primero
   se resuelve el consentimiento, después se charla.

   El chat vive abajo a la IZQUIERDA. Para devolverlo a la derecha hay que
   cambiar tres cosas: el `left` de aquí abajo, el `transform-origin` del
   panel y el `left` del bloque de móvil, al final del archivo.
   ========================================================================= */

.chatbot{
  --chat-alto:  min(620px, calc(100vh - 130px));
  --chat-ancho: 400px;
  position:fixed; left:20px; bottom:20px; z-index:140;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  font-family:var(--font-body, system-ui, sans-serif);
}

/* ---------- Burbuja ---------- */
.chatbot__toggle{
  position:relative;                 /* ancla del punto de aviso */
  width:60px; height:60px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--brand, #12332B); color:#fff;
  box-shadow:0 10px 30px rgba(19,26,24,.28);
  transition:transform .25s var(--ease, ease), background .2s;
}
.chatbot__toggle:hover{ transform:translateY(-2px) scale(1.04); }
.chatbot__toggle svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Los dos iconos ocupan la misma celda; se cambia cuál se ve. */
.chatbot__toggle svg{ grid-area:1 / 1; transition:opacity .2s, transform .2s; }
.chatbot__toggle .chatbot__icono--cerrar{ opacity:0; transform:rotate(-90deg); }
.chatbot.is-open .chatbot__toggle .chatbot__icono--abrir{ opacity:0; transform:rotate(90deg); }
.chatbot.is-open .chatbot__toggle .chatbot__icono--cerrar{ opacity:1; transform:none; }

/* Punto rojo de aviso, hasta que se abre por primera vez */
.chatbot__pico{
  position:absolute; top:2px; right:2px; width:13px; height:13px;
  border:2px solid #fff; border-radius:50%; background:var(--accent, #C9A227);
}
.chatbot.is-open .chatbot__pico,
.chatbot.is-visto .chatbot__pico{ display:none; }

/* ---------- Ventana ---------- */
.chatbot__panel{
  width:min(var(--chat-ancho), calc(100vw - 40px));
  height:var(--chat-alto);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg, #fff);
  border-radius:var(--radius, 16px);
  box-shadow:0 26px 70px rgba(19,26,24,.28);
  transform-origin:bottom left;      /* la ventana «sale» de la burbuja */
}
.chatbot__panel[hidden]{ display:none; }

.chatbot.is-open .chatbot__panel{ animation:chat-entra .28s var(--ease, ease) both; }
@keyframes chat-entra{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---------- Cabecera ---------- */
.chatbot__cabecera{
  flex:none; display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:var(--brand, #12332B); color:#fff;
}
.chatbot__marca{ width:36px; height:36px; flex:none; border-radius:9px; }
.chatbot__marca rect{ fill:rgba(255,255,255,.14); }
.chatbot__marca path{ fill:var(--accent, #C9A227); }
.chatbot__titulos{ min-width:0; margin-right:auto; line-height:1.25; }
.chatbot__titulos strong{ display:block; font-size:.98rem; font-weight:600; }
.chatbot__titulos span{ display:block; font-size:.76rem; opacity:.75; }
.chatbot__cerrar{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer;
}
.chatbot__cerrar:hover{ background:rgba(255,255,255,.14); }
.chatbot__cerrar svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* ---------- Conversación ---------- */
.chatbot__cuerpo{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px; background:var(--bg-alt, #F7F5F1);
  display:flex; flex-direction:column; gap:12px;
  font-size:.92rem; line-height:1.55; color:var(--body, #4A5551);
}

.chatbot__msg{ max-width:88%; padding:11px 14px; border-radius:14px; }
.chatbot__msg--bot{
  align-self:flex-start; background:#fff; color:var(--ink, #131A18);
  border:1px solid var(--line, #E2E0D9); border-bottom-left-radius:5px;
}
.chatbot__msg--yo{
  align-self:flex-end; background:var(--brand, #12332B); color:#fff;
  border-bottom-right-radius:5px;
}
.chatbot__msg--aviso{
  align-self:stretch; max-width:none; text-align:center; padding:8px 12px;
  background:transparent; color:var(--body, #4A5551); font-size:.8rem;
}

.chatbot__msg p{ margin:0 0 .7em; }
.chatbot__msg p:last-child{ margin-bottom:0; }
.chatbot__msg ul{ margin:0 0 .7em; padding-left:1.1em; list-style:disc; }
.chatbot__msg ul:last-child{ margin-bottom:0; }
.chatbot__msg li{ margin-bottom:.25em; }
.chatbot__msg a{ color:var(--brand, #12332B); text-decoration:underline; }
.chatbot__msg--yo a{ color:#fff; }
.chatbot__msg strong{ color:inherit; font-weight:600; }

/* Botón que lleva al formulario, cuando la respuesta lo pide */
.chatbot__cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:-4px; padding:11px 20px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--accent, #C9A227); color:#1B1503;
  font-size:.87rem; font-weight:600; text-decoration:none;
  transition:transform .2s var(--ease, ease), background .2s, color .2s;
}
.chatbot__cta:hover{ transform:translateY(-2px); background:var(--accent-dark, #A8871C); color:#fff; }

/* Tres puntos mientras se piensa la respuesta */
.chatbot__pensando{ display:flex; gap:5px; align-items:center; padding:14px; }
.chatbot__pensando span{
  width:7px; height:7px; border-radius:50%; background:var(--body, #4A5551); opacity:.45;
  animation:chat-punto 1.2s infinite ease-in-out;
}
.chatbot__pensando span:nth-child(2){ animation-delay:.16s; }
.chatbot__pensando span:nth-child(3){ animation-delay:.32s; }
@keyframes chat-punto{
  0%, 60%, 100%{ transform:translateY(0);   opacity:.35; }
  30%          { transform:translateY(-4px); opacity:.9;  }
}

/* ---------- Sugerencias de arranque ---------- */
.chatbot__sugerencias{ display:flex; flex-wrap:wrap; gap:7px; }
.chatbot__sugerencia{
  padding:7px 13px; border:1px solid var(--line, #E2E0D9); border-radius:999px;
  background:#fff; color:var(--brand, #12332B);
  font-size:.8rem; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.chatbot__sugerencia:hover{ background:var(--bg-soft, #EFEDE6); border-color:var(--brand, #12332B); }

/* ---------- Pie: campo de texto ---------- */
.chatbot__pie{ flex:none; border-top:1px solid var(--line, #E2E0D9); background:var(--bg, #fff); }
.chatbot__form{ display:flex; align-items:flex-end; gap:8px; padding:12px; }
.chatbot__texto{
  flex:1; min-height:44px; max-height:120px; resize:none;
  padding:11px 14px; border:1px solid var(--line, #E2E0D9); border-radius:22px;
  background:var(--bg-alt, #F7F5F1); font-size:.92rem; line-height:1.4;
}
.chatbot__texto:focus{ outline:none; border-color:var(--brand, #12332B); background:#fff; }
.chatbot__enviar{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--brand, #12332B); color:#fff;
  transition:background .2s, opacity .2s;
}
.chatbot__enviar:disabled{ opacity:.4; cursor:default; }
.chatbot__enviar svg{ width:19px; height:19px; fill:currentColor; }

.chatbot__legal{
  margin:0; padding:0 14px 11px; text-align:center;
  font-size:.68rem; line-height:1.4; color:var(--body, #4A5551); opacity:.75;
}
.chatbot__legal a{ color:inherit; }

/* ---------- Móvil ----------
   La barra CTA fija de la landing ocupa la franja inferior, así que la
   burbuja sube para no taparla, y la ventana ocupa casi toda la pantalla. */
@media (max-width: 720px){
  .chatbot{ left:14px; bottom:76px; gap:10px; }
  .chatbot__panel{
    width:calc(100vw - 28px);
    height:min(76vh, calc(100vh - 150px));
  }
  .chatbot__toggle{ width:54px; height:54px; }
}

@media (prefers-reduced-motion: reduce){
  .chatbot *, .chatbot *::before, .chatbot *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}