/* =========================================================================
   PG-TYPE-V1  —  Classes tipograficas canonicas do pagalee.gestor
   -------------------------------------------------------------------------
   Consome a escala de docs/PADRAO-TIPOGRAFIA.md (--cp-fs-* em pg-tokens.css).
   Carrega DEPOIS do pg-tokens.css e ANTES dos estilos de pagina.

   PARA QUE SERVE
   Antes desta fase, "titulo de pagina" estava reimplementado com CINCO nomes
   diferentes (.pg-ger-hero-title, .pg-dash-title, .pg-cx-hero-title,
   .pg-mia-hero-title, .pg-cred-hero-title) e mais tres regras por seletor de
   elemento (.pg-term-header h1 e cia.) — nove copias do mesmo gesto visual,
   livres para divergir. E divergiram: as tres por elemento estavam em 32px
   FIXO, as outras em clamp(22px,4vw,30px).

   COMO USAR EM TELA NOVA
       <div class="pg-page-head">
           <div>
               <h1 class="pg-page-title">Gerencia de Contas</h1>
               <p class="pg-page-subtitle">Acompanhe as contas do periodo</p>
           </div>
           <div><!-- contador / acoes a direita --></div>
       </div>

   TELA EXISTENTE nao precisa trocar de classe. A leva 1 converteu as regras
   locais para consumir os MESMOS tokens (var(--cp-fs-display) etc.), entao os
   valores ja nao podem mais divergir. Trocar o nome da classe para o canonico
   e limpeza opcional, feita quando a tela for mexida por outro motivo.

   NAO adicione aqui classe de UMA tela so. Este arquivo e o vocabulario
   compartilhado; o especifico continua no <style> da pagina.
   ========================================================================= */

/* ---- Cabecalho de pagina ---------------------------------------------- */

/* Linha do topo: titulo+subtitulo a esquerda, contador/acoes a direita.
   Nao define cor nem fundo de proposito — cada tela ja tem o seu hero. */
.pg-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Bloco de texto do cabecalho (titulo + subtitulo). O flex:1 e o min-width:0
   sao o que impede o titulo longo de empurrar as acoes para fora da linha. */
.pg-page-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Lado direito do cabecalho: botoes, contador, seletor de periodo. Opcional —
   cabecalho sem acao nenhuma simplesmente nao tem esta div. */
.pg-page-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Titulo da pagina. UM por tela — e o <h1>. Fluido: encolhe p/ 22px no
   celular. Se voce precisa de um segundo "titulo grande" na mesma tela,
   o que voce quer e .pg-section-title. */
.pg-page-title {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-display);
    font-weight: var(--cp-fw-black);
    line-height: var(--cp-lh-tight);
    letter-spacing: var(--cp-track-tight);
    color: var(--cp-ink);
    margin: 0;
}

/* Subtitulo: a frase de apoio embaixo do titulo. Sempre --cp-muted —
   se ficar na cor do titulo, os dois competem. */
.pg-page-subtitle {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-md);
    font-weight: var(--cp-fw-medium);
    line-height: var(--cp-lh-normal);
    color: var(--cp-muted);
    margin: 4px 0 0 0;
}

/* ---- Hierarquia interna ------------------------------------------------ */

/* Titulo de SECAO — divide a pagina em blocos (<h2>). */
.pg-section-title {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-xl);
    font-weight: var(--cp-fw-bold);
    line-height: var(--cp-lh-tight);
    color: var(--cp-ink);
    margin: 0;
}

/* Titulo de CARD/bloco dentro de uma secao (<h3>). */
.pg-card-title {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-lg);
    font-weight: var(--cp-fw-bold);
    line-height: var(--cp-lh-tight);
    color: var(--cp-ink);
    margin: 0;
}

/* ---- KPI --------------------------------------------------------------- */

/* Numero grande de indicador. tabular-nums e obrigatorio: sem ele os digitos
   tem larguras diferentes e uma coluna de valores fica desalinhada/tremendo
   a cada atualizacao. */
.pg-kpi-value {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-kpi);
    font-weight: var(--cp-fw-black);
    line-height: var(--cp-lh-tight);
    letter-spacing: var(--cp-track-tight);
    color: var(--cp-ink);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* Rotulo do KPI — o que o numero significa. */
.pg-kpi-label {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-sm);
    font-weight: var(--cp-fw-medium);
    line-height: var(--cp-lh-normal);
    color: var(--cp-muted);
    margin: 0;
}

/* ---- Apoio ------------------------------------------------------------- */

/* Overline / cabecalho de tabela: CAIXA ALTA e pequena. O tracking ABERTO
   nao e enfeite — texto em caixa alta sem espacamento extra vira bloco. */
.pg-overline {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-xs);
    font-weight: var(--cp-fw-semibold);
    line-height: var(--cp-lh-tight);
    letter-spacing: var(--cp-track-wide);
    text-transform: uppercase;
    color: var(--cp-muted);
}

/* Legenda / nota de rodape / timestamp. */
.pg-caption {
    font-family: var(--cp-font);
    font-size: var(--cp-fs-xs);
    font-weight: var(--cp-fw-regular);
    line-height: var(--cp-lh-normal);
    color: var(--cp-faint);
}

/* ---- Foco de navegacao ------------------------------------------------- */

/* [fix-focus-h1] O <FocusOnNavigate Selector="h1"> do Routes.razor (template
   padrao do Blazor) da .focus() no primeiro <h1> a cada troca de rota, para o
   leitor de tela anunciar a tela nova. O Blazor marca esse h1 com
   tabindex="-1" e o browser desenha o anel de foco em volta do titulo.
   Sintoma: contorno preto no "Bom dia, ..." da Inicio depois do login (o
   Enter no formulario faz o browser tratar o foco como vindo do teclado).
   O h1 nao e alvo de Tab nem controle interativo, entao esconder o anel dele
   nao tira indicacao de foco de ninguem que navegue por teclado. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}