/* ==========================================================================
   Complete Bari — sistema visual do portal (rebranding 2026)
   --------------------------------------------------------------------------
   Fonte única de verdade do design. As telas usam Bootstrap 5.3 puro; aqui
   as variáveis do próprio Bootstrap são reescritas, então card, badge, table
   e botão já existentes herdam a marca sem precisar mexer em cada template.

   Ordem: 1 tokens · 2 ponte com o Bootstrap · 3 tipografia · 4 componentes
          5 shell (sidebar/topbar) · 6 grafismos · 7 utilitários
   ========================================================================== */

/* ── 1. Tokens da marca ─────────────────────────────────────────────────── */

:root {
    /* Paleta oficial. Verde vital + grafite são a dupla assinatura; lima
       marca destaque e pink é detalhe afetivo — nunca dominante. */
    --verde-vital: #49E395;
    --lima: #C4FB5A;
    --pink: #FA78DC;
    --grafite: #242426;

    /* Derivados de estado. O verde vital só aparece como FUNDO: sobre branco
       ele rende 1.65:1, então texto/ícone verde usa a versão tinta (5.4:1). */
    --verde-hover: #38D186;
    --verde-ativo: #2FC77D;
    --verde-tinta: #0E7A4A;
    --verde-veu: #E8FBF1;
    --lima-veu: #F4FEE0;
    --pink-veu: #FEEAF8;

    /* Neutros frios. O bege antigo (#F5F3ED) saiu: os brancos agora puxam
       levemente para o verde, o que casa com a paleta e tira o ar datado. */
    --superficie: #FFFFFF;
    --fundo: #F4F6F5;
    --fundo-fundo: #EDF1EF;
    --borda: #E4E9E6;
    --borda-forte: #D3DAD6;

    --tinta: #242426;
    --tinta-media: #5C6160;
    --tinta-suave: #8A908D;

    /* Tipografia — três famílias, três funções (manual da marca).
       Youth é licenciada e não tem CDN público: enquanto o .woff2 não entrar
       em static/fonts/, o token cai na General Sans e nada quebra. */
    --fonte-titulo: 'Fraunces', 'Georgia', serif;
    --fonte-destaque: 'Youth', 'General Sans', system-ui, sans-serif;
    --fonte-corpo: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Forma e profundidade */
    --raio: 14px;
    --raio-sm: 10px;
    --raio-lg: 20px;
    --raio-pill: 999px;

    --sombra-sm: 0 1px 2px rgba(36, 40, 38, .05);
    --sombra: 0 2px 4px rgba(36, 40, 38, .04), 0 12px 28px -14px rgba(36, 40, 38, .18);
    --sombra-lg: 0 8px 20px -6px rgba(36, 40, 38, .10), 0 28px 60px -28px rgba(36, 40, 38, .28);
    --sombra-verde: 0 12px 30px -12px rgba(47, 199, 125, .55);
}

/* Youth entra sozinha quando os arquivos forem adicionados em static/fonts/.
   Descomente as duas regras e o token --fonte-destaque passa a usá-la.

@font-face {
    font-family: 'Youth';
    src: url('../fonts/Youth-Medium.woff2') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Youth';
    src: url('../fonts/Youth-Black.woff2') format('woff2');
    font-weight: 900; font-display: swap;
}
*/

/* ── 2. Ponte com o Bootstrap ───────────────────────────────────────────── */

:root {
    --bs-body-font-family: var(--fonte-corpo);
    --bs-body-color: var(--tinta);
    --bs-body-bg: var(--fundo);
    --bs-emphasis-color: var(--grafite);
    --bs-secondary-color: var(--tinta-media);
    --bs-tertiary-color: var(--tinta-suave);

    --bs-primary: #49E395;
    --bs-primary-rgb: 73, 227, 149;
    --bs-success: #49E395;
    --bs-success-rgb: 73, 227, 149;
    --bs-info: #FA78DC;
    --bs-info-rgb: 250, 120, 220;
    --bs-warning: #C4FB5A;
    --bs-warning-rgb: 196, 251, 90;
    --bs-dark: #242426;
    --bs-dark-rgb: 36, 36, 38;
    --bs-light: #F4F6F5;
    --bs-light-rgb: 244, 246, 245;

    --bs-link-color: var(--verde-tinta);
    --bs-link-hover-color: #0A5C38;
    --bs-link-color-rgb: 14, 122, 74;

    --bs-border-color: var(--borda);
    --bs-border-radius: var(--raio-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--raio);
    --bs-border-radius-xl: var(--raio-lg);
    --bs-border-radius-pill: var(--raio-pill);

    --bs-focus-ring-color: rgba(73, 227, 149, .35);
}

