/* ============================================================================
   "Como ler este número" — rodapé explicativo dos cards de indicador.
   Partial: Views/Shared/Partial/_comoLerIndicador.cshtml

   Arquivo escrito à mão, FORA do pipeline SCSS de Src/dashboard e Src/front.
   Não é gerado por build: editar aqui é seguro e não é revertido por recompilação.

   O painel é discreto fechado e só ganha cor quando há alerta ativo — a atenção
   vai para o número que precisa de contexto, não para todos os cards ao mesmo tempo.
   ============================================================================ */

.comoler {
    border-top: 1px solid rgba(23, 50, 77, .08);
    margin-top: .875rem;
}

/* ── Gatilho ──────────────────────────────────────────────────────────────── */

.comoler-gatilho {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .125rem .125rem;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .78rem;
    line-height: 1.4;
    color: #5b7085;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease;
}

.comoler-gatilho:hover,
.comoler-gatilho:focus-visible {
    color: #17324d;
}

.comoler-gatilho:focus-visible {
    outline: 2px solid #4a7fb5;
    outline-offset: 2px;
    border-radius: 4px;
}

.comoler-gatilho-txt {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.comoler-gatilho-txt .ph {
    font-size: .95rem;
    flex-shrink: 0;
}

.comoler-caret {
    font-size: .85rem;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.comoler-gatilho[aria-expanded="true"] .comoler-caret {
    transform: rotate(180deg);
}

/* Cor só quando há alerta: sinaliza antes de abrir que este número pede leitura. */
.comoler-gatilho--atencao { color: #8a6116; }
.comoler-gatilho--atencao:hover,
.comoler-gatilho--atencao:focus-visible { color: #6b4a10; }

.comoler-gatilho--critico { color: #a3342c; }
.comoler-gatilho--critico:hover,
.comoler-gatilho--critico:focus-visible { color: #822821; }

/* ── Corpo ────────────────────────────────────────────────────────────────── */

.comoler-corpo {
    padding: .625rem .125rem .25rem;
    font-size: .8rem;
    line-height: 1.6;
    color: #5b7085;
}

.comoler-oque {
    margin: 0 0 .625rem;
    color: #17324d;
}

.comoler-bloco { margin-bottom: .625rem; }
.comoler-bloco:last-child { margin-bottom: 0; }

.comoler-rotulo {
    display: block;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a99a8;
    margin-bottom: .1875rem;
}

.comoler-txt { margin: 0; }

.comoler-calculo {
    display: block;
    padding: .4375rem .5625rem;
    background: rgba(23, 50, 77, .04);
    border: 1px solid rgba(23, 50, 77, .07);
    border-radius: 6px;
    font-size: .76rem;
    line-height: 1.5;
    color: #17324d;
    white-space: normal;
    word-break: break-word;
}

/* ── Alertas ──────────────────────────────────────────────────────────────── */

.comoler-alerta {
    display: flex;
    align-items: flex-start;
    gap: .4375rem;
    padding: .5rem .5625rem;
    border-radius: 6px;
    margin-bottom: .625rem;
    font-size: .78rem;
    line-height: 1.55;
}

.comoler-alerta .ph {
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .125rem;
}

.comoler-alerta--atencao {
    background: rgba(214, 158, 46, .1);
    color: #7a5610;
}

.comoler-alerta--critico {
    background: rgba(197, 48, 48, .09);
    color: #9b2f28;
}

.comoler-alerta--neutro {
    background: rgba(23, 50, 77, .05);
    color: #4a5c6e;
}

/* ── Ação sugerida ────────────────────────────────────────────────────────── */

.comoler-acao {
    display: flex;
    align-items: flex-start;
    gap: .4375rem;
    padding-top: .5rem;
    border-top: 1px dashed rgba(23, 50, 77, .1);
    color: #2c5f8a;
}

.comoler-acao .ph {
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .125rem;
}

/* ── Impressão e relatório congelado ──────────────────────────────────────── */

/* Na foto salva o painel é inertizado junto com os demais controles; manter o
   conteúdo visível ajuda quem abre a foto meses depois e não lembra do cálculo. */
.relatorio-congelado .comoler-gatilho { pointer-events: none; }

@media print {
    .comoler-gatilho { display: none; }
    .comoler .collapse { display: block !important; height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    .comoler-caret { transition: none; }
}

/* ============================================================================
   Card de indicador — responsividade do VALOR.

   Problema que isto resolve: o valor usava .h2 (tamanho fixo). Em card estreito
   — 4 cards lado a lado abaixo de ~1200px, ou a coluna col-lg-3 do dashboard de
   Tarefa — textos como "R$ 301,2K" e "125,9 dias" quebravam em duas linhas e os
   cards da mesma fileira ficavam com alturas diferentes.

   A correção é o valor escalar com a largura disponível (clamp + cqi) em vez de
   quebrar. `container-type: inline-size` faz a medida ser a do PRÓPRIO card, não
   a da janela: o mesmo card encolhe certo tanto num grid de 4 quanto num de 2.
   ============================================================================ */

.card-metrica {
    container-type: inline-size;
    container-name: cardmetrica;
}

.card-metrica > .card-body {
    padding: clamp(1rem, 4cqi, 1.5rem);
}

.card-stats.card-metrica .card-metrica-titulo {
    font-size: clamp(.62rem, 2.5cqi, .74rem);
    letter-spacing: .1em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Especificidade deliberada (.card-stats.card-metrica): dashboard.css tem
   `.card-stats span.fw-bold { font-size: 1.35rem }`, que casa com este mesmo span e
   vence uma regra de classe única. Sem os dois seletores no ancestral, o clamp nunca
   se aplica e o valor fica travado em 21,6px. */
.card-stats.card-metrica .card-metrica-valor {
    display: block;
    color: #17324d;
    /* Piso 1.05rem para caber "R$ 301,2K" em card estreito sem cortar;
       teto 1.75rem, próximo do tamanho original em card largo. */
    font-size: clamp(1.05rem, 8.5cqi, 1.75rem);
    line-height: 1.2;
    white-space: nowrap;   /* encolhe em vez de quebrar em duas linhas */
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.015em;
}

/* Ícone acompanha: num card estreito ele roubava a largura do valor. */
.card-metrica .icon-shape {
    width: clamp(2.25rem, 11cqi, 3rem);
    height: clamp(2.25rem, 11cqi, 3rem);
    flex-shrink: 0;
}

.card-metrica .icon-shape > .ph {
    font-size: clamp(1rem, 5.5cqi, 1.25rem);
}

.card-metrica .min-w-0 { min-width: 0; }

/* A legenda abaixo do valor pode ter number + texto; evita estourar a caixa. */
.card-metrica .text-sm {
    overflow-wrap: anywhere;
}

/* Sem suporte a container queries (navegador antigo): cai para breakpoints de
   viewport, que cobrem o caso comum de 4 cards numa fileira. */
@supports not (container-type: inline-size) {
    .card-stats.card-metrica .card-metrica-valor { font-size: 1.5rem; }

    @media (max-width: 1399.98px) {
        .card-stats.card-metrica .card-metrica-valor { font-size: 1.3rem; }
    }
    @media (max-width: 1199.98px) {
        .card-stats.card-metrica .card-metrica-valor { font-size: 1.15rem; }
        .card-metrica > .card-body { padding: 1.1rem; }
    }
}

/* Card muito estreito (4 numa fileira em tablet pequeno, ou sidebar aberta em
   notebook): abaixo deste ponto o ícone decorativo é o que deve ceder espaço,
   não o número. Ele sai do fluxo e o valor recupera a largura inteira do card. */
@container cardmetrica (max-width: 195px) {
    .card-stats.card-metrica .icon-shape {
        display: none;
    }

    .card-stats.card-metrica .card-metrica-valor {
        /* 8.5cqi mantém a curva decrescente: com o ícone oculto o card já tem mais
           espaço útil, então subir o coeficiente faria a fonte CRESCER ao estreitar. */
        font-size: clamp(1rem, 8.5cqi, 1.2rem);
    }
}

/* Último recurso — card abaixo de 150px existe só em telas muito pequenas com
   grid de 2 colunas. Aqui o rótulo já é o suficiente para identificar o cartão. */
@container cardmetrica (max-width: 140px) {
    .card-stats.card-metrica .card-metrica-valor {
        font-size: clamp(.9rem, 12cqi, 1.15rem);
        letter-spacing: -.03em;
    }
}

/* ============================================================================
   Grid de KPI — padrão único do produto.

   Regra: 4 cards numa fileira só a partir de 1400px. Entre 576 e 1400 → 2 colunas.
   Abaixo de 576 → 1 por linha.

   Existia uma régua diferente por tela: Relatórios quebrava em 1200 (col-xl-3),
   Tarefa em 992 (col-lg-3), os 4 relatórios de Projeto usavam 5 COLUNAS FIXAS até
   1200px, e Atendimento 4 fixas até ~1200. Em todas, o card ficava estreito demais
   e o valor era espremido ou quebrava em duas linhas.

   Aqui ficam só as famílias com grid CSS próprio; as telas em coluna Bootstrap usam
   `col-12 col-sm-6 col-xxl-3` diretamente no markup.
   ============================================================================ */

/* Famílias de card com grid próprio */
.atendimento-relatorios .kpi-grid,
.pfl-kpis,
.gec-kpis,
.gcl-kpis,
.rnt-kpis,
.op-stats {
    display: grid;
    gap: 1rem;
    /* minmax(0,1fr) impede que conteúdo largo estoure a coluna */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1399.98px) {
    .atendimento-relatorios .kpi-grid,
    .pfl-kpis,
    .gec-kpis,
    .gcl-kpis,
    .rnt-kpis,
    .op-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .atendimento-relatorios .kpi-grid,
    .pfl-kpis,
    .gec-kpis,
    .gcl-kpis,
    .rnt-kpis,
    .op-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Portfólio, Entregas e Gantt têm 5 cards: em 1400+ os 5 cabem numa fileira. */
@media (min-width: 1400px) {
    .pfl-kpis,
    .gec-kpis,
    .gcl-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* O valor dessas famílias também precisa escalar — mesma razão do .card-metrica-valor:
   tamanho fixo quebra em duas linhas e desalinha os cards da fileira. */
.atendimento-relatorios .kpi-grid > *,
.pfl-kpis > *, .gec-kpis > *, .gcl-kpis > *, .rnt-kpis > *,
.op-stats > * {
    container-type: inline-size;
}

.atendimento-relatorios .kpi-value,
.pfl-kpi .kval, .gec-kpi .kval, .gcl-kpi .kval, .rnt-kpi .kval,
.op-stat .op-stat-valor {
    font-size: clamp(1.05rem, 8.5cqi, 1.6rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Sufixos ("h em média", "/ 30 min alvo") não devem competir com o número. */
.op-stat .op-stat-valor small,
.atendimento-relatorios .kpi-value small {
    font-size: .7em;
    white-space: nowrap;
}

/* Família .report-kpi-card (Relatórios, Diagnóstico, Captação, Marketing) e .surface-card
   (Meu Painel): mesmo tratamento — o valor escala com a largura do card em vez de quebrar.
   O seletor leva a classe da página junto para vencer o CSS de origem de cada tela. */
.report-kpi-card,
.surface-card {
    container-type: inline-size;
}

.relatorios-page .report-kpi-value,
.diagnostico-page .report-kpi-value,
.report-kpi-card .report-kpi-value,
.surface-card > div > div > h3,
.surface-card h3 {
    font-size: clamp(1.05rem, 8cqi, 1.65rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}