/* =========================================================
   Web Chat IA → WhatsApp · estilos
   Los colores se definen con variables. El plugin las calcula en PHP;
   los valores de abajo (con color-mix) solo se usan en la vista previa del panel.
   ========================================================= */
#wcg-root {
  --wcg-c: #1f6f5c;
  --wcg-c-light: color-mix(in srgb, var(--wcg-c) 70%, #fff);
  --wcg-c-dark: color-mix(in srgb, var(--wcg-c) 80%, #000);
  --wcg-c-deep: color-mix(in srgb, var(--wcg-c) 58%, #000);
  --wcg-rgb: 31, 111, 92;
  --wcg-t: #ffffff;
  --wcg-wa: #128c7e;
  --wcg-wa-light: color-mix(in srgb, var(--wcg-wa) 70%, #fff);
  --wcg-wa-dark: color-mix(in srgb, var(--wcg-wa) 80%, #000);
  --wcg-wa-deep: color-mix(in srgb, var(--wcg-wa) 58%, #000);
  --wcg-wa-rgb: 18, 140, 126;
  --wcg-wa-t: #ffffff;
  --wcg-bg: #ffffff;
  --wcg-bot: #f1f3f4;
  --wcg-text: #1d2327;
  --wcg-muted: #646970;
  position: fixed;
  bottom: 20px;
  z-index: 99999;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wcg-text);
}
#wcg-root.wcg--right { right: 20px; }
#wcg-root.wcg--left { left: 20px; }
/* Vista previa dentro del panel de WordPress */
#wcg-root.wcg-preview { position: relative; bottom: auto; right: auto; left: auto; z-index: 1; display: block; }

#wcg-root *, #wcg-root *::before, #wcg-root *::after { box-sizing: border-box; }
#wcg-root [hidden] { display: none !important; }
#wcg-root button {
  font: inherit; cursor: pointer; margin: 0;
  -webkit-appearance: none; appearance: none;
  text-transform: none; letter-spacing: normal; min-height: 0;
  -webkit-tap-highlight-color: transparent;
}
#wcg-root svg { display: block; flex: none; }
#wcg-root svg path { fill: currentColor; }

#wcg-root .wcg-launcher:focus-visible,
#wcg-root .wcg-send:focus-visible,
#wcg-root .wcg-chip:focus-visible,
#wcg-root .wcg-cta:focus-visible,
#wcg-root .wcg-head__close:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* =========================================================
   Botón flotante 3D
   ========================================================= */
#wcg-root .wcg-launcher {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  margin-left: auto;
  padding: 7px 24px 7px 7px;
  border: 0; border-radius: 999px;
  color: var(--wcg-t);
  font-size: 15.5px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, var(--wcg-c-light) 0%, var(--wcg-c) 46%, var(--wcg-c-dark) 100%);
  box-shadow:
    0 6px 0 var(--wcg-c-deep),
    0 14px 20px -2px rgba(0, 0, 0, .4),
    inset 0 2px 1px rgba(255, 255, 255, .5),
    inset 0 -4px 6px rgba(0, 0, 0, .18);
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease;
}
#wcg-root.wcg--left .wcg-launcher { margin-left: 0; margin-right: auto; }
/* brillo superior */
#wcg-root .wcg-launcher::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 14px; right: 14px; top: 3px; height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
}
#wcg-root .wcg-launcher:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 var(--wcg-c-deep),
    0 18px 26px -2px rgba(0, 0, 0, .42),
    inset 0 2px 1px rgba(255, 255, 255, .55),
    inset 0 -4px 6px rgba(0, 0, 0, .18);
}
#wcg-root .wcg-launcher:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 var(--wcg-c-deep),
    0 4px 8px -1px rgba(0, 0, 0, .35),
    inset 0 2px 1px rgba(255, 255, 255, .35),
    inset 0 -2px 4px rgba(0, 0, 0, .2);
}
#wcg-root .wcg-launcher > .wcg-orb,
#wcg-root .wcg-launcher__label { position: relative; z-index: 1; }

/* aro de pulso */
#wcg-root.wcg--anim:not(.wcg--open) .wcg-launcher::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  animation: wcg-ring 2.8s ease-out infinite;
}