/* ── 3. Tipografia ──────────────────────────────────────────────────────── */

body {
    font-family: var(--fonte-corpo);
    background: var(--fundo);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}

/* Fraunces carrega a hierarquia de títulos. O eixo SOFT alto (144pt SuperSoft
   do manual) é o que dá o ar premium em vez de serifa institucional. */
h1, h2, h3, .doc-titulo, .titulo-marca {
    font-family: var(--fonte-titulo);
    font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 120;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--grafite);
}

h1 { font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.12; }
h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.95rem); line-height: 1.18; }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.25; }

/* Youth (ou seu fallback) nos subtítulos e chamadas curtas. */
h4, h5, h6, .subtitulo-marca, .card-header h6, .menu-section {
    font-family: var(--fonte-destaque);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--grafite);
}

.display-marca {
    font-family: var(--fonte-titulo);
    font-variation-settings: 'SOFT' 80, 'opsz' 144;
    font-weight: 600;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--grafite);
}

/* Rótulo de marca — o "Complete Bari®" do manual. */
.rotulo-marca {
    font-family: var(--fonte-corpo);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.text-muted { color: var(--tinta-media) !important; }
small, .small { letter-spacing: 0; }

/* Números de impacto (KPIs) usam Fraunces, como manda a hierarquia. */
.numero-impacto {
    font-family: var(--fonte-titulo);
    font-variation-settings: 'SOFT' 60, 'opsz' 144;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--grafite);
    line-height: 1;
}

/* ── 4. Componentes ─────────────────────────────────────────────────────── */

/* 4.1 Botões
   Regra dura da marca: nada de texto branco sobre verde (1.65:1). O botão
   principal é verde vital com texto grafite — 9.37:1, passa em AAA. */
.btn {
    --bs-btn-font-family: var(--fonte-corpo);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--raio-sm);
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1.15rem;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn:active { transform: translateY(0); }

.btn-success,
.btn-primary {
    --bs-btn-color: var(--grafite);
    --bs-btn-bg: var(--verde-vital);
    --bs-btn-border-color: var(--verde-vital);
    --bs-btn-hover-color: var(--grafite);
    --bs-btn-hover-bg: var(--verde-hover);
    --bs-btn-hover-border-color: var(--verde-hover);
    --bs-btn-active-color: var(--grafite);
    --bs-btn-active-bg: var(--verde-ativo);
    --bs-btn-active-border-color: var(--verde-ativo);
    --bs-btn-disabled-color: var(--grafite);
    --bs-btn-disabled-bg: #BFEFD6;
    --bs-btn-disabled-border-color: #BFEFD6;
}

.btn-success:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--sombra-verde);
}

.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--grafite);
    --bs-btn-border-color: var(--grafite);
    --bs-btn-hover-color: var(--verde-vital);
    --bs-btn-hover-bg: #101012;
    --bs-btn-hover-border-color: #101012;
    --bs-btn-active-bg: #000000;
}

.btn-outline-success,
.btn-outline-primary {
    --bs-btn-color: var(--verde-tinta);
    --bs-btn-border-color: var(--verde-vital);
    --bs-btn-hover-color: var(--grafite);
    --bs-btn-hover-bg: var(--verde-vital);
    --bs-btn-hover-border-color: var(--verde-vital);
    --bs-btn-active-color: var(--grafite);
    --bs-btn-active-bg: var(--verde-hover);
    --bs-btn-active-border-color: var(--verde-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--tinta-media);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-color: var(--grafite);
    --bs-btn-hover-bg: var(--fundo-fundo);
    --bs-btn-hover-border-color: var(--tinta-suave);
    --bs-btn-active-color: var(--grafite);
    --bs-btn-active-bg: var(--fundo-fundo);
    --bs-btn-active-border-color: var(--tinta-suave);
}

