/* Calendar (07): brand pack v2 applied by kind; RECIPES v1.6 C11-C13 for the grid, the mini-month, the Plazos rows,
   the filters, the glyphs and the side panel. Colour, radius, shadow and spacing come from the pack tokens only.
   Scoped to #view-calendar; classes use the cv- prefix (cl- belongs to the Clients screen). */
#view-calendar { padding: 0 0 var(--v3-end-space); color: var(--al-text); width: 100%; min-width: 0; max-width: 100%; }
#view-calendar * { box-sizing: border-box; }
#view-calendar a { color: var(--al-action); text-decoration: none; cursor: pointer; }
#view-calendar a:hover { text-decoration: underline; }

/* title row: heading, today's date and the one primary at the right, the reach line, five state tabs (B15, C10) */
#view-calendar .cv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--al-gap-card); }
#view-calendar .cv-head .al-title { margin: 0; }
#view-calendar .cv-head-r { display: flex; align-items: center; gap: 16px; }
#view-calendar .cv-date { font-size: var(--al-fs-ui); color: var(--al-text-2); white-space: nowrap; }
#view-calendar .cv-foot-note { margin: 16px 0 0; font-size: var(--al-fs-label); color: var(--al-text-2); }
#view-calendar .alf-tabs { display: flex; gap: 26px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; width: 0; min-width: 100%; margin-bottom: var(--al-gap-card); border-bottom: 1px solid var(--al-divider); }
#view-calendar .alf-tab { height: 40px; padding: 0; flex: none; border-radius: 0; background: none; color: var(--al-text-2); font-weight: 500; }
#view-calendar .alf-tab[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--al-brass); color: var(--al-action); font-weight: 700; }
#view-calendar #cl-body { min-width: 0; }

/* B1 cards and B2 rows */
#view-calendar .al-region { background: var(--al-card); border: 1px solid var(--al-divider); border-radius: var(--al-r-card); box-shadow: var(--al-shadow-card); min-width: 0; margin-bottom: var(--al-gap-card); }
#view-calendar .al-region-hd { display: flex; align-items: baseline; gap: 12px; padding: var(--al-pad-card) var(--al-pad-card) var(--al-gap-title); border: 0; }
#view-calendar .al-region-hd .al-label { font-size: var(--al-fs-card); font-weight: 700; color: var(--al-text); }
#view-calendar .al-region-hd .al-meta { margin-left: auto; font-size: var(--al-fs-label); color: var(--al-text-2); font-variant-numeric: tabular-nums; }
#view-calendar .al-region-body { padding: 0 var(--al-pad-card) var(--al-pad-card); }
#view-calendar .al-flow { display: flex; flex-direction: column; }
#view-calendar .al-flow-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; margin: 0; border: 0; background: none; box-shadow: none; }
#view-calendar .al-flow-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--al-divider); }
#view-calendar .al-flow-row:last-child::after { display: none; }
#view-calendar .al-flow.is-compact .al-flow-row { min-height: 44px; padding: 8px 0; }
#view-calendar .al-flow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#view-calendar .al-flow-title { font-size: var(--al-fs-ui); font-weight: 500; color: var(--al-text); line-height: 1.4; }
#view-calendar .al-flow-meta { font-size: var(--al-fs-label); font-weight: 400; color: var(--al-text-2); line-height: 1.4; }
#view-calendar .al-flow-aside { font-size: var(--al-fs-label); color: var(--al-text-2); white-space: nowrap; text-align: right; flex: none; }
#view-calendar [role="button"].al-flow-row { cursor: pointer; border-radius: var(--al-r-control); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
#view-calendar [role="button"].al-flow-row:hover, #view-calendar .al-flow-row[aria-selected="true"] { background: var(--al-selected); }
#view-calendar .al-flow-row[aria-selected="true"] .al-flow-title { color: var(--al-action); font-weight: 600; }
#view-calendar [role="button"]:focus-visible, #view-calendar .cv-item:focus-visible { outline: none; box-shadow: var(--al-focus); }
#view-calendar .al-absent { font-size: var(--al-fs-ui); color: var(--al-text-2); margin: 0; }
#view-calendar .al-secondary { font-size: var(--al-fs-label); color: var(--al-text-2); margin: 8px 0 0; }
#view-calendar .al-sec-title { font-size: var(--al-fs-card); font-weight: 600; margin: 20px 0 8px; }
#view-calendar .cv-key { flex: none; width: 64px; font-size: var(--al-fs-label); color: var(--al-text-2); font-variant-numeric: tabular-nums; }

