/* ==========================================================================
   Asesor de atención — lanzador flotante y panel de preguntas.

   Se sienta por encima de la barra de compra fija en móvil (z 70) y por
   debajo del carrito (z 110/120): si alguien abre el carrito, el carrito
   manda. El panel no es modal a propósito; la persona puede seguir leyendo
   la página con el asesor abierto.
   ========================================================================== */

.asesor-boton{
  position:fixed;z-index:80;
  right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:9px;
  padding:13px 20px 13px 15px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--cancha);color:var(--cal);
  font-family:inherit;font-size:var(--t-sm);font-weight:800;
  box-shadow:0 6px 22px rgba(6,28,19,.34);
  transition:transform 200ms var(--sale),opacity 180ms ease,visibility 180ms;
}
.asesor-boton:hover{transform:translateY(-2px)}
.asesor-boton.oculto{opacity:0;visibility:hidden;transform:translateY(8px)}
.asesor-boton__ico{width:21px;height:21px;flex-shrink:0}
.asesor-boton__ico svg{width:100%;height:100%;display:block}

/* En móvil la barra de compra fija ocupa el borde inferior: el asesor sube
   para no taparle el botón de comprar, que es el que paga las cuentas. */
@media (max-width:760px){
  .asesor-boton{bottom:calc(82px + env(safe-area-inset-bottom))}
  .asesor-boton__texto{display:none}
  .asesor-boton{padding:15px;border-radius:50%}
}

.asesor{
  position:fixed;z-index:80;
  right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:min(366px,calc(100vw - 28px));
  display:flex;flex-direction:column;
  max-height:min(596px,calc(100vh - 36px));
  background:var(--cal);
  border-radius:var(--r-grande);
  box-shadow:0 18px 48px rgba(6,28,19,.4);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
  transform-origin:bottom right;
  transition:opacity 220ms var(--sale),transform 240ms var(--cajon),visibility 240ms;
}
.asesor.abierto{opacity:1;visibility:visible;transform:none}
@media (max-width:760px){
  .asesor{bottom:calc(82px + env(safe-area-inset-bottom));max-height:calc(100vh - 150px)}
}
@media (prefers-reduced-motion:reduce){
  .asesor,.asesor-boton{transition-duration:1ms}
  .asesor{transform:none}
}

.asesor__cabeza{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 14px 16px;
  background:var(--cancha-hondo);color:var(--cal);
  border-radius:var(--r-grande) var(--r-grande) 0 0;
}
.asesor__avatar{
  width:38px;height:38px;flex-shrink:0;padding:8px;
  border-radius:50%;background:var(--cancha-roja);color:var(--cancha-noche);
}
.asesor__avatar svg{width:100%;height:100%;display:block}
.asesor__quien{flex:1;min-width:0;line-height:1.25}
.asesor__quien b{display:block;font-size:var(--t-sm)}
.asesor__estado{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:rgba(242,244,239,.74);margin-top:2px;
}
.asesor__estado::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--lima);flex-shrink:0;
}
.asesor__cerrar{
  width:32px;height:32px;flex-shrink:0;padding:6px;
  background:none;border:0;border-radius:50%;cursor:pointer;color:var(--cal);
}
.asesor__cerrar:hover{background:rgba(242,244,239,.16)}
.asesor__cerrar svg{width:100%;height:100%;display:block}

/* El hilo manda sobre la lista de preguntas: con seis opciones apiladas, un
   hilo flexible se quedaba en dos lineas y la respuesta no se veia. Ahora el
   hilo tiene piso alto y es la lista la que se desplaza. */
.asesor__hilo{
  flex:1;min-height:216px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:9px;
  padding:16px;background:var(--papel);
}
.asesor-msg{
  max-width:88%;padding:11px 14px;
  font-size:var(--t-sm);line-height:1.5;
  border-radius:16px;
}
.asesor-msg--nuestro{
  align-self:flex-start;
  background:var(--cal);color:var(--tinta);
  border-bottom-left-radius:5px;
}
.asesor-msg--suyo{
  align-self:flex-end;
  background:var(--cancha);color:var(--cal);
  border-bottom-right-radius:5px;font-weight:600;
}
.asesor-msg--puntos{padding:13px 15px}

.asesor-puntos{display:flex;gap:4px}
.asesor-puntos i{
  width:7px;height:7px;border-radius:50%;background:var(--cancha);
  opacity:.35;animation:asesor-latido 1.1s infinite;
}
.asesor-puntos i:nth-child(2){animation-delay:.16s}
.asesor-puntos i:nth-child(3){animation-delay:.32s}
@keyframes asesor-latido{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.asesor-puntos i{animation:none}}

.asesor__opciones{
  display:flex;flex-wrap:wrap;gap:7px;
  flex-shrink:0;max-height:124px;overflow-y:auto;overscroll-behavior:contain;
  padding:13px 16px;background:var(--cal);
  border-top:1px solid var(--raya);
}
.asesor__opciones:empty{display:none}
.asesor-opcion{
  padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--cancha);background:transparent;color:var(--cancha-hondo);
  font-family:inherit;font-size:12.5px;font-weight:700;line-height:1.3;
  text-align:left;
}
.asesor-opcion:hover{background:var(--cancha);color:var(--cal)}

.asesor__wpp{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;
  background:var(--cancha-hondo);color:var(--cal);
  border-radius:0 0 var(--r-grande) var(--r-grande);
  font-size:var(--t-sm);font-weight:800;text-decoration:none;
}
.asesor__wpp:hover{background:var(--cancha-noche)}
.asesor__wpp svg{width:19px;height:19px;flex-shrink:0}