.btn-outline-danger {
    --bs-btn-color: #B4402F;
    --bs-btn-border-color: #EBC9C4;
    --bs-btn-hover-bg: #B4402F;
    --bs-btn-hover-border-color: #B4402F;
    --bs-btn-hover-color: #FFFFFF;
}

.btn-danger {
    --bs-btn-bg: #B4402F;
    --bs-btn-border-color: #B4402F;
    --bs-btn-hover-bg: #973224;
    --bs-btn-hover-border-color: #973224;
}

.btn-light {
    --bs-btn-color: var(--grafite);
    --bs-btn-bg: var(--superficie);
    --bs-btn-border-color: var(--borda);
    --bs-btn-hover-bg: var(--fundo-fundo);
    --bs-btn-hover-border-color: var(--borda-forte);
}

/* Botão de ações "três pontos": discreto até o hover, para não competir com o
   conteúdo do card. Padrão para qualquer menu de item (publicação, linha de
   tabela, card) — não criar variações locais. */
.btn-acoes {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--tinta-suave);
    border-radius: var(--raio-pill);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.btn-acoes:hover,
.btn-acoes:focus-visible,
.btn-acoes.show,
.btn-acoes[aria-expanded="true"] {
    background: var(--fundo-fundo);
    color: var(--grafite);
}

/* Sem a setinha que o Bootstrap acrescenta em dropdown-toggle. */
.btn-acoes::after { display: none !important; }

/* 4.2 Cards — a superfície branca sobre o fundo frio é o que dá o ar premium. */
.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: var(--borda);
    --bs-card-border-radius: var(--raio);
    --bs-card-inner-border-radius: var(--raio);
    --bs-card-cap-bg: var(--superficie);
    box-shadow: var(--sombra-sm);
    transition: box-shadow .25s ease, transform .25s ease;
}

.card.shadow-sm, .card.shadow { box-shadow: var(--sombra) !important; }

.card-header {
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
    font-family: var(--fonte-destaque);
    font-weight: 600;
    color: var(--grafite);
}

/* 4.3 Tabelas */
.table {
    --bs-table-color: var(--tinta);
    --bs-table-border-color: var(--borda);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--fundo);
    --bs-table-hover-bg: var(--verde-veu);
    --bs-table-hover-color: var(--grafite);
}

.table > thead th {
    font-family: var(--fonte-corpo);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    padding-top: .85rem;
    padding-bottom: .85rem;
    white-space: nowrap;
}

.table > tbody > tr { border-color: var(--borda); }
.table > tbody > tr > td { padding-top: .8rem; padding-bottom: .8rem; vertical-align: middle; }

/* 4.4 Badges — lima para destaque, pink para detalhe afetivo, sempre com
   texto grafite (as três cores da marca são claras demais para texto branco). */
.badge {
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .42em .78em;
    border-radius: var(--raio-pill);
}

