/* ============================================================
   DANGOFE OS · RECORRIDO GUIADO «Ver cómo funciona» (prefijo rec-) · W3 · 2026-10-16 · chat de Diseño
   Karla: «un botón para todos los módulos de una pequeña demo guiada para el paso a paso de los técnicos en cada
   cosa que le enseñe cómo es cada cosa y para qué sirve, y para mí como admin».
   Resalta cada parte de la pantalla y la explica en una tarjeta con Siguiente / Atrás / Saltar.
   Sin sombras (anillos planos); claro y «Noche azul» por [data-theme='dark'] / .is-noche.
   Tres versiones (.rec-capa[data-v]):
     A · Foco   · se oscurece todo menos la parte que se explica; la tarjeta al lado
     B · Globo  · nada se oscurece; un anillo que late alrededor de la parte y un globo con flecha
     C · Guía   · un panel fijo abajo (a la derecha en pantallas anchas) con el paso, y la parte enmarcada
   ============================================================ */
.rec-capa {
  --rec-az: 3, 38, 155; --rec-cel: 59, 130, 246; --rec-tinta: #0a1633; --rec-tenue: #5b6880; --rec-suave: #93a0b8;
  --rec-vidrio: rgba(255, 255, 255, .97); --rec-borde: rgba(3, 38, 155, .16); --rec-linea: rgba(10, 22, 51, .09); --rec-campo: rgba(10, 22, 51, .05);
  --rec-pri: #03269b; --rec-velo: rgba(10, 22, 51, .55); --rec-azul-txt: #03269b;
  position: fixed; inset: 0; z-index: 10050; pointer-events: none;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--rec-tinta);
}
[data-theme='dark'] .rec-capa, .rec-capa.is-noche {
  --rec-tinta: #f2f5fb; --rec-tenue: #a9b4c9; --rec-suave: #6f7a93; --rec-vidrio: rgba(12, 22, 60, .97); --rec-borde: rgba(140, 170, 255, .3);
  --rec-linea: rgba(255, 255, 255, .11); --rec-campo: rgba(255, 255, 255, .06); --rec-pri: #2e5bd9; --rec-velo: rgba(2, 6, 24, .68); --rec-azul-txt: #8fb4ff;
}
.rec-capa *, .rec-capa *::before, .rec-capa *::after { box-sizing: border-box; }
.rec-capa b { font-weight: 800; }
.rec-capa button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rec-capa button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--rec-cel), .4); }
@keyframes rec-aparece { from { opacity: 0; } }
@keyframes rec-sube { from { opacity: 0; transform: translateY(8px); } }
@keyframes rec-late { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.18); opacity: 0; } }

/* ---------- el foco sobre la parte (A y C) ---------- */
.rec-foco { position: fixed; border-radius: 16px; pointer-events: none; transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); }
.rec-capa[data-v='A'] .rec-foco { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 9999px var(--rec-velo); animation: rec-aparece .3s ease both; }
.rec-capa[data-v='C'] .rec-foco { box-shadow: 0 0 0 3px rgba(var(--rec-cel), .9), 0 0 0 7px rgba(var(--rec-cel), .25); }
.rec-capa[data-v='C'] .rec-foco::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid rgb(var(--rec-cel)); animation: rec-late 1.2s ease-out 3 both; }
/* el anillo que late (B) */
.rec-anillo { position: fixed; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px rgb(var(--rec-cel)); transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); }
.rec-anillo::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid rgb(var(--rec-cel)); animation: rec-late 1.6s ease-out 3 both; }
/* lo que bloquea el toque fuera del recorrido (A): todo menos la parte */
.rec-bloqueo { position: fixed; inset: 0; pointer-events: none; }

