/* Prazos e DJEN — identidade visual (Fase 7).
 *
 * Nenhum componente novo, nenhuma paleta nova. O que este arquivo faz é alinhar
 * o que já existe às fontes de verdade, na ordem definida: shell/sidebar →
 * detalhe do processo → Dashboard → Lista de Processos → Clientes.
 *
 * As divergências foram MEDIDAS por `getComputedStyle`, não estimadas:
 *
 *   componente        referência            Prazos (antes)      ação
 *   ────────────────  ────────────────────  ─────────────────  ─────────────
 *   página, cartão    já idênticos           —                  nada a fazer
 *   botão primário    11px / 34px / 12px    12.5px / auto/18px  alinhado
 *   aba ativa         (sem referência)      #111827            → #0f172a
 *   ícone             18×18                 12.6×12.5          alinhado
 *
 * A aba ativa era o caso mais grave: `rgb(17,24,39)` é o **navy antigo**, o tom
 * que a sidebar usava antes de virar azul-marinho. Duas telas do sistema
 * exibiam azuis diferentes lado a lado.
 *
 * As abas não têm referência nas cinco fontes — nenhum módulo migrado tem abas.
 * Em vez de inventar um padrão, elas foram construídas com as MESMAS
 * propriedades do botão do sistema (raio, altura, tipografia, foco), mudando só
 * o que distingue selecionado de não selecionado.
 */

/* ── botões: mesma escala das telas já migradas ─────────────────────────── */
/* alcance: os botões de Prazos ficam tanto dentro de #prazos-area quanto no
   cabeçalho do cartão, fora dele */
/* Só altura e respiro. A tipografia NÃO é forçada: medindo, o Dashboard exibe
   11px porque usa a variante `.btn-sm`, e Prazos usa `.btn` normal (12.5px).
   São duas variantes do mesmo botão do sistema, não paletas divergentes —
   igualar na marra descaracterizaria a variante. */
#content #prazos-area .btn,
#content .caixa-dash-scope .tabs .btn {
  min-height: 34px;
}


/* ── abas: construídas a partir do botão do sistema ─────────────────────── */
.caixa-dash-scope .tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px; margin-bottom: 14px;
}
.caixa-dash-scope .tabs .btn {
  min-height: 34px; font-size: 11px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* A SELEÇÃO segue `btn-p`/`btn-o`, que é o estado que `aPrazos()` mantém — e a
   única fonte de verdade. Minha primeira versão usou `.tab-ativa`, que o JS
   **nunca move**: ficava marcada para sempre em "A cumprir", e ao trocar de aba
   apareciam duas selecionadas. Não há duas fontes de verdade; há uma, e o CSS
   passou a ler a certa.

   Selecionada usava `var(--navy)`, o mesmo token dos botões primários das telas
   já migradas (medido na Fase 7: Dashboard, Processos e Clientes exibiam
   `rgb(17,24,39)`). Fixar #0f172a só aqui deixaria Prazos diferente das outras
   três — por isso a Fase 7 adiou. A divergência era entre o shell e o `--navy`
   do app, e a Fase 8 a resolveu: `--jd-navy` (#0f172a) passou a ser o token
   canônico de ação primária, e as três telas mudaram junto com esta. */
.caixa-dash-scope .tabs .btn.btn-p {
  background: var(--jd-navy);
  border: 1px solid var(--jd-navy);
  color: #fff;
}
.caixa-dash-scope .tabs .btn.btn-o {
  background: #fff; border: 1px solid #e2e8f0; color: #334155;
}
.caixa-dash-scope .tabs .btn.btn-o:hover {
  border-color: #cbd5e1; background: #f8fafc;
}
.caixa-dash-scope .tabs .btn:not(.tab-ativa):hover {
  border-color: #cbd5e1; background: #f8fafc;
}
.caixa-dash-scope .tabs .btn:focus-visible {
  outline: 2px solid var(--jd-foco); outline-offset: 2px;
}

/* ── ícones: 18×18, como nas demais telas ───────────────────────────────── */
#prazos-area .ti,
.caixa-dash-scope .tabs .ti { font-size: 18px; line-height: 1 }
#prazos-area svg { width: 18px; height: 18px }

/* ── lista de prazos ────────────────────────────────────────────────────── */
#prazos-area .card { border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04); background: #fff }
#prazos-area .list-item { border-radius: 7px }
#prazos-area .list-item:hover { background: #f8fafc }
#prazos-area .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap }

/* ── SEMÂNTICA DOS PRAZOS — a única diferença que permanece ─────────────
   Vencido, urgente e no prazo precisam ser distinguíveis à primeira vista; essa
   é uma diferença justificada pelo significado, não uma paleta paralela. As
   cores são as que o sistema já usa para os mesmos estados (as mesmas do painel
   do processo e do Dashboard). */
#prazos-area .prazo-vencido { border-left: 3px solid #8B1E1E }
#prazos-area .prazo-urgente { border-left: 3px solid #C24234 }
#prazos-area .prazo-atencao { border-left: 3px solid #b45309 }
#prazos-area .prazo-ok      { border-left: 3px solid #1D9E75 }

/* ── celular ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Mesma especificidade da regra de 34 px lá em cima (`#content …`), senão ela
     vence e o alvo fica em 38 px — foi o que a validação das 35 combinações
     mostrou em 430, 390 e 360 px. */
  #content .caixa-dash-scope .tabs { gap: 6px }
  #content .caixa-dash-scope .tabs .btn {
    min-height: 42px; flex: 1 1 calc(50% - 3px); justify-content: center;
  }
  #content #prazos-area .btn { min-height: 42px }
}