/*
 * dashboard.css: visual dos painéis montados pela PainelDashboard (app/service/utilidades/PainelDashboard.php, DEC-72).
 *
 * Global (carregado pelo libraries_user.html) e todo prefixado `pd-`: nenhum seletor atinge elemento fora de `.pd`.
 * As cores, os espaços, o raio e a sombra são variáveis `--pd-*` definidas na raiz `.pd`. Fonte do sistema, sem CDN.
 * Sem regra de negócio: o que é de CRM (ou de qualquer outro assunto) fica na tela.
 */

.pd {
    /* Paleta (DEC-72): a referência são as constantes COR_* da PainelDashboard (PainelDashboard.php). Mantenha estas
       seis iguais a elas e à PALETA do tema `acif` em grafico-echarts.js (DEC-75). */
    --pd-primaria: #2F6FED;
    --pd-sucesso: #16A34A;
    --pd-perigo: #DC2626;
    --pd-atencao: #D97706;
    --pd-neutro: #64748B;
    --pd-comparacao: #94A3B8;

    --pd-texto: #0F172A;
    --pd-texto-2: #475569;
    --pd-texto-3: #64748B;
    --pd-borda: #E2E8F0;
    --pd-fundo: #F8FAFC;
    --pd-cartao: #FFFFFF;

    --pd-esp-1: 4px;
    --pd-esp-2: 8px;
    --pd-esp-3: 12px;
    --pd-esp-4: 16px;
    --pd-esp-5: 24px;

    --pd-raio: 12px;
    --pd-raio-pequeno: 8px;
    --pd-sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.06);

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--pd-texto);
    line-height: 1.45;
}

.pd *,
.pd *::before,
.pd *::after {
    box-sizing: border-box;
}

/* ---------- Cabeçalho ---------- */

.pd .pd-cabecalho {
    margin: 0 0 var(--pd-esp-3);
}

.pd .pd-cabecalho-rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pd-texto-3);
}

.pd .pd-saudacao {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pd-texto);
}

.pd .pd-data {
    margin-top: var(--pd-esp-1);
    font-size: 14px;
    color: var(--pd-texto-2);
}

/* ---------- Barra de período ---------- */

.pd .pd-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pd-esp-3) var(--pd-esp-4);
    padding: var(--pd-esp-3) var(--pd-esp-4);
    margin: 0 0 var(--pd-esp-3);
    background: var(--pd-cartao);
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio);
    box-shadow: var(--pd-sombra);
}

.pd .pd-atalhos {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--pd-esp-1);
    padding: 3px;
    background: var(--pd-fundo);
    border: 1px solid var(--pd-borda);
    border-radius: 999px;
}

.pd .pd-atalho {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pd-texto-2);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pd .pd-atalho:hover,
.pd .pd-atalho:focus {
    background: #E8F0FE;
    color: var(--pd-primaria);
    text-decoration: none;
}

.pd .pd-atalho--ativo,
.pd .pd-atalho--ativo:hover,
.pd .pd-atalho--ativo:focus {
    background: var(--pd-primaria);
    color: #FFFFFF;
}

.pd .pd-periodo-ativo {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-texto);
}

.pd .pd-periodo-ativo i {
    color: var(--pd-texto-3);
}

.pd .pd-filtros-ativos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pd-esp-2);
}

.pd .pd-botao-filtros {
    margin-left: auto;
    padding: 6px 14px;
    background: var(--pd-cartao);
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio-pequeno);
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-texto-2);
    cursor: pointer;
}

.pd .pd-botao-filtros:hover,
.pd .pd-botao-filtros[aria-expanded="true"] {
    border-color: var(--pd-primaria);
    color: var(--pd-primaria);
}

/* O formulário recolhido fica fora da raiz `.pd` (é um widget da tela): a classe vale sozinha. */
.pd-recolhido {
    margin: 0 0 12px;
}

/* ---------- Navegação ---------- */

