/* ======================= Vision Glass UI — shared layer (Poncheo + Workshop) =======================
   One small layer loaded by both apps (app.js and shop/shared-workshop.js) AFTER their own stylesheets.
   It adds NO new colours: every --vg-* token is an alias of the tokens both apps already define
   (employee-app/web/styles.css, shop/dev/m16.css), so light/dark themes follow automatically.
   Guide and examples: docs/design/VG-UI-ES.md.  Rules of thumb:
     - the main action of a form/screen is <button class="primary"> -> flowify() makes it the Flow capsule
       (outline at rest, dark circle fills it black-to-white on hover/focus/press; motion in styles.css "Flow");
     - every other action is a plain <button> (secondary: rounded, 1 px outline, no fill animation);
     - destructive = button.danger; surfaces = .card / .vg-card; fields, tables, dialogs and lists below. */

:root{
  --vg-surface:var(--ios-bg-2);      /* card / dialog surface (Workshop has no --raised: --chip is its opaque card) */
  --vg-surface-2:var(--surface-2);             /* inset rows, exact-match block */
  --vg-field:var(--ios-fill);
  --vg-ink:var(--ink); --vg-muted:var(--muted); --vg-line:var(--line); --vg-line-2:var(--line-2);
  --vg-warn:var(--warn); --vg-ok:var(--ok,#2f7a4f);
  --vg-r-s:var(--ios-r-s); --vg-r-btn:var(--ios-r); --vg-r:var(--ios-r); --vg-r-l:var(--ios-r); --vg-r-pill:100px;
  --vg-hit:44px; --vg-field-h:48px;
  --vg-font-ui:var(--ios-font);
  --vg-shadow:var(--sh-card); --vg-shadow-float:var(--sh-float);
  --vg-backdrop:rgba(10,13,15,.55);
  --vg-flow-line:rgba(51,51,51,.4);            /* Flow capsule outline (same values as styles.css / m16.css) */
  --vg-press:150ms ease;                       /* press feedback, matches the Flow press */
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--vg-flow-line:rgba(255,255,255,.42);--vg-backdrop:rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--vg-flow-line:rgba(255,255,255,.42);--vg-backdrop:rgba(0,0,0,.6)}

/* ---------- surface: card ---------- */
.vg-card{background:var(--vg-surface);border:1px solid var(--vg-line);border-radius:var(--vg-r);padding:16px;margin:0 0 14px;min-width:0;box-shadow:var(--vg-shadow);color:var(--vg-ink)}
.vg-card>h2,.vg-title{font:600 var(--ios-t-footnote)/var(--ios-lh-footnote) var(--vg-font-ui);color:var(--vg-muted);margin:0 0 10px}   /* sentence case, no tracking (Apple base) */

/* ---------- secondary button (scoped to the shared modules so the rest of each app keeps its own) ---------- */
.vg-btn,
#shared-workshop button:not(.vg-flow):not(.danger),
.vg-activity button:not(.vg-flow):not(.danger),
.vg-global button:not(.vg-flow):not(.danger){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--vg-hit);max-width:100%;margin:4px 0;padding:0 18px;
  border:1px solid var(--vg-line-2);border-radius:var(--vg-r-btn);background:var(--vg-surface);color:var(--vg-ink);box-shadow:var(--sh-btn,none);
  font:600 var(--ios-t-callout)/1.2 var(--vg-font-ui);text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation;
  transition:transform var(--vg-press),border-color var(--vg-press),background-color var(--vg-press)}
@media (hover:hover) and (pointer:fine){
  .vg-btn:hover:not(:disabled),#shared-workshop button:not(.vg-flow):not(.danger):hover:not(:disabled),
  .vg-activity button:not(.vg-flow):not(.danger):hover:not(:disabled),.vg-global button:not(.vg-flow):not(.danger):hover:not(:disabled){border-color:var(--vg-line-hover,var(--vg-ink))}}
.vg-btn:active:not(:disabled),#shared-workshop button:not(.vg-flow):active:not(:disabled),
.vg-activity button:not(.vg-flow):active:not(:disabled),.vg-global button:not(.vg-flow):active:not(:disabled){transform:scale(.97)}
/* current section / pressed toggle = state indication: blue tint (Apple base: never an inverted black / white pill), no motion */
#shared-workshop button[aria-current="page"]:not(.vg-flow):not(.danger),#shared-workshop button[aria-pressed="true"]:not(.vg-flow):not(.danger),.vg-btn[aria-current="page"]{background:var(--ios-blue-tint)!important;border-color:transparent!important;box-shadow:none!important;color:var(--ios-blue)}   /* !important: see the nav current-state note below */
/* destructive stays red, outline style */
#shared-workshop button.danger,.vg-activity button.danger,.vg-global button.danger{min-height:var(--vg-hit);padding:0 18px;border-radius:var(--vg-r-btn);border:1px solid color-mix(in srgb,var(--vg-warn) 55%,transparent);background:transparent;color:var(--vg-warn);font:600 var(--ios-t-callout)/1.2 var(--vg-font-ui)}
/* disabled and busy: dim, no hover/press feedback; handlers already block repeats (duplicate submission) */
.vg-btn:disabled,#shared-workshop button:disabled,.vg-activity button:disabled,.vg-global button:disabled{opacity:.55;cursor:default;transform:none}
.vg-btn[aria-busy="true"],#shared-workshop button[aria-busy="true"]{cursor:progress}

/* ---------- primary = Flow capsule inside the shared Workshop panel ----------
   m20_shared.css styles "#shared-workshop button" with id specificity (padding, 7 px radius, background, colour), which
   would flatten the Flow capsule. Restore exactly the Flow geometry and colours here; motion stays in m16.css. */
#shared-workshop button.vg-flow{min-height:48px;padding:0 32px;margin:6px 0;border:1.5px solid var(--vg-flow-line);border-radius:var(--vg-r-pill);background:transparent;color:var(--vg-ink);font:600 var(--ios-t-body)/1.2 var(--vg-font-ui);box-shadow:none}
@media (hover:hover){#shared-workshop button.vg-flow:hover:not(:disabled){border-color:transparent;border-radius:var(--ios-r);color:var(--accent-ink)}}
#shared-workshop button.vg-flow:focus-visible,#shared-workshop button.vg-flow.is-on:not(:disabled){border-color:transparent;border-radius:var(--ios-r);color:var(--accent-ink)}
#shared-workshop button.vg-flow:disabled{opacity:.6}
/* a Flow button never shows a stuck "on" state while it is disabled or busy */
.vg-flow.vg-flow:disabled .fl-circle{opacity:0!important}

/* ---------- form fields ---------- */
#shared-workshop input:not([type=checkbox]):not([type=radio]):not([type=file]),#shared-workshop select,#shared-workshop textarea,
.vg-activity input:not([type=checkbox]):not([type=radio]),.vg-activity select,
.vg-global input:not([type=checkbox]):not([type=radio]),.vg-global select,.vg-field{
  min-height:var(--vg-field-h);width:100%;max-width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--vg-line-2);border-radius:var(--vg-r-btn);
  background-color:var(--vg-field);color:var(--vg-ink);font:inherit;box-shadow:none}
#shared-workshop textarea{min-height:88px}
#shared-workshop label,.vg-activity label,.vg-global label{font-weight:600;color:var(--vg-ink)}
#shared-workshop input[type=checkbox],#shared-workshop input[type=radio]{width:24px;height:24px;accent-color:var(--vg-ink)}
#shared-workshop ::placeholder,.vg-activity ::placeholder,.vg-global ::placeholder,.vg-field::placeholder{color:var(--vg-muted);opacity:1}

/* ---------- focus: one ring everywhere (keyboard only) ---------- */
#shared-workshop :focus-visible,.vg-activity :focus-visible,.vg-global :focus-visible,.vg-card :focus-visible{outline:3px solid var(--vg-ink);outline-offset:3px}
#shared-workshop .vg-flow.vg-flow:focus-visible,.vg-global .vg-flow.vg-flow:focus-visible,.vg-activity .vg-flow.vg-flow:focus-visible{outline:3px solid color-mix(in srgb,var(--vg-ink) 45%,transparent);outline-offset:3px}

/* ---------- Workshop shared panel: same type and surfaces as Poncheo ---------- */
#shared-workshop{background:var(--bg);color:var(--vg-ink);border-color:var(--vg-line);border-radius:var(--vg-r-l);box-shadow:var(--vg-shadow-float)}
#shared-workshop h1,#shared-workshop h2,#shared-workshop h3{font-family:var(--vg-font-ui)}
#shared-workshop h2{font-size:var(--ios-t-footnote);color:var(--vg-muted);font-weight:700}
#shared-workshop details,#shared-workshop article{background:var(--vg-surface);border:1px solid var(--vg-line);border-radius:var(--vg-r);padding:14px 16px;box-shadow:var(--vg-shadow)}
#shared-workshop details details,#shared-workshop article details{background:var(--vg-surface-2);box-shadow:none}
#shared-workshop summary{min-height:var(--vg-hit);display:flex;align-items:center;font:600 var(--ios-t-callout)/1.3 var(--vg-font-ui);cursor:pointer}
#shared-workshop small,#storage-inventory small{color:var(--vg-muted)}

/* ---------- tables: header like the card title, hairline rows, figures aligned ---------- */
#shared-workshop table,.vg-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
#shared-workshop th,.vg-table th{font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted);text-align:left;padding:10px;border-bottom:1px solid var(--vg-line-2)}
#shared-workshop td,.vg-table td{padding:10px;border-bottom:1px solid var(--vg-line);vertical-align:top}

/* ---------- dialog (global search / detail) ---------- */
.vg-global dialog,.vg-dialog{background:var(--vg-surface);color:var(--vg-ink);border:1px solid var(--vg-line);border-radius:var(--vg-r-l);box-shadow:var(--vg-shadow-float);padding:16px 18px}
.vg-global dialog::backdrop,.vg-dialog::backdrop{background:var(--vg-backdrop)}
.vg-global header{background:var(--vg-surface);border-bottom:1px solid var(--vg-line)}
.vg-global h2{font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted);margin:0}

/* ---------- module navigation (Portada / Poncheo / Workshop / sections) + search entry points ----------
   Compact wrapping row of 44 px chips instead of browser-default purple links and stacked full-width buttons.
   Id-scoped on purpose: Poncheo's dark secondary-button rule has (0,9,1) specificity, and the shared secondary rule
   "#shared-workshop button:not(.vg-flow):not(.danger)" above has (1,3,1); the :not() pair makes these selectors equal
   (1,3,1) so, coming later, they win. Links stay links. */
