/* ======================= Vision Glass — kit «10/10» (the approved demo's look for the real apps) =======================
   The tokens and shared components of the approved «Vision Glass 10/10» demo (shell.html + its 12 sections), for new
   screens in Poncheo, Proyectos and Estadísticas. Everything lives under a root class .vgk, so nothing else in the apps
   changes: put class="vgk" on the element that holds a new screen and use the classes below inside it.
   The class list, the demo origin of each component and the colours changed for WCAG AA: verify/kit/README.md.
   Gallery and screenshots: verify/kit/gallery.html + verify/kit/shots.mjs.
   - Theme: light values on .vgk; dark values follow the app's own switch exactly like the demo
     (:root[data-theme="dark"], or the system setting when the page has no data-theme="light").
   - .vgk is also the root class of the logo loader (vg-loader.css: .vgk.vgk-page / .vgk.vgk-inline); the root rules
     below skip those two, so the loader is untouched (it never reads the --p-* / --k-* tokens).
   - Names the apps already use (.card, .seg, .sheet, .callout, .pill, .tbl) are NOT used here: Poncheo styles them
     (some with !important) and app.js queries .sheet. Kit names: .box (the demo's .card), .segm, .bsheet, .bn / .note,
     .segm.round, .dtable. The apps' bare .ok / .warn colour rules are answered where a kit element carries text.
   - The apps turn every backdrop blur off on purpose (vg-loader.css, «no live backdrop blur», 22-oct): the kit does
     not fight that. Glass that sits on the glow keeps its tint; the surfaces that float over scrolling content (tab bar,
     drawer, modal veil) are opaque or denser, pre-blended over the page colour like the apps' own (vg-glass-poncheo.css).
   - State colours (WCAG 1.4.11, 3:1): control outlines use --k-ctl-line; fills that carry a state use --k-ok-on /
     --k-warn-on (white knob or glyph on top) or --k-ok-fill / --k-warn-fill / --k-bad-fill / --k-bar-mute (dots, bars),
     measured against a card, sheet, glass, the plain page and the brightest spot of the glow. A selected segment is also
     told by its bolder label (500 → 700), as iOS does, not by its pill alone.
   - The apps style every <button>, <input>, <select> and <textarea> globally (styles.css, vg-ui.css and, in Poncheo,
     vg-glass-poncheo.css with !important). The few properties they force are re-applied in one cascade layer with
     !important (layered !important wins over unlayered !important, whatever the specificity) and each one reads a
     variable: --kb-bg / --kb-bd / --kb-sh / --kb-tr / --kb-press (buttons) and --kf-bg / --kf-bd / --kf-sh / --kf-r /
     --kf-tr (fields). To customise one of those properties, set its variable (a plain declaration is outranked).
   - Fonts: the system font only (--sans / --mono alias --ios-font / --ios-mono of vg-apple-base.css; no web fonts).
     No inline styles are needed (the site CSP forbids them):
     progress widths come from --v, set through JavaScript (el.style.setProperty('--v', .55)) or a native <progress>.
   Sections: 0 guard layer · 1 tokens · 2 root · 3 surfaces · 4 text · 5 buttons · 6 chips, badges, dots · 7 avatars and
             tiles · 8 segmented · 9 toggle, check, option · 10 fields · 11 lists and timeline · 12 progress · 13 toasts,
             sheets, dialogs · 14 tab bar · 15 desktop pieces · 16 banners and notes · 17 focus, motion, forced colours ·
             18 keypad · 19 signature · 20 photo slot (the kit's JS components: vg-keypad.js, vg-sign.js, vg-photos.js) */

/* ---- 0 guard layer: the properties the apps force on buttons and fields, re-applied from the kit's variables ---- */
@layer vg-kit-guard{
  .vgk button:is(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key),.vgk :is(.ctl,.segm,.tb)>button,.vgk .pslot{background:var(--kb-bg,transparent)!important;border-color:var(--kb-bd,transparent)!important;box-shadow:var(--kb-sh,none)!important;transition:var(--kb-tr,none)!important}
  .vgk button:is(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key):active,.vgk :is(.ctl,.segm,.tb)>button:active,.vgk .pslot:active{transform:var(--kb-press,none)!important}
  .vgk :is(.inp,.field>input,.range){background:var(--kf-bg,transparent)!important;border-color:var(--kf-bd,transparent)!important;box-shadow:var(--kf-sh,none)!important;border-radius:var(--kf-r,0)!important;transition:var(--kf-tr,none)!important}
  /* Poncheo strips every decoration inside its buttons (vg-ui.css, :is(#app…) button *{text-decoration:none!important}):
     the done row's strike-through and the underline of a link in a sentence (WCAG 1.4.1) come back (leak-check) */
  .vgk .row.done .tx>b{text-decoration-line:line-through!important}
  .vgk :is(p,.t-sub,.t-cap,.note,.tx) .lnk{text-decoration-line:underline!important}
  @media (prefers-reduced-motion:reduce){
    .vgk button:is(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key),.vgk :is(.ctl,.segm,.tb)>button,.vgk .pslot,.vgk :is(.inp,.field>input,.range){transition:none!important}
    .vgk button:is(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key):active,.vgk :is(.ctl,.segm,.tb)>button:active,.vgk .pslot:active{transform:none!important}
  }
}

/* ---- 1 tokens: --p-* are the demo shell's own (same names and values); --k-* come from the demo sections.
   Marked AA: darkened (light) or lightened (dark) the minimum for WCAG AA text contrast (list in verify/kit/README.md). */