.pd .pd-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    gap: var(--pd-esp-1);
    margin: 0 0 var(--pd-esp-4);
    padding: var(--pd-esp-2) var(--pd-esp-3);
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio);
    box-shadow: var(--pd-sombra);
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Grudada no topo (classe posta pelo script da Navegacao): fundo branco e sombra mais firme, para não se
   misturar ao conteúdo que passa por baixo. */
.pd .pd-nav.pd-nav--grudada {
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.10);
}

.pd .pd-nav a {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-texto-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pd .pd-nav a:hover,
.pd .pd-nav a:focus {
    background: #E8F0FE;
    color: var(--pd-primaria);
    text-decoration: none;
}

/* Seção ativa (Navegacao): fundo na cor primária e texto branco; o hover e o foco não apagam o destaque. */
.pd .pd-nav a.pd-nav-ativo,
.pd .pd-nav a.pd-nav-ativo:hover,
.pd .pd-nav a.pd-nav-ativo:focus {
    background: var(--pd-primaria);
    color: #FFFFFF;
}

/* ---------- Seção ---------- */

.pd .pd-secao {
    margin: 0 0 var(--pd-esp-5);
    scroll-margin-top: 64px;
}

.pd .pd-secao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pd-esp-2) var(--pd-esp-4);
    margin: 0 0 var(--pd-esp-3);
    padding: 0 0 var(--pd-esp-2);
    border-bottom: 1px solid var(--pd-borda);
}

.pd .pd-secao-titulo {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--pd-texto);
}

.pd .pd-secao-pergunta {
    font-size: 13px;
    color: var(--pd-texto-2);
}

.pd .pd-botao-recolher {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio-pequeno);
    font-size: 12px;
    font-weight: 600;
    color: var(--pd-texto-2);
    cursor: pointer;
}

.pd .pd-botao-recolher:hover {
    border-color: var(--pd-primaria);
    color: var(--pd-primaria);
}

/* ---------- Grades ---------- */

.pd .pd-linha {
    display: grid;
    gap: var(--pd-esp-4);
    margin: 0 0 var(--pd-esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.pd .pd-linha--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.pd .pd-linha--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.pd .pd-linha--8-4 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* col-md-5 e col-md-7: o funil e a tabela Saúde do funil (empilham abaixo de 992 px) */
.pd .pd-linha--5-7 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.pd .pd-indicadores {
    display: grid;
    gap: var(--pd-esp-4);
    margin: 0 0 var(--pd-esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

@media (max-width: 991px) {
    .pd .pd-linha--8-4,
    .pd .pd-linha--5-7 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Bloco ---------- */

.pd .pd-bloco {
    min-width: 0;
    padding: var(--pd-esp-4);
    background: var(--pd-cartao);
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio);
    box-shadow: var(--pd-sombra);
    overflow: hidden;
}

.pd .pd-bloco--solto {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.pd .pd-bloco-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pd-esp-1) var(--pd-esp-3);
}

.pd .pd-bloco-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-texto);
}

.pd .pd-bloco-pergunta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--pd-texto-3);
}

.pd .pd-bloco-corpo {
    margin-top: var(--pd-esp-3);
}

.pd .pd-bloco--solto .pd-bloco-corpo {
    margin-top: var(--pd-esp-2);
}

/* ---------- Indicador ---------- */

.pd .pd-indicador {
    --pd-cor: var(--pd-primaria);
    min-width: 0;
    padding: var(--pd-esp-4);
    background: var(--pd-cartao);
    border: 1px solid var(--pd-borda);
    border-top: 4px solid var(--pd-cor);
    border-radius: var(--pd-raio);
    box-shadow: var(--pd-sombra);
}

.pd .pd-indicador-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-texto-2);
}

.pd .pd-indicador-pergunta {
    font-size: 12px;
    color: var(--pd-texto-3);
}