:is(#app,#shared-workshop) .vg-module-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px;padding:0}
:is(#app,#shared-workshop) .vg-module-nav>:is(a,span,button):not(.vg-flow):not(.danger),
:is(#app,#shared-workshop) .vg-global>button:not(.vg-flow):not(.danger){
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-height:var(--vg-hit);margin:0;padding:0 12px;
  border:1px solid var(--vg-line-2);border-radius:var(--vg-r-btn);background:var(--vg-surface);color:var(--vg-ink);box-shadow:none;
  font:600 var(--ios-t-subhead)/1.2 var(--vg-font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#app,#shared-workshop) .vg-module-nav>a:visited{color:var(--vg-ink)}
:is(#app,#shared-workshop) .vg-module-nav>:is(a,button):focus-visible,:is(#app,#shared-workshop) .vg-global>button:focus-visible{outline:3px solid var(--vg-ink);outline-offset:3px}
:is(#app,#shared-workshop) .vg-module-nav>span{cursor:default}
/* Current section, inverted. !important only here: the Workshop's dark glass rule (m16.css:266/277,
   "button:not(...):not(#nav *):not(#bar3d *)...") counts two ids (~2,18,1) and paints a background-image gradient over
   any single-id rule, which left dark text on the glossy fill (unreadable). */
:is(#app,#shared-workshop) .vg-module-nav>[aria-current="page"]:not(.vg-flow):not(.danger){background:var(--ios-blue-tint)!important;border-color:transparent!important;box-shadow:none!important;color:var(--ios-blue)}
@media (hover:hover) and (pointer:fine){:is(#app,#shared-workshop) .vg-module-nav>:is(a,button):not([aria-current="page"]):hover,:is(#app,#shared-workshop) .vg-global>button:hover{border-color:var(--vg-ink)}}
:is(#app,#shared-workshop) .vg-module-nav>:is(a,button):active,:is(#app,#shared-workshop) .vg-global>button:active{transform:scale(.97)}
:is(#app,#shared-workshop) .vg-global{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
:is(#app,#shared-workshop) .vg-role-help{margin:4px 0 10px}
#shared-workshop .vg-role-help{padding:0 16px;box-shadow:none}
#shared-workshop header{gap:8px}#shared-workshop header h1{margin:0;line-height:1.15}
/* dialog header: the dialog breaks long words anywhere, so the title needs its own width or it collapses to one letter per line */
.vg-global dialog header{flex-wrap:wrap;gap:6px}
.vg-global dialog header h2{flex:1 1 12ch;min-width:12ch;overflow-wrap:normal}
:is(#app,#shared-workshop) .vg-global dialog header button{flex:0 0 auto;width:auto;margin:0}
@media (prefers-reduced-motion: reduce){:is(#app,#shared-workshop) .vg-module-nav>*:active,:is(#app,#shared-workshop) .vg-global>button:active{transform:none}}

/* record actions (Volver / Ver en 3D / Renombrar / Abrir ficha): a wrapping row with the same gap as the module chips */
:is(#app,#shared-workshop) .vg-global .vg-exact>button:not(.vg-flow):not(.danger){margin:4px 8px 4px 0;width:auto}   /* id-scoped: beats the shared secondary-button margin */
/* ---------- lists, facts, search results, history ---------- */
.vg-global li,.vg-list>li{border-bottom:1px solid var(--vg-line)}
.vg-global dl>div{border-bottom:1px solid var(--vg-line)}
.vg-global .vg-exact{border:1px solid var(--vg-line);border-radius:var(--vg-r-s);background:var(--vg-surface-2);padding:12px}
.vg-global mark{background:var(--accent-soft);color:var(--vg-ink);box-shadow:inset 0 -2px 0 var(--vg-ink);border-radius:2px}
.vg-global small,.vg-global .fine{color:var(--vg-muted)}
.history-events>li{border-top-color:var(--vg-line)}
.history-outcome{font:600 var(--ios-t-footnote)/1.2 var(--vg-font-ui);border:1px solid var(--vg-line-2);border-radius:var(--vg-r-pill);padding:4px 10px;background:var(--vg-surface-2);color:var(--vg-ink)}
.history-outcome.rejected{border-color:var(--vg-warn);color:var(--vg-warn)}

@media (prefers-reduced-motion: reduce){
  .vg-btn,#shared-workshop button,.vg-activity button,.vg-global button{transition:none}
  .vg-btn:active,#shared-workshop button:active,.vg-activity button:active,.vg-global button:active{transform:none}
}

/* ======================= Smoked glass (approved 2026-10-16: references/approved-smoked-*.jpg) =======================
   DARK THEME ONLY (prefers-color-scheme: dark, or data-theme="dark"); the light theme is unchanged.
   Deep-blue smoked glass with restrained translucency: blur only on the bars and the Workshop panel (cards use an almost
   opaque glass tint so text always has a solid surface and scrolling stays cheap on phones). Motion is not changed:
   the Flow capsule (styles.css / m16.css) stays the reference for every important action.
   1) tokens   2) theme-agnostic rules that fall back to the old values   3) dark-only replacements of grey literals. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sky:#141a20;--vg-flow-line:rgba(244,247,250,.78);--vg-blur:blur(16px) saturate(1.15);--vg-line-hover:rgba(225,236,246,.55);
  --fl-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.012));--fl-glass-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -14px rgba(0,0,0,.75);--fl-ink:#eef1f4;--fl-fill:#f4f6f8;--fl-on-ink:#111417}}
:root[data-theme="dark"]{--sky:#141a20;--vg-flow-line:rgba(244,247,250,.78);--vg-blur:blur(16px) saturate(1.15);--vg-line-hover:rgba(225,236,246,.55);
  --fl-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.012));--fl-glass-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -14px rgba(0,0,0,.75);--fl-ink:#eef1f4;--fl-fill:#f4f6f8;--fl-on-ink:#111417}

/* 2) theme-agnostic: each fallback is the value the light theme already had */
html,body{background:var(--vg-page,var(--bg));background-attachment:fixed}
.card,.vg-card{background:var(--vg-glass,var(--surface));box-shadow:var(--vg-glass-shadow,var(--sh-card))}
#shared-workshop{background:var(--vg-glass-strong,var(--bg));-webkit-backdrop-filter:var(--vg-blur,none);backdrop-filter:var(--vg-blur,none)}
.hello .hello-sub{margin:2px 0 2px;color:var(--ink);font:600 var(--ios-t-title3)/1.25 var(--vg-font-ui)}
.weekrow{margin-top:4px}

/* 3) dark-only replacements of the old grey literals: only the Workshop's remain (Poncheo follows the --ios-* tokens) */
@media (prefers-color-scheme: dark){
  /* Workshop: the old dark glass rule (m16.css:266/277) counts two ids; see the current-state note above */
  :root:not([data-theme="light"]) #shared-workshop button:not(.vg-flow):not(.danger):not(.vgw-item):not(.vgw-grip):not([data-inv="select"]):not([aria-current="page"]):not([aria-pressed="true"]){background:var(--vg-btn-glass)!important;border-color:var(--line-2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}
  :root:not([data-theme="light"]) #shared-workshop details,:root:not([data-theme="light"]) #shared-workshop article{background:rgba(27,34,42,.92)}
}
:root[data-theme="dark"] #shared-workshop button:not(.vg-flow):not(.danger):not(.vgw-item):not(.vgw-grip):not([data-inv="select"]):not([aria-current="page"]):not([aria-pressed="true"]){background:var(--vg-btn-glass)!important;border-color:var(--line-2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}
:root[data-theme="dark"] #shared-workshop details,:root[data-theme="dark"] #shared-workshop article{background:rgba(27,34,42,.92)}

/* ======================= Workshop shell (approved layout) =======================
   #shared-workshop is no longer one boxed column: it holds fixed regions (top bar .vgw-top, section sidebar .vgw-side,
   functional panel .vgw-panel, status .vgw-status). No backdrop-filter on any ancestor of the search dialog, so the
   fixed, non-modal inspector is placed against the viewport. #stage and #labels share the same rectangle (labels and
   picking use the canvas rect; the renderer follows #stage through its ResizeObserver). The selectors carry an extra
   html/body step because old rules such as "body:not(.d-3d) #stage{right:var(--panelw)}" (1,1,1) left 440 px blank. */
html.vg-shared body #shared-workshop{position:static;inset:auto;width:auto;height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
#shared-workshop .vgw-top,#shared-workshop .vgw-side,#shared-workshop .vgw-panel{position:fixed;box-sizing:border-box;background:var(--vg-glass-strong,var(--bg));border:1px solid var(--vg-line-2);border-radius:var(--ios-r);box-shadow:var(--vg-glass-shadow,var(--sh-card));color:var(--vg-ink)}
#shared-workshop .vgw-top{z-index:530;top:12px;left:12px;right:12px;min-height:60px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px}
#shared-workshop .vgw-back{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:var(--ios-t-footnote);font-weight:600;color:inherit;white-space:nowrap}
#shared-workshop .vgw-top h1{margin:0 6px 0 0;font:600 var(--ios-t-title2)/1.1 var(--vg-font-ui);white-space:nowrap}#shared-workshop .vgw-top h1 b{font-weight:700}#shared-workshop .vgw-top h1 span{font-weight:400;color:var(--vg-muted)}
#shared-workshop .vgw-apps{display:flex;gap:2px;align-items:stretch}
#shared-workshop .vgw-apps>*{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--vg-muted);text-decoration:none;font:600 var(--ios-t-subhead)/1 var(--vg-font-ui);border-bottom:2px solid transparent}
#shared-workshop .vgw-apps>[aria-current="page"]{color:var(--vg-ink);border-bottom-color:var(--vg-accent-blue,var(--vg-ink))}
#shared-workshop .vgw-top #workshop-search{flex:1 1 220px;min-width:0}
#shared-workshop .vgw-top .vg-global{margin:0;flex-wrap:nowrap}
#shared-workshop .vgw-top .vg-global>button[data-global="places"]:not(.vg-flow):not(.danger){display:none}   /* the sidebar "Ubicaciones" opens the same search; beats the chip rule (1,3,1) */
#shared-workshop .vgw-top .shared-banner{margin:0;padding:4px 10px;border-radius:999px;font-size:var(--ios-t-footnote);white-space:nowrap}
#shared-workshop .vgw-top>button[data-action="lang"]{margin:0 0 0 auto;min-width:56px}
#shared-workshop .vgw-side{z-index:520;top:calc(var(--vgw-top-h,72px) + 12px);left:12px;bottom:12px;width:var(--vgw-side-w,190px);display:flex;flex-direction:column;gap:4px;padding:10px 8px;overflow:auto}
/* box-sizing: the "Más" item is a <summary> (content-box by default) and overflowed the 190 px bar by its padding.
   !important on the surface only: the Workshop's dark glass rule (m16.css:266/277, two ids) otherwise paints the old grey
   pill gradient on every sidebar button; the approved sidebar items are transparent smoked glass. */
#shared-workshop .vgw-side .vgw-item:not(.vg-flow):not(.danger){box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-width:0;min-height:46px;margin:0;padding:0 12px;border:1px solid transparent!important;border-radius:var(--ios-r);background:transparent!important;box-shadow:none!important;color:var(--vg-ink);font:600 var(--ios-t-subhead)/1.2 var(--vg-font-ui);text-align:left;text-decoration:none;cursor:pointer}
#shared-workshop .vgw-side .vgw-item .ic{width:22px;height:22px;flex:none}
@media (hover:hover) and (pointer:fine){#shared-workshop .vgw-side .vgw-item:not(.vg-flow):not([aria-current="page"]):hover{background:var(--vg-hi,rgba(27,33,38,.06))!important;border-color:var(--vg-line)!important}}
#shared-workshop .vgw-side .vgw-item[aria-current="page"]:not(.vg-flow){background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;border-color:color-mix(in srgb,var(--vg-accent-blue,#5f7f99) 70%,transparent)!important;color:var(--vg-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important}
#shared-workshop .vgw-side details.vgw-more{margin:0;padding:0;border:0;background:none;box-shadow:none}
#shared-workshop .vgw-side details.vgw-more>summary{list-style:none}#shared-workshop .vgw-side details.vgw-more>summary::-webkit-details-marker{display:none}
#shared-workshop .vgw-more-list{display:flex;flex-direction:column;gap:2px;margin:4px 0 0;padding:6px 0 0;border-top:1px solid var(--vg-line)}
#shared-workshop .vgw-more-list .vg-role-help{margin:4px 0;padding:0 12px;border:0;background:none;box-shadow:none;font-size:var(--ios-t-subhead)}
#shared-workshop .vgw-panel{z-index:510;top:calc(var(--vgw-top-h,72px) + 12px);left:var(--vgw-l0,214px);bottom:12px;width:var(--vgw-panel-w,440px);padding:0 16px 16px;overflow:auto;overscroll-behavior:contain}
#shared-workshop .vgw-panel[hidden]{display:none}
/* legibility: the functional panel is near-opaque and its sticky header fully opaque (glass stays on the bars) */
#shared-workshop .vgw-panel{background:var(--vg-panel-bg,var(--bg))}
#shared-workshop .vgw-panel .vgw-panel-head{background:var(--vg-panel-solid,var(--bg))}
#shared-workshop .vgw-panel-head button .ic{width:20px;height:20px;flex:none;display:block}
#shared-workshop .vgw-panel-head button{display:inline-flex;align-items:center;justify-content:center}
#shared-workshop .vgw-panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0 -16px 8px;padding:10px 12px 10px 16px;background:var(--vg-glass-strong,var(--bg));border-bottom:1px solid var(--vg-line)}
#shared-workshop .vgw-panel-head h2{flex:1;margin:0}
#shared-workshop .vgw-panel.min{bottom:auto;overflow:hidden}#shared-workshop .vgw-panel.min .shared-content{display:none}#shared-workshop .vgw-panel.min .vgw-panel-head{margin-bottom:0;border-bottom:0}
#shared-workshop .vgw-status{position:fixed;z-index:535;top:calc(var(--vgw-top-h,72px) + 12px);left:50%;transform:translateX(-50%);margin:0;max-width:min(560px,calc(100vw - 32px));padding:8px 14px;border-radius:var(--ios-r);background:var(--vg-glass-strong,var(--bg));border:1px solid var(--vg-line-2)}
#shared-workshop .vgw-status:empty{display:none}
/* Desktop columns: navigation | functional panel | 3D scene | location inspector. The scene's left/right edges follow the
   open columns, so nothing overlays the 3D or its bottom controls; the renderer reflows through its ResizeObserver. */
html.vg-shared{--vgw-l0:214px;--vgw-side-w:190px;--vgw-panel-w:440px;--vgw-l-open:666px;--vgw-l:var(--vgw-l0);--vgw-r:12px;--vgw-insp:380px}
/* 900–1150 px: narrower sidebar (labels kept), panel and inspector so the scene stays >= 480 px next to the inspector */
@media (min-width:900px) and (max-width:1150px){html.vg-shared{--vgw-l0:174px;--vgw-side-w:150px;--vgw-panel-w:400px;--vgw-l-open:586px;--vgw-insp:320px}}
html.vg-shared.vgw-panel-open{--vgw-l:var(--vgw-l-open)}
/* a minimized (or auto-minimized) functional panel never covers the scene / selected location while the inspector is open */
@media (min-width:900px){html.vg-shared.vgw-inspector-open #shared-workshop .vgw-panel.min{display:none}}
/* wide inventory is an opaque working view: the covered scene, labels and camera bar are hidden until it is minimized/closed */
@media (min-width:900px){
  html.vg-shared.vgw-wide.vgw-panel-open body #stage,html.vg-shared.vgw-wide.vgw-panel-open body #labels,html.vg-shared.vgw-wide.vgw-panel-open body #bar3d{visibility:hidden}
  html.vg-shared.vgw-wide.vgw-panel-open #shared-workshop .vgw-panel{background:var(--vg-panel-solid,var(--bg))}
}
html.vg-shared.vgw-inspector-open{--vgw-r:calc(var(--vgw-insp) + 24px)}
html.vg-shared body #stage,html.vg-shared body #labels{top:calc(var(--vgw-top-h,72px) + 12px);left:var(--vgw-l);right:var(--vgw-r)!important;bottom:12px;border-radius:var(--ios-r);overflow:hidden}
html.vg-shared body #bar3d{left:calc(var(--vgw-l) + 12px);right:calc(var(--vgw-r) + 12px);bottom:24px;width:max-content;max-width:calc(100vw - var(--vgw-l) - var(--vgw-r) - 24px);margin:0 auto;border:1px solid var(--vg-line-2);border-radius:var(--ios-r);background:var(--vg-glass-strong,var(--panel));z-index:505}
/* inventory: a wide working view (list + detail) across the main area */
@media (min-width:900px){html.vg-shared.vgw-wide.vgw-panel-open #shared-workshop .vgw-panel{width:auto;right:var(--vgw-r)}}
/* location inspector: its own right-hand column (non-modal, global-search adds .vg-inspector on desktop) */
#shared-workshop .vg-global dialog.vg-inspector{position:fixed;z-index:540;inset:calc(var(--vgw-top-h,72px) + 12px) 12px 12px auto;margin:0;width:var(--vgw-insp);max-width:none;max-height:none;height:auto;overflow:auto;background:var(--vg-panel-bg,var(--bg))}
#shared-workshop .vg-global dialog.vg-inspector header{background:var(--vg-panel-solid,var(--bg));display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
#shared-workshop .vg-global dialog.vg-inspector header h2{grid-column:1 / -1;margin:0;font-size:var(--ios-t-callout);line-height:1.3}
#shared-workshop .vg-global dialog.vg-inspector header button{margin:0;min-height:44px;white-space:nowrap}
/* phones / narrow: top bar, full-bleed 3D, sections as a bottom bar, panel as a minimizable bottom sheet */
@media (max-width:899px){
  #shared-workshop .vgw-top{top:8px;left:8px;right:8px;min-height:0;padding:6px 10px;gap:6px}
  #shared-workshop .vgw-top h1{font-size:var(--ios-t-body)}
  /* phone: the three apps stay reachable as one slim segmented row under the title (not only inside Más) */
  #shared-workshop .vgw-apps{order:9;flex:1 0 100%;gap:4px;padding:3px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r)}
  #shared-workshop .vgw-apps>*{flex:1 1 0;justify-content:center;min-height:40px;padding:0 6px;border-radius:var(--ios-r-s);font-size:var(--ios-t-subhead)}
  #shared-workshop .vgw-apps>[aria-current="page"]{background:var(--vg-hi,rgba(27,33,38,.06))}
  #shared-workshop .vgw-top #workshop-search{order:5;flex:1 1 100%}
  html.vg-shared body #stage,html.vg-shared body #labels{top:calc(var(--vgw-top-h,150px) + 6px);left:0;right:0!important;bottom:calc(var(--vgw-nav-h,80px) + 6px);border-radius:0}   /* between the top bar and the section bar: nothing is drawn under them */
  #shared-workshop .vgw-side{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;flex-direction:row;gap:2px;padding:4px;overflow:visible}
  /* same specificity as the desktop item rule (1,4,0) plus an element step, so the phone sizes really apply; items take
     the width of their label (no ellipsis): Taller/Inventario/Ubicaciones/Fotos/Historial/Más fit 390 px in ES and EN */
  #shared-workshop .vgw-side>button.vgw-item:not(.vg-flow):not(.danger),#shared-workshop .vgw-side>details>summary.vgw-item:not(.vg-flow):not(.danger){flex:1 1 auto;width:auto;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px;min-height:56px;font:600 var(--ios-t-caption1)/1.15 var(--vg-font-ui);text-align:center}
  #shared-workshop .vgw-side>button.vgw-item:not(.vg-flow) span,#shared-workshop .vgw-side>details>summary.vgw-item:not(.vg-flow) span{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
  #shared-workshop .vgw-side details.vgw-more{flex:1 1 auto;min-width:0;position:static}
  #shared-workshop .vgw-side details.vgw-more[open] .vgw-more-list{position:absolute;right:0;bottom:72px;width:min(300px,calc(100vw - 16px));max-height:60dvh;overflow:auto;padding:8px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r);background:var(--vg-glass-strong,var(--bg));box-shadow:var(--vg-glass-shadow,var(--sh-card))}
  #shared-workshop .vgw-panel{top:auto;left:8px;right:8px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px));max-height:58dvh}
  /* minimized sheet: ".vgw-panel.min{bottom:auto}" (1,2,0) beat the rule above, leaving top and bottom auto (jump to y=0);
     re-anchor it above the section bar and drop the content padding so only the one-line header (44 px controls) remains */
  #shared-workshop .vgw-panel.min{top:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px));padding-bottom:0}
  #shared-workshop .vgw-panel.min .vgw-panel-head{padding:6px 6px 6px 14px}
  #shared-workshop .vgw-panel.min .vgw-panel-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #shared-workshop .vgw-panel.min .vgw-panel-head button{flex:none;margin:0;min-height:44px}
  #shared-workshop .vgw-status{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* camera controls stay reachable in every sheet state: compact bar placed just above the sheet (or the section bar) */
  /* display: the original #bar3d is display:none unless body.d-3d (vision-workshop.html:322/326); the shared phone
     layout never sets d-3d, so the camera bar is shown here explicitly (same buttons, same handlers) */
  html.vg-shared body #bar3d{display:grid;left:8px;right:8px;bottom:calc(var(--vgw-nav-h) + var(--vgw-sheet,0px) + 30px + var(--vg-kb,0px));max-width:none;width:auto;height:var(--vgw-cam-h);padding:4px 6px;transition:bottom 220ms cubic-bezier(.23,1,.32,1)}
  html.vg-shared body #bar3d .ib{min-height:44px;padding:2px 0}
  .vg-global dialog{margin:auto 0 0;width:100%;max-width:100%;max-height:80dvh;border-radius:var(--ios-r) var(--ios-r) 0 0;border-bottom:0}
}

/* ======================= Poncheo: compact header, module switch, "Más" ======================= */
#app .top{flex-wrap:wrap;row-gap:6px}
#app .top .brand b{font:700 var(--ios-t-title2)/1.1 var(--vg-font-ui)}#app .top .brand span{font-size:var(--ios-t-footnote);color:var(--vg-muted)}
#app .top .topsearch{flex:1 1 100%;min-width:0}
#app .top .topsearch .vg-global{margin:0;flex-wrap:nowrap}
:is(#app,#shared-workshop) .vg-global>button[data-global="open"]:not(.vg-flow){flex:1 1 auto;justify-content:flex-start;gap:10px;color:var(--vg-muted);font-weight:400;padding-left:14px}
:is(#app,#shared-workshop) .vg-global>button[data-global="open"]::before{content:"";width:18px;height:18px;flex:none;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%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%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%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
#app .vg-switch{display:flex;margin:4px 0 14px;padding:4px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r);background:var(--vg-glass,var(--surface))}
#app .vg-switch>*{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--ios-r);color:var(--vg-muted);text-decoration:none;font:600 var(--ios-t-callout)/1 var(--vg-font-ui);border-bottom:2px solid transparent}
#app .vg-switch>[aria-current="page"]{color:var(--vg-ink);background:var(--vg-hi,rgba(27,33,38,.06));border-bottom-color:var(--vg-accent-blue,var(--vg-ink))}
#app .vg-switch .ic{width:20px;height:20px}
#app .vg-switch>a:focus-visible{outline:3px solid var(--vg-ink);outline-offset:2px}
#app .vg-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px}
#app .vg-more-secondary{margin-top:10px}
#app .vg-more-secondary>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;color:var(--vg-ink);border:1px solid var(--vg-line-2);border-radius:var(--ios-r)}
#app .vg-more-secondary>summary::-webkit-details-marker{display:none}
#app .vg-more-secondary>summary .chev{margin-left:auto;transition:transform .2s ease}
#app .vg-more-secondary[open]>summary .chev{transform:rotate(90deg)}
#app .vg-more-secondary>.vg-more-grid{margin-top:8px}
#app .vg-more-secondary>summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#app .vg-more-item{margin:0;min-height:58px;text-decoration:none;color:var(--vg-ink)}
#app a.vg-more-item{display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r)}
#app .vg-more .vg-role-help{margin:12px 0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #app a.vg-more-item{background:var(--vg-btn-glass)}}
:root[data-theme="dark"] #app a.vg-more-item{background:var(--vg-btn-glass)}
/* "Más" popup (app.js morePopHtml): charcoal surface anchored above its bottom-bar button (bottom/right set by
   placeMore()); scrolls inside itself within the safe area, the screen underneath keeps its place. One column of the
   same rows as the #menu page. */
#app .vg-more-pop{position:fixed;z-index:30;right:8px;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 100px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;margin:0;padding:12px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r);background:var(--vg-panel-bg,var(--surface));box-shadow:var(--vg-glass-shadow,0 20px 50px -20px rgba(0,0,0,.6)),0 24px 60px -24px rgba(0,0,0,.7)}
#app .vg-more-pop .sect{margin:2px 4px 10px}
#app .vg-more-pop .vg-more-grid{grid-template-columns:1fr;gap:6px}
#app .vg-more-pop .vg-role-help{margin:10px 0}

/* ---------- 3D: the shared storage / assembly locations are ordinary scene pills that can be tapped (the button keeps
   no chrome of its own: same pill, stem and dot as every other scene name; 44 px tall hit area; the selected one is
   outlined; the full name is the accessible name) ---------- */
#labels .vg-scene-location[hidden]{display:none}
#labels .vg-scene-location:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
#labels .vg-scene-location{min-width:0;min-height:44px;width:auto;height:auto;margin:0;padding:0;border:0!important;border-radius:var(--ios-r-s);background:transparent!important;box-shadow:none!important;font:inherit;letter-spacing:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;overflow:visible}
/* its stem is a leader line (placed by the scene: length and angle) from the pill to the dot on the real place */
#labels .vg-scene-location i{position:absolute;left:50%;top:0;margin-left:-.5px;transform-origin:50% 0;pointer-events:none}
#labels .vg-scene-location b{position:absolute;left:0;top:0;margin:0;pointer-events:none}
#labels .vg-scene-location[aria-pressed="true"]{background:transparent!important}
#labels .vg-scene-location[aria-pressed="true"] span{outline:2px solid var(--vg-sel,#3a7fc8);outline-offset:1px}
#labels .vg-scene-location:focus-visible{outline:3px solid #f4bc42;outline-offset:2px}

/* ======================= Flow: synchronized label layers (2026-10-16) =======================
   Original Flow motion kept (border/colour/radius 600 ms cubic-bezier(.23,1,.32,1); fill + label + arrows 800 ms;
   press scale .95 in 150 ms; touch/pen .is-on on pointerdown, cleared 650 ms after up/cancel/leave; mouse :hover only on
   hover-capable pointers; keyboard :focus-visible). Fix: the label no longer changes colour mid-animation (dark text on
   the not-yet-filled glass failed contrast). flowify() adds one decorative copy .fl-on (aria-hidden) of the arrows +
   label, painted in the inverse ink on the fill colour and revealed by the same centre circle; the base label keeps its
   resting ink. Wherever the circle has reached, the text is dark-on-white; elsewhere it is light-on-glass.
   One accessible label (the base), fixed external geometry (the copy is absolutely positioned over the button). */
:root{--fl-ink:#111;--fl-fill:#111;--fl-on-ink:#fff}
.vg-flow.vg-flow,.vg-flow.vg-flow:hover,.vg-flow.vg-flow:focus-visible,.vg-flow.vg-flow.is-on,#shared-workshop button.vg-flow,#shared-workshop button.vg-flow:hover,#shared-workshop button.vg-flow.is-on,#shared-workshop button.vg-flow:focus-visible{color:var(--fl-ink)!important}
.vg-flow.vg-flow .fl-arr{color:var(--fl-ink)!important}
.vg-flow.vg-flow .fl-circle{display:none!important}
/* flowLayer() creates the copy with inline display:none, so it can never show as an unstyled duplicate label before this
   stylesheet loads; this rule (with !important) is what turns it on. */
.vg-flow.vg-flow .fl-on{position:absolute;z-index:2;inset:0;display:flex!important;align-items:center;justify-content:center;gap:inherit;padding:inherit;border-radius:inherit;background:var(--fl-fill);color:var(--fl-on-ink);clip-path:circle(0% at 50% 50%);transition:clip-path 800ms cubic-bezier(.19,1,.22,1);pointer-events:none}
.vg-flow.vg-flow .fl-on .fl-arr,.vg-flow.vg-flow .fl-on .fl-txt,.vg-flow.vg-flow .fl-on .fl-txt *{color:var(--fl-on-ink)!important}
@media (hover:hover){.vg-flow.vg-flow:hover:not(:disabled) .fl-on{clip-path:circle(72% at 50% 50%)}}
.vg-flow.vg-flow:focus-visible .fl-on,.vg-flow.vg-flow.is-on:not(:disabled) .fl-on{clip-path:circle(72% at 50% 50%)}
.vg-flow.vg-flow:disabled .fl-on{clip-path:circle(0% at 50% 50%)!important;transition:none}
/* Finish only (2026-10-16 glass pass): dark glass capsule body with a fine static top reflection, and a more defined white
   outline at rest (same 1.5 px width; hover/focus/press still fade it exactly as before). Light theme: tokens unset ->
   the original transparent capsule. Geometry, label layers, timings and JS are untouched. */
:root .vg-flow.vg-flow.vg-flow:not(:active),:root #shared-workshop button.vg-flow:not(:active){background:var(--fl-glass,transparent);box-shadow:var(--fl-glass-shadow,none)}
:root .vg-flow.vg-flow.vg-flow:not(:hover):not(:focus-visible):not(.is-on){border-color:var(--vg-flow-line)}
@media (prefers-reduced-motion: reduce){
  /* !important: the global reduced-motion rule (transition-duration .01ms !important) would otherwise leave 1e-05s */
  .vg-flow.vg-flow .fl-on{transition:none!important}
  .vg-flow.vg-flow .fl-a2{display:none}
  .vg-flow.vg-flow .fl-a1{right:16px!important}
}

/* ======================= Poncheo phone: one compact header row ======================= */
@media (max-width:600px){
  #app .top{flex-wrap:nowrap;gap:6px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px}
  #app .top .brand{flex:1 1 auto;min-width:0}
  #app .top .brand b{font-size:var(--ios-t-title2)}
  #app .top .brand span{font-size:var(--ios-t-caption1)}
  #app .top .topsearch{order:1;flex:0 0 auto}
  #app .top .topr{order:2;gap:6px}
  #app .top .iconbtn{width:44px;min-width:44px;height:44px;min-height:44px}
  /* search and locations become 44 px icon buttons; their text stays as the accessible name */
  #app .top .topsearch .vg-global{gap:6px}
  #app .top .topsearch .vg-global>button:not(.vg-flow):not(.danger){flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0}
  #app .top .topsearch .vg-global>button[data-global="places"]::before{content:"";width:18px;height:18px;flex:none;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' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%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' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
  #app .top .topsearch .vg-global>button[data-global="open"]::before{width:20px;height:20px}
  #app .hello h2{font-size:var(--ios-t-title1);margin:2px 0 0}
  #app .hello .hello-sub{font-size:var(--ios-t-body);margin:0}
  #app .hello p{margin:0 0 8px}
  #app .vg-switch{margin:2px 0 10px}
  /* #app#app: outranks the shared .vg-control padding, so the three apps always share the row (min-width:0 lets them shrink) */
  #app#app .vg-switch3>*{gap:5px;font-size:var(--ios-t-subhead);padding:0 4px;min-width:0}#app .vg-switch3 .ic{width:18px;height:18px}
  #app .card.clock{padding:12px 14px}
}

/* ======================= Workshop phone: bottom sheet min / half / full ======================= */
/* hidden on desktop; (1,4,0) so it beats the shared secondary-button rule "#shared-workshop button:not(.vg-flow):not(.danger)" */
#shared-workshop .vgw-panel .vgw-grip:not(.vg-flow):not(.danger){display:none}
/* Geometry (phone): section bar at the bottom, sheet above it, top bar at the top. The sheet opens FULL: from just under
   the top bar (room for the grip) down to the section bar, with its own scrolling content, so nothing of a section is
   left outside; «Minimizar · ver 3D» (or dragging the grip down) leaves the 58 px header strip and the whole scene.
   The sheet is a column: fixed header + independently scrolling content; the grip sits half outside the top edge (44 px
   hit area, no overlap with header controls). */
@media (max-width:899px){
  html.vg-shared{--vgw-nav-h:calc(80px + env(safe-area-inset-bottom,0px));--vgw-cam-h:56px;--vgw-top-h:150px;--vgw-full:max(160px,calc(100dvh - var(--vgw-nav-h) - var(--vgw-top-h) - 30px))}
  #shared-workshop .vgw-panel{display:flex;flex-direction:column;overflow:visible;padding:0;height:var(--vgw-full);max-height:none;bottom:calc(var(--vgw-nav-h) + var(--vg-kb,0px));transition:height 220ms cubic-bezier(.23,1,.32,1)}
  #shared-workshop .vgw-panel.full{height:var(--vgw-full)}
  #shared-workshop .vgw-panel.min{height:58px;max-height:none;overflow:visible;bottom:calc(var(--vgw-nav-h) + var(--vg-kb,0px))}
  #shared-workshop .vgw-panel.dragging{transition:none}
  #shared-workshop .vgw-panel .vgw-panel-head{position:static;flex:none;box-sizing:border-box;min-height:56px;margin:0;padding:6px 6px 6px 14px;border-radius:var(--ios-r) var(--ios-r) 0 0;border-bottom:1px solid var(--vg-line)}
  #shared-workshop .vgw-panel.min .vgw-panel-head{border-radius:var(--ios-r);border-bottom:0}
  #shared-workshop .vgw-panel .vgw-panel-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #shared-workshop .vgw-panel .vgw-panel-head button{flex:none;margin:0;min-height:44px}
  /* open sheet: a long section title («Equipos, tareas y operaciones», «Calendario del taller») keeps its words — when it
     does not fit beside «Minimizar · ver 3D» and the close button, they move to a second row (the 58 px strip keeps one) */
  /* the title takes its natural width (up to the row): if it does not fit beside the two buttons, it keeps the first
     row and both buttons go together to the second, at the right */
  #shared-workshop .vgw-panel:not(.min) .vgw-panel-head{flex-wrap:wrap;row-gap:2px}
  #shared-workshop .vgw-panel:not(.min) .vgw-panel-head h2{flex:1 0 auto;max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
  #shared-workshop .vgw-panel:not(.min) .vgw-panel-head h2+button{margin-left:auto}
  #shared-workshop .vgw-panel .shared-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:8px 14px 14px}
  /* drag handle: only this control captures the gesture; the 3D and the sheet content keep their own touch handling */
  #shared-workshop .vgw-panel .vgw-grip:not(.vg-flow):not(.danger){position:absolute;z-index:3;top:-22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:96px;height:44px;min-height:44px;margin:0;padding:0;border:0!important;border-radius:var(--ios-r);background:transparent!important;box-shadow:none!important;touch-action:none;cursor:grab}
  #shared-workshop .vgw-grip::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--vg-line-2);box-shadow:0 0 0 3px rgba(0,0,0,.25)}
}
@media (prefers-reduced-motion: reduce){#shared-workshop .vgw-panel,html.vg-shared body #bar3d{transition:none}}

/* desktop inspector collapsed: a small header strip at the top-right corner; the scene takes the full width back and the
   bottom camera controls are not covered */
@media (min-width:900px){
  #shared-workshop .vg-global dialog.vg-inspector.collapsed{bottom:auto;width:auto;max-width:var(--vgw-insp);overflow:hidden}
  #shared-workshop .vg-global dialog.vg-inspector.collapsed>:not(header){display:none}
  #shared-workshop .vg-global dialog.vg-inspector.collapsed header{border-bottom:0;margin:0}
}

/* ======================= Owner improvements (2026-10-17): notices in the flow, filters, folds, today, checkboxes =======================
   Same tokens, radii and type as the rest of the layer; no new colours (ok/warn come from the apps' own tokens). */
/* Workshop notice: inside the panel it sits in the flow under the header (never over "Minimizar"/close); the floating strip
   remains only for the 3D-only view. Shown only when it carries a kind (ok / error / pending). */
#shared-workshop .vgw-status:not(.is-ok):not(.is-error):not(.is-pending),#shared-workshop .vg-inventory-status:not(.is-ok):not(.is-error):not(.is-pending){display:none}
#shared-workshop .vgw-panel .vgw-status,#shared-workshop .vg-inventory-status{position:static;transform:none;left:auto;top:auto;bottom:auto;max-width:none;width:auto;display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--vg-line-2);border-left-width:4px;border-radius:var(--vg-r-s);background:var(--vg-surface-2);font:400 var(--ios-t-subhead)/1.35 var(--vg-font-ui);color:var(--vg-ink)}
#shared-workshop .vgw-status .ic{width:18px;height:18px;flex:none;margin-top:1px}
/* the notice follows the reader: it sticks under the panel header while the long content scrolls (phone: the content itself scrolls) */
#shared-workshop .vgw-panel .vgw-status{position:sticky;top:var(--vgw-head-h,64px);z-index:3;box-shadow:var(--vg-shadow)}
@media (max-width:899px){#shared-workshop .vgw-panel .vgw-status{top:0}}
#shared-workshop .vgw-status.is-ok,#shared-workshop .vg-inventory-status.is-ok{border-left-color:var(--vg-ok);color:var(--vg-ok);background:color-mix(in srgb,var(--vg-ok) 10%,var(--vg-surface-2))}
#shared-workshop .vgw-status.is-error,#shared-workshop .vg-inventory-status.is-error{border-left-color:var(--vg-warn);color:var(--vg-warn);background:color-mix(in srgb,var(--vg-warn) 10%,var(--vg-surface-2))}
#shared-workshop .vgw-status.is-pending,#shared-workshop .vg-inventory-status.is-pending{border-left-color:var(--vg-accent-blue,var(--vg-ink))}
/* compact filter rows (Workshop team table, Poncheo attendance/payments): labelled selects side by side, "Apply" at the end */
#shared-workshop .vgw-filters,#app .vg-filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:4px 0 8px;padding:0}
#shared-workshop .vgw-filters label,#app .vg-filters label{flex:1 1 140px;min-width:0;margin:0;font:600 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
#shared-workshop .vgw-filters select,#app .vg-filters select,#app .vg-filters input{margin-top:4px;min-height:44px;font:400 var(--ios-t-callout)/1.2 var(--vg-font-ui);text-transform:none;letter-spacing:0;color:var(--vg-ink)}
#shared-workshop .vgw-filters button,#app .vg-filters button{flex:0 0 auto;width:auto;margin:0;min-height:44px}
#shared-workshop .vgw-count,#app .vg-count{margin:0 0 6px;color:var(--vg-muted);font:600 var(--ios-t-footnote)/1.3 var(--vg-font-ui)}
/* read-only tag / count (Apple base): plain secondary text, no capsule; a pending one (.hot) gets an orange dot */
#shared-workshop .vgw-tag,#shared-workshop .vg-tag,#app .vg-tag{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:none;font:400 var(--ios-t-footnote)/var(--ios-lh-footnote) var(--vg-font-ui);color:var(--vg-muted);white-space:nowrap;vertical-align:baseline}
/* checkbox rows: the whole label is the target (>= 44 px), the box stays 24 px */
#shared-workshop label.chk,#app label.chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:4px 0;padding:8px 2px;font-weight:400;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--vg-r-s)}
#shared-workshop label.chk input,#app label.chk input{width:24px;height:24px;min-height:24px;flex:none;margin:2px 0 0;cursor:pointer}
/* Draw one consistent checkbox instead of mixing the native iOS control with rounded field padding. */
#app label.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;min-width:24px;max-width:24px;padding:0;border:1.5px solid var(--vg-line-2);border-radius:var(--ios-r-s);background:var(--vg-field);box-shadow:none}
#app label.chk input[type=checkbox]::after{content:"";width:6px;height:11px;border:solid var(--ios-on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);visibility:hidden}
#app label.chk input[type=checkbox]:checked{background:var(--ios-blue);border-color:var(--ios-blue)}
#app label.chk input[type=checkbox]:checked::after{visibility:visible}
#app label.chk input[type=checkbox]:focus-visible{outline:3px solid var(--ios-blue);outline-offset:3px}
#app label.chk input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
@media(forced-colors:active){#app label.chk input[type=checkbox]{-webkit-appearance:auto;appearance:auto}#app label.chk input[type=checkbox]::after{content:none}}
#shared-workshop label.chk>span,#app label.chk>span{flex:1;min-width:0;line-height:1.35}
#shared-workshop .vg-inventory [data-count-summary]{margin:6px 0 2px;padding:10px 12px;border:1px solid var(--vg-line);border-radius:var(--vg-r-s);background:var(--vg-surface-2);font:400 var(--ios-t-subhead)/1.4 var(--vg-font-ui)}
#shared-workshop .vg-inventory [data-count-summary]:empty{display:none}
#shared-workshop .vg-inventory [data-source-hint]{margin:0 0 6px;color:var(--vg-muted);font-size:var(--ios-t-subhead)}
#shared-workshop .vg-inventory .vg-tech{margin:8px 0;padding:0 12px;background:var(--vg-surface-2);box-shadow:none}
#shared-workshop .vg-inventory .vg-tech>summary{font-size:var(--ios-t-subhead);color:var(--vg-muted)}
#shared-workshop .vg-inventory .vg-tech p{font-size:var(--ios-t-subhead);color:var(--vg-muted);overflow-wrap:anywhere}
/* Poncheo folds: secondary sections collapsed under a card-style summary with a count; the chevron turns when open */
#app details.vg-fold>summary{display:flex;align-items:center;gap:12px;min-height:var(--ios-row-h);margin:0;padding:0 2px;list-style:none;cursor:pointer;font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--vg-font-ui);color:var(--ios-label);text-align:start;background:transparent;border:0;border-radius:0;box-shadow:none}   /* iOS disclosure row */
#app details.vg-fold>summary::-webkit-details-marker{display:none}
#app details.vg-fold>summary .ic{width:22px;height:22px;flex:none;color:var(--ios-blue)}
#app details.vg-fold>summary .chev{margin-left:auto;color:var(--ios-label-3);transition:transform 200ms ease}
#app details.vg-fold[open]>summary .chev{transform:rotate(90deg)}
#app details.vg-fold[open]>summary{margin-bottom:8px}
#app details.vg-fold>summary .vg-tag{text-transform:none;letter-spacing:0}
#app .vg-tag.hot{color:var(--vg-muted)}
#app .vg-tag.hot::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ios-orange)}
#app details.vg-fold>summary:focus-visible{outline:3px solid var(--ios-blue);outline-offset:-3px}
@media (prefers-reduced-motion: reduce){#app details.vg-fold>summary .chev{transition:none}}
/* Poncheo "Hoy" (owner/admin): present now, jobs today, decisions pending; rows reuse .rowbtn */
#app .vg-today ul.rows li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
#app .vg-today ul.rows li .fine{flex-basis:100%}
#app .vg-today .vg-count{margin:12px 0 2px}
#app .vg-today .rowbtn{min-height:56px}
#app .vg-today .rowbtn .vg-tag{margin-left:auto;flex:none;color:var(--vg-ink)}
#app .vg-today .vg-empty{color:var(--vg-muted);margin:4px 0}
/* one closed row per job; the crew names open on request */
#app .vg-today .vg-today-jobs>li{display:block;border-top:0}
#app .vg-today details.vg-today-job>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;cursor:pointer;list-style:none}
#app .vg-today details.vg-today-job>summary::-webkit-details-marker{display:none}
#app .vg-today details.vg-today-job>summary::after{content:"›";margin-left:auto;color:var(--vg-muted);transition:transform .15s}
#app .vg-today details.vg-today-job[open]>summary::after{transform:rotate(90deg)}
#app .vg-today details.vg-today-job>summary:focus-visible{outline:3px solid var(--vg-ink);outline-offset:2px}
#app .vg-today details.vg-today-job>.fine{display:block;padding:0 0 8px}
/* "Trabajos de hoy" / "Presentes ahora": closed overview lines (title + count + chevron); the lists open on request */
#app .vg-today details.vg-today-sum{border-top:0;margin-top:8px}
#app .vg-today details.vg-today-sum>summary{display:flex;align-items:center;gap:8px;min-height:52px;cursor:pointer;list-style:none;border-radius:var(--ios-r-s)}
#app .vg-today details.vg-today-sum>summary::-webkit-details-marker{display:none}
#app .vg-today details.vg-today-sum>summary .vg-count{margin:0}
#app .vg-today details.vg-today-sum>summary .chev{margin-left:auto;transition:transform .15s}
#app .vg-today details.vg-today-sum[open]>summary .chev{transform:rotate(90deg)}
#app .vg-today details.vg-today-sum>summary:focus-visible{outline:3px solid var(--vg-ink);outline-offset:2px}
@media (prefers-reduced-motion: reduce){#app .vg-today details.vg-today-sum>summary .chev{transition:none}}
/* decision rows read like a list: left aligned, one short title line + one hint line (the Flow look stays) */
:root #app .vg-today .rowbtn.vg-today-row{justify-content:flex-start;text-align:left;min-height:56px;padding:8px 14px;margin:6px 0}
:root #app .vg-today .rowbtn.vg-today-row b{font-size:var(--ios-t-callout);line-height:1.25}
:root #app .vg-today .rowbtn.vg-today-row .fine{font-size:var(--ios-t-footnote);line-height:1.3}
/* office Hoy: the attendance sections in one group (heading + count + chevron); the inner sections keep their cards */
#app details.vg-att-group{margin:18px 0 0}
#app details.vg-att-group>summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;border-radius:var(--ios-r);padding:0 4px}
#app details.vg-att-group>summary::-webkit-details-marker{display:none}
#app details.vg-att-group>summary h2{margin:0}
#app details.vg-att-group>summary .chev{margin-left:auto;transition:transform .15s}
#app details.vg-att-group[open]>summary .chev{transform:rotate(90deg)}
#app details.vg-att-group>summary:focus-visible{outline:3px solid var(--vg-ink);outline-offset:2px}
@media (prefers-reduced-motion: reduce){#app details.vg-att-group>summary .chev{transition:none}}
/* office Trabajos: the report rows and the job rows read as a left-aligned list (name, state, next step) */
:root #app #vg-review-queue details.vg-field-row>summary,:root #app #vg-office-jobs~details.vg-field-row>summary{text-align:left;justify-content:flex-start;align-items:flex-start}
:root #app #vg-review-queue details.vg-field-row>summary .vg-row-main,:root #app #vg-office-jobs~details.vg-field-row>summary .vg-row-main{justify-content:flex-start;flex-wrap:wrap;gap:4px 8px}
:root #app #vg-review-queue details.vg-field-row>summary b,:root #app #vg-office-jobs~details.vg-field-row>summary b{font-size:var(--ios-t-body);line-height:1.25}
@media (prefers-reduced-motion: reduce){#app .vg-today details.vg-today-job>summary::after{transition:none}}
/* Workshop phone: one compact header row (title, search icon, staging mark, language); the camera bar hides while the
   sheet is fully expanded or the keyboard is open, so the three bars never stack over the scene at once */
@media (max-width:899px){
  #shared-workshop .vgw-top{align-items:center;gap:6px;padding:6px 8px 6px 12px}
  #shared-workshop .vgw-top h1{flex:1 1 auto;min-width:0;font-size:var(--ios-t-body);overflow:hidden;text-overflow:ellipsis}
  #shared-workshop .vgw-top h1 span{display:none}
  #shared-workshop .vgw-top #workshop-search{order:0;flex:0 0 auto}
  #shared-workshop .vgw-top .vg-global{gap:6px}
  #shared-workshop .vgw-top .vg-global>button:not(.vg-flow):not(.danger){flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0}
  #shared-workshop .vgw-top .vg-global>button[data-global="open"]::before{width:20px;height:20px}
  #shared-workshop .vgw-top .shared-banner{flex:0 0 auto;padding:3px 8px;font-size:var(--ios-t-caption1)}
  #shared-workshop .vgw-top .shared-banner span{display:none}
  #shared-workshop .vgw-top>button[data-action="lang"]{flex:0 0 auto;min-width:48px;margin:0}
  html.vg-shared.vgw-sheet-full body #bar3d,html.vg-shared.vgw-kb body #bar3d{display:none}
  #shared-workshop .vgw-filters label{flex:1 1 120px}
}

/* ======================= Inventory: wide list + detail on desktop, cards on phones ======================= */
#shared-workshop .vg-inventory td,#shared-workshop .vg-inventory th{overflow-wrap:normal;word-break:normal;hyphens:manual}
#shared-workshop .vg-inventory .inv-num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
#shared-workshop .vg-inventory th.inv-num{text-align:right}
#shared-workshop .vg-inventory .inv-name{min-width:200px}
/* !important on the surface only: the Workshop's dark glass rule (m16.css:266/277, two ids) paints a gradient image */
#shared-workshop .vg-inventory td button[data-inv="select"]:not(.vg-flow):not(.danger){display:block;width:100%;min-height:44px;margin:0;padding:8px 0;border:0!important;border-radius:0;background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--vg-ink);font:600 var(--ios-t-callout)/1.3 var(--vg-font-ui);text-align:left;text-decoration:underline;text-decoration-color:var(--vg-line-2);text-underline-offset:3px;white-space:normal;overflow-wrap:normal;word-break:normal;cursor:pointer}
#shared-workshop .vg-inventory td button[data-inv="select"][aria-current="true"]:not(.vg-flow){text-decoration-color:var(--vg-accent-blue,var(--vg-ink));text-decoration-thickness:2px}
#shared-workshop .vg-inventory tr:has(button[aria-current="true"]){background:var(--vg-hi,rgba(27,33,38,.06))}
#shared-workshop .vg-inventory .inv-detail:empty{display:none}
@media (min-width:900px){
  /* filters: one compact row (search | category | state | Filter) instead of tall stacked fields; labels stay visible */
  #shared-workshop .vg-inventory form[data-inv-filter]{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0 12px}
  #shared-workshop .vg-inventory form[data-inv-filter] label{margin:0;min-width:0;flex:1 1 150px}
  #shared-workshop .vg-inventory form[data-inv-filter] button{margin:0;white-space:nowrap;flex:0 0 auto}
  #shared-workshop .vg-inventory .inv-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:18px;align-items:start}
  #shared-workshop .vg-inventory .inv-layout:has(.inv-detail:empty){grid-template-columns:minmax(0,1fr)}
  #shared-workshop .vg-inventory .inv-detail{position:sticky;top:64px;max-height:calc(100dvh - 180px);overflow:auto;padding:4px 14px 14px;border:1px solid var(--vg-line);border-radius:var(--ios-r);background:var(--vg-surface-2)}
}
@media (max-width:899px){
  #shared-workshop .vg-inventory table,#shared-workshop .vg-inventory tbody,#shared-workshop .vg-inventory tr,#shared-workshop .vg-inventory td{display:block;width:100%;box-sizing:border-box}
  #shared-workshop .vg-inventory thead{display:none}
  #shared-workshop .vg-inventory tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--vg-line);border-radius:var(--ios-r);background:var(--vg-surface-2)}
  #shared-workshop .vg-inventory td{padding:2px 0;border:0}
  #shared-workshop .vg-inventory td.inv-name{grid-column:1 / -1;min-width:0}
  #shared-workshop .vg-inventory td.inv-num{text-align:left}
  #shared-workshop .vg-inventory td[data-l]::before{content:attr(data-l);display:block;font:700 var(--ios-t-caption1)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
}

/* ---------------------------------------------------------------- field dispatch + connection line (pilot, 2026-10-17)
   Layout only: colors, radii, fonts and buttons come from the tokens and button styles above (no new effects). */
.vg-conn{margin:0 0 10px}
.vg-conn>p{display:flex;gap:8px;align-items:center;margin:0;font:600 var(--ios-t-footnote)/1.35 var(--vg-font-ui);color:var(--vg-muted)}
.vg-conn-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--vg-muted)}
.vg-conn.is-online .vg-conn-dot{background:var(--vg-ok)}
.vg-conn.is-offline .vg-conn-dot,.vg-conn.is-failed .vg-conn-dot,.vg-conn.is-pending .vg-conn-dot{background:var(--vg-warn)}
.vg-conn.is-offline>p,.vg-conn.is-failed>p,.vg-conn.is-pending>p{color:var(--vg-warn)}
.vg-conn>button{margin:6px 0 0}
.vg-conn-help{margin:4px 0 0;font-size:var(--ios-t-footnote)}
.vg-conn-help ul{margin:6px 0 0;padding-left:18px}
.vg-field-job .vg-field-states{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
.vg-field-tasks{list-style:none;padding:0}
.vg-field-task{display:block;padding:10px 0;border-top:1px solid var(--vg-line)}
.vg-field-task-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vg-field-controls{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.vg-field-controls>button{align-self:flex-start;min-height:44px}
.vg-field-act{margin:6px 0}
.vg-field-act>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.vg-field-form{display:grid;gap:8px;margin:6px 0 4px}
.vg-field-form .actions2{margin:0}
.vg-field-notes{margin:4px 0;padding-left:18px}
.vg-field-office{margin-top:12px;padding-top:10px;border-top:1px solid var(--vg-line-2)}
.vg-field-check ul{list-style:none;padding:0}
.vg-field-check li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vg-field-check li svg{width:16px;height:16px;flex:none}
.vg-field-date{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.vg-field-job h4{margin:14px 0 6px}
.vg-field-job .ifacts li span,.vg-field-job p,.vg-field-task{overflow-wrap:anywhere}
.job.held .callout{margin-top:8px}
#shared-workshop .vgw-top .vgw-conn{display:flex;gap:6px;align-items:center;margin:0;min-width:0;max-width:300px;font:600 var(--ios-t-caption1)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
#shared-workshop .vgw-top .vgw-conn>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgw-conn.is-online .vg-conn-dot{background:var(--vg-ok)}
.vgw-conn.is-offline .vg-conn-dot,.vgw-conn.is-failed .vg-conn-dot,.vgw-conn.is-pending .vg-conn-dot{background:var(--vg-warn)}
#shared-workshop .vgw-top .vgw-conn.is-offline,#shared-workshop .vgw-top .vgw-conn.is-failed,#shared-workshop .vgw-top .vgw-conn.is-pending{color:var(--vg-warn)}
@media (max-width:899px){
  #shared-workshop .vgw-top .vgw-conn{flex:0 0 auto}
  #shared-workshop .vgw-top .vgw-conn>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.vg-field-job .jhead{flex-wrap:wrap;row-gap:6px}
.vg-field-job .jhead h3{flex:1 1 60%;min-width:12ch}
/* compact morning board: one short summary per job, everything else one tap away (no new effects) */
.vg-field-job{padding-top:12px;padding-bottom:10px}
.vg-field-job .vg-field-states{margin:2px 0 4px}
.vg-field-job .flag,.vg-field-job>.fine{margin:4px 0}
.vg-field-quick{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:4px 0}
.vg-field-quick .maplink{margin:0}
.vg-field-quick>p{margin:0;flex:1 1 180px}
.vg-field-more>summary,.vg-field-sec>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.vg-field-more>summary{margin-top:2px;border-top:0;padding-top:4px}
.vg-field-sec{margin:4px 0;border-top:0}
.vg-field-sec-body{padding:2px 0 8px}
.vg-field-sec>summary .vg-tag{margin-left:auto}
/* Despacho / Mi jornada: a closed section is an iOS list row (white row, regular text, count, chevron), not a gray button */
#app .vg-field-sec>summary{position:relative;list-style:none;margin:0;padding:11px 36px 11px var(--ios-gutter);border-radius:var(--ios-r);background:var(--ios-bg-2);color:var(--ios-label);
  font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font)}
#app .vg-field-sec>summary::-webkit-details-marker{display:none}
#app .vg-field-sec>summary::after{content:"";position:absolute;right:var(--ios-gutter);top:50%;width:8px;height:14px;margin-top:-7px;background:var(--ios-label-3);
  -webkit-mask:var(--ios-ic-chev) center/contain no-repeat;mask:var(--ios-ic-chev) center/contain no-repeat;transition:transform .2s var(--ios-ease)}
#app .vg-field-sec[open]>summary::after{transform:rotate(90deg)}
#app .vg-field-sec>summary:active{background:var(--ios-fill-4)}
/* «Detalles y acciones» inside a job card: a plain blue disclosure line (the card's one tinted action stays «Mapa») */
#app .vg-field-more>summary{position:relative;list-style:none;margin:4px 0 0;padding:0 22px 0 0;width:max-content;max-width:100%;background:transparent;border-radius:0;
  color:var(--ios-blue-text);font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font)}
#app .vg-field-more>summary::-webkit-details-marker{display:none}
#app .vg-field-more>summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:14px;margin-top:-7px;background:currentColor;
  -webkit-mask:var(--ios-ic-chev) center/contain no-repeat;mask:var(--ios-ic-chev) center/contain no-repeat;transition:transform .2s var(--ios-ease)}
#app .vg-field-more[open]>summary::after{transform:rotate(90deg)}
#app .vg-field-more>summary:active{opacity:.5}
.vg-field-check li{gap:6px}
.vg-conn.is-stale .vg-conn-dot,.vg-conn.is-unknown .vg-conn-dot,.vgw-conn.is-stale .vg-conn-dot{background:var(--vg-warn)}
.vg-conn.is-stale>p{color:var(--vg-warn)}
.vg-field-date{margin:4px 0 8px}
fieldset[data-mline]{margin:0;padding:8px 10px;border:1px solid var(--vg-line);border-radius:var(--ios-r)}
.vg-field-date{display:flex;flex-wrap:nowrap;gap:8px;align-items:flex-end}
.vg-field-date>label{flex:1 1 auto;min-width:0;margin:0}
.vg-field-date>button{flex:0 0 auto;width:auto;min-height:44px}
.vg-conn-help>summary{min-height:44px;display:flex;align-items:center;padding:0;border:0;background:none;box-shadow:none;font:600 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ---- three journeys (journeys.js): same cards, buttons and tokens; only layout and spacing ---- */
.vg-hello-c h2{font-size:var(--ios-t-title1);margin:0}
.vg-hello-c p{margin:0 0 8px}
.vg-focus{padding-top:12px}
.vg-focus .vg-field-quick{margin-top:6px}
.vg-focus-k{margin:0 0 2px;color:var(--vg-muted);font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui)}
.vg-focus .jhead,.vg-field-job .jhead{flex-wrap:wrap;row-gap:6px}
.vg-focus .jhead h3{flex:1 1 60%;min-width:12ch;overflow-wrap:anywhere}
.vg-focus .vg-field-line,.vg-field-line{margin:2px 0 6px;overflow-wrap:anywhere}
.vg-next{width:100%;margin:6px 0;justify-content:flex-start;text-align:left}
.vg-field-quick .vg-next{flex:1 1 220px;width:auto}
.vg-next-hint{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.vg-next-hint svg{flex:none;width:18px;height:18px;margin-top:1px}
.vg-clockline{display:flex;gap:10px;align-items:center;margin:6px 0;font:600 var(--ios-t-subhead)/1.3 var(--vg-font-ui)}
.vg-clockline .cdot{margin-top:0;width:12px;height:12px}
.vg-clockline.on .cdot{background:var(--ios-green);box-shadow:none}
.vg-clockstrip{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:8px 14px}
.vg-clockstrip .vg-clockline{margin:0;flex:1 1 160px}
.vg-clockstrip>button{width:auto;min-height:44px;margin:0}
.vg-day-head{position:relative}
.vg-day-head>p{margin-bottom:4px}
.vg-field-datebox{margin:0 0 8px}
.vg-field-datebox>summary{min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:600 var(--ios-t-subhead)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
.vg-field-datebox>summary svg{width:16px;height:16px}
.vg-field-exline{margin:0 0 8px}
.vg-field-exline .link{display:inline-flex;gap:6px;align-items:center;min-height:44px;color:var(--vg-warn)}
.vg-field-exline svg{width:16px;height:16px}
.vg-now{margin-top:6px}
.vg-field-row{padding:4px 14px}
.vg-field-row>summary{min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 0;cursor:pointer;list-style:none}
.vg-field-row>summary::-webkit-details-marker{display:none}
.vg-row-main{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.vg-row-main b{overflow-wrap:anywhere}
.vg-field-row>summary .fine{overflow-wrap:anywhere}
.vg-field-job-in{border-top:0;padding-top:6px}
.vg-others{padding:4px 14px}
.vg-others>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.vg-others .rowbtn{margin:4px 0}
.vg-steps{list-style:none;margin:4px 0;padding:0;display:grid;gap:2px}
.vg-step{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--vg-line)}
.vg-step:first-child{border-top:0}
.vg-step>div{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.vg-step>div>p{margin:2px 0}
.vg-step-mark{flex:none;display:inline-flex;margin-top:2px}
.vg-step-mark svg{width:18px;height:18px}
.vg-step-mark.ok{color:var(--vg-ok)}
.vg-step-mark.no{color:var(--vg-warn)}
.vg-mat3{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.vg-mat3>li{padding:8px 10px;border:1px solid var(--vg-line);border-radius:var(--ios-r);background:var(--vg-surface-2)}
.vg-mat3>li>span{font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
.vg-mat3>li>p{margin:2px 0}
fieldset[data-cline]{margin:0;padding:8px 10px;border:1px solid var(--vg-line);border-radius:var(--ios-r);min-width:0}
.vg-report3{display:flex;flex-wrap:wrap;gap:6px 10px;margin:4px 0}
.vg-report3>button{width:auto;min-height:44px;margin:0}
.vg-review{padding:10px 0;border-top:1px solid var(--vg-line)}
.vg-review:first-of-type{border-top:0}
.vg-review .jhead{flex-wrap:wrap;row-gap:6px}
.vg-review p{overflow-wrap:anywhere}
@media (max-width:420px){.vg-field-quick .vg-next{flex-basis:100%}.vg-report3>button{flex:1 1 100%}}
/* ---- Workshop: compact view control (replaces the bottom camera bar), building hint, team buildings panel ---- */
#shared-workshop .vgw-view{position:fixed;z-index:515;top:calc(var(--vgw-top-h,72px) + 24px);right:calc(var(--vgw-r,12px) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#shared-workshop .vgw-view .vgw-vmain:not(.vg-flow):not(.danger){display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px 0 12px;border:1px solid var(--vg-line-2)!important;border-radius:var(--ios-r);background:var(--vg-glass-strong,var(--bg))!important;box-shadow:var(--vg-glass-shadow,var(--sh-card))!important;color:var(--vg-ink);font:600 var(--ios-t-subhead)/1 var(--vg-font-ui)}
#shared-workshop .vgw-view .vgw-vmain[aria-expanded="true"]:not(.vg-flow){border-color:color-mix(in srgb,var(--vg-accent-blue,#5f7f99) 70%,transparent)!important}
#shared-workshop .vgw-view .ic{width:20px;height:20px;flex:none}
/* the «Vista» menu: 48 px rows with 10 px between them, icon and label on one line, three groups (camera views / zoom /
   toggles) separated by a thin rule; it opens with a short fade + scale from its button (closing is immediate) */
#shared-workshop .vgw-view-menu{display:flex;flex-direction:column;gap:10px;min-width:248px;max-width:calc(100vw - 32px);padding:10px;border:1px solid var(--vg-line-2);border-radius:var(--ios-r);background:var(--vg-panel-bg,var(--bg));box-shadow:var(--vg-glass-shadow,var(--sh-card));transform-origin:top right;animation:vgw-menu-in .18s cubic-bezier(.2,.75,.2,1) both}
@keyframes vgw-menu-in{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#shared-workshop .vgw-view-menu{animation:none}}
#shared-workshop .vgw-view-menu[hidden]{display:none}
#shared-workshop .vgw-view-menu hr.vgw-vsep{width:auto;height:0;margin:0 6px;border:0;border-top:1px solid var(--vg-line-2)}
#shared-workshop .vgw-view-menu .vgw-vitem:not(.vg-flow):not(.danger){display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:0 14px;border:1px solid transparent!important;border-radius:var(--ios-r);background:transparent!important;box-shadow:none!important;color:var(--vg-ink);font:600 var(--ios-t-subhead)/1.2 var(--vg-font-ui);text-align:left}
#shared-workshop .vgw-view-menu .vgw-vitem .ic{flex:none}
#shared-workshop .vgw-view-menu .vgw-vitem span{flex:1 1 auto;min-width:0}
#shared-workshop .vgw-view-menu .vgw-vitem[aria-pressed="true"]:not(.vg-flow){border-color:color-mix(in srgb,var(--vg-accent-blue,#5f7f99) 70%,transparent)!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important}
@media (hover:hover) and (pointer:fine){#shared-workshop .vgw-view-menu .vgw-vitem:not(.vg-flow):hover{border-color:var(--vg-line)!important}}
#shared-workshop .vgw-view :focus-visible{outline:3px solid var(--vg-ink);outline-offset:2px}
#shared-workshop .vgw-hint{position:fixed;z-index:514;top:calc(var(--vgw-top-h,72px) + 24px);left:calc(var(--vgw-l,214px) + 16px);right:calc(var(--vgw-r,12px) + 160px);width:max-content;max-width:calc(100vw - var(--vgw-l,214px) - var(--vgw-r,12px) - 180px);margin:0 auto;padding:8px 14px;border:1px solid var(--vg-line-2);border-radius:999px;background:var(--vg-glass-strong,var(--bg));color:var(--vg-ink);font:600 var(--ios-t-subhead)/1.3 var(--vg-font-ui);text-align:center}
#shared-workshop .vgw-lead{margin:4px 0 10px;color:var(--vg-muted)}
#shared-workshop .vgw-bld-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
#shared-workshop .vgw-bld:not(.vg-flow):not(.danger){display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:56px;margin:0;padding:8px 12px;text-align:left;border-radius:var(--ios-r)}
#shared-workshop .vgw-bld b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--ios-r-s);border:1px solid var(--vg-line-2);font:700 var(--ios-t-body)/1 var(--vg-font-ui)}
#shared-workshop .vgw-bld span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;font:600 var(--ios-t-subhead)/1.25 var(--vg-font-ui)}
#shared-workshop .vgw-bld small{font-weight:400;color:var(--vg-muted)}
#shared-workshop .vgw-team{margin:0 0 12px}
#shared-workshop .vgw-team h3{margin:0 0 2px;font:700 var(--ios-t-body)/1.25 var(--vg-font-ui)}
#shared-workshop .vgw-team h4{margin:12px 0 4px;font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui);color:var(--vg-muted)}
#shared-workshop .vgw-team-sum{margin:0;color:var(--vg-muted)}
#shared-workshop .vgw-members,#shared-workshop .vgw-jobs{list-style:none;margin:0;padding:0}
#shared-workshop .vgw-members li,#shared-workshop .vgw-jobs li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 0;border-top:1px solid var(--vg-line)}
#shared-workshop .vgw-members li>span:first-child{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
#shared-workshop .vgw-jobs li{display:block;overflow-wrap:anywhere}
#shared-workshop .vgw-tag.is-on{color:var(--vg-ok);border-color:color-mix(in srgb,var(--vg-ok) 55%,transparent)}
@media (max-width:899px){
  #shared-workshop .vgw-view{top:calc(var(--vgw-top-h,150px) + 14px);right:14px}
  /* phone: under the round menu button (left) and clear of the «En vivo» / theme / «Vista» column (right) */
  #shared-workshop .vgw-hint{top:calc(var(--vgw-top-h,150px) + 72px);left:14px;right:136px;max-width:calc(100vw - 150px);margin:0;font-size:var(--ios-t-footnote)}
  /* the expanded sheet covers the scene: its view control and hint step aside until the sheet is reduced */
  html.vgw-sheet-full #shared-workshop .vgw-view,html.vgw-sheet-full #shared-workshop .vgw-hint{display:none}
}
/* short landscape phones: the control runs along the top of the scene instead of down its side */
@media (max-width:899px) and (max-height:500px){#shared-workshop .vgw-view-menu{max-height:calc(100dvh - var(--vgw-top-h,150px) - 90px);overflow:auto}}

/* building labels in the scene: the letter chip uses the accent ink on the accent fill (it was light-on-light in dark theme) */
#labels .tlbl span .pl-k{color:var(--accent-ink,#0d1418)}
/* very small phones (<= 360 px): the three app names stay whole; the icons go (labels alone are clear) */
@media (max-width:360px){#app#app .vg-switch3>*{font-size:var(--ios-t-subhead);padding:0 2px;gap:0}#app .vg-switch3 .ic{display:none}}
/* four apps (the CEO accounts also have Estadísticas): one row of four on wide screens, a 2×2 grid on phones, so no
   name is cut and Poncheo is never pushed out; with two per row the icons fit again on the smallest phones */
#app#app .vg-switch4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
@media (max-width:600px){#app#app .vg-switch4{grid-template-columns:repeat(2,minmax(0,1fr))}#app#app .vg-switch4>*{gap:6px}#app#app .vg-switch4 .ic{display:block}}
@media (max-width:899px){#shared-workshop .vgw-apps.vgw-apps4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}:root #shared-workshop .vgw-apps.vgw-apps4>*{min-height:40px;padding:0 6px}}
/* Workshop › Vans: trip actions in one row, cargo lines as small cards; one column on phones (no overflow) */
#shared-workshop .vgw-van-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
#shared-workshop .vgw-van-act input{flex:1 1 180px;min-width:0}
#shared-workshop .vgw-van-line{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);border:1px solid var(--vg-line-2,var(--line));border-radius:var(--ios-r);padding:10px;margin:8px 0;min-width:0}
#shared-workshop .vgw-van-line select,#shared-workshop .vgw-van-line input{min-width:0;max-width:100%}
@media (min-width:900px){#shared-workshop .vgw-van-line{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
#shared-workshop .vgw-van-cargo{margin:4px 0 8px;padding-left:18px}
#shared-workshop .vgw-trip{margin:8px 0}
#shared-workshop .vgw-van-name small{font-weight:400;opacity:.8}
/* vans forms in a narrow panel / phone and on a PC: every field shrinks inside its form; the two dates go to one column
   when they do not fit (the panel width decides, not the screen); the time zone is one note, not part of each label */
#shared-workshop #workshop-vans form{min-width:0}
#shared-workshop #workshop-vans form label:not(.chk){display:grid;gap:4px;min-width:0;margin:0 0 10px}
#shared-workshop #workshop-vans input,#shared-workshop #workshop-vans select{min-width:0;max-width:100%;box-sizing:border-box}
#shared-workshop #workshop-vans input[type=datetime-local]{width:100%}
#shared-workshop .vgw-van-when{display:grid;gap:4px 12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin:0 0 6px}
#shared-workshop .vgw-van-tzline{margin:6px 0 6px}
#shared-workshop .vgw-van-contents{border:1px solid var(--vg-line-2,var(--line));border-radius:var(--ios-r);padding:10px 12px;margin:8px 0 12px}
#shared-workshop .vgw-van-contents h4{margin:0 0 4px}
#shared-workshop .vgw-van-contents h5{margin:10px 0 2px;font:700 var(--ios-t-footnote)/1.3 var(--vg-font-ui)}
/* summaries of a trip's load / the kit: the title and its counters wrap onto rows instead of breaking inside each other */
#shared-workshop .vgw-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
#shared-workshop .vgw-sum-title{flex:1 1 10rem;min-width:0}
#shared-workshop .vgw-sum-chips{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0;max-width:100%}
#shared-workshop .vgw-sum-chips .vgw-tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* van rows (van-rows.js) — Workshop «Contenido de la van» and Poncheo «Mis viajes en van»: two short foldable rows,
   counters that wrap, one article per line when opened; light and dark through the shared tokens */
.vg-vrows{display:grid;gap:8px;margin:8px 0;min-width:0}
.vg-vrow{border:1px solid var(--vg-line-2,var(--line,rgba(127,127,127,.35)));border-radius:var(--ios-r);min-width:0;background:var(--vg-surface-2,transparent)}
.vg-vrow>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;cursor:pointer;min-width:0;min-height:44px;box-sizing:border-box}
#shared-workshop .vg-vrow>summary,#app .vg-vrow>summary{flex-direction:row;justify-content:flex-start;text-align:left;border:0;border-radius:inherit;background:none;box-shadow:none;width:auto;margin:0;padding:10px 12px;font:600 var(--ios-t-subhead)/1.3 var(--vg-font-ui)}
.vg-vrow-title{font-weight:700;flex:1 1 7rem;min-width:0}
.vg-vrow-chips,.vg-vitem-tags{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0;max-width:100%}
.vg-vchip{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:none;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2);max-width:100%;overflow-wrap:anywhere}
.vg-vchip.is-bad::before,.vg-vchip.is-warn::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ios-orange)}
.vg-vchip.is-bad::before{background:var(--ios-red)}
.vg-vlist{list-style:none;margin:0;padding:0 12px 6px;display:grid;gap:0}
.vg-vitem{display:grid;gap:4px;padding:8px 0;border-top:1px solid var(--vg-line-2,var(--line,rgba(127,127,127,.25)));min-width:0}
.vg-vitem-top{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;align-items:baseline;min-width:0}
.vg-vitem-name{min-width:0;overflow-wrap:anywhere}
.vg-vitem-qty{min-width:0}
.vg-vrow>.fine,.vg-vrow>details{margin:0 12px 10px}
.vg-vadd label:not(.chk){display:grid;gap:4px;min-width:0;margin:0 0 8px}
.vg-vadd input,.vg-vadd select{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
/* phone bottom sheet: fully opaque (same dark tone as its header) so 3D labels behind it never read as sheet text */
@media (max-width:899px){#shared-workshop .vgw-panel{background:var(--vg-panel-solid,#171d24)}}
/* note translation (note-translate.js): the label + «Ver original» under a translated note, and ONE notice per page */
.vg-tr-meta{display:block;margin-top:3px;color:var(--vg-muted,var(--muted));font:400 var(--ios-t-footnote)/1.35 var(--vg-font-ui,inherit);white-space:normal}
button.vg-tr-toggle,#app button.vg-tr-toggle{display:inline-flex;align-items:center;width:auto;min-height:40px;margin:0;padding:0 6px;border:0;background:none;box-shadow:none;color:var(--vg-accent-blue,var(--accent));font:600 var(--ios-t-footnote)/1.35 var(--vg-font-ui,inherit);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.vg-tr-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.vg-tr-notice{margin:6px 0 10px;padding:8px 12px;border:1px dashed var(--vg-line-2,var(--line));border-radius:var(--ios-r);color:var(--vg-muted,var(--muted));font:400 var(--ios-t-footnote)/1.4 var(--vg-font-ui,inherit)}
/* phones (<= 600 px): «Vision Glass» stands over the screen name (one column, the row keeps its height) and is never cut
   (it was «V..» at 390 for the CEO, «Visio…» for a worker). Where even that does not fit — one search button: under
   367 px; two (CEO / foreman: search + places): under 417 px — the header takes two rows, the full name with the screen
   title first and every control on the row below (none removed, none smaller), as on the smallest phones before */
/* bottom tabs on narrow phones: a two-word label takes two lines instead of an ellipsis («Mi trab…», «Mi jorn…» at 360) */
@media (max-width:400px){#app .tabs button span{white-space:normal;text-align:center;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:normal}}
/* (the brand is a grid in the glass theme — logo | name over screen title — and a flex column otherwise; with the
   phone's logo hidden the grid put the two side by side, which is what cut the name) */
@media (max-width:600px){#app#app .top .brand{flex:1 0 auto;min-width:max-content;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;grid-template-columns:auto;grid-template-rows:auto auto;row-gap:1px}#app#app .top .brand b{overflow:visible;text-overflow:clip}#app#app .top .brand span{font-size:var(--ios-t-caption1);line-height:1.2}}
@media (max-width:416px){#app#app .top:has(.topsearch .vg-global>button+button){flex-wrap:wrap}#app#app .top:has(.topsearch .vg-global>button+button) .brand{flex:1 0 100%;flex-direction:row;align-items:baseline;gap:8px;grid-template-columns:auto 1fr;grid-template-rows:auto}#app#app .top:has(.topsearch .vg-global>button+button) .topr{margin-left:auto}}
@media (max-width:366px){#app#app .top{flex-wrap:wrap}#app#app .top .brand{flex:1 0 100%;flex-direction:row;align-items:baseline;gap:8px;grid-template-columns:auto 1fr;grid-template-rows:auto}#app#app .top .topr{margin-left:auto}}

/* Primary action feedback: immediate touch response, stable geometry and one synchronized fill.
   Only button labels suppress selection/callout; page text and form fields stay selectable. */
.vg-flow.vg-flow.vg-flow, #shared-workshop button.vg-flow.vg-flow {
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  border-radius:var(--vg-r-pill,100px)!important;
  transition:transform 100ms ease,border-color 160ms ease!important;
}
.vg-flow.vg-flow.vg-flow *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vg-flow.vg-flow.vg-flow .fl-txt{transform:none!important;transition:none!important}
.vg-flow.vg-flow.vg-flow .fl-arr{transition:none!important}
.vg-flow.vg-flow.vg-flow > .fl-arr{z-index:1}
.vg-flow.vg-flow.vg-flow .fl-a1{right:16px!important}
.vg-flow.vg-flow.vg-flow .fl-a2{display:none!important}
.vg-flow.vg-flow.vg-flow .fl-on{
  clip-path:none!important;opacity:0;transition:opacity 160ms ease!important;
}
.vg-flow.vg-flow.vg-flow:is(:active,.is-on):not(:disabled) .fl-on{opacity:1;transition-duration:70ms!important}
@media (hover:hover) and (pointer:fine){
  .vg-flow.vg-flow.vg-flow:hover:not(:disabled) .fl-on{opacity:1}
}
.vg-flow.vg-flow.vg-flow:active:not(:disabled){transform:scale(.98)!important}
.vg-flow.vg-flow.vg-flow:focus-visible{outline:3px solid var(--vg-accent-blue,#5389c8)!important;outline-offset:3px}
.vg-flow.vg-flow.vg-flow:disabled .fl-on{opacity:0!important}
@media(prefers-reduced-motion:reduce){
  .vg-flow.vg-flow.vg-flow,.vg-flow.vg-flow.vg-flow .fl-on{transition:none!important}
  .vg-flow.vg-flow.vg-flow:active{transform:none!important}
}

/* Action controls are not text links: prevent iOS text selection/callouts on the
   complete hit target, including labels, SVGs and decorated copies. */
:is(#app,#shared-workshop,#bar3d,#sheet3d) button,
:is(#app,#shared-workshop,#bar3d,#sheet3d) button *,
.vg-global button,.vg-global button *{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;text-decoration:none!important;
}