/* Analytics · direção A (20/09/2026): escuro estilo Grafana + violeta como única cor de marca. Camada sobre tokens.css/analytics.css. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- tokens: claro ---- */
:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #F5F6FA; --surface: #FFFFFF; --surface-alt: #F1F2F7;
  --border-subtle: #E3E6EE; --border: #D6DAE4; --border-strong: #AEB5C6;
  --text: #12141C; --text-muted: #5B6474; --text-subtle: #8C94A6; --text-inverse: #FFFFFF;
  --accent: #5B3DF5; --accent-hover: #4A2FD6; --accent-active: #3D25B8; --accent-bg: rgba(91, 61, 245, .10); --accent-ring: rgba(91, 61, 245, .25);
  --success: #1B9E63; --success-bg: rgba(27, 158, 99, .12); --warning: #C97A00; --warning-bg: rgba(201, 122, 0, .12);
  --danger: #D63A5C; --danger-bg: rgba(214, 58, 92, .12); --info: #0E7DD1; --info-bg: rgba(14, 125, 209, .12);
  --r-md: 8px; --r-lg: 10px; --radius: 8px;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 8px 24px rgba(18, 20, 28, .08); --shadow-lg: 0 12px 28px rgba(18, 20, 28, .12);
  --hero-grad: linear-gradient(160deg, #EEEAFF 0%, #FFFFFF 60%);
  --header-grad: #FFFFFF;
}
/* ---- tokens: escuro ---- */
:root[data-theme="dark"] {
  --bg: #0B0E14; --surface: #121722; --surface-alt: #171D2A;
  --border-subtle: #1D2433; --border: #232B3B; --border-strong: #2E3850;
  --text: #E6EAF2; --text-muted: #8A94A8; --text-subtle: #5C667A; --text-inverse: #0B0E14;
  --accent: #7C5CFF; --accent-hover: #8F73FF; --accent-active: #A08CFF; --accent-bg: rgba(124, 92, 255, .16); --accent-ring: rgba(124, 92, 255, .35);
  --success: #3DDC97; --success-bg: rgba(61, 220, 151, .14); --warning: #FFB454; --warning-bg: rgba(255, 180, 84, .14);
  --danger: #FF5C7A; --danger-bg: rgba(255, 92, 122, .14); --info: #5AB0FF; --info-bg: rgba(90, 176, 255, .14);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);
  --hero-grad: linear-gradient(160deg, #1A1740 0%, #121722 60%);
  --header-grad: linear-gradient(180deg, #0F1420, #0B0E14);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B0E14; --surface: #121722; --surface-alt: #171D2A;
  --border-subtle: #1D2433; --border: #232B3B; --border-strong: #2E3850;
  --text: #E6EAF2; --text-muted: #8A94A8; --text-subtle: #5C667A; --text-inverse: #0B0E14;
  --accent: #7C5CFF; --accent-hover: #8F73FF; --accent-active: #A08CFF; --accent-bg: rgba(124, 92, 255, .16); --accent-ring: rgba(124, 92, 255, .35);
  --success: #3DDC97; --success-bg: rgba(61, 220, 151, .14); --warning: #FFB454; --warning-bg: rgba(255, 180, 84, .14);
  --danger: #FF5C7A; --danger-bg: rgba(255, 92, 122, .14); --info: #5AB0FF; --info-bg: rgba(90, 176, 255, .14);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);
  --hero-grad: linear-gradient(160deg, #1A1740 0%, #121722 60%);
  --header-grad: linear-gradient(180deg, #0F1420, #0B0E14);
} }

/* ---- estrutura ---- */
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.app-header { min-height: 52px; padding: 0 var(--s-6); background: var(--header-grad); border-bottom: 1px solid var(--border); justify-content: flex-start; gap: var(--s-6); }
.brand-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -.01em; }
.brand-link::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.workspace { padding: var(--s-6) var(--s-6) var(--s-8); }
.eyebrow { display: none; }
.intro h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.intro .muted { font-size: var(--fs-base); }
.panel { border-radius: var(--r-lg); box-shadow: none; }
.filters { padding: var(--s-3) var(--s-4); }
select, input, button { border-radius: var(--r-md); }
button { font-family: var(--font-sans); }

/* ---- tiles ---- */
.tile { padding: var(--s-4) var(--s-5); }
.tile h2 { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.tile .stat-value { font-family: var(--font-mono); font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; margin: 8px 0 6px; }
.delta, .tile-foot { font-family: var(--font-sans); font-size: 12px; min-height: 0; }
.grid-stack-item[gs-id="revenue"] .tile, .grid-stack-item[gs-id="active"] .tile, .grid-stack-item:first-child .tile.first { border-color: var(--accent); background: var(--hero-grad); }

/* ---- painéis de gráfico e tabela ---- */
.chart-panel, .summary-panel { padding: var(--s-4) var(--s-5); }
.chart-header h2, .summary-panel h2, .chart-panel > h2 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.chart-header p, .segments-header p { font-size: 12px; }
.segments-table { font-size: 13px; }
.segments-table th { font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); }
.segments-table td { border-bottom: 1px solid var(--border-subtle); }
.segments-table .numeric { font-family: var(--font-mono); font-size: 12.5px; }
.segments-table [data-key="series"], .segments-table td:nth-child(2) { font-size: 12px; }
.segments-table .positive, .segments-table .negative, .segments-table .warning { border-radius: 5px; }
.weak-badge { border-radius: 999px; }
.zoom-tools button, .columns-menu summary { border-radius: var(--r-md); }
#pay-range button, #pay-play, .map-controls button { border-radius: var(--r-md); }
#pay-range [aria-pressed="true"] { background: var(--accent-bg); }
.theme-toggle { border-radius: 999px; }

/* ---- grade RFML e legendas ---- */
.rf-grid td, .rf-grid th { border-radius: 6px; }
.postal-legend, .pay-overlay { border-radius: var(--r-md); }
.delta.positive::before { content: "▲ "; } .delta.negative::before { content: "▼ "; }

/* ---- header: marca + abas + contexto + ações ---- */
.app-header { display: flex; align-items: stretch; gap: var(--s-6); min-height: 52px; padding: 0 var(--s-6); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Leaflet usa z-index até 1000 dentro do mapa; o header fica acima e o menu do usuário acima do header. */
.user-menu-body { z-index: 1001; }
.brand-link { text-decoration: none; color: var(--text); font-weight: 600; align-self: center; }
.app-nav { display: flex; gap: var(--s-5); }
.app-nav a { display: inline-flex; align-items: center; color: var(--text-muted); text-decoration: none; font-size: var(--fs-md); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.app-nav a:hover { color: var(--text); } .app-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.app-header #status, .app-context { margin: 0 var(--s-3) 0 auto; align-self: center; flex: 1; text-align: right; color: var(--text-muted); font-size: 13px; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header #status.error { color: var(--danger); }
#refresh.icon-btn { background: transparent; color: var(--text-muted); }
.account { display: flex; align-items: center; gap: var(--s-2); margin-left: 0; }
.icon-btn, .theme-toggle { width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover, .theme-toggle:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
#refresh[disabled] svg { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.user-menu { position: relative; margin: 0; border: 0; padding: 0; }
.user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; color: var(--text); font-size: 13px; }
.user-menu summary::-webkit-details-marker { display: none; } .user-menu[open] summary, .user-menu summary:hover { background: var(--surface-alt); border-color: var(--border); }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.chev { color: var(--text-subtle); font-size: 10px; }
.user-menu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; display: grid; gap: var(--s-3); padding: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: 12px; }
.user-menu-body button { width: 100%; }
/* ---- faixa do título + filtros na mesma linha ---- */
.page-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-bar .intro { margin: 0; } .page-bar .intro > div { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.page-bar .intro h1 { margin: 0; } .page-bar .intro .muted { margin: 0; }
.page-bar .filters { border: 0; background: none; padding: 0; margin: 0; align-items: center; gap: var(--s-3); }
.page-bar .filters label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-muted); }
.page-bar .filters select { min-height: 32px; padding: 4px 28px 4px 10px; font-size: 13px; }
#comparison { margin-left: 0; padding: 0; }
.layout-toolbar { margin: -8px 0 var(--s-3); }
@media (max-width: 767px) { .app-header { flex-wrap: wrap; gap: var(--s-3); padding: var(--s-2) var(--s-3); } .app-nav { order: 3; width: 100%; gap: var(--s-4); } .app-header #status { display: none; } .user-name { display: none; } .page-bar .filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }

.header-btn { min-height: 32px; padding: 0 12px; margin: 0 4px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.header-btn:hover { color: var(--text); border-color: var(--text-muted); }
.header-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.layout-toolbar { display: none; }
@media (max-width: 767px) { .header-btn { padding: 0 8px; } }

/* legenda compacta nos tiles da campanha */
.tile-foot .lg { display: flex; align-items: center; gap: 5px; margin: 0 0 1px; font-size: 10.5px; line-height: 14px; color: var(--text-muted); white-space: nowrap; }
.grid-stack .tile { position: relative; }
.grid-stack .tile .tile-foot:has(.lg) { position: absolute; top: 14px; right: 16px; margin: 0; flex: none; text-align: left; }
.grid-stack .tile .spark { flex: 1; min-height: 90px; margin-bottom: 0; }
.grid-stack .tile .stat-value { margin: 6px 0 4px; font-size: clamp(18px, 1.45vw, 24px); white-space: nowrap; overflow-wrap: normal; max-width: none; } .grid-stack .tile .delta { min-height: 0; padding: 2px 6px; }
.grid-stack .tile .tile-foot:has(.lg) { max-width: 40%; overflow: hidden; }
.tile-foot .lg::before { content: ""; width: 12px; height: 0; border-top: 2px solid var(--accent); }
.tile-foot .lg-day::before { display: none; } .tile-foot .lg-day { color: var(--text-subtle); }
.tile-foot .lg-average::before { border-top: 1px dashed var(--text-muted); }
.tile-foot .lg-yearago::before { border-top-color: var(--warning); }