/* 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; }
.topo form { margin: 0; }
.marca { margin-bottom: 0.25rem; }
.marca span { color: var(--pico-primary); }

section { margin-bottom: 2.5rem; }
.secao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.secao-topo h3 { margin: 0; }
.secao-topo h3 small { font-weight: normal; color: var(--pico-muted-color); }
.navegacao { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.navegacao { flex-wrap: wrap; }
.navegacao label { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.navegacao input, .navegacao button { margin: 0; width: auto; }
.navegacao a[role="button"] { padding: 0.4rem 0.9rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.card { margin: 0; }
.card > header { font-weight: 600; }
.card.total { border: 2px solid var(--pico-primary); }
.numero { font-size: 2.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.numero small { font-size: 1.25rem; color: var(--pico-muted-color); font-weight: 600; }
.card p { margin-bottom: 0.25rem; }
.aviso small { color: var(--pico-del-color); }
.nota { margin-top: 0.75rem; color: var(--pico-muted-color); }

.meta { display: flex; gap: 0.5rem; margin: 0.75rem 0 0; }
.meta input { margin: 0; }
.meta button { margin: 0; width: auto; white-space: nowrap; }

.rotulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); margin: 0.5rem 0 0; }
.numero.menor { font-size: 1.75rem; }
.plano { margin-top: 1.25rem; }
.plano > summary { font-weight: 600; }
.plano details { margin-top: 1rem; }
.plano table { font-size: 0.9rem; }
.plano td.num, .plano th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plano td.num small { color: var(--pico-muted-color); display: inline-block; min-width: 2.8rem; }
.plano tr.motivo td:first-child { padding-left: 1.5rem; }

.abas { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; overflow-x: auto; }
.abas a { padding: 0.5rem 1rem; text-decoration: none; color: var(--pico-muted-color); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.abas a[aria-current="page"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }

.cards.resumo .card > header { margin-bottom: 0.5rem; }
.par { display: flex; gap: 1.5rem; }
.par .rotulo { margin-top: 0; }
.ok { color: #1B7F3B; }
.abaixo { color: var(--pico-del-color); }
.carga { margin: 0; color: var(--pico-muted-color); }
.blocos { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.blocos li { display: flex; justify-content: space-between; list-style: none; padding: 0.15rem 0; border-top: 1px solid var(--pico-muted-border-color); }
h4 { margin: 2rem 0 0.25rem; }
.tabela-num { font-size: 0.9rem; }
.tabela-num td.num, .tabela-num th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-num tr.bloco th { background: var(--pico-card-background-color); font-weight: 600; }