/* ======================= Vision Glass — shared calendar (vg-calendar.js) =======================
   One look in Poncheo, Workshop 3D, Proyectos and Estadísticas: graphite glass tokens from vg-dash.css (--vd-*), with
   fallbacks for a page that does not load it; light / dark through :root[data-theme] and prefers-color-scheme. The host
   apps paint every button inside #app / #shared-workshop with id-weighted !important skins (vg-motion.css, vg-dash.css),
   so the calendar's own controls use the weight prefix `.vgcal:not(#vgcx)×4` to keep the same finish in every app.
   Motion: a ≤ 220 ms slide / fade only after a person navigates; nothing under prefers-reduced-motion. */
.vgcal{   /* Apple base: vg-apple-base.css tokens (they switch theme by themselves: no dark block); selected = systemBlue */
  --vgc-card:var(--ios-bg-2);--vgc-soft:var(--ios-fill);--vgc-act:var(--ios-blue);--vgc-act-ink:var(--ios-on-accent);
  --vgc-ink:var(--ios-label);--vgc-muted:var(--ios-label-2);--vgc-line:var(--ios-separator);--vgc-line-2:var(--ios-separator);
  --vgc-hover:var(--ios-fill-4);--vgc-shadow:none;
  --vgc-font:var(--ios-font);
  --t-new:var(--ios-purple);--t-current:var(--ios-blue);--t-hold:var(--ios-orange);--t-done:var(--ios-green);--t-alert:var(--ios-red);--t-info:var(--ios-gray);
  --vgc-ease:cubic-bezier(.2,.7,.2,1);
  container-type:inline-size;position:relative;box-sizing:border-box;display:block;width:100%;max-width:100%;min-width:0;
  margin:0;padding:16px;border-radius:var(--ios-r);background:var(--vgc-card);color:var(--vgc-ink);box-shadow:var(--vgc-shadow);
  border:0;font-family:var(--vgc-font);font-size:var(--ios-t-subhead);line-height:1.35;text-align:left;
}
.vgcal *,.vgcal *::before,.vgcal *::after{box-sizing:border-box}
.vgcal .t-new{--tone:var(--t-new)}.vgcal .t-current{--tone:var(--t-current)}.vgcal .t-hold{--tone:var(--t-hold)}
.vgcal .t-done{--tone:var(--t-done)}.vgcal .t-alert{--tone:var(--t-alert)}.vgcal .t-info{--tone:var(--t-info)}
.vgcal h2,.vgcal h3,.vgcal h4,.vgcal h5,.vgcal p,.vgcal ul,.vgcal dl,.vgcal dd{margin:0;padding:0}
.vgcal ul{list-style:none}
.vgcal .vgcal-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- every calendar control: one reset over the host skins ---- */
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;margin:0!important;
  font:inherit!important;font-weight:600!important;font-size:var(--ios-t-subhead)!important;letter-spacing:0!important;text-transform:none!important;line-height:1.2!important;
  color:var(--vgc-ink)!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
  text-decoration:none!important;text-align:center;cursor:pointer;transform:none;filter:none!important;
  transition:background-color .18s var(--vgc-ease),color .18s var(--vgc-ease),box-shadow .18s var(--vgc-ease)!important;-webkit-tap-highlight-color:transparent}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button::before,.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button::after{content:none!important;display:none!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button:focus-visible{outline:2px solid var(--vgc-act)!important;outline-offset:2px!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button:active{filter:brightness(.9)!important}

/* ---- header: title + range, then prev / today / next and the Month · Week · Day segmented control ---- */
.vgcal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-bottom:12px}
.vgcal-title{display:flex;align-items:center;gap:10px;min-width:0}
.vgcal-title>.vgcal-ic{width:19px;height:19px;padding:5px;box-sizing:content-box;border-radius:var(--ios-r-s);background:var(--ios-blue);color:var(--ios-on-accent);stroke-width:1.8}
.vgcal .vgcal-h{font-size:var(--ios-t-headline);font-weight:600;line-height:var(--ios-lh-headline);color:var(--vgc-ink)}
.vgcal .vgcal-range{font-size:var(--ios-t-footnote);color:var(--vgc-muted);margin-top:2px}
.vgcal-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vgcal-nav{display:flex;align-items:center;gap:4px}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-btn{min-height:44px;min-width:44px;padding:0 14px!important;background:var(--vgc-soft)!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-icon{width:44px;padding:0!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-today{background:var(--ios-blue-tint)!important;color:var(--ios-blue)!important}
.vgcal-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:var(--ios-fill)}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-seg>.vgcal-btn{position:relative;min-height:36px;background:transparent!important;color:var(--vgc-ink)!important;font-weight:400!important;font-size:var(--ios-t-footnote)!important;padding:0 14px!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-seg>.vgcal-btn[aria-pressed="true"]{background:var(--ios-seg-thumb)!important;color:var(--vgc-ink)!important;font-weight:600!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important}
@media (hover:hover){
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-btn:not(.vgcal-today):not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--vgc-act) 9%,var(--vgc-soft))!important;color:var(--vgc-ink)!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-day:hover,.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-wday:hover{background:var(--vgc-hover)!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev:hover{background:color-mix(in srgb,var(--tone) 12%,var(--vgc-soft))!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-chip:hover{background:color-mix(in srgb,var(--tone) 14%,var(--vgc-soft))!important}}

/* ---- filter chips: one per kind, filled while shown, outlined while hidden; the count is for the visible period ---- */
.vgcal-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-chip{min-height:44px;padding:0 12px!important;gap:8px;background:var(--ios-blue-tint)!important;color:var(--ios-blue)!important;font-weight:400!important;font-size:var(--ios-t-footnote)!important;box-shadow:inset 0 0 0 1px transparent!important}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-chip[aria-pressed="false"]{background:var(--ios-fill)!important;color:var(--vgc-muted)!important;box-shadow:none!important}
.vgcal-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--tone);flex:none}
.vgcal-chip[aria-pressed="false"] .vgcal-chip-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--tone)}
.vgcal-chip-n{min-width:0;padding:0;border-radius:0;background:none;color:inherit;opacity:.8;font-size:var(--ios-t-footnote);font-weight:400;font-variant-numeric:tabular-nums}
.vgcal-chip[aria-pressed="false"] .vgcal-chip-n{background:none;color:var(--vgc-muted)}