/* esfera con el ícono */
#wcg-root .wcg-orb {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--wcg-c-dark);
  --wcg-dotc: #ffffff;
  background: radial-gradient(circle at 32% 24%, #ffffff 0%, #ffffff 34%, #dfe5e9 100%);
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, .2),
    inset 0 2px 2px rgba(255, 255, 255, .95),
    0 3px 5px rgba(0, 0, 0, .3);
}
#wcg-root .wcg-orb svg { width: 26px; height: 26px; overflow: visible; }
#wcg-root .wcg-orb img { width: 28px; height: 28px; object-fit: contain; display: block; }
#wcg-root .wcg-ico-bubble { fill: currentColor; }
#wcg-root .wcg-dot { fill: var(--wcg-dotc); transform-box: fill-box; transform-origin: center; }
#wcg-root.wcg--anim .wcg-orb:not(.wcg-orb--sm) { animation: wcg-wiggle 8s ease-in-out infinite; transform-origin: 50% 70%; }
#wcg-root.wcg--anim .wcg-dot { animation: wcg-dot 1.5s ease-in-out infinite; }
#wcg-root.wcg--anim .wcg-dot:nth-of-type(2) { animation-delay: .16s; }
#wcg-root.wcg--anim .wcg-dot:nth-of-type(3) { animation-delay: .32s; }
#wcg-root.wcg--open .wcg-orb { animation: none; }

/* solo círculo */
#wcg-root.wcg--round .wcg-launcher { width: 68px; height: 68px; padding: 0; justify-content: center; gap: 0; }
#wcg-root.wcg--round .wcg-launcher__label { display: none; }
#wcg-root.wcg--round .wcg-launcher::before { left: 12px; right: 12px; top: 4px; height: 36%; }
#wcg-root.wcg--round .wcg-orb {
  width: 100%; height: 100%; background: none; box-shadow: none;
  color: var(--wcg-t); --wcg-dotc: var(--wcg-c);
}
#wcg-root.wcg--round .wcg-orb svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
#wcg-root.wcg--round .wcg-orb img { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* globo rojo de notificación */
#wcg-root .wcg-badge {
  position: absolute; z-index: 3; top: -7px; left: 36px;
  min-width: 23px; height: 23px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 2px solid #fff;
  background: #ff3b30; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1; text-shadow: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  animation: wcg-badge .55s cubic-bezier(.2, 1.7, .4, 1) both;
}
#wcg-root.wcg--round .wcg-badge { left: auto; right: -3px; top: -5px; }
#wcg-root.wcg--left.wcg--round .wcg-badge { left: auto; right: -3px; }

/* ---- Globo de invitación ---- */
#wcg-root .wcg-tip {
  position: absolute; bottom: 82px; right: 0;
  display: flex; align-items: center;
  background: var(--wcg-bg); color: var(--wcg-text);
  border-radius: 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, .24);
  max-width: 270px;
  animation: wcg-pop .25s ease;
}
#wcg-root .wcg-tip::after {
  content: ""; position: absolute; bottom: -7px; right: 30px;
  width: 16px; height: 16px; background: var(--wcg-bg);
  transform: rotate(45deg); border-radius: 0 0 4px 0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .08);
}
#wcg-root.wcg--left .wcg-tip { right: auto; left: 0; }
#wcg-root.wcg--left .wcg-tip::after { right: auto; left: 30px; }
#wcg-root .wcg-tip__text { background: none; border: 0; padding: 13px 6px 13px 16px; text-align: left; color: inherit; font-weight: 600; }
#wcg-root .wcg-tip__x { background: none; border: 0; padding: 8px 12px 8px 4px; color: var(--wcg-muted); font-size: 20px; line-height: 1; }

/* =========================================================
   Ventana
   ========================================================= */
#wcg-root .wcg-win {
  position: absolute; bottom: 84px; right: 0;
  width: 370px; max-width: calc(100vw - 24px);
  height: 560px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: var(--wcg-bg);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .32);
  animation: wcg-pop .2s ease;
}
#wcg-root.wcg--left .wcg-win { right: auto; left: 0; }

#wcg-root .wcg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 12px 12px 14px;
  background: linear-gradient(135deg, var(--wcg-c) 0%, var(--wcg-c-dark) 100%);
  color: var(--wcg-t);
}
#wcg-root .wcg-head__who { display: flex; align-items: center; gap: 11px; min-width: 0; }
#wcg-root .wcg-orb--sm { width: 40px; height: 40px; }
#wcg-root .wcg-orb--sm svg { width: 23px; height: 23px; }
#wcg-root .wcg-orb--sm img { width: 24px; height: 24px; }
#wcg-root .wcg-head__txt { display: flex; flex-direction: column; min-width: 0; }
#wcg-root .wcg-head__title { font-size: 16px; }
#wcg-root .wcg-head__sub { font-size: 12.5px; opacity: .9; display: flex; align-items: center; gap: 6px; }
#wcg-root .wcg-head__sub::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
#wcg-root .wcg-head__close {
  display: inline-flex; background: transparent; color: inherit; border: 0; padding: 6px; border-radius: 50%;
}
#wcg-root .wcg-head__close:hover { background: rgba(255, 255, 255, .2); }