/* ---------- la tarjeta (A y B) ---------- */
.rec-tarjeta {
  position: fixed; width: 340px; max-width: calc(100vw - 24px); pointer-events: auto; padding: 14px 16px 12px; border-radius: 20px;
  border: 1px solid var(--rec-borde); background: var(--rec-vidrio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); animation: rec-sube .3s cubic-bezier(.2, .8, .2, 1) both;
}
[data-theme='dark'] .rec-tarjeta, .rec-capa.is-noche .rec-tarjeta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.rec-tarjeta::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--rec-vidrio); border-left: 1px solid var(--rec-borde); border-top: 1px solid var(--rec-borde); transform: rotate(45deg); display: none; }
.rec-tarjeta[data-flecha='arriba']::before { display: block; top: -8px; left: var(--rec-fx, 50%); margin-left: -7px; }
.rec-tarjeta[data-flecha='abajo']::before { display: block; bottom: -8px; left: var(--rec-fx, 50%); margin-left: -7px; transform: rotate(225deg); }
.rec-tarjeta[data-flecha='izquierda']::before { display: block; left: -8px; top: var(--rec-fy, 50%); margin-top: -7px; transform: rotate(-45deg); }
.rec-tarjeta[data-flecha='derecha']::before { display: block; right: -8px; top: var(--rec-fy, 50%); margin-top: -7px; transform: rotate(135deg); }
.rec-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rec-ojal { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rec-azul-txt); }
.rec-ojal svg { width: 13px; height: 13px; }
.rec-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rec-linea); background: var(--rec-campo); color: var(--rec-tenue); display: grid; place-items: center; padding: 0; }
.rec-x svg { width: 15px; height: 15px; }
.rec-tit { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.rec-txt { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--rec-tenue); }
.rec-txt b { color: var(--rec-tinta); }
.rec-pie { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rec-prog { display: flex; align-items: center; gap: 5px; margin-right: auto; }
.rec-prog i { width: 6px; height: 6px; border-radius: 50%; background: var(--rec-linea); transition: background .25s ease, transform .25s ease; }
.rec-prog i.is-hecho { background: rgba(var(--rec-cel), .45); }
.rec-prog i.is-on { background: var(--rec-pri); transform: scale(1.35); }
.rec-prog small { font-size: 11.5px; color: var(--rec-suave); margin-left: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rec-linea); background: var(--rec-campo); color: var(--rec-tinta); font-weight: 800; font-size: 13px; white-space: nowrap; }
.rec-b svg { width: 14px; height: 14px; }
.rec-b--pri { background: var(--rec-pri); color: #fff; border-color: transparent; }
.rec-b--sut { background: transparent; border-color: transparent; color: var(--rec-tenue); padding: 7px 8px; }
.rec-b[disabled] { opacity: .4; pointer-events: none; }
/* teléfono: la tarjeta abajo, a lo ancho, sin flecha */
@media (max-width: 700px) {
  .rec-tarjeta { left: 12px !important; right: 12px !important; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; width: auto; max-width: none; --rec-fx: 50%; }
  .rec-tarjeta::before { display: none !important; }
  .rec-tarjeta.is-arriba, .rec-panel.is-arriba { top: max(12px, env(safe-area-inset-top, 0px)) !important; bottom: auto !important; }
}

/* ---------- C · Guía: panel fijo ---------- */
.rec-panel {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: 380px; max-width: calc(100vw - 32px); pointer-events: auto;
  padding: 14px 16px 12px; border-radius: 20px; border: 1px solid var(--rec-borde); background: var(--rec-vidrio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  animation: rec-sube .3s cubic-bezier(.2, .8, .2, 1) both;
}
[data-theme='dark'] .rec-panel, .rec-capa.is-noche .rec-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.rec-panel .rec-lista { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; max-height: 38vh; overflow: auto; scrollbar-width: none; }
.rec-panel .rec-lista::-webkit-scrollbar { display: none; }
.rec-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; text-align: left; border: 0; background: transparent; width: 100%; font-size: 13px; color: var(--rec-tenue); }
.rec-item i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-style: normal; background: var(--rec-campo); color: var(--rec-tenue); }
.rec-item.is-hecho i { background: rgba(29, 154, 91, .16); color: #15803d; }
.rec-item.is-on { background: rgba(var(--rec-cel), .1); color: var(--rec-tinta); font-weight: 700; }
.rec-item.is-on i { background: var(--rec-pri); color: #fff; }
.rec-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-panel .rec-txt { margin-top: 4px; }
.rec-panel.is-izq { right: auto; left: 16px; }
@media (max-width: 700px) { .rec-panel { left: 12px; right: 12px; width: auto; max-width: none; } .rec-panel .rec-lista { display: none; } }

/* ---------- el botón «Ver cómo funciona» (si no se usa el de la cabecera) ---------- */
.rec-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(3, 38, 155, .22); background: rgba(59, 130, 246, .1); color: #0b3dd6; font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.rec-btn svg { width: 15px; height: 15px; }
[data-theme='dark'] .rec-btn, .is-noche .rec-btn { color: #8db0ff; border-color: rgba(141, 176, 255, .35); background: rgba(141, 176, 255, .12); }
html.rec-activo { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .rec-foco, .rec-anillo, .rec-tarjeta, .rec-panel { transition: none !important; animation: none !important; } .rec-anillo::after { animation: none; } html.rec-activo { scroll-behavior: auto; } }
.rec-capa.rec-quieto .rec-foco, .rec-capa.rec-quieto .rec-anillo, .rec-capa.rec-quieto .rec-tarjeta, .rec-capa.rec-quieto .rec-panel, .rec-capa.rec-quieto .rec-anillo::after { transition: none !important; animation: none !important; }

/* ---------- v2 · modo obligatorio y pasos de «tocar» (2026-10-16) ----------
   .rec-capa.is-obligatorio   sin Saltar ni ×; «Paso N de M»
   .rec-capa.is-tocar         el paso espera un toque sobre lo señalado; la pista «Toca aquí para seguir» según data-toque:
     A · Pulso  · anillos que se expanden desde lo señalado
     B · Flecha · una flecha que rebota apuntando a lo señalado
     C · Dedo   · un dedo que toca, con el círculo del toque
   El bloqueo son cuatro paneles alrededor del hueco (.rec-bloqueo > i), así el toque llega al elemento de verdad. */
.rec-bloqueo > i { position: fixed; display: block; pointer-events: auto; }
.rec-capa [hidden] { display: none !important; }
.rec-toque { position: fixed; border: 0; background: transparent; padding: 0; margin: 0; pointer-events: auto; cursor: pointer; border-radius: 16px; z-index: 2; }
.rec-toque:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--rec-cel), .5); }
.rec-ojal em { font-style: normal; font-weight: 700; opacity: .8; letter-spacing: .08em; }
.rec-toca { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: rgba(var(--rec-cel), .12); color: var(--rec-azul-txt); font-weight: 800; font-size: 12.5px; flex: 1 1 auto; text-align: center; }
.rec-toca svg { width: 15px; height: 15px; }
.rec-item__t { margin-left: auto; color: var(--rec-azul-txt); display: inline-flex; }
.rec-item__t svg { width: 13px; height: 13px; }
.rec-item.is-cerrado { opacity: .45; cursor: default; }
/* la pista junto a lo señalado */
.rec-pista { position: fixed; z-index: 3; display: inline-flex; align-items: center; gap: 8px; pointer-events: none; animation: rec-sube .3s cubic-bezier(.2, .8, .2, 1) both; }
.rec-pista__t { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--rec-pri); color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.rec-pista__t svg { width: 14px; height: 14px; }
/* A · Pulso: anillos desde el foco */
.rec-capa[data-toque='A'].is-tocar .rec-foco::before, .rec-capa[data-toque='A'].is-tocar .rec-anillo::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid rgb(var(--rec-cel)); animation: rec-late 1.4s ease-out 3 both; }
.rec-capa[data-toque='A'].is-tocar .rec-foco::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid rgb(var(--rec-cel)); animation: rec-late 1.4s ease-out .7s 3 both; }
.rec-pista__pulso { width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--rec-cel)); position: relative; flex: none; }
.rec-pista__pulso::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgb(var(--rec-cel)); animation: rec-late 1.4s ease-out 3 both; }
/* B · Flecha: rebota apuntando a lo señalado */
.rec-pista__fl { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rec-pri); color: #fff; flex: none; animation: rec-rebota .9s ease-in-out 4; }
.rec-pista__fl svg { width: 20px; height: 20px; }
.rec-pista[data-donde='abajo'] .rec-pista__fl svg { transform: rotate(180deg); }
@keyframes rec-rebota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.rec-pista[data-donde='abajo'] .rec-pista__fl { animation-name: rec-rebota-abajo; }
@keyframes rec-rebota-abajo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* C · Dedo: toca y se levanta, con el círculo del toque */
.rec-pista__dedo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--rec-pri); border: 2px solid var(--rec-pri); flex: none; position: relative; animation: rec-toca-dedo 1.3s ease-in-out 4; }
.rec-pista__dedo svg { width: 20px; height: 20px; }
.rec-pista__dedo::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid rgb(var(--rec-cel)); opacity: 0; animation: rec-late 1.3s ease-out .35s 4 both; }
@keyframes rec-toca-dedo { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(0, 6px) scale(.92); } 60% { transform: translate(0, 6px) scale(.92); } }
.rec-capa[data-toque='B'].is-tocar .rec-foco { box-shadow: 0 0 0 3px rgb(var(--rec-cel)), 0 0 0 9999px var(--rec-velo); }
/* al tocar: confirmación corta */
.rec-capa.is-tocado .rec-foco, .rec-capa.is-tocado .rec-anillo { box-shadow: 0 0 0 4px rgba(22, 163, 74, .9), 0 0 0 9999px var(--rec-velo); }
.rec-capa[data-v='B'].is-tocado .rec-anillo, .rec-capa[data-v='C'].is-tocado .rec-foco { box-shadow: 0 0 0 4px rgba(22, 163, 74, .9); }
.rec-capa.is-tocado .rec-pista__t { background: #15803d; }
@media (max-width: 700px) { .rec-pista__t { font-size: 12px; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .rec-pista__fl, .rec-pista__dedo, .rec-pista__pulso::after, .rec-pista__dedo::after, .rec-foco::before, .rec-foco::after { animation: none !important; } }

/* v3 (2026-10-17) · salida de emergencia en modo obligatorio: solo aparece cuando la capa lleva is-atascado (60 s sin poder seguir) */
.rec-capa .rec-salir { display: none; }
.rec-capa.is-atascado .rec-salir { display: inline-flex; }
.rec-capa.is-atascado .rec-toca { opacity: .6; }