/* ===================================================================
   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 { 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: 12px; margin-bottom: 18px;
}
.cuide-page .cuide-head h2 {
  font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0 0 3px;
}
.cuide-page .cuide-head p {
  font-size: 0.8rem; 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); border: 1px solid var(--border);
  border-radius: 16px; overflow: auto; max-height: calc(100vh - 320px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .05), 0 2px 8px -1px rgba(0, 0, 0, .03);
}
.cuide-page table.cuide-grid { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.cuide-page table.cuide-grid th {
  padding: 10px 8px; font-size: 0.7rem; font-weight: 700; color: var(--text2);
  background: var(--surface); border-bottom: 1px solid var(--border);
  text-align: center; position: sticky; top: 0; z-index: 2;
}
.cuide-page table.cuide-grid th.hoje { color: var(--accent); }
.cuide-page table.cuide-grid td {
  padding: 3px 4px; height: 46px; min-width: 118px;
  vertical-align: top; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.cuide-page table.cuide-grid td.hora {
  min-width: 60px; width: 60px; text-align: center; vertical-align: middle;
  font-weight: 700; font-size: 0.7rem; color: var(--text2);
  background: var(--surface2); position: sticky; left: 0; z-index: 1;
}
.cuide-page table.cuide-grid td.vazio { cursor: pointer; transition: background .12s; }
.cuide-page table.cuide-grid td.vazio:hover { background: var(--surface2); }

/* Chip de sessão dentro da grade. Raio e proporção alinhados ao
   .agenda-day-dot/.filter-sel (8px é o raio "pequeno" do sistema).
   A cor vem inline, do status (paleta clínica — ver cuide-agenda.js). */
.cuide-page .cuide-sessao {
  border-left: 3px solid var(--accent);
  padding: 2px 6px; border-radius: 6px; margin-bottom: 2px;
  font-size: 0.66rem; font-weight: 800; color: var(--text);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.5; transition: filter .12s;
}
.cuide-page .cuide-sessao:hover { filter: brightness(0.96); }
html.theme-escuro .cuide-page .cuide-sessao:hover,
html.theme-meio-escuro .cuide-page .cuide-sessao:hover { filter: brightness(1.1); }
.cuide-page .cuide-sessao .h { font-weight: 900; }
.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 — mais leve que o
   opacity:0.3+grayscale(100%) usado pra controle desabilitado no resto do
   app, porque aqui é histórico sendo mostrado, não algo desligado. */
.cuide-page .cuide-arquivado { opacity: 0.55; filter: grayscale(60%); }

/* ── Legenda de status ─────────────────────────────────────────────── */
/* Os "pills" em si são .badge (nativo); só o layout de linha é novo. */
.cuide-page .cuide-legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}

/* ── Cabeçalho de mês para o grid semanal/diário ─────────────────── */
/* .month-nav já existe e cobre o botão ‹ › — isto é só o texto do meio
   quando a navegação é por semana/dia em vez de mês (label maior). */
.cuide-page .cuide-periodo-label {
  font-size: 0.9rem; font-weight: 700; color: var(--text);
}

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