/* Plazos (C12): one card, one list, one class open at a time; the count is tab-count style, attention when overdue */
#view-calendar .cv-count { flex: none; margin-left: 12px; font-size: var(--al-fs-label); font-weight: 500; color: var(--al-text-2); font-variant-numeric: tabular-nums; }
#view-calendar .cv-count.is-attention { color: var(--al-attention); }
#view-calendar .cv-chev { flex: none; width: 16px; text-align: center; color: var(--al-text-2); transition: transform var(--al-t-hover, .15s); }
#view-calendar .cv-chev.is-open { transform: rotate(90deg); }
#view-calendar .cv-plz-items { padding: 0 0 8px 16px; }
#view-calendar .cv-plz-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; font-size: var(--al-fs-ui); border-radius: var(--al-r-control); }
#view-calendar .cv-plz-item[role="button"] { cursor: pointer; }
#view-calendar .cv-plz-item[role="button"]:hover { background: var(--al-selected); }
#view-calendar .cv-plz-title { flex: 1; min-width: 0; }

/* Agenda card: controls (B14 chips, buttons, selects), mini-month and the grid */
#view-calendar .cv-agenda { padding: var(--al-pad-card); }
#view-calendar .cv-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
#view-calendar .alf-filters { display: flex; gap: 8px; align-items: center; }
#view-calendar .cv-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#view-calendar .cv-range { font-size: var(--al-fs-ui); font-weight: 500; margin-left: 8px; white-space: nowrap; }
#view-calendar .cv-selects { display: flex; gap: 8px; }
#view-calendar .cv-selects .alf-select, #view-calendar .cv-sel { min-width: 152px; max-width: 220px; }
#view-calendar .alf-button--icon.alf-button--compact { width: 32px; padding: 0; }
#view-calendar .cv-agbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
#view-calendar .cv-mini { display: none; width: 224px; }
@media (min-width: 1440px) { #view-calendar .cv-agbody { grid-template-columns: 224px minmax(0, 1fr); } #view-calendar .cv-mini { display: block; } }
#view-calendar .cv-main { min-width: 0; }
#view-calendar .cv-mini-hd { font-size: var(--al-fs-ui); font-weight: 600; margin-bottom: 8px; text-transform: capitalize; }
#view-calendar .cv-mini-grid { display: grid; grid-template-columns: repeat(7, 32px); }
#view-calendar .cv-mini-dow { height: 24px; font-size: 12px; color: var(--al-text-2); text-align: center; line-height: 24px; }
#view-calendar .cv-mini-day { width: 32px; height: 32px; border: 0; background: none; border-radius: var(--al-r-control); font: 400 var(--al-fs-label)/32px var(--al-font-ui); color: var(--al-text); text-align: center; cursor: pointer; padding: 0; font-variant-numeric: tabular-nums; }
#view-calendar .cv-mini-day:hover { background: var(--al-selected); }
#view-calendar .cv-mini-day.is-out { color: var(--al-text-2); }
#view-calendar .cv-mini-day.is-range { background: var(--al-selected); color: var(--al-action); }
#view-calendar .cv-mini-day.is-today { font-weight: 600; text-decoration: underline; }

/* the hour grid (C11): 56px label column, 48px hour rows, day columns separated by the hairline */
#view-calendar .cv-grid { border-radius: var(--al-r-control); }
#view-calendar .cv-heads, #view-calendar .cv-band, #view-calendar .cv-hours-in { display: grid; grid-template-columns: 56px repeat(var(--cv-cols), minmax(0, 1fr)); }
#view-calendar .cv-band { grid-template-columns: 56px minmax(0, 1fr); border-bottom: 1px solid var(--al-divider); }
#view-calendar .cv-col-head { padding: 8px 6px 6px; text-align: center; font-size: var(--al-fs-label); color: var(--al-text-2); border-left: 1px solid var(--al-divider); border-bottom: 1px solid var(--al-divider); }
#view-calendar .cv-col-head span { font-size: var(--al-fs-ui); color: var(--al-text); font-variant-numeric: tabular-nums; }
#view-calendar .cv-col-head.is-today { font-weight: 600; color: var(--al-text); border-bottom: 2px solid var(--al-text); }
#view-calendar .cv-corner { border-bottom: 1px solid var(--al-divider); }
#view-calendar .cv-band-label { font-size: 12px; color: var(--al-text-2); padding: 8px 6px 0 0; text-align: right; }
#view-calendar .cv-band-grid { display: grid; grid-template-columns: repeat(var(--cv-cols), minmax(0, 1fr)); gap: 4px 0; padding: 4px 0; min-height: 36px; align-content: start;
  background-image: linear-gradient(to right, var(--al-divider) 1px, transparent 1px); background-size: calc(100% / var(--cv-cols)) 100%; }