.vgk{
  --sans:var(--ios-font);--mono:var(--ios-mono);
  --p-bg:var(--ios-bg);--p-fg:var(--ios-label);--p-mut:var(--ios-label-2);--p-blue:var(--ios-blue);--p-green:var(--ios-green);--p-orange:var(--ios-orange);--p-red:var(--ios-red);--p-purple:var(--ios-purple);--p-indigo:var(--ios-indigo);
  --p-glass:var(--ios-bg-2);--p-line:var(--ios-hairline);--p-card:var(--ios-bg-2);
  --p-edge:transparent;--p-hi:transparent;--p-shadow:transparent;--p-frame:rgba(0,0,0,.12);--p-tl:rgba(255,255,255,.7);
  --p-chip:var(--ios-fill);--p-btn:var(--ios-fill);
  --p-ok-bg:var(--ios-green-tint);--p-ok-fg:var(--ios-green-text);--p-warn-bg:var(--ios-orange-tint);--p-warn-fg:var(--ios-orange-text);--p-bad-bg:var(--ios-red-tint);--p-bad-fg:var(--ios-red-text);--p-info-bg:var(--ios-blue-tint);--p-info-fg:var(--ios-blue-text);
  --p-glow1:transparent;--p-glow2:transparent;--p-glow3:transparent;
  --p-acc-fill:var(--ios-blue);
  /* AA: --p-mut #6e6e73, --p-ok-fg #1a7f3e, --p-warn-fg #a35a00, --p-bad-fg #c4271d, --p-info-fg #0062c4 in the demo */
  --k-panel:var(--ios-bg-2);--k-pline:rgba(0,0,0,.08);--k-focus:var(--ios-blue);
  --k-link:var(--ios-blue-text);--k-tint-fg:#5a5a5f;--k-pri-a:var(--ios-blue-fill);--k-pri-b:var(--ios-blue-fill);--k-okb:#008832;--k-bd:var(--ios-red-fill);
  /* AA: links #0071e3, text on tinted tracks #6e6e73, .bt.pri #1a84f0→#0071e3, .bt.okb #34c759, .bd #ff3b30 in the demo */
  --k-seg:var(--ios-fill);--k-seg-on:var(--ios-seg-thumb);--k-seg-em:var(--k-tint-fg);--k-off:var(--k-ctl-line);
  --k-pill:var(--ios-seg-thumb);--k-pill-sh:0 1px 2px rgba(0,0,0,.08),0 6px 14px -8px rgba(30,60,110,.35);
  --k-track:rgba(0,0,0,.07);--k-bar-mute:#6d7683;--k-rail:rgba(0,0,0,.08);--k-rail-sm:rgba(0,0,0,.1);--k-rail2:rgba(0,0,0,.09);
  --k-dot:var(--k-ctl-line);--k-dot-fg:#ffffff;--k-dot-mut:var(--k-ctl-line);--k-dot-ring:rgba(0,0,0,.05);
  --k-edge:rgba(0,0,0,.04);--k-lift:0 0 0 0 transparent;
  --k-sheet:rgba(244,246,250,.95);--k-sheet-sh:rgba(20,40,90,.3);--k-group:var(--ios-bg-2);--k-grab:rgba(0,0,0,.18);--k-scrim:rgba(20,26,44,.24);
  --k-mscrim:rgba(242,244,248,.78);--k-ring:rgba(0,0,0,.06);--k-drop:rgba(20,40,80,.4);
  --k-panel2:#fefefe;--k-dedge:rgba(255,255,255,.95);--k-dring:rgba(0,0,0,.05);--k-ddrop:rgba(20,40,80,.45);
  --k-ink:rgba(29,29,31,.88);--k-toast:rgba(255,255,255,.97);--k-hair:rgba(0,0,0,.05);
  --k-in:#ffffff;--k-in-line:var(--k-ctl-line);--k-in-ring:var(--ios-focus-ring);--k-field:var(--ios-fill);--k-field-line:var(--k-ctl-line);--k-ph:#6f6f74;
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23646469' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k-opt:#ffffff;--k-opt-line:rgba(0,0,0,.08);--k-opt-on:rgba(0,113,227,.04);--k-radio:var(--k-ctl-line);--k-cb:var(--k-ctl-line);--k-ring2:#ffffff;
  --k-tb:#f7f8fb;--k-tb-line:rgba(0,0,0,.06);--k-tb-fg:#6f6f74;--k-tb-on:var(--k-link);
  /* AA: placeholder and idle tab labels #8e8e93 in the demo */
  --k-icb:rgba(255,255,255,.85);--k-icb-line:rgba(0,0,0,.06);
  --k-out:rgba(255,255,255,.75);--k-out-fg:#3a3a3c;--k-out-line:rgba(0,0,0,.05);
  --k-tint:var(--ios-blue-tint);--k-neg:rgba(255,59,48,.09);--k-inkbt:var(--ios-blue);--k-inkbt-fg:var(--ios-on-accent);--k-off-bg:rgba(0,0,0,.08);--k-off-fg:#aeaeb2;
  --k-table:rgba(255,255,255,.92);--k-thead:rgba(242,244,248,.8);--k-rule:rgba(0,0,0,.05);--k-zebra:rgba(0,0,0,.012);--k-tfoot:rgba(242,244,248,.85);
  --k-band:rgba(255,255,255,.5);--k-sel:#ffffff;--k-chev-c:#8b8b90;
  --k-stat-warn:rgba(255,149,0,.12);--k-stat-warn-line:rgba(255,149,0,.25);--k-stat-ok:rgba(52,199,89,.12);--k-stat-ok-line:rgba(52,199,89,.25);
  --k-bn:#ffffff;--k-bn-line:rgba(0,113,227,.22);--k-bn-sub:#55555c;
  --k-bn-ok:#ebf9ef;--k-bn-ok-line:rgba(52,199,89,.4);--k-bn-ok-b:#14632f;
  --k-bn-warn:#fff5e2;--k-bn-warn-line:rgba(255,149,0,.4);--k-bn-warn-fg:#7a4300;--k-bn-warn-b:#5c3300;
  --k-bn-bad:#fff0ef;--k-bn-bad-line:rgba(255,59,48,.32);--k-bn-mute:rgba(255,255,255,.75);--k-bn-mute-line:rgba(0,0,0,.06);
  --k-note:rgba(29,29,31,.05);--k-note-fg:#3a3a3e;--k-note-warn:rgba(255,149,0,.1);--k-note-warn-fg:#6b3d00;--k-note-ok:rgba(52,199,89,.11);--k-note-ok-fg:#14532d;
  --k-note-bad:rgba(255,59,48,.09);--k-note-bad-fg:#7a1610;--k-note-info:rgba(0,113,227,.07);--k-note-info-fg:#0b3d75;
  --k-ctl-line:#7f7f84;--k-thumb-line:#717176;--k-ok-on:#009437;--k-warn-on:#bc6c00;--k-ok-fill:var(--ios-green);--k-warn-fill:var(--ios-orange);--k-bad-fill:var(--ios-red);
  --k-segsm:var(--ios-fill);--k-segsm-fg:#3a3a3c;--k-segsm-on:var(--ios-seg-thumb);--k-segsm-sh:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06);
  --k-out-t:var(--p-blue);--k-out-b:rgba(0,113,227,.35);
  /* 1.4.11, 3:1 (the smallest OKLCH lightness change, same hue): outlines #c7c7cc / rgba(0,0,0,.14) and chevrons #c7c7cc,
     fills #34c759 / #ff9500 / #ff3b30, grey bars #8a93a0, focus ring #0071e3 in the demo. No blur in the apps: tab bar rgba(248,249,252,.82),
     drawer rgba(255,255,255,.9) and modal veil rgba(242,244,248,.5) in the demo, pre-blended over the page here */
}
:root[data-theme="dark"] .vgk{--p-frame:rgba(255,255,255,.12);--p-tl:rgba(28,33,38,.85);--k-pline:rgba(255,255,255,.09);--k-tint-fg:#a9acb4;--k-okb:#00882f;--k-seg-em:rgba(255,255,255,.8);--k-off:var(--k-ctl-line);--k-pill-sh:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.07);
  --k-track:rgba(255,255,255,.09);--k-bar-mute:#7d8794;--k-rail:rgba(255,255,255,.12);--k-rail-sm:rgba(255,255,255,.14);--k-rail2:rgba(255,255,255,.14);
  --k-dot:var(--k-ctl-line);--k-dot-fg:#ffffff;--k-dot-mut:var(--k-ctl-line);--k-dot-ring:rgba(255,255,255,.06);
  --k-edge:rgba(255,255,255,.07);
  --k-sheet:rgba(23,27,32,.96);--k-sheet-sh:rgba(0,0,0,.6);--k-grab:rgba(255,255,255,.28);--k-scrim:rgba(0,0,0,.5);
  --k-mscrim:rgba(10,12,14,.7);--k-ring:rgba(255,255,255,.08);--k-drop:rgba(0,0,0,.6);
  --k-panel2:#1b2025;--k-dedge:rgba(255,255,255,.09);--k-dring:rgba(0,0,0,.35);--k-ddrop:rgba(0,0,0,.6);
  --k-ink:rgba(58,64,72,.95);--k-toast:rgba(42,48,56,.97);--k-hair:rgba(255,255,255,.08);
  --k-in:#15191d;--k-in-line:var(--k-ctl-line);--k-field-line:var(--k-ctl-line);--k-ph:#8e939b;
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a0a3ab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k-opt:#252b32;--k-opt-line:rgba(255,255,255,.1);--k-opt-on:rgba(10,132,255,.1);--k-radio:var(--k-ctl-line);--k-cb:var(--k-ctl-line);--k-ring2:#1f2429;
  --k-tb:#161a1e;--k-tb-line:rgba(255,255,255,.08);--k-tb-fg:#8e8e93;
  --k-icb:rgba(40,46,54,.85);--k-icb-line:rgba(255,255,255,.1);
  --k-out:rgba(255,255,255,.08);--k-out-fg:#d1d3d9;--k-out-line:rgba(255,255,255,.08);--k-neg:rgba(255,69,58,.16);--k-off-bg:rgba(255,255,255,.08);--k-off-fg:#7d828a;
  --k-table:rgba(28,33,38,.92);--k-thead:rgba(255,255,255,.035);--k-rule:rgba(255,255,255,.06);--k-zebra:rgba(255,255,255,.018);--k-tfoot:rgba(255,255,255,.045);
  --k-band:rgba(255,255,255,.045);--k-sel:rgba(255,255,255,.08);--k-chev-c:#6f757c;
  --k-stat-warn:rgba(255,159,10,.15);--k-stat-warn-line:rgba(255,159,10,.32);--k-stat-ok:rgba(48,209,88,.15);--k-stat-ok-line:rgba(48,209,88,.32);
  --k-bn:#172230;--k-bn-line:rgba(10,132,255,.42);--k-bn-sub:#b4b7bf;
  --k-bn-ok:#14251a;--k-bn-ok-line:rgba(48,209,88,.42);--k-bn-ok-b:#86e3a0;
  --k-bn-warn:#2c2214;--k-bn-warn-line:rgba(255,159,10,.45);--k-bn-warn-fg:#ffc979;--k-bn-warn-b:#ffe0b0;
  --k-bn-bad:#2e1a19;--k-bn-bad-line:rgba(255,69,58,.45);--k-bn-mute:rgba(255,255,255,.05);--k-bn-mute-line:rgba(255,255,255,.09);
  --k-note:rgba(255,255,255,.06);--k-note-fg:#c9ccd2;--k-note-warn:var(--p-warn-bg);--k-note-warn-fg:var(--p-warn-fg);--k-note-ok:var(--p-ok-bg);--k-note-ok-fg:var(--p-ok-fg);
  --k-note-bad:var(--p-bad-bg);--k-note-bad-fg:var(--p-bad-fg);--k-note-info:var(--p-info-bg);--k-note-info-fg:var(--p-info-fg);
  --k-ctl-line:#70757e;--k-thumb-line:var(--k-ctl-line);--k-ok-on:#00aa3d;--k-warn-on:#d28100;--k-segsm-fg:#c5c7cd;--k-segsm-sh:0 1px 3px rgba(0,0,0,.45),0 0 0 .5px rgba(255,255,255,.08);
  --k-out-t:var(--p-info-fg);--k-out-b:rgba(10,132,255,.5);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk{--p-frame:rgba(255,255,255,.12);--p-tl:rgba(28,33,38,.85);--k-pline:rgba(255,255,255,.09);--k-tint-fg:#a9acb4;--k-okb:#00882f;--k-seg-em:rgba(255,255,255,.8);--k-off:var(--k-ctl-line);--k-pill-sh:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.07);
  --k-track:rgba(255,255,255,.09);--k-bar-mute:#7d8794;--k-rail:rgba(255,255,255,.12);--k-rail-sm:rgba(255,255,255,.14);--k-rail2:rgba(255,255,255,.14);
  --k-dot:var(--k-ctl-line);--k-dot-fg:#ffffff;--k-dot-mut:var(--k-ctl-line);--k-dot-ring:rgba(255,255,255,.06);
  --k-edge:rgba(255,255,255,.07);
  --k-sheet:rgba(23,27,32,.96);--k-sheet-sh:rgba(0,0,0,.6);--k-grab:rgba(255,255,255,.28);--k-scrim:rgba(0,0,0,.5);
  --k-mscrim:rgba(10,12,14,.7);--k-ring:rgba(255,255,255,.08);--k-drop:rgba(0,0,0,.6);
  --k-panel2:#1b2025;--k-dedge:rgba(255,255,255,.09);--k-dring:rgba(0,0,0,.35);--k-ddrop:rgba(0,0,0,.6);
  --k-ink:rgba(58,64,72,.95);--k-toast:rgba(42,48,56,.97);--k-hair:rgba(255,255,255,.08);
  --k-in:#15191d;--k-in-line:var(--k-ctl-line);--k-field-line:var(--k-ctl-line);--k-ph:#8e939b;
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a0a3ab' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k-opt:#252b32;--k-opt-line:rgba(255,255,255,.1);--k-opt-on:rgba(10,132,255,.1);--k-radio:var(--k-ctl-line);--k-cb:var(--k-ctl-line);--k-ring2:#1f2429;
  --k-tb:#161a1e;--k-tb-line:rgba(255,255,255,.08);--k-tb-fg:#8e8e93;
  --k-icb:rgba(40,46,54,.85);--k-icb-line:rgba(255,255,255,.1);
  --k-out:rgba(255,255,255,.08);--k-out-fg:#d1d3d9;--k-out-line:rgba(255,255,255,.08);--k-neg:rgba(255,69,58,.16);--k-off-bg:rgba(255,255,255,.08);--k-off-fg:#7d828a;
  --k-table:rgba(28,33,38,.92);--k-thead:rgba(255,255,255,.035);--k-rule:rgba(255,255,255,.06);--k-zebra:rgba(255,255,255,.018);--k-tfoot:rgba(255,255,255,.045);
  --k-band:rgba(255,255,255,.045);--k-sel:rgba(255,255,255,.08);--k-chev-c:#6f757c;
  --k-stat-warn:rgba(255,159,10,.15);--k-stat-warn-line:rgba(255,159,10,.32);--k-stat-ok:rgba(48,209,88,.15);--k-stat-ok-line:rgba(48,209,88,.32);
  --k-bn:#172230;--k-bn-line:rgba(10,132,255,.42);--k-bn-sub:#b4b7bf;
  --k-bn-ok:#14251a;--k-bn-ok-line:rgba(48,209,88,.42);--k-bn-ok-b:#86e3a0;
  --k-bn-warn:#2c2214;--k-bn-warn-line:rgba(255,159,10,.45);--k-bn-warn-fg:#ffc979;--k-bn-warn-b:#ffe0b0;
  --k-bn-bad:#2e1a19;--k-bn-bad-line:rgba(255,69,58,.45);--k-bn-mute:rgba(255,255,255,.05);--k-bn-mute-line:rgba(255,255,255,.09);
  --k-note:rgba(255,255,255,.06);--k-note-fg:#c9ccd2;--k-note-warn:var(--p-warn-bg);--k-note-warn-fg:var(--p-warn-fg);--k-note-ok:var(--p-ok-bg);--k-note-ok-fg:var(--p-ok-fg);
  --k-note-bad:var(--p-bad-bg);--k-note-bad-fg:var(--p-bad-fg);--k-note-info:var(--p-info-bg);--k-note-info-fg:var(--p-info-fg);
  --k-ctl-line:#70757e;--k-thumb-line:var(--k-ctl-line);--k-ok-on:#00aa3d;--k-warn-on:#d28100;--k-segsm-fg:#c5c7cd;--k-segsm-sh:0 1px 3px rgba(0,0,0,.45),0 0 0 .5px rgba(255,255,255,.08);
  --k-out-t:var(--p-info-fg);--k-out-b:rgba(10,132,255,.5);
}}