.pd .pd-indicador-valor {
    margin: var(--pd-esp-1) 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--pd-texto);
    overflow-wrap: anywhere;
}

.pd .pd-indicador-apoio {
    margin-top: 2px;
    font-size: 12px;
    color: var(--pd-texto-3);
}

.pd .pd-indicador .pd-selo {
    margin-top: var(--pd-esp-2);
}

/* Minigráfico de tendência dentro do indicador: a div do gráfico tem a altura (40 px) e a legenda é pequena */
.pd .pd-indicador-mini {
    margin-top: var(--pd-esp-2);
}

.pd .pd-indicador-mini-legenda {
    font-size: 10px;
    line-height: 1.2;
    color: var(--pd-texto-3);
}

/* Indicador dentro de um bloco (o ciclo de venda): sem sombra, para não pesar */
.pd .pd-bloco .pd-indicador {
    box-shadow: none;
}

/* ---------- Tendência e comparação ---------- */

.pd .pd-tendencia {
    font-size: 12px;
    font-weight: 700;
}

.pd .pd-tendencia--boa {
    color: #15803D;
}

.pd .pd-tendencia--ruim {
    color: #B91C1C;
}

.pd .pd-tendencia--neutra {
    color: var(--pd-texto-2);
}

.pd .pd-tendencia--sem {
    font-weight: 400;
    color: var(--pd-texto-3);
}

/* ---------- Selo ---------- */

.pd .pd-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #F1F5F9;
    color: var(--pd-texto-2);
}

.pd .pd-selo--primario {
    background: #E8F0FE;
    color: #1E4FC2;
}

.pd .pd-selo--sucesso {
    background: #E7F7EC;
    color: #15803D;
}

.pd .pd-selo--atencao {
    background: #FEF3C7;
    color: #92400E;
}

.pd .pd-selo--perigo {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ---------- Aviso ---------- */

.pd .pd-aviso {
    margin: 0 0 var(--pd-esp-4);
    padding: var(--pd-esp-3) var(--pd-esp-4);
    border: 1px solid var(--pd-borda);
    border-left-width: 4px;
    border-radius: var(--pd-raio-pequeno);
    font-size: 14px;
    background: var(--pd-cartao);
    color: var(--pd-texto);
}

.pd .pd-aviso--sucesso {
    border-color: #BBE5C7;
    border-left-color: var(--pd-sucesso);
    background: #F3FBF6;
}

.pd .pd-aviso--atencao {
    border-color: #F8DDA0;
    border-left-color: var(--pd-atencao);
    background: #FFFBEB;
}

.pd .pd-aviso--perigo {
    border-color: #F5C2C2;
    border-left-color: var(--pd-perigo);
    background: #FEF5F5;
}

/* ---------- Ficha (rótulo em cima, valor embaixo, sem caixas; #718) ---------- */

.pd .pd-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--pd-esp-3) var(--pd-esp-5);
    margin: 0 0 var(--pd-esp-4);
    padding: var(--pd-esp-3) var(--pd-esp-4);
    background: var(--pd-fundo);
    border: 1px solid var(--pd-borda);
    border-radius: var(--pd-raio);
}

.pd .pd-ficha-item {
    min-width: 0;
}

