/* ===========================================================================
   PRICELINK — estilo.css
   Folha de estilo única: serve o site público, o login e o painel.

   Como está organizada:
     1. Cores e medidas (as "variáveis") — tema claro
     2. Tema escuro
     3. Base e tipografia
     4. Cabeçalho e rodapé
     5. Botões, campos e avisos
     6. Site público (capa, como funciona, prova, contato)
     7. Painel: abas, cartões de número, barras de faixa, tabela
     8. Telas pequenas (celular)

   As cores dos gráficos NÃO foram escolhidas "no olho": a escala de faixas é
   uma escala divergente (azul = Tudo de Bicho mais barata, vermelho = mais
   cara, cinza no meio = alinhado), com cada braço conferido em separação de
   cor para quem tem daltonismo, nos dois temas.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. CORES E MEDIDAS — TEMA CLARO
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* superfícies — levemente puxadas para o azul da marca */
  --plano:            #f5f7fc;   /* fundo da página */
  --cartao:           #ffffff;   /* fundo dos cartões e da área de gráfico */
  --cartao-2:         #eef2fa;   /* fundo de realce suave */
  --borda:            rgba(3, 56, 150, 0.12);
  --borda-forte:      rgba(3, 56, 150, 0.22);

  /* texto */
  --tinta:            #0c1322;
  --tinta-2:          #4a5468;
  --tinta-3:          #7d879a;

  /* marca — o azul da logo (#033896) e seus degraus no mesmo matiz */
  --marca:            #033896;
  --marca-escura:     #001f7d;
  --marca-clara:      #e7eefc;
  --marca-tinta:      #ffffff;

  /* gráficos: linhas de apoio */
  --grade:            #e3e8f2;
  --eixo:             #c3cbdb;

  /* escala divergente das faixas de preço
     (azul da marca = você mais barato · vermelho = você mais caro · cinza no meio) */
  --faixa-muito-abaixo: #033896;
  --faixa-abaixo:       #5c90ee;
  --faixa-alinhado:     #b9bcc3;
  --faixa-acima:        #ed8e8d;
  --faixa-muito-acima:  #b32d2c;
  /* cor do número escrito DENTRO de cada faixa, escolhida para ter contraste
     suficiente com o fundo daquela faixa */
  --tinta-muito-abaixo: #ffffff;
  --tinta-abaixo:       #07183a;
  --tinta-alinhado:     #1b2231;
  --tinta-acima:        #3d0f0e;
  --tinta-muito-acima:  #ffffff;

  /* séries (uma cor por loja, sempre na mesma ordem; a 1ª é o azul da marca) */
  --serie-1: #2357b7;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;

  /* rampa de COBERTURA: escala ordinal (de "só você vende" até "em 4 a 5 lojas").
     Por ser uma ordem, e não categorias, usa um matiz só — o azul da marca. */
  --cobertura-1: #88b7ff;
  --cobertura-2: #5c90ee;
  --cobertura-3: #2357b7;
  --cobertura-4: #001f7d;
  --tinta-cobertura-1: #07183a;
  --tinta-cobertura-2: #07183a;
  --tinta-cobertura-3: #ffffff;
  --tinta-cobertura-4: #ffffff;

  /* estados */
  --bom:      #0ca30c;
  --atencao:  #fab219;
  --grave:    #ec835a;
  --critico:  #d03b3b;
  --bom-tinta: #00701f;

  /* medidas — tudo mais arredondado */
  --raio:        12px;
  --raio-g:      20px;
  --pilula:      999px;
  --sombra:      0 1px 2px rgba(3, 56, 150, .06), 0 10px 30px rgba(3, 56, 150, .07);
  --largura:     1180px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. TEMA ESCURO
   Declarado duas vezes de propósito:
     - dentro do @media, para seguir a preferência do sistema operacional;
     - em [data-theme="dark"], para o botão de tema do site vencer o sistema.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano:        #0a0f19;
    --cartao:       #121823;
    --cartao-2:     #1a2233;
    --borda:        rgba(255, 255, 255, 0.10);
    --borda-forte:  rgba(255, 255, 255, 0.20);
    --tinta:        #eef2fa;
    --tinta-2:      #b6c0d4;
    --tinta-3:      #828da3;
    --marca:        #5c90ee;
    --marca-escura: #467ce0;
    --marca-clara:  #11203c;
    --marca-tinta:  #04102a;
    --grade:        #222c3d;
    --eixo:         #374258;
    --faixa-muito-abaixo: #9fcbff;
    --faixa-abaixo:       #467ce0;
    --faixa-alinhado:     #4a5362;
    --faixa-acima:        #c0332f;
    --faixa-muito-acima:  #f08a8a;
    --tinta-muito-abaixo: #07183a;
    --tinta-abaixo:       #ffffff;
    --tinta-alinhado:     #eef2fa;
    --tinta-acima:        #ffffff;
    --tinta-muito-acima:  #3d0f0e;
    --serie-1: #5c90ee;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
  --cobertura-1: #9fcbff;
  --cobertura-2: #72a3fc;
  --cobertura-3: #467ce0;
  --cobertura-4: #2357b7;
  --tinta-cobertura-1: #07183a;
  --tinta-cobertura-2: #07183a;
  --tinta-cobertura-3: #07183a;
  --tinta-cobertura-4: #ffffff;
    --cobertura-1: #9fcbff;
    --cobertura-2: #72a3fc;
    --cobertura-3: #467ce0;
    --cobertura-4: #2357b7;
    --tinta-cobertura-1: #07183a;
    --tinta-cobertura-2: #07183a;
    --tinta-cobertura-3: #07183a;
    --tinta-cobertura-4: #ffffff;
    --bom-tinta: #3dc23d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;
  --plano:        #0a0f19;
  --cartao:       #121823;
  --cartao-2:     #1a2233;
  --borda:        rgba(255, 255, 255, 0.10);
  --borda-forte:  rgba(255, 255, 255, 0.20);
  --tinta:        #eef2fa;
  --tinta-2:      #b6c0d4;
  --tinta-3:      #828da3;
  --marca:        #5c90ee;
  --marca-escura: #467ce0;
  --marca-clara:  #11203c;
  --marca-tinta:  #04102a;
  --grade:        #222c3d;
  --eixo:         #374258;
  --faixa-muito-abaixo: #9fcbff;
  --faixa-abaixo:       #467ce0;
  --faixa-alinhado:     #4a5362;
  --faixa-acima:        #c0332f;
  --faixa-muito-acima:  #f08a8a;
  --tinta-muito-abaixo: #07183a;
  --tinta-abaixo:       #ffffff;
  --tinta-alinhado:     #eef2fa;
  --tinta-acima:        #ffffff;
  --tinta-muito-acima:  #3d0f0e;
  --serie-1: #5c90ee;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --bom-tinta: #3dc23d;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------
   3. BASE E TIPOGRAFIA
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; color: var(--tinta-2); }

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

