/* YoWeb WhatsApp Flotante — estilos públicos encapsulados. */
.yoweb-wa {
  --yoweb-wa-bottom: 47px;
  --yoweb-wa-side: 18px;
  --yoweb-wa-size: 58px;
  --yoweb-wa-icon: 35px;
  --yoweb-wa-button: #49e670;
  --yoweb-wa-icon-color: #fff;
  --yoweb-wa-bubble: #fff;
  --yoweb-wa-text: #161616;
  --yoweb-wa-z: 9999;
  position: fixed;
  bottom: var(--yoweb-wa-bottom);
  z-index: var(--yoweb-wa-z);
  width: var(--yoweb-wa-size);
  height: var(--yoweb-wa-size);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1;
}

.yoweb-wa,
.yoweb-wa * {
  box-sizing: border-box;
}

.yoweb-wa--right {
  right: var(--yoweb-wa-side);
}

.yoweb-wa--left {
  left: var(--yoweb-wa-side);
}

.yoweb-wa__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--yoweb-wa-size);
  height: var(--yoweb-wa-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--yoweb-wa-icon-color);
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 260ms ease, transform 260ms ease;
}

.yoweb-wa.is-button-pending .yoweb-wa__button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.82);
}

.yoweb-wa.is-button-revealed .yoweb-wa__button {
  animation: yoweb-wa-button-arrive 460ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.yoweb-wa__button:hover,
.yoweb-wa__button:focus-visible {
  color: var(--yoweb-wa-icon-color);
  outline: none;
}

.yoweb-wa__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--yoweb-wa-size);
  height: var(--yoweb-wa-size);
  border-radius: 999px;
  background: var(--yoweb-wa-button);
  color: var(--yoweb-wa-icon-color);
  box-shadow: 0 8px 28px rgba(24, 39, 75, 0.24);
  transform-origin: 50% 50%;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.yoweb-wa__button:hover .yoweb-wa__visual,
.yoweb-wa__button:focus-visible .yoweb-wa__visual {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 12px 34px rgba(24, 39, 75, 0.31);
}

.yoweb-wa__button:focus-visible .yoweb-wa__visual {
  box-shadow: 0 0 0 4px rgba(73, 230, 112, 0.24), 0 12px 34px rgba(24, 39, 75, 0.31);
}

.yoweb-wa__icon {
  display: block;
  width: var(--yoweb-wa-icon);
  height: var(--yoweb-wa-icon);
  color: inherit;
  transform-origin: 50% 50%;
}

.yoweb-wa__notification {
  position: absolute;
  z-index: 2;
  top: -4px;
  right: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e92929;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
  transform-origin: 50% 50%;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0.9, 0.25, 1.25), visibility 180ms ease;
}

.yoweb-wa.is-sequence-mode .yoweb-wa__notification {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.45);
}

