:root {
/*
* Vetor RVR1 Design System (EPIC 4) — estas variaveis passam a apontar
* para os design tokens oficiais (design_tokens.css, carregado antes
* deste arquivo em base.html). O fallback hex de cada var() e o valor
* oficial do token (nao o valor antigo do Workbench), entao a aparencia
* fica correta mesmo se design_tokens.css falhar ao carregar.
* --purple nao tem token oficial equivalente (paleta do Design System nao
* define roxo) — mantido com o valor original, sem alteracao, ate decisao
* de design (ver EPIC4_RELATORIO.md, pendencias).
* --muted-2 e --shadow-md foram removidos: nenhuma regra deste arquivo os
* referenciava (confirmado por busca) — CSS morto (FRONTEND_AUDITORIA.md).
*/
--bg: var(--rvr1-color-cinza-claro, #F2F4F7);
--surface: var(--rvr1-color-branco-quase-puro, #F9FBFC);
--surface-soft: var(--rvr1-color-cinza-claro, #F2F4F7);
--border: var(--rvr1-color-cinza-medio, #D9DEE7);
--border-strong: var(--rvr1-color-cinza-escuro, #687280);
--text: var(--rvr1-color-grafite, #0F172A);
--muted: var(--rvr1-color-cinza-escuro, #687280);
--brand: var(--rvr1-color-azul-institucional, #0A3D91);
--brand-strong: var(--rvr1-color-azul-profundo, #061B3D);
--blue: var(--rvr1-color-azul-claro, #2E78FF);
--green: var(--rvr1-color-verde-estrategico, #00B67A);
--purple: var(--rvr1-color-azul-glow, #219ebc); /* roxo de IA aposentado -> teal (paleta CTO) */
--warning: var(--rvr1-color-warning, #EB5A00);
--shadow-sm: var(--rvr1-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
--radius: var(--rvr1-radius-md, 6px);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--rvr1-font-family, "Inter"), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
}
code {
color: var(--text);
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.12rem 0.35rem;
}
.app-shell {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
min-height: 100dvh;
}
.sidebar {
position: sticky;
top: 0;
height: 100dvh;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.25rem;
background: var(--rvr1-color-navy-quase-preto, #020A1A);
color: #dbeafe;
overflow: hidden;
}
/* Background oficial (motivo-ancora da marca, DESIGN_DNA_VETOR.md secao 3)
aplicado em opacidade baixa para nao comprometer contraste/legibilidade
do menu (Fase 5 do EPIC 4). */
.sidebar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("/static/background_network.svg") center / cover no-repeat;
opacity: 0.16;
pointer-events: none;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 48px;
}
.brand-logo {
/* O fundo navy do logo = navy do sidebar (--rvr1-color-navy-quase-preto):
a arte se funde ao fundo, sem costura. Cantos arredondados p/ badge suave. */
width: 44px;
height: 44px;
flex: none;
border-radius: 10px;
object-fit: cover;
display: block;
}
.brand strong,
.brand small {
display: block;
}
.brand small {
color: #93a4ba;
font-size: 0.75rem;
}
.sidebar-nav {
display: grid;
gap: 0.2rem;
}
.sidebar-section {
margin: 0.9rem 0 0.15rem;
padding: 0 0.75rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7a90;
}
.sidebar-section:first-child {
margin-top: 0.2rem;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 42px;
padding: 0.65rem 0.75rem;
border-radius: var(--radius);
color: #b6c3d6;
font-size: 0.92rem;
}
.sidebar-link i,
.sidebar-link .nav-icon {
width: 18px;
height: 18px;
flex: none;
color: var(--blue);
}
.sidebar-link:hover,
.sidebar-link.active {
background: rgba(148, 163, 184, 0.16);
color: #ffffff;
}
.sidebar-footer {
margin-top: auto;
display: flex;
align-items: center;
gap: 0.55rem;
color: #a8b6c9;
font-size: 0.82rem;
}
.system-dot {
width: 8px;
height: 8px;
border-radius: 99px;
background: var(--green);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent);
}
.workspace {
min-width: 0;
}
.topbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
padding: 1rem 2rem;
background: rgba(247, 248, 251, 0.88);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(16px);
}
.global-search,
.search-shell {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
min-height: 44px;
padding: 0 0.9rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.global-search {
max-width: 520px;
}
.global-search input,
.search-input {
width: 100%;
border: 0;
background: transparent;
box-shadow: none;
color: var(--text);
font-size: 0.95rem;
}
.global-search input:focus,
.search-input:focus {
outline: 0;
box-shadow: none;
}
.topbar-status {
display: flex;
align-items: center;
gap: 0.8rem;
}
.status-pill,
.status-badge {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 26px;
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-soft);
color: var(--muted);
font-size: 0.78rem;
font-weight: 650;
}
.status-pill,
.status-success {
color: var(--green);
background: color-mix(in srgb, var(--green) 14%, var(--surface));
border-color: color-mix(in srgb, var(--green) 40%, var(--surface));
}
.status-warning {
color: var(--warning);
background: color-mix(in srgb, var(--warning) 14%, var(--surface));
border-color: color-mix(in srgb, var(--warning) 40%, var(--surface));
}
.user-chip {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--muted);
font-size: 0.82rem;
}
.user-chip span {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 999px;
background: #111827;
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
}
.content {
display: grid;
gap: 1.25rem;
max-width: 1480px;
margin: 0 auto;
padding: 1.6rem 2rem 3rem;
}
.page-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.25rem;
}
.eyebrow {
display: block;
color: var(--brand);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.page-heading h1,
.municipio-hero h1 {
margin: 0.1rem 0 0;
font-size: clamp(1.7rem, 2.4vw, 2.5rem);
font-weight: 760;
}
.page-heading p,
.municipio-hero p,
.dashboard-hero p,
.panel-heading p,
.search-card p {
margin: 0.35rem 0 0;
color: var(--muted);
}
.dashboard-hero,
.municipio-hero,
.search-card,
.wb-panel,
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.dashboard-hero,
.municipio-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.4rem;
}
.dashboard-hero h2 {
max-width: 780px;
margin: 0.15rem 0 0;
font-size: clamp(1.35rem, 2vw, 2rem);
font-weight: 760;
}
/*
* Imagens oficiais do Vetor RVR1 (missao "Integracao das imagens oficiais").
* .rvr1-banner: banner ilustrativo em ![]()
proprio (topo de pagina),
* nunca atras de texto — as imagens sao infograficos densos com texto
* proprio, sobrepor outro texto reduziria legibilidade (Fase 5).
*/
.rvr1-banner {
display: block;
width: 100%;
height: auto; /* usa o aspect-ratio intrinseco dos atributos width/height do ![]()
— sem cortar o conteudo do banner (logo, CTA) */
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 1.25rem;
background: var(--surface-soft);
}
/* .dashboard-hero recebe a imagem de fundo oficial como camada decorativa
de baixa opacidade (mesmo padrao do EPIC 4 na sidebar/empty-state) —
preserva o texto/contraste existentes sem nenhuma alteracao. */
.dashboard-hero {
position: relative;
overflow: hidden;
}
.dashboard-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("/static/images/vetor_rvr1_dashboard_background.webp") center / cover no-repeat;
opacity: 0.07;
pointer-events: none;
}
.dashboard-hero > * {
position: relative;
z-index: 1;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.hero-meta,
.section-tabs,
.download-grid,
.mini-kpis {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.hero-scoreboard {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 0.75rem;
min-width: 280px;
}
.hero-scoreboard div {
padding: 0.9rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.hero-scoreboard span,
.hero-scoreboard small,
.kpi-card span,
.kpi-card small {
display: block;
color: var(--muted);
font-size: 0.8rem;
}
.hero-scoreboard strong,
.kpi-card strong {
display: block;
margin-top: 0.15rem;
color: var(--text);
font-size: 1.55rem;
line-height: 1.1;
}
.section-tabs {
position: sticky;
top: 72px;
z-index: 5;
padding: 0.7rem;
background: rgba(247, 248, 251, 0.9);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(14px);
}
.section-tabs a {
padding: 0.45rem 0.7rem;
border-radius: 7px;
color: var(--muted);
font-size: 0.86rem;
font-weight: 650;
}
.section-tabs a:hover,
.section-tabs a:focus-visible {
background: var(--border);
color: var(--text);
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.kpi-card {
min-height: 126px;
padding: 1rem;
}
.kpi-card::before {
content: "";
display: block;
width: 32px;
height: 4px;
margin-bottom: 1rem;
border-radius: 999px;
background: var(--border-strong);
}
.kpi-blue::before { background: var(--blue); }
.kpi-green::before { background: var(--green); }
.kpi-purple::before { background: var(--purple); }
.kpi-warning::before { background: var(--warning); }
.content-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.wb-panel {
padding: 1rem;
}
.panel-heading {
margin-bottom: 1rem;
}
.panel-heading h2 {
margin: 0;
font-size: 1rem;
font-weight: 760;
}
.alert-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.alert-card-warning {
background: color-mix(in srgb, var(--warning) 10%, var(--surface));
border-color: color-mix(in srgb, var(--warning) 35%, var(--surface));
}
.alert-card strong {
display: block;
font-size: 1.8rem;
}
.alert-card span {
color: var(--muted);
}
.stack {
display: grid;
gap: 0.85rem;
}
.search-page {
display: grid;
gap: 1rem;
max-width: 920px;
}
.search-card {
padding: 1.35rem;
}
.search-card h2 {
margin: 0.15rem 0 0;
font-size: 1.4rem;
}
.search-shell-hero {
min-height: 56px;
margin-top: 1rem;
}
.results-shell {
min-height: 120px;
}
.entity-list {
display: grid;
gap: 0.55rem;
}
.entity-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0.95rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.entity-row:hover {
border-color: color-mix(in srgb, var(--blue) 45%, var(--surface));
box-shadow: var(--shadow-sm);
}
.entity-row.static:hover {
border-color: var(--border);
box-shadow: none;
}
.entity-row:focus-visible,
.download-card:focus-visible,
.section-tabs a:focus-visible,
.sidebar-link:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.search-input:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.entity-row strong,
.entity-row small {
display: block;
}
.entity-row small {
color: var(--muted);
margin-top: 0.12rem;
}
.row-action {
color: var(--brand-strong);
font-size: 0.86rem;
font-weight: 700;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
margin: 0;
}
.info-grid div {
padding: 0.8rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.info-grid dt {
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
}
.info-grid dd {
margin: 0.2rem 0 0;
font-weight: 700;
}
.wb-table {
margin: 0;
}
.wb-table thead th {
color: var(--muted);
background: var(--surface-soft);
border-bottom: 1px solid var(--border);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
}
.wb-table td {
border-color: var(--border);
color: var(--text);
font-size: 0.9rem;
vertical-align: middle;
}
.dossier-action {
display: grid;
gap: 0.9rem;
}
.document-preview {
max-height: 72vh;
overflow: auto;
white-space: pre-wrap;
padding: 1.2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 0.92rem;
line-height: 1.65;
}
.download-card {
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 52px;
padding: 0.8rem 0.95rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-weight: 700;
}
.download-card:hover {
background: color-mix(in srgb, var(--blue) 8%, var(--surface));
border-color: color-mix(in srgb, var(--blue) 45%, var(--surface));
}
.prose {
max-width: 860px;
color: var(--text);
line-height: 1.7;
}
.empty-state {
position: relative;
display: grid;
gap: 0.2rem;
padding: 1rem;
background: var(--surface-soft);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
color: var(--muted);
overflow: hidden;
}
/* Pattern oficial aplicado com moderacao (Fase 6 do EPIC 4) — apenas neste
componente, em opacidade baixa, sem sobrepor o texto (z-index -1). */
.empty-state::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("/static/pattern_points.svg") repeat;
background-size: 40px 40px;
opacity: 0.5;
}
.empty-state strong {
color: var(--text);
}
.btn {
border-radius: var(--radius);
font-weight: 700;
}
.rvr1-icon-inline {
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex: none;
}
.btn-primary {
background: var(--brand);
border-color: var(--brand);
}
.btn-primary:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
}
.btn:disabled,
.btn.disabled,
.form-control:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ===== Repaginacao Fase 1 (paleta CTO) ===== */
/* Numeros: tabular sempre (colunas param de "dancar"); mono nos destaques */
.wb-table td,
.info-grid dd,
.hero-scoreboard div span,
.status-pill { font-variant-numeric: tabular-nums; }
.kpi-card strong,
.hero-scoreboard strong,
.alert-card strong {
font-family: var(--rvr1-font-mono, ui-monospace, monospace);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.num,
.mono { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
/* Acessibilidade: pular para o conteudo (teclado) */
.skip-link {
position: absolute;
left: 12px;
top: -48px;
z-index: 100;
padding: 8px 14px;
background: var(--rvr1-ink, #023047);
color: #ffffff;
border-radius: 8px;
font-weight: 600;
transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
/* Logout visivel na topbar clara (antes: btn-outline-light = branco no branco) */
.btn-logout {
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--muted);
}
.btn-logout:hover {
background: var(--surface-soft);
color: var(--text);
border-color: var(--brand);
}
/* Alerta inline tokenizado (substitui .alert do Bootstrap nas telas do Console) */
.wb-alert {
padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px;
border: 1px solid var(--border); background: var(--surface-soft); color: var(--text);
}
.wb-alert.ok { background: color-mix(in srgb, var(--green) 12%, var(--surface)); border-color: color-mix(in srgb, var(--green) 38%, var(--surface)); color: var(--green); }
.wb-alert.warn { background: var(--rvr1-warn-bg, #fff3d1); border-color: color-mix(in srgb, var(--warning) 38%, var(--surface)); color: var(--warning); }
.wb-alert.err { background: var(--rvr1-crit-bg, #ffe6cc); border-color: color-mix(in srgb, var(--rvr1-color-error) 38%, var(--surface)); color: var(--rvr1-color-error); }
.wb-badge {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; background: var(--surface-soft); border: 1px solid var(--border); color: var(--muted);
}
.wb-badge.ok { background: color-mix(in srgb, var(--green) 14%, var(--surface)); border-color: transparent; color: var(--green); }
/* ===== Detecção de Gaps — busca por problema + ranking denso (Fase 2/3) ===== */
.gaps-note {
display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px;
padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; color: var(--text);
background: var(--rvr1-accent-weak, #e2f1f6);
border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--surface));
}
.gaps-note .bi { color: var(--brand); margin-top: 2px; }
.gaps-filter {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 18px;
}
.gaps-step { font-weight: 600; color: var(--text); margin-bottom: 12px; }
.gaps-step small { color: var(--muted); font-weight: 400; }
.gaps-fam { margin-bottom: 12px; }
.gaps-fam-label {
font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--muted); font-weight: 600; margin-bottom: 7px;
}
.gaps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gaps-chip {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 100px;
border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
}
.gaps-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.gaps-chip .fam { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.gaps-chip:has(input:checked) { background: var(--rvr1-ink, #023047); border-color: var(--rvr1-ink, #023047); color: #fff; }
.gaps-chip:has(input:checked) .fam { background: var(--rvr1-sky, #8ecae6); }
.gaps-chip:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.gaps-chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.gaps-chip .off { font-size: 10px; padding: 1px 5px; border-radius: 5px; background: var(--surface-soft); border: 1px solid var(--border); }
.gaps-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.gaps-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.gaps-filter select, .gaps-filter input[type="number"] {
width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px;
}
.gaps-filter select:disabled { background: var(--surface-soft); color: var(--muted); }
.gaps-summary { color: var(--muted); font-size: 13.5px; margin: 4px 0 6px; }
.gaps-summary strong { color: var(--text); }
.gaps-indisp { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.gaps-ranking { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.grow {
display: grid; grid-template-columns: 6px minmax(0, 1.25fr) minmax(0, 2fr); gap: 18px; align-items: start;
padding: 16px 20px 16px 0; border-bottom: 1px solid var(--border);
}
.grow:last-child { border-bottom: 0; }
.grow:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.grow .sev { width: 6px; align-self: stretch; border-radius: 0 3px 3px 0; }
.sev.critico { background: var(--rvr1-orange, #fb8500); }
.sev.alto { background: var(--rvr1-gold, #ffb703); }
.gm .city { font-weight: 600; font-size: 15px; }
.gm .city a { color: var(--text); }
.gm .city a:hover { color: var(--brand); }
.gm .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.gm .ctx { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.gm .ctx .val { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.gm .ctx .tg { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 5px; margin-right: 5px; }
.tg.caixa { background: var(--rvr1-accent-weak, #e2f1f6); color: var(--rvr1-color-azul-institucional, #146b81); }
.tg.livre, .tg.itr { background: var(--rvr1-warn-bg, #fff3d1); color: var(--rvr1-color-warning, #b45900); }
.up-heat { color: var(--rvr1-color-error, #c2410c); font-weight: 600; }
.down-cool { color: var(--green); }
.evs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gev .nm { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.gev .q { color: var(--muted); font-style: italic; font-size: 12px; margin-top: 1px; }
.gev .erow { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font-size: 12.5px; align-items: center; }
.gev .erow .en { color: var(--muted); }
.gev .erow .ev { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--text); }
.pctl {
font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-size: 11px; padding: 1px 6px; border-radius: 5px;
background: var(--surface-soft); border: 1px solid var(--border); color: var(--muted); font-variant-numeric: tabular-nums;
}
.pctl.hi { background: var(--rvr1-crit-bg, #ffe6cc); color: var(--rvr1-color-error, #c2410c); border-color: transparent; }
.pctl.lo { background: var(--rvr1-accent-weak, #e2f1f6); color: var(--rvr1-color-azul-institucional, #146b81); border-color: transparent; }
.sevtag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.sevtag.critico { color: var(--rvr1-color-error, #c2410c); }
.sevtag.alto { color: var(--rvr1-color-warning, #b45900); }
@media (max-width: 820px) {
.gaps-selects { grid-template-columns: 1fr 1fr; }
.grow { grid-template-columns: 6px 1fr; }
.grow .evs { grid-column: 1 / -1; padding-left: 14px; }
}
/* ===== Dashboard — sala de comando (conteúdo curado, sem banner) ===== */
.dstrip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.dstat { padding: 18px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.dstat:last-child { border-right: 0; }
.dstat .k { font-size: 12px; color: var(--muted); font-weight: 500; }
.dstat .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--rvr1-ink, #023047); }
.dstat .s { font-size: 12px; color: var(--muted); }
.cov { display: grid; gap: 11px; }
.cov-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.cov-top .pc { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--muted); }
.cov-bar { height: 7px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.cov-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.cov-bar.low > i { background: var(--warning); }
.cov-bar.zero > i { background: var(--rvr1-color-error, #c2410c); width: 100%; opacity: 0.25; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.prow:last-child { border-bottom: 0; }
.prow a { color: var(--text); font-weight: 500; }
.prow a small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.prow a:hover { color: var(--brand); }
.prow .pv { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rvr1-ink, #023047); }
/* mapa do dinheiro (strip largo) + funil + grade de tops */
.dstrip.wide { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); margin-bottom: 20px; }
.dstat .v.money { color: var(--rvr1-ink, #023047); }
/* Header do dashboard: coleta humanizada + link de triagem (§6.1/6.2) */
.coleta-selo { font-weight: 700; }
.coleta-selo.ok { color: var(--rvr1-color-verde-estrategico, #2a9d8f); }
.coleta-selo.atencao { color: var(--rvr1-color-warning, #b45900); }
.coleta-logs { color: var(--muted); text-decoration: none; }
.coleta-logs:hover { color: var(--rvr1-color-azul-institucional, #146b81); text-decoration: underline; }
/* Saúde da base colapsada (§6.7) */
.saude-base { padding: 16px 18px; }
.saude-base > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--text); }
.saude-base > summary::-webkit-details-marker { display: none; }
.saude-base .saude-ver { font-size: 12px; color: var(--brand); font-weight: 600; white-space: nowrap; }
.saude-base[open] .saude-ver { display: none; }
/* Contratos vigentes (PNCP) — fornecedores na Visão 360 */
.ct-resumo { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 14px; }
.ct-resumo div { display: flex; flex-direction: column; }
.ct-resumo strong { font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ct-resumo span { font-size: .78rem; color: var(--muted); }
.ct-wrap { overflow-x: auto; }
.ct-tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ct-tab th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--border, #e2e7ee); }
.ct-tab td { padding: 8px 10px; border-bottom: 1px solid var(--border, #eef1f5); vertical-align: top; }
.ct-tab td small { display: block; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ct-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-tab tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.ct-nota { font-size: .76rem; color: var(--muted); margin-top: 10px; }
.ct-nota a { color: var(--brand); }
.ct-nota.ct-pend { background: color-mix(in srgb, var(--warning) 10%, var(--surface)); color: var(--text); padding: 8px 12px; border-radius: 8px; }
.ct-nota code { background: var(--surface-soft); padding: 1px 5px; border-radius: 4px; font-size: .95em; }
/* Detalhe dos contratos vigentes — tabela rolável */
.ct-det { max-height: 460px; overflow-y: auto; border: 1px solid var(--border, #eef1f5); border-radius: 10px; }
.ct-det thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.ct-tab td.obj { max-width: 380px; }
.ct-tab td.obj small { white-space: normal; }
.ct-tab td.dt { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.ct-tab .venc { color: var(--warning, #b45309); font-weight: 700; }
.ct-tab tr.enc-row td { color: var(--muted); }
.ct-tab tr.enc-row td.money, .ct-tab tr.enc-row .obj { color: var(--muted); }
.sit-vig { color: #1f7a6b; font-weight: 600; font-size: .82rem; white-space: nowrap; }
.sit-vig.venc { color: var(--warning, #b45309); }
.sit-enc { color: var(--muted); font-size: .82rem; }
/* Linha do tempo — recorrência de fornecedores (empresa × anos) */
.tl-wrap { overflow-x: auto; }
.tl-tab { border-collapse: collapse; font-size: .84rem; min-width: 100%; }
.tl-tab th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border, #e2e7ee); }
.tl-tab th.yr { text-align: center; width: 44px; }
.tl-tab td { padding: 6px 8px; border-bottom: 1px solid var(--border, #eef1f5); vertical-align: middle; }
.tl-tab td.fn { white-space: nowrap; }
.tl-tab td.fn small { display: block; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.tl-tab td.yr { text-align: center; }
.tl-tab td.yr::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--rvr1-color-cinza-medio, #e4e9ec); }
.tl-tab td.yr.on::before { background: var(--brand); }
.tl-tab tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.tl-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tl-badge.ativo { background: var(--rvr1-good-bg, #e6f5f2); color: var(--rvr1-color-success, #2a9d8f); }
.tl-badge.rec { background: var(--rvr1-accent-weak, #fce9e1); color: var(--brand); }
.tl-badge.off { background: var(--rvr1-color-cinza-medio, #e4e9ec); color: var(--muted); }
/* Selo de Ocupação Comercial do ITR (0–3): 1 neutro, 2 âmbar, 3 vermelho (concorrente direto) */
.oc-selo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 12px 0; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--muted); font-size: .85rem; }
.oc-tag { font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .03em; }
.oc-txt { color: var(--muted); }
.oc-1 { background: color-mix(in srgb, var(--muted) 10%, var(--surface)); }
.oc-2 { background: var(--rvr1-warn-bg, #fff3d1); border-left-color: var(--rvr1-color-warning, #b45900); }
.oc-2 .oc-tag { color: var(--rvr1-color-warning, #b45900); }
.oc-3 { background: var(--rvr1-crit-bg, #ffe6cc); border-left-color: var(--rvr1-color-error, #c2410c); }
.oc-3 .oc-tag { color: var(--rvr1-color-error, #c2410c); }
/* MANCHETE do dashboard — o dinheiro que salta aos olhos (banner navy + número ouro) */
.hero-money { background: linear-gradient(135deg, var(--rvr1-color-navy-quase-preto, #022b47), var(--rvr1-color-navy-medio, #0a4763)); color: #eaf2f8; border-radius: 16px; padding: 28px 32px; margin-bottom: 20px; }
.hm-eyebrow { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8fb3c9; font-weight: 600; }
.hm-big { display: block; font-size: 3.2rem; font-weight: 800; line-height: 1.04; color: var(--rvr1-gold, #ffb703); font-variant-numeric: tabular-nums; margin: 4px 0 10px; letter-spacing: -.01em; }
.hm-sub { display: block; font-size: .9rem; color: #c4d6e2; max-width: 74ch; line-height: 1.5; }
.hm-sub strong { color: #fff; font-weight: 600; }
.hm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 860px) { .hm-cards { grid-template-columns: repeat(2, 1fr); } .hm-big { font-size: 2.4rem; } .hero-money { padding: 22px; } }
.hm-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.hm-card:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.hm-v { font-size: 1.55rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hm-k { font-size: .78rem; color: #a9c3d4; }
/* "O que mudou" — quedas/altas de caixa (Fase A via variações) */
.mud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .mud-grid { grid-template-columns: 1fr; } }
.mud-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.mud-h.queda { color: #b45309; }
.mud-h.alta { color: #1f7a6b; }
.mud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border, #e2e7ee); font-size: 14px; color: var(--text); }
.mud-row:last-of-type { border-bottom: 0; }
.mud-nome small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.mud-row:hover .mud-nome { color: var(--brand); }
.mud-delta { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.mud-delta.neg { color: #b45309; }
.mud-delta.pos { color: #1f7a6b; }
.mud-delta small { font-weight: 400; }
/* Toolbar dos rankings — filtro UF + normalização (§6.6) */
.rank-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 10px; }
.rank-toolbar .rt-title { font-size: 1.05rem; font-weight: 700; color: var(--rvr1-ink, #023047); }
.rank-toolbar .rt-fld { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.rank-toolbar .rt-fld select { font: inherit; font-weight: 400; padding: .35rem .6rem; border: 1px solid var(--border, #e2e7ee); border-radius: 8px; background: var(--surface, #fff); }
.rt-toggle { display: inline-flex; background: var(--surface-soft, #f4f6f8); border: 1px solid var(--border, #e2e7ee); border-radius: 8px; padding: 3px; }
.rt-toggle button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.rt-toggle button.on { background: var(--surface, #fff); color: var(--rvr1-ink, #023047); font-weight: 600; box-shadow: 0 1px 2px rgba(2, 48, 71, .12); }
.rt-nota { font-size: 12px; color: var(--muted); margin-left: auto; }
.rank-vazio { font-size: 13px; color: var(--muted); padding: 8px 0; margin: 0; }
/* §6.4: affordance de clique nas oportunidades */
.opgrid .prow { position: relative; }
.opgrid .prow::after { content: "›"; color: var(--muted); font-size: 18px; opacity: 0; transition: opacity .12s, transform .12s; margin-left: 4px; }
.opgrid .prow:hover::after { opacity: 1; transform: translateX(3px); }
.funil { display: flex; flex-direction: column; }
.frow { display: flex; align-items: baseline; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--border); color: var(--text); }
.frow:last-child { border-bottom: 0; }
.frow .fn { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--rvr1-ink, #023047); min-width: 3.2em; text-align: right; letter-spacing: -0.01em; }
.frow .fl { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 14px; }
.frow .fgo { font-size: 12px; color: var(--brand); font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .12s ease; }
.frow:hover { color: var(--brand); }
.frow:hover .fn { color: var(--brand); }
.frow:hover .fgo, .frow:focus-visible .fgo { opacity: 1; }
.prospect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; margin: 4px 0; }
/* inventário de oportunidades — 2 colunas de linhas clicáveis (cada uma abre a ficha) */
.opgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
@media (max-width: 720px) { .opgrid { grid-template-columns: 1fr; } }
/* ===== Relatório-isca (docinho para o prefeito) — mock aprovado ===== */
.isca-hero { margin-bottom: 6px; }
.isca-flag { width: 84px; height: 60px; object-fit: contain; border-radius: 8px; background: #fff;
border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(10,26,51,.10); display: block; margin-bottom: 10px; }
.isca-hero h1 { font-size: 2rem; margin: 2px 0; }
.isca-hero p { color: var(--muted); }
/* cores de status (semáforo/prioridade) */
.bom, .rapido { --stc: #2e9e5b; }
.regular, .medio { --stc: var(--rvr1-gold, #ffb703); }
.atencao, .estrutural { --stc: var(--rvr1-orange, #fb8500); }
.critico { --stc: #d64545; }
/* 1. herói do dinheiro (3 blocos) */
.isca-money { border: 1px solid var(--border); border-top: 4px solid var(--rvr1-gold, #ffb703); border-radius: var(--radius);
background: var(--surface); padding: 20px 24px; margin: 14px 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; align-items: center; }
.im-big { display: flex; flex-direction: column; gap: 3px; }
.im-big .lbl, .im-rate-box .lbl { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.im-big .amt { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 700; color: var(--rvr1-color-warning, #b45900); letter-spacing: -0.02em; line-height: 1; }
.im-big .amt small { font-size: 15px; font-weight: 500; color: var(--muted); }
.im-big .sub { font-size: 13px; color: var(--muted); }
.im-rate-box { border-left: 1px solid var(--border); padding-left: 22px; }
.im-rates { display: flex; gap: 18px; margin-top: 6px; }
.im-rates > div { display: flex; flex-direction: column; }
.im-rates b { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
.im-rates span { font-size: 11px; color: var(--muted); }
.im-brk { display: flex; flex-direction: column; gap: 8px; }
.im-brk > div { display: flex; flex-direction: column; }
.im-brk span { font-size: 11.5px; color: var(--muted); }
.im-brk b { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
/* 2. colunas (maturidade / semáforo / avançar) */
.isca-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0; }
.isca-cols.avan { grid-template-columns: 1.25fr 1fr; }
.avan-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 820px) { .isca-cols, .isca-cols.avan { grid-template-columns: 1fr; } }
/* donut de maturidade (conic-gradient) */
.donut-wrap { display: flex; gap: 18px; align-items: center; }
.donut { position: relative; width: 124px; height: 124px; border-radius: 50%; flex: none;
background: conic-gradient(var(--stc, #2e9e5b) calc(var(--pct) * 1%), var(--surface-soft) 0); }
.donut::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--surface); }
.donut span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 27px; font-weight: 700; color: var(--text); }
.donut span small { font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* semáforo executivo */
.sem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.sem-card { border: 1px solid var(--border); border-radius: 9px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sem-dom { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.sem-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--stc, var(--muted)); }
.sem-rot { font-size: 13px; font-weight: 700; color: var(--stc, var(--text)); }
/* 3. canais numerados com R$ */
.prio-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.prio-legend span { display: inline-flex; align-items: center; gap: 6px; }
.prio-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stc, var(--muted)); }
.chan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }
.chan { border: 1px solid var(--border); border-left: 3px solid var(--stc, var(--border)); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.chan-h { display: flex; align-items: flex-start; gap: 8px; }
.chan-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; background: var(--stc, var(--muted)); }
.chan-h b { font-size: 13px; color: var(--text); line-height: 1.25; }
.chan-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--rvr1-color-warning, #b45900); }
.chan-v small { font-size: 11px; color: var(--muted); font-weight: 400; }
.prio { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 6px; color: var(--stc); background: color-mix(in srgb, var(--stc) 14%, transparent); }
.chan-t { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
/* investimentos (capex) que a cidade pode captar — saneamento em destaque */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.inv { border: 1px solid var(--border); border-left: 3px solid var(--rvr1-accent, #219ebc); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.inv.san { border-left-color: var(--rvr1-color-azul-institucional, #146b81); background: color-mix(in srgb, var(--rvr1-sky, #8ecae6) 12%, var(--surface)); }
.inv-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inv-h b { font-size: 13.5px; color: var(--text); line-height: 1.25; }
.san-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rvr1-color-azul-institucional, #146b81); background: color-mix(in srgb, var(--rvr1-sky, #8ecae6) 30%, transparent); padding: 2px 7px; border-radius: 6px; }
.inv-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--rvr1-color-azul-institucional, #146b81); }
.inv-m { font-size: 11.5px; color: var(--muted); }
.inv-b { font-size: 11.5px; color: var(--text); }
/* custo da água tratada perdida — callout de saneamento */
.san-perda { display: grid; grid-template-columns: minmax(220px, 1fr) 1.3fr; gap: 16px; align-items: center; border: 1px solid var(--border); border-left: 4px solid var(--rvr1-accent, #219ebc); background: color-mix(in srgb, var(--rvr1-sky, #8ecae6) 12%, var(--surface)); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; }
.san-perda .sp-left { display: flex; flex-direction: column; gap: 4px; }
.san-perda .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.san-perda .amt { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; color: var(--rvr1-color-azul-institucional, #146b81); line-height: 1.1; }
.san-perda .amt small { font-size: 13px; font-weight: 400; color: var(--muted); }
.san-perda .sub { font-size: 12.5px; color: var(--text); }
.san-perda .sp-note { font-size: 12px; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .san-perda { grid-template-columns: 1fr; } }
/* passaporte da gestão — o que regularizar */
.passe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.passe { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-left: 3px solid var(--rvr1-orange, #fb8500); border-radius: 9px; padding: 10px 12px; }
.passe-x { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rvr1-orange, #fb8500); background: color-mix(in srgb, var(--rvr1-orange, #fb8500) 14%, transparent); padding: 3px 8px; border-radius: 6px; flex: none; }
.passe b { display: block; font-size: 13px; color: var(--text); }
.passe small { color: var(--muted); font-size: 11.5px; }
.passe-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rvr1-orange, #fb8500); background: color-mix(in srgb, var(--rvr1-orange, #fb8500) 14%, transparent); padding: 2px 8px; border-radius: 6px; }
/* 4. posição geral + impacto */
.pos-geral { font-size: 1.05rem; color: var(--text); }
.pos-geral strong { color: var(--rvr1-accent, #219ebc); font-size: 1.25rem; }
.impacto { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 7px; }
.impacto li { color: var(--text); font-size: 14px; }
.impacto strong { color: var(--rvr1-ink, #023047); }
/* onde avançar — 4 colunas (sua cidade / média dos pares / diferença / percentil) */
.avan-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr .8fr .6fr; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.avan-row:last-child { border-bottom: 0; }
.avan-row.head { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--border); }
.avan-row.head span:not(:first-child) { text-align: right; }
.avan-row .lb { color: var(--text); display: flex; flex-direction: column; }
.avan-row .lb small { color: var(--muted); font-size: 10.5px; }
.avan-row .av-v, .avan-row .av-m, .avan-row .av-d, .avan-row .av-p { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.avan-row .av-d.neg { color: var(--rvr1-orange, #fb8500); font-weight: 600; }
.avan-row .av-d.pos { color: #2e9e5b; font-weight: 600; }
.avan-row .av-p { color: var(--muted); }
/* 5. inércia + passos + scatter */
.isca-tri { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 900px) { .isca-tri { grid-template-columns: 1fr; } }
.inercia { border: 1px solid color-mix(in srgb, #d64545 30%, var(--border)); border-left: 4px solid #d64545; border-radius: var(--radius); background: var(--rvr1-crit-bg, #ffe6cc); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.inercia .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b3352f; }
.inercia .amt { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; color: #b3352f; }
.inercia p { font-size: 12.5px; color: var(--text); margin-top: 4px; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.passos li { color: var(--text); font-size: 13.5px; line-height: 1.4; }
.scatter { position: relative; height: 180px; margin: 10px 6px 26px 4px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to top, var(--border) 1px, transparent 1px);
background-size: 25% 25%; background-position: left bottom; }
.sc-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--stc, var(--muted)); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.sc-yl { position: absolute; top: -4px; left: 4px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; background: var(--surface); padding: 0 3px; }
.sc-xl { position: absolute; bottom: -20px; right: 0; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* 6. rodapé (2 colunas) */
.isca-close { margin-top: 20px; padding: 22px 26px; border-radius: var(--radius); background: var(--rvr1-ink, #023047); color: #fff; display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center; }
.isca-close h2 { color: #fff; font-size: 1.3rem; margin: 0 0 8px; }
.isca-close p { color: rgba(255, 255, 255, .88); }
.isca-close strong { color: var(--rvr1-sky, #8ecae6); }
.isca-close .cta { font-size: 1.08rem; font-weight: 600; color: var(--rvr1-gold, #ffb703); margin-top: 10px; }
.isca-close .fonte { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.isca-close .fonte .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .55); }
.isca-close .fonte strong { color: #fff; font-size: 1.1rem; }
.isca-close .fonte small { color: rgba(255, 255, 255, .55); font-size: 11.5px; }
@media (max-width: 780px) { .isca-money, .isca-close { grid-template-columns: 1fr; } .im-rate-box, .isca-close .fonte { border-left: 0; padding-left: 0; } }
/* segmentação — formulário de prospecção + tabela numérica */
.seg-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.seg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.seg-form label.chk { flex-direction: row; align-items: center; gap: 7px; color: var(--text); font-weight: 500; align-self: center; }
.seg-form select, .seg-form input[type="number"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; min-width: 130px; }
.wb-table td.num, .wb-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-table td.num.money strong { color: var(--rvr1-color-warning, #b45900); }
@media (max-width: 780px) { .dstrip { grid-template-columns: 1fr; } .dstat { border-right: 0; border-bottom: 1px solid var(--border); } }
/* ===== Ficha do Município — header persistente + abas reais + Visão 360 ===== */
/* header de estado da base (§0.7) — cobertura, ano-base, fila de alertas contextuais */
.base-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.base-strip .bh { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.base-strip .bh b { color: var(--text); font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600; }
.base-strip .sep { color: var(--border); }
.aq { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.aq b { width: 6px; height: 6px; border-radius: 50%; background: var(--rvr1-gold, #ffb703); flex: none; }
.aq.alto { border-color: color-mix(in srgb, var(--rvr1-orange, #fb8500) 40%, var(--border)); }
.aq.alto b { background: var(--rvr1-orange, #fb8500); }
.aq .m { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--rvr1-color-warning, #b45900); font-weight: 600; }
/* abas reais (CSS-only, sem JS): radios governam a exibição dos painéis */
.ficha { position: relative; }
.ficha-radio { position: absolute; opacity: 0; pointer-events: none; }
.ficha-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--border); margin: 16px 0 20px; }
.ficha-tabs label { padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.ficha-tabs label:hover { color: var(--text); }
.ficha-panel { display: none; }
#tab-360:checked ~ #panel-360,
#tab-cap:checked ~ #panel-cap,
#tab-fis:checked ~ #panel-fis,
#tab-ind:checked ~ #panel-ind,
#tab-dna:checked ~ #panel-dna,
#tab-gaps:checked ~ #panel-gaps,
#tab-diag:checked ~ #panel-diag,
#tab-itr:checked ~ #panel-itr,
#tab-mine:checked ~ #panel-mine,
#tab-serie:checked ~ #panel-serie,
#tab-obras:checked ~ #panel-obras,
#tab-conv:checked ~ #panel-conv,
#tab-contratos:checked ~ #panel-contratos,
#tab-dados:checked ~ #panel-dados,
#tab-radar:checked ~ #panel-radar,
#tab-dos:checked ~ #panel-dos { display: block; }
#tab-360:checked ~ .ficha-tabs label[for="tab-360"],
#tab-cap:checked ~ .ficha-tabs label[for="tab-cap"],
#tab-fis:checked ~ .ficha-tabs label[for="tab-fis"],
#tab-ind:checked ~ .ficha-tabs label[for="tab-ind"],
#tab-dna:checked ~ .ficha-tabs label[for="tab-dna"],
#tab-gaps:checked ~ .ficha-tabs label[for="tab-gaps"],
#tab-diag:checked ~ .ficha-tabs label[for="tab-diag"],
#tab-itr:checked ~ .ficha-tabs label[for="tab-itr"],
#tab-mine:checked ~ .ficha-tabs label[for="tab-mine"],
#tab-serie:checked ~ .ficha-tabs label[for="tab-serie"],
#tab-obras:checked ~ .ficha-tabs label[for="tab-obras"],
#tab-conv:checked ~ .ficha-tabs label[for="tab-conv"],
#tab-contratos:checked ~ .ficha-tabs label[for="tab-contratos"],
#tab-dados:checked ~ .ficha-tabs label[for="tab-dados"],
#tab-radar:checked ~ .ficha-tabs label[for="tab-radar"],
#tab-dos:checked ~ .ficha-tabs label[for="tab-dos"] { color: var(--rvr1-ink, #023047); border-bottom-color: var(--rvr1-gold, #ffb703); }
.sit-adimpl { background: #e6f5f2; color: #1f7a6b; }
.sit-inadimpl { background: #ffe6cc; color: #b45309; }
/* Aba Obras federais (Obrasgov) — detalhe por obra */
.obras-kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.obras-kpi { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; }
.obras-kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.obras-kpi b { font-size: 1.3rem; color: var(--text); font-variant-numeric: tabular-nums; }
/* Panorama de captação de ITR (Segmentação) */
.itr-pan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-bottom: 16px; }
.itr-pan-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.itr-pan-big .v { font-size: 2rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.itr-pan-big .lb { color: var(--muted); font-size: .95rem; }
.itr-pan-focus { margin: 0; color: var(--text); font-size: .9rem; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border-radius: 8px; padding: 8px 12px; }
.itr-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .itr-method { grid-template-columns: 1fr; } }
.itr-method h4 { margin: 0 0 6px; font-size: 13px; color: var(--brand); font-weight: 700; }
.itr-method p { margin: 0; font-size: 13.5px; color: var(--muted); }
.obras-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.obras-tab th, .obras-tab td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.obras-tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.obras-tab td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.obras-tab .obra-nome { font-weight: 500; color: var(--text); }
.sit { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.sit-exec { background: #e6f5f2; color: #1f7a6b; }
.sit-conc { background: #eceff1; color: #4d6373; }
.sit-paral { background: #ffe6cc; color: #b45309; }
.sit-cad { background: #fff3d1; color: #8a5a00; }
.sit-outro { background: #eef1f4; color: #4d6373; }
.ficha-radio:focus-visible ~ .ficha-tabs label { text-decoration: underline; }
/* Visão 360 — o "vale reunião?" em 30s */
.vm-diag { border-left: 4px solid var(--border); border-radius: 8px; padding: 13px 16px; background: var(--surface-soft); margin-bottom: 18px; }
.vm-diag.GARGALO_EXECUCAO { border-left-color: var(--rvr1-gold, #ffb703); }
.vm-diag.ESPACO_ALAVANCAGEM { border-left-color: var(--rvr1-accent, #219ebc); }
.vm-diag.PRIORIDADE_REGULARIZACAO { border-left-color: var(--rvr1-orange, #fb8500); }
.vm-diag .est { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.vm-diag .fr { font-size: 1.08rem; font-weight: 600; color: var(--text); margin-top: 3px; line-height: 1.3; }
.vm-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; margin-bottom: 8px; }
.vm-card { border: 1px solid var(--border); border-top: 3px solid var(--rvr1-gold, #ffb703); border-radius: var(--radius); padding: 13px 15px; background: var(--surface); }
.vm-card.credit { border-top-color: var(--rvr1-accent, #219ebc); }
.vm-card .lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vm-card .amt { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin-top: 4px; }
.vm-card .rng { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); margin-top: 2px; }
.vm-card .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.vm-top5 { display: flex; flex-direction: column; }
.vm-top5 .t5 { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vm-top5 .t5:last-child { border-bottom: 0; }
.vm-top5 .rk { font-family: var(--rvr1-font-mono, ui-monospace, monospace); color: var(--muted); font-size: 12px; width: 1.6em; flex: none; }
.vm-top5 .ti { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 500; }
.vm-top5 .ti small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.vm-top5 .vl { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rvr1-color-warning, #b45900); white-space: nowrap; }
/* valor + proveniência — 4 estados (§0.1) + popover de origem (§0.2) */
.val { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.val.npub { color: var(--muted); } /* NÃO_PUBLICADO — cinza */
.val.ncol { color: var(--warning); } /* NÃO_COLETADO — âmbar */
.prov { position: relative; cursor: help; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent); }
.prov:focus-visible { outline: 2px solid var(--rvr1-accent, #219ebc); outline-offset: 2px; }
.prov-pop { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 210px; max-width: 320px;
padding: 8px 11px; border-radius: 8px; background: var(--rvr1-ink, #023047); color: #fff;
font-family: var(--rvr1-font-sans, system-ui, sans-serif); font-variant-numeric: normal; font-weight: 400;
font-size: 12px; line-height: 1.5; white-space: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; }
.prov-pop b { color: var(--rvr1-sky, #8ecae6); }
.prov-pop code { background: rgba(255, 255, 255, .16); color: #fff; padding: 0 3px; border-radius: 3px; font-size: 11px; }
.prov:hover .prov-pop, .prov:focus .prov-pop, .prov:focus-within .prov-pop { opacity: 1; visibility: visible; transform: translateY(0); }
/* linhas rótulo -> valor (receita/despesa/diagnóstico) */
.fis-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fis-line:last-child { border-bottom: 0; }
.fis-line .lb { color: var(--text); min-width: 0; }
.fis-line.sub { padding: 5px 0 5px 16px; font-size: 13px; }
.fis-line.sub .lb { color: var(--muted); }
.fis-line.tot { font-weight: 600; border-top: 2px solid var(--border); border-bottom: 0; margin-top: 2px; }
.fis-line .lb small { color: var(--muted); font-weight: 400; }
/* caixa — dinheiro parado (a tese das aberrações) */
.fis-caixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.fis-cx { border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; background: var(--surface); }
.fis-cx.livre { border-left: 3px solid var(--rvr1-gold, #ffb703); }
.fis-cx.vinc { border-left: 3px solid var(--rvr1-accent, #219ebc); }
.fis-cx .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.fis-cx .amt { font-size: 19px; font-weight: 600; color: var(--text); margin-top: 5px; }
.fis-cx .amt .val { letter-spacing: -0.02em; }
.fis-cx .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
/* gauge LRF */
.gauge { margin: 12px 0; }
.gauge .gh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.gauge .gt { color: var(--muted); font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.gauge-bar { height: 8px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.gauge-bar > i { display: block; height: 100%; background: var(--rvr1-accent, #219ebc); border-radius: 6px; }
.gauge-bar.warn > i { background: var(--rvr1-gold, #ffb703); }
.gauge-bar.crit > i { background: var(--rvr1-orange, #fb8500); }
/* série ITR (barras horizontais) */
.itr-serie { display: flex; flex-direction: column; gap: 8px; }
.itr-bar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.itr-bar .yr { font-family: var(--rvr1-font-mono, ui-monospace, monospace); color: var(--muted); }
.itr-bar .bar { height: 8px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.itr-bar .bar > i { display: block; height: 100%; background: var(--rvr1-gold, #ffb703); border-radius: 6px; }
.itr-bar .vl { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; white-space: nowrap; }
/* série de caixa (tendência, com negativos) */
.cxserie { display: flex; flex-direction: column; gap: 8px; }
.cxrow { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.cxrow .yr { font-family: var(--rvr1-font-mono, ui-monospace, monospace); color: var(--muted); }
.cxbar { height: 9px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.cxbar > i { display: block; height: 100%; border-radius: 6px; }
.cxbar > i.pos { background: var(--rvr1-gold, #ffb703); }
.cxbar > i.neg { background: var(--rvr1-orange, #fb8500); }
.cxvl { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; white-space: nowrap; }
.cxvl.neg { color: var(--rvr1-orange, #fb8500); }
/* Captação — 7 canais (status por marcador colorido, sem emoji) */
.opp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.opp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.st-recebe_menos { background: var(--rvr1-gold, #ffb703); }
.st-lancar_melhor { background: var(--rvr1-orange, #fb8500); }
.st-solicitar { background: var(--rvr1-accent, #219ebc); }
.st-verificar { background: var(--rvr1-sky, #8ecae6); }
.st-recebe_ok { background: #2e9e5b; }
.st-nao_atende { background: var(--border); }
.canal { margin-bottom: 16px; }
.canal-h { font-weight: 700; color: var(--rvr1-ink, #023047); font-size: 13px; margin-bottom: 6px; }
.opps { display: flex; flex-direction: column; }
.opp { display: grid; grid-template-columns: 14px minmax(150px, 1.1fr) 2fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.opp:last-child { border-bottom: 0; }
.opp.dim { opacity: 0.5; }
.opp > .dot { margin-top: 5px; }
.opp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opp-nome { color: var(--text); font-weight: 500; }
.opp-meta { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-size: 11px; color: var(--muted); }
.opp-note { color: var(--muted); }
.opp-det { display: block; color: var(--text); font-weight: 500; margin-top: 3px; }
.ele-tag, .ganho-rapido { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--rvr1-warn-bg, #fff3d1); color: var(--rvr1-color-warning, #b45900); }
@media (max-width: 720px) { .opp { grid-template-columns: 14px 1fr; } .opp-note { grid-column: 2; } }
@media (max-width: 1180px) {
.app-shell {
grid-template-columns: 220px minmax(0, 1fr);
}
.kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.app-shell {
display: block;
}
.sidebar {
position: static;
height: auto;
padding: 1rem;
}
.sidebar-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-footer {
display: none;
}
.topbar,
.dashboard-hero,
.municipio-hero,
.content-grid {
display: grid;
grid-template-columns: 1fr;
}
.topbar {
padding: 1rem;
}
.content {
padding: 1rem;
}
.hero-scoreboard {
min-width: 0;
}
}
@media (max-width: 560px) {
.topbar-status,
.user-chip strong {
display: none;
}
.sidebar-nav,
.kpi-grid,
.info-grid,
.hero-scoreboard {
grid-template-columns: 1fr;
}
.page-heading h1,
.municipio-hero h1 {
font-size: 1.55rem;
}
.entity-row {
align-items: flex-start;
}
}
/* ===================== Aba DNA / Identidade ===================== */
/* perfil estrutural (econômico/fiscal/territorial + risco) em cards */
.dna-perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dna-card { border: 1px solid var(--border); border-top: 3px solid var(--rvr1-accent, #219ebc); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.dna-card .dim { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dna-card .val { font-size: 16px; line-height: 1.25; color: var(--text); }
.dna-card .conf { font-size: 11px; color: var(--muted); }
.dna-card.risco { border-top-color: var(--green); } /* baixo = verde (default) */
.dna-card.risco.r-médio, .dna-card.risco.r-medio { border-top-color: var(--rvr1-gold, #ffb703); }
.dna-card.risco.r-alto { border-top-color: var(--rvr1-orange, #fb8500); }
/* vocações / potencialidades como chips */
.dna-voc { margin-top: 14px; }
.dna-voc .lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.voc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.voc { font-size: 12.5px; color: var(--rvr1-prussian, #023047); background: color-mix(in srgb, var(--rvr1-sky, #8ecae6) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rvr1-accent, #219ebc) 30%, var(--surface)); border-radius: 20px; padding: 4px 12px; }
/* municípios gêmeos — linhas clicáveis com score de similaridade */
.dna-gemeos { display: flex; flex-direction: column; gap: 8px; }
.gem { display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr auto; align-items: center; gap: 14px; text-decoration: none; border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; transition: background .12s, border-color .12s; }
.gem:hover { background: var(--surface-soft); border-color: var(--rvr1-accent, #219ebc); }
.gem .nm { font-weight: 600; color: var(--text); font-size: 13.5px; }
.gbar { height: 8px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.gbar > i { display: block; height: 100%; background: var(--rvr1-accent, #219ebc); border-radius: 6px; }
.gem .sc { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rvr1-accent, #219ebc); white-space: nowrap; font-size: 14px; }
.gem .sc small { font-weight: 400; color: var(--muted); font-size: 10.5px; }
/* ===================== Módulo Municípios Mineradores (AMIG) ===================== */
.mnr-hero { margin-bottom: 18px; }
.mnr-hero .eyebrow { color: var(--rvr1-accent, #219ebc); }
.mnr-hero h1 { margin: 4px 0 2px; }
.mnr-hero p { color: var(--muted); margin: 0; }
/* Relógio da Transição — o herói */
.relogio { display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.6fr; gap: 18px; align-items: stretch;
border: 1px solid var(--border); border-top: 4px solid var(--stc, var(--rvr1-accent, #219ebc));
border-radius: var(--radius); padding: 20px 22px; background: var(--surface); }
.relogio .rl-main { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.relogio .rl-main .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.relogio .rl-main .amt { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; color: var(--rvr1-gold, #ffb703); line-height: 1.05; }
.relogio .rl-main .amt small { font-size: 14px; font-weight: 400; color: var(--muted); }
.relogio .rl-main .sub { font-size: 12.5px; color: var(--text); }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rl-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.rl-card .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rl-card .v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.rl-card .d { font-size: 11px; color: var(--muted); }
.rl-card.urg { border-color: var(--stc, var(--border)); background: color-mix(in srgb, var(--stc, var(--muted)) 10%, var(--surface)); }
.rl-card.urg .v { color: var(--stc, var(--text)); }
.mnr-stake { border: 1px solid var(--border); border-left: 4px solid var(--rvr1-gold, #ffb703);
background: color-mix(in srgb, var(--rvr1-gold, #ffb703) 9%, var(--surface)); border-radius: var(--radius);
padding: 14px 18px; margin: 14px 0 6px; font-size: 14px; color: var(--text); }
/* nota do horizonte da jazida (fato oficial, informativa — não alarme) */
.mnr-horizonte { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0 6px; padding: 11px 14px;
border: 1px solid var(--border); border-left: 4px solid var(--rvr1-accent, #219ebc);
border-radius: 10px; background: color-mix(in srgb, var(--rvr1-accent, #219ebc) 6%, var(--surface));
font-size: 13px; color: var(--text); }
.mnr-horizonte i { color: var(--rvr1-accent, #219ebc); font-size: 15px; margin-top: 1px; flex: none; }
.mnr-horizonte a { color: var(--rvr1-accent, #219ebc); font-size: 11.5px; }
.mnr-horizonte em { color: var(--muted); font-style: normal; font-size: 11.5px; }
/* dimensão dentro do relógio da cidade (1 caixa · 2 economia) */
.mcc-dim { display: flex; align-items: center; gap: 9px; margin: 16px 0 9px; font-size: 12.5px;
font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.mcc-dim:first-of-type { margin-top: 4px; }
.mcc-dim b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
background: var(--rvr1-color-error, #c2410c); color: #fff; font-size: 12px; }
.mcc-dim span { color: var(--rvr1-color-error, #c2410c); }
/* Relógio da cidade — insolvência pós-saída (dado fiscal real) */
.mnr-cidade { --err: var(--rvr1-color-error, #c2410c); border: 1px solid color-mix(in srgb, var(--err) 30%, var(--border));
border-top: 4px solid var(--err); border-radius: var(--radius); background: var(--surface);
padding: 18px 20px; margin: 16px 0 8px; }
.mcc-head { margin-bottom: 14px; }
.mcc-eye { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--err); }
.mcc-head h2 { margin: 5px 0 4px; font-size: 1.28rem; color: var(--text); text-wrap: balance; }
.mcc-head p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 92ch; }
.mcc-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; }
.mcc-card { border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.mcc-card.risk { border-color: color-mix(in srgb, var(--err) 35%, var(--border)); background: color-mix(in srgb, var(--err) 5%, var(--surface)); }
.mcc-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.mcc-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
font-size: 25px; font-weight: 700; color: var(--text); line-height: 1.05; }
.mcc-v.alarme { color: var(--err); }
.mcc-v small { font-size: 13px; font-weight: 400; color: var(--muted); }
.mcc-d { font-size: 12px; color: var(--muted); line-height: 1.45; }
.mcc-d b, .mcc-note b { color: var(--text); }
.mcc-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-soft); margin: 2px 0 4px; }
.mcc-bar .seg { height: 100%; display: block; }
.mcc-bar .seg.certo { background: var(--err); }
.mcc-bar .seg.est { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--err) 55%, transparent) 0 4px, transparent 4px 8px); }
.mcc-stack { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mcc-stack li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.mcc-stack li b { margin-left: auto; font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.mcc-stack .dt { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.mcc-stack .dt.certo { background: var(--err); }
.mcc-stack .dt.est { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--err) 55%, transparent) 0 3px, transparent 3px 6px); border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); }
.mcc-note { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.mcc-kicker { margin: 14px 0 0; padding: 12px 15px; border-radius: 9px; font-size: 13.5px; color: var(--text);
background: color-mix(in srgb, var(--err) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--err) 22%, var(--border)); }
.mcc-kicker b { color: var(--err); }
@media (max-width: 820px) { .mcc-grid { grid-template-columns: 1fr; } }
/* Potencial não captado ("deixa na mesa") — manchete de captação */
.cap-potencial { --au: var(--rvr1-gold, #ffb703); border: 1px solid color-mix(in srgb, var(--au) 40%, var(--border));
border-left: 4px solid var(--au); border-radius: var(--radius); background: color-mix(in srgb, var(--au) 6%, var(--surface));
padding: 16px 18px; margin: 0 0 16px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px 24px; align-items: center; }
.cp-hero { display: flex; flex-direction: column; gap: 3px; }
.cp-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cp-k i { color: color-mix(in srgb, var(--au) 70%, var(--text)); }
.cp-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.05; }
.cp-v small { font-size: 13px; font-weight: 400; color: var(--muted); }
.cp-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cp-d b { color: var(--text); }
.cp-detalhe { display: flex; flex-direction: column; gap: 7px; }
.cp-canal { display: flex; flex-direction: column; gap: 1px; }
.cp-cn { font-size: 11px; font-weight: 700; color: var(--text); }
.cp-cn small { color: var(--muted); font-weight: 400; }
.cp-cv { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-cv.lo b { color: var(--rvr1-color-error, #c2410c); }
.cp-nota { grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.5; margin: 2px 0 0;
border-top: 1px solid color-mix(in srgb, var(--au) 22%, var(--border)); padding-top: 8px; }
.cp-nota b { color: var(--text); }
.cp-export { grid-column: 1 / -1; justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 600; text-decoration: none; color: #fff; padding: 8px 14px; border-radius: 8px;
background: var(--rvr1-navy, #012d4c); }
.cp-export:hover { background: color-mix(in srgb, var(--rvr1-navy, #012d4c) 88%, #000); color: #fff; }
@media (max-width: 760px) { .cap-potencial { grid-template-columns: 1fr; } }
/* Escolaridade — reconversão da mão de obra (compacto) */
.mnr-escol { border: 1px solid var(--border); border-left: 4px solid var(--rvr1-accent, #219ebc);
border-radius: var(--radius); background: var(--surface); padding: 14px 18px; margin: 16px 0 8px; }
.me-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.me-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.me-k i { color: var(--rvr1-accent, #219ebc); }
.me-nums { display: flex; gap: 18px; }
.me-num { font-size: 13px; color: var(--muted); }
.me-num b { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
font-size: 20px; font-weight: 700; color: var(--text); margin-right: 4px; }
.me-num.sep { border-left: 1px solid var(--border); padding-left: 18px; }
.me-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.me-d b { color: var(--text); }
/* Barragens — passivo que o fecho ativa (reusa mcc-*, accent vermelho) */
.mnr-barragens { --err: var(--rvr1-color-error, #c2410c); border: 1px solid color-mix(in srgb, var(--err) 30%, var(--border));
border-top: 4px solid var(--err); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 16px 0 8px; }
.bg-lista { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 130px; overflow-y: auto; }
.bg-lista li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.bg-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .02em; flex: none; }
.bg-tag.mont { color: #d64545; background: color-mix(in srgb, #d64545 15%, transparent); }
.bg-tag.emg { color: var(--rvr1-orange, #fb8500); background: color-mix(in srgb, var(--rvr1-orange, #fb8500) 16%, transparent); }
/* Trajetória demográfica — indicador antecedente */
.mnr-demo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: center;
border: 1px solid var(--border); border-left: 4px solid var(--rvr1-accent, #219ebc); border-radius: var(--radius);
background: var(--surface); padding: 15px 18px; margin: 16px 0 8px; }
.md-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.md-k i { color: var(--rvr1-accent, #219ebc); }
.md-line { display: flex; align-items: baseline; gap: 12px; margin: 3px 0 4px; }
.md-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.md-v small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.md-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .02em; }
.md-badge.md-estagnada { color: var(--rvr1-orange, #fb8500); background: color-mix(in srgb, var(--rvr1-orange, #fb8500) 14%, transparent); }
.md-badge.md-encolhendo { color: #d64545; background: color-mix(in srgb, #d64545 14%, transparent); }
.md-badge.md-crescendo { color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 14%, transparent); }
.md-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.md-d b { color: var(--text); }
.md-chart { display: flex; flex-direction: column; gap: 6px; }
.md-chart svg { width: 100%; height: 56px; overflow: visible; }
.md-est { stroke: color-mix(in srgb, var(--rvr1-accent, #219ebc) 60%, var(--muted)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.md-censo { fill: var(--rvr1-orange, #fb8500); stroke: var(--surface); stroke-width: 1.5; }
.md-leg { font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.md-leg b { color: var(--text); }
.md-leg i { display: inline-block; vertical-align: middle; margin-right: 3px; }
.md-leg .l-est { width: 12px; height: 2px; background: color-mix(in srgb, var(--rvr1-accent, #219ebc) 60%, var(--muted)); }
.md-leg .l-censo { width: 8px; height: 8px; border-radius: 50%; background: var(--rvr1-orange, #fb8500); }
@media (max-width: 720px) { .mnr-demo { grid-template-columns: 1fr; } }
/* Ranking AMIG — tabela no índice */
.amig-rank { margin: 26px 0 8px; }
.ar-head h2 { margin: 0 0 4px; font-size: 1.25rem; }
.ar-head p { color: var(--muted); margin: 0 0 12px; max-width: 90ch; font-size: .9rem; }
.ar-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.ar-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ar-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-soft); position: sticky; top: 0; }
.ar-table th.num, .ar-table td.num { text-align: right; }
.ar-table tbody tr { cursor: pointer; border-bottom: 1px solid var(--border); }
.ar-table tbody tr:last-child { border-bottom: 0; }
.ar-table tbody tr:hover { background: var(--surface-soft); }
.ar-table td { padding: 8px 12px; color: var(--text); }
.ar-pos { color: var(--muted); font-variant-numeric: tabular-nums; width: 2.5rem; }
.ar-nome a { color: var(--text); font-weight: 600; text-decoration: none; }
.ar-nome a:hover { color: var(--rvr1-accent, #219ebc); }
.ar-uf { color: var(--muted); }
.ar-sub { color: var(--muted); font-size: 12.5px; }
.ar-exp { white-space: nowrap; }
.ar-exp .ar-bar { display: inline-block; width: 66px; height: 8px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.ar-exp .ar-bar i { display: block; height: 100%; }
.ar-exp .ar-bar i.hi { background: #d64545; }
.ar-exp .ar-bar i.mid { background: var(--rvr1-orange, #fb8500); }
.ar-exp .ar-bar i.lo { background: #2e9e5b; }
.ar-exp b { font-variant-numeric: tabular-nums; }
.ar-nota { font-size: 11.5px; color: var(--muted); margin: 10px 2px 0; }
/* Ranking de exposição intra-AMIG */
.rl-card .d.rk-amig { color: var(--stc, var(--rvr1-color-error, #c2410c)); font-weight: 600; }
.rl-card .d.rk-amig b { font-size: 13px; }
.mnr-rk-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.mnr-rk-nota i { color: var(--rvr1-gold, #ffb703); }
.mnr-rk-nota b { color: var(--text); }
/* Autonomia fiscal — o que a prefeitura arrecada sozinha (compacto) */
.mnr-autonomia { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center;
border: 1px solid var(--border); border-left: 4px solid var(--rvr1-accent, #219ebc); border-radius: var(--radius);
background: var(--surface); padding: 15px 18px; margin: 16px 0 8px; }
.ma-hero { display: flex; flex-direction: column; gap: 3px; }
.ma-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ma-k i { color: var(--rvr1-accent, #219ebc); }
.ma-v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
font-size: 30px; font-weight: 700; color: var(--rvr1-accent, #219ebc); line-height: 1.05; }
.ma-v small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ma-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ma-d b { color: var(--text); }
.ma-comp { display: flex; flex-direction: column; gap: 8px; }
.ma-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-soft); }
.ma-bar .s { height: 100%; }
.ma-bar .s.propria { background: #2e9e5b; }
.ma-bar .s.royalty { background: var(--rvr1-color-error, #c2410c); }
.ma-bar .s.transf { background: color-mix(in srgb, var(--rvr1-accent, #219ebc) 55%, var(--surface)); }
.ma-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-leg li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.ma-leg li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ma-leg .d { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ma-leg .d.propria { background: #2e9e5b; }
.ma-leg .d.royalty { background: var(--rvr1-color-error, #c2410c); }
.ma-leg .d.transf { background: color-mix(in srgb, var(--rvr1-accent, #219ebc) 55%, var(--surface)); }
@media (max-width: 720px) { .mnr-autonomia { grid-template-columns: 1fr; } }
/* O lado do ativo — a economia que sobra (accent teal; induzido em âmbar) */
.mnr-sobra { --err: #2e9e5b; border: 1px solid color-mix(in srgb, #2e9e5b 28%, var(--border));
border-top: 4px solid #2e9e5b; border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 16px 0 8px; }
.mnr-sobra .mcc-card.risk { border-color: color-mix(in srgb, #e0a43b 42%, var(--border)); background: color-mix(in srgb, #e0a43b 6%, var(--surface)); }
.mnr-sobra .seg.auton, .mnr-sobra .dt.auton { background: #2e9e5b; }
.mnr-sobra .seg.min { background: color-mix(in srgb, var(--text) 42%, var(--surface)); }
.mnr-sobra .seg.induz { background: repeating-linear-gradient(45deg, #e0a43b 0 4px, color-mix(in srgb, #e0a43b 22%, transparent) 4px 8px); }
.mnr-sobra .dt.induz { background: repeating-linear-gradient(45deg, #e0a43b 0 3px, transparent 3px 6px); border: 1px solid color-mix(in srgb, #e0a43b 55%, transparent); }
.mnr-sobra .mcc-v.alarme { color: #d64545; }
/* cards do índice (piloto AMIG) */
.mnr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mnr-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; border: 1px solid var(--border);
border-left: 4px solid var(--stc, var(--border)); border-radius: 11px; padding: 15px 16px; transition: background .12s, box-shadow .12s; }
.mnr-card:hover { background: var(--surface-soft); box-shadow: 0 2px 10px rgba(2,48,71,.06); }
.mnr-card .mc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mnr-card .mc-h b { font-size: 16px; color: var(--text); }
.mnr-card .mc-h .uf { font-size: 12px; color: var(--muted); }
.mnr-card .mc-cfem { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--rvr1-gold, #ffb703); }
.mnr-card .mc-cfem small { font-size: 11px; font-weight: 400; color: var(--muted); }
.mnr-card .mc-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.mnr-card .mc-urg { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; color: var(--stc, var(--muted)); background: color-mix(in srgb, var(--stc, var(--muted)) 14%, transparent); }
@media (max-width: 720px) { .relogio { grid-template-columns: 1fr; } }
/* Plano de Diversificação — 4 eixos de desenvolvimento */
.mnr-eixos-intro { margin: 24px 0 12px; }
.mnr-eixos-intro h2 { margin: 0 0 4px; font-size: 1.25rem; }
.mnr-eixos-intro p { color: var(--muted); margin: 0; max-width: 80ch; font-size: .92rem; }
.eixo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.eixo { border: 1px solid var(--border); border-top: 3px solid var(--eixo, var(--rvr1-accent, #219ebc)); border-radius: 11px; padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.eixo-turismo { --eixo: var(--rvr1-gold, #ffb703); }
.eixo-economia { --eixo: var(--rvr1-accent, #219ebc); }
.eixo-infra { --eixo: var(--rvr1-orange, #fb8500); }
.eixo-educacao { --eixo: #2e9e5b; }
.eixo-h b { font-size: 15px; color: var(--text); }
.eixo-sub { font-size: 12.5px; color: var(--muted); margin: 0; }
.eixo-ativo { font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--eixo, var(--muted)) 9%, var(--surface)); border-radius: 8px; padding: 9px 11px; }
.eixo-ativo .lb, .eixo-bloco .lb { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--eixo, var(--muted)); margin-bottom: 3px; }
.eixo-dado { font-size: 12.5px; color: var(--muted); }
.eixo-dado strong { color: var(--text); font-variant-numeric: tabular-nums; }
.eixo-bloco ul { margin: 2px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.eixo-bloco li { font-size: 12.5px; color: var(--text); }
.eixo-bloco.rec li { color: var(--muted); }
/* custo de desenvolvimento — resumo + por eixo */
.custo-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.cr-card { border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.cr-card .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cr-card .v { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cr-card .d { font-size: 11px; color: var(--muted); }
.cr-card.tot { border-color: var(--rvr1-gold, #ffb703); border-top: 3px solid var(--rvr1-gold, #ffb703); background: color-mix(in srgb, var(--rvr1-gold, #ffb703) 8%, var(--surface)); }
.cr-card.tot .v { color: var(--rvr1-color-azul-institucional, #146b81); }
.eixo-custo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
.eixo-custo > div { display: flex; flex-direction: column; gap: 1px; }
.eixo-custo .ck { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.eixo-custo .cv { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--text); }
.anc { color: var(--eixo, var(--rvr1-accent, #219ebc)); font-weight: 700; }
.eixo-fontes { font-size: 12px; }
.eixo-fontes summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.eixo-fontes ul { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.eixo-fontes li { color: var(--muted); }
/* indicadores — radar por domínio (visão de onde a cidade está) */
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ind-nuc { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.ind-h { font-weight: 700; color: var(--rvr1-color-azul-institucional, #146b81); font-size: 13.5px; margin-bottom: 8px; }
.ind-h small { color: var(--muted); font-weight: 400; font-size: 11px; }
.ind-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--surface-soft); font-size: 12.5px; }
.ind-row:last-child { border-bottom: 0; }
.ir-rot { color: var(--text); min-width: 0; }
.ir-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-pct { font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-size: 11px; white-space: nowrap; }
.ir-pct.dash { color: var(--muted); }
.ipct { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; }
.ipct.hi { color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 15%, transparent); }
.ipct.lo { color: var(--rvr1-orange, #fb8500); background: color-mix(in srgb, var(--rvr1-orange, #fb8500) 15%, transparent); }
/* ===================== Layout externo (relatório compartilhável, sem shell interno) ===================== */
.ext-body { background: var(--surface-soft, #f2f4f7); margin: 0; }
.ext-topbar { background: var(--rvr1-color-azul-institucional, #023047); color: #fff; padding: 14px 24px; }
.ext-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.ext-brand .brand-mark { background: var(--rvr1-gold, #ffb703); color: var(--rvr1-color-azul-institucional, #023047); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .92rem; }
.ext-brand small { font-weight: 400; opacity: .82; font-size: .78rem; }
.ext-main { max-width: 1080px; margin: 0 auto; padding: 26px 22px 40px; }
.ext-footer { max-width: 1080px; margin: 0 auto; padding: 18px 22px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .ext-footer { flex-direction: column; } }
/* link de compartilhamento gerado (tela interna) */
.share-box { border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: var(--surface); max-width: 640px; }
.share-url { display: flex; gap: 8px; margin: 10px 0 6px; }
.share-url input { flex: 1; font-family: var(--rvr1-font-mono, ui-monospace, monospace); font-size: 13px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--text); }
/* CTA do relatório-isca (externo) */
.isca-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn-cta { display: inline-block; text-decoration: none; font-weight: 700; font-size: .95rem; padding: 11px 20px; border-radius: 10px; background: var(--rvr1-gold, #ffb703); color: var(--rvr1-color-azul-institucional, #023047); }
.btn-cta:hover { filter: brightness(.96); }
.btn-cta-alt { font-weight: 600; font-size: .9rem; padding: 11px 18px; border-radius: 10px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); cursor: pointer; }
.btn-cta-alt:hover { background: rgba(255,255,255,.12); }
/* rodapé de lista de cards (reutilizável) */
.list-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
/* heatmap de indicadores — percentil por célula (HSL vermelho->verde) */
.heatmap { display: flex; flex-direction: column; gap: 6px; }
.hm-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 12px; }
.hm-dom { font-size: 12.5px; color: var(--text); font-weight: 500; }
.hm-cells { display: flex; flex-wrap: wrap; gap: 5px; }
.hm-cell { width: 26px; height: 26px; border-radius: 5px; background: hsl(calc(var(--p, 50) * 1.2) 60% 47%); }
.hm-cell.nd { background: var(--surface-soft); border: 1px dashed var(--border); }
.hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.hm-scale { flex: 0 0 150px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, hsl(0 60% 47%), hsl(60 60% 47%), hsl(120 60% 47%)); }
.hm-nd-leg { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.hm-nd-leg i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-soft); border: 1px dashed var(--border); display: inline-block; }
@media (max-width: 640px) { .hm-row { grid-template-columns: 1fr; gap: 4px; } }
/* Subguias da aba Indicadores (S3) — segmented control, distinto das abas principais */
.ind-estrato { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.ind-estrato-alerta { color: var(--rvr1-color-warning, #b45900); font-weight: 600; margin-left: 6px; }
.ind-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ind-subtabs { display: flex; flex-wrap: wrap; gap: 3px; background: var(--surface-soft, #f4f6f8);
border: 1px solid var(--border, #e2e7ee); border-radius: 11px; padding: 4px; margin-bottom: 18px; }
.ind-subtabs label { padding: 7px 15px; border-radius: 8px; font-size: 13px; font-weight: 500;
color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.ind-subtabs label:hover { color: var(--text); }
.ind-panel { display: none; }
#ind-resumo:checked ~ #ind-panel-resumo,
#ind-posicao:checked ~ #ind-panel-posicao,
#ind-dimensao:checked ~ #ind-panel-dimensao,
#ind-evolucao:checked ~ #ind-panel-evolucao,
#ind-dados:checked ~ #ind-panel-dados { display: block; }
#ind-resumo:checked ~ .ind-subtabs label[for="ind-resumo"],
#ind-posicao:checked ~ .ind-subtabs label[for="ind-posicao"],
#ind-dimensao:checked ~ .ind-subtabs label[for="ind-dimensao"],
#ind-evolucao:checked ~ .ind-subtabs label[for="ind-evolucao"],
#ind-dados:checked ~ .ind-subtabs label[for="ind-dados"] {
background: var(--surface, #fff); color: var(--rvr1-ink, #023047); font-weight: 600;
box-shadow: 0 1px 2px rgba(2, 48, 71, .12); }
.ind-radio:focus-visible ~ .ind-subtabs label { text-decoration: underline; }
/* Destaques automáticos no Resumo (§5.1/§6 — fallback dos slots de IA) */
.dstq { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dstq-col { border: 1px solid var(--border, #e2e7ee); border-radius: 10px; padding: 12px 14px; }
.dstq-col.bom { background: var(--rvr1-good-bg, #e6f5f2); border-color: #cfe9e2; }
.dstq-col.ruim { background: #fdf0e8; border-color: #f4d6c4; }
.dstq-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.dstq-col.bom .dstq-h { color: #1f7a6b; }
.dstq-col.ruim .dstq-h { color: #b45309; }
.dstq-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dstq-col li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text); }
.dstq-col li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.evo-sel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .02em; color: var(--muted); max-width: 460px; margin-bottom: 12px; }
.evo-sel select { font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0;
padding: .5rem .7rem; border: 1px solid var(--border, #e2e7ee); border-radius: 8px; background: var(--surface, #fff); }
/* Dados & Fontes v2 (S6) — agrupado por indicador, accordion de períodos */
.df-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.df-busca { flex: 1 1 240px; padding: .5rem .7rem; border: 1px solid var(--border, #e2e7ee); border-radius: 8px; background: var(--surface, #fff); font: inherit; }
.df-fonte { padding: .5rem .7rem; border: 1px solid var(--border, #e2e7ee); border-radius: 8px; background: var(--surface, #fff); font: inherit; }
.df-count { font-size: 12px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.df-head-row, .df-row, .df-per { display: grid; grid-template-columns: 2.4fr 1.1fr .7fr 1.6fr 1.2fr; gap: 10px; align-items: baseline; }
.df-head-row { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 0 10px 6px; border-bottom: 1px solid var(--border, #e2e7ee); }
.df-item { border-bottom: 1px solid var(--border, #e2e7ee); }
.df-row { padding: 9px 10px; font-size: 13.5px; }
.df-nome { color: var(--text); }
.df-nome code { display: block; font-size: 11px; color: var(--muted); }
.df-ano, .df-fonte { color: var(--muted); }
.df-toggle { background: none; border: 1px solid var(--border, #e2e7ee); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; color: var(--rvr1-color-azul-institucional, #146b81); cursor: pointer; white-space: nowrap; }
.df-toggle:hover { background: var(--surface-soft, #f4f6f8); }
.df-periodos { padding: 2px 10px 8px; }
.df-per { grid-template-columns: .7fr 1.1fr 1.6fr; padding: 4px 0 4px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--border, #e2e7ee); }
@media (max-width: 700px) { .df-head-row { display: none; } .df-row { grid-template-columns: 1fr auto; row-gap: 2px; } }
/* Mapa de calor v2 — células rotuladas, com o percentil dentro e preenchendo a largura */
.hm2 { display: flex; flex-direction: column; gap: 9px; }
.hm2-row { display: grid; grid-template-columns: 190px 1fr; align-items: stretch; gap: 12px; }
.hm2-dom { font-size: 12.5px; color: var(--text); font-weight: 600; align-self: center; }
.hm2-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.hm2-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px;
padding: 7px 11px; border-radius: 9px; cursor: default;
background: hsl(calc(var(--p, 50) * 1.2) 68% 93%);
border: 1px solid hsl(calc(var(--p, 50) * 1.2) 45% 82%); }
.hm2-lbl { font-size: 11.5px; color: var(--text); line-height: 1.2; }
.hm2-pct { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
color: hsl(calc(var(--p, 50) * 1.2) 60% 27%); }
.hm2-pct small { font-size: .62em; font-weight: 600; }
.hm2-cell.nd { background: var(--surface-soft); border: 1px dashed var(--border); }
.hm2-cell.nd .hm2-lbl { color: var(--muted); }
.hm2-cell.nd .hm2-pct { color: var(--muted); }
@media (max-width: 640px) { .hm2-row { grid-template-columns: 1fr; gap: 4px; } }
/* treemap MVP — composição da receita em blocos proporcionais */
.treemap { display: flex; width: 100%; height: 60px; border-radius: 8px; overflow: hidden; gap: 2px; margin-bottom: 6px; }
.tm-block { min-width: 4px; display: flex; flex-direction: column; justify-content: center; padding: 5px 7px; overflow: hidden; color: #fff; }
.tm-block.trib { background: var(--rvr1-accent, #219ebc); }
.tm-block.transf { background: var(--rvr1-color-azul-institucional, #146b81); }
.tm-lb { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-v { font-size: 10.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.tm-legend { display: flex; gap: 18px; font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.tm-legend i.tm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tm-dot.trib { background: var(--rvr1-accent, #219ebc); }
.tm-dot.transf { background: var(--rvr1-color-azul-institucional, #146b81); }
/* container de gráfico — Chart.js responsivo (maintainAspectRatio:false) precisa de
um pai com altura fixa e position:relative, senão o canvas cresce sem limite. */
.chart-wrap { position: relative; height: 260px; width: 100%; }
.chart-wrap.radar { height: 420px; max-width: 480px; margin-inline: auto; }
/* Radar v2 (S8) — gráfico + tabela-espelho lado a lado */
.radar-v2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: center; }
.radar-v2 .chart-wrap.radar { margin-inline: 0; }
.radar-espelho { display: flex; flex-direction: column; }
.re-row { display: grid; grid-template-columns: 1.4fr .7fr 1.1fr; gap: 10px; align-items: baseline;
padding: 7px 4px; border-bottom: 1px solid var(--border, #e2e7ee); font-size: 13px; }
.re-head { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.re-leitura { font-size: 12px; font-weight: 600; }
.re-leitura.bom { color: #1f7a6b; }
.re-leitura.ruim { color: #b45309; }
.re-leitura.neutro { color: var(--muted); }
@media (max-width: 720px) { .radar-v2 { grid-template-columns: 1fr; } }
/* rodapé de fonte padronizado (12.3) */
.fonte-nota { font-size: 11px; color: var(--muted); margin-top: 10px; padding-top: 7px; border-top: 1px dashed var(--border); }
.fonte-nota .fn-lbl { font-weight: 600; color: var(--rvr1-color-cinza-escuro, #4d6373); }
.fonte-nota .fn-ref { font-variant-numeric: tabular-nums; }
/* selo "Exhibit N" — rigor de deck em painéis/exhibits (12.5) */
.wb-exhibit-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--rvr1-color-azul-institucional, #146b81);
background: var(--rvr1-accent-weak, #e2f1f6); padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
/* Cards de KPI da Visão 360 / Indicadores — hierarquia nível consultoria */
.k360-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.k360 { border: 1px solid var(--border, #e2e7ee); border-radius: 11px; padding: 13px 15px 12px;
background: var(--surface, #fff); display: flex; flex-direction: column; gap: 5px;
transition: box-shadow .15s, border-color .15s; }
.k360:hover { border-color: var(--rvr1-accent, #219ebc); box-shadow: 0 2px 8px rgba(2, 48, 71, .07); }
.k360-lbl { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.25; }
.k360-val { font-size: 1.5rem; font-weight: 700; color: var(--rvr1-ink, #023047);
font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em; }
.k360-val .u { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.k360-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.k360-pct { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; white-space: nowrap; }
.k360-pct small { font-weight: 500; opacity: .8; }
.k360-pct.bom { background: #e6f5f2; color: #1f7a6b; } /* posição favorável (respeita polaridade) */
.k360-pct.ruim { background: #fdece4; color: #b45309; } /* posição desfavorável */
.k360-pct.neutro { background: #eef1f4; color: #4d6373; } /* indicador de tamanho, sem "melhor/pior" */
.k360-ano { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
/* Família de índices RVR1 — número em destaque + barra 0–100 (Fase 0) */
.fidx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fidx { border: 1px solid var(--border, #e2e7ee); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.fidx-lbl { font-size: 12px; color: var(--muted); font-weight: 500; }
.fidx-val { font-size: 1.7rem; font-weight: 700; color: var(--rvr1-ink, #023047); font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0 6px; }
.fidx-val .fidx-max { font-size: .85rem; font-weight: 500; color: var(--muted); }
.fidx-val.na { color: var(--muted); }
.fidx-bar { height: 6px; border-radius: 4px; background: var(--track, #e7ebf1); overflow: hidden; margin-bottom: 6px; }
.fidx-bar span { display: block; height: 100%; border-radius: 4px; background: var(--rvr1-accent, #219ebc); }
.fidx-foot { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Leituras integradas — estado vazio compacto (Fase 0) */
.li-vazio { margin-top: 14px; font-size: 13px; color: var(--rvr1-color-verde-estrategico, #2a9d8f); background: var(--rvr1-good-bg, #e6f5f2);
border: 1px solid #cfe9e2; border-radius: 9px; padding: 9px 13px; }
.wb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* loading global htmx (6e) — barra indeterminada no topo */
#htmx-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; opacity: 0; transition: opacity .2s; pointer-events: none; background: linear-gradient(90deg, transparent, var(--rvr1-gold, #ffb703), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
.htmx-req #htmx-loader { opacity: 1; animation: htmxslide 1s linear infinite; }
@keyframes htmxslide { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .htmx-req #htmx-loader { animation: none; background-position: 50% 0; } }
/* voltar (6a) na ficha do município */
.municipio-hero .voltar { display: inline-block; font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 6px; }
.municipio-hero .voltar:hover { color: var(--text); }
/* selo de confiabilidade do dado (8.5) */
.selo-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.selo-conf i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.selo-conf.alta i { background: var(--green, #2e9e5b); }
.selo-conf.media i { background: var(--rvr1-gold, #ffb703); }
.selo-conf.baixa i { background: var(--rvr1-orange, #fb8500); }
/* Exportação PDF via impressão (12.6) — o relatório externo vira documento limpo. */
@media print {
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ext-body { background: #fff; }
.no-print, .btn-cta, .btn-cta-alt, #htmx-loader { display: none !important; }
.ext-main { max-width: none; padding: 0; }
.ext-topbar { border-bottom: 1px solid #d0d0d0; }
a { text-decoration: none; }
.isca-money, .isca-close, .isca-cols, .isca-tri, .panel, section[class*="panel"] { break-inside: avoid; }
@page { margin: 14mm; }
}
/* ===== Dados por domínio (página detalhada do município) ===== */
.page-actions { display: flex; gap: .5rem; align-items: center; }
.btn-outline {
display: inline-flex; align-items: center; gap: .35rem;
padding: .45rem .8rem; border-radius: 8px; font-weight: 600; font-size: .85rem;
border: 1px solid var(--border, #d6dde6); color: var(--ink, #1c2733);
background: var(--surface, #fff); text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.dd-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.dd-nav a {
font-size: .78rem; font-weight: 600; text-decoration: none;
padding: .25rem .6rem; border-radius: 999px;
background: var(--surface-2, #f1f5f9); color: var(--ink-2, #47566a);
border: 1px solid var(--border, #e2e8f0);
}
.dd-nav a:hover { border-color: var(--brand); color: var(--brand); }
.dd-nav a b { color: var(--brand); font-weight: 800; }
.dd-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .6rem;
}
.dd-item {
display: flex; flex-direction: column; gap: .12rem;
padding: .6rem .7rem; border-radius: 10px;
background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e8edf3);
}
.dd-nome { font-size: .74rem; color: var(--ink-2, #5a6b80); line-height: 1.25; }
.dd-valor { font-size: 1.02rem; font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink, #17222f); }
.dd-meta { font-size: .68rem; color: var(--muted, #93a1b3); }
/* ===== Widget de cobertura de dados (dashboard) ===== */
.cob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.cob-item {
padding: .7rem .8rem; border-radius: 10px;
background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e8edf3);
}
.cob-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.cob-dom { font-size: .82rem; font-weight: 700; color: var(--ink, #1c2733); }
.cob-n { font-size: .72rem; color: var(--ink-2, #5a6b80); white-space: nowrap; }
.cob-bar { height: 7px; border-radius: 999px; background: var(--surface, #e9eef4); margin-top: .45rem; overflow: hidden; }
.cob-fill { height: 100%; border-radius: 999px; background: var(--brand, #219ebc); }
.cob-fill.thin { background: var(--warning, #e08a1e); }
.cob-pct { font-size: .68rem; color: var(--muted, #8b98a9); margin-top: .2rem; display: block; }
/* ===== Selo de Fiscal Stress (ficha) ===== */
.fs-selo { border: 1px solid var(--border, #e2e8f0); border-left: 4px solid var(--muted, #93a1b3);
border-radius: 12px; padding: 12px 15px; margin: 0 0 14px; background: var(--surface-2, #f8fafc); }
.fs-selo.fs-0 { border-left-color: #1f9d6b; background: #e9f7f0; }
.fs-selo.fs-1 { border-left-color: #c9821a; background: #fbf3e2; }
.fs-selo.fs-2 { border-left-color: #e0691e; background: #fdeee2; }
.fs-selo.fs-3 { border-left-color: #d23f3f; background: #fce9e9; }
@media (prefers-color-scheme: dark){
.fs-selo.fs-0 { background: #10261d; } .fs-selo.fs-1 { background: #2c2410; }
.fs-selo.fs-2 { background: #2e1d10; } .fs-selo.fs-3 { background: #2c1414; }
}
.fs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-tag { font-weight: 800; font-size: .92rem; text-transform: capitalize; }
.fs-selo.fs-0 .fs-tag { color: #1f9d6b; } .fs-selo.fs-1 .fs-tag { color: #b0731a; }
.fs-selo.fs-2 .fs-tag { color: #c25a17; } .fs-selo.fs-3 .fs-tag { color: #c53030; }
.fs-meta { font-size: .74rem; color: var(--ink-2, #5a6b80); }
.fs-sinais { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fs-sinais li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 10px;
border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--border, #eef2f6); }
.fs-sinais li.fs-on { border-color: #e6b3b3; }
.fs-nm { font-weight: 650; font-size: .84rem; }
.fs-dt { font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2, #47566a); }
.fs-sinais li.fs-on .fs-dt { color: #c53030; font-weight: 700; }
.fs-sinais li.fs-na { opacity: .55; }
.fs-bs { grid-column: 1 / -1; font-size: .68rem; color: var(--muted, #93a1b3); }
/* ===== Efficiency Frontier (gasto × resultado) ===== */
.ef-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ef-card { border: 1px solid var(--border, #e2e8f0); border-left: 4px solid var(--muted, #93a1b3);
border-radius: 12px; padding: 13px 15px; background: var(--surface-2, #f8fafc); }
.ef-card.ef-eficiencia { border-left-color: #1f9d6b; }
.ef-card.ef-sustentacao { border-left-color: #2f79c2; }
.ef-card.ef-ineficiencia { border-left-color: #d23f3f; }
.ef-card.ef-subinvestimento { border-left-color: #c9821a; }
.ef-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ef-dom { font-weight: 750; font-size: .98rem; }
.ef-badge { font-size: .72rem; font-weight: 800; padding: .18rem .55rem; border-radius: 999px; text-transform: capitalize; }
.ef-eficiencia .ef-badge { background: #e2f4ec; color: #1a8a5e; }
.ef-sustentacao .ef-badge { background: #e4eef8; color: #2c6cb0; }
.ef-ineficiencia .ef-badge { background: #fce9e9; color: #c53030; }
.ef-subinvestimento .ef-badge { background: #fbf1dc; color: #b0731a; }
@media (prefers-color-scheme: dark){
.ef-eficiencia .ef-badge { background: #123026; color: #43c491; }
.ef-sustentacao .ef-badge { background: #12283e; color: #6fb2ec; }
.ef-ineficiencia .ef-badge { background: #2c1414; color: #ec7b7b; }
.ef-subinvestimento .ef-badge { background: #332812; color: #e0a446; }
}
.ef-bars { display: grid; gap: 7px; margin: 11px 0 8px; }
.ef-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; }
.ef-lb { font-size: .76rem; color: var(--ink-2, #5a6b80); }
.ef-pc { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; }
.ef-track { grid-column: 1 / 2; height: 7px; border-radius: 999px; background: var(--surface, #e9eef4); overflow: hidden; }
.ef-fill { height: 100%; border-radius: 999px; }
.ef-fill.gasto { background: #8a94a6; }
.ef-fill.result { background: var(--brand, #219ebc); }
.ef-leitura { margin: 0; font-size: .8rem; color: var(--ink-2, #47566a); }
/* ===== Contract Cliff (exposição estadual) ===== */
.cliff-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 720px){ .cliff-wrap { grid-template-columns: 1fr; } }
.cliff-h { margin: 0 0 10px; font-size: .82rem; font-weight: 700; color: var(--ink-2, #5a6b80); text-transform: uppercase; letter-spacing: .04em; }
.cliff-cat { margin-bottom: 9px; }
.cliff-cat-top { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; }
.cliff-cat-top b { font-variant-numeric: tabular-nums; }
.cliff-track { height: 8px; border-radius: 999px; background: var(--surface, #e9eef4); overflow: hidden; margin: 3px 0 2px; }
.cliff-fill { height: 100%; border-radius: 999px; background: var(--brand, #219ebc); }
.cliff-meta { font-size: .7rem; color: var(--muted, #93a1b3); }
.cliff-months { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.cliff-month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.cliff-col { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; }
.cliff-col-fill { width: 100%; border-radius: 5px 5px 0 0; background: var(--brand, #219ebc); min-height: 2px; }
.cliff-mlb { font-size: .62rem; color: var(--muted, #93a1b3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ===== Confidence Score (ficha) ===== */
.conf-selo { display: flex; align-items: center; gap: 14px; padding: 11px 15px; margin-bottom: 12px;
border-radius: 12px; border: 1px solid var(--border, #e2e8f0); border-left: 4px solid var(--muted, #93a1b3);
background: var(--surface-2, #f8fafc); }
.conf-selo.conf-alta { border-left-color: #1f9d6b; }
.conf-selo.conf-media { border-left-color: #c9821a; }
.conf-selo.conf-baixa { border-left-color: #d23f3f; }
.conf-num { font-size: 1.7rem; font-weight: 820; font-variant-numeric: tabular-nums; line-height: 1; }
.conf-num small { font-size: .8rem; font-weight: 600; color: var(--muted, #93a1b3); }
.conf-selo.conf-alta .conf-num { color: #1f9d6b; }
.conf-selo.conf-media .conf-num { color: #b0731a; }
.conf-selo.conf-baixa .conf-num { color: #c53030; }
.conf-txt { display: flex; flex-direction: column; gap: .1rem; }
.conf-txt strong { font-size: .9rem; text-transform: capitalize; }
.conf-txt span { font-size: .76rem; color: var(--ink-2, #5a6b80); }
/* ===== Índices-síntese / compostos (capa) ===== */
.ix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ix-card { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 12px 13px;
background: var(--surface-2, #f8fafc); text-align: center; border-top: 3px solid var(--muted, #93a1b3); }
.ix-card.ix-meta { background: var(--surface, #fff); box-shadow: 0 2px 10px rgba(16,34,46,.06); }
.ix-card.ix-bom { border-top-color: #1f9d6b; }
.ix-card.ix-ruim { border-top-color: #d23f3f; }
.ix-card.ix-neutro { border-top-color: #c9821a; }
.ix-card.ix-na { border-top-color: var(--border, #d6dde6); opacity: .7; }
.ix-score { font-size: 1.9rem; font-weight: 820; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ix-card.ix-bom .ix-score { color: #1a8a5e; }
.ix-card.ix-ruim .ix-score { color: #c53030; }
.ix-card.ix-neutro .ix-score { color: #b0731a; }
.ix-card.ix-na .ix-score { color: var(--muted, #93a1b3); }
.ix-nm { font-size: .78rem; font-weight: 650; margin-top: .25rem; line-height: 1.2; }
.ix-cf { font-size: .66rem; color: var(--muted, #93a1b3); margin-top: .2rem; }
.ix-card.ix-exp { border-style: dashed; border-top-color: #7c6bb0; background: transparent; }
.ix-card.ix-exp .ix-score { color: #7c6bb0; }
.ix-card.ix-exp .ix-cf { color: #7c6bb0; font-weight: 600; }
/* Bandeira (IBGE-keyed) na lista de municípios — municipal → UF → letras */
.entity-flag { flex: none; width: 38px; height: 26px; border-radius: 5px; overflow: hidden;
background: #fff; border: 1px solid var(--border); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(10,26,51,.06); }
.entity-flag img { width: 100%; height: 100%; object-fit: contain; display: block; }
.entity-flag.is-uf img { object-fit: cover; }
.entity-flag b { font-size: .6rem; font-weight: 800; color: var(--muted, #667085); }
.entity-row > span:not(.entity-flag) { flex: 1; min-width: 0; }