/* ── Bot Beniautos · panel de preguntas frecuentes ─────────────────────────
   Prefijo de ids y clases: bab-faq-  ·  No comparte estilos con el chat.

   El BOTÓN flotante no se estila aquí: vive en botones.css, compartido con los
   otros dos, para que los tres midan exactamente lo mismo.

   Acento verde esmeralda, fuera de la paleta roja de la web. Es un verde
   deliberadamente más turquesa que el de WhatsApp para que, estando los dos en
   la misma columna, no se confundan: el rosa del asistente queda entre medias
   justo por eso. Los degradados van de oscuro a vivo para que el texto blanco
   se lea: sobre verde vivo no llega al contraste mínimo.                   */

#bab-faq-panel,
#bab-faq-panel * {
  box-sizing: border-box;
}

#bab-faq-panel {
  --bab-verde: #00b381;
  --bab-verde-osc: #00754f;
  --bab-verde-suave: #eafaf4;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

#bab-faq-panel {
  position: fixed;
  bottom: 24px;
  width: 372px;
  max-width: calc(100vw - 32px);
  max-height: min(580px, calc(100vh - 64px));
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99102;
  box-shadow:
    0 22px 60px rgba(0, 117, 79, .22),
    0 4px 12px rgba(20, 23, 28, .16),
    0 0 0 2px rgba(255, 255, 255, .9);
  opacity: 0;
  transform: translateY(12px) scale(.97);
  pointer-events: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}

#bab-faq-panel.bab-izq { left: 24px; transform-origin: bottom left; }
#bab-faq-panel.bab-der { right: 24px; transform-origin: bottom right; }

#bab-faq-panel.bab-abierto {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

#bab-faq-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(120deg, #005a3d 0%, #00754f 45%, #00b381 100%);
  flex-shrink: 0;
}

#bab-faq-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#bab-faq-title {
  flex: 1;
  min-width: 0;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

#bab-faq-title span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  text-shadow: none;
}

/* Selector de idioma */
#bab-faq-langs {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

#bab-faq-langs button {
  background: rgba(255, 255, 255, .18);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Muli', Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 7px;
  margin: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}

#bab-faq-langs button:hover { background: rgba(255, 255, 255, .34); }

#bab-faq-langs button[aria-pressed="true"] {
  background: #fff;
  color: var(--bab-verde-osc);
}

#bab-faq-close {
  background: rgba(255, 255, 255, .16);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}

#bab-faq-close:hover { background: rgba(255, 255, 255, .32); }

/* ── Aviso de respuestas automáticas ─────────────────────────────────────
   Este bot NO usa inteligencia artificial (las respuestas son fijas), así que
   no le aplica el art. 50 del Reglamento (UE) 2024/1689. Pero sigue siendo un
   bot y decirlo es lo honesto, además de coherente con el otro panel.     */

#bab-faq-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #d9f5eb;
  border-bottom: 1px solid rgba(0, 117, 79, .18);
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #005a3d;
  flex-shrink: 0;
}

#bab-faq-aviso svg { flex-shrink: 0; }

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */

#bab-faq-msgs {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bab-verde-suave);
}

#bab-faq-msgs::-webkit-scrollbar { width: 6px; }
#bab-faq-msgs::-webkit-scrollbar-track { background: transparent; }
#bab-faq-msgs::-webkit-scrollbar-thumb {
  background: rgba(0, 117, 79, .28);
  border-radius: 3px;
}

.bab-faq-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.bab-faq-msg.bab-faq-bot {
  align-self: flex-start;
  background: #fff;
  color: #14171c;
  border: 1px solid rgba(0, 117, 79, .16);
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 117, 79, .07);
}

.bab-faq-msg.bab-faq-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #00754f, #00b381);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 117, 79, .28);
}

.bab-faq-msg a.bab-faq-link {
  color: var(--bab-verde-osc);
  text-decoration: underline;
  word-break: break-all;
}

.bab-faq-msg.bab-faq-user a.bab-faq-link { color: #fff; }

/* ── Opciones ───────────────────────────────────────────────────────────── */

.bab-faq-opts {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: stretch;
  margin: 2px 0 4px;
}

.bab-faq-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--bab-verde-osc);
  border: 1.5px solid rgba(0, 179, 129, .45);
  border-radius: 12px;
  padding: 12px 15px;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 117, 79, .07);
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}

.bab-faq-opt:hover {
  background: linear-gradient(135deg, #00754f, #00b381);
  border-color: transparent;
  color: #fff;
}

.bab-faq-opt:active { transform: scale(.985); }

.bab-faq-opt:focus-visible {
  outline: 2px solid var(--bab-verde-osc);
  outline-offset: 2px;
}

.bab-faq-opt.bab-faq-volver {
  background: #fff;
  border-color: rgba(20, 23, 28, .15);
  color: #5b616a;
  font-weight: 800;
}

.bab-faq-opt.bab-faq-volver:hover {
  background: #14171c;
  border-color: #14171c;
  color: #fff;
}

/* ── Botones de acción dentro de una respuesta ──────────────────────────── */

.bab-faq-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none !important;
  word-break: normal;
  transition: filter .15s;
}

.bab-faq-accion:hover { filter: brightness(1.08); }
.bab-faq-accion svg { flex-shrink: 0; }

.bab-faq-accion-wa {
  background: linear-gradient(135deg, #128c3e, #25d366);
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(37, 211, 102, .4);
}

.bab-faq-accion-stock {
  background: linear-gradient(135deg, #00754f, #00b381);
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(0, 117, 79, .35);
}

.bab-faq-accion-tel {
  background: #fff;
  color: var(--bab-verde-osc) !important;
  border: 1.5px solid var(--bab-verde);
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  #bab-faq-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    bottom: 16px;
    max-height: calc(100vh - 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #bab-faq-panel,
  .bab-faq-opt,
  .bab-faq-accion { transition: none; }
}