/* ==========================================================================
   Asistente AMIFER (FAQs + asesor de tractor)
   --------------------------------------------------------------------------
   Reutiliza los tokens de sitio.css en vez de definir colores propios.
   Unico elemento fijo que ya existia en el
   sitio: .tr-barra-movil (barra de WhatsApp de la ficha, solo mobile). La
   clase .chatbot-con-barra-movil la agrega chatbot.js cuando la detecta en
   la pagina, para que la burbuja no la tape.
   ========================================================================== */

.chatbot-burbuja {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(0, 58, 121, .6);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.chatbot-burbuja:hover { background: var(--marca-viva); transform: scale(1.05); }
.chatbot-burbuja[aria-expanded="true"] { background: var(--marca-viva); }

.chatbot-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 999;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: 16px;
  box-shadow: 0 20px 50px -15px rgba(0, 27, 54, .35);
  overflow: hidden;
  font-size: .92rem;
}
.chatbot-panel[hidden] { display: none; }

.chatbot-panel-header {
  background: var(--marca);
  color: var(--sobre-marca);
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  flex-shrink: 0;
}
.chatbot-panel-header button {
  background: none;
  border: none;
  color: var(--sobre-marca);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem;
  opacity: .85;
}
.chatbot-panel-header button:hover { opacity: 1; }

.chatbot-cuerpo {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.chatbot-cargando{display:grid;gap:12px;padding:4px 0}
.chatbot-cargando .esqueleto:nth-of-type(1){height:1rem;width:64%}
.chatbot-cargando .esqueleto:nth-of-type(2){height:42px;border-radius:var(--radio)}
.chatbot-cargando .esqueleto:nth-of-type(3){height:42px;border-radius:var(--radio)}
.chatbot-cargando .esqueleto:nth-of-type(4){height:42px;border-radius:var(--radio)}

.chatbot-turno + .chatbot-turno { margin-top: 1rem; }

.chatbot-mensaje {
  background: var(--superficie-alt);
  border-radius: var(--radio-chico) var(--radio-chico) var(--radio-chico) 2px;
  padding: .7rem .85rem;
}

.chatbot-elegido {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .45rem;
  text-align: right;
}
.chatbot-elegido span {
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--radio-chico) var(--radio-chico) 2px var(--radio-chico);
  padding: .55rem .8rem;
  font-size: .88rem;
  font-weight: 700;
}
.chatbot-cambiar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--tinta-suave);
  font-size: .76rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.chatbot-cambiar:hover { color: var(--marca); }

.chatbot-escribiendo {
  display: inline-flex;
  gap: .3rem;
  padding: .8rem .9rem;
}
.chatbot-escribiendo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta-suave);
  animation: chatbot-tipeo 1s infinite ease-in-out;
}
.chatbot-escribiendo i:nth-child(2) { animation-delay: .15s; }
.chatbot-escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes chatbot-tipeo {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chatbot-saludo,
.chatbot-ayuda,
.chatbot-respuesta {
  color: var(--tinta);
  margin: 0;
  line-height: 1.5;
}

.chatbot-opciones {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .6rem;
}

.chatbot-opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde-vivo);
  border-radius: 10px;
  padding: .65rem .85rem;
  color: var(--tinta);
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.chatbot-opcion:hover {
  border-color: var(--marca);
  background: var(--superficie-alt);
  color: var(--tinta);
}

.chatbot-opcion-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* Mismo --verde que .wa en sitio.css: da 4.8:1 con blanco, pasa WCAG AA */
  background: var(--verde);
  border-color: var(--verde);
  color: var(--sobre-marca);
  font-weight: 700;
}
.chatbot-opcion-wa:hover {
  background: var(--verde-hover);
  border-color: var(--verde-hover);
  color: var(--sobre-marca);
}

.chatbot-resultados {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: .6rem;
}

.chatbot-tarjeta {
  display: flex;
  gap: .7rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .6rem;
}
.chatbot-tarjeta img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f2f4f7;
}
.chatbot-tarjeta-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chatbot-tarjeta-info strong { color: var(--marca); font-size: .92rem; }
.chatbot-tarjeta-info span {
  color: var(--tinta-suave);
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatbot-tarjeta-acciones {
  display: flex;
  gap: .9rem;
  margin-top: .35rem;
}
.chatbot-tarjeta-acciones a {
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--marca);
  text-decoration: none;
}
.chatbot-tarjeta-acciones a:hover { text-decoration: underline; }
.chatbot-tarjeta-acciones a .chatbot-ico { color: #25D366; margin-right: .2rem; }

/* En la ficha de tractor, mobile, hay una barra fija de WhatsApp abajo de
   todo (.tr-barra-movil, ver marca.css). Se le deja el lugar. */
@media (max-width: 640px) {
  .chatbot-con-barra-movil .chatbot-burbuja { bottom: 84px; }
  .chatbot-con-barra-movil .chatbot-panel { bottom: 152px; }
}

@media (max-width: 400px) {
  .chatbot-panel { right: 16px; left: 16px; width: auto; }
  .chatbot-burbuja { right: 16px; }
}

/* Iconos en SVG (el sitio nuevo no carga fuentes de iconos) */
.chatbot-burbuja svg{width:24px;height:24px}
.chatbot-panel-header button svg{width:18px;height:18px}
.chatbot-ico{width:14px;height:14px;flex-shrink:0}