/* ======================= Vision Glass — dashboard look (Poncheo · Workshop · Proyectos) =======================
   Apple base (2026-11-07): every token below aliases vg-apple-base.css (--ios-*), so a menu's current item is the blue
   tint (never a black / white pill), cards are flat, the hero is systemBlue; the light / dark switch (vg-dash.js) and one
   entrance when an app opens. Dark values come from the --ios-* tokens: no second token block here. Loaded LAST by each app, after vg-ui.css / vg-motion.css: it only re-points the shared
   tokens and restyles surfaces, so every screen, button and test hook keeps its markup and its behaviour.
   !important is used only where the older skins already use it or set the same property with id selectors. */

/* ---- tokens: light (bare :root), then dark for the system setting and for the explicit choice ---------------------- */
:root:root,:root:root[data-theme="light"]{
  --vd-font:var(--ios-font);
  --vd-card:var(--ios-bg-2);--vd-soft:var(--ios-fill);--vd-act:var(--ios-blue-tint);--vd-act-ink:var(--ios-blue);--vd-hover:var(--ios-fill-4);
  --vd-shadow:0 0 0 0 transparent;--vd-lift:0 0 0 0 transparent;
  --vd-or1:var(--ios-blue);--vd-or2:var(--ios-blue);   /* accent: systemBlue (vg-apple-base.css); selected = blue tint, never black / white */
  --vd-glass:var(--ios-blue);--vd-glass-edge:transparent;
  --vd-frost:var(--ios-bar);--vd-frost-edge:var(--ios-hairline);--vd-sheen:linear-gradient(transparent,transparent);
  --bg:var(--ios-bg);--surface:var(--ios-bg-2);--raised:var(--ios-bg-2);--surface-2:var(--ios-bg-3);--chip:var(--ios-fill);--panel:var(--ios-bg-2);
  --ink:var(--ios-label);--muted:var(--ios-label-2);--line:var(--ios-hairline);--line-2:var(--ios-hairline);
  --accent:var(--ios-blue);--accent-ink:var(--ios-on-accent);--accent-soft:var(--ios-blue-tint);--native-select-bg:var(--ios-bg-2);--sky:#dfe3e8;
  --vg-surface:var(--ios-bg-2);--vg-field:var(--ios-fill);--vg-glass:var(--ios-bg-2);--vg-glass-strong:var(--ios-bg);--vg-page:var(--ios-bg);
  --vg-btn-glass:var(--ios-bg-2);--vg-panel-bg:var(--ios-bg-2);--vg-panel-solid:var(--ios-bg-2);--vg-accent-blue:var(--ios-blue);
  --vg-hi:var(--ios-fill-4);--vg-hi-strong:var(--ios-fill);--vg-glass-shadow:0 0 0 0 transparent;
  --font-ui:var(--ios-font);--font-body:var(--ios-font);--vg-font-ui:var(--ios-font);
  --r:var(--ios-r);--r-l:var(--ios-r);--vg-r:var(--ios-r);--vg-r-l:var(--ios-r);
  --vg-control-bg:var(--ios-fill);--vg-control-edge:transparent;--vg-control-ink:var(--ios-label)
}
@media (prefers-color-scheme: dark){:root:root:not([data-theme="light"]){--sky:#1a1c20;
  color-scheme:dark}}
:root:root[data-theme="dark"]{--sky:#1a1c20;
  color-scheme:dark}
/* the Workshop keeps its current quiet controls until it is reworked (owner's call, 2026-11-08) */
html.vgd-app-workshop:root{--vg-control-bg:var(--ios-bg-2);--vg-control-edge:var(--ios-hairline)}

