/* ==========================================================================
   Calendar — mirrors reference 2 (left 3/12 panel + right 9/12 grid)
   ========================================================================== */
.cal-layout { display: grid; grid-template-columns: minmax(250px, 3fr) minmax(0, 9fr); gap: var(--gutter); align-items: start; }
.cal-side .card-body { display: flex; flex-direction: column; gap: 0; }
.cal-side .btn-block { height: 38px; }
.cal-side-hint { color: var(--text-muted); font-size: 12.5px; margin: 14px 0 12px; }

/* Draggable-looking legend items (ref: coloured bars) */
.cal-legend { display: flex; flex-direction: column; gap: 8px; }
.cal-legend button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  color: #fff; font-size: 12.5px; font-weight: 500; text-align: left; transition: opacity var(--t-fast), filter var(--t-fast);
}
.cal-legend button .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }
.cal-legend button .cnt { margin-left: auto; font-size: 11px; background: rgba(255,255,255,.25); border-radius: 8px; padding: 0 7px; line-height: 17px; }
.cal-legend button.off { opacity: .35; filter: grayscale(.4); }
.cal-legend button:hover { filter: brightness(.96); }
.cal-cats { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.cal-cats .check { font-size: 12.5px; }
.cal-res-list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow: auto; }
.cal-res-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border); }
.cal-res-list li:last-child { border-bottom: 0; }
.cal-res-list .rs-state { margin-left: auto; }
.cal-illus { margin: 18px auto 0; width: 100%; max-width: 230px; }