/* ---- month grid ---- */
.vgcal-body{position:relative;min-width:0}
/* Match the date picker's rounded week bands. Event titles stay in the agenda. */
.vgcal-month{max-width:640px;margin-inline:auto}
.vgcal-wd,.vgcal-month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.vgcal-grid{display:grid;gap:4px}
.vgcal-month-row{border-radius:var(--ios-r);background:transparent}
.vgcal-wd{margin-bottom:4px}
.vgcal-wd>span{text-align:center;font-size:var(--ios-t-caption1);font-weight:600;color:var(--vgc-muted);padding:2px 0}
.vgcal-wd abbr{text-decoration:none;border:0;cursor:default}
.vgcal-narrow{display:none}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-day{
  position:relative;flex-direction:column;justify-content:flex-start;gap:2px;min-height:46px;
  min-width:0;width:100%;padding:4px 0!important;border-radius:var(--ios-r)!important
}
.vgcal-dn{
  display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 4px;
  border-radius:50%;font-size:var(--ios-t-footnote);font-weight:600;font-variant-numeric:tabular-nums
}
.vgcal-day.is-out:not(.is-sel) .vgcal-dn{color:var(--vgc-muted);font-weight:400}
.vgcal .is-today .vgcal-dn{box-shadow:inset 0 0 0 1px var(--vg-ctl-accent,var(--vgc-act))}
.vgcal .vgcal-day.is-sel .vgcal-dn,.vgcal .vgcal-wcol.is-sel .vgcal-dn{
  background:var(--vgc-act);color:var(--vgc-act-ink);box-shadow:none
}
.vgcal .vgcal-day.is-sel.is-today .vgcal-dn,.vgcal .vgcal-wcol.is-sel.is-today .vgcal-dn{
  box-shadow:inset 0 0 0 1px var(--vg-ctl-accent,var(--vgc-act))
}
.vgcal-dots{display:flex;gap:3px;align-items:center;justify-content:center;flex:none}
.vgcal-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--tone)}
.vgcal-dot:not(.vgcal-dot-more){background:color-mix(in srgb,var(--tone) 68%,var(--vgc-ink))}
.vgcal-dot-more{background:var(--vgc-muted)}
@media (forced-colors:active){
  .vgcal .vgcal-day.is-sel .vgcal-dn,.vgcal .vgcal-wcol.is-sel .vgcal-dn{
    forced-color-adjust:none;background:Highlight;color:HighlightText
  }
  .vgcal-dot{forced-color-adjust:none;background:CanvasText}
}