/* ---- the shared secondary-control finish (vg-motion.js marks them .vg-control; vg-motion.css paints them with doubled
   ids): rounder, and inside a pill menu the item is bare until it is the current one, which fills ---------------------- */
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop,#bar3d#bar3d,#sheet3d#sheet3d) .vg-control{box-shadow:none!important}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) :is(.vg-switch,.vgw-apps,.tabs,.vgw-side,.vgw-more-list,.seg)>.vg-control,html.vgd:root #shared-workshop#shared-workshop .vgw-side>details>summary.vg-control{background:transparent!important;border-color:transparent!important;border-radius:999px!important}
html.vgd:root #app#app .tabs>button.vg-control:not([aria-current="page"]){border-radius:var(--ios-r)!important;color:var(--muted)!important}
html.vgd:root #app#app .tabs>button.vg-control[aria-current="page"]{border-radius:var(--ios-r)!important;background:transparent!important;color:var(--ios-blue)!important}   /* iOS tab bar: blue icon + label, no pill */
/* the wide «Buscar en todo» launcher: the slim smoked-glass search bar (search glass at the left, thin light edge, top
   sheen) in both themes; its smoke canvas stays hidden. `:not(#vgd)` only adds weight over the shared hover/pressed skins. */
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"]:not(#vgd):not(#vgd){position:relative;min-height:44px;padding-left:44px!important;background:var(--vgd-sweep-l) -160% 0/60% 100% no-repeat,var(--vgd-bar)!important;color:var(--vgd-bar-ink)!important;border:1px solid var(--vgd-bar-edge)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 var(--vgd-bar-hi),var(--vgd-bar-sh)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);font-weight:400!important;transition:border-color .25s,box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1),scale .45s var(--vgd-spring),background-position 0s}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"]:not(#vgd):not(#vgd):is(:hover,:focus-visible){border-color:var(--vgd-bar-edge-h)!important;box-shadow:inset 0 1px 0 var(--vgd-bar-hi),0 0 0 4px var(--vgd-bar-ring),var(--vgd-bar-sh)!important;background-position:260% 0,0 0,0 0!important;scale:1.015;transition:border-color .25s,box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1),scale .45s var(--vgd-spring),background-position .85s cubic-bezier(.22,.61,.36,1)}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"]:not(#vgd):not(#vgd):active{filter:brightness(.92)}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"]:not(#vgd):not(#vgd)::before{content:"";position:absolute;left:15px;top:50%;width:18px;height:18px;margin:-9px 0 0;inset-inline-start:15px;background:currentColor!important;-webkit-mask:var(--vgd-ic-search) center/contain no-repeat!important;mask:var(--vgd-ic-search) center/contain no-repeat!important;opacity:.85;border:0;box-shadow:none;animation:none!important;transform:none}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"]:not(#vgd):not(#vgd)::after{color:var(--vgd-bar-muted)!important;background:none!important}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"] *{color:inherit!important}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"] canvas{display:none!important}
html.vgd:root :is(#app#app,#shared-workshop#shared-workshop,#bar3d#bar3d,#sheet3d#sheet3d) .vg-control:not(:where(.vg-button,.vg-cell,.vg-chip,.vg-icon-button,.vg-toggle,.vr-back,.sbar>.back,.iconbtn,#vgd-sb-fab,.vg-notice-fold>summary,.vr-day-details>summary,.vg-fold>summary,.vgl-opt,.vg-segmented>*,.vg-stepper>*)):is([aria-current="page"],[aria-current="true"],[aria-pressed="true"],[aria-selected="true"]){background:var(--vd-act)!important;color:var(--vd-act-ink)!important;border-color:transparent!important;box-shadow:none!important}
@media(hover:hover){html.vgd:root :is(#app#app,#shared-workshop#shared-workshop,#bar3d#bar3d,#sheet3d#sheet3d) .vg-control:not(:where(.vg-button,.vg-cell,.vg-chip,.vg-icon-button,.vg-toggle,.vr-back,.sbar>.back,.iconbtn,#vgd-sb-fab,.vg-notice-fold>summary,.vr-day-details>summary,.vg-fold>summary,.vgl-opt,.vg-segmented>*,.vg-stepper>*)):hover:not(:disabled):not([aria-current="page"]):not([aria-current="true"]):not([aria-pressed="true"]):not([aria-selected="true"]){background:var(--ios-fill-1)!important;border-color:transparent!important}}
@media(hover:hover){html.vgd:root #app#app#app details.vg-field-row>summary.vg-control:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}}
html.vgd:root #app#app .rowbtn.vg-control{border-radius:var(--ios-r)!important;background:var(--vd-soft)!important;border-color:transparent!important}

/* ---- page: flat, no moving glass behind the screens -------------------------------------------------------------- */
html.vgd,html.vgd body,html.vgd.vg-bg-on body{background:var(--bg)!important}
html.vgd #vg-glassfold{display:none!important}
/* (the View Transition snapshot rules live in vg-loader.css, loaded by every page) */

/* ---- light / dark pill (inserted by vg-dash.js in each header) ---------------------------------------------------- */
.vgd-theme{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--vd-card);border:1px solid var(--line);box-shadow:var(--vd-shadow);flex:none;margin:0}
html.vgd button.vgd-tb{display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;margin:0;padding:0;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;cursor:pointer;transition:background-color .25s,color .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
html.vgd button.vgd-tb:hover{background:var(--vd-hover)!important;transform:scale(1.06)}
html.vgd button.vgd-tb svg{width:19px;height:19px}
html.vgd button.vgd-tb[aria-pressed="true"]{background:var(--vd-act)!important;color:var(--vd-act-ink)!important}
html.vgd button.vgd-tb[aria-pressed="true"] svg{animation:vgd-spin .6s cubic-bezier(.34,1.56,.64,1)}
html.vgd:root :is(#app,#shared-workshop,.pj) button.vgd-tb{display:grid!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important}   /* 44 px: the touch size every app keeps */
html.vgd:root :is(#app,#shared-workshop,.pj) button.vgd-tb svg{display:block!important;width:19px!important;height:19px!important;flex:none}
@media (max-width:760px){
  .vgd-theme{padding:0;background:transparent;border:0;box-shadow:none}
  html.vgd:root :is(#app,#shared-workshop,.pj) button.vgd-tb[aria-pressed="true"]{display:none!important}
  html.vgd button.vgd-tb{background:var(--vd-card)!important;border:1px solid var(--line)!important;box-shadow:var(--vd-shadow)!important}
  html.vgd:not(.vgd-app-workshop) button.vgd-tb{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ios-blue)!important}
}

/* ---- headers (Apple base): Poncheo's .top is the edge-to-edge bar material with a hairline under it (its size and
   rows: vg-remake.css); Proyectos' .pj-top is drawn by projects.css. Bar buttons are plain blue glyphs (.vg-icon-button
   .is-plain look), never outlined pills. ------------------------------------------------------------------------------ */
html.vgd #app .top{position:sticky;top:0;margin:0;padding:6px 8px!important;gap:8px;border-radius:0;background:var(--ios-bar)!important;border:0!important;border-bottom:.5px solid var(--ios-separator)!important;box-shadow:none!important}
html.vgd #app .top .brand{display:flex;flex-direction:column;align-items:flex-start;flex:0 1 auto;min-width:0}
html.vgd #app .top .brand b{font:var(--ios-w-semibold) var(--ios-t-headline)/var(--ios-lh-headline) var(--vd-font)}
html.vgd #app .top .brand span{font:var(--ios-w-regular) var(--ios-t-caption1)/var(--ios-lh-caption1) var(--vd-font)}
html.vgd #app .top .topr{gap:8px}
html.vgd #app .top .topr{order:2;margin-left:auto}
html.vgd #app .top .topsearch{order:3;flex:1 1 100%;min-width:0}
@media (min-width:1100px){html.vgd #app .top{flex-wrap:nowrap}html.vgd #app .top .topsearch{order:1;flex:1 1 auto;max-width:720px;margin:0 auto}html.vgd #app .top .topr{margin-left:0}}
@media (max-width:600px){html.vgd #app .top{gap:6px}html.vgd #app .top .topsearch{order:1;flex:0 0 auto}html.vgd #app .top .brand{flex:1 1 auto;column-gap:7px}}
html.vgd #shared-workshop .vgw-top h1{display:flex;align-items:center;gap:9px}
html.vgd #app .top .topr>button:not(.vgd-tb),html.vgd #app .top .iconbtn{background:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;color:var(--ios-blue)!important}
html.vgd #shared-workshop .vgw-top [data-action=lang]{background:var(--vd-card)!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:var(--vd-shadow)!important;color:var(--ink)!important}
@media (max-width:430px){html.vgd #app .top .topr{gap:5px}}
html.vgd #shared-workshop .vgw-top{background:var(--vd-card)!important;border:1px solid var(--line)!important;border-radius:var(--ios-r)!important;box-shadow:var(--vd-shadow)!important;backdrop-filter:none!important}
html.vgd #shared-workshop .vgw-top h1 b{font-weight:700;letter-spacing:-.015em}

/* ---- app switches: one row, the current app is the blue tint ------------------------------------------------------- */
html.vgd #app .vg-switch,html.vgd #shared-workshop .vgw-apps{background:var(--vd-card)!important;border:1px solid var(--line)!important;border-radius:var(--ios-r)!important;padding:5px!important;gap:4px!important;box-shadow:var(--vd-shadow)!important}
html.vgd #app .vg-switch>*,html.vgd #shared-workshop .vgw-apps>*{border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;transition:background-color .3s,color .3s}
html.vgd #app .vg-switch>a:hover,html.vgd #shared-workshop .vgw-apps>a:hover{background:var(--vd-hover)!important}
html.vgd #app .vg-switch>[aria-current],html.vgd #shared-workshop .vgw-apps>[aria-current]{background:var(--vd-act)!important;color:var(--vd-act-ink)!important}

/* ---- cards and rows ------------------------------------------------------------------------------------------------ */
html.vgd #app :is(.card,.vg-card),html.vgd .pj :is(.pj-card,.pj-card-plain,.pj-sec,.pj-next,.pj-hero),html.vgd #shared-workshop :is(.vg-card,.vgw-team){background:var(--vd-card)!important;border:0!important;border-radius:var(--ios-r)!important;box-shadow:none!important}   /* iOS cards: no outline, no shadow */
html.vgd #app .rowbtn{transition:background-color .2s}
html.vgd #app .rowbtn{background:var(--vd-soft)!important;border:1px solid transparent!important;border-radius:var(--ios-r)!important;box-shadow:none!important}
html.vgd :is(#app,.pj,#shared-workshop) :is(.msg,.pj-msg){border-radius:var(--ios-r)}


/* ---- Poncheo segmented switches (iOS: fill track, white / #636366 thumb) --------------------------------------------- */
html.vgd #app .seg{background:var(--ios-fill)!important;border:0!important;border-radius:999px!important;padding:2px!important;box-shadow:none!important}
html.vgd #app .seg>*{border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--ios-label)!important}
html.vgd #app .seg>:is([aria-selected="true"],[aria-pressed="true"]){background:var(--ios-seg-thumb)!important;color:var(--ios-label)!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important}

/* ---- Poncheo bottom bar: the iOS tab bar (bar material, hairline on top, edge to edge: vg-remake.css places it) ---- */
html.vgd #app nav.tabs{background:var(--ios-bar)!important;border:0!important;border-top:.5px solid var(--ios-separator)!important;border-radius:0!important;box-shadow:none!important}
html.vgd #app nav.tabs>button{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:var(--ios-label-2)!important;transition:color .2s}
html.vgd #app nav.tabs>button[aria-current="page"]{background:transparent!important;color:var(--ios-blue)!important}   /* iOS tab bar: the current tab is the blue icon + label, no pill */

/* ---- Workshop: side menu, view menu, panel ----------------------------------------------------------------------------- */
html.vgd #shared-workshop .vgw-side{background:var(--vd-card)!important;border:1px solid var(--line)!important;border-radius:var(--ios-r)!important;box-shadow:var(--vd-shadow)!important;backdrop-filter:none!important}
html.vgd #shared-workshop .vgw-side .vgw-item{border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;transition:background-color .3s,color .3s}
html.vgd #shared-workshop .vgw-side .vgw-item:hover{background:var(--vd-hover)!important}
html.vgd #shared-workshop .vgw-side .vgw-item[aria-current="page"],html.vgd #shared-workshop .vgw-side .vgw-item[aria-current="true"]{background:var(--vd-act)!important;color:var(--vd-act-ink)!important}
html.vgd #shared-workshop .vgw-vmain{background:var(--vd-card)!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:var(--vd-shadow)!important;color:var(--ink)!important}
html.vgd #shared-workshop .vgw-panel{background:var(--vg-panel-bg)!important;border:1px solid var(--line)!important;box-shadow:var(--vd-lift)!important}
/* phones / narrow panel: the sheet lies over the 3D and its labels («Almacén de arriba…») showed through the 97 % glass
   behind the panel's text — fully opaque there, as vg-ui.css already intends for the open panel */
@media (max-width:899px){html.vgd #shared-workshop .vgw-panel{background:var(--vg-panel-solid,var(--vg-panel-bg))!important}}

/* ---- Workshop 3D «en vivo» (shop/workshop-live.js): cards over the 3D, dotted lines to their place ------------------- */
.vgl-layer{position:fixed;inset:0;z-index:512;pointer-events:none}
.vgl-layer[hidden]{display:none}
.vgl-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vgl-lines line{stroke:var(--muted);stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round;opacity:.85}
.vgl-lines line.on{stroke:var(--vd-or2);opacity:1}
.vgl-lines .dot{fill:var(--vd-card);stroke:var(--muted);stroke-width:2}
.vgl-lines .dot.on{fill:var(--vd-or2);stroke:#fff}
html.vgd button.vgl-card{position:absolute;left:0;top:0;display:grid;gap:3px;width:208px;min-height:0;margin:0;padding:11px 13px;border-radius:var(--ios-r)!important;border:1px solid var(--line)!important;background:color-mix(in srgb,var(--vd-card) 94%,transparent)!important;box-shadow:var(--vd-lift)!important;color:var(--ink)!important;text-align:left;font:400 var(--ios-t-footnote)/1.3 var(--vd-font);pointer-events:auto;cursor:pointer;backdrop-filter:blur(10px);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
html.vgd button.vgl-card.is-on{border-color:color-mix(in srgb,var(--vd-or2) 60%,transparent)!important}
.vgl-first .vgl-card{animation:vgl-in .6s .4s cubic-bezier(.2,.75,.2,1) both}
.vgl-head{display:flex;align-items:center;gap:9px;margin:0 0 4px}
.vgl-head>i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--vd-or2) 14%,transparent);color:var(--vd-or2)}
.vgl-head>i svg{width:16px;height:16px}
.vgl-head b{display:block;font:600 var(--ios-t-footnote)/1.2 var(--vd-font)}
.vgl-head em{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font:700 var(--ios-t-caption2)/1 var(--vd-font);font-style:normal;color:#139c55}
.vgl-head em u,.vgl-toggle u{position:relative;width:6px;height:6px;border-radius:50%;background:currentColor;text-decoration:none;will-change:transform}   /* its own layer: the pulse runs on the compositor */
/* the live pulse: a disc that grows and fades (transform / opacity only: no repaint per frame) */
.vgl-head em u::after,.vgl-toggle u::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0;animation:vgl-live 2s ease-out infinite;will-change:transform,opacity}   /* on the compositor: no style pass per frame */
.vgl-row{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.vgl-row b{font:700 var(--ios-t-footnote)/1.2 var(--vd-font);color:var(--ink);font-variant-numeric:tabular-nums}
.vgl-row b.is-pos{color:#139c55}.vgl-row b.is-warn{color:#df3f44}
html.vgd #shared-workshop button.vgl-toggle{display:inline-flex;align-items:center;gap:7px;width:auto;min-height:44px;margin:0;padding:0 16px;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--vd-card)!important;box-shadow:var(--vd-shadow)!important;color:var(--muted)!important;font:600 var(--ios-t-footnote)/1 var(--vd-font)}
html.vgd #shared-workshop button.vgl-toggle[aria-pressed="true"]{color:#139c55!important}
html.vgd #shared-workshop button.vgl-toggle[aria-pressed="false"] u{opacity:.4}
html.vgd #shared-workshop button.vgl-toggle[aria-pressed="false"] u::after{animation:none;display:none}
@keyframes vgl-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
@keyframes vgl-live{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.3);opacity:0}}
/* mouse / trackpad screens: the same 2 s pulse, then 2 s still — each pulse frame re-blurs the frosted cards over the 3D
   stage; while still, nothing is drawn (the presence pulse does the same: vg-presence.css) */
@media (hover:hover) and (pointer:fine){.vgl-head em u::after,.vgl-toggle u::after{animation-name:vgl-live-rest;animation-duration:4s}}
@keyframes vgl-live-rest{0%{transform:scale(1);opacity:.55}50%,100%{transform:scale(3.3);opacity:0}}
@media (max-width:760px){html.vgd button.vgl-card{width:calc((100vw - 40px) / 3);gap:2px;padding:8px 9px;border-radius:var(--ios-r)!important;font-size:var(--ios-t-caption2)}.vgl-head{gap:6px;margin:0 0 2px}.vgl-head>i{display:none}.vgl-head b{font-size:var(--ios-t-caption1);line-height:1.15;overflow-wrap:anywhere}.vgl-head em{font-size:var(--ios-t-caption2)}.vgl-row{flex-direction:column;gap:1px}.vgl-row b{font-size:var(--ios-t-subhead)}}

/* ---- Workshop glass panes (the other apps' cards and bars are flat: see above) ------------------------------------- */
html.vgd #shared-workshop :is(.vg-card,.vgw-team),
html.vgd #shared-workshop .vgw-apps,html.vgd #shared-workshop .vgw-top,html.vgd #shared-workshop .vgw-side,
html.vgd button.vgl-card,.vgd-theme{background:var(--vd-sheen),var(--vd-frost)!important;border-color:var(--vd-frost-edge)!important;backdrop-filter:blur(16px) saturate(1.3)!important;-webkit-backdrop-filter:blur(16px) saturate(1.3)!important;box-shadow:inset 0 1px 0 var(--vd-frost-edge),var(--vd-shadow)!important}
html.vgd button.vgl-card.is-on{box-shadow:inset 0 1px 0 var(--vd-frost-edge),var(--vd-lift)!important}
/* Workshop top bar: no backdrop filter — it would make the bar the containing block of the fixed location inspector
   (global search lives inside the bar), squeezing the inspector to the bar's height. It only sits over the flat page. */
html.vgd #shared-workshop .vgw-top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media (max-width:760px){.vgd-theme{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

/* ---- Workshop 3D: every scene name is the same pill (the tappable locations included) with a soft drop shadow; the
   selected location fills like a current pill; a location whose live card is on screen hides its pill (one name) ------ */
html.vgd #labels .lbl span{box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 16px -6px rgba(0,0,0,.55);transition:background-color .25s,color .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
html.vgd #labels .lbl b{box-shadow:0 1px 3px rgba(0,0,0,.35)}
html.vgd #labels .vg-scene-location:hover span{transform:translateY(-1px)}
html.vgd #labels .vg-scene-location[aria-pressed="true"] span{background:var(--vd-act);color:var(--vd-act-ink);border-color:transparent;outline:0}
html.vgd #labels .vg-scene-location.vgl-covered{display:none}

/* ---- motion: one entrance when an app opens (vg-dash.js sets html.vgd-enter for 1.6 s) -------------------------------- */
@keyframes vgd-rise{from{opacity:0;filter:blur(12px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}   /* no scale: controls keep their real size while they arrive */
@keyframes vgd-fade{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:none}}
@keyframes vgd-spin{from{transform:rotate(-90deg) scale(.6)}to{transform:none}}
html.vgd-enter #app main>*,html.vgd-enter .pj .pj-main>*{animation:vgd-rise .75s cubic-bezier(.2,.75,.2,1) both}
html.vgd-enter #app main>:nth-child(2),html.vgd-enter .pj .pj-main>:nth-child(2){animation-delay:.07s}
html.vgd-enter #app main>:nth-child(3),html.vgd-enter .pj .pj-main>:nth-child(3){animation-delay:.14s}
html.vgd-enter #app main>:nth-child(4),html.vgd-enter .pj .pj-main>:nth-child(4){animation-delay:.21s}
html.vgd-enter #app main>:nth-child(5),html.vgd-enter .pj .pj-main>:nth-child(5){animation-delay:.28s}
html.vgd-enter #app main>:nth-child(n+6),html.vgd-enter .pj .pj-main>:nth-child(n+6){animation-delay:.35s}
html.vgd-enter #shared-workshop :is(.vgw-top,.vgw-side,.vgw-panel){animation:vgd-fade .7s cubic-bezier(.2,.75,.2,1) both}
html.vgd-enter #shared-workshop .vgw-side{animation-delay:.1s}
@media (prefers-reduced-motion: reduce){html.vgd *,html.vgd *::before,html.vgd *::after{animation:none!important;transition:none!important}}

/* ======================= Glassy sidebar + glass search bar (vg-dash.js createSidebar) ================================
   One frosted panel on <body>: collapse chevron, the account, «MENÚ» with the app rows mirrored from each app's
   own switch (current app = glass pill), settings rows (theme, language, side) and «Salir». Desktop >= 900 px: docked
   left / right (html.vgd-sb-right), full or icon rail (html.vgd-sb-rail), the page padded to match. Phone: a drawer
   (html.vgd-sb-open) opened by the round glass menu button. REVERT: drop html.vgd-sb-on and the old pill rows return. */
:root{--vgd-pl:0px;--vgd-pr:0px;--vgd-sbw:244px;
  --vgd-ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --vgd-pill:var(--ios-bg-2);--vgd-pill-edge:transparent;--vgd-pill-sh:0 0 0 0 transparent;
  --vgd-av-bg:var(--ios-gray);--vgd-av-ink:#ffffff;--vgd-dim:var(--ios-scrim);--vgd-sb-bg:var(--ios-bg-2);
  --vgd-bar:var(--ios-fill);
  --vgd-bar-edge:transparent;--vgd-bar-edge-h:transparent;--vgd-bar-hi:transparent;--vgd-bar-ink:var(--ios-label-2);--vgd-bar-muted:var(--ios-label-2);
  --vgd-bar-sh:0 0 0 0 transparent;--vgd-bar-ring:var(--ios-focus-ring);--vgd-sweep:transparent;
  --vgd-hl-sheen:transparent;--vgd-hl-edge:transparent;--vgd-hl-halo:transparent;--vgd-hl-glow:0 0 0 0 transparent;
  --vgd-glow:0 0 0 0 transparent;
  --vgd-row-hl:var(--ios-blue-tint);--vgd-row-hl-edge:transparent;--vgd-row-hl-sh:0 0 0 0 transparent;
  --vgd-spring:cubic-bezier(.34,1.3,.64,1);--vgd-spring-soft:cubic-bezier(.2,.9,.25,1)}
/* spring curves (damping .68 ≈ 5 % overshoot for the gliding highlights, .86 ≈ .5 % for the panel moves) */
@supports (transition-timing-function:linear(0,1)){:root{
  --vgd-spring:linear(0,.05,.17,.322,.48,.628,.755,.858,.936,.99,1.025,1.045,1.053,1.054,1.049,1.041,1.033,1.024,1.017,1.01,1.005,1.002,.999,.998,.997,.997,.997,.998,1);
  --vgd-spring-soft:linear(0,.035,.118,.225,.34,.453,.557,.649,.728,.794,.847,.889,.922,.948,.966,.98,.99,.996,1,1.003,1.004,1.005,1.005,1.005,1.004,1.004,1.003,1.003,1)}}


html.vgd-sb-rail{--vgd-sbw:72px}
/* the room the docked panel takes (its width + the 12 px gutter): a registered property that transitions on <html>, so the
   page, Poncheo's bars and the Workshop columns (which read it through --vgd-pl / --vgd-pr) reflow together, without jumps,
   while the panel widens or narrows. 0 in the drawer shape. */
@property --vgd-sb-w{syntax:"<length>";inherits:true;initial-value:0px}
html{--vgd-sb-w:0px;transition:--vgd-sb-w .42s cubic-bezier(.22,.61,.36,1)}
html.vgd-sb-on:not(.vgd-sb-drawer){--vgd-sb-w:256px}
html.vgd-sb-on.vgd-sb-rail{--vgd-sb-w:84px}
html.vgd-sb-on:not(.vgd-sb-drawer):not(.vgd-sb-right){--vgd-pl:var(--vgd-sb-w)}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-sb-right{--vgd-pr:var(--vgd-sb-w)}
html.vgd-sb-drag{transition:none}
/* the panel's first appearance (sign-in, page start): the page takes its gutter in one step, so header controls never
   slide under a tap that is already on its way (vg-dash.js layout(): set, styled, removed in the same task) */
html.vgd-sb-boot{transition:none}
html.vg-lite{transition:none}   /* a low-end device (vg-loader.js): the page takes its new padding in one step */
html.vg-lite #vgd-sb{transition:transform .62s var(--vgd-spring-soft)}

/* the old horizontal app switches stay in the DOM (the sidebar reads them) but are not shown */
html.vgd-sb-on #app .vg-switch,html.vgd-sb-on .pj .pj-apps,html.vgd-sb-on #shared-workshop .vgw-apps{display:none!important}

/* ---- the panel ---------------------------------------------------------------------------------------------------- */
#vgd-sb{position:fixed;z-index:545;top:12px;bottom:12px;left:12px;width:var(--vgd-sbw);box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;color:var(--ink);font:400 var(--ios-t-subhead)/1.25 var(--vd-font);text-align:left;
  background:var(--vd-sheen),var(--vgd-sb-bg);border:1px solid var(--vd-frost-edge);border-radius:var(--ios-r);box-shadow:inset 0 1px 0 var(--vd-frost-edge),var(--vd-lift);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);transition:width .42s cubic-bezier(.22,.61,.36,1),transform .62s var(--vgd-spring-soft)}
html.vgd-sb-right #vgd-sb{left:auto;right:12px}
#vgd-sb.is-flip{transition:none!important}   /* dock-side move: placed back where it was, then springs to its dock (vg-dash.js setSide) */
.vgd-sb-in{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;padding:6px 12px 14px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.vgd-sb-in::-webkit-scrollbar{display:none}
#vgd-sb svg{flex:none;width:20px;height:20px}
.vgd-sb-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* full ⇄ rail: labels fade out before the panel narrows and back in after it widens (vg-dash.js toggleRail) */
#vgd-sb :is(.vgd-sb-t,.vgd-sb-lbl){transition:opacity .2s ease}
#vgd-sb.is-fading :is(.vgd-sb-t,.vgd-sb-lbl){opacity:0;transition-duration:.14s}
/* the glass pill that glides under the hovered / focused row and rests on the current app: vg-nav.js glider, one element
   (.vgn-hl, vg-nav.css), transform only. The rows stay bare: the pill is the only highlight. */
/* The mobile drawer keeps a close button above the account. */
.vgd-sb-head{display:none}
html.vgd-sb-drawer .vgd-sb-head{display:flex;justify-content:flex-end}
#vgd-sb button.vgd-sb-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border-radius:50%;border:1px solid transparent;background:transparent;box-shadow:none;color:var(--muted);cursor:pointer;transition:background-color .25s,color .25s}
#vgd-sb button.vgd-sb-btn:hover{background:var(--vd-hover);color:var(--ink)}
/* the round chevron on the panel's outer edge (half outside): collapses the panel to the icon rail and back. 32 px glass
   disc, a 44 px touch area around it (::before). Hidden where the rail is the only shape and in the drawer. */
#vgd-sb>button.vgd-sb-col{position:absolute;z-index:2;top:26px;right:-17px;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;color:var(--ink);
  background:var(--vd-sheen),var(--vgd-pill);border:1px solid var(--vgd-pill-edge);box-shadow:inset 0 1px 0 var(--vgd-pill-edge),var(--vgd-pill-sh);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  transition:background-color .25s,color .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
#vgd-sb>button.vgd-sb-col::before{content:"";position:absolute;inset:-6px;border-radius:50%}
#vgd-sb>button.vgd-sb-col:hover{transform:scale(1.08)}
#vgd-sb>button.vgd-sb-col svg{width:18px;height:18px;transition:transform .55s var(--vgd-spring)}
html.vgd-sb-right #vgd-sb>button.vgd-sb-col{right:auto;left:-17px}
html.vgd-sb-rail .vgd-sb-col svg,html.vgd-sb-right .vgd-sb-col svg{transform:rotate(180deg)}
html.vgd-sb-right.vgd-sb-rail .vgd-sb-col svg{transform:none}
html.vgd-sb-auto #vgd-sb>button.vgd-sb-col{display:none}
/* count badge on the current app's row (Poncheo: what waits in «Revisar»); a small disc on the icon in the rail */
#vgd-sb .vgd-sb-row[data-count]::after{content:attr(data-count);margin-left:auto;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--ios-r-s);background:var(--vd-act);color:var(--vd-act-ink);font:700 var(--ios-t-caption1)/20px var(--vd-font);text-align:center;letter-spacing:0}
html.vgd-sb-rail #vgd-sb .vgd-sb-row[data-count]::after{position:absolute;top:5px;right:5px;margin:0;min-width:18px;height:18px;padding:0 4px;font-size:var(--ios-t-caption2);line-height:18px;box-shadow:0 0 0 2px var(--vgd-sb-bg)}
/* account */
.vgd-sb-user{display:flex;align-items:center;gap:11px;min-height:60px;margin:6px 0 4px;padding:8px 10px;box-sizing:border-box;border-radius:var(--ios-r);background:color-mix(in srgb,var(--vd-card) 50%,transparent);border:1px solid var(--line)}
.vgd-sb-user>.vgd-sb-t{display:flex;flex-direction:column;gap:3px}
.vgd-sb-user b{font:600 var(--ios-t-subhead)/1.15 var(--vd-font);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}   /* a long name takes up to three lines (one cut it to «TEST Maximiliano Alejan…») */
.vgd-sb-user small{font:400 var(--ios-t-caption1)/1.2 var(--vd-font);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
#vgd-sb .vgp-av{position:relative;display:inline-grid;place-items:center;flex:none;overflow:hidden;width:40px;height:40px;border-radius:50%;background:var(--vgd-av-bg);color:var(--vgd-av-ink);font:700 var(--ios-t-subhead)/1 var(--vd-font);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);user-select:none;-webkit-user-select:none}
#vgd-sb .vgp-av::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.38),rgba(255,255,255,0) 46%);pointer-events:none}
#vgd-sb .vgp-av img{display:block;width:100%;height:100%;object-fit:cover}
/* «MENÚ», rows, divider */
.vgd-sb-lbl{margin:10px 12px 4px;font:700 var(--ios-t-caption2)/1 var(--vd-font);color:var(--muted)}
.vgd-sb-apps,.vgd-sb-set{display:flex;flex-direction:column;gap:3px}
#vgd-sb .vgd-sb-row{position:relative;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px;width:100%!important;min-width:0;min-height:44px!important;height:auto;margin:0!important;padding:0 14px!important;box-sizing:border-box;border-radius:999px!important;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;font:400 var(--ios-t-subhead)/1.2 var(--vd-font)!important;letter-spacing:0;text-transform:none;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transform:none;
  transition:background-color .25s,border-color .25s,box-shadow .25s,color .25s,scale .2s var(--vgd-spring)}
#vgd-sb .vgd-sb-row svg{color:var(--muted);transition:color .25s,transform .4s var(--vgd-spring)}
#vgd-sb :is(a,button).vgd-sb-row:active{background:var(--ios-fill-4)}
@media (hover:none){#vgd-sb a.vgd-sb-row:hover,#vgd-sb button.vgd-sb-row:hover{background:var(--vd-hover)!important}}   /* touch: no gliding highlight */
#vgd-sb a.vgd-sb-row:hover svg,#vgd-sb button.vgd-sb-row:hover svg{color:var(--ink)}
@media (hover:hover){
  #vgd-sb :is(a,button).vgd-sb-row:hover svg{transform:translateX(2px) scale(1.08)}   /* the icon nudges toward its label */
  html.vgd-sb-right #vgd-sb :is(a,button).vgd-sb-row:hover svg{transform:translateX(-2px) scale(1.08)}
  html.vgd-sb-rail #vgd-sb :is(a,button).vgd-sb-row:hover svg{transform:scale(1.12)}
  #vgd-sb button.vgd-sb-col:hover svg{scale:1.1}
}
/* the current app: bold, the gliding pill rests on it (no fill of its own, so one pill is ever seen) */
#vgd-sb .vgd-sb-row.is-cur{cursor:default}
html.vgd-app-workshop #vgd-sb .vgd-sb-row.is-cur{font-weight:600!important}
#vgd-sb .vgd-sb-row.is-cur svg,#vgd-sb .vgd-sb-row.vgn-under svg{color:var(--ink)}
@media (hover:none){#vgd-sb .vgd-sb-row.is-cur:hover{background:transparent!important}}
.vgd-sb-hr{width:auto;height:1px;margin:10px 8px;border:0;background:var(--line)}
.vgd-sb-foot{margin-top:auto;padding-top:10px}
#vgd-sb .vgd-sb-out{color:var(--muted)!important}
#vgd-sb :is(a,button):focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 55%,transparent);outline-offset:2px}
/* the grip: a short handle on top of the panel — drag it across the page (or press it) to dock on the other side */
#vgd-sb button.vgd-sb-grip{flex:none;display:grid;place-items:center;width:100%;height:24px;min-height:24px;margin:0;padding:6px 0 0;border:0;background:transparent;box-shadow:none;color:var(--muted);cursor:grab;touch-action:none;border-radius:var(--ios-r) var(--ios-r) 0 0}
#vgd-sb button.vgd-sb-grip svg{width:34px;height:12px;transform:rotate(90deg);opacity:.75;transition:opacity .2s}
#vgd-sb button.vgd-sb-grip:hover svg{opacity:1}
#vgd-sb{flex-direction:column}
#vgd-sb>.vgd-sb-grip{order:-1}
html.vgd-sb-drag #vgd-sb{transition:none;cursor:grabbing;box-shadow:inset 0 1px 0 var(--vd-frost-edge),0 30px 60px -20px rgba(0,0,0,.55);opacity:.94}
html.vgd-sb-drag,html.vgd-sb-drag *{cursor:grabbing!important;user-select:none}
/* desktop icon rail: labels kept for screen readers and tooltips (title) */
html.vgd-sb-rail #vgd-sb .vgd-sb-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html.vgd-sb-rail .vgd-sb-in{padding:4px 8px 12px;align-items:center}
html.vgd-sb-rail .vgd-sb-lbl{display:none}
html.vgd-sb-rail .vgd-sb-user{justify-content:center;width:52px;min-height:52px;padding:0;background:none;border:0;margin:6px 0 8px}
html.vgd-sb-rail #vgd-sb .vgd-sb-row{width:48px!important;min-height:48px!important;padding:0!important;justify-content:center!important;gap:0}
html.vgd-sb-rail .vgd-sb-apps,html.vgd-sb-rail .vgd-sb-set{align-items:center}
html.vgd-sb-rail .vgd-sb-hr{width:36px;align-self:center}

/* ---- docked (full panel >= 1100 px, the icon rail 760–1099 or by choice): the page padded to match. The shape is an
   html class written by vg-dash.js (vgd-sb-drawer / vgd-sb-rail / vgd-sb-auto), so CSS and script agree at every width. */
html.vgd-sb-on:not(.vgd-sb-drawer) :is(.vgd-sb-fab,.vgd-sb-dim),html.vgd-sb-on:not(.vgd-sb-drawer) #vgd-sb button.vgd-sb-x{display:none!important}
html.vgd-sb-on:not(.vgd-sb-drawer):is(.vgd-app-poncheo,.vgd-app-projects) body{padding-left:var(--vgd-pl)!important;padding-right:var(--vgd-pr)!important}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-poncheo #app :is(nav.tabs,.sheet){left:var(--vgd-pl)!important;right:var(--vgd-pr)!important}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-poncheo #app .vg-more-pop{right:calc(8px + var(--vgd-pr))!important}
/* Workshop: every column (top bar, section menu, panel, scene, inspector) moves over by the panel's width */
html.vgd-sb-on:not(.vgd-sb-drawer).vg-shared.vgd-app-workshop{--vgw-l0:calc(214px + var(--vgd-pl));--vgw-l-open:calc(666px + var(--vgd-pl));--vgw-r:calc(12px + var(--vgd-pr))}
html.vgd-sb-on:not(.vgd-sb-drawer).vg-shared.vgd-app-workshop.vgw-inspector-open{--vgw-r:calc(var(--vgw-insp) + 24px + var(--vgd-pr))}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-workshop #shared-workshop .vgw-top{left:calc(12px + var(--vgd-pl));right:calc(12px + var(--vgd-pr))}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-workshop #shared-workshop .vgw-side{left:calc(12px + var(--vgd-pl))}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-workshop #shared-workshop .vg-global dialog.vg-inspector{right:calc(12px + var(--vgd-pr))}
html.vgd-sb-on:not(.vgd-sb-drawer).vgd-app-workshop body #sheet3d{right:calc(12px + var(--vgd-pr))}
@media (min-width:900px) and (max-width:1150px){html.vgd-sb-on:not(.vgd-sb-drawer).vg-shared.vgd-app-workshop{--vgw-l0:calc(174px + var(--vgd-pl));--vgw-l-open:calc(586px + var(--vgd-pl))}}

/* ---- the drawer (<= 760 px, a touch screen held upright, the Workshop under 900): off-canvas from the docked side, the
   round menu button in the header, a dim backdrop; Poncheo's bottom bar stays the tab bar under it -------------------- */
.vgd-sb-fab{display:none}
html.vgd-sb-drawer #vgd-sb{z-index:10001;top:0;bottom:0;left:0;width:min(300px,84vw);border-radius:0 var(--ios-r) var(--ios-r) 0;border-left:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateX(calc(-100% - 30px));visibility:hidden;transition:transform .6s var(--vgd-spring-soft),visibility 0s linear .6s}
html.vgd-sb-drawer.vgd-sb-right #vgd-sb{left:auto;right:0;border-radius:var(--ios-r) 0 0 var(--ios-r);border-left:1px solid var(--vd-frost-edge);border-right:0;transform:translateX(calc(100% + 30px))}
html.vgd-sb-drawer.vgd-sb-open #vgd-sb{transform:none;visibility:visible;transition:transform .6s var(--vgd-spring-soft),visibility 0s}
html.vgd-sb-drawer #vgd-sb>button.vgd-sb-col,html.vgd-sb-drawer #vgd-sb button.vgd-sb-grip{display:none}
html.vgd-sb-drawer .vgd-sb-in{padding-top:10px}
/* the backdrop: dims and blurs in (opacity only — the blur itself is never animated) */
html.vgd-sb-drawer .vgd-sb-dim{position:fixed;inset:0;z-index:10000;background:var(--vgd-dim);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);opacity:0;visibility:hidden;transition:opacity .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear .38s}
html.vgd-sb-drawer.vgd-sb-open .vgd-sb-dim{opacity:1;visibility:visible;transition:opacity .38s cubic-bezier(.22,.61,.36,1),visibility 0s}
/* the rows arrive with the drawer, a few px behind it */
html.vgd-sb-drawer.vgd-sb-open #vgd-sb :is(.vgd-sb-user,.vgd-sb-apps,.vgd-sb-set,.vgd-sb-foot){animation:vgd-sb-in .42s cubic-bezier(.22,.61,.36,1) both}
html.vgd-sb-drawer.vgd-sb-open #vgd-sb .vgd-sb-apps{animation-delay:.03s}
html.vgd-sb-drawer.vgd-sb-open #vgd-sb .vgd-sb-set{animation-delay:.06s}
html.vgd-sb-drawer.vgd-sb-open #vgd-sb .vgd-sb-foot{animation-delay:.09s}
html.vgd-sb-drawer.vgd-sb-open.vgd-sb-right #vgd-sb :is(.vgd-sb-user,.vgd-sb-apps,.vgd-sb-set,.vgd-sb-foot){animation-name:vgd-sb-in-r}
/* the round menu button, DOCKED in the app's own header row (vg-dash.js dock(): Poncheo `.top`, Proyectos `.pj-top`, the
   Workshop top bar): its first item, its last when the menu is docked right. It never floats over the page, so nothing
   scrolls under it; it wears the same pill as the header buttons next to it. */
html.vgd-sb-drawer button#vgd-sb-fab{position:relative;z-index:1;flex:none;order:-1;align-self:center;display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px;min-height:44px!important;margin:0!important;padding:0!important;border-radius:50%!important;cursor:pointer;
  color:var(--ink)!important;background:var(--vd-card)!important;border:1px solid var(--line)!important;box-shadow:var(--vd-shadow)!important;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .25s}
html.vgd-sb-drawer button#vgd-sb-fab svg{width:20px;height:20px}
html.vgd-sb-drawer button#vgd-sb-fab:active{transform:scale(.94)}
html.vgd-sb-drawer.vgd-sb-right button#vgd-sb-fab{order:0}   /* (0, last in the DOM: after the header's controls, before a bar's ::after mark) */
html.vgd-sb-drawer.vgd-sb-right.vgd-app-poncheo button#vgd-sb-fab{order:2}   /* Poncheo: right after the header buttons (on tablets the search keeps its own row below) */
html.vgd-sb-drawer.vgd-sb-open button#vgd-sb-fab{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){html.vgd-sb-drawer button#vgd-sb-fab{transition:none}html.vgd-sb-drawer button#vgd-sb-fab:active{transform:none}}
html.vgd-sb-drawer .pj .pj-top{justify-content:flex-start}   /* the button and the name together at the start; the header buttons keep margin-left:auto */
/* room for it in each header row (no header grows taller, so the first screen keeps what it showed):
   Poncheo phones (<= 540 px): the button takes the 44 px of the header's light / dark button, whose switch is the menu's
   first settings row there (one tap away); the row keeps its controls and height — where the header takes two rows
   (vg-ui.css: the name on its own row) the button leads the second row */
@media (max-width:540px){html.vgd-sb-drawer.vgd-app-poncheo #app .top .topr>.vgd-theme{display:none}}
@media (max-width:366px){
  html.vgd-sb-drawer.vgd-app-poncheo #app#app .top>button#vgd-sb-fab{order:1}
  html.vgd-sb-drawer.vgd-sb-right.vgd-app-poncheo #app#app .top>button#vgd-sb-fab{order:2}
}
@media (max-width:416px){
  html.vgd-sb-drawer.vgd-app-poncheo #app#app .top:has(.topsearch .vg-global>button+button)>button#vgd-sb-fab{order:1}
  html.vgd-sb-drawer.vgd-sb-right.vgd-app-poncheo #app#app .top:has(.topsearch .vg-global>button+button)>button#vgd-sb-fab{order:2}
}
/* Proyectos / Workshop phones (<= 430 px): the button sits at the start of the row (Poncheo hides
   its title on very narrow screens); the module name stays beside it. */
@media (max-width:430px){
  html.vgd-sb-drawer .pj .pj-top{gap:8px}
  html.vgd-sb-drawer .pj:not(#vgd-sb) .pj-top .brand b{font-size:var(--ios-t-body)}
  html.vgd-sb-drawer.vgd-app-workshop #shared-workshop .vgw-top h1{margin:0;font-size:var(--ios-t-body)}
}
/* the narrowest phones, menu docked right: Proyectos keeps the button on the name's row (the header buttons go below) */
@media (max-width:340px){html.vgd-sb-drawer.vgd-sb-right .pj:not(#vgd-sb) .pj-top .brand{flex:1 1 calc(100% - 52px)}}

/* ---- global search sheet / panel: the same glass (frosted panel, glass search field) -------------------------------- */
html.vgd .vg-global dialog:not(.vg-inspector){background:var(--vd-sheen),var(--vg-panel-bg)!important;border:1px solid var(--vd-frost-edge)!important;border-radius:var(--ios-r)!important;box-shadow:inset 0 1px 0 var(--vd-frost-edge),var(--vd-lift)!important;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
html.vgd .vg-global dialog::backdrop{background:var(--vgd-dim);backdrop-filter:blur(3px)}
html.vgd .vg-global dialog header{background:transparent!important}
html.vgd .vg-global dialog input[data-query]{min-height:46px;border-radius:999px!important;padding-left:44px!important;color:var(--vgd-bar-ink)!important;border:1px solid var(--vgd-bar-edge)!important;box-shadow:inset 0 1px 0 var(--vgd-bar-hi),var(--vgd-bar-sh)!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f5f7' stroke-opacity='.85' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") 15px 50%/18px 18px no-repeat,var(--vgd-bar)!important}
html.vgd .vg-global dialog input[data-query]::placeholder{color:var(--vgd-bar-muted)!important}
html.vgd .vg-global dialog input[data-query]:focus{outline:none;border-color:var(--vgd-bar-edge-h)!important;box-shadow:inset 0 1px 0 var(--vgd-bar-hi),0 0 0 4px var(--vgd-bar-ring),var(--vgd-bar-sh)!important}
@media (max-width:899px){html.vgd .vg-global dialog:not(.vg-inspector){border-radius:var(--ios-r) var(--ios-r) 0 0!important;border-bottom:0!important}}

/* ======================= Glassy navbar motion (header pills) ========================================================
   The header pills (Poncheo `.top .topr`, Proyectos `.pj-top .topr`, the Workshop top bar, the sun / moon pill): each pill
   glows a little on hover and dips (scale .96) while pressed, inside itself (the floating ring over them was removed); the glass search bars widen a touch, brighten and a light band sweeps across them (rules above). */
:root{--vgd-sweep-l:linear-gradient(100deg,transparent 35%,var(--vgd-sweep) 50%,transparent 65%)}
html.vgd :is(.vgd-theme>button,#app .top .topr>:is(button,.vgl),.pj .pj-top .topr>button,#shared-workshop .vgw-top>button){transition:background-color .25s,color .25s,border-color .3s,box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1),scale .22s var(--vgd-spring)}
html.vgd :is(.vgd-theme>button,#app .top .topr>:is(button,.vgl),.pj .pj-top .topr>button,#shared-workshop .vgw-top>button):active{filter:brightness(.9)}
@media (hover:hover){
  html.vgd #app .top .topr>button:not(.vgd-tb):hover,html.vgd #app .top .iconbtn:hover,html.vgd .pj .pj-top .topr>button:hover,html.vgd #shared-workshop .vgw-top>button:hover{border-color:var(--line-2)!important;box-shadow:var(--vgd-glow),var(--vd-shadow)!important}
}

/* ======================= theme switch: vg-dash.js setTheme -> vg-loader.js revealTheme ===========================
   a View Transition circle (the snapshot rules and html.vgk-switching / html.vgk-still live in vg-loader.css). */

@keyframes vgd-sb-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes vgd-sb-in-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){html{transition:none}}

/* ======================= every screen: glass without live blurs ===================================================
   A backdrop blur re-renders everything under it on every scroll / 3D frame, the costliest thing a GPU draws here
   (a laptop's integrated GPU as much as a phone's), and translucent panes over the 3D let it show through. The frosted
   chrome (header, search, hero, bottom bar, sidebar, 3D cards and labels, menu button, dialogs) keeps its look with the
   glass colour pre-blended over the page colour (opaque) and no blur — the phone look, on mouse screens too since
   22-oct (vg-loader.css drops any remaining blur). Poncheo's own glass: vg-glass-poncheo.css; presence: vg-presence.css. */
@media all{
  :root:root,:root:root[data-theme="light"]{--vd-frost:var(--ios-bar);--vgd-sb-bg:var(--ios-bg-2)}
  
  html.vgd:root #app#app .top{background:var(--ios-bar)!important}
  html.vgd:root button.vgl-card{background:var(--vd-card)!important}
  html.vgd:root :is(#app#app,#shared-workshop#shared-workshop) .vg-global>button[data-global="open"],html.vgd:root #app#app .top,
  html.vgd:root #app#app nav.tabs,
  html.vgd:root button.vgl-card,html.vgd:root .vgd-theme,html.vgd:root #vgd-sb#vgd-sb,html.vgd:root #vgd-sb>button.vgd-sb-col,
  html.vgd:root .vgd-sb-dim,html.vgd:root button#vgd-sb-fab#vgd-sb-fab,html.vgd:root .vg-global dialog,html.vgd:root .vg-global dialog::backdrop,
  html.vgd:root #app :is(.card,.vg-card),html.vgd:root #shared-workshop :is(.vg-card,.vgw-team),
  html.vgd:root #app .vg-switch,html.vgd:root #shared-workshop :is(.vgw-apps,.vgw-top,.vgw-side){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Apple base: in Poncheo and Proyectos the drawer button is a plain bar glyph (blue, no outlined pill) */
html.vgd-sb-drawer:not(.vgd-app-workshop) button#vgd-sb-fab{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ios-blue)!important}
/* Poncheo / Proyectos / Estadísticas drawer (not the Workshop): the current app is the iOS sidebar selection — blue tint,
   blue icon and label, regular weight; the «Menú» header is a 13 px regular list header */
html:not(.vgd-app-workshop) #vgd-sb .vgn-hl{background:var(--ios-blue-tint);border-color:transparent;box-shadow:none}
html:not(.vgd-app-workshop) #vgd-sb .vgd-sb-row.is-cur{color:var(--ios-blue-text)!important}   /* the row rule above forces its colour */
html:not(.vgd-app-workshop) #vgd-sb .vgd-sb-row.is-cur svg{color:var(--ios-blue)}
html:not(.vgd-app-workshop) .vgd-sb-lbl{margin:12px 12px 6px;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2)}