/* Tema visual — cores da Arati Distribuidora (autorizada Coca-Cola), mesma
   paleta do arati-fill-rate / arati-checklist. */

:root {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: #F40009;
  --pico-primary-background: #F40009;
  --pico-primary-border: #F40009;
  --pico-primary-underline: #F40009;
  --pico-primary-hover: #C40007;
  --pico-primary-hover-background: #C40007;
  --pico-primary-hover-border: #C40007;
  --pico-primary-hover-underline: #C40007;
  --pico-primary-focus: rgba(244, 0, 9, 0.375);
  --pico-primary-inverse: #FFFFFF;

  --pico-background-color: #FFFFFF;
  --pico-color: #1A1A1A;
  --pico-h1-color: #1A1A1A;
  --pico-h2-color: #1A1A1A;
  --pico-h3-color: #1A1A1A;

  --pico-card-background-color: #F5F5F5;
  --pico-card-sectioning-background-color: #F5F5F5;
  --pico-table-row-stripped-background-color: #F5F5F5;
}

a:not([role="button"]) {
  color: var(--pico-primary);
}


.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.marca { margin-bottom: 0.25rem; }
.marca span { color: var(--pico-primary); }

.filtros { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.filtros label { flex: 0 1 14rem; }

.filtros .limpar { align-self: center; font-size: 0.9rem; }
.atualizacao { color: var(--pico-muted-color); font-size: 0.85rem; margin-bottom: 1rem; }
.bom { color: #1B7F3B; }
.ruim { color: #C40007; }
.cod { color: var(--pico-muted-color); font-size: 0.75rem; }

/* Enquanto o HTMX busca (hx-indicator), apaga o bloco pra mostrar que esta carregando. */
.carregavel.htmx-request { opacity: 0.45; transition: opacity 150ms; }

/* ---- Graficos (static/js/graficos.js) ----
   Ano atual = vermelho Arati; ano anterior = cinza (padrao destaque x base). */
:root { --cor-atual: #F40009; --cor-anterior: #BDBDBD; --tinta-2: #5C5C5C; --grade: #ECECEC; }

/* Cards lado a lado com a mesma altura (stretch) e o "Ver numeros" alinhado
   no rodape dos dois. A lista do Top fica na altura natural (esticar as
   linhas pra ocupar o vizinho cortava a lista no 7o item). */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 576px) { .graficos { grid-template-columns: 1fr; } }
article.grafico { margin: 0; padding: 1rem 1.25rem; background: #FFFFFF; border: 1px solid var(--grade); box-shadow: none; position: relative; display: flex; flex-direction: column; }
article.grafico > .area { flex: 1 1 auto; }
article.grafico > header { display: flex; flex-direction: column; gap: 0.15rem; margin: -1rem -1.25rem 0.5rem; padding: 0.75rem 1.25rem; background: #FFFFFF; border-bottom: 1px solid var(--grade); }
article.grafico > header small { color: var(--tinta-2); font-size: 0.85rem; }
article.grafico > header b { color: var(--pico-color); font-variant-numeric: tabular-nums; }

.legenda { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--tinta-2); margin-bottom: 0.25rem; }
.legenda .sw { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; }
.legenda .sw.atual { background: var(--cor-atual); margin-left: 0.75rem; }
.legenda .sw.anterior { background: var(--cor-anterior); }

.area { position: relative; }
.area svg { display: block; width: 100%; height: auto; overflow: visible; }
.area svg text { font-size: 11px; fill: var(--tinta-2); font-variant-numeric: tabular-nums; }
.area svg .grade { stroke: var(--grade); stroke-width: 1; }
.area svg .eixo { stroke: #BDBDBD; stroke-width: 1; }
.area svg .b-atual { fill: var(--cor-atual); }
.area svg .b-anterior { fill: var(--cor-anterior); }
.area svg .alvo { fill: transparent; cursor: default; outline: none; }
.area svg .alvo:hover, .area svg .alvo:focus { fill: rgba(0, 0, 0, 0.04); }
.area svg text.rotulo-barra { font-size: 10px; fill: var(--pico-color); }
.area svg text.rotulo-destaque { fill: var(--pico-color); font-weight: 600; }

/* Top 10: barras horizontais em HTML (nome a esquerda, valor e variacao a direita). */
.top { list-style: none; padding: 0; margin: 0.25rem 0 0; display: grid; gap: 0.2rem; }
/* Linha 1: nome ... valor %; linha 2: a barra na largura toda. */
.top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "trilho trilho"; gap: 0.1rem 0.75rem; font-size: 0.82rem; line-height: 1.25; margin: 0; padding: 0.1rem 0.25rem; border-radius: 4px; }
.top .nome { grid-area: nome; }
.top .valor { grid-area: valor; }
.top .trilho { grid-area: trilho; }
.top li:hover, .top li:focus { background: rgba(0, 0, 0, 0.04); outline: none; }
.top .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .trilho { height: 8px; }
.top .barra { height: 100%; background: var(--cor-atual); border-radius: 0 4px 4px 0; min-width: 2px; }
.top .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pico-color); }
.top .valor small { color: var(--tinta-2); margin-left: 0.4rem; display: inline-block; min-width: 4.2rem; }
.vazio { color: var(--tinta-2); font-size: 0.9rem; padding: 2rem 0; text-align: center; }

.dica {
  position: absolute; z-index: 5; pointer-events: none; min-width: 11rem;
  background: #FFFFFF; border: 1px solid #DADADA; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0.65rem; font-size: 0.8rem; line-height: 1.35; color: var(--pico-color);
}
.dica strong { display: block; margin-bottom: 0.2rem; }
.dica .linha { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.dica .linha span:first-child { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tinta-2); }
.dica i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; }

.ver-numeros { margin: auto 0 0; padding-top: 0.75rem; font-size: 0.85rem; }
.ver-numeros summary { color: var(--tinta-2); }
.ver-numeros table { font-size: 0.8rem; margin: 0.5rem 0 0; }
table.numerica td:not(:first-child), table.numerica th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }