/* WoW · Wowito, asistente de la web (botón flotante + chat) */
.wa-fab { position: fixed; z-index: 55; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.wa-fab__btn { position: relative; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--blue-500); background: var(--navy-800); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(7,10,18,.55), 0 0 0 0 rgba(47,125,250,.5); animation: wa-ring 3.2s ease-out infinite; padding: 0; overflow: visible; }
.wa-fab__btn .wowito { width: 46px; margin-top: 4px; }
.wa-fab__btn:hover { transform: scale(1.06); } .wa-fab__btn { transition: transform .25s var(--ease-out); }
.wa-fab__btn:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
@keyframes wa-ring { 0% { box-shadow: 0 10px 30px rgba(7,10,18,.55), 0 0 0 0 rgba(47,125,250,.5); } 70%, 100% { box-shadow: 0 10px 30px rgba(7,10,18,.55), 0 0 0 16px rgba(47,125,250,0); } }
.wa-fab__tip { background: var(--white); color: var(--ink-900); font: 600 var(--text-sm) var(--font-main); padding: .55rem .85rem; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow-card); max-width: 190px; opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease-out); }
.wa-fab__tip.on { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.wa-fab.open { display: none; }

.wa-panel { position: fixed; z-index: 58; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: min(390px, calc(100vw - 28px)); height: min(600px, calc(100svh - 28px - env(safe-area-inset-top, 0px))); display: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--navy-800); color: var(--white); border: 1px solid var(--navy-600); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; font-family: var(--font-main); }
.wa-panel.open { display: grid; animation: wa-in .35s var(--ease-out); }
@keyframes wa-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (max-width: 520px) { .wa-panel { inset: auto 0 0 0; width: 100%; height: min(86svh, 680px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }
.wa-panel > * { min-width: 0; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, #16264a, var(--navy-800)); border-bottom: 1px solid var(--navy-600); }
.wa-head .wowito { width: 46px; flex: none; }
.wa-head b { display: block; font-size: var(--text-base); } .wa-head span { display: block; font-size: var(--text-xs); color: var(--mist-300); }
.wa-head__sp { flex: 1; min-width: 0; }
.wa-ibtn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--navy-600); background: var(--navy-700); color: var(--white); cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; }
.wa-ibtn:hover { border-color: var(--blue-500); }
.wa-ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-log { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.wa-msg { max-width: 88%; padding: .65rem .85rem; border-radius: 16px; font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; animation: wa-pop .3s var(--ease-out); }
@keyframes wa-pop { from { opacity: 0; transform: translateY(8px); } }
.wa-msg--bot { align-self: flex-start; background: var(--navy-700); border: 1px solid var(--navy-600); border-bottom-left-radius: 4px; }
.wa-msg--me { align-self: flex-end; background: var(--blue-action); border-bottom-right-radius: 4px; }
.wa-msg b { color: var(--white); }
.wa-acts { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.wa-act { padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--blue-500); background: transparent; color: var(--blue-300); font: 600 var(--text-xs) var(--font-main); cursor: pointer; text-decoration: none; display: inline-flex; }
.wa-act--main { background: var(--blue-action); color: #fff; border-color: var(--blue-action); }
.wa-act:hover { background: var(--blue-action); color: #fff; }
.wa-typing { align-self: flex-start; display: flex; gap: 4px; padding: .75rem .9rem; background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: 16px; border-bottom-left-radius: 4px; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-300); animation: wa-dot 1s infinite; } .wa-typing i:nth-child(2) { animation-delay: .15s; } .wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 40% { transform: translateY(-5px); opacity: .5; } }
.wa-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; border-top: 1px solid var(--navy-600); }
.wa-chips button { flex: none; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--navy-600); background: var(--navy-700); color: var(--white); font: 500 var(--text-xs) var(--font-main); cursor: pointer; }
.wa-chips button:hover { border-color: var(--blue-500); }
.wa-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.wa-form input { flex: 1; min-width: 0; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--navy-600); background: var(--navy-700); color: var(--white); font: 400 16px var(--font-main); }
.wa-form input:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.wa-form button { padding: 0 1rem; border: 0; border-radius: 12px; background: var(--blue-action); color: #fff; font: 700 var(--text-sm) var(--font-main); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wa-fab__btn, .wa-panel.open, .wa-msg, .wa-typing i { animation: none !important; } }