.envoltorio { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.largo { max-width: 1480px; }

.oculto { display: none !important; }
.so-leitor-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   4. CABEÇALHO E RODAPÉ
   --------------------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--plano) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo-interno { display: flex; align-items: center; gap: 20px; height: 62px; }

/* A LOGO
   O arquivo ativos/logo.svg é a logo vetorizada (a palavra PRICELINK com o
   globo). Em vez de colocá-la como imagem, usamos como "máscara": o navegador
   recorta o formato da logo e pinta com a cor da marca. É por isso que ela
   muda de cor sozinha no tema escuro, sem precisar de um segundo arquivo. */
.marca-logo {
  display: inline-flex; align-items: center;
  height: 23px; width: 166px;              /* proporção original: 1039 x 144 */
  background-color: var(--marca);
  -webkit-mask: url("logo.svg") no-repeat center / contain;
          mask: url("logo.svg") no-repeat center / contain;
  transition: opacity .15s;
}
.marca-logo:hover { opacity: .78; text-decoration: none; }
.marca-logo.grande { height: 34px; width: 245px; }

/* Se o navegador for antigo e não entender máscara, mostramos o nome em texto
   em vez de um retângulo vazio. */
@supports not ((-webkit-mask: url("logo.svg")) or (mask: url("logo.svg"))) {
  .marca-logo {
    width: auto; background: none; color: var(--marca);
    font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em;
  }
  .marca-logo::after { content: "PRICELINK"; }
}

.topo nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topo nav a.link-topo {
  color: var(--tinta-2); padding: 7px 11px; border-radius: 8px; font-size: .925rem; font-weight: 500;
}
.topo nav a.link-topo:hover { background: var(--cartao-2); color: var(--tinta); text-decoration: none; }

