/* =============================================================================
   Portal de Parcerias — Tupanciretã/RS
   Design system "Tupanciretã Parcerias" (DESIGN.MD, protótipo Google Stitch)
   aplicado sobre o Bootstrap 5.3.

   Organização:
   1. Fonte Inter          5. Formulários        9. Layout do servidor (menu lateral)
   2. Tokens (variáveis)   6. Selos de situação 10. Layout da entidade (abas no topo)
   3. Base / Bootstrap     7. Cartões e KPIs    11. Layout público e login
   4. Botões               8. Tabelas           12. Utilitários
   ============================================================================= */

/* 1. Fonte Inter (arquivos locais em static/vendor/inter) ------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-ext-wght-normal.ad4eb06671be.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ------------------------------------------------------------------ */
:root {
  /* Núcleo */
  --pp-institucional: #17365d;      /* azul-marinho: menu lateral, títulos, avisos legais */
  --pp-institucional-escuro: #0f2744;
  --pp-acao: #0f766e;               /* verde-azulado: ações principais */
  --pp-acao-hover: #0b5d57;
  --pp-acao-ativo: #094641;
  --pp-acao-suave: #e6f4f2;
  --pp-fundo: #f5f7fa;              /* "canvas" */
  --pp-superficie: #ffffff;         /* cartões */
  --pp-borda: #dce3ed;
  --pp-linha-hover: #f9fafc;
  --pp-texto: #1f2937;
  --pp-texto-secundario: #5b6b7f;

  /* Situações (texto / fundo / borda) — WCAG AA */
  --pp-erro: #b42318;     --pp-erro-fundo: #fef3f2;    --pp-erro-borda: #fecdca;
  --pp-atencao: #b54708;  --pp-atencao-fundo: #fffaeb; --pp-atencao-borda: #fedf89;
  --pp-sucesso: #067647;  --pp-sucesso-fundo: #ecfdf3; --pp-sucesso-borda: #a6f4c5;
  --pp-info: #175cd3;     --pp-info-fundo: #eff8ff;    --pp-info-borda: #b2ddff;
  --pp-neutro: #475467;   --pp-neutro-fundo: #f2f4f7;  --pp-neutro-borda: #d0d5dd;

  /* Forma e profundidade */
  --pp-raio-sm: 0.25rem;
  --pp-raio: 0.5rem;
  --pp-raio-lg: 1rem;
  --pp-sombra-1: 0 1px 3px rgba(23, 54, 93, 0.04), 0 1px 2px rgba(23, 54, 93, 0.02);
  --pp-sombra-2: 0 4px 6px -1px rgba(23, 54, 93, 0.08), 0 2px 4px -2px rgba(23, 54, 93, 0.04);
  --pp-sombra-3: 0 20px 25px -5px rgba(23, 54, 93, 0.1), 0 8px 10px -6px rgba(23, 54, 93, 0.06);
  --pp-anel-foco: 0 0 0 3px rgba(15, 118, 110, 0.15);

  /* Medidas do layout */
  --pp-menu-largura: 248px;
  --pp-topo-altura: 64px;

  /* Bootstrap lendo os nossos tokens */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--pp-texto);
  --bs-body-bg: var(--pp-fundo);
  --bs-secondary-color: var(--pp-texto-secundario);
  --bs-border-color: var(--pp-borda);
  --bs-border-radius: var(--pp-raio);
  --bs-border-radius-sm: var(--pp-raio-sm);
  --bs-border-radius-lg: var(--pp-raio-lg);
  --bs-primary: var(--pp-acao);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--pp-acao);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--pp-acao-hover);
  --bs-link-hover-color-rgb: 11, 93, 87;
  --bs-emphasis-color: var(--pp-texto);
  --bs-heading-color: var(--pp-institucional);
}

/* 3. Base -------------------------------------------------------------------- */
body {
  background: var(--pp-fundo);
  color: var(--pp-texto);
  font-feature-settings: "cv05" 1;
  -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: 1.75rem; font-weight: 700; line-height: 2.25rem; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; }