/* Toolbar (prev/next + Hoy | Title | Mes Semana Día Lista) */
.cal-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 18px; }
.cal-toolbar .tb-left { display: flex; gap: 6px; align-items: center; }
.cal-toolbar .tb-right { display: flex; justify-content: flex-end; }
.cal-toolbar h2 { margin: 0; font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; text-align: center; color: var(--heading); white-space: nowrap; }
.cal-toolbar .btn-nav { width: 34px; height: 34px; padding: 0; background: var(--primary); color: #fff; }
.cal-toolbar .btn-nav:hover { background: var(--primary-hover); color: #fff; }
.cal-toolbar .btn-today { height: 34px; background: rgba(85, 110, 230, .65); color: #fff; }
.cal-toolbar .btn-today:hover { background: var(--primary); color: #fff; }
.cal-toolbar .btn-today.is-today { opacity: .6; }
.cal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-filters .form-select { width: auto; min-width: 150px; height: 32px; font-size: 12.5px; }

/* Month grid */
.cal-month { border: 1px solid var(--border-strong); border-radius: 0; }
.cal-month .cm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border-strong); }
.cal-month .cm-head div { padding: 8px 6px; text-align: center; font-weight: 600; font-size: 12.5px; color: var(--heading); }
.cal-month .cm-head div + div { border-left: 1px solid var(--border-strong); }
.cal-month .cm-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(112px, auto); }
.cm-cell { position: relative; padding: 4px 4px 6px; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); min-width: 0; cursor: pointer; transition: background var(--t-fast); }
.cm-cell:nth-child(7n) { border-right: 0; }
.cm-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cm-cell:hover { background: #fbfbfe; }
.cm-cell .cm-num { display: block; text-align: right; font-size: 12.5px; color: var(--heading); padding: 2px 4px 4px; }
.cm-cell.out .cm-num { color: #c3c8d4; }
.cm-cell.out { background: #fdfdfe; }
.cm-cell.today { background: rgba(80, 165, 241, .12); }
.cm-cell.today .cm-num { color: var(--primary); font-weight: 600; }
.cm-cell.closed { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(166, 176, 207, .08) 6px 12px); }
.cm-cell.drop-over { background: var(--primary-softer); box-shadow: inset 0 0 0 2px var(--primary); }
.cm-more { display: block; width: 100%; border: 0; background: none; padding: 1px 4px; text-align: left; font-size: 11.5px; color: var(--primary); font-weight: 500; }
.cm-more:hover { text-decoration: underline; }

/* Event chip (ref: "10:30a Meeting" solid blocks) */
.ev {
  display: flex; align-items: center; gap: 4px; width: 100%; margin-bottom: 2px; padding: 2px 6px; border: 0; border-radius: var(--radius-sm);
  font-size: 11.5px; line-height: 1.45; color: #fff; background: var(--st-confirmed); text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.ev b { font-weight: 600; flex: none; }
.ev span { overflow: hidden; text-overflow: ellipsis; }
.ev:hover { filter: brightness(.95); }
.ev[draggable="true"] { cursor: grab; }
.ev.dragging { opacity: .4; }
.ev.st-confirmed, .tg-ev.st-confirmed { background: var(--st-confirmed); color: #fff; }
.ev.st-pending, .tg-ev.st-pending { background: var(--st-pending); color: #fff; }
.ev.st-completed, .tg-ev.st-completed { background: var(--st-completed); color: #fff; }
.ev.st-cancelled, .tg-ev.st-cancelled { background: var(--st-cancelled); color: #fff; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.6); }
.ev.st-in_progress, .tg-ev.st-in_progress { background: var(--st-in_progress); color: #fff; }
.ev.st-no_show, .tg-ev.st-no_show { background: var(--st-no_show); color: #fff; }
.ev.st-blocked, .tg-ev.st-blocked { background: repeating-linear-gradient(135deg, #b4bcd6 0 6px, #a6b0cf 6px 12px); color: #fff; }
.ev.st-group, .tg-ev.st-group { background: #fff; color: var(--info); box-shadow: inset 0 0 0 1.5px var(--info); }
.ev .ev-ic { flex: none; }

/* Time grid (week / day) */
.tg-wrap { border: 1px solid var(--border-strong); overflow: auto; max-height: 720px; position: relative; }
.tg { display: grid; min-width: 640px; position: relative; }
.tg-head { position: sticky; top: 0; z-index: 3; background: #fff; display: grid; border-bottom: 1px solid var(--border-strong); }
.tg-head > div { padding: 8px 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--heading); border-left: 1px solid var(--border-strong); min-width: 0; }
.tg-head > div:first-child { border-left: 0; }
.tg-head .sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-head .is-today { color: var(--primary); }
.tg-body { display: grid; position: relative; }
.tg-times { position: relative; }
.tg-times div { position: absolute; right: 6px; font-size: 11px; color: var(--text-muted); transform: translateY(-50%); white-space: nowrap; }
.tg-col { position: relative; border-left: 1px solid var(--border-strong); cursor: crosshair; }
.tg-col.today { background: rgba(80, 165, 241, .06); }
.tg-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f1f2f6; pointer-events: none; }
.tg-line.half { border-top-style: dashed; border-top-color: #f6f7fa; }
.tg-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(166, 176, 207, .10) 0 6px, rgba(166, 176, 207, .20) 6px 12px); pointer-events: none; }
.tg-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 2; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.tg-ev { position: absolute; z-index: 1; border-radius: var(--radius-sm); padding: 3px 6px; font-size: 11.5px; line-height: 1.35; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,.7); text-align: left; }
.tg-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.tg-ev:hover { z-index: 4; box-shadow: var(--shadow-drop); }
.tg-ev[draggable="true"] { cursor: grab; }
.tg-col.drop-over { background: var(--primary-softer); }
.tg-ghost { position: absolute; left: 2px; right: 2px; background: var(--primary-soft); border: 1px dashed var(--primary); border-radius: var(--radius-sm); pointer-events: none; z-index: 2; font-size: 11px; color: var(--primary); padding: 2px 6px; }

/* List view */
.cal-list-day { margin-bottom: 14px; }
.cal-list-day h6 { margin: 0; padding: 8px 12px; background: var(--soft-bg); font-size: 12.5px; display: flex; justify-content: space-between; }
.cal-list-row { display: grid; grid-template-columns: 120px 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cal-list-row:hover { background: var(--hover-bg); }
.cal-list-row .dotc { width: 10px; height: 10px; border-radius: 50%; }
.cal-list-row .lr-main { min-width: 0; }
.cal-list-row .lr-main b { color: var(--heading); font-weight: 500; }

/* Day agenda for mobile month */
.cm-dots { display: none; gap: 2px; flex-wrap: wrap; justify-content: center; padding-top: 2px; }
.cm-dots i { width: 6px; height: 6px; border-radius: 50%; }