/* Agenda processual — identidade visual (Fase 9).
 *
 * Módulos: Audiências, Agenda Inteligente, Calendário e Previsão de Prazos.
 *
 * Auditoria antes de programar (`existente → reutilizado → adaptação`):
 *
 *   módulo      o que já existe                    ação
 *   ──────────  ────────────────────────────────  ──────────────────────────
 *   Audiências  `.caixa-dash-scope` + list-card,   nada no principal; só a
 *               list-item, empty-state, spinner,   tabela `.aud-tbl`, que é
 *               icon-btn, mini-btn — o mesmo       um segundo componente do
 *               vocabulário do Dashboard          módulo, ficou na paleta velha
 *   Agenda      `.btn`, `ti-*` do Tabler,          nada — já alinhada
 *               loading/spinner, caixa-dash-scope
 *   Calendário  bloco `.cal-*` próprio             paleta marfim/grafite → slate
 *   Previsão    `.chart-card`, `.riscos-card`      paleta marfim/grafite → slate
 *
 * Nenhum componente novo. A adaptação é a mesma que a Fase 4 fez no Dashboard:
 * apontar os tokens que o módulo já tinha para os valores do shell, dentro do
 * escopo que ele já usa. Nada aqui vaza para fora desses quatro contêineres.
 *
 * O que NÃO se mexeu: datas, fuso, regras de lembrete, marcos de 1/3 e 2/3,
 * suspensões, feriados e integrações. A carga de dados é a mesma.
 */

/* ── tokens locais: os mesmos valores do shell e do `.jd-ext` ───────────── */
.cal-wrap,
.aud-tbl,
.chart-card,
.riscos-card {
  --ap-texto-1: #0f172a;   /* era var(--grafite) #111827 */
  --ap-texto-2: #475569;   /* era #4b5563 */
  --ap-muted:   #94a3b8;   /* era var(--muted) #9ca3af */
  --ap-borda:   #e2e8f0;   /* era var(--marfim-borda) #e5e7eb */
  --ap-hover:   #f8fafc;   /* era var(--marfim) #f5f5f0 */
}

/* ── cartões: mesma borda, raio e sombra dos cartões já aprovados ───────── */
.aud-tbl,
.chart-card,
.riscos-card,
.cal-wrap .cal-grid {
  border-color: var(--ap-borda);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04);
}
.cal-wrap .cal-grid-wrap {
  background: var(--ap-hover);
  border-color: var(--ap-borda);
  border-radius: 8px;
}

/* ── texto: a hierarquia é a mesma; só o tom sai do cinza antigo ────────── */
.cal-wrap .cal-month,
.chart-card .chart-title,
.riscos-card .risco-titulo,
.aud-tbl .td-dh { color: var(--ap-texto-1) }

.cal-wrap .cal-leg,
.cal-wrap .cal-num,
.chart-card .bar-num,
.aud-tbl .td,
.aud-tbl .td-local,
.aud-tbl .td-cli { color: var(--ap-texto-2) }

.cal-wrap .cal-hd,
.cal-wrap .cal-mais,
.chart-card .bar-label,
.aud-tbl .th,
.aud-tbl .td-dh-hora,
.aud-tbl .td-cli.vazio { color: var(--ap-muted) }

/* ── superfícies: linha e célula respondem em slate, não em marfim ──────── */
.aud-tbl .trow:hover,
.aud-tbl .aic:hover,
.cal-wrap .cal-cell:hover,
.cal-wrap .cal-nav-btn:hover { background: var(--ap-hover) }

.cal-wrap .cal-cell,
.cal-wrap .cal-header,
.aud-tbl .thead,
.aud-tbl .trow,
.riscos-card .riscos-head,
.riscos-card .risco-item { border-color: var(--ap-borda) }

.cal-wrap .cal-cell.empty,
.cal-wrap .cal-cell.fds { background: var(--ap-hover) }

.cal-wrap .cal-nav-btn,
.aud-tbl .aic,
.aud-tbl .aud-btn { border-color: var(--ap-borda) }

/* ── foco visível: mesmo contorno das listas de Processos e Clientes ─────
   `.cal-cell` e `.risco-proc` são clicáveis por `onclick`; o JS passou a
   marcá-los com `tabindex` para que existam na sequência de teclado. Sem
   isso o contorno abaixo nunca apareceria — regra sem alvo é enfeite. */
.cal-wrap .cal-cell:focus-visible,
.cal-wrap .cal-ev:focus-visible,
.riscos-card .risco-proc:focus-visible { outline: 2px solid var(--jd-foco); outline-offset: -2px }

.cal-wrap .cal-nav-btn:focus-visible,
.aud-tbl .aic:focus-visible,
.aud-tbl .aud-btn:focus-visible,
.riscos-card .rac:focus-visible { outline: 2px solid var(--jd-foco); outline-offset: 2px }

/* ── ícones Tabler no lugar dos emoji ───────────────────────────────────
   Tamanhos por papel, não um número só: 16px quando o ícone encabeça um
   bloco, 13px quando acompanha texto de 10–11,5px. Igualar tudo a 18px
   quebraria a linha dos metadados. */
.riscos-card .riscos-head .ti,
.chart-card .chart-title .ti { font-size: 16px; line-height: 1 }
.riscos-card .risco-titulo .ti,
.riscos-card .rac .ti { font-size: 14px; line-height: 1 }
.riscos-card .risco-meta .ti { font-size: 13px; line-height: 1 }
.cal-wrap .cal-leg .ti { font-size: 13px; line-height: 1 }

/* ── legenda do calendário: pontos, não emoji ───────────────────────────
   `.cal-dot` já existia no módulo e não era usado na barra superior. */
.cal-leg-topo { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px }
.cal-leg-topo .cal-leg { display: inline-flex; align-items: center; gap: 4px; font-size: 11px }

/* ── defeito encontrado na auditoria, corrigido aqui ────────────────────
   `.cal-cell.feriado` e `.cal-cell.fds` estavam ambos em #f5f5f0: dia de
   feriado/suspensão ficava idêntico a fim de semana. O `renderCalendario()`
   ainda calcula um `bg='#fef3c7'` âmbar para esse caso, mas a variável não
   chega ao HTML — a intenção existia e se perdeu. Restaurada com o âmbar da
   paleta aprovada, sem mexer na lógica de suspensão nem de feriado. */
.cal-wrap .cal-cell.feriado { background: #FAEEDA }
.cal-wrap .cal-fer { color: #92400e }

/* ── responsivo: a grade do mês é o que aperta primeiro ─────────────────── */
@media (max-width: 768px) {
  .aud-tbl, .chart-card, .riscos-card, .cal-wrap .cal-grid { border-radius: 8px }
  .cal-leg-topo { display: none }   /* a legenda já se repete abaixo da grade */
}