.badge.bg-success, .badge.text-bg-success { background-color: var(--verde-vital) !important; color: var(--grafite) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--lima) !important; color: var(--grafite) !important; }
.badge.bg-info,    .badge.text-bg-info    { background-color: var(--pink) !important; color: var(--grafite) !important; }
.badge.bg-dark,    .badge.text-bg-dark    { background-color: var(--grafite) !important; color: #FFFFFF !important; }
.badge.bg-light,   .badge.text-bg-light   { background-color: var(--fundo-fundo) !important; color: var(--tinta-media) !important; }
.badge.bg-secondary { background-color: var(--fundo-fundo) !important; color: var(--tinta-media) !important; }

/* Versões suaves, para status em tabela sem poluir a página de cor sólida. */
.badge-suave-verde { background: var(--verde-veu); color: var(--verde-tinta); }
.badge-suave-lima  { background: var(--lima-veu);  color: #4A6B10; }
.badge-suave-pink  { background: var(--pink-veu);  color: #A02B7E; }

/* text-success precisa da versão tinta: o verde vital em texto não é legível. */
.text-success { color: var(--verde-tinta) !important; }
.text-primary { color: var(--verde-tinta) !important; }
.text-dark    { color: var(--grafite) !important; }
.bg-success   { background-color: var(--verde-vital) !important; }
.bg-dark      { background-color: var(--grafite) !important; }
.bg-light     { background-color: var(--fundo) !important; }

/* 4.5 Formulários */
.form-control, .form-select {
    border-radius: var(--raio-sm);
    border: 1px solid var(--borda-forte);
    padding: .6rem .85rem;
    color: var(--tinta);
    background-color: var(--superficie);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control::placeholder { color: #B3B8B5; }

.form-control:focus, .form-select:focus {
    border-color: var(--verde-vital);
    box-shadow: 0 0 0 3.5px rgba(73, 227, 149, .22);
}

.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--tinta-media);
    margin-bottom: .4rem;
}

.form-check-input:checked {
    background-color: var(--verde-vital);
    border-color: var(--verde-vital);
}

.form-check-input:focus {
    border-color: var(--verde-vital);
    box-shadow: 0 0 0 3.5px rgba(73, 227, 149, .22);
}

.input-group-text {
    background: var(--fundo);
    border-color: var(--borda-forte);
    color: var(--tinta-suave);
    border-radius: var(--raio-sm);
}

/* 4.6 Alertas — tons de véu, sem os pastéis padrão do Bootstrap. */
.alert {
    border-radius: var(--raio-sm);
    border: 1px solid transparent;
    font-size: .9rem;
}

.alert-success { background: var(--verde-veu); border-color: #B9EED4; color: #0B5F3A; }
.alert-info    { background: var(--pink-veu);  border-color: #F8CDEC; color: #8E2470; }
.alert-warning { background: var(--lima-veu);  border-color: #E2F5AE; color: #4A6B10; }
.alert-danger  { background: #FCF3F1; border-color: #EBC9C4; color: #8C3A2C; }

/* 4.7 Modais, offcanvas, dropdowns */
.modal-content, .offcanvas {
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
}

.modal-header, .offcanvas-header { border-bottom: 1px solid var(--borda); }
.modal-footer { border-top: 1px solid var(--borda); }
.modal-title, .offcanvas-title { font-family: var(--fonte-destaque); font-weight: 600; color: var(--grafite); }

.dropdown-menu {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .35rem;
}

.dropdown-item { border-radius: var(--raio-sm); font-size: .9rem; }
.dropdown-item:active, .dropdown-item.active { background: var(--verde-vital); color: var(--grafite); }

/* 4.8 Paginação */
.pagination {
    --bs-pagination-color: var(--tinta-media);
    --bs-pagination-bg: var(--superficie);
    --bs-pagination-border-color: var(--borda);
    --bs-pagination-border-radius: var(--raio-sm);
    --bs-pagination-hover-color: var(--grafite);
    --bs-pagination-hover-bg: var(--verde-veu);
    --bs-pagination-hover-border-color: var(--borda-forte);
    --bs-pagination-active-color: var(--grafite);
    --bs-pagination-active-bg: var(--verde-vital);
    --bs-pagination-active-border-color: var(--verde-vital);
    --bs-pagination-focus-box-shadow: 0 0 0 3.5px rgba(73, 227, 149, .22);
    gap: .25rem;
}

/* 4.9 Abas e progresso */
.nav-tabs { border-bottom: 1px solid var(--borda); }
.nav-tabs .nav-link { color: var(--tinta-media); border: none; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--grafite); background: transparent; border-bottom-color: var(--verde-vital); }

.progress { background: var(--fundo-fundo); border-radius: var(--raio-pill); }
.progress-bar { background: var(--verde-vital); }

hr { border-color: var(--borda); opacity: 1; }

/* ── 5. Shell: sidebar e topbar ─────────────────────────────────────────── */

/* O logo verde é uma tarja com "COMPLETE" vazado: sobre fundo claro o vazado
   viraria texto branco sobre verde, que o manual proíbe. Por isso a sidebar é
   grafite — é lá que a versão verde do logo funciona, e é a dupla assinatura
   verde + grafite da marca. */
.sidebar {
    background: var(--grafite);
    border-right: none;
    color: rgba(255, 255, 255, .72);
}

.sidebar-logo { padding: 22px 20px 14px; }
.logo-full { max-width: 150px; }
.logo-mini { max-width: 34px; border-radius: 8px; }

.sidebar .menu-section {
    font-family: var(--fonte-corpo);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
    padding: 0 22px;
    margin: 18px 0 6px;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .74);
    font-size: .9rem;
    font-weight: 500;
    border-radius: var(--raio-sm);
    margin: 2px 12px;
    padding: .6rem .7rem;
    position: relative;
    transition: background-color .18s ease, color .18s ease;
}

.sidebar .nav-link i { font-size: 1.05rem; margin-right: 11px; opacity: .85; }

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .07);
    color: #FFFFFF;
    box-shadow: none;
    outline: none;
}

/* Item atual: véu verde + barra vital à esquerda. */
.sidebar .nav-link.ativo {
    background: rgba(73, 227, 149, .14);
    color: var(--verde-vital);
}

.sidebar .nav-link.ativo::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--verde-vital);
}

.sidebar .nav-link.ativo i { opacity: 1; }

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 12px;
}

