/* Vision Glass motion layer (docs/design/MOTION-SYSTEM-ES.md). Loaded after vg-ui.css by app.js and shop/shared-workshop.js.
   Visual layer: shared spacing, rounded controls and bounded decorative effects; no business handlers.
   Theme: the quiet controls (2), the miniature search logo (3) and the menu reveals (4) apply in both themes; the
   GlassFold canvas (1) only with html.vg-dark (set by vg-motion.js with the same rule as the tokens).
   Primary actions (.vg-flow) are NOT styled here: they keep the original Flow of vg-ui.css / styles.css (dark glass capsule,
   white outline, white fill from the centre, .fl-on label layer). The sign-in logo keeps its original .brandmark layers. */

/* ======================= 1 GlassFold background (one canvas per page, created by vg-motion.js) ======================= */
#vg-glassfold{position:fixed;inset:0;z-index:-1;display:block;width:100vw;height:100vh;opacity:.55;pointer-events:none}
html.vg-bg-on body{background:transparent!important}       /* html keeps the charcoal gradient as the fallback underneath */

/* ======================= 2 Quiet controls; smoke only in the wide search launcher ======================= */
/* Apple base: a quiet control is the iOS gray button (tertiary fill, no outline); the .vg-* base components that
   vg-motion.js also marks .vg-control (segmented, cells, buttons, chips…) keep their own look */