h4, .h4 { font-size: 1rem; font-weight: 600; }
@media (min-width: 992px) {
  h1, .h1 { font-size: 2rem; line-height: 2.5rem; }
}
a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--pp-acao); outline-offset: 2px; }
::selection { background: var(--pp-acao-suave); color: var(--pp-institucional); }

/* Números, valores, datas, CNPJ: algarismos tabulares (alinham em coluna) */
/* .num = número alinhado à direita nas tabelas (valores); .tnum = só os algarismos tabulares (nº de termo, CNPJ) */
.num, .tnum, .table td.num, .kpi-valor { font-feature-settings: "tnum" 1, "cv05" 1; font-variant-numeric: tabular-nums; }

.rotulo-sm {
  font-size: 0.6875rem; font-weight: 600; line-height: 0.875rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-texto-secundario);
}
.texto-secundario { color: var(--pp-texto-secundario) !important; }
.texto-institucional { color: var(--pp-institucional) !important; }

/* 4. Botões ------------------------------------------------------------------ */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: var(--pp-raio);
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-sm { min-height: 32px; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { min-height: 48px; }
.btn:focus-visible { outline: 3px solid var(--pp-acao); outline-offset: 2px; box-shadow: none; }

.btn-primary {
  --bs-btn-bg: var(--pp-acao);              --bs-btn-border-color: var(--pp-acao);
  --bs-btn-hover-bg: var(--pp-acao-hover);  --bs-btn-hover-border-color: var(--pp-acao-hover);
  --bs-btn-active-bg: var(--pp-acao-ativo); --bs-btn-active-border-color: var(--pp-acao-ativo);
  --bs-btn-disabled-bg: var(--pp-acao);     --bs-btn-disabled-border-color: var(--pp-acao);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
/* Secundário / contorno: fundo branco, texto azul-marinho */
.btn-outline-secondary, .btn-secundario {
  --bs-btn-color: var(--pp-institucional);  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--pp-borda);
  --bs-btn-hover-color: var(--pp-institucional); --bs-btn-hover-bg: var(--pp-fundo);
  --bs-btn-hover-border-color: var(--pp-institucional);
  --bs-btn-active-color: var(--pp-institucional); --bs-btn-active-bg: #eef2f7;
  --bs-btn-active-border-color: var(--pp-institucional);
}
.btn-danger {
  --bs-btn-bg: var(--pp-erro); --bs-btn-border-color: var(--pp-erro);
  --bs-btn-hover-bg: #911d13;  --bs-btn-hover-border-color: #911d13;
  --bs-btn-active-bg: #7a180f; --bs-btn-active-border-color: #7a180f;
}
.btn-outline-danger {
  --bs-btn-color: var(--pp-erro); --bs-btn-border-color: var(--pp-erro-borda); --bs-btn-bg: var(--pp-erro-fundo);
  --bs-btn-hover-bg: var(--pp-erro); --bs-btn-hover-border-color: var(--pp-erro);
}
.btn-institucional {
  --bs-btn-color: #fff; --bs-btn-bg: var(--pp-institucional); --bs-btn-border-color: var(--pp-institucional);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pp-institucional-escuro);
  --bs-btn-hover-border-color: var(--pp-institucional-escuro);
}

/* 5. Formulários ------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.5rem; color: var(--pp-texto); }
.form-label .obrigatorio { color: var(--pp-erro); }
.form-control, .form-select {
  min-height: 40px; font-size: 0.875rem; border-color: var(--pp-borda);
  border-radius: var(--pp-raio); background-color: #fff; color: var(--pp-texto);
}
.form-control::placeholder { color: var(--pp-texto-secundario); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--pp-acao); box-shadow: var(--pp-anel-foco); }
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 3px solid var(--pp-acao); outline-offset: 2px; box-shadow: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--pp-erro); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15); }
.form-control.is-invalid:focus-visible, .form-select.is-invalid:focus-visible { outline-color: var(--pp-erro); }
.form-text { color: var(--pp-texto-secundario); font-size: 0.75rem; }
.invalid-feedback { color: var(--pp-erro); font-size: 0.75rem; }
.form-check-input:checked { background-color: var(--pp-acao); border-color: var(--pp-acao); }
.form-check-input:focus { border-color: var(--pp-acao); box-shadow: var(--pp-anel-foco); }
.input-icone { position: relative; }
.input-icone > .bi { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--pp-texto-secundario); pointer-events: none; }
.input-icone > .form-control { padding-left: 2.25rem; }

/* 6. Selos de situação (sempre com bolinha: não depender só da cor) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 2px 8px; border: 1px solid; border-radius: var(--pp-raio);
  font-size: 0.75rem; font-weight: 500; line-height: 1rem; white-space: nowrap;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.selo-erro    { color: var(--pp-erro);    background: var(--pp-erro-fundo);    border-color: var(--pp-erro-borda); }
.selo-atencao { color: var(--pp-atencao); background: var(--pp-atencao-fundo); border-color: var(--pp-atencao-borda); }
.selo-sucesso { color: var(--pp-sucesso); background: var(--pp-sucesso-fundo); border-color: var(--pp-sucesso-borda); }
.selo-info    { color: var(--pp-info);    background: var(--pp-info-fundo);    border-color: var(--pp-info-borda); }
.selo-neutro  { color: var(--pp-neutro);  background: var(--pp-neutro-fundo);  border-color: var(--pp-neutro-borda); }
.selo-sem-ponto::before { display: none; }
.selo-quebra { white-space: normal; }

.contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
  background: var(--pp-erro); color: #fff; font-size: 0.6875rem; font-weight: 700;
}

/* Avisos (alertas) no padrão do design */
.aviso {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.875rem 1rem; border: 1px solid; border-radius: var(--pp-raio); font-size: 0.8125rem;
}
.aviso > .bi { font-size: 1.125rem; line-height: 1.25rem; flex: none; }
.aviso-erro    { color: #7a271a; background: var(--pp-erro-fundo);    border-color: var(--pp-erro-borda); }
.aviso-atencao { color: #7a2e0e; background: var(--pp-atencao-fundo); border-color: var(--pp-atencao-borda); }
.aviso-sucesso { color: #05603a; background: var(--pp-sucesso-fundo); border-color: var(--pp-sucesso-borda); }
.aviso-info    { color: #1849a9; background: var(--pp-info-fundo);    border-color: var(--pp-info-borda); }
.aviso-erro > .bi { color: var(--pp-erro); }
.aviso-atencao > .bi { color: var(--pp-atencao); }
.aviso-sucesso > .bi { color: var(--pp-sucesso); }
.aviso-info > .bi { color: var(--pp-info); }

/* 7. Cartões e KPIs ---------------------------------------------------------- */
.cartao {
  background: var(--pp-superficie); border: 1px solid var(--pp-borda);
  border-radius: var(--pp-raio); box-shadow: var(--pp-sombra-1);
}
.cartao-corpo { padding: 1rem; }
@media (min-width: 992px) { .cartao-corpo { padding: 1.5rem; } }
.cartao-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--pp-borda);
}
.cartao-cabecalho h2, .cartao-cabecalho h3 { margin: 0; }
.cartao-acao { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.cartao-acao:hover { box-shadow: var(--pp-sombra-2); }

.kpi { position: relative; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
.kpi-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.kpi-valor { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; color: var(--pp-institucional); letter-spacing: -0.01em; }
.kpi-valor small { font-size: 0.875rem; font-weight: 500; color: var(--pp-texto); letter-spacing: 0; }
.kpi-rodape { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--pp-borda); font-size: 0.75rem; color: var(--pp-texto-secundario); }
.kpi-icone {
  width: 32px; height: 32px; border-radius: var(--pp-raio); display: inline-flex; align-items: center;
  justify-content: center; background: var(--pp-fundo); color: var(--pp-institucional);
}
.kpi--erro    { border-left: 3px solid var(--pp-erro); }
.kpi--atencao { border-left: 3px solid var(--pp-atencao); }
.kpi--sucesso { border-left: 3px solid var(--pp-sucesso); }
.kpi--institucional { border-left: 3px solid var(--pp-institucional); }
.kpi--erro .kpi-valor { color: var(--pp-erro); }
@media (max-width: 575.98px) {
  .kpi { padding: 0.75rem 0.875rem; gap: 0.25rem; }
  .kpi-valor { font-size: 1.375rem; line-height: 1.75rem; }
  .kpi-valor small { font-size: 0.75rem; }
  .kpi-rodape { padding-top: 0.5rem; }
  .kpi .kpi-icone { display: none; }
}
.kpi--atencao .kpi-valor { color: var(--pp-atencao); }
.kpi--sucesso .kpi-valor { color: var(--pp-sucesso); }

.barra-progresso { height: 6px; background: #e8edf3; border-radius: 9999px; overflow: hidden; }
.barra-progresso > span { display: block; height: 100%; background: var(--pp-acao); border-radius: 9999px; }

/* Estado vazio (quando ainda não há dados) */
.vazio { text-align: center; padding: 2.5rem 1.5rem; color: var(--pp-texto-secundario); }
.vazio .bi { font-size: 2rem; color: #98a2b3; display: block; margin-bottom: 0.5rem; }
.vazio strong { display: block; color: var(--pp-texto); margin-bottom: 0.25rem; }

/* 8. Tabelas ----------------------------------------------------------------- */
.tabela { --bs-table-bg: #fff; --bs-table-hover-bg: var(--pp-linha-hover); margin: 0; font-size: 0.8125rem; }
.tabela > thead > tr > th {
  background: var(--pp-fundo); border-bottom: 2px solid var(--pp-borda);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pp-texto-secundario); padding: 0.75rem 1rem; white-space: nowrap; vertical-align: middle;
}
.tabela > tbody > tr > td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--pp-borda); vertical-align: middle; }
.tabela td.num, .tabela th.num { text-align: right; font-weight: 500; }
.tabela .small { font-size: 0.75rem; }
/* Tabela com muitas colunas: no celular rola para o lado em vez de espremer o texto */
.tabela-larga { min-width: 720px; }
.tabela tr.linha-erro > td:first-child { box-shadow: inset 3px 0 0 var(--pp-erro); }
.tabela tr.linha-erro > td { background: #fffbfa; }

/* 9. Layout do SERVIDOR (menu lateral azul-marinho) -------------------------- */
.app { min-height: 100vh; }
.menu-lateral {
  --bs-offcanvas-width: var(--pp-menu-largura);
  --bs-offcanvas-bg: var(--pp-institucional);
  background: var(--pp-institucional); color: #c9d6e8;
  display: flex; flex-direction: column;
}
@media (min-width: 992px) {
  .menu-lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--pp-menu-largura); z-index: 1030;
    visibility: visible !important; transform: none !important;
    /* .offcanvas-lg do Bootstrap força fundo transparente em telas grandes */
    background-color: var(--pp-institucional) !important;
  }
  .app-conteudo { margin-left: var(--pp-menu-largura); }
}
.menu-marca { display: flex; gap: 0.75rem; align-items: center; padding: 1.25rem 1.25rem 1rem; color: #fff; text-decoration: none; }
.menu-marca img { width: auto; height: 48px; flex: none; }
.menu-marca strong { display: block; font-size: 1rem; line-height: 1.2; color: #fff; }
.menu-marca small { display: block; font-size: 0.6875rem; line-height: 1.3; color: #9fb3cd; }
.menu-cta { padding: 0.5rem 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.menu-cta .btn { width: 100%; }
.menu-lista { list-style: none; padding: 0.75rem; margin: 0; flex: 1; overflow-y: auto; }
.menu-lista a, .menu-lista span.menu-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5625rem 0.75rem; border-radius: var(--pp-raio);
  color: #c9d6e8; text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.menu-lista a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.menu-lista a.ativo { background: var(--pp-acao); color: #fff; font-weight: 600; }
.menu-lista .bi { font-size: 1rem; width: 1.125rem; text-align: center; }
.menu-lista span.menu-item { opacity: 0.45; cursor: not-allowed; }
.menu-lista .menu-fase { margin-left: auto; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.03em; color: #9fb3cd; }
.menu-rodape { padding: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8125rem; }
.menu-rodape a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; color: #c9d6e8; text-decoration: none; border-radius: var(--pp-raio); }
.menu-rodape a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.menu-versao { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem 0; font-size: 0.6875rem; color: #9fb3cd; }

.topo {
  position: sticky; top: 0; z-index: 1020; height: var(--pp-topo-altura);
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
  background: #fff; border-bottom: 1px solid var(--pp-borda);
}
@media (min-width: 992px) { .topo { padding: 0 2rem; } }
.topo-busca { flex: 1; max-width: 420px; }
.topo-busca .form-control { background: var(--pp-fundo); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.topo-icone {
  position: relative; width: 36px; height: 36px; border-radius: var(--pp-raio); border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--pp-texto-secundario); font-size: 1.125rem;
}
.topo-icone:hover { background: var(--pp-fundo); color: var(--pp-institucional); }
.topo-icone .contador { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; font-size: 0.625rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pp-institucional); color: #fff; font-size: 0.8125rem; font-weight: 700;
}
.usuario-menu { display: flex; align-items: center; gap: 0.625rem; border: 0; background: transparent; padding: 0.25rem 0.5rem; border-radius: var(--pp-raio); text-align: left; }
.usuario-menu:hover { background: var(--pp-fundo); }
.usuario-menu strong { display: block; font-size: 0.8125rem; color: var(--pp-texto); line-height: 1.2; }
.usuario-menu small { display: block; font-size: 0.6875rem; color: var(--pp-texto-secundario); }

.pagina { padding: 1.5rem 1rem 2rem; max-width: 1440px; }
@media (min-width: 992px) { .pagina { padding: 2rem; } }
.pagina-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.pagina-cabecalho h1 { margin-bottom: 0.25rem; }
.pagina-cabecalho p { margin: 0; color: var(--pp-texto-secundario); }
.trilha { --bs-breadcrumb-divider: "›"; font-size: 0.75rem; margin-bottom: 0.75rem; }
.trilha a { color: var(--pp-texto-secundario); text-decoration: none; }

.rodape-sistema {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 2rem; border-top: 1px solid var(--pp-borda); font-size: 0.75rem; color: var(--pp-texto-secundario);
}
.rodape-sistema a { color: var(--pp-texto-secundario); }

/* 10. Layout da ENTIDADE (cabeçalho branco + abas) --------------------------- */
.cabecalho-entidade { background: #fff; border-bottom: 1px solid var(--pp-borda); }
.cabecalho-entidade .linha-1 { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; }
.marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--pp-institucional); }
.marca img { width: auto; height: 44px; }
.marca strong { display: block; font-size: 1rem; line-height: 1.2; }
.marca small { display: block; font-size: 0.6875rem; color: var(--pp-texto-secundario); letter-spacing: 0.02em; text-transform: uppercase; }
.abas-entidade { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: none; }
.abas-entidade a, .abas-entidade span {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  padding: 0.5rem 0.875rem; border-radius: var(--pp-raio); font-size: 0.8125rem; font-weight: 600;
  color: var(--pp-texto); text-decoration: none;
}
.abas-entidade a:hover { background: var(--pp-fundo); }
.abas-entidade a.ativo { background: var(--pp-acao); color: #fff; }
.abas-entidade span { opacity: 0.45; cursor: not-allowed; }
.rodape-institucional { background: var(--pp-institucional); color: #c9d6e8; font-size: 0.75rem; margin-top: 3rem; }
.rodape-institucional a { color: #fff; }
.rodape-institucional strong { color: #fff; }

/* 11. Layout PÚBLICO e LOGIN ------------------------------------------------- */
.faixa-gov { background: var(--pp-institucional-escuro); color: #c9d6e8; font-size: 0.6875rem; padding: 0.375rem 0; }
.cabecalho-publico { background: #fff; border-bottom: 1px solid var(--pp-borda); }
.cabecalho-publico .container-xl { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.links-cabecalho { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; }
.links-cabecalho a { color: var(--pp-texto-secundario); text-decoration: none; display: inline-flex; gap: 0.375rem; align-items: center; }
.links-cabecalho a:hover { color: var(--pp-institucional); }
@media (max-width: 575.98px) {
  .cabecalho-publico .container-xl { flex-wrap: wrap; gap: 0.25rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .cabecalho-publico .marca small { display: none; }
  .links-cabecalho { margin-left: 0; width: 100%; gap: 0.25rem 1rem; }
  .links-cabecalho a { min-height: 32px; }
}
.selo-ambiente { color: var(--pp-sucesso) !important; background: var(--pp-sucesso-fundo); border: 1px solid var(--pp-sucesso-borda); padding: 2px 8px; border-radius: var(--pp-raio); }

.login-envelope { padding: 2rem 0 3rem; }
.login-painel {
  background: #fff; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio-lg);
  box-shadow: var(--pp-sombra-2); overflow: hidden;
}
.login-institucional {
  background: linear-gradient(160deg, var(--pp-institucional) 0%, var(--pp-institucional-escuro) 100%);
  color: #c9d6e8; padding: 2rem; height: calc(100% - 2rem); display: flex; flex-direction: column; gap: 1.5rem;
  border-radius: var(--pp-raio-lg); margin: 1rem;
}
.login-cidadao .btn { white-space: nowrap; flex: none; }
.login-institucional h1 { color: #fff; font-size: 1.75rem; line-height: 2.125rem; }
.login-institucional .destaque-lei { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.login-marca { display: inline-flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--pp-raio); }
.login-marca img { width: auto; height: 48px; }
.login-marca small { display: block; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb3cd; }
.login-marca strong { display: block; color: #fff; font-size: 1rem; }
.login-beneficio { display: flex; gap: 0.75rem; }
.login-beneficio .bi { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; color: #80d5cb; }
.login-beneficio strong { display: block; color: #fff; font-size: 0.875rem; }
.login-beneficio span { font-size: 0.75rem; color: #9fb3cd; }
.login-cidadao { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: var(--pp-raio); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.login-cidadao strong { display: block; color: #fff; font-size: 0.875rem; }
.login-cidadao span { font-size: 0.75rem; color: #9fb3cd; }
.login-form { padding: 2rem 1.5rem; }
@media (min-width: 992px) { .login-form { padding: 2.5rem 2.5rem 2rem 1.5rem; } }

.seletor-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; background: var(--pp-fundo); border: 1px solid var(--pp-borda); border-radius: var(--pp-raio); }
.seletor-perfil input { position: absolute; opacity: 0; pointer-events: none; }
.seletor-perfil label {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 40px;
  border-radius: var(--pp-raio-sm); font-weight: 600; font-size: 0.8125rem; color: var(--pp-texto-secundario); cursor: pointer;
}
.seletor-perfil input:checked + label { background: var(--pp-acao); color: #fff; box-shadow: var(--pp-sombra-1); }
.seletor-perfil input:focus-visible + label { outline: 3px solid var(--pp-acao); outline-offset: 2px; }
.divisor-texto { display: flex; align-items: center; gap: 0.75rem; color: var(--pp-texto-secundario); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.divisor-texto::before, .divisor-texto::after { content: ""; flex: 1; height: 1px; background: var(--pp-borda); }
.rodape-login { background: #fff; border-top: 1px solid var(--pp-borda); font-size: 0.75rem; color: var(--pp-texto-secundario); padding: 1rem 0; }

/* 12. Utilitários ------------------------------------------------------------ */
.gap-grade { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.mensagens { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: grid; gap: 0.5rem; max-width: min(420px, calc(100vw - 2rem)); }
.mensagens .aviso { box-shadow: var(--pp-sombra-2); background-clip: padding-box; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular-conteudo:focus, .pular-conteudo:focus-visible {
  position: fixed !important; top: 0.75rem; left: 0.75rem; z-index: 2000;
  width: auto; height: auto; clip: auto; overflow: visible;
  padding: 0.625rem 1rem; border-radius: var(--pp-raio);
  background: var(--pp-institucional); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: var(--pp-sombra-2);
}

/* 13. Documento para imprimir (Relatório de Situação de Habilitação) --------- */
.pagina-documento { background: #e9edf3; }
.barra-documento {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid var(--pp-borda);
}
.folha {
  background: #fff; max-width: 210mm; margin: 1.5rem auto; padding: 18mm 16mm; box-shadow: var(--pp-sombra-2);
  color: #111827; font-size: 0.8125rem;
}
.folha-cabecalho { display: flex; gap: 0.75rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 2px solid var(--pp-institucional); }
.folha-cabecalho strong { display: block; font-size: 1rem; color: var(--pp-institucional); }
.folha-cabecalho span { font-size: 0.75rem; color: var(--pp-texto-secundario); }
.folha-titulo { font-size: 1.375rem; margin: 1.25rem 0 0.25rem; color: var(--pp-institucional); }
.folha-subtitulo { color: var(--pp-texto-secundario); margin-bottom: 1rem; }
.folha h2 { font-size: 0.9375rem; margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.folha-tabela { width: 100%; border-collapse: collapse; }
.folha-tabela th, .folha-tabela td { border: 1px solid var(--pp-borda); padding: 6px 8px; text-align: left; vertical-align: top; }
.folha-tabela th { background: var(--pp-fundo); font-weight: 600; width: 30%; }
.folha-tabela thead th { width: auto; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.folha-tabela .hash { font-size: 0.6875rem; color: var(--pp-texto-secundario); }
.folha-nota { font-size: 0.6875rem; color: var(--pp-texto-secundario); margin-top: 0.5rem; }
.resultado { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border: 2px solid; border-radius: var(--pp-raio); }
.resultado .bi { font-size: 1.5rem; }
.resultado strong { font-size: 1rem; }
.resultado ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.resultado-regular { color: #05603a; background: var(--pp-sucesso-fundo); border-color: var(--pp-sucesso); }
.resultado-irregular { color: #7a271a; background: var(--pp-erro-fundo); border-color: var(--pp-erro); }
.resultado-atencao { color: #7a2e0e; background: var(--pp-atencao-fundo); border-color: var(--pp-atencao-borda); }
.folha-texto { white-space: pre-line; }
.folha-tabela td.num { white-space: nowrap; text-align: right; }
.folha-tabela thead th.col-larga { width: 45%; }
/* Termo de parceria: "Cláusula 1ª – Do objeto", itens 1.1, 1.2... numerados sozinhos */
.termo { counter-reset: clausula; text-align: justify; font-size: 0.875rem; line-height: 1.55; }
.termo h2.clausula { counter-increment: clausula; counter-reset: item; margin-top: 1.1rem; }
.termo h2.clausula::before { content: "Cláusula " counter(clausula) "ª – "; }
.termo .item { counter-increment: item; margin-bottom: 0.4rem; }
.termo .item::before { content: counter(clausula) "." counter(item) " "; font-weight: 600; }
@media print { .quebra-antes { break-before: page; } }
.folha-assinaturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; margin-top: 2.5rem; break-inside: avoid; }
.folha-assinatura { font-size: 0.8125rem; text-align: center; break-inside: avoid; }
.folha-assinatura-linha { display: block; border-top: 1px solid var(--pp-texto); margin-bottom: 0.25rem; }
@media (max-width: 575.98px) { .folha-assinaturas { grid-template-columns: 1fr; } }
.folha-rodape { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--pp-borda); }
.codigo-verificacao { text-align: right; border: 1px dashed var(--pp-institucional); border-radius: var(--pp-raio); padding: 0.5rem 0.75rem; }
.codigo-verificacao span, .codigo-verificacao small { display: block; font-size: 0.625rem; color: var(--pp-texto-secundario); }
.codigo-verificacao strong { display: block; font-size: 1.125rem; letter-spacing: 0.08em; color: var(--pp-institucional); }
@media print {
  .nao-imprimir, .mensagens { display: none !important; }
  .pagina-documento { background: #fff; }
  .folha { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .selo { border: 1px solid currentColor; }
  @page { size: A4; margin: 15mm; }
}

/* 14. Assistente da proposta (imagem 2 do Stitch) ---------------------------- */
.passos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 991.98px) { .passos { grid-template-columns: 1fr; } }
.passo {
  display: flex; gap: 0.625rem; align-items: center; padding: 0.625rem 0.75rem;
  background: #fff; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio);
  text-decoration: none; color: var(--pp-texto); font-weight: 600; font-size: 0.8125rem; line-height: 1.2;
}
.passo small { display: block; font-weight: 500; font-size: 0.6875rem; color: var(--pp-texto-secundario); }
.passo-numero {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pp-fundo); border: 1px solid var(--pp-borda); font-size: 0.75rem;
}
.passo-ok .passo-numero { background: var(--pp-sucesso-fundo); border-color: var(--pp-sucesso-borda); color: var(--pp-sucesso); }
.passo-ok small { color: var(--pp-sucesso); }
.passo-pendente small { color: var(--pp-atencao); }
.passo-atual { background: var(--pp-acao-suave); border-color: var(--pp-acao); }
.passo-atual .passo-numero { background: var(--pp-acao); border-color: var(--pp-acao); color: #fff; }
.passo-futuro { opacity: 0.55; }
a.passo:hover { border-color: var(--pp-acao); }

.resumo-valores { display: grid; gap: 0.375rem; padding: 0.75rem; background: var(--pp-fundo); border-radius: var(--pp-raio); }
.resumo-valores div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
.resumo-valores span { color: var(--pp-texto-secundario); }
.barra-dupla { background: var(--pp-institucional); }
.cartao-ajuda { background: var(--pp-institucional); color: #c9d6e8; border: 0; }

.meta-cartao { border-left: 3px solid var(--pp-acao); }
.meta-numero {
  flex: none; width: 32px; height: 32px; border-radius: var(--pp-raio); background: var(--pp-institucional); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.etapa-bloco { border: 1px solid var(--pp-borda); border-radius: var(--pp-raio); margin-bottom: 0.75rem; overflow: hidden; }
.etapa-cabecalho { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background: var(--pp-fundo); }
.etapa-cabecalho strong { font-size: 0.8125rem; }
.form-inline-plano { background: #fbfcfe; border: 1px dashed var(--pp-acao); border-radius: var(--pp-raio); padding: 1rem; margin: 0.75rem 0; }
.acoes-icone .btn { min-height: 30px; padding: 0 0.5rem; }
.barra-acoes {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between;
  padding: 0.75rem 1rem; margin-top: 1.5rem; background: #fff; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio);
  box-shadow: var(--pp-sombra-2);
}

/* 15. Tela de análise (imagem 6 do Stitch) ------------------------------------ */
@media (min-width: 1200px) {
  .painel-acoes { position: sticky; top: calc(var(--pp-topo-altura) + 1rem); max-height: calc(100vh - var(--pp-topo-altura) - 2rem); overflow-y: auto; }
}

/* 16. Navegação fluida entre páginas ------------------------------------------ */
/* Troca de página com esmaecimento curto (Chrome/Edge). Menu lateral, topo e cabeçalho
   da entidade têm nome próprio: ficam parados enquanto só o conteúdo troca. */
@view-transition { navigation: auto; }
.menu-lateral { view-transition-name: menu-lateral; }
.topo { view-transition-name: topo; }
.cabecalho-entidade { view-transition-name: cabecalho-entidade; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Barra fina no topo: só aparece se a página demorar mais que 150 ms a responder. */
.barra-navegacao {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2100; height: 3px; pointer-events: none;
  background: var(--pp-acao); transform-origin: left center; transform: scaleX(0); opacity: 0;
}
html.navegando .barra-navegacao { animation: navegando 10s cubic-bezier(0.16, 1, 0.3, 1) 150ms forwards; }
@keyframes navegando {
  from { opacity: 1; transform: scaleX(0.1); }
  to   { opacity: 1; transform: scaleX(0.92); }
}
html.navegando { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.navegando .barra-navegacao { animation: none; opacity: 1; transform: scaleX(0.6); transition: opacity 0s 150ms; }
}