/* Capa decorativa sobre el primer plan; todos los clics pasan a la tarjeta. */
.qvw-card-guide {
  position: fixed; z-index: 35; pointer-events: none;
  color: var(--brand); border-radius: 20px;
  animation: qvw-guide-entry .4s ease-out both, qvw-guide-exit .35s 6.85s ease-in forwards;
}
.qvw-card-guide::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 7%, transparent);
  animation: qvw-guide-outline 3s ease-in-out 2;
}
.qvw-card-guide__gesture {
  position: absolute; left: calc(var(--qvw-guide-x) - 7px); top: calc(var(--qvw-guide-y) - 4px);
  width: 48px; height: 56px; color: var(--qv-content-ink);
}
.qvw-card-guide.is-touch .qvw-card-guide__gesture { left: calc(var(--qvw-guide-x) - 21px); top: calc(var(--qvw-guide-y) - 6px); }
.qvw-card-guide__cursor, .qvw-card-guide__hand {
  position: absolute; inset: 0; width: 48px; height: 56px;
  filter: drop-shadow(0 3px 3px #172b4d30);
  transform-origin: 7px 4px;
  animation: qvw-guide-click 3s cubic-bezier(.22,.8,.25,1) 2 both;
}
.qvw-card-guide__hand { display: none; transform-origin: 21px 6px; }
.qvw-card-guide.is-touch .qvw-card-guide__cursor { display: none; }
.qvw-card-guide.is-touch .qvw-card-guide__hand { display: block; }
.qvw-card-guide__ripple {
  position: absolute; left: -17px; top: -20px; width: 48px; height: 48px;
  border-radius: 50%; border: 2px solid var(--brand); opacity: 0;
  animation: qvw-guide-ripple 3s ease-out 2 both;
}
.qvw-card-guide__ripple--echo { animation-delay: .12s; }
.qvw-card-guide.is-touch .qvw-card-guide__ripple { left: -3px; top: -18px; }
.qvw-card-guide__bubble {
  position: absolute; top: var(--qvw-guide-message-top); left: var(--qvw-guide-message-left, 28px);
  box-sizing: border-box; width: min(340px, calc(100% - 56px));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 12px 14px 16px; border-radius: 16px;
  color: var(--qv-content-ink); background: var(--qv-surface);
  border: 1px solid var(--qv-divider);
  box-shadow: 0 8px 28px #213a5c14, 0 2px 6px #213a5c08;
  animation: qvw-guide-message .5s .45s ease-out both;
}
.qvw-card-guide__bubble::before {
  content: ''; position: absolute; top: -6px; left: var(--qvw-guide-arrow); width: 10px; height: 10px;
  background: var(--qv-surface); border-top: inherit; border-left: inherit; transform: rotate(45deg);
}
.qvw-card-guide.is-beside .qvw-card-guide__bubble::before { top: 15px; left: -6px; transform: rotate(-45deg); }
.qvw-card-guide__bubble strong { display: block; font: 650 14px/1.4 var(--ff-sans,system-ui); }
.qvw-card-guide__bubble span { display: block; margin-top: 3px; color: var(--qv-content-muted); font: 400 12px/1.5 var(--ff-sans,system-ui); }
.qvw-card-guide__bubble .qv-close-button { flex: none; pointer-events: auto; width: 28px; height: 28px; }
.qvw-card-guide__bubble .qv-close-button svg { width: 14px; height: 14px; }
@keyframes qvw-guide-entry { from { opacity: 0; } to { opacity: 1; } }
@keyframes qvw-guide-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes qvw-guide-message { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qvw-guide-click {
  0% { opacity: 0; transform: translate(65px, 58px) rotate(-12deg); }
  14% { opacity: 1; }
  34%, 45% { opacity: 1; transform: translate(0, 0) rotate(0); }
  50% { transform: translate(1px, 2px) scale(.84); }
  58%, 80% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(12px, 14px); }
}
@keyframes qvw-guide-ripple {
  0%, 47% { opacity: 0; transform: scale(.25); }
  51% { opacity: .65; }
  77%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes qvw-guide-outline {
  0%, 44%, 100% { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  52%, 65% { border-color: color-mix(in srgb, var(--brand) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .qvw-card-guide, .qvw-card-guide::before, .qvw-card-guide * { animation: none; }
  .qvw-card-guide__ripple { display: none; }
}

/* Señala el acceso de orden sin cubrirlo ni impedir clics en los resultados. */
.qvw-order-guide {
  position: fixed; z-index: 1210; pointer-events: none; color: var(--brand);
  animation: qvw-guide-entry .3s ease-out both;
}
.qvw-order-guide::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 7%, transparent);
}
.qvw-order-guide__bubble {
  position: absolute; top: calc(100% + 12px); left: var(--qvw-order-message-left, 0px);
  box-sizing: border-box; width: min(280px, calc(100vw - 32px)); padding: 16px;
  display: grid; grid-template-columns: 1fr 28px; gap: 12px 8px;
  border: 1px solid var(--qv-divider); border-radius: 16px;
  background: var(--qv-surface); color: var(--qv-content-ink); pointer-events: auto;
  box-shadow: 0 8px 28px #213a5c14, 0 2px 6px #213a5c08;
}
.qvw-order-guide__bubble::before {
  content: ''; position: absolute; top: -6px; left: var(--qvw-order-arrow, 16px);
  width: 10px; height: 10px; background: var(--qv-surface);
  border-top: inherit; border-left: inherit; transform: rotate(45deg);
}
.qvw-order-guide.is-above .qvw-order-guide__bubble { top: auto; bottom: calc(100% + 12px); }
.qvw-order-guide.is-above .qvw-order-guide__bubble::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.qvw-order-guide__bubble strong { display: block; font: 650 14px/1.4 var(--ff-sans, system-ui); }
.qvw-order-guide__bubble span { display: block; margin-top: 3px; color: var(--qv-content-muted); font: 400 12px/1.5 var(--ff-sans, system-ui); }
.qvw-order-guide__bubble .qv-close-button { width: 28px; height: 28px; }
.qvw-order-guide__bubble .qv-close-button svg { width: 14px; height: 14px; }
.qvw-order-guide__action {
  justify-self: start; grid-column: 1 / -1; min-height: 36px; padding: 8px 14px;
  border: 0; border-radius: var(--qv-action-radius); background: var(--brand); color: white;
  cursor: pointer; font: 500 12px/1.4 var(--ff-sans, system-ui);
}
.qvw-order-guide__action:hover { background: var(--brand-dark); }
html[data-qvw-keyboard="false"] .qvw-order-guide button:focus { outline: none; }
html[data-qvw-keyboard="true"] .qvw-order-guide button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .qvw-order-guide { animation: none; } }
html.qv-workspace:not(.qvw-desktop) .qvw-order-guide { z-index: calc(var(--z-modal, 4000) + 11); }