.pd .pd-ficha-rotulo {
    font-size: 11px;
    color: var(--pd-texto-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pd .pd-ficha-valor {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-texto);
    overflow-wrap: anywhere;
}

/* ---------- Destaque (frase com nível) ---------- */

.pd .pd-destaques {
    display: grid;
    gap: var(--pd-esp-2);
}

.pd .pd-destaque {
    --pd-nivel: var(--pd-neutro);
    display: flex;
    align-items: flex-start;
    gap: var(--pd-esp-3);
    padding: var(--pd-esp-3) var(--pd-esp-4);
    background: var(--pd-cartao);
    border: 1px solid var(--pd-borda);
    border-left: 4px solid var(--pd-nivel);
    border-radius: var(--pd-raio-pequeno);
    font-size: 14px;
    color: var(--pd-texto);
}

.pd .pd-destaque--alerta {
    --pd-nivel: var(--pd-perigo);
    background: #FEF5F5;
    border-color: #F5C2C2;
    border-left-color: var(--pd-perigo);
}

.pd .pd-destaque--atencao {
    --pd-nivel: var(--pd-atencao);
    background: #FFFBEB;
    border-color: #F8DDA0;
    border-left-color: var(--pd-atencao);
}

.pd .pd-destaque--positivo {
    --pd-nivel: var(--pd-sucesso);
    background: #F3FBF6;
    border-color: #BBE5C7;
    border-left-color: var(--pd-sucesso);
}

.pd .pd-destaque--info {
    --pd-nivel: var(--pd-neutro);
    background: var(--pd-fundo);
}

.pd .pd-destaque-icone {
    flex: 0 0 auto;
    width: 20px;
    margin-top: 1px;
    text-align: center;
    color: var(--pd-nivel);
}

.pd .pd-destaque-icone i {
    margin: 0;
}

.pd .pd-destaque-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pd .pd-destaque-ver {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #1E4FC2;
    text-decoration: none;
    cursor: pointer;
}

.pd .pd-destaque-ver:hover,
.pd .pd-destaque-ver:focus {
    text-decoration: underline;
}

/* Texto só para leitor de tela (o nível escrito do destaque) */
.pd .pd-so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Barra horizontal ---------- */

.pd .pd-barra {
    margin: 0 0 var(--pd-esp-3);
}

.pd .pd-barra-linha {
    display: flex;
    justify-content: space-between;
    gap: var(--pd-esp-2);
    font-size: 12px;
    margin-bottom: 4px;
}

.pd .pd-barra-rotulo {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--pd-texto);
}

.pd .pd-barra-valor {
    flex: 0 1 auto;
    text-align: right;
    color: var(--pd-texto-2);
}

.pd .pd-barra-valor small {
    margin-left: 6px;
    font-size: 11px;
    color: var(--pd-texto-3);
}

.pd .pd-barra-trilho {
    height: 8px;
    background: #EEF2F7;
    border-radius: 999px;
    overflow: hidden;
}

.pd .pd-barra-preenchimento {
    height: 100%;
    border-radius: 999px;
}

.pd .pd-barra--acao .pd-barra-linha {
    flex-wrap: wrap;
    column-gap: var(--pd-esp-2);
}

.pd .pd-barra--acao .pd-barra-valor small {
    white-space: nowrap;
}

/* ---------- Tabela ---------- */

.pd .pd-tabela-rolagem {
    overflow-x: auto;
}

.pd .pd-tabela {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.pd .pd-tabela th {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pd-texto-3);
    border-bottom: 1px solid var(--pd-borda);
}

.pd .pd-tabela td {
    padding: 8px;
    border-bottom: 1px solid #F1F5F9;
    color: var(--pd-texto);
}

.pd .pd-tabela tbody tr:hover td {
    background: var(--pd-fundo);
}

.pd .pd-tabela .pd-direita {
    text-align: right;
    white-space: nowrap;
}

.pd .pd-tabela a {
    font-weight: 600;
    color: var(--pd-primaria);
}

/* Selo sob o número de uma célula (maior perda, mais lenta) */
.pd .pd-tabela .pd-celula-selo {
    margin-top: 2px;
}

/* Nome com o quadradinho da cor do cadastro antes dele */
.pd .pd-nome-cor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pd .pd-cor-marca {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* ---------- Estado vazio ---------- */

.pd .pd-vazio {
    padding: var(--pd-esp-5) var(--pd-esp-3);
    text-align: center;
}

.pd .pd-vazio-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--pd-esp-2);
    border-radius: 50%;
    font-size: 18px;
    background: #F1F5F9;
    color: var(--pd-texto-3);
}

