/* 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 { max-width: 14rem; }

.aviso {
  padding: 0.75rem 1rem;
  border-left: 4px solid #E0A800;
  background: #FFF6DA;
  border-radius: var(--pico-border-radius);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: var(--pico-block-spacing-vertical);
}
.kpi { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.kpi { padding: 1rem; }
.kpi strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi span, .kpi small { color: var(--pico-muted-color); font-size: 0.85rem; }

article > header { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; }
article > header small { color: var(--pico-muted-color); }

table.numerica > * > tr > td:not(:first-child),
table.numerica > * > tr > th:not(:first-child),
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

table.clicavel > tbody > tr[hx-get] { cursor: pointer; }
table.clicavel > tbody > tr[hx-get]:hover td { background: #FDE6E7; }

.linha-total td { font-weight: 700; border-top: 2px solid var(--pico-color); }

.bom { color: #1B7F3B; }
.ruim { color: #C40007; }

tr.sub > td { padding: 0; border: 0; }
tr.sub > td:not(:empty) { padding: 0.5rem 0 1rem 1rem; }
.lancamentos {
  /* width 0 + min-width 100%: a lista nao alarga as colunas da tabela de contas. */
  width: 0; min-width: 100%;
  max-height: 26rem; overflow: auto;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  padding: 0.5rem; margin-bottom: 0.5rem;
}
.lancamentos table { font-size: 0.8rem; margin-bottom: 0.5rem; }
.lancamentos td { white-space: nowrap; }
.lancamentos td.desc { white-space: normal; min-width: 16rem; }
.fechar { padding: 0.25rem 0.75rem; font-size: 0.85rem; width: auto; margin: 0; }

/* Enquanto o HTMX busca (hx-indicator), apaga o bloco pra mostrar que esta carregando. */
.carregavel.htmx-request { opacity: 0.45; transition: opacity 150ms; }
.lancamentos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }