/*
 * Estilos del widget «WhatsApp flotante (GUBERNA)».
 *
 * Es la hoja del widget, igual que cada widget de Elementor trae la suya: no es
 * CSS de diseño del sitio. El color verde, su tono al pasar el cursor y la
 * separación del borde llegan como variables desde los controles del panel, y
 * el resto se apoya en los Global Colors del kit.
 */

.gb-wa-zona {
  --gb-wa: #25D366;
  --gb-wa-hover: #1EB955;
  --gb-wa-gap: 24px;
  position: fixed;
  right: var(--gb-wa-gap);
  bottom: var(--gb-wa-gap);
  z-index: 60;
}

/*
 * Reinicio de los botones del panel.
 *
 * Hello Elementor y el kit dan estilo a los <button> del sitio —fondo azul,
 * mayúsculas, seguimiento amplio, ancho completo—. Dentro del panel eso arrasa
 * con los atajos, la X y el botón de enviar, que son piezas de otra escala.
 * Se neutraliza aquí, acotado a la zona del widget, antes de vestir cada uno.
 */
.gb-wa-zona button {
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
  box-shadow: none;
  background-image: none;
}
.gb-wa-zona button:hover,
.gb-wa-zona button:focus { box-shadow: none; }

/* -------------------------------------------------------------- burbuja */
.gb-wa-zona .gb-wa {
  position: relative;
  margin-left: auto;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gb-wa);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: background-color 300ms cubic-bezier(.16, 1, .3, 1),
              transform 300ms cubic-bezier(.16, 1, .3, 1);
}
.gb-wa-zona .gb-wa:hover { background: var(--gb-wa-hover); transform: translateY(-3px); }

/* ---------------------------------------------------------------- panel */
.gb-wa-zona .gb-wa-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--e-global-color-gb_line, #DDD);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms cubic-bezier(.16, 1, .3, 1),
              transform 300ms cubic-bezier(.16, 1, .3, 1),
              visibility 300ms;
}
.gb-wa-zona.is-abierto .gb-wa-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.gb-wa-zona .gb-wa-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--gb-wa);
  color: #fff;
}
.gb-wa-zona .gb-wa-panel__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.gb-wa-zona .gb-wa-panel__status { display: block; font-size: 12px; opacity: .9; margin-top: 2px; }
.gb-wa-zona .gb-wa-panel__close {
  color: #fff; width: 30px; height: 30px; flex: none; padding: 0; border: 0;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.gb-wa-zona .gb-wa-panel__body { padding: 18px; background: var(--e-global-color-gb_grey, #F1F1F1); }

.gb-wa-zona .gb-wa-burbuja {
  margin: 0;
  background: #fff;
  border: 1px solid var(--e-global-color-gb_line, #DDD);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--e-global-color-gb_ink, #1C1C1C);
}

.gb-wa-zona .gb-wa-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gb-wa-zona .gb-wa-atajo {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--e-global-color-primary, #00509E);
  background: #fff;
  border: 1px solid var(--e-global-color-gb_line, #DDD);
  border-radius: 4px;
  padding: 7px 10px;
  transition: background-color 300ms cubic-bezier(.16, 1, .3, 1), color 300ms;
}
.gb-wa-zona .gb-wa-atajo:hover { background: var(--e-global-color-primary, #00509E); color: #fff; }

.gb-wa-zona .gb-wa-panel__form {
  display: flex; align-items: center; gap: 8px; padding: 12px;
  border-top: 1px solid var(--e-global-color-gb_line, #DDD);
}
.gb-wa-zona .gb-wa-input {
  flex: 1; min-width: 0; height: 42px; padding-inline: 12px; font-size: 14px;
  color: var(--e-global-color-gb_ink, #1C1C1C);
  border: 1px solid var(--e-global-color-gb_line, #DDD);
  border-radius: 4px;
}
.gb-wa-zona .gb-wa-input:focus { outline: none; border-color: var(--gb-wa); }
.gb-wa-zona .gb-wa-enviar {
  width: 42px; height: 42px; flex: none; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--gb-wa); color: #fff; border-radius: 4px;
  transition: background-color 300ms cubic-bezier(.16, 1, .3, 1);
}
.gb-wa-zona .gb-wa-enviar:hover { background: var(--gb-wa-hover); }

/* --------------------------------------------------------------- móvil */
@media (max-width: 767px) {
  .gb-wa-zona { --gb-wa-gap: 16px; }
  .gb-wa-zona .gb-wa { width: 52px; height: 52px; }
  .gb-wa-zona .gb-wa-panel { width: calc(100vw - 32px); max-width: 320px; bottom: 66px; }
}

/* Quien pide menos movimiento, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  .gb-wa-zona .gb-wa,
  .gb-wa-zona .gb-wa-panel,
  .gb-wa-atajo,
  .gb-wa-zona .gb-wa-enviar { transition: none; }
  .gb-wa-zona .gb-wa:hover { transform: none; }
  .gb-wa-zona .gb-wa-panel { transform: none; }
}