/* Layout: faixa institucional AMT · filtros numa linha · indicadores · grelha de gráficos 2 colunas · quadro final */
:root {
  --bg: #ffffff; --surface: #f3f6f7; --line: #dbe3e6; --ink: #14232b; --ink-2: #3f4f57; --ink-3: #5b6a72;
  --brand: #003a52; --accent: #0a7f8c; --accent-soft: #d6eef1; --prev: #93a7b0; --up: #b0461a; --down: #07707c;
  --band: #003a52; --band-ink: #ffffff; --band-ink-2: #bfe3e7;
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d1a20; --surface: #15262e; --line: #26404b; --ink: #e8f0f2; --ink-2: #b9c9cf; --ink-3: #8fa3ab;
  --brand: #8fdce4; --accent: #3fb3c2; --accent-soft: #173f48; --prev: #5e7480; --up: #ff9e78; --down: #6fd0db;
  --band: #0a2c3b; --band-ink: #ffffff; --band-ink-2: #9fd4db; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0d1a20; --surface: #15262e; --line: #26404b; --ink: #e8f0f2; --ink-2: #b9c9cf; --ink-3: #8fa3ab;
  --brand: #8fdce4; --accent: #3fb3c2; --accent-soft: #173f48; --prev: #5e7480; --up: #ff9e78; --down: #6fd0db;
  --band: #0a2c3b; --band-ink: #ffffff; --band-ink-2: #9fd4db; color-scheme: dark }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45 }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
header.band { background: var(--band); color: var(--band-ink) }
header.band .wrap { padding-block: 22px 20px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between }
.brand { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.brand .org { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--band-ink-2) }
.brand h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; text-wrap: balance }
.brand .sub { color: var(--band-ink-2); font-size: 15px }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap }
.seg button { font: 600 14px var(--font-body); color: var(--band-ink); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 40px }
.seg button[aria-pressed="true"] { background: var(--band-ink); color: #003a52 }
.seg button:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.semlab { font-size: 12px; letter-spacing: .08em; color: var(--band-ink-2); font-weight: 600; margin-bottom: 6px }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding-block: 18px 6px }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; flex: 1 1 200px; min-width: 0 }
.filters select, .filters input { font: 15px var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; min-height: 42px; width: 100%; text-transform: none; letter-spacing: 0 }
.btn { font: 600 14px var(--font-body); color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 8px; padding: 9px 14px; min-height: 42px; cursor: pointer; white-space: nowrap }
.btn:hover { background: var(--accent-soft) }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 6px 4px; min-height: 8px }
.chip { font-size: 13px; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 4px 10px; display: inline-flex; gap: 6px; align-items: center }
.chip button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; min-height: 24px }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-block: 10px 18px }
.kpi { background: var(--surface); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.kpi .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--brand) }
.kpi .v.up { color: var(--up) } .kpi .v.down { color: var(--down) }
.kpi .l { font-size: 13px; color: var(--ink-2) }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 16px }
.card { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.card.wide { grid-column: 1 / -1 }
.card h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--brand) }
.card .note { font-size: 13px; color: var(--ink-3) }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-2) }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }

/* colunas verticais */
.cols { display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 1px solid var(--line); padding-top: 18px }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; cursor: default }
.col .bar { width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--prev) }
.col.cur .bar { background: var(--accent) }
.col .val { font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 3px }
.axis { display: flex; gap: 4px; font-size: 12px; color: var(--ink-3) }
.axis span { flex: 1; text-align: center; min-width: 0; white-space: nowrap; overflow: hidden }