/* ---- week: seven columns (wide) or seven rows (narrow) ---- */
.vgcal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.vgcal-wcol{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border-radius:var(--ios-r);background:color-mix(in srgb,var(--vgc-soft) 55%,transparent)}
.vgcal-wcol.is-sel{box-shadow:inset 0 0 0 2px var(--vgc-act)}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-wday{min-height:44px;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:2px 6px;padding:0 6px!important;border-radius:var(--ios-r)!important}
.vgcal-wname{font-size:var(--ios-t-caption1);color:var(--vgc-muted);font-weight:600}
.vgcal-wday .vgcal-dots{margin-inline-start:auto}
.vgcal-wlist{display:flex;flex-direction:column;gap:4px;min-width:0}
.vgcal-wnone{font-size:var(--ios-t-caption1);color:var(--vgc-muted);padding:2px 6px}

/* ---- event rows (agenda, week, day, upcoming) ---- */
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev{display:grid;grid-template-columns:minmax(64px,auto) 4px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px!important;border-radius:var(--ios-r)!important;background:var(--vgc-soft)!important;text-align:left;font-weight:400!important}
.vgcal-ev-time{font-size:var(--ios-t-footnote);color:var(--vgc-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vgcal-ev-bar{display:block;width:4px;height:100%;min-height:28px;border-radius:4px;background:var(--tone)}
.vgcal-ev-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.vgcal-ev-txt b{font-weight:600;font-size:var(--ios-t-subhead);overflow-wrap:anywhere}
.vgcal-ev-txt small{font-size:var(--ios-t-caption1);color:var(--vgc-muted);overflow-wrap:anywhere}
.vgcal-ev>.vgcal-ic{color:var(--vgc-muted);width:16px;height:16px}
.vgcal-wlist .vgcal-ev{grid-template-columns:3px minmax(0,1fr)!important;gap:2px 8px!important;min-height:44px!important;padding:6px 8px!important;border-radius:var(--ios-r)!important;background:var(--vgc-card)!important}
.vgcal-wlist .vgcal-ev-time{grid-column:2;grid-row:1;font-size:var(--ios-t-caption2)}
.vgcal-wlist .vgcal-ev-bar{grid-column:1;grid-row:1/span 2;min-height:100%}
.vgcal-wlist .vgcal-ev-txt{grid-column:2;grid-row:2}
.vgcal-wlist .vgcal-ev-txt b{font-size:var(--ios-t-footnote)}
.vgcal-wlist .vgcal-ev-txt small,.vgcal-wlist .vgcal-ev>.vgcal-ic{display:none}
.vgcal-list{display:flex;flex-direction:column;gap:6px}

/* ---- agenda of the selected day, detail, upcoming, empty states ---- */
.vgcal-agenda,.vgcal-up,.vgcal-detail{margin-top:14px}
.vgcal .vgcal-agenda-h,.vgcal-up>h4{font-size:var(--ios-t-footnote);font-weight:600;color:var(--vgc-ink);margin-bottom:8px}
.vgcal-up li{display:flex;flex-direction:column;gap:4px}
.vgcal-up-d{font-size:var(--ios-t-caption1);font-weight:600;color:var(--vgc-muted);padding-left:4px}
.vgcal-empty-day{padding:12px 14px;border-radius:var(--ios-r);background:var(--vgc-soft);color:var(--vgc-muted);font-size:var(--ios-t-footnote)}
.vgcal-empty{margin:0 0 10px;padding:12px 14px;border-radius:var(--ios-r);border:0;background:var(--vgc-soft);color:var(--vgc-muted);font-size:var(--ios-t-footnote);display:flex;flex-direction:column;gap:4px}
.vgcal-empty b{color:var(--vgc-ink);font-weight:600}
.vgcal-un{font-size:var(--ios-t-caption1)}
.vgcal-detail{padding:14px;border-radius:var(--ios-r);background:var(--vgc-soft);outline:none}
.vgcal-detail:focus-visible{box-shadow:0 0 0 2px var(--vgc-act)}
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-back{background:var(--vgc-card)!important;margin-bottom:10px!important}
.vgcal-detail h4{display:flex;align-items:center;gap:10px;font-size:var(--ios-t-callout);font-weight:600;margin-bottom:10px}
.vgcal-detail h4 .vgcal-ev-bar{height:22px;min-height:22px}
.vgcal-detail dl{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:6px 14px;font-size:var(--ios-t-footnote)}
.vgcal-detail dl>div{display:contents}
.vgcal-detail dt{color:var(--vgc-muted)}
.vgcal-detail dd{overflow-wrap:anywhere}
.vgcal-note{margin-top:10px!important;font-size:var(--ios-t-caption1);color:var(--vgc-muted)}
.vgcal-foot{margin-top:12px!important;font-size:var(--ios-t-caption1);color:var(--vgc-muted)}

/* ---- narrow (phones, side sheets): compact labels and one row per day in week view ---- */
@container (max-width:560px){
  .vgcal-wide{display:none}.vgcal-narrow{display:inline}
  .vgcal-week{grid-template-columns:minmax(0,1fr);gap:4px}
  .vgcal-wcol{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:start;gap:6px}
  .vgcal-head{gap:8px}
  .vgcal-ctl{width:100%;justify-content:space-between}
}
@container (max-width:340px){
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-seg>.vgcal-btn{padding:0 10px!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev{grid-template-columns:4px minmax(0,1fr) 16px;gap:8px}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev .vgcal-ev-time{grid-column:2;grid-row:1;font-size:var(--ios-t-caption1)}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev .vgcal-ev-bar{grid-column:1;grid-row:1/span 2}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev .vgcal-ev-txt{grid-column:2;grid-row:2}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ev>.vgcal-ic{grid-column:3;grid-row:1/span 2}
}
@media (max-width:420px){.vgcal{padding:12px 10px;border-radius:var(--ios-r)}}
/* ---- phone month grid: every day cell ≥ 44 × 44 px from a 360 px screen up (Poncheo, Workshop, Proyectos, Estadísticas).
   The narrow grid widens into the calendar's own side padding —
   or, sitting flat inside a host card, into that card's padding — so 7 × 44 px fit; header, chips and agenda keep theirs. ---- */
@container (max-width:420px){
  .vgcal-month{margin-inline:-9px}
  .vg-cal-host>.vgcal .vgcal-month,[data-vg-cal-host]>.vgcal .vgcal-month{margin-inline:-10px}
}

/* ---- motion: only after navigation (the class is never set on a re-mount) ---- */
.vgcal-body.vgcal-go-next{animation:vgcal-in-next .22s var(--vgc-ease) both}
.vgcal-body.vgcal-go-prev{animation:vgcal-in-prev .22s var(--vgc-ease) both}
.vgcal-body.vgcal-go-fade,.vgcal-body.vgcal-go-fade~.vgcal-agenda,.vgcal-body.vgcal-go-fade~.vgcal-detail{animation:vgcal-fade .18s ease-out both}
@keyframes vgcal-in-next{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes vgcal-in-prev{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes vgcal-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .vgcal *,.vgcal *::before,.vgcal *::after{animation:none!important;transition:none!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button{transition:none!important}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) button:active{transform:none}
}

/* ---- inside a host fold (Poncheo «Calendario»): the fold is the card, the calendar sits flat inside it ---- */
.vg-cal-host>.vgcal,[data-vg-cal-host]>.vgcal{box-shadow:none;border:0;padding:4px 0 0;background:transparent}

/* ---- filters toggle: only in narrow containers (side columns, phones); wide layouts always show the chips ---- */
.vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ftoggle{display:none;width:100%;justify-content:flex-start;gap:8px;margin:0 0 8px!important}
.vgcal-ftoggle>.vgcal-ic{margin-left:auto;transform:rotate(90deg);transition:transform .18s var(--vgcal-ease)}
.vgcal-ftoggle[aria-expanded="true"]>.vgcal-ic{transform:rotate(-90deg)}
@container (max-width:560px){
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-ftoggle{display:inline-flex}
  .vgcal-chips:not([data-open]){display:none}
  .vgcal-chips{gap:4px 6px}
  .vgcal:not(#vgcx):not(#vgcx):not(#vgcx):not(#vgcx) .vgcal-chip{padding:0 10px!important;font-size:var(--ios-t-footnote)!important;gap:6px}
}