/* Agenda dos atendimentos do CRM (mês, semana, dia e lista), sincronizada com Google Agenda.
   Mesma linguagem leve da Visão geral: cartões claros, bordas suaves, cantos de 18px. */
.agenda-page { --ag-card: #FBF8F4; --ag-line: rgba(var(--border-rgb), .55); --ag-line-soft: rgba(var(--border-rgb), .35); --agenda-hora: 64px; max-width: 1600px; }

/* Barra superior */
.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; margin-bottom: 16px; }
.agenda-title-row { display: flex; align-items: center; gap: 6px; }
.agenda-title-row h2 { margin: 0 0 0 8px; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 28px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.agenda-nav-btn { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--ag-card); color: var(--primary); line-height: 0; cursor: pointer; transition: background .2s, border-color .2s; }
.agenda-nav-btn svg { display: block; }
.agenda-nav-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: none; }
.agenda-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--text-soft); font-size: 11px; }
.agenda-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); }
.agenda-status.is-online i { background: var(--success); box-shadow: 0 0 0 3px rgba(73, 126, 91, .12); }
.agenda-status.is-warning i { background: var(--warning); }
.agenda-status.is-loading i { animation: agenda-pulse 1s infinite alternate; }
@keyframes agenda-pulse { to { opacity: .25; } }
.agenda-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.agenda-actions select { min-width: 180px; padding: 9px 14px; border: 1px solid var(--ag-line); border-radius: 999px; background: var(--ag-card); color: var(--ink); font-family: inherit; font-size: 12px; }
.agenda-actions .btn-secondary, .agenda-actions .btn-primary { border-radius: 999px; }
.agenda-actions button:disabled { opacity: .6; cursor: wait; }
.agenda-google-link { display: inline-flex; align-items: center; padding: 10px 18px; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; }

/* Seletor de visualização */
.agenda-visoes { display: inline-flex; padding: 4px; border: 1px solid var(--ag-line); border-radius: 999px; background: var(--ag-card); }
.agenda-visoes button { padding: 7px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.agenda-visoes button:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.agenda-visoes button.is-active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .22); }

/* Resumo e legenda */
.agenda-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; color: var(--text-soft); font-size: 12px; }
.agenda-summary strong { color: var(--ink); }
.agenda-legenda { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11px; }
.agenda-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.agenda-legenda-sep { padding-left: 14px; border-left: 1px solid var(--ag-line); }
.agenda-cor { width: 10px; height: 10px; border-radius: 3px; }
.agenda-cor.situacao-reservado { background: #D6AA3C; }
.agenda-cor.situacao-pago { background: #039BE5; }
.agenda-cor.situacao-confirmado { background: var(--success); }

/* Layout */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.agenda-layout.is-cheio { grid-template-columns: minmax(0, 1fr); }
.agenda-calendar, .agenda-upcoming { border: 1px solid var(--ag-line); border-radius: 18px; background: var(--ag-card); box-shadow: 0 1px 2px rgba(46, 28, 32, .03), 0 10px 28px rgba(46, 28, 32, .035); overflow: hidden; }

/* ── Mês ── */
.agenda-weekdays, .agenda-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-weekdays { border-bottom: 1px solid var(--ag-line); }
.agenda-weekdays span { padding: 12px 9px; color: #9A868A; font-size: 11px; font-weight: 600; text-align: center; }
.agenda-day { min-width: 0; min-height: 124px; padding: 8px; border-right: 1px solid var(--ag-line-soft); border-bottom: 1px solid var(--ag-line-soft); }
.agenda-day:nth-child(7n) { border-right: 0; }
.agenda-day:nth-last-child(-n+7) { border-bottom: 0; }
.agenda-day.is-outside { background: rgba(232, 224, 210, .35); }
.agenda-day.is-outside .agenda-day-number button, .agenda-day.is-outside .agenda-day-events { opacity: .5; }
.agenda-day-number { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.agenda-day-number button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); font: inherit; font-size: 12px; cursor: pointer; transition: background .2s; }
.agenda-day-number button:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.agenda-day-number em { padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--primary); font-size: 10px; font-style: normal; font-weight: 600; }
.agenda-day.is-today .agenda-day-number button { background: var(--primary); color: #fff; font-weight: 600; }
.agenda-day-events { display: grid; gap: 4px; margin-top: 4px; }
.agenda-day-more { padding: 2px 4px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 10px; font-weight: 500; text-align: left; cursor: pointer; }
.agenda-day-more:hover { text-decoration: underline; transform: none; }
.agenda-event { position: relative; width: 100%; min-width: 0; padding: 5px 8px; display: flex; gap: 6px; border: 0; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--ink); font-family: inherit; font-size: 11px; text-align: left; cursor: pointer; transition: filter .15s; }
.agenda-event:hover { filter: brightness(.97); transform: none; }
.agenda-event strong { flex-shrink: 0; color: var(--ink); font-weight: 600; }
.agenda-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-event.is-error::after, .agenda-event.is-pending::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.agenda-event.is-error::after { background: var(--danger); }

/* ── Semana e dia: grade de horários ── */
.agenda-grade-cabecalho, .agenda-grade-corpo { display: grid; grid-template-columns: 58px repeat(var(--agenda-colunas), minmax(0, 1fr)); }
.agenda-grade-cabecalho { border-bottom: 1px solid var(--ag-line); overflow-y: hidden; scrollbar-gutter: stable; }
.agenda-grade-dia { position: relative; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; border-left: 1px solid var(--ag-line-soft); background: transparent; color: var(--text-soft); font: inherit; cursor: pointer; transition: background .2s; }
.agenda-grade-dia:hover:not(:disabled) { background: rgba(235, 211, 203, .3); transform: none; }
.agenda-grade-dia:disabled { cursor: default; opacity: 1; }
.agenda-grade-dia span { font-size: 11px; font-weight: 600; }
.agenda-grade-dia strong { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); font-size: 18px; font-weight: 600; }
.agenda-grade-dia.is-today span { color: var(--primary); }
.agenda-grade-dia.is-today strong { background: var(--primary); color: #fff; }
.agenda-grade-dia em { position: absolute; top: 10px; right: 10px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--primary); font-size: 10px; font-style: normal; font-weight: 600; }

