/* Calendario semanal de turnos (widget scripts/widgets/week-calendar.js). Solo tokens canon; prefijo sa-week-. */
.sa-week-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.sa-week-grid { --sa-row: 54px; display: grid; grid-template-columns: 52px repeat(7, minmax(92px, 1fr)); gap: 6px; overflow-x: auto; }
.sa-week-hours { display: flex; flex-direction: column; justify-content: space-between; padding-top: 38px; color: var(--text-subtle); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.sa-week-hours span { line-height: 1; }
.sa-week-day { display: grid; grid-template-rows: 32px 1fr; gap: 6px; min-width: 0; }
.sa-week-day-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 8px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-body); }
.sa-week-day-title abbr { text-decoration: none; }
.sa-week-count { color: var(--text-muted); font-size: var(--fs-meta); }
.sa-week-track { position: relative; min-height: calc(var(--sa-row) * var(--sa-rows, 10)); margin: 0; padding: 0; list-style: none; border: 1px dashed var(--border-default); border-radius: var(--r-md); /* lint-ok: alto calculado por la rejilla de turnos */
  background: linear-gradient(to bottom, var(--border-default) 1px, transparent 1px) 0 0 / 100% calc(100% / var(--sa-rows, 10)); }
.sa-week-free { position: absolute; inset: 8px; display: grid; place-items: center; color: var(--text-subtle); font-size: var(--fs-meta); text-align: center; }
.sa-week-block { position: absolute; top: var(--sa-top); left: calc((100% / var(--sa-lanes)) * var(--sa-lane)); width: calc(100% / var(--sa-lanes)); height: var(--sa-height); padding: 2px; } /* lint-ok: alto calculado por la duración del turno */
.sa-week-button { display: flex; width: 100%; height: 100%; min-height: var(--ctl-lg); flex-direction: column; gap: 2px; padding: 6px 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: var(--r-md); background: var(--brand-soft); color: var(--text-primary); font-size: var(--fs-meta); text-align: left; cursor: pointer; }
.sa-week-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-week-button span { color: var(--text-muted); }
.sa-week-button:disabled { cursor: default; }
.sa-week-button:hover:not(:disabled) { border-color: var(--brand); }
.sa-week-block.inactive .sa-week-button { border-style: dashed; background: var(--surface-2); opacity: .75; }