/* ==========================================================================
   BASE DE CONSTRUTORAS — camada de aplicação

   Só o que esta página tem e o wl-ds.css não traz: a faixa de indicadores,
   os botões de filtro (estado e canal), a linha de recorte e as barras de
   cobertura. Tudo o mais — cabeçalho, painel, campo, botão, selo, nota,
   rodapé — vem do sistema, sem redefinição.

   O ritmo é o do painel de compras: cabeçalho navy, faixa marrom com os
   números, trabalho sobre creme.
   ========================================================================== */

/* --- MARCA DO CABEÇALHO ---------------------------------------------------
   A marca é o caminho de volta para a intranet, como no cabeçalho dela. O
   sufixo "Construtoras" fica FORA do link: ele nomeia o lugar em que se está,
   não um destino.

   O hover troca a cor da marca por areia em vez de sublinhar: o SVG é
   currentColor, e sublinhado sob um logotipo não é do sistema.
   -------------------------------------------------------------------------- */

/* min-height de 44px: a marca tem 31px de altura, e o alvo de toque do
   sistema é 44. O link cresce em área clicável sem mexer no desenho. */
.header__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.header__marca:hover { color: var(--c-sand); }

/* --- ABERTURA -------------------------------------------------------------
   As duas ações de baixar a base inteira não dependem de filtro nenhum, e
   por isso ficam aqui em cima, antes de qualquer recorte.
   -------------------------------------------------------------------------- */

.abertura__acoes { margin-top: var(--sp-3); }

/* Segunda linha do botão (formato, tamanho): a serifada em caixa alta do
   .btn não se lê em 11px, então o detalhe sai da caixa alta e perde o
   espacejamento. */
.btn small {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.86;
}
.btn--empilhado { flex-direction: column; gap: 0; padding-block: 8px; }

/* --- FAIXA DE INDICADORES -------------------------------------------------
   Os quatro números respondem ao estado selecionado — é a informação mais
   consultada da página, e por isso ganha a faixa inteira.
   -------------------------------------------------------------------------- */

.indicadores {
  background: var(--surface-stats);
  color: var(--c-cream);
  padding-block: clamp(28px, 3vw, 52px);
}
.indicadores__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.indicador { display: grid; gap: 4px; }
.indicador__valor {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(30px, 2.6vw, 52px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.indicador__rotulo { font-size: var(--fs-ui-sm); color: var(--c-sand-aa); }

/* Recorte ativo: filete de areia sob o número, no lugar de uma borda
   colorida. A cor de estado nunca vira área grande — ver wl-ds.css. */
.indicador--filtrado .indicador__valor {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-sand);
}

/* --- FILTROS --------------------------------------------------------------
   O alternador do sistema (.segmento) é input+label; aqui os botões são
   <button> com aria-pressed, porque o JS os recria a cada render e o par
   input/label duplicaria ids. O visual é o mesmo: contorno, raio de 4px,
   ativo em navy sólido.
   -------------------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.filtro {
  padding: 10px 14px;
  min-height: 44px;
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtro:hover { border-color: var(--c-bronze-aa); }
.filtro[aria-pressed="true"] {
  background: var(--c-navy);
  color: var(--c-cream);
  border-color: var(--c-navy);
}
.filtro[aria-pressed="true"] .filtro__nome,
.filtro[aria-pressed="true"] .filtro__conta { color: var(--c-sand); }

/* Estado: o número é o dado, o nome é a legenda. */
.filtro--uf { min-width: 124px; flex: 1 1 124px; }
.filtro__n {
  display: block;
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-light);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.filtro__nome {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-ui-xs);
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
}
/* "Todos os estados" é rótulo, não sigla: cede um degrau para caber. */
.filtro--todos .filtro__n { font-size: var(--fs-ui); }

/* Canal: oito botões numa linha só. Rola dentro do próprio bloco quando não
   couberem — a página nunca rola de lado. */
.filtros--canal { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.filtro--canal {
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}
.filtro__conta {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
  font-variant-numeric: tabular-nums;
}

/* --- RECORTE ATUAL --------------------------------------------------------
   A conta do filtro e o que fazer com ela, na mesma linha: é o ponto em que
   a página deixa de informar e passa a entregar arquivo.
   -------------------------------------------------------------------------- */

.recorte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--superficie-card);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--c-bronze);
  border-radius: var(--radius);
}
.recorte__conta {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 1.8vw, 34px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.recorte__desc {
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
}
.recorte__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Colunas do arquivo: nome de coluna aqui chega a "Contato mínimo (5 canais)",
   que não cabe nos 150px do .opcoes--colunas do sistema. */
.opcoes--campos { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.campos__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

/* --- COBERTURA POR CANAL --------------------------------------------------
   Retângulo puro, sem gradiente e sem canto arredondado, como as faixas do
   site. O rótulo à esquerda, a porcentagem à direita, alinhada.
   -------------------------------------------------------------------------- */

.barra-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 8px 0;
  font-size: var(--fs-ui-sm);
}
.barra-linha__rotulo { min-width: 132px; }
.barra-linha__trilho {
  flex: 1;
  height: 14px;
  background: color-mix(in srgb, var(--c-navy) 10%, transparent);
}
/* display:block explícito: o preenchido é um <span> dentro do trilho, e um
   inline ignora a altura — a barra sairia sem cor nenhuma. */
.barra-linha__preenchido {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-bronze);
  transition: width var(--transition);
}
.barra-linha__valor {
  width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- PROCEDÊNCIA ----------------------------------------------------------
   A regra do projeto é a única advertência da página. Ela entra como etiqueta
   de atenção + texto, e não como bloco amarelo: cor de estado em área grande
   disputa com a marca.
   -------------------------------------------------------------------------- */

.regra {
  margin-top: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--st-atencao-fundo);
}
.regra__texto { margin-top: 6px; font-size: var(--fs-ui-sm); }

.painel__corpo {
  max-width: 78ch;
  margin-top: var(--sp-1);
  font-size: var(--fs-ui-sm);
  line-height: var(--lh-body);
}

/* --- ERRO DE CARREGAMENTO -------------------------------------------------
   Mesmo painel do resto da página, com o filete no vermelho de estado. A
   página só chega aqui quando foi aberta por duplo-clique.
   -------------------------------------------------------------------------- */

.painel--risco { border-top-color: var(--st-risco); }
.painel--risco[hidden] { display: none; }

/* --- CARREGANDO ------------------------------------------------------------ */

.carregando {
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

@media (max-width: 620px) {
  .recorte__acoes { width: 100%; }
  .barra-linha__rotulo { min-width: 96px; }
}