/* ============================================================
   metrics.css — a FAIXA DE METRICAS do portal, em um lugar so'.
   Primeiro CSS compartilhado entre paginas: ate' 31/07/2026 cada tela
   carregava o proprio <style>, e foi assim que dois modelos de card
   diferentes nasceram sem ninguem notar.

   AUTOSSUFICIENTE de proposito: declara as proprias cores em vez de usar
   as vars de cada pagina. certificados.html e abertura_empresas.html fazem
   modo escuro sobrescrevendo classe do Tailwind (body.dark .bg-white{...}),
   e uma folha que depende das vars alheias nao sobrevive a isso.

   A cor mora no DISCO, nunca no numero. Tingir o numero funciona com dois
   estados e vira arco-iris com cinco — que e' o caso do controle contabil.
   ============================================================ */
:root{
  --m-bd:#e6e8ef; --m-bd2:#eef0f5;
  --m-meta:#6b6b73; --m-navy:#102540;
  --m-marca:#1A5BD8; --m-hover:#fafbfc; --m-ativo:rgba(26,91,216,.06);
  --m-verde:#0B8C5F; --m-amber:#b45309; --m-red:#dc2626;
  --m-azul:#1A5BD8;  --m-violeta:#7c3aed; --m-rosa:#db2777;
}
body.dark{
  --m-bd:rgba(255,255,255,.09); --m-bd2:rgba(255,255,255,.05);
  --m-meta:#9aa4b2; --m-navy:#e5e7eb;
  --m-marca:#5b8ff0; --m-hover:rgba(255,255,255,.03); --m-ativo:rgba(91,143,240,.10);
  --m-verde:#34d399; --m-amber:#fbbf24; --m-red:#fca5a5;
  --m-azul:#5b8ff0;  --m-violeta:#a78bfa; --m-rosa:#f472b6;
}

.metrics{display:grid;grid-template-columns:repeat(var(--m-cols,4),1fr);
  border-bottom:1px solid var(--m-bd);flex-shrink:0;}

/* Serve <div> e <button>: os resets existem para o botao nao trazer o
   cinza e a borda do agente de usuario. */
.metric{padding:14px 22px;min-width:0;text-align:left;font-family:inherit;color:inherit;
  background:none;border:none;border-right:1px solid var(--m-bd2);}
.metric:last-child{border-right:none;}
button.metric{cursor:pointer;}
button.metric:hover{background:var(--m-hover);}
.metric.sel-on{background:var(--m-ativo);box-shadow:inset 0 -2px 0 var(--m-marca);}

.metric .lbl{font-size:11px;font-weight:600;color:var(--m-meta);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Markup canonico do valor:
     <div class="val"><i class="d"></i><span class="n">42</span></div>
   O numero mora no <span class="n"> e NUNCA direto no .val. Motivo concreto:
   o portal de documentos anima o contador escrevendo el.textContent, e
   textContent no .val apagaria o disco no primeiro tick. Com o span, quem
   escreve o numero nao alcanca o disco. */
.metric .val{font-size:24px;font-weight:600;color:var(--m-navy);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:center;gap:8px;}

/* Periodo ainda em aberto: o numero apaga em vez de gritar um zero que
   leria como falha. */
.metric.apagado .val{color:var(--m-meta);}

/* O disco e' o mesmo componente da grade do contabil: --c pinta, --p diz
   quanto do circulo enche. Quem nao passa --p enche inteiro. */
.metric .val .d{width:13px;height:13px;border-radius:50%;flex:none;
  border:1.5px solid var(--c,var(--m-meta));
  background:conic-gradient(var(--c,transparent) 0 var(--p,100%),transparent var(--p,100%) 100%);}

.metric[data-cor="verde"]   .d{--c:var(--m-verde);}
.metric[data-cor="amber"]   .d{--c:var(--m-amber);}
.metric[data-cor="red"]     .d{--c:var(--m-red);}
.metric[data-cor="azul"]    .d{--c:var(--m-azul);}
.metric[data-cor="violeta"] .d{--c:var(--m-violeta);}
.metric[data-cor="rosa"]    .d{--c:var(--m-rosa);}

/* Padrao para as faixas de 4 cards. Quem tem outra contagem sobrescreve por
   ID na propria pagina — especificidade de id vence esta media query.

   O nth-child(2n) casa com o --m-cols:2 DESTA media query: sem ele, o card
   da direita da primeira fila fica com um fio solto na borda do container,
   porque :last-child so' alcanca a ultima celula de todas.

   Por isso o .metrics-custom existe: quem declara as proprias colunas
   (o controle contabil, com tres faixas de contagens diferentes) tem que
   escrever tambem o proprio "sem fio na ultima coluna", e herdar um 2n que
   nao corresponde as suas colunas seria pior que nao herdar nada. */
@media(max-width:767px){
  .metrics{--m-cols:2;}
  .metric{border-bottom:1px solid var(--m-bd2);}
  .metrics:not(.metrics-custom) .metric:nth-child(2n){border-right:none;}
}