/* barras horizontais */
.hlist { display: flex; flex-direction: column; gap: 2px }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; grid-template-areas: "nm n d" "tr tr tr"; column-gap: 10px; row-gap: 3px; align-items: center; padding: 5px 6px; border-radius: 6px; background: transparent; border: 0; text-align: left; font: inherit; color: inherit; width: 100% }
button.hrow { cursor: pointer } button.hrow:hover { background: var(--surface) }
.hrow .nm { grid-area: nm; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hrow .track { grid-area: tr; position: relative; height: 12px }
.hrow .ghost { position: absolute; left: 0; top: 0; height: 12px; border: 1.5px solid var(--prev); border-radius: 0 4px 4px 0 }
.hrow .fill { position: absolute; left: 0; top: 2px; height: 8px; background: var(--accent); border-radius: 0 4px 4px 0 }
.hrow .n { grid-area: n; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--brand) }
.hrow .d { grid-area: d; font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums }
.up { color: var(--up) } .down { color: var(--down) } .na { color: var(--ink-3) }
.hhead { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 10px; padding: 0 6px 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line) }
.hhead span:nth-child(2), .hhead span:nth-child(3) { text-align: right }

/* meios */
.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px }
.stack div { height: 100%; display: flex; align-items: center; padding-left: 8px; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden }
.srow { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center }
.srow .lb { font-size: 13px; font-weight: 600; color: var(--ink-2) }
.c0 { background: var(--brand) } .c1 { background: var(--accent) } .c2 { background: var(--prev) }
:root:not([data-theme="light"]) .stack .c0 { color: var(--bg) }
@media (prefers-color-scheme: light) { :root .stack .c0 { color: #fff } }
:root[data-theme="light"] .stack .c0 { color: #fff }

table.q { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.tbl { overflow-x: auto }
table.q th, table.q td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap }
table.q th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600 }
table.q th:first-child, table.q td:first-child, table.q th:nth-child(2), table.q td:nth-child(2) { text-align: left }
table.q td:first-child { font-weight: 600; white-space: normal; min-width: 180px }
table.q tr.tot td { font-weight: 700; border-top: 1.5px solid var(--ink); border-bottom: 0 }
table.q tbody tr { cursor: pointer } table.q tbody tr:hover td { background: var(--surface) }
footer { color: var(--ink-3); font-size: 13px; padding-block: 8px 28px; display: flex; flex-direction: column; gap: 4px }

#tip { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.35; padding: 7px 10px; border-radius: 6px; max-width: 280px; opacity: 0; transition: opacity .1s }
#tip.on { opacity: 1 }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) } .grid { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } .hrow, .hhead { grid-template-columns: minmax(0, 1fr) 56px 60px; column-gap: 6px } .axis { font-size: 10.5px } .col .val { display: none } .col.cur .val, .col.hl .val { display: block } }
@media (prefers-reduced-motion: reduce) { #tip { transition: none } }

/* grafismo: ícones de traço fino, uma só cor */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.nmw { grid-area: nm; display: flex; align-items: center; gap: 8px; min-width: 0 }
.nmw .ico { color: var(--accent) }
.nmw .nm { min-width: 0 }
header.band { position: relative; overflow: hidden }
header.band .wrap { position: relative; z-index: 1 }
.scene { position: absolute; right: max(16px, calc((100% - 1240px) / 2 + 16px)); bottom: 0; width: min(760px, calc(100% - 32px)); height: auto; color: var(--band-ink-2); opacity: .42; pointer-events: none }
header.band .wrap { padding-bottom: clamp(56px, 10.5vw, 96px) }
.scene * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.kpi { position: relative }
.kpi .ki { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; color: var(--accent); opacity: .85 }
.modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-bottom: 18px }
.mode { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; min-height: 44px }
.mode:hover { background: var(--surface) }
.mode[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.mode .mi { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none }
.mode[aria-pressed="true"] .mi { background: var(--bg) }
.mode .mi .ico { width: 24px; height: 24px; stroke-width: 1.6 }
.mode .mt { display: flex; flex-direction: column; min-width: 0 }
.mode .mn { font-size: 13px; line-height: 1.25; color: var(--ink-2) }
.mode .mv { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.2 }
.mode .md { font-size: 12.5px; font-weight: 600 }
.card h2 { display: flex; align-items: center; gap: 8px }
.card h2 .ico { color: var(--accent); width: 20px; height: 20px }
table.q td .qn { display: inline-flex; align-items: center; gap: 8px }
table.q td .qn .ico { color: var(--accent) }
@media (max-width: 900px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 520px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)) } .mode .sfx { display: none } }