/* Tela Agenda */

/* ---------- Barra de navegação ---------- */
.ag-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ag-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ag-date {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 10px; margin-left: 4px; border-radius: var(--radius);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
}
.ag-date:hover { background: var(--hover); }
.ag-date .ico { width: 16px; height: 16px; color: var(--ink-3); }
.ag-date-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ag-tools { display: flex; align-items: center; gap: 8px; }

/* ---------- Faixa da semana ---------- */
.weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.wday {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px 10px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .12s ease;
}
.wday:hover { border-color: var(--line-strong); }
.wday span { font-size: 12.5px; color: var(--ink-3); text-transform: capitalize; }
.wday strong { font-size: 19px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.wday em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wday.is-today strong { color: var(--brand-strong); }
.wday.is-closed { background: transparent; }
.wday.is-closed strong { color: var(--ink-3); }
.wday.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.wday.is-selected span, .wday.is-selected em, .wday.is-selected strong { color: #fff; }
.wday.is-selected span, .wday.is-selected em { opacity: .85; }

/* ---------- Filtros e atalhos ---------- */
.ag-quick { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pro-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pro-chips .pchip { height: 34px; font-size: 13.5px; }
.ag-quick-btns { display: flex; gap: 8px; margin-left: auto; }

.ag-empty {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
}
.ag-empty strong { display: block; font-size: 15px; font-weight: 600; }
.ag-empty p { margin: 0; flex: 1; min-width: 200px; font-size: 13.5px; color: var(--ink-3); }
.ag-empty > strong { flex-basis: 100%; margin-bottom: -12px; }

/* ---------- Grade ---------- */
.cal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cal-scroll {
  position: relative; overflow: auto;
  max-height: max(440px, calc(100vh - 340px));
  overscroll-behavior: contain;
}
.cal-head {
  position: sticky; top: 0; z-index: 6;
  display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(150px, 1fr));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cal--week .cal-head, .cal--week .cal-cols { grid-template-columns: 56px repeat(var(--cols), minmax(104px, 1fr)); }
.cal--week .cal-cols { grid-template-columns: repeat(var(--cols), minmax(104px, 1fr)); }
.cal-head .cal-gutter { border-right: 1px solid var(--line); }
.cal-colhead {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 10px;
  border-right: 1px solid var(--line);
  font-size: 13.5px;
}
.cal-colhead:last-child { border-right: 0; }
.cal-colhead span { color: var(--ink-3); text-transform: capitalize; }
.cal-colhead strong { font-size: 15px; font-weight: 600; }
button.cal-colhead:hover { background: var(--hover); }
.cal-colhead.is-today strong {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 14px;
}
.cal-colhead--pro { justify-content: flex-start; }
.cal-colhead--pro em {
  margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 2px 8px; border-radius: 99px; background: #F1F2F5;
}
.pro-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}

.cal-body { display: grid; grid-template-columns: 56px 1fr; position: relative; padding: 10px 0 14px; }
.cal-body > .cal-gutter { position: relative; border-right: 1px solid var(--line); }
.cal-hour {
  position: absolute; right: 10px; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.cal-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(150px, 1fr)); }
.cal-col {
  position: relative;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(to bottom, #E6E8EC 1px, transparent 1px) 0 0 / 100% var(--hour),
    linear-gradient(to bottom, #F2F3F6 1px, transparent 1px) 0 calc(var(--hour) / 2) / 100% var(--hour);
}
.cal-col:last-child { border-right: 0; }
.cal--week .cal-col.is-today { background-color: #FCFBFF; }

.cal-closed {
  position: absolute; left: 0; right: 0; z-index: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(240,241,244,.8) 0 6px, rgba(250,251,252,.8) 6px 12px);
}
.cal-closed span { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

.cal-slot {
  position: absolute; left: 0; right: 0; z-index: 1;
  display: flex; align-items: flex-start; padding: 4px 8px;
  border-radius: 6px;
  opacity: 0; transition: opacity .1s ease, background .1s ease;
}
.cal-slot span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-strong);
}
.cal-slot .ico { width: 13px; height: 13px; }
.cal-slot { cursor: pointer; }
.cal-slot:focus-visible { opacity: 1; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }

/* Com mouse: uma linha acompanha o cursor mostrando o horário exato. */
.cal-hover {
  position: absolute; left: 0; right: 0; z-index: 1; height: 0; pointer-events: none;
  border-top: 1.5px solid var(--brand);
}
.cal-hover > span {
  position: absolute; left: 6px; top: -11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px 0 6px; border-radius: 6px;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(74, 59, 192, .3);
}
.cal-hover .ico { width: 12px; height: 12px; }
/* No celular não existe "passar o mouse": o espaço livre já mostra um "+" clarinho. */
@media (hover: none) {
  .cal-slot { opacity: 1; }
  .cal-slot span { color: var(--ink-3); opacity: .45; font-weight: 500; }
  .cal-slot.is-past span, .cal-slot.is-off span { opacity: 0; }
  .cal-slot:active { background: var(--brand-soft); }
  .cal-slot:active span { color: var(--brand-strong); opacity: 1; }
}

/* Horários na grade */
.ev {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 8px; overflow: hidden; text-align: left;
  border-radius: 8px; border-left: 3px solid;
  font-size: 12.5px; line-height: 1.3;
  transition: box-shadow .12s ease, transform .12s ease;
}
.ev:hover { box-shadow: 0 4px 12px -4px rgba(17,19,24,.18); z-index: 4; }
.ev-line { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; white-space: nowrap; }
.ev-line strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ev-time { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .75; }
.ev-name { font-size: 13.5px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-sub { max-width: 100%; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.ev-badge { display: inline-flex; margin-left: auto; color: #15803D; }
.ev-badge .ico { width: 13px; height: 13px; }

.ev--booked { background: #EFECFE; border-color: var(--brand); color: #2B2272; }
.ev--due    { background: #F6F5FC; border-color: #A99FEA; color: #3D3480; }
.ev--ok     { background: #EAF6EE; border-color: #22A355; color: #14532D; }
.ev--missed { background: #FFF3E3; border-color: #E58A1F; color: #7C3D06; }
.ev--missed .ev-name, .ev--missed .ev-line strong { text-decoration: line-through; text-decoration-color: rgba(124,61,6,.45); }
.ev--block {
  background: repeating-linear-gradient(135deg, #F0F1F4 0 6px, #F7F8FA 6px 12px);
  border-color: #BABEC6; color: var(--ink-2);
}
.ev--pro { border-left-color: var(--pro); }

.cal-now { position: absolute; left: 0; right: 0; z-index: 1; height: 2px; background: var(--brand); pointer-events: none; }
.cal-now::before {
  content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px #fff;
}

/* ---------- Arrastar, esticar e selecionar ---------- */
.cal { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ev { cursor: grab; touch-action: manipulation; }
.ev:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ev.is-dragging { opacity: .3; }
body.is-dragging-ev, body.is-dragging-ev * { cursor: grabbing !important; }
body.is-resizing-ev, body.is-resizing-ev * { cursor: ns-resize !important; }
body.is-selecting .cal-slot { opacity: 0 !important; }

.ev-resize { position: absolute; left: 0; right: 0; height: 9px; z-index: 3; cursor: ns-resize; }
.ev-resize--top { top: -3px; }
.ev-resize--bottom { bottom: -3px; }
.ev-resize::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 3px; margin: -1.5px 0 0 -11px;
  border-radius: 99px; background: currentColor; opacity: 0; transition: opacity .12s ease;
}
.ev:hover .ev-resize::after { opacity: .35; }
.ev--ok .ev-resize, .ev--missed .ev-resize { display: none; }

.ev-more {
  position: absolute; top: 3px; right: 3px; z-index: 4;
  display: grid; place-items: center; width: 26px; height: 22px; border-radius: 6px;
  background: rgba(255, 255, 255, .9); color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(17, 19, 24, .12);
  opacity: 0; transition: opacity .12s ease;
}
.ev-more .ico { width: 16px; height: 16px; }
.ev:hover .ev-more, .ev:focus-within .ev-more, .ev-more:focus-visible { opacity: 1; }
.ev-more:hover { background: #fff; color: var(--ink); }

.ev-preview {
  position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-start; padding: 4px 6px;
  border: 2px dashed var(--brand); border-radius: 8px;
  background: rgba(91, 75, 214, .08);
}
.ev-preview span {
  padding: 2px 8px; border-radius: 6px;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(74, 59, 192, .3);
}
.ev-preview--select { border-style: solid; border-color: var(--brand-line); background: var(--brand-soft); }

.cal-tip { display: flex; align-items: center; gap: 6px; margin: 10px 4px 0; font-size: 12.5px; color: var(--ink-3); }
.cal-tip .ico { width: 14px; height: 14px; flex: none; }
.cal-tip--touch { display: none; }
@media (hover: none) {
  .cal-tip--mouse { display: none; }
  .cal-tip--touch { display: flex; }
  .ev-more { display: none; }
}

/* ---------- Semana no celular: lista por dia ---------- */
.wlist { display: flex; flex-direction: column; gap: 10px; }
.wl-day { overflow: hidden; }
.wl-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; text-align: left; }
.wl-head strong { font-size: 15.5px; font-weight: 600; }
.wl-head span { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.wl-head .ico { width: 16px; height: 16px; color: var(--ink-3); }
.wl-day.is-today .wl-head strong { color: var(--brand-strong); }
.wl-items { list-style: none; margin: 0; padding: 0; }
.wl-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 58px; padding: 8px 16px; text-align: left;
  border-top: 1px solid var(--line);
}
.wl-item:active { background: var(--hover); }
.wl-time { width: 44px; flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.wl-info strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-info span { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .ag-quick-btns { margin-left: 0; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .ag-toolbar { margin-bottom: 12px; gap: 8px; }
  .ag-nav { gap: 4px; }
  .ag-date { font-size: 15px; padding: 0 6px; margin-left: 2px; }
  .ag-nav .btn--sm { padding: 0 10px; }
  .seg button { padding: 0 12px; }

  .weekstrip { gap: 4px; margin-bottom: 12px; }
  .wday { padding: 7px 0 8px; border-radius: 12px; }
  .wday strong { font-size: 17px; }
  .wday em { display: none; }
  .wday.has-appts::after {
    content: ""; width: 5px; height: 5px; border-radius: 50%; margin-top: 3px;
    background: var(--brand);
  }
  .wday.is-selected.has-appts::after { background: #fff; }
  .wday:not(.has-appts)::after { content: ""; height: 5px; margin-top: 3px; }

  .ag-quick { gap: 8px; }
  .pro-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .pro-chips::-webkit-scrollbar { display: none; }
  .ag-quick-btns { width: 100%; }
  .ag-quick-btns .btn { flex: 1; padding: 0 8px; font-size: 13px; }

  .cal-scroll { max-height: max(380px, calc(100dvh - 330px)); }
  .cal-body > .cal-gutter, .cal-head .cal-gutter { width: 48px; }
  .cal-body, .cal-head { grid-template-columns: 48px 1fr; }
  .cal-head { grid-template-columns: 48px repeat(var(--cols), minmax(140px, 1fr)); }
  .cal-cols { grid-template-columns: repeat(var(--cols), minmax(140px, 1fr)); }
  .cal-hour { right: 6px; font-size: 11px; }
  .ev { padding: 4px 7px; }
}