#wcg-root .wcg-log {
  flex: 1; overflow-y: auto; padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 8px;
  scroll-behavior: smooth; overscroll-behavior: contain;
}
#wcg-root .wcg-row { display: flex; flex-direction: column; max-width: 88%; gap: 8px; }
#wcg-root .wcg-row--bot { align-self: flex-start; }
#wcg-root .wcg-row--user { align-self: flex-end; align-items: flex-end; }
#wcg-root .wcg-bubble {
  padding: 9px 13px; border-radius: 16px;
  word-wrap: break-word; overflow-wrap: anywhere;
}
#wcg-root .wcg-row--bot .wcg-bubble { background: var(--wcg-bot); border-bottom-left-radius: 4px; }
#wcg-root .wcg-row--user .wcg-bubble {
  background: linear-gradient(135deg, var(--wcg-c) 0%, var(--wcg-c-dark) 100%);
  color: var(--wcg-t); border-bottom-right-radius: 4px;
}
#wcg-root .wcg-bubble a { color: inherit; text-decoration: underline; }

/* =========================================================
   Botón de WhatsApp dentro del chat (3D)
   ========================================================= */
#wcg-root .wcg-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--wcg-wa-light) 0%, var(--wcg-wa) 48%, var(--wcg-wa-dark) 100%);
  color: var(--wcg-wa-t) !important;
  border-radius: 999px; font-weight: 700; text-decoration: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  box-shadow:
    0 5px 0 var(--wcg-wa-deep),
    0 10px 16px -2px rgba(0, 0, 0, .3),
    inset 0 2px 1px rgba(255, 255, 255, .45),
    inset 0 -3px 5px rgba(0, 0, 0, .15);
  transition: transform .14s ease, box-shadow .14s ease;
}
#wcg-root .wcg-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--wcg-wa-deep), 0 14px 20px -2px rgba(0, 0, 0, .32), inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .15); }
#wcg-root .wcg-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--wcg-wa-deep), 0 3px 6px rgba(0, 0, 0, .3), inset 0 2px 1px rgba(255, 255, 255, .3); }
#wcg-root .wcg-cta svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
/* reflejo que cruza el botón */
#wcg-root.wcg--anim .wcg-cta::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: skewX(-20deg); pointer-events: none;
  animation: wcg-shine 3.8s ease-in-out infinite;
}
#wcg-root .wcg-cta > * { position: relative; z-index: 2; }

/* ---- Escribiendo ---- */
#wcg-root .wcg-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
#wcg-root .wcg-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6;
  animation: wcg-blink 1.2s infinite ease-in-out;
}
#wcg-root .wcg-typing span:nth-child(2) { animation-delay: .15s; }
#wcg-root .wcg-typing span:nth-child(3) { animation-delay: .3s; }

/* ---- Preguntas rápidas ---- */
#wcg-root .wcg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 10px; }
#wcg-root .wcg-chip {
  background: #fff; color: var(--wcg-c-dark);
  border: 1.5px solid var(--wcg-c); border-radius: 999px;
  padding: 6px 12px; font-size: 13.5px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
#wcg-root .wcg-chip:hover { background: var(--wcg-c); color: var(--wcg-t); transform: translateY(-1px); }

/* ---- Formulario de escritura ---- */
#wcg-root .wcg-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 12px; border-top: 1px solid #e3e5e8; background: var(--wcg-bg);
}
#wcg-root .wcg-input {
  flex: 1; resize: none; max-height: 110px;
  border: 1.5px solid #c9cdd1; border-radius: 18px;
  padding: 9px 14px; font: inherit; color: var(--wcg-text); background: #fff;
}
#wcg-root .wcg-input:focus { outline: none; border-color: var(--wcg-c); box-shadow: 0 0 0 3px rgba(var(--wcg-rgb), .2); }
#wcg-root .wcg-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; padding: 0;
  color: var(--wcg-t); border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--wcg-c-light) 0%, var(--wcg-c) 50%, var(--wcg-c-dark) 100%);
  box-shadow: 0 4px 0 var(--wcg-c-deep), 0 7px 10px -2px rgba(0, 0, 0, .3), inset 0 2px 1px rgba(255, 255, 255, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
#wcg-root .wcg-send svg { width: 20px; height: 20px; color: var(--wcg-t); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
#wcg-root .wcg-send:hover:not(:disabled) { transform: translateY(-1px); }
#wcg-root .wcg-send:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--wcg-c-deep), 0 2px 4px rgba(0, 0, 0, .3), inset 0 2px 1px rgba(255, 255, 255, .3); }
#wcg-root .wcg-send:disabled, #wcg-root .wcg-input:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Pie ---- */
#wcg-root .wcg-foot { padding: 8px 14px 12px; background: #fafafa; border-top: 1px solid #eceef0; text-align: center; }
#wcg-root .wcg-foot__wa {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--wcg-wa-dark); text-decoration: none;
}
#wcg-root .wcg-foot__wa:hover { text-decoration: underline; }
#wcg-root .wcg-foot__note { margin: 4px 0 0; font-size: 11.5px; color: var(--wcg-muted); }

