/* Painel de categoria — estilo compartilhado (paleta clara) */
:root{ --agua-cl:#EDF6F5; --agua-ln:#CBE5E4; --agua-esc:#2F7573; --areia-cl:#FBF7EF; --areia-ln:#E8DCC4; }

nav{ background:#fff; border-bottom:1px solid var(--linha); }
.nav-logo{ color:var(--preto); }
.nav-links a{ color:#9a9a9a; }
.nav-links a:hover{ color:var(--preto); }
.nav-links a.on{ color:var(--preto); border-bottom-color:var(--laranja); }

.phead2{ background:var(--areia-cl); border:1px solid var(--areia-ln); border-radius:14px; padding:34px 30px; margin-bottom:22px; }
.phead2 .rule{ width:48px; height:4px; background:var(--laranja); border-radius:2px; margin-bottom:18px; }
.phead2 h1{ font-size:2.1em; letter-spacing:-.03em; }
.phead2 h1 em{ color:var(--laranja); font-style:normal; }
.phead2 .sub{ margin-top:10px; }

/* filtro de periodo */
.filtro{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:#fff;
  border:1px solid var(--linha); border-radius:12px; padding:16px 20px; }
.fchips{ display:flex; gap:6px; flex-wrap:wrap; }
.fchip{ font-family:'Roboto Condensed'; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; background:#fff; border:1px solid var(--linha); color:#7a7a7a;
  padding:7px 15px; border-radius:20px; cursor:pointer; transition:.15s; }
.fchip:hover{ border-color:#bbb; color:var(--preto); }
.fchip.on{ background:var(--laranja); border-color:var(--laranja); color:#fff; }
.frange{ display:flex; align-items:center; gap:8px; }
.frange label{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--cinza); font-weight:700; }
.frange select{ font-family:'Roboto',sans-serif; font-size:13px; padding:6px 10px;
  border:1px solid var(--linha); border-radius:8px; background:#fff; color:var(--preto);
  outline:none; cursor:pointer; }
.frange select:focus{ border-color:var(--agua-esc); }
.pnow{ font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--cinza); margin:14px 0 0; }
.pnow b{ color:var(--laranja); }

/* nota técnica sobre a natureza do dado */
.nota-tec{ background:#fff; border:1px solid var(--linha); border-left:3px solid var(--areia-ln);
  border-radius:10px; padding:18px 22px; margin:20px 0 0; }
.nota-tec .nt{ font-family:'Roboto Condensed'; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--cinza); font-weight:700; margin-bottom:8px; }
.nota-tec p{ font-size:.88em; line-height:1.6; color:#555; margin-bottom:8px; }
.nota-tec p:last-child{ margin-bottom:0; }
.nota-tec b{ color:var(--preto); }

/* barras */
.bar .fill.a{ background:#9CCFCD; }
.bar .lab{ width:66px; }
.legenda{ display:flex; gap:18px; font-family:'Roboto Condensed'; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--cinza); margin:6px 0 4px; }
.legenda i{ display:inline-block; width:11px; height:11px; border-radius:3px;
  margin-right:5px; vertical-align:-1px; font-style:normal; }

/* barra de busca da tabela de produtos */
.pbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.pbar input{ font-family:'Roboto',sans-serif; font-size:13px; padding:8px 14px;
  border:1px solid var(--linha); border-radius:20px; background:#fff; color:var(--preto);
  min-width:260px; outline:none; transition:border-color .15s; }
.pbar input:focus{ border-color:var(--agua-esc); }
.pbar input::placeholder{ color:#b0b0b0; }
/* .pmais tambem migrou para o style.css */

th.sortavel{ cursor:pointer; user-select:none; position:relative; padding-right:20px; }
th.sortavel::after{ content:"\2195"; position:absolute; right:7px; opacity:.28; font-size:11px; }
th.sortavel.asc::after{ content:"\2191"; opacity:1; color:var(--laranja); }
th.sortavel.desc::after{ content:"\2193"; opacity:1; color:var(--laranja); }
.tot td{ background:var(--agua-cl); border-top:1px solid var(--agua-ln); }

/* o produto com miniatura clicavel vive no style.css — e usado tambem em fabricantes */

@media(max-width:640px){ .filtro{ gap:14px; } .pbar input{ min-width:0; flex:1; } }

/* explicacao de criterio acima de tabelas de valor */
.criterio{ background:var(--areia-cl); border:1px solid var(--areia-ln); border-radius:10px;
  padding:13px 16px; margin:0 0 14px; font-size:.87em; line-height:1.55; color:#4a4a4a; }
.criterio b{ color:var(--preto); }
/* alerta de dado incompleto */
.alerta{ background:#FFF6F1; border:1px solid #F7D8C6; border-left:3px solid var(--laranja);
  border-radius:10px; padding:13px 16px; margin:0 0 14px; font-size:.87em; line-height:1.55; color:#5a3a28; }
.alerta b{ color:var(--preto); }