.sidebar-footer .nav-link.text-danger { color: #FF9E8F !important; }
.sidebar-footer .nav-link.text-danger:hover { background: rgba(255, 158, 143, .12); color: #FFB9AE !important; }

.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

/* Topbar: encosta no conteúdo, sem peso visual. */
.topbar {
    height: 66px;
    background: transparent;
    border-bottom: 1px solid var(--borda);
    gap: .25rem;
}

.topbar .btn-light {
    background: var(--superficie);
    border: 1px solid var(--borda);
    color: var(--tinta-media);
}

.topbar .btn-light:hover { background: var(--fundo-fundo); color: var(--grafite); }

.content { padding: 28px; }

/* Cabeçalho de página padrão em todas as telas internas. */
.content-header h2, .content-header h1 { margin-bottom: .15rem; }

/* ── 6. Grafismos ───────────────────────────────────────────────────────── */

/* Figuras em movimento da biblioteca oficial. Regra do manual: nunca atrás de
   texto longo e no máximo uma por peça — por isso entram como marca d'água de
   canto, com opacidade baixa e ignorando o mouse. */
.grafismo {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.grafismo-canto {
    right: -40px;
    bottom: -30px;
    width: 210px;
    opacity: .14;
}

.grafismo-veu { opacity: .08; }

/* Faixa de destaque com a tarja da marca (mesmo gesto do logotipo). */
.tarja-marca {
    display: inline-block;
    background: var(--verde-vital);
    color: var(--grafite);
    font-family: var(--fonte-destaque);
    font-weight: 700;
    padding: .1em .45em;
    letter-spacing: -.01em;
}

.tarja-lima { background: var(--lima); }
.tarja-pink { background: var(--pink); }

/* ── 7. Utilitários de marca ────────────────────────────────────────────── */

.superficie {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
}

.painel-grafite {
    background: var(--grafite);
    color: #FFFFFF;
    border-radius: var(--raio-lg);
    position: relative;
    overflow: hidden;
}

.painel-grafite h1, .painel-grafite h2, .painel-grafite h3 { color: #FFFFFF; }
.painel-grafite .destaque-verde { color: var(--verde-vital); }

.borda-vital { border-left: 3px solid var(--verde-vital); }
.texto-verde { color: var(--verde-tinta); }
.texto-lima  { color: #4A6B10; }
.texto-pink  { color: #A02B7E; }

.link-marca { color: var(--verde-tinta); text-decoration: none; font-weight: 600; }
.link-marca:hover { color: #0A5C38; text-decoration: underline; }

/* Estado vazio padronizado — usa o grafismo como ilustração. */
.estado-vazio { text-align: center; padding: 3rem 1rem; color: var(--tinta-suave); }
.estado-vazio img { width: 120px; opacity: .5; margin-bottom: 1rem; }

::selection { background: var(--verde-vital); color: var(--grafite); }

:focus-visible { outline: 2px solid var(--verde-vital); outline-offset: 2px; }

/* ── Tabela de prospect (creators) ──────────────────────────────────────────
   Tabela larga com rolagem horizontal: a coluna de ações fica fixa à direita. */
.tabela-larga .cell-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tabela-larga .col-acoes {
    position: sticky;
    right: 0;
    background: var(--bs-body-bg, #fff);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .12);
}
.tabela-larga thead .col-acoes { background: var(--bs-table-bg, #f8f9fa); }
.badge-territorio {
    background: var(--fundo-fundo);
    color: var(--tinta);
    font-weight: 500;
}