:root {
  --brown-dark: #3B1A0E;
  --brown-mid: #5C2E14;
  --orange: #B5621B;
  --salmon: #D4896A;
  --tan: #C4A06A;
  --bg-white: #FAFAF8;
  --bg-gray: #F0EEEB;
  --bg-card: #FFFFFF;
  --text-dark: #2A1A0F;
  --text-mid: #5C3D2E;
  --text-light: #8C7568;
  --border: #E5DDD6;
  --accent-red: #A03020;
  --accent-negro: #3B1A0E;
  --masc-blue: #2563EB;
  --fem-red: #DC2626;
  --black: #1A1A1A;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Sans',sans-serif; background:var(--bg-white); color:var(--text-dark); font-size:14px; line-height:1.5; }

/* ── TOPBAR ── */
.topbar {
  background: var(--black);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.topbar span {
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Noto Sans', sans-serif;
}
.topbar .dot { color: var(--orange); }

/* ===== HEADER - fundo branco ===== */
.header {
  background:#FFFFFF;
  padding:20px 32px;
  display:flex;
  align-items:center;
  gap:22px;
  border-bottom:3px solid var(--orange);
}
.header .logo-wrap {
  flex-shrink:0;
  width:130px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header .logo-wrap img {
  width:100%;
  height:100%;
  object-fit:contain;
  
}
.header-text h1 {
  font-family:'Fira Sans Condensed',sans-serif;
  font-weight:800;
  font-size:24px;
  color:var(--brown-dark);
  letter-spacing:0.3px;
  line-height:1.2;
}
.header-text p {
  font-family:'Noto Sans',sans-serif;
  font-weight:400;
  font-size:13px;
  color:var(--text-light);
  margin-top:4px;
}

.filters-bar { background:var(--bg-gray); padding:12px 32px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; border-bottom:1px solid var(--border); }
.filter-group { display:flex; flex-direction:column; gap:3px; }
.filter-group label { font-family:'Fira Sans Condensed',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-light); }
.filter-group select { font-family:'Noto Sans',sans-serif; font-size:12px; padding:5px 10px; border:1px solid var(--border); border-radius:5px; background:#fff; color:var(--text-dark); min-width:110px; cursor:pointer; }
.filter-group select:focus { outline:2px solid var(--orange); border-color:var(--orange); }
.btn-clear { font-family:'Fira Sans Condensed',sans-serif; background:var(--orange); color:#fff; border:none; border-radius:5px; padding:6px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:background .2s; margin-bottom:1px; }
.btn-clear:hover { background:#9A5418; }

.kpis { padding:18px 32px; display:flex; gap:14px; flex-wrap:wrap; }
.kpi { background:var(--bg-card); border-radius:10px; padding:14px 20px; flex:1 1 150px; border:1px solid var(--border); position:relative; overflow:hidden; }
.kpi .kpi-label { font-family:'Noto Sans',sans-serif; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-light); margin-bottom:5px; }
.kpi .kpi-value { font-family:'Fira Sans Condensed',sans-serif; font-size:22px; font-weight:800; line-height:1.1; }
.kpi .kpi-sub { font-family:'Noto Sans',sans-serif; font-size:11px; color:var(--text-light); margin-top:2px; }

.tabs { padding:0 32px; display:flex; gap:0; border-bottom:2px solid var(--border); background:var(--bg-white); overflow-x:auto; }
.tab-btn { font-family:'Fira Sans Condensed',sans-serif; font-size:13px; font-weight:600; padding:10px 18px; border:none; background:none; cursor:pointer; color:var(--text-light); border-bottom:3px solid transparent; transition:all .2s; white-space:nowrap; }
.tab-btn.active { color:var(--brown-dark); border-bottom-color:var(--orange); }
.tab-btn:hover { color:var(--brown-mid); }

.content { padding:20px 32px; }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); }
.grid-1 { grid-template-columns:1fr; }

.card { background:var(--bg-card); border-radius:12px; padding:22px; border:1px solid var(--border); box-shadow:0 1px 4px rgba(59,26,14,0.05); }

.dl-btn { position:absolute; top:14px; right:14px; background:var(--bg-gray); border:1px solid var(--border); border-radius:5px; padding:4px 10px; font-family:'Noto Sans',sans-serif; font-size:10px; color:var(--text-light); cursor:pointer; display:flex; align-items:center; gap:4px; transition:all .2s; z-index:5; }
.dl-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.dl-btn svg { width:12px; height:12px; }
.card { position:relative; }

.card h3 { font-family:'Fira Sans Condensed',sans-serif; font-size:15px; font-weight:700; color:var(--brown-dark); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--bg-gray); }

.intersec-summary { display:flex; justify-content:center; gap:24px; margin-top:14px; flex-wrap:wrap; }
.intersec-item { text-align:center; }
.intersec-item .val { font-family:'Fira Sans Condensed',sans-serif; font-size:24px; font-weight:800; }
.intersec-item .lbl { font-family:'Noto Sans',sans-serif; font-size:10px; color:var(--text-light); font-weight:500; }

table { width:100%; border-collapse:collapse; font-family:'Noto Sans',sans-serif; font-size:12px; }
thead th { font-family:'Fira Sans Condensed',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--brown-dark); padding:8px 12px; border-bottom:2px solid var(--orange); text-align:left; }
thead th.r { text-align:right; }
tbody td { padding:7px 12px; border-bottom:1px solid var(--border); }
tbody td.r { text-align:right; }
tbody tr:nth-child(even) { background:var(--bg-gray); }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
td.bold { font-weight:700; }
td.accent { color:var(--orange); font-weight:700; font-family:'Fira Sans Condensed',sans-serif; }

.footer { padding:14px 32px 32px; text-align:center; color:var(--text-light); font-size:10px; font-family:'Noto Sans',sans-serif; }

canvas { max-width:100%; }

@media(max-width:860px) {
  .header { padding:16px 18px; gap:14px; }
  .header .logo-wrap { width:90px; height:90px; }
  .header-text h1 { font-size:18px; }
  .filters-bar, .kpis, .content, .tabs { padding-left:18px; padding-right:18px; }
  .grid-2 { grid-template-columns:1fr; }
  .kpi .kpi-value { font-size:18px; }
}