/* ═══════════════════════════════════════════════════════════════════
   LOOPED · Guía del demo — velo, agujero, tarjeta y controles.

   Mecánica de la guía Krino (3-ago) traducida al sistema Looped: navy
   de estructura para el velo; el TEAL de marca aparece SOLO como voz de
   la guía (aro, halo, arco de progreso, eyebrow) — los 4 colores-dato
   siguen reservados para significado. La tarjeta usa las tipografías de
   app.css: PlexMono (eyebrow), Archivo (título), Inter (cuerpo).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --guia-teal:#0FB5A5;
  --guia-teal-txt:#0A6B5C;       /* AA sobre blanco; app.css no trae teal de texto */
}

/* ── velo con agujero: un path evenodd que pinta (y captura clicks) solo
   donde hay velo — en el agujero los eventos llegan NATIVOS al elemento */
#guia-velo{position:fixed;inset:0;z-index:70;width:100%;height:100%;pointer-events:none}
#guia-velo .g-velo{pointer-events:auto}
#guia-velo .g-aro{fill:none;stroke:var(--guia-teal);stroke-width:2;pointer-events:none}
#guia-velo .g-halo{fill:none;stroke:var(--guia-teal);stroke-width:4;opacity:.22;pointer-events:none;
  animation:guia-respira 2.4s ease-in-out infinite alternate}
@keyframes guia-respira{from{opacity:.22}to{opacity:.38}}
/* kill dirigido: el kill global de app.css no mata animaciones infinitas */
@media (prefers-reduced-motion:reduce){#guia-velo .g-halo{animation:none;opacity:.38}}

/* ── tarjeta del paso (controles adentro — divergencia deliberada de Krino:
   en desktop la barra suelta flotaría sin ancla visual) */
#guia-card{position:fixed;z-index:71;width:min(360px,calc(100vw - 40px));
  background:var(--fondo,#fff);border-radius:var(--r,14px);
  box-shadow:0 18px 48px rgba(31,36,33,.28),0 2px 8px rgba(31,36,33,.10);
  padding:18px 20px 14px;font-family:Inter,system-ui,sans-serif}
#guia-card .g-cuerpo{transition:opacity .18s ease-out,transform .18s ease-out}
#guia-card .g-cuerpo.g-sale{opacity:0;transform:translateY(6px);transition:opacity .12s ease}
#guia-card .g-zona{font:600 11px PlexMono,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--guia-teal-txt)}
#guia-card h2{margin:6px 34px 0 0;font-family:Archivo,Inter,sans-serif;font-weight:650;
  font-size:18px;line-height:1.25;letter-spacing:-.015em;color:var(--texto,#1F2421)}
#guia-card .g-txt{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--texto-2,#6B7370)}
#guia-card .g-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--niebla,#F1F2F0)}
#guia-card .g-saltar{background:none;border:0;padding:6px 0;font:500 12px Inter,sans-serif;
  color:var(--texto-3,#9AA19D);cursor:pointer}
#guia-card .g-saltar:hover{text-decoration:underline}
#guia-card .g-der{display:flex;align-items:center;gap:6px}
#guia-card .g-atras{background:none;border:0;border-radius:100px;padding:9px 12px;
  font:600 12.5px Inter,sans-serif;color:var(--texto-2,#6B7370);cursor:pointer}
#guia-card .g-atras:hover{background:var(--niebla,#F1F2F0)}
#guia-card .g-atras:disabled{color:var(--texto-3,#9AA19D);opacity:.55;cursor:default;background:none}
#guia-card .g-sig{background:var(--texto,#1F2421);color:#fff;border:0;border-radius:100px;
  padding:11px 18px;font:600 13.5px/1 Inter,sans-serif;cursor:pointer;
  transition:transform .16s ease-out}
#guia-card .g-sig:active{transform:scale(.97)}

/* ── progreso: anillo que se cierra — el bucle de la economía circular */
#guia-card .g-prog{position:absolute;top:14px;right:14px;width:30px;height:30px}
#guia-card .g-prog circle{fill:none;stroke-width:3}
#guia-card .g-prog .p-track{stroke:rgba(31,36,33,.12)}
#guia-card .g-prog .p-arc{stroke:var(--guia-teal);stroke-linecap:round;
  transition:stroke-dashoffset .4s cubic-bezier(.22,.9,.3,1)}
#guia-card .g-prog text{font:600 8.5px PlexMono,monospace;fill:var(--texto,#1F2421)}

/* ── overlays propios de la app bajo la guía: el velo de la guía ya oscurece;
   sus backdrops quedan transparentes e inertes (nunca display:none — deben
   seguir existiendo para ?libre y para cerrarFicha) */
body.guia-on .velo,
body.guia-on .sesion-velo{background:transparent!important;backdrop-filter:none!important;pointer-events:none}
body.guia-on .sesion-modal{pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  #guia-card .g-cuerpo{transition:none}
}

/* ── marcas de la cadena destacada (paso 18): anillo + rótulo de rol ──
   Gramática del spotlight: ARO FIRME (el encierro no parpadea) + halo que
   respira en ::after, con pulso escalonado 1→2→3. El teal es la voz de la
   guía; los roles se nombran, no se colorean. */
.gcad-marca{position:relative;width:0;height:0;pointer-events:none}
.gcad-anillo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:38px;height:38px;border:2.5px solid var(--guia-teal);border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.gcad-anillo::after{content:'';position:absolute;inset:-8px;border:4px solid var(--guia-teal);
  border-radius:50%;opacity:.22;animation:guia-respira 2.4s ease-in-out infinite alternate}
.gcad-p2 .gcad-anillo::after{animation-delay:.8s}
.gcad-p3 .gcad-anillo::after{animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){.gcad-anillo::after{animation:none;opacity:.38}}
.gcad-chip{position:absolute;white-space:nowrap;background:var(--fondo,#fff);
  border-radius:8px;padding:5px 9px 6px;
  box-shadow:0 2px 10px rgba(31,36,33,.22),0 0 0 1px var(--borde,#E8E8E6);
  display:flex;flex-direction:column;line-height:1.15}
.gcad-chip i{font:600 9px PlexMono,monospace;letter-spacing:.13em;font-style:normal;
  color:var(--guia-teal-txt)}
.gcad-chip b{font:600 12px/1.2 Inter,sans-serif;color:var(--texto,#1F2421)}

/* durante el cuadro de la cadena, el mapa es una FOTO: ni hovers del canvas
   ni widgets vivos dentro del agujero (un click en ± o en un mes lo destruiría) */
body.guia-cadena-on #mapa .maplibregl-canvas-container{pointer-events:none}
body.guia-cadena-on #linea-t,
body.guia-cadena-on #mapa .maplibregl-ctrl-bottom-right .maplibregl-ctrl,
body.guia-cadena-on #btn-pais,
body.guia-cadena-on #leyenda{pointer-events:none}

/* ── modo AUTO (?v2&auto): transición sola para proyectar o grabar —
   la tarjeta va limpia, sin botones; Esc sale igual */
body.guia-auto #guia-card .g-pie{display:none}
body.guia-auto #guia-card{padding-bottom:18px}