/* Vigía, the page guide */
#vigia { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#vigia.roam { right: auto; bottom: auto; left: var(--vx, auto); top: var(--vy, auto); transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1); }
.vg-bot { position: relative; width: 74px; height: 92px; padding: 6px 6px 2px; border-radius: 18px; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, rgba(79, 214, 207, .16), rgba(10, 24, 40, .85)); border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(79,214,207,.06); backdrop-filter: blur(8px); }
.vg-bot:hover { border-color: var(--signal); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px var(--signal-glow); }
.vg-svg { width: 100%; height: 100%; overflow: visible; }
.vg-body { animation: vg-bob 3.2s ease-in-out infinite; transform-origin: 32px 80px; }
.vg-beacon { fill: var(--buoy); animation: vg-beacon 1.6s steps(2, end) infinite; }
.vg-eye { filter: drop-shadow(0 0 5px rgba(242,178,62,.8)); }
.vg-pupil { transition: transform .12s linear; }
.vg-lid { transform-origin: 32px 25px; transform: scaleY(0); animation: vg-blink 5.5s infinite; }
.vg-arm-r { transform-origin: 46px 50px; animation: vg-wave 4s ease-in-out infinite; }
#vigia.talking .vg-arm-r { animation: vg-wave-fast .45s ease-in-out 2; }
.vg-name { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font: 600 .66rem/1 var(--mono); color: #04212a; background: var(--signal); border-radius: 999px; padding: 3px 7px; }
#vigia.glitch .vg-bot { animation: vg-glitch .38s steps(3, end); }
@keyframes vg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes vg-beacon { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes vg-blink { 0%, 93%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes vg-wave { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-16deg); } 92% { transform: rotate(10deg); } }
@keyframes vg-wave-fast { 50% { transform: rotate(-22deg); } }
@keyframes vg-glitch { 0% { transform: translate(0) skewX(0); filter: hue-rotate(0); opacity: 1; } 33% { transform: translate(-6px, 2px) skewX(12deg); filter: hue-rotate(90deg) saturate(3); opacity: .5; } 66% { transform: translate(5px, -2px) skewX(-10deg); opacity: .8; } 100% { transform: none; filter: none; opacity: 1; } }

.vg-bubble { position: relative; width: min(320px, calc(100vw - 36px)); padding: 16px 16px 14px; border-radius: 16px 16px 4px 16px;
  background: rgba(10, 24, 40, .96); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(79,214,207,.08);
  animation: vg-pop .28s cubic-bezier(.2,.8,.2,1); }
#vigia.roam .vg-bubble { position: absolute; right: 88px; top: 0; border-radius: 16px 4px 16px 16px; }
@media (max-width: 760px) { #vigia.roam .vg-bubble { right: -4px; top: 100px; border-radius: 16px; } }
@keyframes vg-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.vg-text { margin: 0 22px 12px 0; color: var(--text); font-size: .95rem; line-height: 1.5; min-height: 2.8em; }
.vg-x { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; width: 28px; height: 28px; }
.vg-x:hover { color: var(--text); }
.vg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-btn.chip { font: 600 .82rem/1.2 "Archivo", sans-serif; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(130,190,215,.08); color: var(--text); cursor: pointer; min-height: 32px; }
.vg-btn.chip:hover { border-color: var(--signal); }
.vg-btn.chip.primary { background: var(--signal); border-color: var(--signal); color: #04212a; }
.vg-focus { outline: 2px solid var(--signal) !important; outline-offset: 8px; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(3, 8, 15, .35); transition: outline-color .3s; position: relative; z-index: 2; }

@media (max-width: 760px) { .vg-bot { width: 60px; height: 76px; } #vigia { right: 12px; bottom: 12px; } }
@media print { #vigia { display: none !important; } }