/* ============================================================
   demo-guiada.css — Burbuja "Mira cómo funciona" y pantalla de la demo
   guiada (js/demo-guiada.js). Aparte de styles.css para poder cargarla también
   en la web de marketing. Las variables del tema llevan un valor por defecto
   para cuando se usa fuera de la app.
   ============================================================ */

/* ══ DEMO GUIADA (js/demo-guiada.js) ══
   Burbuja "Mira cómo funciona" (sin sesión): cristal oscuro, play con un aro
   naranja que se expande y una deriva lenta por el centro de la pantalla. La ✕
   la quita hasta que se vuelva a abrir la app. */
.rfdb { position: fixed; left: 50%; top: 52%; z-index: 9000; transform: translate(-50%, -50%); }
.rfdb[hidden] { display: none; }
/* Lo que flota es .rfdb-mov, con la ✕ dentro: así se mueven juntas. */
.rfdb-mov { position: relative; animation: rfdbDeriva 9s ease-in-out infinite; }
/* Mismo borde que los botones de foto: placa biselada en --foto-borde, relleno
   --foto-fondo y el brillo de drop-shadow, todo del tema del día. */
.rfdb-btn { --cut: 12px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 12px; cursor: pointer;
  background: none; border: 0; color: #eef0fb; font-family: inherit; text-align: left; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 4px rgba(var(--foto-rgb, 45,212,191), 0.85)) drop-shadow(0 0 10px var(--foto-glow1, rgba(45,212,191,0.45))); }
.rfdb-btn::before, .rfdb-btn::after { content: ''; position: absolute; z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.rfdb-btn::before { inset: 0; background: var(--foto-borde, #2dd4bf); }
.rfdb-btn::after { inset: 2.5px; background: var(--foto-fondo, #1f1f39); }
.rfdb-pl { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #ff6b35, #a855f7); }
.rfdb-pl::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,107,53,0.6); animation: rfdbAro 1.8s ease-out infinite; }
.rfdb-tx b { display: block; font-size: 14.5px; font-weight: 900; }
.rfdb-tx small { font-size: 11.5px; font-weight: 700; color: #8b8fae; }
.rfdb-tx small em { font-style: normal; font-weight: 900; color: #f7c948; }
/* Etiqueta DEMO arriba a la izquierda, dentro de .rfdb-mov: flota con la
   burbuja. Del color del borde (tema del día). */
.rfdb-tag { position: absolute; top: -9px; left: 16px; z-index: 2; padding: 3px 8px; border-radius: 5px;
  background: var(--foto-borde, #2dd4bf); color: var(--foto-badge-txt, #06201c); font: 900 10px/1 system-ui, sans-serif; letter-spacing: 1.4px;
  box-shadow: 0 0 10px var(--foto-glow1, rgba(45,212,191,0.45)); pointer-events: none; }
.rfdb-x { position: absolute; top: -11px; right: -11px; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #14142a;
  background: #f7c948; color: #2a2008; font: 900 12px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); -webkit-tap-highlight-color: transparent; }
@keyframes rfdbDeriva { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-16px, -8px); } 50% { transform: translate(0, -14px); } 75% { transform: translate(16px, -6px); } }
@keyframes rfdbAro { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* Pantalla completa de la demo: arriba el progreso, el tiempo que queda, voz,
   subtítulos y Salir; en medio la app (iframe escalado); abajo el subtítulo. */
body.rfd-abierta { overflow: hidden; }
.rfd { position: fixed; inset: 0; z-index: 100000; background: #000; display: flex; flex-direction: column; }
.rfd-top { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; background: #0b0b14; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rfd-bar { height: 4px; border-radius: 2px; background: #1c1d38; overflow: hidden; }
.rfd-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-a, #2dd4bf), var(--brand-b, #22d3ee)); transition: width .25s linear; }
.rfd-ctl { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rfd-t { margin-right: auto; font-size: 13px; font-weight: 800; color: #8b8fae; font-variant-numeric: tabular-nums; }
.rfd-t b { color: #fff; }
.rfd-b { height: 32px; min-width: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: #14142a; color: #eef0fb;
  font: 900 12px/1 system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rfd-b[aria-pressed="false"] { color: #6b6f8f; }
.rfd-salir { background: #2a1416; border-color: rgba(248,113,113,0.45); color: #fca5a5; }
/* En el móvil llena el ancho; en una pantalla ancha (ordenador, tableta) se
   queda del tamaño de un móvil, centrada, en vez de ampliarse varias veces. */
.rfd-pant { position: relative; flex: 1; width: 100%; max-width: 460px; margin: 0 auto; overflow: hidden; }
.rfd-top > * { max-width: 460px; margin-left: auto; margin-right: auto; }
.rfd-sub { max-width: 436px; margin: 0 auto; }
.rfd-pant iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.rfd-sub { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 2; padding: 10px 14px; border-radius: 12px;
  background: rgba(5,5,12,0.86); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; }
.rfd-sub:empty, .rfd-sub.off { display: none; }
.rfd-fin { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,12,0.78); }
.rfd-fin[hidden] { display: none; }
.rfd-fin-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
  background: #14142a; color: #c8cbe0; font: 900 12px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
.rfd-fin-in { position: relative; width: min(100%, 340px); display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; border-radius: 18px; background: #0b0b14; border: 1px solid rgba(var(--brand-a-rgb, 45,212,191), 0.4); text-align: center; }
.rfd-fin-in b { font-size: 22px; font-weight: 900; }
.rfd-fin-in span { font-size: 14px; color: #a3a7c4; }
.rfd-cta { height: 48px; border: 0; border-radius: 12px; font: 900 16px/1 system-ui, sans-serif; color: #14141f; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-a, #2dd4bf), var(--brand-m, #22d3ee) var(--brand-mp, 50%), var(--brand-b, #22d3ee)); }
.rfd-otra { border: 0; background: none; color: #a3a7c4; font: 800 13px system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rfdb-mov, .rfdb-pl::after { animation: none; } }