.rodape { border-top: 1px solid var(--borda); margin-top: 72px; padding: 36px 0 44px; color: var(--tinta-3); font-size: .875rem; }
.rodape-grade { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.rodape a { color: var(--tinta-2); }

/* ---------------------------------------------------------------------------
   5. BOTÕES, CAMPOS E AVISOS
   --------------------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--pilula); border: 1px solid transparent;
  background: var(--marca); color: var(--marca-tinta);
  font: inherit; font-weight: 600; font-size: .94rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.botao:hover { background: var(--marca-escura); text-decoration: none; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao.secundario { background: var(--cartao); color: var(--tinta); border-color: var(--borda-forte); }
.botao.secundario:hover { background: var(--cartao-2); }
.botao.fantasma { background: transparent; color: var(--tinta-2); border-color: var(--borda); }
.botao.fantasma:hover { background: var(--cartao-2); color: var(--tinta); }
.botao.pequeno { padding: 6px 12px; font-size: .85rem; }
.botao.largura-total { width: 100%; }   /* não usar 'bloco' aqui: esse nome já é dos cartões de gráfico */

:where(.botao, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px;
}

label { display: block; font-size: .875rem; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .94rem;
  color: var(--tinta); background: var(--cartao);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--marca); }
input::placeholder { color: var(--tinta-3); }

.campo { margin-bottom: 16px; }
.ajuda { font-size: .82rem; color: var(--tinta-3); margin-top: 6px; }

.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--raio); font-size: .9rem;
  border: 1px solid var(--borda-forte); background: var(--cartao-2); color: var(--tinta-2);
  margin-bottom: 16px;
}
.aviso.erro     { border-color: color-mix(in srgb, var(--critico) 45%, transparent); background: color-mix(in srgb, var(--critico) 10%, var(--cartao)); color: var(--tinta); }
.aviso.sucesso  { border-color: color-mix(in srgb, var(--bom) 45%, transparent);     background: color-mix(in srgb, var(--bom) 10%, var(--cartao));     color: var(--tinta); }
.aviso.atencao  { border-color: color-mix(in srgb, var(--atencao) 55%, transparent); background: color-mix(in srgb, var(--atencao) 14%, var(--cartao)); color: var(--tinta); }
.aviso strong { color: var(--tinta); }

/* cartão genérico */
.cartao {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 20px; box-shadow: var(--sombra);
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--marca-clara); color: var(--marca); border: 1px solid color-mix(in srgb, var(--marca) 28%, transparent);
}

/* ---------------------------------------------------------------------------
   6. SITE PÚBLICO
   --------------------------------------------------------------------------- */
.capa { padding: 72px 0 24px; }
.capa-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.capa h1 { max-width: 15ch; }
.capa .chamada { font-size: 1.12rem; color: var(--tinta-2); max-width: 46ch; margin-bottom: 26px; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* "print" ilustrativo do painel — DADOS FICTÍCIOS, nunca dados de cliente */
.demo {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra); overflow: hidden;
}
.demo-barra { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borda); background: var(--cartao-2); }
.demo-bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--eixo); }
.demo-barra { border-radius: var(--raio-g) var(--raio-g) 0 0; }
.demo-corpo { padding: 16px; }
.demo-aviso { font-size: .76rem; color: var(--tinta-3); padding: 0 16px 14px; }

.secao { padding: 56px 0; }
.secao-titulo { max-width: 56ch; margin-bottom: 30px; }

.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.passo { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 22px; }
.passo-num {
  width: 32px; height: 32px; border-radius: var(--pilula); display: grid; place-items: center;
  background: var(--marca-clara); color: var(--marca); font-weight: 700; font-size: .92rem; margin-bottom: 12px;
}
.passo h3 { margin-bottom: 6px; }
.passo p { margin: 0; font-size: .92rem; }

.lista-limpa { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-limpa li { display: flex; gap: 10px; align-items: flex-start; color: var(--tinta-2); font-size: .95rem; }
.lista-limpa svg { flex: 0 0 auto; margin-top: 3px; color: var(--marca); }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }

.faixa-cta {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 34px; text-align: center; box-shadow: var(--sombra);
}

/* ---------------------------------------------------------------------------
   7. PAINEL
   --------------------------------------------------------------------------- */
