#voiceBtn {
  position: fixed;
  bottom: 80px;
  left: 18px;
  z-index: 1500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6b4f8a, #c084d4);
  color: white;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(107,79,138,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
  #voiceBtn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(107,79,138,0.50); }
  #voiceBtn.speaking {
    background: linear-gradient(135deg, #dc2743, #e89bb7);
    animation: voicePulse 1.2s ease-in-out infinite;
  }
  @keyframes voicePulse {
    0%,100% { box-shadow: 0 4px 16px rgba(220,39,67,0.35); }
    50%      { box-shadow: 0 4px 28px rgba(220,39,67,0.65); }
  }

  /* Tooltip / estado */
#voiceToast {
  position: fixed;
  bottom: 144px;
  left: 18px;
  z-index: 1500;
  background: rgba(60,40,80,0.88);
  color: white;
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  max-width: calc(100vw - 36px); /* Garantiza que nunca desborde la pantalla horizontalmente */
  width: max-content; /* Se adapta al texto sin romper el layout */
  text-align: center;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}
  #voiceToast.show { opacity: 1; transform: translateY(0); }

  /* Ocultar el botón de voz si la sección activa está en landing/onboarding */
  body.no-voice #voiceBtn { display: none !important; }