/* assets/css/viaje-bi.css — Viaje de Power BI (cursos.html). Acompaña a assets/js/viaje-bi.js.
   Hereda de viaje.css: .viaje-root (a todo el ancho), .viaje-hero*, .viaje-btn, .formula-msg*, .reveal,
   .cursor-ico y .click-ripple. El amarillo sale de --c (cursos.html lo fija por herramienta).
   Dos mundos: escritorio = un lienzo fijo de 1100×620 escalado por JS dentro de un pin (.bi-canvas);
   teléfono/estático = clase .bi-flujo, las escenas fluyen en vertical (reglas al final). */
.bi-root{ --bi:var(--c,#f2c94c); --ok:#5fe6cf; --warn:#dfb35a; --bad:#ff8787; --tbl:#f2c94c; }
.bi-root .mono{ font-family:var(--mono); }

/* ---------- pin y lienzo ---------- */
.bi-pin{ position:relative; height:calc(100vh - var(--viaje-nav-h)); overflow:hidden; background:radial-gradient(ellipse at center, rgba(20,24,34,.4), #05070a 80%); }
.bi-pin::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:24px 24px; opacity:.55; pointer-events:none; }
.bi-canvas{ position:absolute; left:0; top:0; width:1100px; height:620px; transform-origin:0 0; }
.bi-escena{ position:absolute; inset:0; }
body.bi-on .bi-root .viaje-msg{ display:none; }
.bi-root .xf{ display:inline-grid; }
.bi-root .xf > *{ grid-area:1/1; }
.bi-root .xf .b{ opacity:0; }
.bi-root .xf .ok{ color:var(--ok); } .bi-root .xf .warn{ color:var(--warn); } .bi-root .xf .bad{ color:var(--bad); }
.bi-root b{ font-weight:600; }

/* ---------- cáscara: ventana de Power BI Desktop (fija; solo cambia el contenido) ---------- */
.bi-shell{ display:none; }
body.bi-on .bi-shell{ display:block; position:fixed; top:var(--viaje-nav-h); left:0; right:0; bottom:0; z-index:40; pointer-events:none; opacity:0; transition:opacity .4s ease; }
body.bi-hoja .bi-shell{ opacity:1; }
body.bi-hoja .bi-shell > *{ pointer-events:auto; }
.bi-top{ position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:stretch; background:var(--panel); border-bottom:1px solid var(--line); }
.bi-file{ flex:none; display:flex; align-items:center; gap:9px; padding:0 14px; min-width:0; background:var(--panel-2); border-right:1px solid var(--line); font-size:12.5px; color:var(--text); white-space:nowrap; }
.bi-file-ico{ width:20px; height:20px; color:var(--bi); display:flex; }
.bi-file-ico svg{ width:100%; height:100%; }
.bi-file b{ font-family:var(--mono); font-weight:500; font-size:11px; color:var(--bi); padding:3px 8px; border-radius:4px; background:rgba(242,201,76,.12); }
.bi-fx{ flex:1; min-width:0; display:flex; align-items:stretch; }
.bi-fx-ico{ width:46px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-style:italic; font-size:14px; color:var(--blue-bright); background:var(--blue-soft); border-right:1px solid var(--blue-dim); }
.bi-fx-stack{ position:relative; flex:1; min-width:0; overflow:hidden; }
.bi-txt{ position:absolute; left:18px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--display); font-weight:600; font-size:clamp(15px,1.7vw,21px); color:var(--text); clip-path:inset(0 100% 0 0); }
.bi-ver{ display:inline-flex; align-items:center; gap:8px; align-self:center; flex:none; height:32px; margin:0 12px; padding:0 14px; border-radius:4px; background-color:var(--bi); color:#0a0d12; font-weight:600; font-size:12.5px; transition:background-color .2s, transform .15s; }
.bi-ver svg{ width:13px; height:13px; }
.bi-ver:hover{ background-color:var(--c-bright,#f6d97a); transform:translateY(-1px); }

.bi-rail{ position:absolute; left:0; top:48px; bottom:36px; width:56px; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:10px; background:var(--panel); border-right:1px solid var(--line); }
.bi-rv{ width:50px; padding:9px 0 7px; display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:transparent; color:var(--text-faint); font-family:var(--body); font-size:9.5px; cursor:pointer; position:relative; transition:color .2s, background-color .2s; border-radius:6px; }
.bi-rv svg{ width:21px; height:21px; }
.bi-rv:hover{ color:var(--text); background-color:var(--panel-2); }
.bi-rv.active{ color:var(--bi); background-color:rgba(242,201,76,.1); }
.bi-rv.active::before{ content:""; position:absolute; left:-3px; top:8px; bottom:8px; width:3px; border-radius:2px; background-color:var(--bi); }

.bi-steps{ position:absolute; left:0; right:0; bottom:0; height:36px; padding-left:56px; display:flex; align-items:flex-end; background:var(--panel); border-top:1px solid var(--line); }
.bi-tab{ height:34px; padding:0 18px 0 14px; display:flex; align-items:center; gap:8px; font-family:var(--body); font-size:12.5px; color:var(--text-faint); background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer; position:relative; transition:color .2s, background-color .2s; }
.bi-tab b{ font-family:var(--mono); font-size:10px; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--text-faint); }
.bi-tab + .bi-tab::before{ content:""; position:absolute; left:-4px; top:50%; width:6px; height:6px; margin-top:-3px; border-top:1.5px solid var(--text-faint); border-right:1.5px solid var(--text-faint); transform:rotate(45deg); opacity:.6; }
.bi-tab:hover{ color:var(--text); background-color:var(--panel-2); }
.bi-tab.active{ color:var(--text); font-weight:600; background-color:var(--bg); border-bottom-color:var(--bi); }
.bi-tab.active b{ background-color:var(--bi); border-color:var(--bi); color:#0a0d12; }
.bi-status{ margin-left:auto; align-self:center; padding-right:18px; font-size:11px; color:var(--text-faint); }

/* ---------- ventana genérica y piezas comunes ---------- */
.bi-win{ background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.35); overflow:hidden; }
.bi-root .lb{ font-size:11px; color:var(--text-faint); }
.bi-root .ik{ display:inline-flex; width:14px; height:14px; flex:none; }
.bi-root .ik svg{ width:100%; height:100%; }
.bi-root .r-nl.xf{ display:grid; }

/* ---------- 1 · TRANSFORMAR (Power Query) ---------- */
.q-win{ position:absolute; left:40px; top:105px; width:1020px; height:410px; display:flex; flex-direction:column; }
.q-bar{ flex:none; height:38px; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--line); font-size:12px; color:var(--text-faint); }
.q-bar b{ color:var(--text); }
.q-dots{ display:flex; gap:5px; } .q-dots i{ width:9px; height:9px; border-radius:50%; background-color:var(--line); display:block; }
.q-tabs{ margin-left:auto; display:flex; gap:4px; }
.q-tabs span{ padding:4px 10px; border-radius:4px; } .q-tabs .on{ background-color:rgba(242,201,76,.12); color:var(--bi); }
.q-m{ position:relative; flex:none; height:34px; border-bottom:1px solid var(--line); background-color:var(--panel-2); font-family:var(--mono); font-size:12.5px; }
.q-m-fx{ position:absolute; left:0; top:0; bottom:0; width:42px; display:flex; align-items:center; justify-content:center; font-style:italic; font-weight:700; color:var(--blue-bright); background-color:var(--blue-soft); border-right:1px solid var(--blue-dim); }
.q-m .m{ position:absolute; left:56px; right:12px; top:50%; transform:translateY(-50%); opacity:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-dim); }
.q-body{ flex:1; display:flex; min-height:0; }
.q-table{ flex:1; min-width:0; padding:16px 16px 0; }
.q-row{ display:grid; grid-template-columns:1fr .8fr 1.35fr .95fr 1.05fr .85fr; height:34px; align-items:center; border-bottom:1px solid var(--line-soft); font-size:12.5px; color:var(--text); }
.q-c{ padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.q-r{ text-align:right; }
.q-head{ height:38px; background-color:var(--panel-2); color:var(--text-dim); font-weight:600; border:1px solid var(--line); border-radius:6px 6px 0 0; margin-bottom:0; }
.q-head .q-c{ display:flex; align-items:center; gap:6px; height:100%; }
.q-head .q-r{ justify-content:flex-end; }
.bi-root .g{ font-style:normal; font-family:var(--mono); font-size:9px; font-weight:500; padding:1px 4px; border-radius:3px; border:1px solid var(--line); color:var(--text-faint); }
.bi-root .g.dl{ display:inline-grid; }
.q-filt{ width:12px; height:12px; color:var(--bi); display:inline-flex; margin-left:2px; }
.q-filt svg{ width:100%; height:100%; }
.dl{ display:inline-grid; } .dl > *{ grid-area:1/1; } .dl .l{ opacity:0; }
.q-null{ font-family:var(--mono); font-style:italic; font-size:11px; color:var(--text-faint); border:1px dashed var(--text-faint); border-radius:4px; padding:1px 6px; }
.q-steps{ flex:none; width:262px; border-left:1px solid var(--line); padding:14px 12px; display:flex; flex-direction:column; gap:4px; }
.q-steps-h{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:0 6px 8px; }
.q-step{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:6px; font-size:12.5px; color:var(--text-dim); }
.q-step i{ width:17px; height:17px; border-radius:50%; background-color:rgba(242,201,76,.16); color:var(--bi); display:flex; align-items:center; justify-content:center; flex:none; }
.q-step i svg{ width:10px; height:10px; }

/* ---------- 2 · MODELAR (estrella) ---------- */
.m-board{ position:absolute; left:50px; top:30px; width:1000px; height:560px; }
.m-node{ position:absolute; background-color:var(--panel); border:1px solid var(--line); border-top:3px solid var(--tc); border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:2; }
.m-node-h{ display:flex; align-items:center; gap:7px; height:34px; padding:0 12px; font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--text); background-color:rgba(255,255,255,.03); }
.m-node-h .ik{ color:var(--tc); }
.m-node.fact{ box-shadow:0 0 0 1px rgba(242,201,76,.35), 0 10px 34px rgba(0,0,0,.4); }
.m-fields{ list-style:none; padding:2px 0; }
.m-fields li{ display:flex; align-items:center; gap:7px; height:21px; padding:0 12px; font-size:12px; color:var(--text-dim); }
.m-fields .ik{ width:12px; height:12px; color:var(--tc); }
.m-fields li em{ margin-left:auto; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--text-faint); }
.m-rel{ display:none; }
.m-line{ position:absolute; display:block; background-color:var(--bi); border-radius:1px; z-index:1; }
.m-chip{ position:absolute; z-index:3; width:22px; height:22px; padding-top:3px; border-radius:50%; background-color:var(--bg); border:1.5px solid var(--bi); color:var(--bi); font-family:var(--mono); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.m-cap{ position:absolute; left:0; top:0; width:320px; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-faint); }
.m-cap b{ font-family:var(--display); font-size:15px; color:var(--text); }

/* ---------- 3 · MEDIR (DAX) ---------- */
.d-wrap{ position:absolute; left:40px; top:34px; width:1020px; height:552px; display:flex; gap:22px; }
.d-fields{ flex:none; width:236px; background-color:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 12px; display:flex; flex-direction:column; gap:10px; align-self:flex-start; }
.d-fields-h{ font-family:var(--display); font-weight:600; font-size:14px; }
.d-search{ border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:12px; color:var(--text-faint); }
.d-tree{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.d-tree .t{ display:flex; align-items:center; gap:7px; height:30px; padding:0 6px; border-radius:6px; font-size:13px; color:var(--text-dim); }
.d-tree .t .ik{ color:var(--tc,var(--bi)); }
.d-tree .ch{ width:11px; height:11px; color:var(--text-faint); display:inline-flex; } .d-tree .ch svg{ width:100%; height:100%; } .d-tree .ch.down{ transform:rotate(90deg); }
.d-tree .t.med{ margin-top:6px; color:var(--text); }
.d-tree .t.med .ik{ color:var(--bi); }
.d-tree .m{ height:28px; display:flex; align-items:center; padding-left:44px; font-size:13px; color:var(--text); position:relative; }
.d-tree .m::before{ content:"∑"; position:absolute; left:26px; font-size:11px; color:var(--bi); }
.d-main{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.d-editor{ background-color:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.d-edtab{ display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--text-faint); }
.d-edtab .on{ display:inline-flex; align-items:center; gap:7px; color:var(--text); }
.d-edtab svg{ width:14px; height:14px; color:var(--bi); }
.d-edtab .dax{ margin-left:auto; font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:4px; background-color:rgba(242,201,76,.12); color:var(--bi); }
.d-code{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; font-family:var(--mono); font-size:14.5px; color:var(--text); }
.d-code .cl{ display:block; width:max-content; max-width:100%; white-space:pre; line-height:26px; clip-path:inset(0 100% 0 0); }
.d-code i{ font-style:normal; } .d-code .fn{ color:var(--bi); } .d-code .ref{ color:var(--blue-bright); } .d-code .kw{ color:#a78bfa; }
.d-ctl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.d-ctl .pills{ display:inline-flex; gap:7px; }
.d-ctl .p{ font-family:var(--mono); font-size:12px; padding:7px 16px; border-radius:14px; border:1px solid #2a3342; color:#a4acb9; background-color:rgba(242,201,76,0); }
.d-ctl .p.on{ background-color:rgba(242,201,76,.16); border-color:#f2c94c; color:#f6d97a; }
.d-ctx{ margin-left:auto; font-size:12px; color:var(--text-dim); display:inline-flex; align-items:center; gap:7px; }
.d-ctx b{ font-family:var(--mono); font-style:italic; color:var(--blue-bright); background-color:var(--blue-soft); padding:1px 7px; border-radius:4px; }
.d-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.d-card{ background-color:var(--panel); border:1px solid var(--line); border-top:3px solid var(--bi); border-radius:12px; padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.d-card .v{ font-family:var(--display); font-weight:600; font-size:38px; line-height:1.1; }
.d-card .s{ font-size:12px; color:var(--text-faint); }

/* ---------- 4 · VISUALIZAR (informe) ---------- */
.r-dash{ position:absolute; left:12px; top:8px; width:1076px; height:604px; display:grid; grid-template-columns:1fr 226px; gap:12px; }
.r-main{ display:grid; grid-template-rows:92px 1fr 1fr; gap:12px; min-height:0; min-width:0; }
.r-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.r-kpi{ background-color:var(--panel); border:1px solid var(--line); border-left:3px solid var(--bi); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.r-kpi .v{ font-family:var(--display); font-weight:600; font-size:27px; line-height:1.15; }
.r-kpi .st{ font-size:11.5px; font-weight:500; }
.r-mid{ display:grid; grid-template-columns:1.55fr 1fr; gap:12px; min-height:0; }
.r-bot{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; min-height:0; }
.r-panel{ background-color:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 14px 12px; display:flex; flex-direction:column; min-height:0; min-width:0; }
.r-ph{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.r-ph svg{ width:14px; height:14px; color:var(--bi); flex:none; }
.r-leg{ margin-left:auto; font-size:10px; color:var(--text-faint); display:inline-flex; align-items:center; gap:5px; }
.r-leg u{ width:14px; border-top:1.5px dashed var(--text-dim); display:inline-block; }
.r-bars{ flex:1; min-height:0; display:flex; padding-top:16px; }
.r-bar{ flex:1; min-width:0; display:flex; flex-direction:column; }
.r-bar-plot{ flex:1; min-height:0; position:relative; }
.r-bar .fill{ position:absolute; bottom:0; left:18%; width:64%; height:0; display:block; border-radius:3px 3px 0 0; }
.r-bar .fill s{ position:absolute; inset:0; border-radius:3px 3px 0 0; text-decoration:none; }
.r-bar .fill .sol{ background-color:var(--bi); }
.r-bar .fill .hat{ background-image:repeating-linear-gradient(135deg, rgba(242,201,76,.65) 0 3px, rgba(242,201,76,.15) 3px 7px); border:1px solid rgba(242,201,76,.8); border-bottom:0; }
.r-bar .mk{ position:absolute; left:-10px; right:-10px; top:-17px; text-align:center; font-size:11px; }
.r-bar .mk .a, .r-bar .mk .b{ justify-self:center; }
.r-meta{ position:absolute; left:0; right:0; bottom:72%; border-top:1.5px dashed var(--text-dim); opacity:0; z-index:3; text-decoration:none; }
.r-bar-tag{ text-align:center; font-size:10.5px; color:var(--text-faint); padding-top:5px; }
.r-tip{ position:absolute; left:58%; bottom:100%; margin-bottom:24px; z-index:20; width:max-content; background-color:#05070a; border:1px solid var(--bi); border-radius:8px; padding:8px 11px; display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-dim); box-shadow:0 10px 26px rgba(0,0,0,.5); }
.r-tip b{ color:var(--text); font-size:11.5px; } .r-tip strong{ color:var(--bi); font-weight:600; } .r-tip .ok{ color:var(--ok); }
.r-dona{ flex:1; min-height:0; display:flex; align-items:center; gap:14px; }
.r-donut{ position:relative; width:128px; height:128px; flex:none; }
.r-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.r-dtot{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:17px; }
.r-dtot > span{ font-family:var(--body); font-weight:400; font-size:10px; color:var(--text-faint); }
.r-dona ul{ list-style:none; flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.r-dona li{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dim); }
.r-dona li i{ width:9px; height:9px; border-radius:2px; flex:none; display:block; }
.r-dona li .pc{ margin-left:auto; color:var(--text); font-family:var(--mono); font-size:11px; }
.r-mhead, .r-mrow{ display:grid; grid-template-columns:.9fr 1.5fr .9fr 1fr; align-items:center; gap:10px; }
.r-mhead{ font-size:10px; color:var(--text-faint); padding:0 6px 5px; border-bottom:1px solid var(--line); }
.r-mrow{ height:29px; padding:0 6px; border-bottom:1px solid var(--line-soft); font-size:12px; color:var(--text-dim); border-radius:4px; }
.r-mrow .n{ color:var(--text); font-weight:600; }
.r-mrow .vb{ position:relative; display:block; height:18px; line-height:18px; }
.r-mrow .vb b{ position:relative; z-index:1; padding-left:6px; font-size:11.5px; color:var(--text); }
.r-db{ position:absolute; left:0; top:0; bottom:0; width:0; background-color:rgba(242,201,76,.3); border-right:2px solid var(--bi); border-radius:2px; }
.r-mrow .mg{ font-family:var(--mono); font-size:11.5px; } .r-mrow .mg.ok{ color:var(--ok); } .r-mrow .mg.mid{ color:var(--warn); } .r-mrow .mg.bad{ color:var(--bad); }
.r-mrow .spark{ width:60px; height:18px; color:var(--text-dim); overflow:visible; }
.r-mrow.tot{ border-top:1px solid var(--line); border-bottom:0; } .r-mrow.tot .n{ color:var(--bi); }
.r-nar{ gap:0; }
.r-nl{ display:grid; font-size:12.5px; line-height:1.5; color:var(--text-dim); padding:7px 0 7px 12px; border-left:2px solid var(--line); margin-bottom:7px; clip-path:inset(0 100% 0 0); }
.r-nl > *{ grid-area:1/1; } .r-nl .b{ opacity:0; } .r-nl b{ color:var(--text); }
.r-filt{ background-color:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 13px; display:flex; flex-direction:column; gap:16px; min-height:0; }
.r-filt-h{ display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:13.5px; }
.r-filt-h svg{ width:15px; height:15px; color:var(--bi); }
.r-filt-h span{ margin-left:auto; font-family:var(--body); font-weight:400; font-size:10px; color:var(--text-faint); }
.r-fs{ display:flex; flex-direction:column; gap:7px; }
.r-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.r-chip{ font-family:var(--mono); font-size:11px; padding:5px 11px; border-radius:12px; border:1px solid #2a3342; color:#a4acb9; background-color:rgba(242,201,76,0); }
.r-chip.on{ background-color:rgba(242,201,76,.16); border-color:#f2c94c; color:#f6d97a; }
.r-sel{ display:flex; justify-content:space-between; border:1px solid var(--line); border-radius:6px; padding:7px 10px; font-size:12px; color:var(--text-dim); }
.r-range{ position:relative; height:6px; border-radius:3px; background-color:var(--panel-2); margin:5px 5px 2px; }
.r-range i{ position:absolute; left:0; right:0; top:0; bottom:0; border-radius:3px; background-color:var(--bi); }
.r-range u{ position:absolute; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background-color:#fff9e0; border:2px solid var(--bi); }
.r-range u:nth-of-type(1){ left:-5px; } .r-range u:nth-of-type(2){ right:-5px; }
.r-rt{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color:var(--text-faint); }
.r-fstat{ margin-top:auto; font-size:11px; line-height:1.5; color:var(--text-dim); padding:9px 10px; border-radius:6px; background-color:rgba(242,201,76,.1); border:1px solid rgba(242,201,76,.35); }
.r-fstat b{ color:var(--bi); }

/* cursores dentro de su escena */
.bi-cur{ color:#fff; z-index:30; }
.bi-root .click-ripple{ border-color:var(--bi); z-index:29; }

/* ---------- estado final (reduced-motion / GSAP caído) ---------- */
.bi-final .dl .d{ opacity:0; } .bi-final .dl .l{ opacity:1; }
.bi-final .bi-quitar{ display:none; }
.bi-final .q-m .m{ display:none; } .bi-final .q-m .m:last-child{ display:block; opacity:1; }
.bi-final .no-final, .bi-final .d-ctx, .bi-final .r-fstat, .bi-final .bi-cur, .bi-final .click-ripple{ display:none; }

/* ---------- flujo vertical (teléfono táctil y estático): sin lienzo fijo ---------- */
.bi-flujo .bi-pin{ height:auto; overflow:visible; background:none; }
.bi-flujo .bi-pin::before{ display:none; }
.bi-flujo .bi-canvas{ position:relative; width:auto; height:auto; transform:none !important; padding:0 14px; }
.bi-flujo .bi-escena{ position:relative; inset:auto; padding:30px 0 40px; }
.bi-flujo .viaje-msg{ margin-bottom:18px; }
.bi-flujo .bi-cur{ display:none; }

.bi-flujo .q-win{ position:relative; left:auto; top:auto; width:100%; height:auto; }
.bi-flujo .q-bar .q-tabs, .bi-flujo .q-bar .q-sub{ display:none; }
.bi-flujo .q-body{ flex-direction:column; }
.bi-flujo .q-table{ padding:10px 6px 0; }
.bi-flujo .q-row{ grid-template-columns:.95fr 1.3fr .9fr 1fr .8fr; font-size:11px; }
.bi-flujo .q-cli{ display:none; }
.bi-flujo .q-c{ padding:0 4px; }
.bi-flujo .q-steps{ width:auto; border-left:0; border-top:1px solid var(--line); }
.bi-flujo .q-m .m{ font-size:10.5px; }

.bi-flujo .m-board{ position:relative; left:auto; top:auto; width:100%; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bi-flujo .m-node{ position:relative; left:auto !important; top:auto !important; width:auto !important; height:auto !important; }
.bi-flujo .m-node.fact{ grid-column:1/-1; order:-1; }
.bi-flujo .m-line, .bi-flujo .m-chip{ display:none; }
.bi-flujo .m-cap{ position:relative; width:auto; grid-column:1/-1; order:-2; }
.bi-flujo .m-rel{ display:block; padding:4px 12px 9px; font-family:var(--mono); font-size:10.5px; color:var(--bi); }

.bi-flujo .d-wrap{ position:relative; left:auto; top:auto; width:100%; height:auto; flex-direction:column; gap:16px; }
.bi-flujo .d-fields{ width:100%; align-self:stretch; }
.bi-flujo .d-code{ font-size:11.5px; padding:12px; }
.bi-flujo .d-code .cl{ white-space:pre-wrap; line-height:20px; }
.bi-flujo .d-cards{ gap:8px; }
.bi-flujo .d-card{ padding:12px 10px; } .bi-flujo .d-card .v{ font-size:21px; } .bi-flujo .d-card .s{ font-size:10px; }
.bi-flujo .d-ctx{ margin-left:0; }

.bi-flujo .r-dash{ position:relative; left:auto; top:auto; width:100%; height:auto; grid-template-columns:1fr; }
.bi-flujo .r-filt{ order:-1; flex-direction:row; flex-wrap:wrap; gap:10px 18px; }
.bi-flujo .r-filt-h{ flex-basis:100%; }
.bi-flujo .r-main{ grid-template-rows:none; }
.bi-flujo .r-kpis{ grid-template-columns:1fr 1fr; }
.bi-flujo .r-mid, .bi-flujo .r-bot{ grid-template-columns:1fr; }
.bi-flujo .r-bars{ height:200px; flex:none; }
.bi-flujo .r-dona{ flex-direction:column; }
.bi-flujo .r-dona ul{ width:100%; }
.bi-flujo .r-mhead, .bi-flujo .r-mrow{ grid-template-columns:.9fr 1.3fr .9fr .8fr; gap:6px; }
.bi-flujo .r-tip{ display:none; }

@media (max-width:700px){ .bi-flujo .q-win{ border-radius:10px; } }

/* ajustes del flujo vertical: sin desbordes laterales (las entradas animadas parten desplazadas), filas que se colapsan, orden */
.bi-flujo .bi-escena{ overflow-x:clip; }
.bi-flujo .q-row{ overflow:hidden; }
.bi-flujo .q-head .g{ display:none; }
.bi-flujo .m-board{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.bi-flujo .m-node{ min-width:0; }
.bi-flujo .d-fields{ order:2; }
.bi-flujo .bi-canvas{ max-width:980px; margin:0 auto; }

/* ---------- héroe de Power BI: mitad texto, mitad el mismo dashboard de la escena final (prefijo hb-) ----------
   Convencional a propósito: nada encima del tablero, sin cortes ni inclinación. El tablero es una copia del de la
   escena 4 (ids "h…") escalada al ancho de su columna. Un solo botón grande; "Ver programas" discreto. */
.hb-hero{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:clamp(18px,2.4vw,40px); align-items:center; height:min(calc(100vh - var(--viaje-nav-h)), 780px); min-height:520px; padding:0 clamp(18px,2.4vw,40px); text-align:left; }
.hb-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2.6vh,26px); min-width:0; }
.hb-hero .viaje-hero-title{ font-size:clamp(30px,3.7vw,58px); text-align:left; line-height:1.1; max-width:none; word-spacing:0; margin:0; }
.hb-hero .viaje-hero-chips{ justify-content:flex-start; margin-top:0; }
.hb-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:6px; }
.hb-go{ position:relative; overflow:hidden; min-width:0; width:100%; max-width:290px; height:52px; padding:0 18px; }
.hb-bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background-color:rgba(10,13,18,.55); transform:scaleX(0); transform-origin:0 50%; }
.hb-ver{ font-size:13px; color:var(--text-dim,#9aa3b2); text-decoration:underline; text-underline-offset:4px; opacity:.75; }
.hb-ver:hover{ opacity:1; color:var(--text); }
.hb-stage{ min-width:0; }
.hb-frame{ position:relative; aspect-ratio:1100/620; overflow:hidden; border:1px solid rgba(242,201,76,.28); border-radius:14px; background-color:#0a0d12; box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 80px rgba(242,201,76,.08); }
.hb-cv{ position:relative; width:1100px; height:620px; transform-origin:0 0; }
.hb-tap{ cursor:pointer; }
.hb-pulse{ animation:hbPulse 1.6s ease-out infinite; }
@keyframes hbPulse{ 0%{ box-shadow:0 0 0 0 rgba(242,201,76,.55); } 100%{ box-shadow:0 0 0 12px rgba(242,201,76,0); } }
@media (prefers-reduced-motion: reduce){ .hb-pulse{ animation:none; } }

/* teléfono / estático: el texto primero; debajo, KPI y barras del mismo tablero (el resto ya está en la escena final) */
.bi-flujo .hb-hero{ display:flex; flex-direction:column; align-items:stretch; height:auto; min-height:0; gap:26px; padding:44px 14px 28px; }
.bi-flujo .hb-hero .viaje-hero-title{ font-size:clamp(28px,8.4vw,40px); }
.bi-flujo .hb-go{ min-width:0; width:100%; }
.bi-flujo .hb-frame{ aspect-ratio:auto; overflow:visible; border:0; background:none; box-shadow:none; }
.bi-flujo .hb-cv{ width:auto; height:auto; transform:none; }
.bi-flujo .hb-stage .r-mid .r-panel:nth-child(2), .bi-flujo .hb-stage .r-bot, .bi-flujo .hb-stage .r-filt{ display:none; }
.hb-hero .selector-label{ display:none; }

/* flecha flotante: aparece sola si el visitante se queda quieto en el recorrido */
.bi-more{ position:absolute; left:50%; bottom:46px; transform:translate(-50%,8px); display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--bi,#f2c94c); opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease; text-shadow:0 1px 8px rgba(0,0,0,.8); }
.bi-more.on{ opacity:.9; transform:translate(-50%,0); }
.bi-more svg{ width:18px; height:18px; animation:biMas 1.6s ease-in-out infinite; }
@keyframes biMas{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .bi-more svg{ animation:none; } }