.painel-topo-info { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: .85rem; color: var(--tinta-3); min-width: 0; }
.painel-cliente {
  font-weight: 650; color: var(--tinta); font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.painel-topo-info > span { white-space: nowrap; }

.abas {
  display: flex; gap: 4px; overflow-x: auto; margin-bottom: 20px; padding: 5px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--pilula);
  scrollbar-width: thin; box-shadow: var(--sombra);
}
.aba {
  flex: 0 0 auto; padding: 9px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 550; color: var(--tinta-3);
  border-radius: var(--pilula); white-space: nowrap; transition: background .15s, color .15s;
}
.aba:hover { color: var(--tinta); background: var(--cartao-2); }
.aba[aria-selected="true"] { color: var(--marca-tinta); background: var(--marca); font-weight: 650; }

.filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 16px; margin-bottom: 18px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g);
}
.filtros .campo { margin: 0; min-width: 150px; }
.filtros label { font-size: .78rem; margin-bottom: 4px; }
.filtros select, .filtros input { padding: 8px 12px; font-size: .88rem; border-radius: var(--pilula); }
.filtros .espaco { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* cartões de número (KPI) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 17px 20px; box-shadow: var(--sombra);
}
.kpi-rotulo { font-size: .78rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.kpi-valor { font-size: 1.85rem; font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; color: var(--tinta); }
.kpi-nota { font-size: .8rem; color: var(--tinta-3); margin-top: 5px; }
.kpi-valor.bom     { color: var(--bom-tinta); }
.kpi-valor.critico { color: var(--critico); }

/* blocos de gráfico */
.blocos { display: grid; gap: 16px; margin-bottom: 20px; }
.blocos.duas { grid-template-columns: 1fr 1fr; }
.bloco { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 18px 20px; }
.bloco-cabeca { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.bloco h3 { margin: 0; font-size: .98rem; }
.bloco-sub { font-size: .82rem; color: var(--tinta-3); margin: 0 0 16px; }
.area-grafico { position: relative; height: 320px; }
.area-grafico.baixa { height: 230px; }

/* BARRA DE FAIXAS (empilhada, feita em HTML puro)
   Formato de pílula: as pontas são totalmente arredondadas e cada pedaço tem
   2px de respiro, para as faixas não se confundirem. */
.faixa-linha { display: grid; grid-template-columns: 112px 1fr 66px; gap: 12px; align-items: center; margin-bottom: 10px; }
.faixa-nome { font-size: .88rem; font-weight: 600; color: var(--tinta); text-align: right; }
.faixa-trilha {
  display: flex; gap: 2px; height: 28px;
  border-radius: var(--pilula); overflow: hidden; background: var(--cartao-2);
}
.faixa-parte {
  position: relative; min-width: 0; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: #fff; border-radius: 4px;
}
.faixa-parte span { padding: 0 2px; white-space: nowrap; }
.faixa-parte:first-child { border-radius: var(--pilula) 4px 4px var(--pilula); }
.faixa-parte:last-child  { border-radius: 4px var(--pilula) var(--pilula) 4px; }
.faixa-parte:only-child  { border-radius: var(--pilula); }
.faixa-total { font-size: .82rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.f-muito-abaixo { background: var(--faixa-muito-abaixo); color: var(--tinta-muito-abaixo); }
.f-abaixo       { background: var(--faixa-abaixo);       color: var(--tinta-abaixo); }
.f-alinhado     { background: var(--faixa-alinhado);     color: var(--tinta-alinhado); }
.f-acima        { background: var(--faixa-acima);        color: var(--tinta-acima); }
.f-muito-acima  { background: var(--faixa-muito-acima);  color: var(--tinta-muito-acima); }

/* barras da tela de Sortimento (cobertura do catálogo) */
.c-1 { background: var(--cobertura-1); color: var(--tinta-cobertura-1); }
.c-2 { background: var(--cobertura-2); color: var(--tinta-cobertura-2); }
.c-3 { background: var(--cobertura-3); color: var(--tinta-cobertura-3); }
.c-4 { background: var(--cobertura-4); color: var(--tinta-cobertura-4); }

/* legenda */
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .82rem; color: var(--tinta-2); }
.legenda-item { display: inline-flex; align-items: center; gap: 7px; }
.legenda-cor { width: 11px; height: 11px; border-radius: var(--pilula); flex: 0 0 auto; }

/* pastilhas de faixa dentro da tabela */
.pastilha {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border-radius: 999px; font-size: .78rem; font-weight: 650; white-space: nowrap;
  border: 1px solid var(--borda-forte); color: var(--tinta);
}
.pastilha::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.p-muito-abaixo::before { background: var(--faixa-muito-abaixo); }
.p-abaixo::before       { background: var(--faixa-abaixo); }
.p-alinhado::before     { background: var(--faixa-alinhado); }
.p-acima::before        { background: var(--faixa-acima); }
.p-muito-acima::before  { background: var(--faixa-muito-acima); }

/* tabela */
.tabela-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.tabela-rolagem { overflow: auto; max-height: 66vh; max-width: 100%; }

/* Um item de grade (grid) tem largura mínima automática: se tiver uma tabela
   larga dentro, ele CRESCE e empurra a página para o lado, em vez de deixar a
   tabela rolar sozinha. Este "min-width: 0" é o que prende a tabela dentro do
   cartão — é o que faz o painel caber na tela do celular. */
.blocos > *, .kpis > *, .cartao, .bloco, .kpi, .tabela-caixa, .passo { min-width: 0; }
table.dados { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
table.dados thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cartao-2); color: var(--tinta-2);
  text-align: left; font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; cursor: pointer; user-select: none;
}
table.dados thead th[data-ordem]::after { content: ""; }
table.dados thead th.asc::after  { content: " ▲"; color: var(--marca); }
table.dados thead th.desc::after { content: " ▼"; color: var(--marca); }
table.dados td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
table.dados tbody tr:hover td { background: var(--cartao-2); }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dados thead th.num { text-align: right; }   /* o título acompanha o alinhamento dos números */
table.dados td.produto { min-width: 260px; max-width: 420px; }
table.dados .sim { color: var(--bom-tinta); font-weight: 700; }
table.dados .nao { color: var(--tinta-3); }
.tabela-rodape { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--borda); font-size: .84rem; color: var(--tinta-3); }
.tabela-rodape .espaco { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* mensagens de estado */
.vazio { padding: 48px 20px; text-align: center; color: var(--tinta-3); }
.vazio h3 { color: var(--tinta-2); }
.carregando { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta-3); font-size: .88rem; }
.girando { width: 14px; height: 14px; border: 2px solid var(--eixo); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2s; } }

