/* ===================================================================
   CUIDE.CSS — camada visual das páginas clínicas (v2, refinada)
   ===================================================================
   MUDANÇA DE ABORDAGEM em relação à v1: em vez de recriar filtros, abas,
   botões de visualização e cartões de métrica com um prefixo `.cuide-`
   próprio, esta versão REUTILIZA os componentes que o style.css do
   MiContas já tem prontos — os mesmos que aparecem no Início e em
   Projetos: .filters-wrap, .filter-sel, .view-toggle, .month-nav,
   .kpi-grid/.kpi-card, .agenda-grid/.agenda-day, .tabs/.tab-btn, .card,
   .badge, .empty-state, .btn.

   Resultado: a Agenda do Cuide fica com a MESMA fonte, o MESMO raio de
   borda, a MESMA sombra e o MESMO hover que o resto do MiContas —
   porque literalmente são as mesmas classes, não uma cópia visual.

   O que sobra aqui é só o que não tem equivalente nativo: a grade de
   horários (tabela hora × dia, para as visões Semana/Dia — o
   .agenda-day/.agenda-grid do MiContas é só para visão de mês) e o chip
   de sessão dentro dela.

   REGRA DE OURO MANTIDA: todo seletor começa com .cuide-page. Nada aqui
   alcança o MiContas — mas agora a folha é bem menor, porque a maior
   parte do visual vem de classes que já existiam.

   Carregue depois do style.css.
   =================================================================== */

.cuide-page:not(.page) { padding: 0; }

/* ── Cabeçalho de página (título + descrição + ação opcional) ──────── */
/* Nunca tinha sido estilizado — cada página vinha com o <h2>/<p> em CSS
   padrão do navegador em vez das classes do resto do MiContas. */
.cuide-page .cuide-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.cuide-page .cuide-head h2 {
  font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0 0 2px; letter-spacing: -0.02em;
}
.cuide-page .cuide-head p {
  font-size: 0.72rem; color: var(--text3); margin: 0;
}

/* ── Grade de horários (Semana / Dia) ─────────────────────────────── */
/* Sem equivalente nativo — o .agenda-grid do MiContas é só para o
   mini-calendário de mês. Radio e sombra copiados de .card para que a
   grade pareça um cartão do mesmo sistema, não um componente à parte. */
.cuide-page .cuide-grid-wrap {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - 300px);
  box-shadow: var(--shadow-md);
}
.cuide-page table.cuide-grid { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.cuide-page table.cuide-grid th {
  padding: 12px 10px; font-size: 0.72rem; font-weight: 700; color: var(--text2);
  background: var(--surface2); border-bottom: 1px solid var(--border);
  text-align: center; position: sticky; top: 0; z-index: 2;
  letter-spacing: 0.03em;
}
.cuide-page table.cuide-grid th.hoje { color: var(--accent); font-weight: 800; }
.cuide-page table.cuide-grid td {
  padding: 4px 6px; height: 48px; min-width: 120px;
  vertical-align: top; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.cuide-page table.cuide-grid td.hora {
  min-width: 64px; width: 64px; text-align: center; vertical-align: middle;
  font-weight: 700; font-size: 0.72rem; color: var(--text2);
  background: var(--surface2); position: sticky; left: 0; z-index: 1;
}
.cuide-page table.cuide-grid td.vazio { cursor: pointer; transition: background .15s ease; }
.cuide-page table.cuide-grid td.vazio:hover { background: var(--surface2); }

/* Chip de sessão dentro da grade com bordas suaves e elevação */
.cuide-page .cuide-sessao {
  border-left: 3px solid var(--accent);
  padding: 3px 8px; border-radius: 8px; margin-bottom: 3px;
  font-size: 0.65rem; font-weight: 700; color: var(--text);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.45; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cuide-page .cuide-sessao:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); filter: brightness(1.03); }
html.theme-escuro .cuide-page .cuide-sessao:hover,
html.theme-meio-escuro .cuide-page .cuide-sessao:hover { filter: brightness(1.15); }
.cuide-page .cuide-sessao .h { font-weight: 800; }
.cuide-page .cuide-sessao .p { font-weight: 700; }
.cuide-page .cuide-sessao .t { font-weight: 500; color: var(--text2); }

/* Sessão passada de paciente/profissional arquivado */
.cuide-page .cuide-arquivado { opacity: 0.55; filter: grayscale(60%); }

/* ── Legenda de status ─────────────────────────────────────────────── */
.cuide-page .cuide-legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}

/* ── Cabeçalho de mês para o grid semanal/diário ─────────────────── */
.cuide-page .cuide-periodo-label {
  font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}

/* ── Filter Chips e Botões de Auditoria ── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  user-select: none;
  line-height: 1.2;
}

.filter-chip:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.filter-chip:active {
  transform: translateY(0);
}

.filter-chip.active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.filter-chip.chip-ok.active {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.filter-chip.chip-div.active {
  background: rgba(168, 85, 247, 0.14);
  color: #9333ea;
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.filter-chip.chip-nao-fat.active {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.filter-chip.chip-sem-ag.active {
  background: rgba(234, 179, 8, 0.14);
  color: #ca8a04;
  border-color: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.25);
}

@media (max-width: 768px) {
  .cuide-page .cuide-grid-wrap { max-height: none; }
  .cuide-page table.cuide-grid td { min-width: 96px; }
}