.pd .pd-vazio-icone i {
    margin: 0;
}

.pd .pd-vazio--sucesso .pd-vazio-icone {
    background: #E7F7EC;
    color: var(--pd-sucesso);
}

.pd .pd-vazio-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-texto);
}

.pd .pd-vazio-texto {
    margin-top: 2px;
    font-size: 13px;
    color: var(--pd-texto-3);
}

/* ---------- Pequenos ---------- */

/* A legenda do mapa de calor, em selos (#613): quebra de linha no celular, sem rolagem horizontal */
.pd .pd-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pd-esp-1);
    margin-top: var(--pd-esp-2);
}

.pd .pd-nota {
    margin-top: var(--pd-esp-2);
    font-size: 11px;
    color: var(--pd-texto-3);
}

.pd .pd-subtitulo {
    margin: var(--pd-esp-3) 0 var(--pd-esp-1);
    font-size: 12px;
    font-weight: 700;
    color: var(--pd-texto-2);
}

.pd .pd-resumo {
    margin-top: var(--pd-esp-2);
    font-size: 13px;
    color: var(--pd-texto-2);
}

.pd .pd-resumo .pd-tendencia {
    display: inline;
    font-size: 13px;
}

/* ---------- Celular ---------- */

@media (max-width: 575px) {
    .pd .pd-saudacao {
        font-size: 22px;
    }

    .pd .pd-ficha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pd-esp-2) var(--pd-esp-3);
    }

    .pd .pd-periodo {
        padding: var(--pd-esp-3);
    }

    .pd .pd-botao-filtros {
        margin-left: 0;
    }

    /* Dois indicadores por linha: a primeira dobra mostra os quatro números */
    .pd .pd-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pd-esp-2);
    }

    .pd .pd-indicador {
        padding: var(--pd-esp-3);
    }

    .pd .pd-indicador-valor {
        font-size: 22px;
    }

    .pd .pd-bloco {
        padding: var(--pd-esp-3);
    }
}

/* ---------- Painel compacto (CRM, DEC-137) ---------- */

/* A raiz ganha `pd--compacto` (PainelDashboard::Raiz): indicadores e blocos com menos espaço e o valor menor, com o
   mesmo conteúdo (minigráfico, selo, comparação). Quem não pede a variante não muda. */

.pd.pd--compacto .pd-indicadores {
    gap: var(--pd-esp-3);
    margin-bottom: var(--pd-esp-3);
}

.pd.pd--compacto .pd-indicador {
    padding: var(--pd-esp-2) var(--pd-esp-3);
    border-top-width: 3px;
}

.pd.pd--compacto .pd-indicador-valor {
    margin: 2px 0;
    font-size: 24px;
}

.pd.pd--compacto .pd-indicador .pd-selo,
.pd.pd--compacto .pd-indicador-mini {
    margin-top: var(--pd-esp-1);
}

.pd.pd--compacto .pd-linha {
    gap: var(--pd-esp-3);
    margin-bottom: var(--pd-esp-3);
}

.pd.pd--compacto .pd-bloco {
    padding: var(--pd-esp-3);
}

.pd.pd--compacto .pd-bloco--solto {
    padding: 0;
}

.pd.pd--compacto .pd-bloco-corpo {
    margin-top: var(--pd-esp-2);
}

@media (max-width: 575px) {
    .pd.pd--compacto .pd-indicadores {
        gap: var(--pd-esp-2);
    }

    .pd.pd--compacto .pd-indicador {
        padding: var(--pd-esp-2);
    }

    .pd.pd--compacto .pd-indicador-valor {
        font-size: 20px;
    }
}

/* ---------- Cards baixos com minigráfico (DEC-147) ---------- */