/* tela de login, centralizada */
.caixa-centro { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 32px 16px 64px; }
.caixa-login { width: 100%; max-width: 408px; }
.caixa-login .cartao { padding: 28px; }
.caixa-login h1 { font-size: 1.5rem; margin-bottom: 6px; }
.caixa-login .sub { font-size: .92rem; color: var(--tinta-2); margin-bottom: 22px; }
.linha-abaixo { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }

/* páginas de texto (privacidade / termos) */
.texto-legal { max-width: 74ch; padding: 48px 0 24px; }
.texto-legal h2 { margin-top: 2em; font-size: 1.2rem; }
.texto-legal ul { color: var(--tinta-2); padding-left: 1.3em; }
.texto-legal li { margin-bottom: .45em; }

/* ---------------------------------------------------------------------------
   8. TELAS PEQUENAS
   --------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .capa-grade, .duas-colunas { grid-template-columns: 1fr; gap: 32px; }
  .passos { grid-template-columns: 1fr; }
  .blocos.duas { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }
  .capa { padding: 40px 0 8px; }
  .secao { padding: 38px 0; }
  .topo-interno { height: 56px; gap: 10px; }
  .topo nav a.link-topo { padding: 6px 8px; font-size: .88rem; }
  .painel-topo-info { font-size: .78rem; gap: 8px; }
  /* A data da coleta sai do topo no celular — ela continua visível no rodapé. */
  .painel-topo-info #info-coleta { display: none; }
  .marca-logo { font-size: .98rem; }
  .faixa-linha { grid-template-columns: 92px 1fr; }
  .faixa-total { display: none; }
  .kpi-valor { font-size: 1.55rem; }
  .area-grafico { height: 260px; }
  .filtros .espaco { margin-left: 0; width: 100%; }
}

/* impressão: sem fundo escuro, sem elementos de navegação */
@media print {
  .topo, .rodape, .filtros, .abas { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, .bloco, .kpi, .tabela-caixa { box-shadow: none; border-color: #ccc; }
}