/* Calendário de agenda — vista diária/semanal com grelha de tempo. */
.cal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.cal-head {
  display: flex; align-items: center; gap: 12px; padding: clamp(12px, 1vw, 16px) clamp(14px, 1.2vw, 18px);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.cal-title { font-size: clamp(15px, 1.1vw, 17px); font-weight: 800; }
.cal-range { color: var(--text-muted); font-size: 13px; }
.cal-nav { display: flex; gap: 4px; }
.cal-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.cal-seg button {
  border: none; background: transparent; padding: 6px 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.cal-seg button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.cal-body { display: grid; }
/* coluna de horas + N colunas de dias */
.cal-day-col, .cal-hour-col { position: relative; }

.cal-grid {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols, 7), 1fr);
}
.cal-corner { border-right: 1px solid var(--border); background: var(--surface-2); }
.cal-dow {
  padding: 10px 8px; text-align: center; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.cal-dow .dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); font-weight: 600; }
.cal-dow .dnum { font-size: 15px; font-weight: 700; margin-top: 2px; }
.cal-dow.today .dnum {
  background: var(--primary); color: var(--primary-contrast);
  width: 26px; height: 26px; line-height: 26px; border-radius: 50%; display: inline-block;
}
.cal-dow.weekend { background: var(--surface-2); }

.cal-hour-label {
  height: var(--slot-h, 48px); padding: 2px 6px; text-align: right;
  font-size: 10.5px; color: var(--text-soft); border-right: 1px solid var(--border);
  border-top: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--mono);
}
.cal-day-col { border-right: 1px solid var(--border); position: relative; }
.cal-day-col:last-child { border-right: none; }
.cal-slot {
  height: var(--slot-h, 48px); border-top: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s var(--ease);
}
.cal-slot:hover { background: var(--primary-soft); }
.cal-slot.now-line { border-top-color: var(--danger); }

.cal-now {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--danger); z-index: 5; pointer-events: none;
}
.cal-now::before {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
}

/* Eventos / marcações */
.cal-event {
  position: absolute; left: 3px; right: 3px; z-index: 4;
  border-radius: 6px; padding: 5px 8px; font-size: 11.5px; line-height: 1.3;
  background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 36%, var(--border));
  color: var(--text); cursor: pointer; overflow: hidden;
  transition: box-shadow 0.12s var(--ease), transform 0.05s var(--ease);
  box-shadow: var(--shadow-sm);
}
.cal-event:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.cal-event .ev-time { font-family: var(--mono); font-weight: 700; font-size: 10.5px; color: var(--text-muted); }
.cal-event .ev-title { font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cal-event .ev-sub { font-size: 10.5px; color: var(--text-soft); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.cal-event.s-pending { background: var(--warn-soft); border-left-color: var(--status-pending); }
.cal-event.s-confirmed { background: var(--info-soft); border-left-color: var(--status-confirmed); }
.cal-event.s-completed { background: var(--ok-soft); border-left-color: var(--status-completed); }
.cal-event.s-cancelled { background: var(--surface-2); border-left-color: var(--status-cancelled); opacity: 0.7; text-decoration: line-through; }
.cal-event.s-no_show { background: var(--danger-soft); border-left-color: var(--status-no_show); }

.cal-event.selected { outline: 2px solid var(--primary); outline-offset: 1px; }

.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; color: var(--text-muted); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 720px) {
  .cal-grid { grid-template-columns: 44px repeat(var(--cols, 7), minmax(120px, 1fr)); }
  .cal-body { overflow-x: auto; }
}