/* ======================= Vision Glass — shared navigation motion (vg-nav.js) =======================
   The gliding highlight of a group (.vgn-hl), the floating glass labels of the icon rails (.vgn-tip) and the Estadísticas skin: rail groups and the phone
   search pill, applied over stats.css by selector only. Transform / opacity moves; one spring. */
/* Apple base: the highlight is the flat blue tint (the selected state), the label a popover; both themes come from the
   --ios-* tokens (no dark block here) */
:root{--vgn-spring:cubic-bezier(.25,.1,.25,1);--vgn-ms:.28s;
  --vgn-pill:var(--ios-blue-tint);--vgn-pill-edge:transparent;--vgn-pill-sh:0 0 0 0 transparent;
  --vgn-sheen:linear-gradient(transparent,transparent);
  --vgn-tip:var(--ios-bg-2);--vgn-tip-edge:transparent;--vgn-tip-ink:var(--ios-label);--vgn-tip-sh:var(--ios-shadow-pop)}

/* ---- 1 the gliding highlight: one element per group, moved with a transform; its size is written per move, not
   animated. Appears in place (is-snap), then glides between items; rests on the current item. ---------------------- */
/* (the container the highlight lives in is positioned by its own skin: the sidebar's scroll box, the tabs, the rail) */
.vgn-hl{position:absolute;left:0;top:0;z-index:0;width:0;height:0;box-sizing:border-box;border-radius:var(--ios-r);pointer-events:none;opacity:0;
  background:var(--vgn-sheen),var(--vgn-pill);border:1px solid var(--vgn-pill-edge);box-shadow:inset 0 1px 0 var(--vgn-pill-edge),var(--vgn-pill-sh);
  transition:transform var(--vgn-ms) var(--vgn-spring),opacity .18s ease;will-change:transform}
.vgn-hl.is-snap{transition:opacity .18s ease}
.vgn-hl.is-on{opacity:1}

/* (2 — the glass ring over the header pills — removed: vg-nav.js) */

/* The language controls in Poncheo stay beside search and account in the sticky toolbar. */
html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang {
  display:flex;align-items:center;align-self:center;flex:none;gap:2px;margin:0;padding:2px;
  border:0;border-radius:var(--ios-r-full);
  background:var(--ios-fill);
}
html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang>button {
  position:relative;display:grid;place-items:center;flex:none;width:36px;min-width:36px;height:32px;min-height:32px;
  margin:0;padding:0;border:0!important;border-radius:var(--ios-r-full)!important;box-shadow:none!important;
  background:transparent!important;color:var(--ios-label)!important;font-size:var(--ios-t-footnote);font-weight:400;
}
html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang>button[aria-pressed="true"] {
  background:var(--ios-seg-thumb)!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important;
  color:var(--ios-label)!important;font-weight:var(--ios-w-semibold);
}
html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang>button:focus-visible {
  outline:2px solid var(--ios-blue)!important;outline-offset:-3px;
}
@media (max-width:366px) {
  html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang>button{width:29px;min-width:29px}
  html.vgd:root #app#app#app .top:not(.vb-top) :is(.iconbtn,#vgd-sb-fab){width:38px!important;min-width:38px!important}
  html.vgd:root #app#app#app .top:not(.vb-top) .topsearch{flex:0 0 38px;max-width:38px}
  html.vgd:root #app#app#app .top:not(.vb-top) #poncheo-search .vg-global>button[data-global="open"]:not(#vgd):not(#vgd) {
    width:38px!important;min-width:38px!important;
  }
}
@media (forced-colors:active) {
  html.vgd:root #app#app#app .top:not(.vb-top) .vb-lang>button[aria-pressed="true"]{border:2px solid ButtonText!important}
}

/* ---- 3 floating glass label (icon rails): one element on <body>, fades in under 150 ms, glides between rows ------- */
.vgn-tip{position:fixed;left:0;top:0;z-index:10010;max-width:min(260px,60vw);padding:7px 12px;box-sizing:border-box;border-radius:var(--ios-r);pointer-events:none;opacity:0;
  color:var(--vgn-tip-ink);background:var(--vgn-sheen),var(--vgn-tip);border:1px solid var(--vgn-tip-edge);box-shadow:var(--vgn-tip-sh);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  font:600 var(--ios-t-footnote)/1.25 var(--ios-font,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .12s ease,transform .24s var(--vgn-spring);will-change:transform}
.vgn-tip::before{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;margin-top:-5px;transform:rotate(45deg);background:inherit;border:inherit;border-right:0;border-top:0;border-radius:2px}
.vgn-tip.is-r::before{left:auto;right:-5px;border:inherit;border-left:0;border-bottom:0}
.vgn-tip.is-snap{transition:opacity .12s ease}
.vgn-tip.is-on{opacity:1}

/* ---- 4 Estadísticas: the rail groups glide (the filled circle is the highlight), the section tabs share the spring,
   the pills carry the frosted inner edge, the phone search pill folds into its icon ---------------------------------- */
.st .sx-rail .vgn-hl{display:none}
@media (max-width:760px){.st .sx-rail{position:relative}}   /* the rail is sticky (positioned) on wide screens; static on a phone */
.st .sx-grp.vgn-host .sx-rb,.st .sx-grp.vgn-host button.subtle.sx-rb{position:relative;z-index:1;transition:color .2s,background-color .2s}
/* the rail buttons keep their shape and size: no scale on hover / press (a scaled button came apart from its pill — «Salir»
   looked squashed); the pill under the button, the colour and the focus ring are the feedback */
.st .sx-grp.vgn-host .sx-rb:hover,.st .sx-grp.vgn-host .sx-rb:active{transform:none}
/* «Salir» carries Proyectos' .pj-out (min-width 56 px, padding): in the rail it is a round button like the others */
.st .sx-rail .sx-rb.pj-out{min-width:0;padding:0}
.st .sx-search{transition:width .3s cubic-bezier(.22,.61,.36,1),border-color .25s,box-shadow .3s}
.st .sx-search input[data-act=search]{transition:opacity .2s ease}
@media (max-width:500px){
  .st .sx-search:not(:focus-within):has(input:placeholder-shown){width:46px;min-width:46px;padding:0;justify-content:center;justify-self:start;gap:0;cursor:pointer}
  .st .sx-search:not(:focus-within):has(input:placeholder-shown) input[data-act=search]{flex:0 0 0;width:0;min-width:0;padding:0;opacity:0}
  .st .sx-search:focus-within,.st .sx-search:has(input:not(:placeholder-shown)){width:100%}
}

/* the floating label: opaque, no live blur, on every screen (as on a phone) */
.vgn-tip{backdrop-filter:none;-webkit-backdrop-filter:none}
@media (prefers-reduced-motion: reduce){.vgn-hl,.vgn-tip,.st .sx-search,.st .sx-search input[data-act=search]{transition:none!important}}
/* keyboard focus on the Estadísticas rail and header pills, inside the control (no ring crossing its neighbours) */
.st :is(.sx-rb,button.subtle.sx-ib,.vgv-pill>button):focus-visible,.st .vgv-pill>label.vgv-sw:focus-within{outline:2px solid var(--ios-blue);outline-offset:2px}