#view-calendar .cv-band-grid .cv-item { margin: 0 2px; }
#view-calendar .cv-hours { max-height: clamp(336px, calc(100vh - 430px), 720px); overflow-y: auto; scrollbar-width: thin; }
#view-calendar .cv-hours.has-more-below { -webkit-mask-image: linear-gradient(black calc(100% - 56px), transparent); mask-image: linear-gradient(black calc(100% - 56px), transparent); }
#view-calendar .cv-hours-in { padding-bottom: 72px; }
#view-calendar .cv-hour-label { padding: 2px 8px 0 0; font-size: var(--al-fs-label); color: var(--al-text-2); text-align: right; font-variant-numeric: tabular-nums; }
#view-calendar .cv-hcol { position: relative; border-left: 1px solid var(--al-divider);
  background-image: linear-gradient(to bottom, transparent 47px, var(--al-divider) 47px); background-size: 100% 48px; }
#view-calendar .cv-now { position: absolute; left: 0; right: 0; height: 1px; background: var(--al-text); pointer-events: none; z-index: 2; }
#view-calendar .cv-empty { margin: 16px 0 0; font-size: var(--al-fs-ui); color: var(--al-text-2); }

/* an item: an 8px plate on --al-selected, 13px text, the 14px glyph in --al-text-2; derived kinds quieter (C11, C13) */
#view-calendar .cv-item { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; background: var(--al-selected); border-radius: var(--al-r-control); font-size: var(--al-fs-label); line-height: 1.3; color: var(--al-text); cursor: pointer; overflow: hidden; }
#view-calendar .cv-item.is-timed { position: absolute; align-items: flex-start; padding-top: 3px; }
#view-calendar .cv-item.is-cascade { box-shadow: 0 0 0 2px var(--al-raised); }
#view-calendar .cv-more-cascade { position: absolute; right: 6px; z-index: 3; padding: 2px 6px; background: var(--al-raised); border-radius: var(--al-r-control); }
#view-calendar .cv-item.is-derived { color: var(--al-text-2); }
#view-calendar .cv-item.is-selected { color: var(--al-action); font-weight: 600; }
#view-calendar .cv-glyph { flex: none; display: inline-flex; color: var(--al-text-2); }
#view-calendar .cv-when { flex: none; color: var(--al-text-2); font-variant-numeric: tabular-nums; }
#view-calendar .cv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-calendar .cv-state { flex: none; color: var(--al-attention); font-size: 12px; }
#view-calendar .cv-cut { flex: none; color: var(--al-text-2); font-weight: 600; }

/* month view: up to 3 lines per day, then "+N más" (C11) */
#view-calendar .cv-month-scroll { max-height: clamp(336px, calc(100vh - 380px), 760px); overflow-y: auto; padding-bottom: 72px; scrollbar-width: thin; }
#view-calendar .cv-month-heads, #view-calendar .cv-month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#view-calendar .cv-month-heads .cv-col-head { border-left: 0; }
#view-calendar .cv-cell { min-height: 112px; padding: 6px; border-left: 1px solid var(--al-divider); border-bottom: 1px solid var(--al-divider); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view-calendar .cv-cell:first-child { border-left: 0; }
#view-calendar .cv-cell.is-out { color: var(--al-text-2); }
#view-calendar .cv-cell-num { align-self: flex-start; border: 0; background: none; padding: 2px 4px; font: 400 var(--al-fs-ui)/1.2 var(--al-font-ui); color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
#view-calendar .cv-cell.is-today .cv-cell-num { font-weight: 600; border-bottom: 2px solid var(--al-text); }
#view-calendar .cv-item.is-line { min-height: 22px; }
#view-calendar .cv-more { align-self: flex-start; border: 0; background: none; padding: 2px 4px; font: 500 var(--al-fs-label)/1.2 var(--al-font-ui); color: var(--al-action); cursor: pointer; }

/* the selected item: B7 over the grid with the scrim; the grid does not reflow (C13) */
.cv-scrim { position: fixed; top: var(--al-topbar-h); left: 0; right: 0; bottom: 0; z-index: 69; background: var(--ml-scrim, rgba(32,58,77,.32)); }
.cv-panel { position: fixed; top: var(--al-topbar-h); right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 70; display: flex; flex-direction: column; background: var(--al-raised); box-shadow: var(--al-shadow-menu); color: var(--al-text); }
@media (min-width: 1440px) { .cv-panel { width: 480px; } }
.cv-panel-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px 0 24px; }
.cv-panel-title { font-size: var(--al-fs-card); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 88px; }
.cv-panel-when { margin: 0 0 16px; font-size: var(--al-fs-ui); color: var(--al-text-2); }
.cv-kv { display: grid; gap: 16px; margin: 0; }
.cv-kv dt { font-size: var(--al-fs-label); font-weight: 400; color: var(--al-text-2); margin: 0 0 2px; }
.cv-kv dd { font-size: var(--al-fs-ui); margin: 0; color: var(--al-text); }
.cv-panel a { color: var(--al-action); }

