/* «Versión B» (2026-11-09, Isaac: docs/demos/poncheo-profundidad.html): the depth of the pre-Apple Poncheo (the
   raised punch button, floating cards, pills with a highlight) in the «Ventanal gótico» family colours (Grafito, Plata,
   Vidrio). Workers found the flat look confusing; this layer only adds surfaces and shadows: no layout, no wording,
   no behaviour changes, and the punch stays one tap. Loaded last by index.html; every rule is under #app so the other
   apps (Workshop, Proyectos) are untouched. Composite-only press feedback; reduced motion keeps it still. */
:root{
  --vb-page:linear-gradient(180deg,#f4f6f8 0%,#e7ebee 100%);
  --vb-card:linear-gradient(180deg,#ffffff 0%,#f7f9fa 100%);
  --vb-card-edge:#ffffff;
  --vb-card-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(21,23,26,.05),0 16px 32px -22px rgba(21,23,26,.42);
  --vb-pill:linear-gradient(180deg,#ffffff 0%,#edf1f3 100%);
  --vb-pill-edge:#dfe8ec;
  --vb-pill-shadow:inset 0 1px 0 #fff,0 3px 8px -4px rgba(21,23,26,.35);
  --vb-ink:#2b3035;
  --vb-gap:#eef1f3;
  --vb-ring-edge:#b2b9c1;
  --vb-on:linear-gradient(180deg,#3a4148,#2b3035);
  --vb-on-ink:#ffffff;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --vb-page:linear-gradient(180deg,#0f1113 0%,#08090a 100%);
  --vb-card:linear-gradient(180deg,#1d2125 0%,#16191c 100%);
  --vb-card-edge:#2b3035;
  --vb-card-shadow:inset 0 1px 0 rgba(236,239,242,.06),0 2px 4px rgba(0,0,0,.4),0 18px 34px -22px rgba(0,0,0,.9);
  --vb-pill:linear-gradient(180deg,#2b3035 0%,#1f2327 100%);
  --vb-pill-edge:#3a4148;
  --vb-pill-shadow:inset 0 1px 0 rgba(236,239,242,.08),0 3px 8px -4px rgba(0,0,0,.8);
  --vb-ink:#dfe8ec;
  --vb-gap:#16191c;
  --vb-ring-edge:#4c535b;
  --vb-on:linear-gradient(180deg,#dfe8ec,#b2b9c1);
  --vb-on-ink:#15171a;
}}
:root[data-theme="dark"]{
  --vb-page:linear-gradient(180deg,#0f1113 0%,#08090a 100%);
  --vb-card:linear-gradient(180deg,#1d2125 0%,#16191c 100%);
  --vb-card-edge:#2b3035;
  --vb-card-shadow:inset 0 1px 0 rgba(236,239,242,.06),0 2px 4px rgba(0,0,0,.4),0 18px 34px -22px rgba(0,0,0,.9);
  --vb-pill:linear-gradient(180deg,#2b3035 0%,#1f2327 100%);
  --vb-pill-edge:#3a4148;
  --vb-pill-shadow:inset 0 1px 0 rgba(236,239,242,.08),0 3px 8px -4px rgba(0,0,0,.8);
  --vb-ink:#dfe8ec;
  --vb-gap:#16191c;
  --vb-ring-edge:#4c535b;
  --vb-on:linear-gradient(180deg,#dfe8ec,#b2b9c1);
  --vb-on-ink:#15171a;
}

/* the page and the bars (every declaration !important and #app×6: vg-remake.css pins the flat look with both) */
html:root body:has(> #app){background:var(--vb-page) fixed!important}
html:root body #app#app#app#app#app#app>header.top{box-shadow:0 1px 0 var(--vb-card-edge),0 10px 24px -20px rgba(21,23,26,.5)!important}
html:root body #app#app#app#app#app#app nav.tabs{box-shadow:inset 0 1px 0 var(--vb-card-edge),0 -10px 26px -20px rgba(21,23,26,.45)!important}

/* floating cards */
html:root body #app#app#app#app#app#app main :is(.card,.vgp-today,.vr-features,.rowbtn):not(.vb-entry *){background:var(--vb-card)!important;border:1px solid var(--vb-card-edge)!important;border-radius:20px!important;box-shadow:var(--vb-card-shadow)!important}
html:root body #app#app#app#app#app#app main .card :is(.vr-features,.rowbtn,.card){box-shadow:none!important}

/* the punch button: the old raised glass button inside an aluminium ring (blue = entrada, green = salida) */
html:root body #app#app#app#app#app#app .card.clock .primary.huge{--vb-glow:rgba(0,100,210,.6);--vb-deep:rgba(0,40,120,.26);position:relative!important;background:radial-gradient(circle at 35% 28%,#62b5ff 0%,#1a84f0 46%,#0060c7 100%)!important;box-shadow:0 0 0 7px var(--vb-gap),0 0 0 8px var(--vb-ring-edge),0 20px 36px -14px var(--vb-glow),inset 0 2px 1px rgba(255,255,255,.38),inset 0 -10px 22px var(--vb-deep)!important;transition:transform .12s cubic-bezier(.2,.8,.2,1)!important}
html:root body #app#app#app#app#app#app .card.clock.on .primary.huge{--vb-glow:rgba(26,143,62,.6);--vb-deep:rgba(0,70,30,.26);background:radial-gradient(circle at 35% 28%,#7be39a 0%,#2fbf5b 46%,#1a8f3e 100%)!important}
html:root body #app#app#app#app#app#app .card.clock .primary.huge::before{content:""!important;position:absolute!important;inset:6% 18% 54%!important;border-radius:50%!important;background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.04))!important;pointer-events:none!important}
html:root body #app#app#app#app#app#app .card.clock .primary.huge:not(:disabled):active{transform:translateY(3px) scale(.97)!important}
html:root body #app#app#app#app#app#app .card.clock.day-closed .primary.huge{--vb-glow:transparent;--vb-deep:rgba(0,0,0,.12);background:linear-gradient(180deg,#c7ccd1,#9aa2aa)!important}

/* each icon in its own small glass button, so a row reads at a glance */
html:root body #app#app#app#app#app#app main :is(.vgp-chip>svg:first-child,.vr-feature>svg:first-child,.rowbtn>svg:first-child){box-sizing:content-box!important;padding:6px!important;border-radius:10px!important;background:var(--vb-pill)!important;border:1px solid var(--vb-pill-edge)!important;box-shadow:var(--vb-pill-shadow)!important}

/* the review screen's icon tile is already a 42 px box: only its glass surface, no extra padding */
html:root body #app#app#app#app#app#app main .vg-review-icon{background:var(--vb-pill)!important;border:1px solid var(--vb-pill-edge)!important;box-shadow:var(--vb-pill-shadow)!important;color:#0a6fd6!important;flex:none!important}

/* counters and the place chip as raised pills */
html:root body #app#app#app#app#app#app main :is(.vgp-count,.vg-trail-count,.chip,.bv-chip){background:var(--vb-pill)!important;border:1px solid var(--vb-pill-edge)!important;border-radius:999px!important;box-shadow:var(--vb-pill-shadow)!important;color:var(--vb-ink)!important;padding:3px 9px!important}
html:root body #app#app#app#app#app#app main .vg-tag{box-shadow:var(--vb-pill-shadow)!important}

/* fields inside cards: a lit top edge; the chosen «Hoy» in graphite */
html:root body #app#app#app#app#app#app main .card :is(select,input:not([type="checkbox"]):not([type="radio"])):not(.vb-entry *):not(.vgp-inp *){background:var(--vb-pill)!important;border-color:var(--vb-pill-edge)!important;box-shadow:var(--vb-pill-shadow)!important}
html:root body #app#app#app#app#app#app main .vg-trail .vg-trail-today[aria-pressed="true"]{background:var(--vb-on)!important;color:var(--vb-on-ink)!important;box-shadow:0 4px 10px -4px rgba(21,23,26,.6)!important}

/* attendance history: each day a floating card with a colour edge (blue = today, steel = other days) */
html:root body #app#app#app#app#app#app main .vg-trail-group{position:relative!important;background:var(--vb-card)!important;border:1px solid var(--vb-card-edge)!important;box-shadow:var(--vb-card-shadow)!important;padding-left:18px!important;overflow:hidden!important}
html:root body #app#app#app#app#app#app main .vg-trail-group::before{content:""!important;position:absolute!important;left:0!important;top:12px!important;bottom:12px!important;width:4px!important;border-radius:0 3px 3px 0!important;background:#8fa3ad!important}
html:root body #app#app#app#app#app#app main .vg-trail-group:has(h3 small)::before{background:#0a6fd6!important}

/* progress photos like printed photos; the dashed notice in tinted glass */
html:root body #app#app#app#app#app#app main .thumbs .thumb{border:2px solid var(--vb-card-edge)!important;box-shadow:0 10px 18px -12px rgba(21,23,26,.6)!important;border-radius:12px!important}
html:root body #app#app#app#app#app#app main .vg-tr-notice{background:color-mix(in srgb,#dfe8ec 45%,transparent)!important}

@media (prefers-reduced-motion: reduce){html:root body #app#app#app#app#app#app .card.clock .primary.huge{transition:none!important}}
/* light mode for slow phones (vg-tier.js): one soft shadow instead of the layered ones */
html.vg-lite:root body #app#app#app#app#app#app main :is(.card,.vgp-today,.vr-features,.rowbtn,.vg-trail-group):not(.vb-entry *){box-shadow:0 1px 3px rgba(21,23,26,.12)!important}

/* the sign-in / request-account screen keeps its own fields: no extra card or field surface (2026-11-09, «se ve bugueado») */