:root {
  --cor-primaria: #1B3A5C;
  --cor-destaque: #0E8C7F;
  --cor-fundo: #F4F6F8;
  --cor-texto: #1F2937;
  --cor-texto-muted: #6B7280;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

.navbar-fomento { background-color: var(--cor-primaria); }
.navbar-fomento .navbar-brand,
.navbar-fomento .nav-link { color: #ffffff !important; }
.navbar-fomento .nav-link:hover { color: var(--cor-destaque) !important; }

.btn-primary { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }
.btn-primary:hover { background-color: var(--cor-destaque); border-color: var(--cor-destaque); }

.footer-fomento { background-color: var(--cor-primaria); color: #ffffff; font-size: 0.875rem; }
.footer-fomento a { color: #ffffff; text-decoration: underline; }

.hero-fomento {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #142C47 100%);
  color: #ffffff;
}
.hero-fomento .lead { color: #D9E2EC; }

.card-oportunidade {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #DDE3EA;
  border-radius: 8px;
  padding: 14px 18px;
}
.card-oportunidade.urgente { border-left: 4px solid #B45309; }

.card-corpo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.card-titulo {
  font-size: 16px; font-weight: 600; color: var(--cor-primaria);
  line-height: 1.35; text-decoration: none;
  overflow-wrap: anywhere;
}
.card-titulo:hover { text-decoration: underline; }

.card-selos { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.card-instituicao { font-size: 13px; color: var(--cor-texto); }
.selo { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.selo-nacional { background: var(--cor-primaria); color: #FFFFFF; }
.selo-uf { background: var(--cor-fundo); border: 1px solid #C7D0DA; color: var(--cor-texto); }
/* Mais escuro que --cor-destaque de propósito: com texto branco a 12px, o tom original não
   alcança 4,5:1. Não trocar por var(--cor-destaque) sem reconferir o contraste. */
.selo-linha { background: #0A6B61; color: #FFFFFF; }
.selo-programa { background: var(--cor-fundo); border: 1px solid #C7D0DA; color: var(--cor-texto-muted); font-weight: 400; }

.card-resumo { margin: 0; font-size: 14px; color: var(--cor-texto-muted); line-height: 1.45; }

.card-prazo { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; }
.card-prazo-rotulo { font-size: 12px; color: var(--cor-texto-muted); }
.card-prazo-data { font-size: 17px; font-weight: 700; color: var(--cor-texto); line-height: 1.2; }
.card-prazo-dias { font-size: 12px; color: var(--cor-texto-muted); margin-top: 2px; }
.card-prazo-urgencia {
  margin-top: 4px; align-self: flex-end;
  padding: 2px 8px; background: #FDEEE0; border-radius: 10px;
  font-size: 12px; font-weight: 700; color: #8A3C08;
}
.card-prazo-ausente { font-size: 12px; color: var(--cor-texto-muted); font-style: italic; }
.card-prazo-retificado {
  margin-top: 3px; font-size: 11px; font-weight: 600;
  color: #7A4A08;
}

@media (max-width: 575px) {
  .card-oportunidade { flex-direction: column; gap: 10px; }
  .card-prazo { text-align: left; align-items: flex-start; }
  .card-prazo-urgencia { align-self: flex-start; }
}

.badge-nao-verificado { background-color: #FFF3CD; color: #7A5C00; font-weight: 500; font-size: 0.7rem; }
.badge-vencido { background-color: #F8D7DA; color: #842029; font-weight: 600; font-size: 0.7rem; }
/* Navegação geográfica: escala de azul do Norte (mais claro) ao Sul (cor primária, mais
   escuro) — aproximação própria sem acesso ao artboard "Opção B" citado no briefing;
   conferir contraste/tons contra o artboard antes de considerar definitivo. */
.regiao-norte { background-color: #D9E2EC; color: var(--cor-primaria); }
.regiao-nordeste { background-color: #AEC6E0; color: var(--cor-primaria); }
.regiao-centro-oeste { background-color: #6D93BD; color: #ffffff; }
.regiao-sudeste { background-color: #3D6690; color: #ffffff; }
.regiao-sul { background-color: var(--cor-primaria); color: #ffffff; }

.uf-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.5rem; border-radius: 0.375rem; font-size: 0.8rem;
  text-decoration: none; font-weight: 500; border: 1px solid transparent;
}
.uf-chip:hover { opacity: 0.85; }
.uf-chip.ativo { outline: 2px solid var(--cor-destaque); outline-offset: 1px; }
.uf-chip.sem-fonte { opacity: 0.55; border-style: dashed; border-color: currentColor; }

/* Zona 1 — mapa: só as 5 regiões (sem UF dentro do bloco), posicionadas em grade para
   sugerir a disposição geográfica real (Norte em cima, Sul embaixo) em vez de uma fileira
   única. Aproximação própria, sem acesso ao artboard "Opção B" citado no briefing anterior —
   mesma ressalva de antes: conferir contra o artboard e ajustar se não bater. */
.mapa-regioes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Cada nome de área precisa formar um retângulo — senão a declaração inteira é
     inválida e o navegador a ignora por completo (sem erro visível). Testado via
     Playwright: uma 1ª versão com "sudeste" em L (não retangular) fazia os 5 blocos
     colapsarem na mesma célula, porque TODO o grid-template-areas era descartado. */
  grid-template-areas:
    "norte    norte    norte    nordeste"
    "centro   centro   sudeste  nordeste"
    ".        sul      sudeste  .";
  gap: 6px;
}
.mapa-regioes .regiao-norte-bloco { grid-area: norte; }
.mapa-regioes .regiao-nordeste-bloco { grid-area: nordeste; }
.mapa-regioes .regiao-centro-oeste-bloco { grid-area: centro; }
.mapa-regioes .regiao-sudeste-bloco { grid-area: sudeste; }
.mapa-regioes .regiao-sul-bloco { grid-area: sul; }
.mapa-regioes .uf-chip { justify-content: center; min-height: 40px; }

@media (max-width: 767px) {
  .mapa-regioes {
    grid-template-columns: 1fr;
    grid-template-areas: "norte" "nordeste" "centro" "sudeste" "sul";
  }
}

/* Zona 2 — grade de UF: as 27 siglas em ordem alfabética, separada do mapa. */
.grade-uf { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.chip-uf {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; border: 1px solid #C7D0DA; border-radius: 6px;
  background: #FFFFFF; color: var(--cor-texto);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.chip-uf.ativo { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #FFFFFF; }
.chip-uf.sem-fonte { opacity: 0.55; border-style: dashed; }
.chip-contagem { font-size: 11px; font-weight: 400; opacity: 0.75; }

@media (max-width: 767px) { .grade-uf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }