/* Código de cores dos cabeçalhos do painel — compartilhado pelos dois mapas.
 *
 * O painel tinha seis seções com peso visual idêntico, separadas só por um
 * filete: lia-se como uma lista longa, sem assunto. Aqui cada seção ganha um
 * ÍCONE em chip colorido, e o texto continua escuro — colorir o texto de seis
 * cabeçalhos viraria arco-íris e cansaria a leitura.
 *
 * O código tem o MESMO significado nos dois mapas, então quem aprende num
 * aprende no outro:
 *   azul     recortar os dados      (Filtros)
 *   vermelho onde falta igreja      (Cobertura)
 *   violeta  cor e aparência        (Cores / Colorir por)
 *   verde    o que aparece no mapa  (Camadas)
 *   âmbar    números e análise      (Análises)
 *   cinza    ajustes e ponto de partida
 *   teal     o cenário em si
 */

/* Violeta e teal não existem nos tokens da marca. Ficam escopados ao painel,
   como extensão só para este código de cores — não são cores de marca. */
:root {
    --st-violeta-soft: #f1ecfb;
    --st-violeta: #5b3fa8;
    --st-teal-soft: #e6f5f4;
    --st-teal: #12706a;
    --st-cinza-soft: #eef1f5;
    --st-cinza: #4a5a6b;
}

/* O RISCO que separa: 2px na cor da seção, no topo dela. Substitui o filete
   cinza que havia embaixo de cada seção — mantendo os dois, ficaria linha dupla
   entre cada par. Como o risco pertence à seção de baixo, a cor sempre anuncia
   o assunto que começa ali, nunca o que terminou. */
.sec-wrap { border-top: 2px solid var(--line); }
.sec-wrap.st-azul     { border-top-color: var(--primary); }
.sec-wrap.st-vermelho { border-top-color: var(--danger); }
.sec-wrap.st-verde    { border-top-color: var(--success); }
.sec-wrap.st-ambar    { border-top-color: var(--amber); }
.sec-wrap.st-violeta  { border-top-color: var(--st-violeta); }
.sec-wrap.st-teal     { border-top-color: var(--st-teal); }
.sec-wrap.st-cinza    { border-top-color: var(--st-cinza); }

/* destaque do cabeçalho: maior que o corpo e com o chip do ícone mais presente */
.sec-wrap .sec-title { font-size: 14px; gap: 9px; }

.sec-title > i:first-child {
    width: 24px; height: 24px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: 7px; font-size: 13px; line-height: 1;
    /* padrão: azul, para uma seção sem modificador não ficar sem cor */
    background: var(--primary-soft); color: var(--primary);
}

.sec-title.st-azul     > i:first-child { background: var(--primary-soft);     color: var(--primary); }
.sec-title.st-vermelho > i:first-child { background: var(--danger-soft);      color: var(--danger); }
.sec-title.st-verde    > i:first-child { background: var(--success-soft);     color: var(--success); }
.sec-title.st-ambar    > i:first-child { background: var(--amber-soft);       color: var(--amber-strong); }
.sec-title.st-violeta  > i:first-child { background: var(--st-violeta-soft);  color: var(--st-violeta); }
.sec-title.st-teal     > i:first-child { background: var(--st-teal-soft);     color: var(--st-teal); }
.sec-title.st-cinza    > i:first-child { background: var(--st-cinza-soft);    color: var(--st-cinza); }