/* ---- 2 root: the demo's typography; the loader (.vgk-page / .vgk-inline) keeps its own ---- */
.vgk:not(.vgk-page):not(.vgk-inline){font:400 var(--ios-t-callout)/normal var(--sans);letter-spacing:normal;color:var(--p-fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;-webkit-tap-highlight-color:transparent}
:root[data-theme="dark"] .vgk:not(.vgk-page):not(.vgk-inline){color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk:not(.vgk-page):not(.vgk-inline){color-scheme:dark}}
.vgk *,.vgk *::before,.vgk *::after{box-sizing:border-box}
.vgk [hidden]{display:none!important}
.vgk svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* the apps' global <button> rule (styles.css: 48 px tall, full width, 17 px text, margins) is undone for kit controls;
   one class of weight, so a feature's own layout class (e.g. a flex:1 helper loaded after the kit) still applies */
.vgk :where(button:is(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key,.pslot),:is(.ctl,.segm,.tb)>button){--kb-bg:transparent;--kb-bd:transparent;--kb-sh:none;--kb-tr:none;--kb-press:none;
  display:inline-block;width:auto;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;gap:normal;font:inherit;color:inherit;text-align:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;cursor:pointer;touch-action:manipulation}
.vgk button:disabled{opacity:.45;cursor:not-allowed}
/* Projects and Stats fix the flex of every button (projects.css .pj button{flex:0 0 auto}, one class and one element):
   kit controls keep the initial flex at that weight, later in the cascade; a feature rule from its root still wins */
.vgk button:where(.bt,.x,.icb,.lnk,.tg,.opt,.cb,.row,.chip,.kpi,.kp-key,.pslot),.vgk :where(.ctl,.segm,.tb)>button{flex:0 1 auto}
/* bare elements in a kit or feature root (verify/kit/leak-check.mjs): the apps' global element rules (styles.css p
   margins, labels as 16 px 600 blocks, the UI font and text-wrap:balance on headings; projects.css .pj label, .pj h3…)
   go back to the browser's own, which is what the demo pages started from. Weight (0,2,0) and placed before the
   components, so every kit component and every feature rule written from its root (PLAN-RESTO §4 rule 5) wins over it. */
.vgk.vgk :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,label,legend,fieldset,figure,figcaption,blockquote,a,table,caption,thead,tbody,tfoot,tr,th,td){all:revert;box-sizing:border-box}

/* ---- 3 surfaces (shell: .g glass, .card → .box; .vg-glow = the screen's glow background) ---- */
.vgk .vg-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 40% at 15% 8%,var(--p-glow1),transparent 70%),radial-gradient(50% 35% at 95% 30%,var(--p-glow2),transparent 70%),radial-gradient(70% 40% at 50% 105%,var(--p-glow3),transparent 70%),var(--p-bg)}
.vgk .g{background:var(--p-glass);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--p-edge);border-radius:var(--ios-r);box-shadow:0 1px 0 var(--p-hi) inset,0 14px 30px -18px var(--p-shadow)}
.vgk .box{background:var(--p-card);border:0;border-radius:var(--ios-r)}   /* iOS card: flat, no outline */
.vgk .box.lift{border-color:var(--k-edge);border-radius:var(--ios-r);box-shadow:var(--k-lift)}
.vgk .box.sm{border-radius:var(--ios-r)}
.vgk .box.lg{border-radius:var(--ios-r)}
.vgk .box.xl{border-radius:var(--ios-r)}

/* ---- 4 text (shell: .lab .mut .num; the rest from the sections' titles) ---- */
.vgk .lab{font:400 var(--ios-t-footnote)/var(--ios-lh-footnote) var(--sans);color:var(--p-mut)}   /* Apple base: a 13 px secondary label in sentence case (was 10 px mono uppercase) */
.vgk .mut{color:var(--p-mut)}
.vgk .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vgk .t-xl{margin:0;font:700 var(--ios-t-title1)/1.15 var(--sans);letter-spacing:-.03em;text-wrap:wrap}
.vgk .t-xl.lg{font-size:var(--ios-t-large);line-height:1.1}
.vgk .t-lg{margin:0;font:700 var(--ios-t-title2)/1.15 var(--sans);letter-spacing:-.025em;text-wrap:wrap}
.vgk .t-hd{margin:0;font:700 var(--ios-t-title3)/1.2 var(--sans);letter-spacing:-.02em;text-wrap:wrap}
.vgk .t-md{margin:0;font:700 var(--ios-t-body)/1.25 var(--sans);letter-spacing:-.01em;text-wrap:wrap}
.vgk .t-sm{margin:0;font:600 var(--ios-t-subhead)/1.3 var(--sans)}
.vgk .t-sub{margin:0;font:400 var(--ios-t-footnote)/1.35 var(--sans);color:var(--p-mut)}
.vgk .t-cap{margin:0;font:400 var(--ios-t-caption1)/1.35 var(--sans);color:var(--p-mut)}
.vgk .gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 4px 0;font:700 var(--ios-t-subhead) var(--sans);color:var(--p-fg)}
.vgk .gh>:is(span,small,time):not([class]){font:400 var(--ios-t-footnote) var(--sans);color:var(--p-mut)}

/* ---- 5 buttons (shell: .bt .pri .okb .big and .ctl > button .main; notificaciones .sm / tint; registro .neg / ink) ---- */
.vgk .bt{--kb-bg:var(--p-btn);--kb-sh:none;--kb-tr:filter .12s,background .2s;--kb-press:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;font:600 var(--ios-t-subhead)/var(--ios-lh-subhead) var(--sans);border-radius:999px;padding:7px 14px;border:0;cursor:pointer;background:var(--kb-bg);color:var(--p-fg);box-shadow:var(--kb-sh);text-decoration:none;transition:var(--kb-tr)}
.vgk .bt:active:not(:disabled){filter:brightness(.9)}   /* Apple base: pressed only darkens */
.vgk .bt.pri{--kb-bg:var(--ios-blue);--kb-sh:none;color:var(--ios-on-accent)}
.vgk .bt.okb{--kb-bg:var(--k-okb);color:#fff}
.vgk .bt.tint{--kb-bg:var(--ios-blue-tint);color:var(--ios-blue)}
.vgk .bt.neg{--kb-bg:var(--ios-red-tint);color:var(--ios-red)}
.vgk .bt.ink{--kb-bg:var(--k-inkbt);color:var(--k-inkbt-fg)}
.vgk .bt.done{--kb-bg:var(--p-ok-bg);color:var(--p-ok-fg)}
.vgk .bt.bad{--kb-bg:var(--k-bd);color:#fff}
.vgk .bt.out{--kb-bg:var(--p-card);--kb-bd:var(--k-out-b);border:1px solid var(--kb-bd);color:var(--k-out-t)}
/* dark: white on the demo's green is 2:1, so the demo's own tinted «done» pill (materiales .bt.okb) */
:root[data-theme="dark"] .vgk :is(.bt.okb,.bd.ok){--kb-bg:var(--p-ok-bg);--kb-sh:inset 0 0 0 1px rgba(48,209,88,.35);background:var(--p-ok-bg);box-shadow:inset 0 0 0 1px rgba(48,209,88,.35);color:var(--p-ok-fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk :is(.bt.okb,.bd.ok){--kb-bg:var(--p-ok-bg);--kb-sh:inset 0 0 0 1px rgba(48,209,88,.35);background:var(--p-ok-bg);box-shadow:inset 0 0 0 1px rgba(48,209,88,.35);color:var(--p-ok-fg)}}
.vgk .bt.big{height:50px;font-size:var(--ios-t-body);padding:0 22px}
.vgk .bt.md{height:36px;padding:0 16px}
.vgk .bt.lg{height:44px;padding:0 18px;font-size:var(--ios-t-subhead)}
.vgk .bt.sm{min-height:30px;font-size:var(--ios-t-footnote);padding:5px 12px}
.vgk .bt.block{display:flex;width:100%;height:50px;border-radius:var(--ios-r);font-size:var(--ios-t-body);padding:0 16px}
.vgk .bt svg{width:16px;height:16px;flex:none}
.vgk .bt.sm svg{width:14px;height:14px}
@media (pointer:coarse){.vgk .bt.sm{font-size:var(--ios-t-footnote);padding:7px 13px}.vgk .bt.sm svg{width:15px;height:15px;stroke-width:2.4}}
.vgk .bt:is(:disabled,[aria-disabled="true"]){--kb-bg:var(--k-off-bg);--kb-sh:none;--kb-press:none;color:var(--k-off-fg);opacity:1;cursor:not-allowed}
.vgk .lnk{--kb-bg:transparent;display:inline-flex;align-items:center;gap:4px;padding:6px 2px;border:0;background:var(--kb-bg);color:var(--k-link);font:600 var(--ios-t-callout) var(--sans);text-decoration:none;cursor:pointer}
.vgk .lnk.sm{font-size:var(--ios-t-footnote);padding:2px 4px;min-height:24px}
.vgk :is(p,.t-sub,.t-cap,.note,.tx) .lnk{text-decoration:underline;text-underline-offset:2px}
.vgk .x{--kb-bg:var(--p-btn);display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--kb-bg);color:var(--p-mut);cursor:pointer}
.vgk .x svg{width:14px;height:14px;stroke-width:2.2}
.vgk .x.sm{width:22px;height:22px}
.vgk .x.sm svg{width:12px;height:12px}
/* 24 px targets (WCAG 2.5.8) without changing what is drawn */
.vgk .x.sm{position:relative}
.vgk .x.sm::after{content:"";position:absolute;inset:-1px}
/* .hit: a 44 px touch target (PLAN-MAESTRO §5.6) around a smaller control (.bt, .x, .icb, .tg, .cb, .lnk, a chip), drawn
   as it is; opt-in, because hit areas of neighbours closer than 44 px would overlap: the screen adds it where its layout
   leaves the room (code A11Y) */
.vgk .hit{position:relative}
@media (pointer:coarse){.vgk .hit::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}}
.vgk .icb{--kb-bg:var(--k-icb);--kb-bd:var(--k-icb-line);--kb-sh:0 4px 12px -6px rgba(30,60,110,.3);display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:1px solid var(--kb-bd);border-radius:50%;background:var(--kb-bg);box-shadow:var(--kb-sh);color:var(--p-fg);cursor:pointer}
.vgk .icb svg{width:20px;height:20px}
.vgk .ctl{display:flex;flex-wrap:wrap;gap:8px}
.vgk .ctl>:is(button,a){--kb-bg:var(--k-panel);--kb-bd:var(--k-pline);--kb-tr:filter .15s;--kb-press:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 var(--ios-t-footnote) var(--sans);border-radius:999px;padding:10px 16px;border:1px solid var(--kb-bd);background:var(--kb-bg);color:var(--p-fg);text-decoration:none;cursor:pointer;transition:var(--kb-tr)}
.vgk .ctl>:is(button,a):active{transform:var(--kb-press)}
.vgk .ctl>.main{--kb-bg:var(--p-acc-fill);--kb-bd:transparent;color:#fff}

/* ---- 6 chips, badges, dots (shell .chip .ok .warn .bad .info; notificaciones .bd; pedidos / registro dots) ---- */
/* Apple base: a read-only .chip is secondary text (a coloured dot for .ok / .warn / .bad / .info), never a capsule;
   a tappable chip (button.chip / a.chip) is the filter capsule: gray fill, blue tint when chosen (aria-pressed / aria-current) */
.vgk .chip{--kb-bg:transparent;--kb-bd:transparent;--chip-dot:var(--ios-gray);display:inline-flex;align-items:center;gap:6px;font:400 var(--ios-t-footnote)/var(--ios-lh-footnote) var(--sans);border-radius:0;padding:0;background:none;color:var(--p-mut);white-space:nowrap}
.vgk .chip.ok{--chip-dot:var(--ios-green)}
.vgk .chip.warn{--chip-dot:var(--ios-orange)}
.vgk .chip.bad{--chip-dot:var(--ios-red)}
.vgk .chip.info{--chip-dot:var(--ios-blue)}
.vgk .chip:not(button):not(a):is(.ok,.warn,.bad,.info)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--chip-dot)}
.vgk .chip.out{border:0}
.vgk .chip.lg{font-size:var(--ios-t-subhead);line-height:var(--ios-lh-subhead)}
.vgk .chip.sm{font-size:var(--ios-t-caption1);line-height:var(--ios-lh-caption1)}
.vgk :is(button,a).chip{--kb-bg:var(--ios-fill);min-height:32px;padding:0 14px;border-radius:var(--ios-r-full);background:var(--kb-bg);color:var(--p-fg);font:400 var(--ios-t-subhead)/var(--ios-lh-subhead) var(--sans)}
.vgk :is(button,a).chip:is([aria-pressed="true"],[aria-current="page"],[aria-current="true"],[aria-selected="true"]){--kb-bg:var(--ios-blue-tint);color:var(--ios-blue);font-weight:600}
.vgk button.chip.bad[aria-pressed="true"]{--kb-bg:var(--ios-red-tint);color:var(--ios-red)}
.vgk .chip svg{width:12px;height:12px;flex:none}
.vgk :is(button,a).chip{position:relative}
.vgk :is(button,a).chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,24px);transform:translateY(-50%)}
.vgk .bd{display:inline-block;min-width:22px;height:22px;padding:0 7px;border-radius:var(--ios-r);background:var(--k-bd);color:#fff;font:700 var(--ios-t-footnote)/22px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.vgk .bd.ok{background:var(--k-okb)}
.vgk .bd.info{background:var(--p-acc-fill)}
.vgk .bd.sm{min-width:16px;height:16px;padding:0 6px;border-radius:99px;font-size:var(--ios-t-caption2);line-height:16px}
.vgk .dot{--dot:var(--p-blue);color:inherit;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot)}
.vgk .dot.ok{--dot:var(--k-ok-fill)}
.vgk .dot.warn{--dot:var(--k-warn-fill)}
.vgk .dot.bad{--dot:var(--k-bad-fill)}
.vgk .dot.mute{--dot:var(--k-bar-mute)}
.vgk .dot.sm{width:6px;height:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--dot) 18%,transparent)}