/* ---- Animaciones ---- */
@keyframes wcg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wcg-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes wcg-ring {
  0%   { box-shadow: 0 0 0 0 rgba(var(--wcg-rgb), .55); }
  70%  { box-shadow: 0 0 0 20px rgba(var(--wcg-rgb), 0); }
  100% { box-shadow: 0 0 0 20px rgba(var(--wcg-rgb), 0); }
}
@keyframes wcg-wiggle {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-16deg) scale(1.06); }
  90% { transform: rotate(14deg) scale(1.06); }
  92% { transform: rotate(-9deg); }
  94% { transform: rotate(6deg); }
  96% { transform: rotate(-2deg); }
}
@keyframes wcg-dot { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-2.6px); } }
@keyframes wcg-badge { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wcg-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }

/* ---- Móvil ---- */
@media (max-width: 480px) {
  #wcg-root { bottom: 14px; }
  #wcg-root.wcg--right { right: 14px; }
  #wcg-root.wcg--left { left: 14px; }
  #wcg-root .wcg-win {
    position: fixed; left: 8px; right: 8px; bottom: 88px;
    width: auto; max-width: none;
    height: calc(100vh - 108px); max-height: 640px;
  }
  #wcg-root .wcg-input { font-size: 16px; } /* evita el zoom automático en iOS */
}

@media (prefers-reduced-motion: reduce) {
  #wcg-root * , #wcg-root *::before, #wcg-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Formulario de contacto dentro del chat ---- */
#wcg-root .wcg-lead {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1.5px solid #dfe3e6; border-radius: 14px;
  padding: 12px; width: 100%;
}
#wcg-root .wcg-lead__in {
  width: 100%; font: inherit; color: var(--wcg-text); background: #fff;
  border: 1.5px solid #c9cdd1; border-radius: 10px; padding: 9px 12px;
}
#wcg-root .wcg-lead__in:focus { outline: none; border-color: var(--wcg-c); box-shadow: 0 0 0 3px rgba(var(--wcg-rgb), .2); }
#wcg-root .wcg-lead__btn {
  color: var(--wcg-t); border: 0; border-radius: 999px;
  padding: 11px 16px; font-weight: 700;
  background: linear-gradient(180deg, var(--wcg-c-light) 0%, var(--wcg-c) 50%, var(--wcg-c-dark) 100%);
  box-shadow: 0 4px 0 var(--wcg-c-deep), 0 7px 10px -2px rgba(0, 0, 0, .25), inset 0 2px 1px rgba(255, 255, 255, .4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}
#wcg-root .wcg-lead__btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--wcg-c-deep), 0 2px 4px rgba(0, 0, 0, .3); }
#wcg-root .wcg-lead__btn:disabled { opacity: .6; cursor: wait; }
#wcg-root .wcg-lead__btn:focus-visible,
#wcg-root .wcg-lead__skip:focus-visible,
#wcg-root .wcg-lead__in:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
#wcg-root .wcg-lead__skip {
  background: none; border: 0; padding: 4px; color: var(--wcg-muted);
  font-size: 13px; text-decoration: underline;
}
#wcg-root .wcg-lead__err { margin: 0; color: #b32d2e; font-size: 13px; font-weight: 600; }
#wcg-root .wcg-lead__note { margin: 0; font-size: 11.5px; color: var(--wcg-muted); }
/* Campo trampa para bots: fuera de pantalla */
#wcg-root .wcg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { #wcg-root .wcg-lead__in { font-size: 16px; } }

/* Vista previa en el panel: los elementos van en fila */
#wcg-root.wcg-preview .wcg-launcher { margin: 0; }