:root{--vg-control-bg:var(--ios-fill);--vg-control-edge:transparent;--vg-control-ink:var(--ios-label)}
: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>*)){
  box-sizing:border-box;border-radius:var(--ios-r)!important;background:var(--vg-control-bg)!important;
  color:var(--vg-control-ink)!important;border:1px solid var(--vg-control-edge)!important;
  text-shadow:none!important;box-shadow:none!important;
}
:root :is(#app,#shared-workshop,#bar3d,#sheet3d) .vg-control{padding:10px 16px;min-height:44px;text-align:center;line-height:1.3}
: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"]){border-color:transparent!important;box-shadow:none!important}
:root :is(#app#app,#shared-workshop#shared-workshop,#bar3d#bar3d,#sheet3d#sheet3d) .vg-control:focus-visible{outline:3px solid var(--ios-blue);outline-offset:3px}
@media(hover:hover){: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){background:var(--ios-fill-1)!important;border-color:transparent!important}}
:root :is(#app,#shared-workshop,#bar3d,#sheet3d) .vg-control:disabled{opacity:.55;cursor:default}
/* A job row is already a card: its summary is the same large control, not a second pill inside it. */
:root #app#app .vg-field-row>summary.vg-control,
:root #app#app .vg-field-row>summary.vg-control:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
:root #app .tabs{gap:8px;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
:root #app .tabs button.vg-control{padding:4px 2px;min-height:49px;justify-content:center;border-radius:0!important}
:root #app .tabs button:not([aria-expanded="true"]) .ic{background:transparent!important;box-shadow:none!important}
:root #app .vg-switch{gap:8px;padding:6px}
:root #app .hday details>summary.vg-control{justify-content:center;padding:12px 18px;margin:10px 0}
:root #app .vg-more .vg-control{padding:12px 16px}
:root #shared-workshop .vgw-apps{gap:8px}
:root #shared-workshop .vgw-apps>*{border-radius:var(--ios-r);justify-content:center;padding:10px 16px}
:root #shared-workshop .vgw-side{gap:8px}
:root #shared-workshop .vgw-more-list{gap:8px}
:root #shared-workshop .vgw-side .vgw-item.vg-control{padding:12px 14px;justify-content:flex-start;text-align:left}
:root #shared-workshop .vg-inventory td button[data-inv="select"].vg-control{padding:12px 16px;text-align:center;text-decoration:none;overflow-wrap:anywhere}
:root #bar3d{gap:8px;padding:6px}
:root #bar3d button.vg-control{padding:8px 12px;justify-content:center}
:root :is(#app,#shared-workshop) :is(.actions,.actions2,.seg){gap:8px}
:root :is(#app,#shared-workshop) .vg-control.iconbtn{padding:8px;border-radius:999px!important}
:root :is(#app,#shared-workshop) .vgl-opt.vg-control{padding:0;border-radius:999px!important}
.vg-sm-host{isolation:isolate}.vg-sm-rel{position:relative!important}
.vg-sm-host>canvas.vg-sm{position:absolute;z-index:-1;inset:0;display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none;opacity:0}
.vg-sm-ready>canvas.vg-sm{opacity:1}
@media(max-width:899px){
  #app .vg-sm-host>canvas.vg-sm{display:none}
  :root #shared-workshop .vgw-side{gap:4px;padding:5px}
  :root #shared-workshop .vgw-side>button.vg-control,:root #shared-workshop .vgw-side>details>summary.vg-control{padding:6px 3px;justify-content:center;text-align:center;border-radius:var(--ios-r)!important}
  :root #bar3d{gap:5px}
  :root #bar3d button.vg-control{padding:4px 3px}
  :root #app .tabs{gap:5px;padding-inline:6px}
  :root #app .tabs button.vg-control{font-size:var(--ios-t-caption1)}
}

/* ======================= 3 Search: animated query hints ======================= */
:is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow){position:relative}
:is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow)::after{content:"códigos, nombres, lugares…";content:"códigos, nombres, lugares…" / "";position:absolute;top:50%;right:14px;max-width:calc(100% - 13em);overflow:hidden;white-space:nowrap;text-overflow:clip;
  padding-left:10px;border-left:1px solid var(--vg-line-2);transform:translateY(-50%);font:400 var(--ios-t-subhead)/1.6 var(--vg-font-ui);color:var(--vg-muted);opacity:.85;pointer-events:none;
  clip-path:inset(0 calc(100% - 11px) 0 0);animation:vg-type 7s steps(26,end) infinite;transition:opacity 200ms ease}
html[lang^="en"] :is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow)::after{content:"codes, names, places…";content:"codes, names, places…" / ""}
:is(#app,#shared-workshop) .vg-global>button[data-global="open"]:is(:focus,:focus-visible)::after,:is(#app,#shared-workshop) .vg-global:has(dialog[open])>button[data-global="open"]::after{opacity:0;animation:none}
@media (max-width:899px){:is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow)::after{display:none}}
html.vg-doc-hidden :is(#app,#shared-workshop) .vg-global>button[data-global="open"]::after{animation-play-state:paused!important}
@keyframes vg-type{0%,8%{clip-path:inset(0 calc(100% - 11px) 0 0)}45%,82%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 calc(100% - 11px) 0 0)}}

/* ======================= 4 Menus: charcoal circle reveal + staggered options ======================= */
/* Poncheo "Más" popup (app.js): opens from its bottom-bar button; --vg-ox = the button's centre inside the popup */
/* fill backwards: the circle only exists while it grows — kept after the end (fill both) it stayed as the popup's clip, and on
   a large screen (the button far from the popup) the 160 % circle left the top-right of the menu cut off */
#app .vg-more-pop.vg-reveal{animation:vg-circle-from 420ms cubic-bezier(.23,1,.32,1) backwards}
#app .vg-more-pop.vg-reveal .vg-more-item{animation:vg-item-in 300ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--vg-i,0) * 30ms + 90ms)}
/* its button shows an X while the popup is open (same <svg> box, strokes hidden, X painted through a mask) */
#app .tabs [data-t="menu"][aria-expanded="true"] svg,
#shared-workshop details.vgw-more[open]>summary>svg:first-child{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;animation:vg-x-in 260ms cubic-bezier(.23,1,.32,1)}
#app .tabs [data-t="menu"][aria-expanded="true"] svg>*,#shared-workshop details.vgw-more[open]>summary>svg:first-child>*{visibility:hidden}
/* Workshop "Más": phone popup expands from the trigger corner (bottom-right of the bar); desktop inline list: items only */
#shared-workshop details.vgw-more.vg-reveal[open] .vgw-more-list>*{animation:vg-item-in 320ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--vg-i,0) * 35ms + 80ms)}
@media (max-width:899px){#shared-workshop details.vgw-more.vg-reveal[open] .vgw-more-list{animation:vg-circle-br 420ms cubic-bezier(.23,1,.32,1) backwards}}
@keyframes vg-circle-from{from{clip-path:circle(0% at var(--vg-ox,85%) calc(100% + 34px))}to{clip-path:circle(150vmax at var(--vg-ox,85%) calc(100% + 34px))}}
@keyframes vg-circle-br{from{clip-path:circle(0% at 100% 100%)}to{clip-path:circle(150vmax at 100% 100%)}}
@keyframes vg-item-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vg-x-in{from{transform:rotate(-90deg)}to{transform:none}}

/* ======================= reduced motion: everything static ======================= */
@media (prefers-reduced-motion: reduce){
  html.vg-dark{--vg-smoke-run:none}      /* smoke: the static plume frame remains, nothing drifts */
  :is(#app,#shared-workshop) .vg-global>button[data-global="open"]::before{animation:none!important}
  :is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow)::after{animation:none!important;clip-path:none}
  #app .vg-more-pop.vg-reveal,#app .vg-more-pop.vg-reveal .vg-more-item,#shared-workshop details.vgw-more.vg-reveal .vgw-more-list,#shared-workshop details.vgw-more.vg-reveal .vgw-more-list>*,#app .tabs [data-t="menu"][aria-expanded="true"] svg,#shared-workshop details.vgw-more[open]>summary>svg:first-child{animation:none!important}
}


/* Workshop options must stay inside the usable scene area, above its controls. */
html.vg-shared body #sheet3d{left:var(--vgw-l0);right:12px;bottom:112px;z-index:520;max-height:calc(100dvh - 210px);border:1px solid var(--vg-control-edge);border-radius:var(--ios-r);padding:12px 16px 16px;background:#111920;color:#edf2f6}
html.vg-shared body #sheet3d .grp{border:0;padding:0;margin:10px 0}
html.vg-shared body #sheet3d .grp>summary{justify-content:center;margin-bottom:10px}
html.vg-shared body #sheet3d .grid2{gap:10px}
html.vg-shared body #sheet3d .vgl-opt{padding:0}
@media(max-width:899px){html.vg-shared body #sheet3d{left:8px;right:8px;bottom:calc(var(--vgw-nav-h) + var(--vgw-sheet,0px) + 30px + var(--vgw-cam-h) + var(--vg-kb,0px));max-height:44dvh;padding:8px 12px 12px}}

html.vg-shared body #sheet3d:not([hidden]){display:block}
:root #app .vg-more summary.vg-control{justify-content:center;gap:8px}

html.vg-shared body #bar3d{box-sizing:border-box}
@media(max-width:899px){
 html.vg-shared{--vgw-cam-h:76px}
 html.vg-shared body #bar3d .ib{font-size:var(--ios-t-caption2);line-height:1.1}
 html.vg-shared body #sheet3d{bottom:calc(var(--vgw-nav-h) + var(--vgw-sheet,0px) + 38px + var(--vgw-cam-h) + var(--vg-kb,0px))}
}

/* One real label per language button (the legacy sliding overlay is decorative): an iOS segmented control, fill track,
   the chosen language on the white / #636366 thumb */
:root .vgl .vgl-knob{display:none!important}
:root .vgl{gap:2px;padding:2px;box-sizing:border-box;background:var(--ios-fill);border-radius:var(--ios-r-full);box-shadow:none}
:root .vgl .vgl-opt,:root .langsw.vgl .vgl-opt{color:var(--ios-label)!important;border-radius:var(--ios-r-full)!important;font-weight:var(--ios-w-regular)}
:root .vgl .vgl-opt[aria-pressed="true"]{background:var(--ios-seg-thumb);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:var(--ios-w-semibold)}
/* Full-screen controls belong to the same interactive layer as the stage. */
html.vg-shared body.expanded #shared-workshop{visibility:hidden}
html.vg-shared body.expanded #stage,html.vg-shared body.expanded #labels{inset:0!important;border-radius:0;visibility:visible}
html.vg-shared body.expanded #xbar{z-index:550;gap:8px;padding:8px;border-radius:var(--ios-r);background:rgba(12,18,24,.92);width:max-content;max-width:calc(100vw - 24px);margin:auto;box-sizing:border-box}
html.vg-shared body.expanded #xbar button{border-radius:var(--ios-r);padding:10px 16px;min-height:44px}
html.vg-shared body.expanded #xbar .anim-status{flex-basis:100%;max-width:680px;margin:0;text-align:center;color:#c9d4df;font-size:var(--ios-t-caption1);line-height:1.4}
@media(max-width:599px){html.vg-shared body.expanded #xbar{left:8px;right:8px;max-width:calc(100vw - 16px)}html.vg-shared body.expanded #xbar button{padding:8px 10px}}

html.vg-shared body.expanded #xbar button{color:#edf2f6!important;border:1px solid #586774;background:linear-gradient(180deg,#242d35,#161e26)}
html.vg-shared body.expanded #xbar button[aria-pressed="true"]{border-color:#8abbd8;box-shadow:inset 0 -2px 0 #8abbd8}
html.vg-shared body.expanded #xbar button:focus-visible{outline:3px solid #b4dcf5;outline-offset:3px}
/* «Cerrar sesión» is the destructive row: red text on the gray fill (iOS), never a plain neutral button */
:root #app#app :is(.sheet,.vg-more) button[data-act="signout"].vg-control{color:var(--ios-red-text)!important}
/* a fold summary that wears the quiet finish reads as a list row: its words start at the left (never centred) */
:root #app details>summary.vg-control{text-align:start;justify-content:flex-start}