/* ---- 7 avatars (shell .av; the demo's fills: white initials, or #1d1d1f ones where white is under AA on that fill; purple and
        turquoise pass with neither, so they are darkened) and icon tiles (notificaciones .tl) ---- */
.vgk .av{--av:#0071e3;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--av);color:#fff;font:700 var(--ios-t-caption1) var(--sans)}
.vgk .av.bl{--av:#0071e3}
.vgk .av.in{--av:#5856d6}
.vgk .av.pu{--av:#a74ad6}
.vgk .av.or{--av:#ff9500}
.vgk .av.gr{--av:#34c759}
.vgk .av.pk{--av:#ff2d55}
.vgk .av.tq{--av:#00809c}
.vgk .av.cy{--av:#30b0c7}
.vgk .av.gy{--av:#8e8e93}
.vgk .av.rd{--av:#ff3b30}
.vgk .av.mg{--av:#e0569b}
.vgk .av:is(.or,.gr,.pk,.cy,.gy,.rd,.mg){color:#1d1d1f}
.vgk .av.xxs{width:18px;height:18px;font-size:var(--ios-t-caption2)}
.vgk .av.xs{width:24px;height:24px;font-size:var(--ios-t-caption2)}
.vgk .av.sm{width:28px;height:28px;font-size:var(--ios-t-caption2)}
.vgk .av.md{width:36px;height:36px;font-size:var(--ios-t-footnote)}
.vgk .av.lg{width:42px;height:42px;font-size:var(--ios-t-subhead);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--av) 60%,transparent)}
.vgk .av.lg.or{background:linear-gradient(160deg,#ffab33,#ff8a00);box-shadow:0 6px 14px -6px rgba(255,140,0,.6)}
.vgk .av.sq{border-radius:var(--ios-r-s)}
.vgk .avs{display:flex;align-items:center}
.vgk .avs>.av{margin-left:-7px;box-shadow:0 0 0 2px var(--k-ring2)}
.vgk .avs>.av.sm{margin-left:-6px}
.vgk .avs>.av:is(.xs,.xxs){margin-left:-3px}
.vgk .avs>.av:first-child{margin-left:0}
.vgk .tl{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--ios-r-s);background:linear-gradient(180deg,#2b8ef5,#0071e3);color:#fff}
.vgk .tl svg{width:19px;height:19px}
.vgk .tl.or{background:linear-gradient(180deg,#ffab33,#ff9500)}
.vgk .tl.rd{background:linear-gradient(180deg,#ff5d54,#ff3b30)}
.vgk .tl.gr{background:linear-gradient(180deg,#4fd270,#34c759)}
.vgk .tl.in{background:linear-gradient(180deg,#716fe6,#5856d6)}
.vgk .tl.gy{background:linear-gradient(180deg,#a1a1a6,#8e8e93)}
.vgk .tl.sm{width:30px;height:30px;border-radius:var(--ios-r-s)}
.vgk .tl.sm svg{width:17px;height:17px}
.vgk .tl.xs{width:28px;height:28px;border-radius:var(--ios-r-s)}
.vgk .tl.xs svg{width:16px;height:16px}
.vgk .tl.soft{background:var(--p-chip);color:var(--p-mut)}
.vgk .tl.soft.bl{background:var(--p-info-bg);color:var(--p-info-fg)}
.vgk .tl.soft.gr{background:var(--p-ok-bg);color:var(--p-ok-fg)}
.vgk .tl.soft.or{background:var(--p-warn-bg);color:var(--p-warn-fg)}
.vgk .tl.soft.rd{background:var(--p-bad-bg);color:var(--p-bad-fg)}

/* ---- 8 segmented (notificaciones / medida .seg → .segm; numeros .nu-seg → .sm; pedidos filter pills → .round, always glass).
   The selected label is bolder (500 → 700, like iOS): the demo's pill alone is 1.3:1 on its track (WCAG 1.4.11 / 1.4.1).
   Labels wrap instead of being cut when a control gets very narrow or the text spacing is raised (1.4.10 / 1.4.12). ---- */
.vgk .segm{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-width:0;max-width:100%;min-height:36px;padding:2px;margin:0;border:0;border-radius:var(--ios-r);background:var(--k-seg)}
.vgk .segm>button{--kb-tr:background .2s,box-shadow .2s;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center;gap:0 3px;min-width:0;padding:0 6px;border:0;border-radius:var(--ios-r-s);background:var(--kb-bg);box-shadow:var(--kb-sh);font:400 var(--ios-t-footnote)/1.15 var(--sans);color:var(--p-fg);text-align:center;white-space:normal;cursor:pointer;transition:var(--kb-tr)}
.vgk .segm>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on){--kb-bg:var(--k-seg-on);--kb-sh:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);font-weight:700}
.vgk .segm>button em{font-style:normal;font-size:var(--ios-t-caption1);color:var(--k-tint-fg)}
.vgk .segm>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on) em{color:var(--k-seg-em)}
.vgk .segm>button svg{width:15px;height:15px}
.vgk .segm.sm{min-height:30px;border-radius:var(--ios-r-s);background:var(--k-segsm)}
.vgk .segm.sm>button{border-radius:var(--ios-r-s);font-size:var(--ios-t-caption1);gap:0 6px;color:var(--k-segsm-fg)}
.vgk .segm.sm>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on){--kb-bg:var(--k-segsm-on);--kb-sh:var(--k-segsm-sh);color:var(--p-fg)}
.vgk .segm.fit{display:inline-grid;grid-auto-columns:auto;width:auto;justify-self:start}
.vgk .segm.fit>button{padding:0 10px}
.vgk .segm.round{display:inline-flex;width:auto;justify-self:start;align-items:center;gap:2px;min-height:0;padding:3px;border:1px solid var(--p-edge);border-radius:999px;overflow-x:auto;scrollbar-width:none;background:var(--p-glass);box-shadow:0 1px 0 var(--p-hi) inset,0 14px 30px -18px var(--p-shadow);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
.vgk .segm.round>button{flex:none;padding:7px 12px;border-radius:999px;font-size:var(--ios-t-caption1);gap:6px;white-space:nowrap}
.vgk .segm.round>button em{font-size:var(--ios-t-caption2)}
.vgk .segm.round>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on){--kb-bg:var(--k-pill);--kb-sh:var(--k-pill-sh)}

/* ---- 9 toggle (notificaciones .tg), check circle (bienvenida .cb), option (medida .rjo / pedidos .pd-op) ---- */
.vgk .tg{--kb-bg:var(--k-off);--kb-tr:background .25s;position:relative;flex:none;width:51px;height:31px;padding:0;border:0;border-radius:var(--ios-r);background:var(--kb-bg);cursor:pointer;vertical-align:middle;transition:var(--kb-tr)}
.vgk .tg::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.vgk .tg:is([aria-checked="true"],[aria-pressed="true"],.on){--kb-bg:var(--k-ok-on)}
.vgk .tg:is([aria-checked="true"],[aria-pressed="true"],.on)::after{transform:translateX(20px)}
.vgk .cb{--kb-bg:transparent;--kb-bd:var(--k-cb);--kb-tr:background .2s,border-color .2s;display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:2px solid var(--kb-bd);border-radius:50%;background:var(--kb-bg);color:#fff;cursor:pointer;transition:var(--kb-tr)}
.vgk .cb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.vgk .cb:is(.on,[aria-checked="true"],[aria-pressed="true"]){--kb-bd:var(--k-ok-on);--kb-bg:var(--k-ok-on)}
.vgk .cb:is(.on,[aria-checked="true"],[aria-pressed="true"]) svg{opacity:1}
.vgk .opt{--kb-bg:var(--k-opt);--kb-bd:var(--k-opt-line);display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--kb-bd);border-radius:var(--ios-r);background:var(--kb-bg);font:600 var(--ios-t-subhead) var(--sans);color:var(--p-fg);text-align:left;cursor:pointer}
.vgk .opt::before{content:"";flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid var(--k-radio)}
.vgk .opt:is([aria-checked="true"],[aria-pressed="true"],.on){--kb-bd:var(--p-blue);--kb-bg:var(--k-opt-on)}
.vgk .opt:is([aria-checked="true"],[aria-pressed="true"],.on)::before{border:5px solid var(--p-blue)}
.vgk .opt small{display:block;margin-top:2px;font:400 var(--ios-t-caption1)/1.35 var(--sans);color:var(--p-mut)}

/* ---- 10 fields (registro .rg-rz / obra .ob-f inputs; medida .nt and correo search → .field; .fld = label + control + hint) ---- */
.vgk .fld{display:grid;gap:5px;min-width:0;margin:0;padding:0;font:400 var(--ios-t-footnote) var(--sans);color:var(--p-fg)}
.vgk .fld>:is(label,.lbl){display:block;margin:0;padding:0;font:600 var(--ios-t-caption1) var(--sans);color:var(--p-fg)}
.vgk .fld>small{display:flex;align-items:center;gap:5px;margin:0;font:400 var(--ios-t-caption2)/1.35 var(--sans);color:var(--p-mut)}
.vgk .fld>small svg{width:11px;height:11px}
.vgk .fld>small.err{color:var(--p-bad-fg);font-weight:600}
/* an error is not told by colour alone: an alert icon when the markup has none */
.vgk .fld>small.err:not(:has(svg))::before{content:"";flex:none;width:11px;height:11px;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='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%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='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.vgk .inp{--kf-bg:var(--k-in);--kf-bd:var(--k-in-line);--kf-sh:none;--kf-r:11px;--kf-tr:border-color .2s,box-shadow .2s;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:38px;min-height:0;margin:0;padding:0 11px;border:1px solid var(--kf-bd);border-radius:var(--kf-r);background:var(--kf-bg);box-shadow:var(--kf-sh);font:400 var(--ios-t-footnote) var(--sans);color:var(--p-fg);outline:none;transition:var(--kf-tr);-webkit-appearance:none;appearance:none}
.vgk .inp::placeholder{color:var(--k-ph);opacity:1}
/* the ring is drawn by the shadow; the transparent outline is what forced colours (Windows contrast themes) show instead */
.vgk .inp:is(:focus,:focus-visible){--kf-bd:var(--p-blue);--kf-sh:0 0 0 2px var(--p-blue),0 0 0 4px var(--k-in-ring);outline:2px solid transparent;outline-offset:2px}
.vgk .inp[aria-invalid="true"]{--kf-bd:var(--p-bad-fg)}
.vgk .inp[aria-invalid="true"]:is(:focus,:focus-visible){--kf-bd:var(--p-bad-fg);--kf-sh:0 0 0 2px var(--p-bad-fg),0 0 0 4px color-mix(in srgb,var(--p-bad-fg) 24%,transparent)}
.vgk .inp:disabled{opacity:.6;cursor:not-allowed}
.vgk .inp.lg{height:42px;font-size:var(--ios-t-subhead);--kf-r:12px}
.vgk textarea.inp{height:auto;min-height:76px;padding:9px 11px;line-height:1.4;resize:vertical}
.vgk select.inp{--kf-bg:var(--k-chev) right 11px center/12px 12px no-repeat,var(--k-in);padding-right:32px;color:var(--p-fg);cursor:pointer}
.vgk .field{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:42px;margin:0;padding:0 12px;border:1px solid var(--k-field-line);border-radius:var(--ios-r);background:var(--k-field);font:400 var(--ios-t-subhead) var(--sans);color:var(--p-mut);cursor:text;transition:border-color .2s,box-shadow .2s}
.vgk .field:focus-within{border-color:var(--p-blue);box-shadow:0 0 0 2px var(--p-blue),0 0 0 4px var(--k-in-ring);outline:2px solid transparent;outline-offset:2px}
.vgk .field>svg{width:16px;height:16px}
.vgk .field>input{--kf-bg:transparent;--kf-bd:transparent;--kf-sh:none;--kf-r:0;--kf-tr:none;flex:1;display:block;min-width:0;max-width:none;width:auto;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;font:400 var(--ios-t-subhead) var(--sans);color:var(--p-fg);outline:none;-webkit-appearance:none;appearance:none}
.vgk .field>input::placeholder{color:var(--k-ph);opacity:1}
/* phones: 16 px text in fields, or iOS zooms the page on focus (the demo's 13.5–14 px are desktop sizes) */
@media (pointer:coarse){.vgk .inp,.vgk .field>input{font-size:var(--ios-t-callout)}}

/* ---- 11 lists (notificaciones .r / .tr, bienvenida .tk, reporte .rp-row, obra .ob-pay) and timeline (medida .tlc, registro .rg-ev) ---- */
.vgk .row{display:flex;align-items:center;gap:12px;min-width:0}
.vgk .list{display:flex;flex-direction:column;padding:2px 14px}
.vgk .list>.row{--kb-bd:var(--p-line);display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:0;margin:0;padding:11px 0;border:0;border-top:1px solid var(--kb-bd);border-radius:0;background:none;font:400 var(--ios-t-footnote) var(--sans);color:inherit;text-align:left}
.vgk .list>.row:first-child{border-top:0}
.vgk .list>button.row{cursor:pointer}
.vgk .row .tx{flex:1;min-width:0}
.vgk .row .tx>b{display:block;font:600 var(--ios-t-subhead)/1.3 var(--sans);color:var(--p-fg)}
.vgk .row .tx>:is(span,small){display:block;margin-top:1px;font:400 var(--ios-t-footnote)/1.35 var(--sans);color:var(--p-mut)}
.vgk .row .end{flex:none;display:grid;justify-items:end;gap:4px;text-align:right}
.vgk .row .end>b{font:600 var(--ios-t-subhead) var(--sans)}
.vgk .row time{font:400 var(--ios-t-caption1) var(--sans);color:var(--p-mut);white-space:nowrap}
.vgk .row .chev{flex:none;width:14px;height:14px;color:var(--k-chev-c)}
.vgk .list.sm>.row{gap:10px;padding:9px 0}
.vgk .list.sm .tx>b{font-size:var(--ios-t-footnote)}
.vgk .list.sm .tx>:is(span,small){font-size:var(--ios-t-caption1)}
.vgk .list>.row.ntf{align-items:flex-start;padding-block:13px}
.vgk .row .tx>.h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vgk .row .tx>.h>b{font:600 var(--ios-t-subhead)/1.27 var(--sans);color:var(--p-fg)}
.vgk .row .tx>.h>time{line-height:1.6}
.vgk .row .tx>p{margin:2px 0 0;font:400 var(--ios-t-footnote)/1.35 var(--sans);color:var(--p-mut)}
.vgk .list.flush{padding:0}
.vgk .list.flush>.row{padding:10px 12px}
.vgk .list.flush .tx>:is(span,small){font-size:var(--ios-t-caption1)}
.vgk .row.done .tx>b{color:var(--p-mut);text-decoration:line-through}
.vgk .timeline{list-style:none;margin:0;padding:0}
.vgk .timeline>li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin:0;padding:6px 0;color:inherit}
.vgk .timeline>li::before{content:"";position:absolute;left:10px;top:30px;bottom:-6px;width:2px;background:var(--k-rail)}
.vgk .timeline>li:last-child::before{display:none}
.vgk .timeline>li>i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--k-dot);color:var(--k-dot-fg);font-style:normal}
.vgk .timeline>li>i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.vgk .timeline>li.ok>i{background:var(--k-ok-on);color:#fff}
.vgk .timeline>li.now>i{background:var(--p-blue);color:#fff}
.vgk .timeline>li.wait>i{background:var(--k-warn-on);color:#fff}
.vgk .timeline>li.bad>i{background:var(--k-bad-fill);color:#fff}
.vgk .timeline>li>div>b{display:block;font:600 var(--ios-t-subhead)/1.3 var(--sans)}
.vgk .timeline>li>div>:is(span,small){display:block;font:400 var(--ios-t-footnote)/1.35 var(--sans);color:var(--p-mut)}
.vgk .timeline.sm>li{grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:38px;padding:0}
.vgk .timeline.sm>li::before{left:8.5px;top:24px;bottom:-14px;width:1px;background:var(--k-rail-sm)}
.vgk .timeline.sm>li>i{width:10px;height:10px;margin:0 auto;background:var(--k-dot-mut);box-shadow:0 0 0 3px var(--k-dot-ring);position:relative;z-index:1}
/* small marks: shape as well as colour (done = dot, now = ring, waiting = dashed ring, problem = square) */
.vgk .timeline.sm>li.ok>i{background:var(--k-ok-fill);box-shadow:0 0 0 3px rgba(52,199,89,.16)}
.vgk .timeline.sm>li.now>i{background:var(--p-card);border:3px solid var(--p-blue);box-shadow:0 0 0 3px rgba(0,113,227,.16)}
.vgk .timeline.sm>li.bad>i{border-radius:2px;background:var(--k-bad-fill);box-shadow:0 0 0 3px rgba(255,59,48,.16)}
.vgk .timeline.sm>li.wait>i{box-sizing:border-box;background:var(--p-card);border:2px dashed var(--k-warn-fill);box-shadow:none}
.vgk .timeline.sm>li>div>b{font-size:var(--ios-t-footnote)}
.vgk .timeline.sm>li>div>:is(span,small){margin-top:1px;font-size:var(--ios-t-caption2)}

/* ---- 12 progress (bienvenida / obra .bar, numeros grey bars, obra ring → .donut, obra slider → .range) ---- */
.vgk .bar{--bar-c:var(--p-blue);color:inherit;display:block;height:6px;border-radius:3px;background:var(--k-track);overflow:hidden}
.vgk .bar>:is(i,s,span){display:block;width:calc(var(--v,0) * 100%);max-width:100%;height:100%;border-radius:inherit;background:var(--bar-c);text-decoration:none}
.vgk .bar.ok{--bar-c:var(--k-ok-fill)}
.vgk .bar.warn{--bar-c:var(--k-warn-fill)}
.vgk .bar.bad{--bar-c:var(--k-bad-fill)}
.vgk .bar.mute{--bar-c:var(--k-bar-mute)}
.vgk .bar.thin{height:5px}
.vgk progress.bar{-webkit-appearance:none;appearance:none;width:100%;border:0;color:var(--bar-c)}
.vgk progress.bar::-webkit-progress-bar{background:transparent;border-radius:3px}
.vgk progress.bar::-webkit-progress-value{background:var(--bar-c);border-radius:3px}
.vgk progress.bar::-moz-progress-bar{background:var(--bar-c);border-radius:3px}
.vgk .donut{--v:0;--c:var(--p-blue);flex:none;width:32px;height:32px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--v) * 1turn),var(--k-rail) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.vgk .range{--v:.5;--kf-bg:transparent;--kf-bd:transparent;--kf-sh:none;--kf-r:0;--kf-tr:none;display:block;width:100%;min-width:auto;max-width:none;font:inherit;color:inherit;height:30px;min-height:0;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.vgk .range::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,var(--p-blue) calc(var(--v) * 100%),var(--k-rail2) 0)}
.vgk .range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9.5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--k-thumb-line),0 3px 8px rgba(0,0,0,.2)}
.vgk .range::-moz-range-track{height:5px;border-radius:3px;background:var(--k-rail2)}
.vgk .range::-moz-range-progress{height:5px;border-radius:3px;background:var(--p-blue)}
.vgk .range::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--k-thumb-line),0 3px 8px rgba(0,0,0,.2)}
.vgk .range:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}

/* ---- 13 toasts (pedidos / obra / numeros ink pill; notificaciones / correo card), sheets, dialogs ---- */
.vgk .toast{display:flex;align-items:center;gap:9px;width:fit-content;max-width:calc(100% - 28px);box-sizing:border-box;padding:10px 16px 10px 12px;border-radius:999px;background:var(--k-ink);color:#fff;font:600 var(--ios-t-footnote)/1.3 var(--sans);box-shadow:0 16px 30px -12px rgba(0,0,0,.45)}
.vgk .toast>i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--p-green);color:#fff;font-style:normal;font-size:var(--ios-t-caption1)}
.vgk .toast>i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vgk .toast.bad{background:rgba(196,39,29,.92)}
.vgk .toast.bad>i{background:rgba(255,255,255,.25)}
:root[data-theme="dark"] .vgk .toast:not(.glass){box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 30px -12px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk .toast:not(.glass){box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 30px -12px rgba(0,0,0,.6)}}
.vgk .toast.glass{gap:10px;padding:10px 16px 10px 10px;border-radius:var(--ios-r);background:var(--k-toast);color:var(--p-fg);border:1px solid var(--k-hair);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 2px 6px rgba(20,40,90,.08),0 22px 44px -14px rgba(20,40,90,.45);font-size:var(--ios-t-footnote)}
.vgk .toast.glass>i{width:28px;height:28px}
.vgk .toast.glass>i svg{width:16px;height:16px}
.vgk .toast.glass>div>span{display:block;font-weight:400;font-size:var(--ios-t-footnote);color:var(--p-mut)}
.vgk .toast.dock{width:max-content;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;transform:translateX(-50%)}
/* the toasts' live regions (vg-kit.js): in the layer or in the open modal dialog, read and never seen */
[data-vg-live]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vgk .bsheet{box-sizing:border-box;padding:8px 16px 34px;border-radius:var(--ios-r) var(--ios-r) 0 0;background:var(--k-sheet);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:0 -20px 40px -20px var(--k-sheet-sh);color:var(--p-fg)}
.vgk .bsheet.dock{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:calc(100% - 40px);overflow:auto;padding-bottom:max(34px,calc(14px + env(safe-area-inset-bottom,0px)))}
.vgk .bsheet .box{background:var(--k-group);border-color:var(--k-edge)}
.vgk .grab{display:block;width:38px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--k-grab)}
.vgk .scrim{position:fixed;inset:0;z-index:40;background:var(--k-scrim)}
.vgk .modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:var(--k-mscrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vgk .dialog{display:flex;flex-direction:column;gap:12px;box-sizing:border-box;width:min(700px,100%);max-height:100%;overflow:auto;margin:0;padding:20px 24px 18px;border:0;border-radius:var(--ios-r);background:var(--p-card);color:var(--p-fg);box-shadow:0 0 0 1px var(--k-ring),0 30px 60px -20px var(--k-drop)}
.vgk dialog.dialog{max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto}
/* ::backdrop does not inherit the .vgk tokens in every browser: the veil of .modal, written out */
.vgk dialog.dialog::backdrop{background:rgba(242,244,248,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-theme="dark"] .vgk dialog.dialog::backdrop{background:rgba(10,12,14,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk dialog.dialog::backdrop{background:rgba(10,12,14,.7)}}
.vgk .drawer{display:flex;flex-direction:column;gap:12px;box-sizing:border-box;padding:16px 18px 14px;border:1px solid var(--k-dedge);border-radius:var(--ios-r);background:var(--k-panel2);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 1px var(--k-dring),0 30px 60px -24px var(--k-ddrop);color:var(--p-fg);overflow:hidden}

/* ---- 14 tab bar (bienvenida / medida / recepcion .tb; 84 px with the iPhone home bar) ---- */
.vgk .tb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);box-sizing:border-box;min-height:calc(50px + env(safe-area-inset-bottom,0px));padding:8px 10px env(safe-area-inset-bottom,0px);background:var(--k-tb);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border-top:1px solid var(--k-tb-line)}
.vgk .tb>:is(a,button,span){--kb-bg:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:0;border:0;background:var(--kb-bg);font:600 var(--ios-t-caption2) var(--sans);color:var(--k-tb-fg);text-decoration:none;cursor:pointer}
/* the current tab is told by more than its hue (WCAG 1.4.1): bold, underlined label; idle icons keep the demo's grey (3:1) */
.vgk .tb>:is(.on,[aria-current="page"],[aria-selected="true"]){color:var(--k-tb-on);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.vgk .tb>:not(.on):not([aria-current="page"]):not([aria-selected="true"]) svg{color:#8e8e93}
.vgk .tb svg{width:24px;height:24px}
.vgk .tb.dock{position:fixed;left:0;right:0;bottom:0;z-index:30}
/* a focused control is never hidden under the docked tab bar (WCAG 2.4.11) */
html:has(.vgk .tb.dock){scroll-padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}

/* ---- 15 desktop pieces: counters (pedidos .pd-k → .kpi), stat pills (registro .rg-stat → .stat), table (registro / pedidos → .dtable) ---- */
.vgk .kpi{--kb-bg:var(--p-glass);--kb-bd:var(--p-edge);--kb-sh:0 1px 0 var(--p-hi) inset,0 14px 30px -18px var(--p-shadow);--kb-tr:box-shadow .2s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 10px;align-items:center;box-sizing:border-box;padding:9px 12px;border:1px solid var(--kb-bd);border-radius:var(--ios-r);background:var(--kb-bg);box-shadow:var(--kb-sh);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);color:var(--p-fg);font:400 var(--ios-t-footnote) var(--sans);text-align:left}
.vgk .kpi:is(.on,[aria-pressed="true"],[aria-current="true"]){--kb-sh:0 0 0 2px var(--p-blue),0 14px 30px -18px rgba(30,60,110,.35)}
.vgk .kpi>.tl{grid-row:span 2;width:30px;height:30px;border-radius:var(--ios-r-s)}
.vgk .kpi>.tl svg{width:16px;height:16px}
.vgk .kpi>b{min-width:0;font:600 var(--ios-t-caption1) var(--sans)}
.vgk .kpi>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;min-width:0;margin:0}
.vgk .kpi>p>strong{font:700 var(--ios-t-title2)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vgk .kpi>p>span{min-width:0;font-size:var(--ios-t-caption2);color:var(--p-mut)}
.vgk .stat{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:30px;padding:0 12px;border-radius:999px;background:var(--p-card);border:1px solid var(--p-line);font:400 var(--ios-t-footnote) var(--sans);color:var(--p-mut);white-space:nowrap}
.vgk .stat b{color:var(--p-fg);font-weight:700}
.vgk .stat svg{width:14px;height:14px}
.vgk .stat.warn{background:var(--k-stat-warn);border-color:var(--k-stat-warn-line);color:var(--p-warn-fg)}
.vgk .stat.ok{background:var(--k-stat-ok);border-color:var(--k-stat-ok-line);color:var(--p-ok-fg)}
.vgk .stat:is(.warn,.ok) b{color:inherit}
.vgk .dtable{overflow:auto;border-radius:var(--ios-r);background:var(--k-table);border:1px solid var(--p-line);box-shadow:0 14px 30px -22px rgba(30,60,110,.35)}
.vgk .dtable.g{background:var(--p-glass);border-color:var(--p-edge);border-radius:var(--ios-r);box-shadow:0 1px 0 var(--p-hi) inset,0 14px 30px -18px var(--p-shadow)}
.vgk .dtable table{width:100%;border-collapse:collapse;font:400 var(--ios-t-footnote) var(--sans);color:var(--p-fg)}
.vgk .dtable th{height:34px;padding:0 10px;background:var(--k-thead);border:0;border-bottom:1px solid var(--p-line);font:600 var(--ios-t-caption2) var(--sans);letter-spacing:normal;text-transform:none;color:var(--p-mut);text-align:left;vertical-align:middle;white-space:nowrap}
.vgk .dtable td{height:34px;padding:0 10px;border:0;border-bottom:1px solid var(--k-rule);font:400 var(--ios-t-footnote) var(--sans);letter-spacing:normal;text-transform:none;color:inherit;text-align:left;vertical-align:middle;white-space:nowrap}
.vgk .dtable tbody tr:nth-child(even) td{background:var(--k-zebra)}
.vgk .dtable :is(th,td):first-child{padding-left:14px}
.vgk .dtable :is(th,td):last-child{padding-right:14px}
.vgk .dtable :is(th,td).r{text-align:right}
.vgk .dtable :is(th,td).c{text-align:center}
.vgk .dtable tbody tr.band td{height:25px;padding-top:0;padding-bottom:0;background:var(--k-band);border-top:1px solid var(--p-line);font-size:var(--ios-t-caption1);color:var(--p-mut)}
.vgk .dtable tr.band td b{color:var(--p-fg);font-size:var(--ios-t-caption1)}
.vgk .dtable tbody tr.sel td{background:var(--k-sel)}
.vgk .dtable tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--p-blue)}
.vgk .dtable tfoot td{height:40px;background:var(--k-tfoot);border-bottom:0;font-weight:700}
.vgk .dtable tfoot td:first-child{font-weight:600;font-size:var(--ios-t-caption1);color:var(--p-mut)}
.vgk .dtable td b{font-weight:600}
.vgk .dtable td small{display:block;margin-top:1px;font-size:var(--ios-t-caption2);font-weight:400;color:var(--p-mut)}

/* ---- 16 banners (medida .bn) and notes (obra .ob-why, pedidos .pd-ms, registro .rg-nodel → .note) ---- */
.vgk .bn{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:start;box-sizing:border-box;padding:12px 14px;border-radius:var(--ios-r);background:var(--k-bn);border:1px solid var(--k-bn-line);color:var(--p-fg)}
.vgk .bn>.tl{width:30px;height:30px;border-radius:var(--ios-r-s)}
.vgk .bn>.tl svg{width:17px;height:17px}
.vgk .bn>div>b{display:block;font:700 var(--ios-t-subhead)/1.3 var(--sans)}
.vgk .bn>div>span{display:block;margin-top:2px;font:400 var(--ios-t-footnote)/1.4 var(--sans);color:var(--k-bn-sub)}
.vgk .bn>div>em{display:block;margin-top:6px;font:600 var(--ios-t-caption1)/1.35 var(--sans);font-style:normal;color:var(--p-ok-fg)}
.vgk .bn.warn>.tl{background:#ff9500}
.vgk .bn.bad>.tl{background:#ff3b30}
.vgk .bn.mute>.tl{background:#8e8e93}
.vgk .bn.ok{background:var(--k-bn-ok);border-color:var(--k-bn-ok-line)}
.vgk .bn.ok>div>b{color:var(--k-bn-ok-b)}
.vgk .bn.warn{background:var(--k-bn-warn);border-color:var(--k-bn-warn-line);color:var(--k-bn-warn-fg)}
.vgk .bn.warn>div>b{color:var(--k-bn-warn-b)}
.vgk .bn.warn>div>span{color:var(--k-bn-warn-fg)}
.vgk .bn.bad{background:var(--k-bn-bad);border-color:var(--k-bn-bad-line)}
.vgk .bn.mute{background:var(--k-bn-mute);border-color:var(--k-bn-mute-line)}
.vgk .note{display:flex;align-items:flex-start;gap:9px;box-sizing:border-box;margin:0;padding:9px 11px;border-radius:var(--ios-r);background:var(--k-note);color:var(--k-note-fg);font:400 var(--ios-t-caption1)/1.45 var(--sans)}
.vgk .note>svg{flex:none;width:16px;height:16px;margin-top:1px}
.vgk .note b{font-weight:700}
.vgk .note.warn{background:var(--k-note-warn);color:var(--k-note-warn-fg)}
.vgk .note.ok{background:var(--k-note-ok);color:var(--k-note-ok-fg)}
.vgk .note.bad{background:var(--k-note-bad);color:var(--k-note-bad-fg)}
.vgk .note.info{background:var(--k-note-info);color:var(--k-note-info-fg)}

/* ---- 17 focus, reduced motion, forced colours, low-power devices (html.vg-lite from vg-tier.js) ---- */
.vgk :is(.bt,.lnk,.x,.icb,.tg,.opt,.cb,.row,.chip,.kpi,.ctl>*,.segm>*,.tb>*):focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}
.vgk .segm>button:focus-visible{z-index:2}
.vgk .segm.round>button:focus-visible{outline-offset:-2px}
/* anything else that takes focus inside the kit (a screen's own buttons and links) gets the same ring */
.vgk :where(a[href],button,summary,[tabindex]:not([tabindex="-1"]),[role="button"],[role="tab"],[role="switch"],[role="checkbox"],[role="radio"]):focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .vgk :is(.bt,.lnk,.x,.icb,.tg,.opt,.cb,.row,.chip,.kpi,.field,.ctl>*,.segm>*,.tb>*),.vgk .tg::after{transition:none}
  .vgk :is(.bt,.ctl>*):active{transform:none}
  .vgk .ctl>:is(button,a){transition:none}
  .vgk .ctl>:is(button,a):active{transform:none}
}
html.vg-lite .vgk :is(.g,.kpi,.bsheet,.drawer,.tb,.toast.glass,.modal,.segm.round){-webkit-backdrop-filter:none;backdrop-filter:none}
@media (forced-colors:active){
  .vgk :is(.g,.box,.kpi,.stat,.bn,.note,.toast,.bsheet,.dialog,.drawer,.dtable,.chip,.bd,.av,.tl,.segm,.field){border:1px solid CanvasText}
  .vgk :is(.bt,.x,.icb,.ctl>*){border:1px solid ButtonText}
  .vgk .tg{forced-color-adjust:none;--kb-bg:Canvas;--kb-bd:CanvasText;border:1px solid CanvasText}
  .vgk .tg::after{background:CanvasText;box-shadow:none}
  .vgk .tg:is([aria-checked="true"],[aria-pressed="true"],.on){--kb-bg:Highlight;--kb-bd:Highlight}
  .vgk .tg:is([aria-checked="true"],[aria-pressed="true"],.on)::after{background:HighlightText}
  .vgk :is(.segm,.segm.round)>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on){forced-color-adjust:none;--kb-bg:Highlight;--kb-sh:none;color:HighlightText}
  .vgk :is(.segm,.segm.round)>button:is([aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],.on) em{color:HighlightText}
  .vgk .cb:is(.on,[aria-checked="true"],[aria-pressed="true"]){forced-color-adjust:none;--kb-bg:Highlight;--kb-bd:Highlight;color:HighlightText}
  .vgk .opt:is([aria-checked="true"],[aria-pressed="true"],.on)::before{border-color:Highlight}
  .vgk :is(.bar,.donut){forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  .vgk .bar>:is(i,s,span){forced-color-adjust:none;background:Highlight}
  .vgk .donut{background:conic-gradient(Highlight calc(var(--v) * 1turn),Canvas 0)}
  .vgk .dot{forced-color-adjust:none;--dot:CanvasText}
  .vgk .tb>:is(.on,[aria-current="page"],[aria-selected="true"]){color:Highlight}
  .vgk .timeline>li::before{background:CanvasText}
  .vgk .dot:is(.ok,.warn,.bad,.mute){--dot:CanvasText}
  .vgk .timeline>li>i{border:1px solid CanvasText}
  .vgk .timeline.sm>li:is(*,.ok,.now,.bad,.wait)>i{forced-color-adjust:none;background:CanvasText;border-color:CanvasText;box-shadow:none}
  .vgk .timeline.sm>li:is(.ok)>i{background:Highlight}
  .vgk .timeline.sm>li:is(.now,.wait)>i{background:Canvas}
  .vgk .timeline.sm>li.now>i{border-color:Highlight}
  .vgk progress.bar{border:1px solid CanvasText}
  .vgk progress.bar::-webkit-progress-bar{background:Canvas}
  .vgk progress.bar::-webkit-progress-value{background:Highlight}
  .vgk progress.bar::-moz-progress-bar{background:Highlight}
  .vgk .kpi:is(.on,[aria-pressed="true"],[aria-current="true"]){outline:2px solid Highlight;outline-offset:2px}
  .vgk .dtable tbody tr.sel td:first-child{border-left:3px solid Highlight}
  .vgk .range{forced-color-adjust:none}
  .vgk .range::-webkit-slider-runnable-track{background:linear-gradient(to right,Highlight calc(var(--v) * 100%),GrayText 0)}
  .vgk .range::-moz-range-track{background:GrayText}
  .vgk .range::-moz-range-progress{background:Highlight}
  .vgk .range::-webkit-slider-thumb{background:ButtonText;box-shadow:none}
  .vgk .range::-moz-range-thumb{background:ButtonText;box-shadow:none}
  .vgk .fld>small.err::before{forced-color-adjust:none;background:CanvasText}
  .vgk :is(.inp:focus-visible,.inp:focus,.field:focus-within){outline:2px solid Highlight;outline-offset:2px}
}

/* ---- 18 keypad (vg-keypad.js openFractionPad; sec-medida.html CSS lines 181–209 and its key tokens). A .bsheet docked in
   the body-level layer, with no veil (the demo's pad is not modal); keys keep the demo's 40 px faces and gaps inside 44 px
   hit boxes (the face is ::before, the hit box overlaps the 6 px gap by 2 px on each side; below 360 px the keys tile the
   width instead, RESPONSIVE). AA: the empty «0» #c7c7cc / #5d636b in the demo (1.68 / 2.97 on the display, 34 px bold) →
   #939398 / #5f656d (3.06), verify/kit/aa-map.json. ---- */
.vgk{--k-kp-sheet:rgba(250,251,253,.97);--k-kp-sheet-sh:rgba(20,40,80,.3);--k-kp-grab:rgba(0,0,0,.16);--k-kp-x-fg:#55555c;
  --k-kp-d:#ffffff;--k-kp-d-line:rgba(0,0,0,.07);--k-kp-ph:#939398;--k-kp-u:#8e8e93;
  --k-key:#ffffff;--k-key-sh:0 1px 0 rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.03);--k-key-fr:#eef3fb;--k-key-sel:var(--p-blue)}
:root[data-theme="dark"] .vgk{--k-kp-sheet:rgba(30,35,41,.97);--k-kp-sheet-sh:rgba(0,0,0,.6);--k-kp-grab:rgba(255,255,255,.22);--k-kp-x-fg:#c9ccd2;
  --k-kp-d:#13171b;--k-kp-d-line:rgba(255,255,255,.08);--k-kp-ph:#5f656d;--k-kp-u:#8e939b;
  --k-key:#3a4048;--k-key-sh:0 1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);--k-key-fr:#24344a;--k-key-sel:#0071e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk{--k-kp-sheet:rgba(30,35,41,.97);--k-kp-sheet-sh:rgba(0,0,0,.6);--k-kp-grab:rgba(255,255,255,.22);--k-kp-x-fg:#c9ccd2;
  --k-kp-d:#13171b;--k-kp-d-line:rgba(255,255,255,.08);--k-kp-ph:#5f656d;--k-kp-u:#8e939b;
  --k-key:#3a4048;--k-key-sh:0 1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);--k-key-fr:#24344a;--k-key-sel:#0071e3}}
.vgk .kpad{padding:8px 16px 14px;border-radius:var(--ios-r) var(--ios-r) 0 0;background:var(--k-kp-sheet);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 -14px 34px -14px var(--k-kp-sheet-sh)}
.vgk .kpad.dock{width:auto;max-width:430px;margin:0 auto;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.vgk .kpad .grab{margin-bottom:10px;background:var(--k-kp-grab)}
.vgk .kp-h{display:flex;align-items:center;gap:8px;min-height:28px}
.vgk .kp-t{flex:1;min-width:0;overflow:hidden;font:700 var(--ios-t-callout) var(--sans);white-space:nowrap;text-overflow:ellipsis}
.vgk .kp-h .chip{font-size:var(--ios-t-caption1)}
.vgk .kpad .kp-x{position:relative;width:28px;height:28px;color:var(--k-kp-x-fg)}
.vgk .kpad .kp-x svg{width:14px;height:14px;stroke-width:2.6}
.vgk .kpad .kp-x::after{content:"";position:absolute;inset:-8px}
.vgk .kp-d{display:flex;align-items:baseline;justify-content:center;gap:9px;height:58px;margin-top:8px;border-radius:var(--ios-r);background:var(--k-kp-d);border:1px solid var(--k-kp-d-line);font:700 var(--ios-t-large)/58px var(--sans);letter-spacing:-.02em;color:var(--p-fg)}
.vgk .kp-w.ph{color:var(--k-kp-ph)}
.vgk .kp-f{color:var(--p-blue)}
.vgk .kp-f:empty{display:none}
.vgk .kp-u{margin-left:-6px;color:var(--k-kp-u)}
.vgk :is(.kp-l,.kp-k){display:grid;grid-template-columns:3fr 4fr;gap:12px}
.vgk .kp-l{margin-top:11px;font:400 var(--ios-t-footnote)/var(--ios-lh-footnote) var(--sans);color:var(--p-mut)}
.vgk .kp-k{margin-top:6px}
.vgk :is(.kp-dg,.kp-fr){display:grid;grid-auto-rows:40px;gap:6px}
.vgk .kp-dg{grid-template-columns:repeat(3,minmax(0,1fr))}
.vgk .kp-fr{grid-template-columns:repeat(4,minmax(0,1fr))}
.vgk .kpad .kp-key{--kb-bg:transparent;--kb-sh:none;--kb-tr:none;--kb-press:none;--key:var(--k-key);position:relative;z-index:0;display:block;width:auto;height:44px;margin:-2px;padding:0;border:0;border-radius:var(--ios-r);background:var(--kb-bg);font:600 var(--ios-t-title3) var(--sans);color:var(--p-fg);text-align:center;cursor:pointer;touch-action:manipulation}
.vgk .kpad .kp-key::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:var(--ios-r);background:var(--key);box-shadow:var(--k-key-sh)}
.vgk .kpad .kp-key.z0{grid-column:span 2}
.vgk .kpad .kp-key svg{display:block;width:21px;height:21px;margin:auto}
.vgk .kpad .kp-fr .kp-key{--key:var(--k-key-fr);font-size:var(--ios-t-footnote)}
.vgk .kpad .kp-fr .kp-key.q{font-weight:700}
.vgk .kpad .kp-fr .kp-key[aria-pressed="true"]{--key:var(--k-key-sel);color:#fff}
.vgk .kpad .kp-fr .kp-key[aria-pressed="true"]::before{box-shadow:0 4px 10px -4px rgba(0,113,227,.6)}
.vgk .kpad .kp-key:focus-visible{outline-offset:-1px}
.vgk .kpad .kp-s{margin-top:12px;font-size:var(--ios-t-callout)}
.vgk .kpad .kp-s:disabled{--kb-bg:linear-gradient(180deg,var(--k-pri-a),var(--k-pri-b));--kb-sh:0 8px 16px -8px rgba(0,113,227,.6);color:#fff;opacity:.45;cursor:default}
/* narrower than 360 px (320 px phones): 7 keys of 44 px need 308 px, so the sheet's sides go to 4 px and the keys tile
   (no gap between hit boxes; the faces keep 4 px between them, 8 px between the two groups) */
@media (max-width:359.98px){
  .vgk .kpad.dock{padding-left:4px;padding-right:4px}
  .vgk .kpad :is(.kp-l,.kp-k){column-gap:4px}
  .vgk .kpad :is(.kp-dg,.kp-fr){column-gap:0}
  .vgk .kpad .kp-key{margin:-2px 0}
  .vgk .kpad :is(.kp-h,.kp-d,.kp-s){margin-left:8px;margin-right:8px}
  .vgk .kpad .kp-s{width:calc(100% - 16px)}
}
@media (forced-colors:active){
  .vgk .kpad .kp-key::before{forced-color-adjust:none;background:Canvas;box-shadow:none;border:1px solid ButtonText}
  .vgk .kpad .kp-key{color:ButtonText}
  .vgk .kpad .kp-fr .kp-key[aria-pressed="true"]::before{background:Highlight;border-color:Highlight}
  .vgk .kpad .kp-fr .kp-key[aria-pressed="true"]{forced-color-adjust:none;color:HighlightText}
  .vgk .kp-d{border:1px solid CanvasText}
}

/* ---- 19 signature (vg-sign.js mountSignature; sec-recepcion.html .pad, and .sgn.sm = sec-reporte.html .rp-pad). The
   drawing is an SVG path in the w × h box of its value, stretched to the pad as the pointer is mapped (preserveAspectRatio
   none; the stroke keeps its width). The pad's size and guides are custom properties. AA (verify/kit/aa-map.json): the
   hint #8e8e93 (recepción, 3.26 on the white pad) → #75757a and #aeaeb2 (reporte, 2.21) → #757579 (4.58); reporte's
   «Falta la firma del cliente» #c25e00 (4.29) → #bb5b02; the pad's edge rgba(0,0,0,.06) / reporte's ring
   rgba(0,0,0,.08) (1.1–1.2:1) → --k-ctl-line, the 3:1 line of the kit's fields. ---- */
.vgk{--k-sgn:#ffffff;--k-sgn-edge:var(--k-ctl-line);--k-sgn-ink:#14213d;--k-sgn-base:rgba(0,0,0,.16);--k-sgn-x:#aeaeb2;--k-sgn-hint:#75757a;
  --k-sgn-sm:#ffffff;--k-sgn-sm-ink:#1b2a52;--k-sgn-sm-base:#c7c7cc;--k-sgn-sm-x:#aeaeb2;--k-sgn-sm-hint:#757579;--k-sgn-warn:#bb5b02}
:root[data-theme="dark"] .vgk{--k-sgn:#272d34;--k-sgn-edge:var(--k-ctl-line);--k-sgn-ink:#dfe8f7;--k-sgn-base:rgba(255,255,255,.2);--k-sgn-x:#6b7079;--k-sgn-hint:#9ca0a8;
  --k-sgn-sm:#252b32;--k-sgn-sm-ink:#dce6ff;--k-sgn-sm-base:rgba(255,255,255,.24);--k-sgn-sm-x:#aeaeb2;--k-sgn-sm-hint:#aeaeb2;--k-sgn-warn:var(--p-warn-fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk{--k-sgn:#272d34;--k-sgn-edge:var(--k-ctl-line);--k-sgn-ink:#dfe8f7;--k-sgn-base:rgba(255,255,255,.2);--k-sgn-x:#6b7079;--k-sgn-hint:#9ca0a8;
  --k-sgn-sm:#252b32;--k-sgn-sm-ink:#dce6ff;--k-sgn-sm-base:rgba(255,255,255,.24);--k-sgn-sm-x:#aeaeb2;--k-sgn-sm-hint:#aeaeb2;--k-sgn-warn:var(--p-warn-fg)}}
.vgk .sgn{position:relative;height:var(--sgn-h,150px);overflow:hidden;border-radius:var(--sgn-r,var(--ios-r));background:var(--k-sgn);border:var(--sgn-bw,1px) solid var(--k-sgn-edge);box-shadow:var(--sgn-ring,none);color:var(--k-sgn-ink);touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
.vgk .sgn-ink{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.vgk .sgn-ink path{fill:none;stroke:currentColor;stroke-width:var(--sgn-w,2.6);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vgk .sgn-bl{position:absolute;left:var(--sgn-bl-left,var(--sgn-pad-x,22px));right:var(--sgn-bl-right,var(--sgn-pad-x,22px));bottom:var(--sgn-base,36px);border-top:1.5px dashed var(--k-sgn-base);pointer-events:none}
.vgk .sgn-x{position:absolute;left:var(--sgn-x-left,24px);top:var(--sgn-x-top,auto);bottom:var(--sgn-x-bottom,40px);font:var(--sgn-x-font,500 18px var(--sans));color:var(--k-sgn-x);pointer-events:none}
.vgk .sgn-hint{position:absolute;left:0;right:0;top:var(--sgn-hint-top,auto);bottom:var(--sgn-hint-bottom,12px);font:var(--sgn-hint-font,500 12px var(--sans));color:var(--k-sgn-hint);text-align:center;pointer-events:none}
.vgk .sgn-hint.warn{color:var(--k-sgn-warn)}
.vgk .sgn.on .sgn-hint{visibility:hidden}
.vgk .sgn.ro{cursor:default;touch-action:auto}
/* reporte's pad: 116 px, radius 14, an inset ring instead of a border, «✕» 600 14 px beside a line from 34 to 16 px, the
   hint at 40 px from the top in 13 px, its own paper ink */
.vgk .sgn.sm{--sgn-h:116px;--sgn-r:14px;--sgn-bw:0px;--sgn-ring:inset 0 0 0 1px var(--k-sgn-edge);--sgn-w:2.4;--sgn-base:22.5px;--sgn-bl-left:34px;--sgn-bl-right:16px;
  --sgn-x-left:14px;--sgn-x-top:78px;--sgn-x-bottom:auto;--sgn-x-font:600 14px var(--sans);--sgn-hint-top:40px;--sgn-hint-bottom:auto;--sgn-hint-font:500 13px var(--sans);
  --k-sgn:var(--k-sgn-sm);--k-sgn-ink:var(--k-sgn-sm-ink);--k-sgn-base:var(--k-sgn-sm-base);--k-sgn-x:var(--k-sgn-sm-x);--k-sgn-hint:var(--k-sgn-sm-hint)}
@media (forced-colors:active){.vgk .sgn{border:1px solid CanvasText}.vgk .sgn-ink path{stroke:CanvasText}}

/* ---- 20 photo slot (vg-photos.js photoSlotHtml; sec-recepcion.html .sl / .fg / .wd): a dashed «tap to take» slot around
   a hidden file input, then the photo with its tick. AA: the label is the kit's link blue in light (--k-link; the demo's
   --r-blue-tx is --p-blue there) and the demo's --p-info-fg in dark; the dashed edge rgba(0,113,227,.45) / rgba(10,132,
   255,.55) (2.0 / 2.4:1) → the same blue at .77 / .8 (3:1, a control's outline); the tick's green #34c759 / #30d158
   (2.2 / 2.0:1 under its white mark) → --k-ok-on, the kit's 3:1 «on» fill. ---- */
.vgk{--k-slot-fg:var(--k-link);--k-slot-edge:rgba(0,113,227,.77);--k-slot-bg:rgba(0,113,227,.045);--k-shot-edge:rgba(0,0,0,.06);--k-shot-bg:#dfe5ec;--k-cap:rgba(255,255,255,.9);--k-cap-fg:#1d1d1f;--k-cap-sh:rgba(20,40,80,.45);--k-slot-bad:var(--k-bad-fill)}
:root[data-theme="dark"] .vgk{--k-slot-fg:var(--p-info-fg);--k-slot-edge:rgba(10,132,255,.8);--k-slot-bg:rgba(10,132,255,.08);--k-shot-edge:rgba(255,255,255,.1);--k-shot-bg:#2a3036;--k-cap:rgba(28,33,38,.9);--k-cap-fg:#f2f2f5;--k-cap-sh:rgba(0,0,0,.55);--k-slot-bad:var(--k-bad-fill)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgk{--k-slot-fg:var(--p-info-fg);--k-slot-edge:rgba(10,132,255,.8);--k-slot-bg:rgba(10,132,255,.08);--k-shot-edge:rgba(255,255,255,.1);--k-shot-bg:#2a3036;--k-cap:rgba(28,33,38,.9);--k-cap-fg:#f2f2f5;--k-cap-sh:rgba(0,0,0,.55);--k-slot-bad:var(--k-bad-fill)}}
.vgk .pslots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vgk .pslot{--kb-bg:var(--k-slot-bg);--kb-bd:var(--k-slot-edge);--kb-sh:none;--kb-tr:none;--kb-press:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;width:100%;height:132px;margin:0;padding:0 8px;overflow:hidden;border:1.5px dashed var(--kb-bd);border-radius:var(--ios-r);background:var(--kb-bg);font:600 var(--ios-t-subhead) var(--sans);color:var(--k-slot-fg);text-align:center;cursor:pointer}
.vgk .pslots>.pslot{height:158px}
.vgk .pslot.wide{height:140px}
.vgk .pslot>svg{width:28px;height:28px}
.vgk .pslot>small{display:block;margin:0;font:400 var(--ios-t-caption1) var(--sans);color:var(--p-mut)}
.vgk .pslot-in{position:absolute;width:1px;height:1px;min-width:0;max-width:none;min-height:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit;opacity:0;clip-path:inset(50%);transition:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.vgk .pslot:has(.pslot-in:focus-visible){outline:2px solid var(--k-focus);outline-offset:2px}
.vgk .pslot.on{--kb-bg:var(--k-shot-bg);--kb-bd:var(--k-shot-edge);border-style:solid;border-width:1px;cursor:default}
.vgk .pslot-pv{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vgk .pslot-cap{position:absolute;left:7px;bottom:7px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border-radius:999px;font:600 var(--ios-t-caption1) var(--sans);color:var(--k-cap-fg);background:var(--k-cap);box-shadow:0 4px 12px -6px var(--k-cap-sh)}
.vgk .pslot-cap>svg{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--k-ok-on);color:#fff;stroke-width:3.4}
.vgk .pslot.wide .pslot-cap{left:auto;right:8px;top:8px;bottom:auto;padding:4px}
.vgk .pslot.busy{cursor:progress}
.vgk .pslot.busy>svg{animation:kit-pslot-busy 1.1s ease-in-out infinite alternate}
@keyframes kit-pslot-busy{from{opacity:1}to{opacity:.35}}
.vgk .pslot.bad{--kb-bd:var(--k-slot-bad);--kb-bg:var(--p-bad-bg);color:var(--p-bad-fg)}
@media (prefers-reduced-motion:reduce){.vgk .pslot.busy>svg{animation:none}}
@media (forced-colors:active){.vgk .pslot{border-color:ButtonText}.vgk .pslot-cap{border:1px solid CanvasText}}