/* assets/css/viaje-pa.css — Viaje de Power Apps (cursos.html). Acompaña a assets/js/viaje-pa.js.
   Reutiliza de viaje-bi.css la cáscara y el layout (bi-shell/bi-top/bi-rail/bi-steps, bi-pin, bi-canvas, bi-flujo, .xf) y de
   viaje.css el hero, .formula-msg*, .reveal, .cursor-ico y .click-ripple. Magenta = --c (cursos.html lo fija por herramienta).
   La cáscara imita Power Apps Studio; las 3 pantallas de la app (login, formulario, galería) viven en UN marco de tableta
   (#paFrame) y son claras (la app); el flujo es un diagrama de tarjetas claras sobre el escenario oscuro. */
.pa-root{ --bi:var(--c,#c026d3); }
.pa-root .cl{ display:block; width:max-content; max-width:100%; clip-path:inset(0 100% 0 0); }
.pa-root .ik{ display:inline-flex; width:14px; height:14px; flex:none; }
.pa-root .ik svg{ width:100%; height:100%; }
.pa-root .bi-ver, .pa-root .viaje-btn.solid{ color:#fff; }
.pa-root .bi-tab.active b{ color:#fff; }
.pa-root .bi-rv.active{ background-color:rgba(192,38,211,.16); }

/* ---------- cáscara: Power Apps Studio (app, propiedad con fórmula, pantallas) ---------- */
.pa-root .bi-file b{ font-family:var(--body); font-size:13px; font-weight:600; padding:0; background-color:transparent; color:var(--text); }
.pa-ico{ width:20px; height:20px; color:#e879f9; display:flex; }
.pa-ico svg{ width:100%; height:100%; }
.pa-st-t{ font-family:var(--mono); font-size:10.5px; color:#e879f9; background-color:rgba(192,38,211,.16); padding:2px 8px; border-radius:4px; }
.pa-prop{ flex:none; display:flex; align-items:center; gap:10px; padding:0 16px; min-width:120px; background-color:var(--panel-2); border-left:1px solid var(--line); border-right:1px solid var(--line); font-family:var(--mono); font-size:12.5px; color:#e879f9; }
.pa-prop span{ font-size:10px; color:var(--text-faint); }

/* ---------- marco de tableta con las pantallas de la app ---------- */
.pa-frame{ position:absolute; left:98px; top:40px; transform-origin:0 0; }
.pa-scrname{ position:absolute; left:6px; top:-24px; display:inline-grid; font-size:12px; color:var(--text-dim); font-family:var(--mono); }
.pa-scrname b{ grid-area:1/1; font-weight:500; opacity:0; }
.pa-bz, .ph-bz{ position:relative; background-color:#0b0e14; border-radius:26px; padding:12px; box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 0 0 2px #1d2530; }
.pa-bz::before, .ph-bz::before{ content:""; position:absolute; top:5px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background-color:#1d2530; }
.pa-scr, .ph-scr{ position:relative; width:880px; height:495px; border-radius:12px; overflow:hidden; background-color:#0f131a; color:#e6ebf3; font-family:var(--body); }
.pa-s{ position:absolute; inset:0; background-color:#0f131a; }
.pa-root .av{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; font-style:normal; font-family:var(--mono); font-size:11px; background-color:rgba(192,38,211,.18); color:#e879f9; border:1px solid rgba(192,38,211,.4); }
.pa-cur{ color:#fff; z-index:30; filter:drop-shadow(0 0 1px #000) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.pa-root .click-ripple{ border-color:#c026d3; z-index:29; }
.pa-root .xf{ place-items:center; }

/* ---------- pantalla: login ---------- */
.lg{ display:flex; }
.lg-brand{ flex:none; width:400px; position:relative; overflow:hidden; color:#fff; padding:64px 44px; background:linear-gradient(145deg,#0f1f3d 0%,#4a1766 58%,#c026d3 125%); }
.lg-logo{ width:54px; height:54px; border-radius:14px; background-color:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.lg-logo svg{ width:28px; height:28px; }
.lg-brand h2{ font-family:var(--display); font-size:40px; font-weight:700; margin-bottom:10px; }
.lg-brand p{ font-size:15px; line-height:1.55; color:#ecdcf3; max-width:280px; }
.lg-brand i{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.18); }
.lg-brand .c1{ width:300px; height:300px; right:-110px; bottom:-90px; }
.lg-brand .c2{ width:180px; height:180px; right:-40px; bottom:-20px; background-color:rgba(255,255,255,.05); }
.lg-card{ flex:1; position:relative; display:grid; place-items:center; }
.lg-in, .lg-hello{ grid-area:1/1; width:340px; display:flex; flex-direction:column; gap:10px; }
.lg-org{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#e879f9; font-weight:600; }
.lg-in h3, .lg-hello h3{ font-family:var(--display); font-size:27px; font-weight:700; color:#f1f5fb; }
.lg-in label{ font-size:12px; color:#94a3b8; margin-top:6px; }
.lg-in small{ font-size:11.5px; color:#6b7a90; text-align:center; margin-top:4px; }
.lg-field{ height:42px; border:1px solid #2a3342; border-radius:8px; background-color:#171d27; display:flex; align-items:center; padding:0 12px; font-size:13.5px; }
.lg-btn{ height:44px; border-radius:8px; background-color:#c026d3; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; margin-top:6px; }
.lg-hello{ align-items:center; text-align:center; }
.lg-hello .av{ width:64px; height:64px; font-size:19px; }
.lg-rol{ font-size:12px; color:#e879f9; background-color:rgba(192,38,211,.18); border:1px solid rgba(192,38,211,.4); padding:3px 12px; border-radius:12px; }
.lg-perm{ list-style:none; align-self:stretch; display:flex; flex-direction:column; gap:7px; margin:6px 0 2px; text-align:left; }
.lg-perm li{ display:flex; align-items:center; gap:9px; font-size:13px; color:#cbd5e1; padding:8px 12px; background-color:#171d27; border:1px solid #2a3342; border-radius:8px; }
.lg-perm li .ik{ width:16px; height:16px; color:#5fe6cf; }
.lg-perm li.no{ color:#6b7a90; } .lg-perm li.no .ik{ color:#6b7a90; }
.lg-perm em{ font-style:normal; font-size:11.5px; color:#6b7a90; }
.lg-hello .lg-btn{ align-self:stretch; }

/* ---------- pantalla: formulario ---------- */
.fm-h, .gl-h{ height:56px; background-color:#1c1233; color:#fff; display:flex; align-items:center; gap:14px; padding:0 24px; }
.fm-back{ font-size:26px; line-height:1; color:#c7d0e0; }
.fm-h b, .gl-h b{ font-family:var(--display); font-size:17px; font-weight:600; }
.fm-us{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:#c7d0e0; }
.fm-us .av{ width:28px; height:28px; font-size:10px; }
.fm-body{ display:flex; gap:22px; padding:20px 24px; }
.fm-f{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-content:start; }
.fm-c.w2, .fm-btns.w2{ grid-column:1/-1; }
.fm-c label{ display:block; font-size:11.5px; color:#94a3b8; margin-bottom:5px; }
.fm-c label b{ float:right; color:#e879f9; font-size:14px; font-weight:700; }
.fm-in{ position:relative; height:40px; border:1px solid #2a3342; background-color:#171d27; border-radius:8px; display:flex; align-items:center; gap:8px; padding:0 34px 0 12px; font-size:13px; }
.fm-in .cal{ color:#e879f9; }
.fm-sel .ch{ margin-left:auto; margin-right:-18px; color:#94a3b8; font-size:12px; }
.fm-ok{ position:absolute; right:10px; top:50%; margin-top:-8px; width:16px; height:16px; border-radius:50%; background-color:#0b7a6b; color:#fff; display:flex; align-items:center; justify-content:center; }
.fm-ok .ik{ width:10px; height:10px; }
.fm-pop{ position:absolute; left:0; top:44px; width:100%; background-color:#171d27; border:1px solid #2a3342; border-radius:8px; box-shadow:0 10px 26px rgba(15,31,61,.18); z-index:6; padding:4px; display:flex; flex-direction:column; }
.fm-pop span{ padding:7px 10px; border-radius:5px; font-size:12.5px; background-color:rgba(192,38,211,0); }
.fm-sl{ position:relative; height:6px; background-color:#2a3342; border-radius:3px; margin:16px 8px 6px; }
.fm-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background-color:#c026d3; border-radius:3px; }
.fm-th{ position:absolute; left:0; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background-color:#fff; border:3px solid #c026d3; box-shadow:0 2px 6px rgba(15,31,61,.25); }
.fm-tg{ position:relative; width:100px; height:32px; border-radius:16px; background-color:#2a3342; border:1px solid #2a3342; display:flex; align-items:center; justify-content:center; padding-left:22px; font-size:12px; color:#cbd5e1; }
.fm-tg i{ position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background-color:#fff; box-shadow:0 1px 4px rgba(15,31,61,.3); }
.fm-at{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px dashed #c026d3; border-radius:8px; background-color:rgba(192,38,211,.1); font-size:12.5px; color:#cbd5e1; }
.fm-at .ik{ color:#e879f9; }
.fm-at em{ font-style:normal; color:#6b7a90; font-size:11px; }
.fm-btns{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.fm-no{ padding:10px 18px; border:1px solid #2a3342; border-radius:8px; color:#b4bfd0; background-color:#171d27; font-size:13px; }
.fm-send{ min-width:160px; padding:10px 20px; border-radius:8px; background-color:#c026d3; color:#fff; font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; }
.fm-r{ flex:none; width:290px; background-color:#171d27; border:1px solid #2a3342; border-radius:12px; padding:16px; align-self:flex-start; display:flex; flex-direction:column; gap:6px; }
.rs-h{ font-family:var(--display); font-weight:600; font-size:14px; margin-bottom:4px; }
.rs-r{ display:flex; justify-content:space-between; font-size:12px; padding:7px 0; border-bottom:1px solid #232b39; }
.rs-r span{ color:#94a3b8; }
.rs-r b{ font-weight:600; color:#f1f5fb; }
.rs-ap{ display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px; background-color:rgba(124,58,237,.14); border-radius:8px; font-size:11.5px; color:#b4bfd0; }
.rs-ap .ik{ color:#a78bfa; width:16px; height:16px; }
.rs-p{ margin-top:8px; font-size:11.5px; color:#94a3b8; }
.rs-p b{ color:#f1f5fb; }
.rs-bar{ height:6px; background-color:#2a3342; border-radius:3px; margin-top:6px; overflow:hidden; }
.rs-bar i{ display:block; width:0; height:100%; background-color:#0b7a6b; border-radius:3px; }
.fm-done{ position:absolute; inset:0; background-color:rgba(8,11,16,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; z-index:20; }
.fm-done .ik{ width:54px; height:54px; border-radius:50%; background-color:#0b7a6b; padding:14px; margin-bottom:6px; }
.fm-done b{ font-family:var(--display); font-size:22px; }
.fm-done span:last-child{ font-size:13px; color:#c7d0e0; }

/* ---------- pantalla: galería ---------- */
.gl-tool{ display:flex; align-items:center; gap:14px; padding:14px 24px 10px; }
.gl-search{ position:relative; width:250px; height:38px; border:1px solid #2a3342; background-color:#171d27; border-radius:19px; display:flex; align-items:center; gap:8px; padding:0 14px; color:#94a3b8; }
.gl-ph{ color:#6b7a90; font-size:13px; }
.gl-q{ position:absolute; left:38px; top:50%; transform:translateY(-50%); font-size:13px; color:#e6ebf3; }
.gl-chips{ display:flex; gap:8px; }
.gl-chip{ padding:7px 14px; border:1px solid; border-radius:16px; font-size:12.5px; white-space:nowrap; }
.gl-chip b{ font-family:var(--mono); font-weight:500; margin-left:3px; }
.gl-sort{ margin-left:auto; padding:7px 14px; border:1px solid #2a3342; border-radius:8px; background-color:#171d27; font-size:12.5px; color:#b4bfd0; display:inline-grid; white-space:nowrap; }
.gl-list{ padding:4px 24px; position:relative; }
.gl-row{ box-sizing:border-box; height:54px; display:grid; grid-template-columns:44px 1fr 90px 130px; align-items:center; gap:14px; padding:0 14px; background-color:#171d27; border-bottom:6px solid #0f131a; background-clip:padding-box; border-radius:10px; }
.gl-ic{ width:36px; height:36px; border-radius:9px; background-color:rgba(192,38,211,.18); color:#e879f9; display:flex; align-items:center; justify-content:center; }
.gl-ic .ik{ width:18px; height:18px; }
.gl-t{ min-width:0; }
.gl-t b{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gl-t span{ font-size:11.5px; color:#94a3b8; }
.gl-nuevo{ font-style:normal; font-size:9.5px; background-color:#c026d3; color:#fff; padding:1px 7px; border-radius:8px; font-weight:600; }
.gl-im{ font-family:var(--mono); font-size:13px; text-align:right; color:#f1f5fb; }
.gl-st{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:12px; width:max-content; }
.gl-st .ik{ width:13px; height:13px; }
.gl-st.ok{ background-color:rgba(20,184,166,.16); color:#5fe6cf; }
.gl-st.pen{ background-color:rgba(223,179,90,.16); color:#dfb35a; }
.gl-st.no{ background-color:rgba(220,38,38,.18); color:#ff9b9b; }

/* ---------- escena: el flujo (diagrama de tarjetas claras) ---------- */
.pa-flow{ position:absolute; left:520px; top:26px; width:570px; }
.fl-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fl-h b{ font-family:var(--display); font-size:15px; }
.fl-run{ font-size:11.5px; color:var(--text-dim); border:1px solid var(--line); padding:3px 12px; border-radius:12px; display:inline-grid; }
.fl-st{ position:relative; display:grid; grid-template-columns:250px 290px; gap:20px; align-items:center; }
.fl-n{ position:relative; display:flex; align-items:center; gap:12px; height:52px; padding:0 14px; background-color:#171d27; color:#e6ebf3; border-radius:10px; border-left:5px solid var(--nc); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.fl-i{ width:30px; height:30px; border-radius:8px; background-color:var(--nc); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.fl-i .ik{ width:17px; height:17px; }
.fl-n b{ display:block; font-size:13px; }
.fl-n div span{ font-size:11px; color:#94a3b8; }
.fl-ok{ position:absolute; right:-9px; top:-9px; width:20px; height:20px; border-radius:50%; background-color:#0b7a6b; color:#fff; display:flex; align-items:center; justify-content:center; }
.fl-ok .ik{ width:11px; height:11px; }
.fl-ln{ display:block; width:2px; height:26px; margin-left:124px; background-color:var(--bi); opacity:0; }
#fLn4{ height:84px; }
.fl-pv{ background-color:#171d27; color:#e6ebf3; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:8px 12px; font-size:11.5px; }
.sp-h{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:11px; color:#4fd1d4; margin-bottom:5px; }
.sp-r{ display:grid; grid-template-columns:44px 1fr 56px auto; gap:8px; align-items:center; background-color:rgba(3,131,135,.18); border-radius:5px; padding:5px 8px; font-size:11.5px; }
.sp-r em{ font-style:normal; font-size:9.5px; background-color:#038387; color:#fff; padding:1px 7px; border-radius:8px; }
#pv5{ padding:6px 8px; }
#pv5 .sp-r{ grid-template-columns:44px 1fr auto; }
#pv5 .est b{ font-weight:600; font-size:11px; }
#pv5 .est .a{ color:#dfb35a; } #pv5 .est .b{ color:#5fe6cf; }
.tm-t{ display:flex; align-items:center; gap:10px; }
.tm-t > .ik{ width:30px; height:30px; padding:6px; border-radius:8px; background-color:#5b5fc7; color:#fff; }
.tm-t b{ display:block; font-size:11.5px; }
.tm-t div span{ font-size:11px; color:#b4bfd0; }
.fl-st4 .fl-ap{ position:absolute; left:270px; top:-6px; width:290px; padding:10px 12px; }
.ap-h{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:12px; color:#6cb6ff; margin-bottom:6px; }
.ap-h .ik{ width:16px; height:16px; }
.fl-ap p{ font-size:12px; line-height:1.5; margin-bottom:8px; }
.fl-ap p span{ color:#94a3b8; font-size:11px; }
.ap-b{ display:flex; gap:8px; }
.ap-si{ padding:5px 16px; border-radius:5px; background-color:#0f6cbd; color:#fff; font-weight:600; border:1px solid #0f6cbd; }
.ap-no{ padding:5px 16px; border-radius:5px; border:1px solid #2a3342; color:#b4bfd0; }
.ap-r{ display:flex; align-items:center; gap:6px; margin-top:8px; color:#5fe6cf; font-weight:600; font-size:12px; }
.ap-r .ik{ width:13px; height:13px; }
.pa-ficha{ position:absolute; left:0; top:0; z-index:25; width:176px; height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; background-color:#171d27; color:#e6ebf3; border-radius:17px; border:2px solid #c026d3; box-shadow:0 10px 26px rgba(0,0,0,.5); pointer-events:none; white-space:nowrap; font-size:11.5px; }
.pa-ficha .ik{ width:16px; height:16px; color:#c026d3; }
.pa-ficha b{ font-size:12px; }
.pa-ficha span:last-child{ color:#94a3b8; }

/* ---------- estado final (reduced-motion / GSAP caído) ---------- */
.pa-final .lg-in, .pa-final .fm-done, .pa-final .fm-pop, .pa-final .no-final, .pa-final .click-ripple, .pa-final .gl-ph{ display:none; }
.pa-final .fm-ok{ opacity:1; }

/* ---------- flujo vertical (teléfono táctil y estático): cada pantalla es una tarjeta apilada ---------- */
.bi-flujo .bi-canvas{ display:flex; flex-direction:column; }
.bi-flujo .pa-frame, .bi-flujo .pa-bz, .bi-flujo .pa-scr, .bi-flujo .ph-bz, .bi-flujo .ph-scr{ display:contents; }
.bi-flujo .pa-scrname, .bi-flujo .pa-ficha, .bi-flujo .pa-cur{ display:none; }
.bi-flujo .pa-s{ position:relative; inset:auto; border-radius:14px; overflow:hidden; margin:4px 0 30px; box-shadow:0 14px 40px rgba(0,0,0,.45); transform:none !important; background-color:#0f131a; color:#e6ebf3; }
.bi-flujo #sLogin{ order:11; } .bi-flujo #sForm{ order:21; } .bi-flujo #paFlow{ order:31; } .bi-flujo #sGal{ order:41; }
.bi-flujo .viaje-msg{ margin-bottom:12px; }
.bi-flujo .lg{ flex-direction:column; }
.bi-flujo .lg-brand{ width:auto; padding:28px 24px; }
.bi-flujo .lg-brand h2{ font-size:30px; }
.bi-flujo .lg-card{ padding:26px 18px; }
.bi-flujo .lg-in, .bi-flujo .lg-hello{ width:100%; }
.bi-flujo .fm-body{ flex-direction:column; padding:16px 16px 20px; }
.bi-flujo .fm-f{ grid-template-columns:1fr; }
.bi-flujo .fm-r{ width:auto; align-self:stretch; }
.bi-flujo .fm-done{ position:absolute; }
.bi-flujo .fm{ min-height:0; position:relative; }
.bi-flujo .gl-h, .bi-flujo .fm-h{ padding:0 16px; }
.bi-flujo .gl-tool{ flex-wrap:wrap; padding:12px 14px 8px; }
.bi-flujo .gl-search{ width:100%; }
.bi-flujo .gl-chips{ flex-wrap:wrap; }
.bi-flujo .gl-sort{ margin-left:0; }
.bi-flujo .gl-list{ padding:4px 12px 14px; }
.bi-flujo .gl-row{ grid-template-columns:34px 1fr 62px 84px; gap:8px; padding:0 8px; }
.bi-flujo .gl-st{ font-size:10.5px; padding:3px 7px; }
.bi-flujo .gl-im{ font-size:11.5px; }
.bi-flujo .pa-flow{ position:relative; left:auto; top:auto; width:100%; margin:4px 0 30px; }
.bi-flujo .fl-st{ grid-template-columns:1fr; gap:8px; }
.bi-flujo .fl-st4 .fl-ap{ position:relative; left:auto; top:auto; width:auto; }
.bi-flujo .fl-ln{ margin-left:30px; }
.bi-flujo #fLn4{ height:26px; }
.bi-flujo .fl-ln{ opacity:1; }

/* ---------- héroe de Power Apps: mitad texto, mitad la app (pantalla de Consulta en la tableta), estructura hb-* de viaje-bi.css ---------- */
.hb-frame.ph-frame{ aspect-ratio:904/519; overflow:visible; background:none; border:0; box-shadow:none; }
.hb-cv.ph-cv{ width:904px; height:519px; }
.ph-cv .gl-chip, .ph-cv .gl-sort, .ph-cv .gl-search{ transition:border-color .2s; cursor:pointer; }
.ph-cv .gl-chip:hover, .ph-cv .gl-sort:hover, .ph-cv .gl-search:hover{ border-color:#c026d3; }
.ph-cv .hb-pulse{ animation:hbPulsePa 1.6s ease-out infinite; }
@keyframes hbPulsePa{ 0%{ box-shadow:0 0 0 0 rgba(192,38,211,.6); } 100%{ box-shadow:0 0 0 12px rgba(192,38,211,0); } }
.ph-hero .hb-go{ background-color:var(--c,#c026d3); border-color:var(--c,#c026d3); color:#fff; }
.pa-final .ph-scr .gl-ph{ display:inline; }
.bi-flujo .hb-frame.ph-frame{ aspect-ratio:auto; }
.bi-flujo .hb-cv.ph-cv{ width:auto; height:auto; }
.bi-flujo .ph-hero .viaje-hero-title{ font-size:clamp(26px,7.4vw,38px); }