/* Chatbot "Asesor virtual" — colores de marca Vet Mayra (usa las variables de style.css).
   Los !important en botones/inputs son a propósito: evitan que el CSS del sitio los pise. */
#wa-widget-root {
  --wa-color-primario: var(--travel, #b5a7ff);
  --wa-color-osc: var(--travel-700, #4c4375);
  --wa-color-texto: #1f1f1f;
  --wa-color-fondo-burbuja: #fff;
  --wa-radio-bordes: 20px;
  position: fixed !important; bottom: 24px; right: 24px; left: auto !important; top: auto !important;
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; z-index: 999990;
  font-family: var(--font-body, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
#wa-widget-root *, #wa-widget-root *::before, #wa-widget-root *::after { box-sizing: border-box; }

#wa-bubble { width: 66px; height: 66px; border-radius: 50%; background: var(--wa-color-primario); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 28px -8px rgb(40 20 120 / .55); transition: transform .2s ease; position: relative; border: 2px solid #000; }
#wa-bubble::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--wa-color-primario); opacity: .55; animation: wa-ping 2.4s cubic-bezier(0, 0, .3, 1) infinite; z-index: -1; }
@keyframes wa-ping { 0% { transform: scale(1); opacity: .55; } 75%, 100% { transform: scale(1.8); opacity: 0; } }
#wa-bubble:hover { transform: scale(1.06); }
#wa-bubble svg.wa-dog { width: 56px; height: 56px; fill: none; stroke: #000; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#wa-bubble svg.wa-dog .f { fill: var(--wa-color-primario); }
#wa-bubble svg.wa-dog .k { fill: #000; stroke: none; }
#wa-bubble:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

#wa-panel { display: none; position: fixed; right: 24px; left: auto; bottom: 100px; width: 350px; max-width: calc(100vw - 24px); max-height: min(520px, calc(100vh - 130px)); background: var(--wa-color-fondo-burbuja); border-radius: var(--wa-radio-bordes); box-shadow: 0 20px 60px -12px rgb(30 15 90 / .5); overflow: hidden; flex-direction: column; border: 1px solid rgb(0 0 0 / .08); }
#wa-panel.open { display: flex; animation: wa-panel-in .3s ease; }
@keyframes wa-panel-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
#wa-header { background: var(--wa-color-primario); color: #000; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
#wa-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; overflow: hidden; flex-shrink: 0; }
#wa-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
#wa-header-text { font-size: 15px; font-weight: 700; line-height: 1.3; }
#wa-header-status { font-size: 11.5px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
#wa-header-status .wa-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgb(22 163 74 / .6); animation: wa-pulse 2s infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgb(22 163 74 / .6); } 70% { box-shadow: 0 0 0 5px rgb(22 163 74 / 0); } 100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); } }
#wa-header .wa-sp { margin-left: auto; }
#wa-close, #wa-reset { cursor: pointer; line-height: 1; align-self: flex-start; background: none; border: 0; color: #000; padding: 4px; font-size: 20px; }
#wa-reset { font-size: 16px; }
#wa-body { flex: 1; overflow-y: auto; padding: 16px; background: #f5f3ff; }
.wa-typing { background: #fff; display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px; border-radius: 12px 12px 12px 2px; margin-bottom: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .08); width: fit-content; }
.wa-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: wa-bounce 1.2s infinite; }
.wa-typing span:nth-child(2) { animation-delay: .15s; }
.wa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wa-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

#wa-teaser { display: none; position: fixed; right: 96px; left: auto; bottom: 34px; width: max-content; max-width: min(240px, calc(100vw - 120px)); background: #fff; color: var(--wa-color-texto); padding: 11px 15px; border-radius: 14px; box-shadow: 0 8px 26px -8px rgb(30 15 90 / .4); font-size: 13.5px; line-height: 1.35; cursor: pointer; }
#wa-teaser.show { display: block; animation: wa-teaser-in .35s ease; }
#wa-teaser-close { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; }
@keyframes wa-teaser-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wa-msg-bot { background: #fff; color: var(--wa-color-texto); padding: 10px 14px; border-radius: 12px 12px 12px 2px; max-width: 88%; margin-bottom: 10px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.wa-msg-user { background: var(--wa-color-primario); color: #000; padding: 9px 13px; border-radius: 12px 12px 2px 12px; max-width: 80%; margin: 0 0 10px auto; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.wa-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#wa-widget-root .wa-option-btn { -webkit-appearance: none !important; appearance: none !important; background: #fff !important; border: 1.5px solid var(--wa-color-osc) !important; color: var(--wa-color-osc) !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-align: left; cursor: pointer; transition: background .15s, color .15s; line-height: 1.3; margin: 0; display: block; width: 100%; min-height: 40px; }
#wa-widget-root .wa-option-btn:hover, #wa-widget-root .wa-option-btn:focus-visible { background: var(--wa-color-primario) !important; color: #000 !important; border-color: #000 !important; }
#wa-form { padding: 10px 16px; background: #fff; display: none; flex-direction: column; gap: 8px; border-top: 1px solid #eee; }
#wa-form.open { display: flex; }
#wa-form input[type='text'], #wa-form input[type='tel'], #wa-form input[type='email'] { padding: 10px !important; border: 1.5px solid #cfcfd6 !important; border-radius: 10px !important; font-size: 14px !important; font-family: inherit !important; width: 100%; min-height: 42px; }
#wa-form input:focus { outline: none; border-color: #000 !important; box-shadow: 0 0 0 3px var(--wa-color-primario); }
.wa-input-row { display: flex; gap: 6px; }
.wa-input-row input { flex: 1; min-width: 0; }
#wa-form button, .wa-btn-primary { background: var(--wa-color-primario) !important; color: #000 !important; border: 1.5px solid #000 !important; padding: 9px 14px !important; border-radius: 10px !important; font-weight: 700 !important; cursor: pointer; font-size: 13px !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; font-family: inherit !important; white-space: nowrap; min-height: 42px; }
.wa-skip-btn { background: none !important; color: #666 !important; border: none !important; font-size: 12px !important; text-decoration: underline; cursor: pointer; padding: 2px !important; align-self: flex-end; font-family: inherit !important; min-height: 0 !important; }
.wa-privacy-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: #444; }
.wa-privacy-row input[type='checkbox'] { margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; accent-color: #000; }
.wa-privacy-row a { color: var(--wa-color-osc); text-decoration: underline; }
#wa-privacy-continue:disabled { opacity: .45; cursor: not-allowed; }
#wa-back { font-size: 13px; color: var(--wa-color-osc); cursor: pointer; margin-bottom: 10px; display: inline-block; font-weight: 600; background: none; border: 0; padding: 4px 0; font-family: inherit; }

@media (max-width: 600px) {
  #wa-widget-root { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  #wa-panel { right: 12px; left: 12px; width: auto; max-width: none; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); max-height: min(470px, calc(100vh - 150px)); }
  #wa-teaser { right: 84px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 112px); }
  #wa-bubble { width: 56px; height: 56px; }
  #wa-bubble svg.wa-dog { width: 48px; height: 48px; }
}