/* PainelDashboard::CLASSE_BAIXOS (IndicadoresBaixos): todo card de indicador com minigráfico segue o tamanho do card do
   Dashboard de Tarefas (#544), ~98 px no desktop: o rótulo numa linha, o número e o minigráfico lado a lado e uma linha de
   rodapé (o apoio, ou a comparação e o apoio juntos, `pd-indicador-rodape`). A legenda do minigráfico e o selo de período
   saem do card: a tela os diz numa nota só sob os cards (PainelDashboard::Nota). O aviso que ocupa o lugar do minigráfico
   (a legenda sozinha, sem o gráfico: "a tendência aparece a partir de fevereiro") continua visível. Vem depois da
   variante compacta, para valer sobre ela. Quem não pede a classe não muda. */

.pd .pd-cards-baixos .pd-indicador {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "rotulo rotulo" "valor mini" "apoio apoio";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 8px 14px;
}

.pd .pd-cards-baixos .pd-indicador-rotulo {
    grid-area: rotulo;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd .pd-cards-baixos .pd-indicador-valor {
    grid-area: valor;
    margin: 0;
    font-size: 26px;
    line-height: 1;
}

.pd .pd-cards-baixos .pd-indicador-mini {
    grid-area: mini;
    min-width: 0;
    margin: 0;
}

.pd .pd-cards-baixos .pd-indicador-mini-legenda:not(:only-child) {
    display: none;
}

.pd .pd-cards-baixos .pd-indicador-apoio,
.pd .pd-cards-baixos .pd-indicador-rodape {
    grid-area: apoio;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd .pd-cards-baixos .pd-indicador-rodape {
    color: var(--pd-texto-3);
}

.pd .pd-cards-baixos .pd-indicador-rodape .pd-tendencia {
    display: inline;
    font-size: inherit;
}

.pd .pd-cards-baixos .pd-indicadores {
    margin-bottom: 4px;
}

@media (max-width: 575px) {
    .pd .pd-cards-baixos .pd-indicador-apoio {
        white-space: normal;
    }

    /* O rodapé (comparação e apoio) cabe em até duas linhas, cortado com "…" */
    .pd .pd-cards-baixos .pd-indicador-rodape {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }

    /* O painel compacto (CRM) segue com o valor menor no celular */
    .pd.pd--compacto .pd-cards-baixos .pd-indicador-valor {
        font-size: 20px;
    }
}

/* ---------- Números clicáveis (DEC-139) ---------- */

/* PainelDashboard::Link: o texto que abre a lista do número (pd-link-lista) e a barra inteira clicável
   (pd-link-barra); o indicador clicável (Indicador com `clique`) ganha o cursor e o contorno no foco. A cor nunca é a
   única pista: o link tem o texto ("ver a lista") ou o nome acessível que diz o que abre. */

.pd a.pd-link-lista {
    font-weight: 600;
    color: #1E4FC2;
    text-decoration: none;
    cursor: pointer;
}

.pd a.pd-link-lista:hover,
.pd a.pd-link-lista:focus {
    text-decoration: underline;
}

.pd a.pd-link-barra {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--pd-raio-pequeno);
}

.pd a.pd-link-barra:hover .pd-barra-rotulo,
.pd a.pd-link-barra:focus .pd-barra-rotulo {
    text-decoration: underline;
}

.pd a.pd-link-lista:focus-visible,
.pd a.pd-link-barra:focus-visible,
.pd .pd-indicador--clicavel:focus-visible {
    outline: 2px solid var(--pd-primaria);
    outline-offset: 2px;
}

.pd .pd-indicador--clicavel {
    cursor: pointer;
}

.pd .pd-indicador--clicavel:hover {
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25), var(--pd-sombra);
}

/* A lista de links sob o gráfico clicável: o texto equivalente de cada ponto, recolhida num details */
.pd .pd-lista-pontos summary {
    cursor: pointer;
    color: #1E4FC2;
    font-weight: 600;
}

.pd .pd-lista-pontos ul {
    margin: var(--pd-esp-1) 0 0;
    padding-left: var(--pd-esp-4);
}