.agenda-grade-corpo { scrollbar-gutter: stable; position: relative; max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; }
.agenda-grade-horas { position: relative; height: calc(var(--agenda-linhas) * var(--agenda-hora)); }
.agenda-grade-horas span { display: block; height: var(--agenda-hora); padding: 0 10px 0 0; color: #9A868A; font-size: 10px; text-align: right; transform: translateY(-6px); }
.agenda-grade-horas span:first-child { visibility: hidden; }
.agenda-grade-coluna {
  position: relative;
  height: calc(var(--agenda-linhas) * var(--agenda-hora));
  border-left: 1px solid var(--ag-line-soft);
  background-image:
    linear-gradient(to bottom, var(--ag-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(var(--border-rgb), .18) calc(50% - .5px), rgba(var(--border-rgb), .18) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 100% var(--agenda-hora), 100% var(--agenda-hora);
}
.agenda-grade-coluna.is-today { background-color: rgba(235, 211, 203, .16); }
.agenda-grade-vazio { position: absolute; top: 40px; left: 58px; right: 0; color: #9A868A; font-size: 13px; text-align: center; pointer-events: none; }

.agenda-agora { position: absolute; left: 0; right: 0; z-index: 3; height: 0; border-top: 2px solid var(--danger); pointer-events: none; }
.agenda-agora::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

.agenda-bloco {
  position: absolute;
  z-index: 2;
  min-height: 22px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--primary-soft);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(46, 28, 32, .06);
  transition: box-shadow .2s, filter .2s;
}
.agenda-bloco:hover { z-index: 4; box-shadow: 0 6px 18px rgba(46, 28, 32, .14); transform: none; }
.agenda-bloco strong { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.agenda-bloco small { overflow: hidden; color: var(--text-soft); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.agenda-bloco-hora { padding-right: 10px; overflow: hidden; color: var(--text-soft); font-size: 10.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.agenda-bloco.is-curto { padding-top: 3px; padding-bottom: 3px; flex-direction: row; align-items: center; gap: 6px; }
.agenda-bloco.is-curto strong { min-width: 0; }
.agenda-bloco.is-curto small { display: none; }
.agenda-bloco.is-error::after, .agenda-bloco.is-pending::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.agenda-bloco.is-error::after { background: var(--danger); }
.agenda-grade.is-dia { --agenda-hora: 84px; }
.agenda-grade.is-dia .agenda-bloco { padding: 8px 12px; }
.agenda-grade.is-dia .agenda-bloco strong { font-size: 13.5px; }

/* ── Lista ── */
.agenda-lista { padding: 6px 0; }
.agenda-lista-dia + .agenda-lista-dia { border-top: 1px solid var(--ag-line-soft); }
.agenda-lista-titulo { width: 100%; padding: 14px 18px 6px; display: flex; align-items: baseline; gap: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.agenda-lista-titulo:hover { color: var(--primary); transform: none; }
.agenda-lista-titulo em { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-style: normal; }
.agenda-lista-titulo small { margin-left: auto; color: #9A868A; font-size: 11px; font-weight: 400; }
.agenda-lista .agenda-upcoming-item { padding: 10px 18px; border-bottom: 0; }
.agenda-lista .agenda-upcoming-time strong { display: none; }
.agenda-lista .agenda-upcoming-time small { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.agenda-lista-vazia { padding: 40px 16px; }

/* Próximos atendimentos (lateral) e itens de lista */
.agenda-upcoming-head { padding: 18px 18px 8px; }
.agenda-upcoming-head strong, .agenda-upcoming-head small { display: block; }
.agenda-upcoming-head strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.agenda-upcoming-head small { margin-top: 3px; color: #9A868A; font-size: 11px; }
.agenda-upcoming-list { max-height: 610px; padding: 0 8px 8px; overflow-y: auto; }
.agenda-upcoming-item { width: 100%; padding: 10px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 10px; align-items: center; gap: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.agenda-upcoming-item:hover { background: rgba(235, 211, 203, .35); transform: none; }
.agenda-upcoming-time strong, .agenda-upcoming-time small, .agenda-upcoming-copy strong, .agenda-upcoming-copy small { display: block; }
.agenda-upcoming-time strong { color: var(--primary); font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.agenda-upcoming-time small { margin-top: 2px; color: var(--text-soft); font-size: 11px; }
.agenda-upcoming-copy { min-width: 0; }
.agenda-upcoming-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agenda-upcoming-copy small { margin-top: 3px; overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-sync-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); }
.agenda-sync-dot.is-synced { background: var(--success); }
.agenda-sync-dot.is-pending { background: var(--warning); }
.agenda-sync-dot.is-error { background: var(--danger); }

/* Situação do agendamento (mesmas cores do evento na Google Agenda) */
.agenda-event.situacao-reservado, .agenda-bloco.situacao-reservado { border-left-color: #D6AA3C; background: #F7EBCB; }
.agenda-event.situacao-pago, .agenda-bloco.situacao-pago { border-left-color: #039BE5; background: #DDEFF8; }
.agenda-event.situacao-confirmado, .agenda-bloco.situacao-confirmado { border-left-color: var(--success); background: #E3EADC; }
.agenda-situacao { margin-right: 4px; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: .03em; }
.agenda-situacao.situacao-reservado { background: rgba(214, 170, 60, .25); color: #7a5a10; }
.agenda-situacao.situacao-pago { background: rgba(3, 155, 229, .16); color: #0b5f8a; }
.agenda-situacao.situacao-confirmado { background: rgba(92, 122, 78, .2); color: var(--success); }

@media (max-width: 1100px) {
  .agenda-layout { grid-template-columns: 1fr; }
  .agenda-upcoming { order: -1; }
  .agenda-upcoming-list { max-height: 260px; }
  .agenda-legenda { margin-left: 0; }
}
@media (max-width: 760px) {
  .agenda-page { --agenda-hora: 56px; }
  .agenda-toolbar { flex-direction: column; }
  .agenda-actions { justify-content: flex-start; }
  .agenda-title-row h2 { font-size: 23px; }
  .agenda-calendar { overflow-x: auto; }
  .agenda-weekdays, .agenda-grid { min-width: 760px; }
  .agenda-grade.is-semana .agenda-grade-cabecalho, .agenda-grade.is-semana .agenda-grade-corpo { min-width: 760px; }
  .agenda-legenda-sep { padding-left: 0; border-left: 0; }
}

/* ── Eventos do Google (marcados direto nas agendas da Daricha e das salas) ──
   Fundo branco com a faixa na cor da agenda: não se confundem com os
   agendamentos do CRM, que são coloridos pela situação. Abrem no Google. */
.agenda-bloco.is-google { border-left-color: var(--agenda-cor); background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .7); text-decoration: none; }
.agenda-bloco.is-google strong { color: var(--ink); }
.agenda-bloco.is-google:hover { box-shadow: inset 0 0 0 1px var(--agenda-cor), 0 6px 18px rgba(46, 28, 32, .12); }
.agenda-event.is-google { border-left-color: var(--agenda-cor); background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .6); text-decoration: none; }
.agenda-event.is-google strong { color: var(--text-soft); font-weight: 500; }
a.agenda-upcoming-item { text-decoration: none; }
.agenda-upcoming-item.is-google .agenda-upcoming-copy strong { font-weight: 500; }
.agenda-google-tag { margin-right: 4px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--agenda-cor) 14%, #fff); color: var(--agenda-cor); font-size: 9.5px; font-weight: 600; }
.agenda-google-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--agenda-cor); }
.agenda-dia-inteiro { display: block; max-width: 100%; margin-top: 4px; padding: 2px 7px; overflow: hidden; border-left: 3px solid var(--agenda-cor); border-radius: 4px; background: #fff; color: var(--ink); font-size: 10.5px; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .6); }
.agenda-grade-dia { justify-content: flex-start; }

.agenda-agendas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.agenda-agenda-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ag-line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; transition: opacity .2s, background .2s; }
.agenda-agenda-btn i { width: 9px; height: 9px; border-radius: 50%; background: var(--agenda-cor); }
.agenda-agenda-btn.is-off { opacity: .45; background: transparent; }
.agenda-agenda-btn.is-off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--agenda-cor); }
.agenda-agenda-btn:hover { transform: none; }
.agenda-google-erro { color: var(--warning); }