/* Guía visual (app y Manager): ver js/guia.js */
.btn-guia { background: none; border: 1px solid var(--line); border-radius: 18px; padding: 5px 10px; min-height: 0; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; width: auto; color: var(--ink); }
.btn-guia:hover { background: var(--paper); }
#guia { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.guia-velo { position: fixed; inset: 0; background: rgba(20, 22, 24, 0.6); pointer-events: auto; }
.guia-foco { position: fixed; border-radius: 10px; box-shadow: 0 0 0 4px var(--yellow), 0 0 0 9999px rgba(20, 22, 24, 0.6);
  transition: top .25s, left .25s, width .25s, height .25s; pointer-events: none; }
.guia-tarjeta { position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--surface); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3); pointer-events: auto; border-top: 4px solid var(--yellow); }
.guia-tarjeta.centrada { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.guia-tarjeta.movil { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: 16px; transform: none; }
.guia-tarjeta.movil.arriba { bottom: auto; top: 16px !important; }
.guia-tarjeta.movil.centrada { top: 50% !important; bottom: auto; transform: translateY(-50%); }
.guia-tarjeta h4 { margin: 2px 0 6px; font-size: 17px; }
.guia-texto { font-size: 14px; line-height: 1.5; }
.guia-paso { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.guia-botones { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.guia-botones span { flex: 1; }
.guia-botones button { width: auto; min-height: 0 !important; margin: 0; padding: 6px 12px !important; font-size: 13px !important; flex: none; }
@media (max-width: 640px) { .btn-guia span { display: none; } }