.yoweb-wa.is-sequence-mode.is-notification-visible .yoweb-wa__notification {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.yoweb-wa__bubble {
  position: absolute;
  bottom: calc((var(--yoweb-wa-size) - 40px) / 2);
  display: none;
  align-items: center;
  min-height: 40px;
  max-width: min(320px, calc(100vw - var(--yoweb-wa-size) - var(--yoweb-wa-side) - 30px));
  padding: 6px 15px 6px 8px;
  border-radius: 12px;
  background: var(--yoweb-wa-bubble);
  color: var(--yoweb-wa-text);
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}

button.yoweb-wa__bubble {
  margin: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/*
 * Los constructores visuales suelen aplicar estilos globales muy agresivos a
 * todos los <button> (mayúsculas, tamaños grandes, columnas, fondos, etc.).
 * La burbuja inteligente es un botón real por accesibilidad, así que
 * neutralizamos aquí esas reglas sin afectar a ningún otro botón de la web.
 */
.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action {
  position: absolute !important;
  display: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(320px, calc(100vw - var(--yoweb-wa-size) - var(--yoweb-wa-side) - 30px)) !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 15px 6px 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--yoweb-wa-bubble) !important;
  background-image: none !important;
  color: var(--yoweb-wa-text) !important;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.16) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.yoweb-wa.is-bubble-visible button.yoweb-wa__bubble.yoweb-wa__bubble--action {
  display: flex !important;
}

.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action:hover,
.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action:focus-visible {
  background: var(--yoweb-wa-bubble) !important;
  color: var(--yoweb-wa-text) !important;
  outline: none !important;
  box-shadow: 0 8px 27px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action .yoweb-wa__bubble-image {
  display: block !important;
  flex: 0 0 auto !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 7px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action .yoweb-wa__bubble-text {
  display: block !important;
  overflow: hidden !important;
  max-width: 245px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--yoweb-wa-text) !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.yoweb-wa button.yoweb-wa__bubble.yoweb-wa__bubble--action .yoweb-wa__arrow {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.yoweb-wa__bubble--action {
  pointer-events: auto;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.yoweb-wa__bubble--action:hover,
.yoweb-wa__bubble--action:focus-visible {
  outline: none;
  box-shadow: 0 8px 27px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.yoweb-wa--right .yoweb-wa__bubble {
  right: calc(var(--yoweb-wa-size) + 12px);
}

.yoweb-wa--left .yoweb-wa__bubble {
  left: calc(var(--yoweb-wa-size) + 12px);
}

.yoweb-wa.is-bubble-visible .yoweb-wa__bubble {
  display: flex;
}

.yoweb-wa__bubble-image {
  flex: 0 0 auto;
  width: 24px;
  height: 26px;
  margin-right: 7px;
  object-fit: contain;
}

.yoweb-wa__bubble-text {
  display: block;
  overflow: hidden;
  max-width: 245px;
  text-overflow: ellipsis;
}

.yoweb-wa__arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: translateY(-50%);
}

.yoweb-wa--right .yoweb-wa__arrow {
  right: -7px;
  border-left: 8px solid var(--yoweb-wa-bubble);
}

.yoweb-wa--left .yoweb-wa__arrow {
  left: -7px;
  border-right: 8px solid var(--yoweb-wa-bubble);
}

/* Launcher premium */
.yoweb-wa__launcher {
  position: absolute;
  bottom: calc(var(--yoweb-wa-size) + 15px);
  display: none;
  overflow: hidden;
  width: min(350px, calc(100vw - 28px));
  border: 1px solid rgba(27, 35, 51, 0.08);
  border-radius: 19px;
  background: #fff;
  color: #171a22;
  box-shadow: 0 22px 65px rgba(18, 29, 49, 0.24);
  line-height: 1.4;
  transform-origin: 100% 100%;
  animation: yoweb-wa-launcher-in 220ms ease both;
}

.yoweb-wa--right .yoweb-wa__launcher {
  right: 0;
}

.yoweb-wa--left .yoweb-wa__launcher {
  left: 0;
  transform-origin: 0 100%;
}

.yoweb-wa.is-launcher-open .yoweb-wa__launcher {
  display: block;
}

.yoweb-wa.is-launcher-open .yoweb-wa__bubble {
  display: none !important;
}

.yoweb-wa__launcher-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 17px 18px;
  background: var(--yoweb-wa-button);
  background: linear-gradient(135deg, color-mix(in srgb, var(--yoweb-wa-button) 82%, #173c2c), var(--yoweb-wa-button));
  color: #fff;
}

.yoweb-wa__agent {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.yoweb-wa__agent img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13);
}

.yoweb-wa__agent strong,
.yoweb-wa__agent span {
  display: block;
  overflow: hidden;
  max-width: 225px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoweb-wa__agent strong {
  margin-bottom: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
}

.yoweb-wa__agent span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
}

.yoweb-wa__agent span i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #63f09a;
  box-shadow: 0 0 0 3px rgba(99, 240, 154, 0.15);
}

.yoweb-wa__launcher-close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 400 23px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.yoweb-wa__launcher-close:hover,
.yoweb-wa__launcher-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
  transform: rotate(6deg);
}

.yoweb-wa__launcher-body {
  padding: 21px 19px 17px;
}

.yoweb-wa__launcher-body h3 {
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  color: #171a22;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.25;
}

.yoweb-wa__launcher-body > p {
  margin: 0 0 17px;
  color: #737987;
  font-size: 12px;
  line-height: 1.5;
}

.yoweb-wa__assistant-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -3px 0 16px;
}

.yoweb-wa__assistant-message > img {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #e6e8ed;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.yoweb-wa__assistant-message > div {
  position: relative;
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid #e8eaee;
  border-radius: 4px 13px 13px 13px;
  background: #f7f8fa;
}

.yoweb-wa__assistant-message strong {
  display: block;
  margin-bottom: 3px;
  color: #252a34;
  font-size: 10px;
  font-weight: 750;
}

.yoweb-wa__assistant-message p {
  margin: 0;
  color: #545b68;
  font-size: 12px;
  line-height: 1.45;
}

.yoweb-wa__quick-replies {
  display: grid;
  gap: 8px;
}

.yoweb-wa__quick-reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 10px 13px;
  border: 1px solid #e7e9ed;
  border-radius: 11px;
  background: #f8f9fa;
  color: #282d36 !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none !important;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.yoweb-wa__quick-reply:hover,
.yoweb-wa__quick-reply:focus-visible {
  border-color: color-mix(in srgb, var(--yoweb-wa-button) 65%, #dfe3e7);
  background: color-mix(in srgb, var(--yoweb-wa-button) 7%, #fff);
  color: #171a22 !important;
  outline: none;
  transform: translateX(2px);
}

.yoweb-wa--left .yoweb-wa__quick-reply:hover,
.yoweb-wa--left .yoweb-wa__quick-reply:focus-visible {
  transform: translateX(-2px);
}

.yoweb-wa__quick-reply b {
  color: var(--yoweb-wa-button);
  font-size: 20px;
  font-weight: 500;
}

.yoweb-wa__general-link {
  display: block;
  margin-top: 13px;
  color: #626977 !important;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.yoweb-wa__launcher-footer {
  padding: 10px 16px;
  border-top: 1px solid #eef0f2;
  background: #fafbfb;
  color: #969ba5;
  font-size: 9px;
  text-align: center;
}

.yoweb-wa__launcher-footer span {
  margin-right: 5px;
  color: #45c979;
  font-size: 8px;
}

@keyframes yoweb-wa-launcher-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yoweb-wa-button-arrive {
  from { opacity: 0; transform: translateY(10px) scale(0.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chaty-animation-waggle {
  0% {
    transform: rotateZ(0deg) scale(1);
  }

  10% {
    transform: rotateZ(0deg) scale(1.1);
  }

  40% {
    transform: rotateZ(20deg) scale(1.1);
  }

  50% {
    transform: rotateZ(-20deg) scale(1.1);
  }

  60% {
    transform: rotateZ(20deg) scale(1.1);
  }

  70% {
    transform: rotateZ(0deg) scale(1.1);
  }

  100% {
    transform: rotateZ(0deg) scale(1);
  }
}

@media (max-width: 782px) {
  .yoweb-wa--hide-mobile {
    display: none !important;
  }
}

@media (min-width: 783px) {
  .yoweb-wa--hide-desktop {
    display: none !important;
  }
}