/* Capacidad: the rules table (B4) */
#view-calendar .cv-table { width: 100%; border-collapse: collapse; }
#view-calendar .cv-table thead, #view-calendar .cv-table thead tr { background: none; }
#view-calendar .cv-table th { text-align: left; height: 44px; padding: 0 12px; font-size: var(--al-fs-label); font-weight: 600; color: var(--al-text-2); background: none; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--al-divider); white-space: nowrap; }
#view-calendar .cv-table td:last-child { white-space: nowrap; }
#view-calendar .cv-table td { height: 52px; padding: 0 12px; font-size: var(--al-fs-ui); border-bottom: 1px solid var(--al-divider); vertical-align: middle; font-variant-numeric: tabular-nums; }
#view-calendar .cv-table tr:last-child td { border-bottom: 0; }
#view-calendar .cv-table .r { text-align: right; }
#view-calendar .cv-table th:first-child, #view-calendar .cv-table td:first-child { padding-left: 0; }
#view-calendar .cv-table th:last-child, #view-calendar .cv-table td:last-child { padding-right: 0; }

/* Propuestas: the selected row carries the acts; Cobertura door */
#view-calendar .cv-prop-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#view-calendar .cv-door { margin: 16px 0 0; font-size: var(--al-fs-ui); }

/* B10: the error is in the region that failed, with its own retry */
#view-calendar .cv-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: var(--al-fs-ui); border-radius: var(--al-r-control); }

#view-calendar .cv-plz-row { min-height: 64px; }

/* F-32(a), RECIPES C11: a span longer than a month is one plate above the grid, not a bar in every cell */
#view-calendar .cv-range-plates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
#view-calendar .cv-range-plate { display: inline-flex; align-items: center; gap: 12px; border: 0; background: var(--al-selected); border-radius: var(--al-r-control); padding: 8px 12px; font: 500 var(--al-fs-label)/1.3 var(--al-font-ui); color: var(--al-text); cursor: pointer; }
#view-calendar .cv-range-plate .cv-range-span { color: var(--al-text-2); font-weight: 400; }

/* Plan section 4 page 2 (K8): the event dialog sets fields side by side so it does not scroll; all-day is a switch */
.depth-dialog .cv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.depth-dialog .cv-switch { display: flex; align-items: center; gap: 8px; min-height: 40px; font: 500 var(--al-fs-ui, 14px)/1.4 var(--al-font-ui, inherit); color: var(--al-text, inherit); }
.depth-dialog .cv-switch input { width: 18px; height: 18px; margin: 0; }
.cv-respond { margin: 0 0 16px; }
.cv-respond .al-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.depth-dialog .cv-switch span::first-letter { text-transform: uppercase; }

/* recipe 11 A items 2 and 4 (Find a time): one strip per person and room over a day, busy navy, hours outside work shaded, the first gap everyone shares outlined in brass */
.cl-ft-pick { display: flex; flex-direction: column; gap: 6px; }
.cl-ft-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow: auto; }
.cl-ft-strips { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-ft-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; }
.cl-ft-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ft-name small { color: var(--v3-text-2); font-size: 12px; }
.cl-ft-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: 28px; gap: 1px; }
.cl-ft-head .cl-ft-cells { height: auto; font-size: 11px; color: var(--v3-text-2); }
.cl-ft-cells > i { display: block; background: var(--v3-card); box-shadow: inset 0 0 0 1px var(--v3-line); }
.cl-ft-cells > i.is-busy { background: var(--v3-navy); box-shadow: none; }
.cl-ft-cells > i.is-out { background: var(--v3-chip); }
.cl-ft-cells > i.is-free { cursor: pointer; }
.cl-ft-cells > i.is-free:hover { box-shadow: inset 0 0 0 2px var(--v3-navy); }
.cl-ft-cells > i.is-suggest { box-shadow: inset 0 0 0 2px var(--v3-brass); }
.cl-ft-cells > i.is-pick { box-shadow: inset 0 0 0 2px var(--v3-navy); background: color-mix(in srgb, var(--v3-navy) 12%, var(--v3-card)); }
.cl-ft-unread { margin: 0; font-size: 13px; }
.cl-ft-note { margin: 4px 0 0; font-size: 13px; color: var(--v3-text-2); }
/* the invitations dialog: who exactly Exchange will email */
.cl-inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cl-inv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--v3-line); min-height: 40px; align-items: center; }