/* Portal de Negociação -- estilo base (15/10/2026). A cor principal vem do cadastro (portal_cor) em
   --cor, e o texto sobre ela (--cor-texto) é calculado pelo contraste em motor_portal.cor_texto. */
:root {
  --cor: #1f4e79;
  --cor-texto: #ffffff;
  --texto: #111827;
  --texto-suave: #4b5563;
  --fundo: #ffffff;
  --fundo-suave: #f3f4f6;
  --borda: #d1d5db;
  --foco: #f59e0b;
  --largura: 68rem;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
}
a { color: var(--cor); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.faixa { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }

.pular {
  position: absolute; left: -999px; top: 0;
  background: var(--texto); color: #fff; padding: .5rem 1rem; z-index: 10;
}
.pular:focus { left: 1rem; top: 1rem; }

.topo { background: var(--cor); color: var(--cor-texto); }
.topo .faixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brasao { height: 3rem; width: auto; }
.marca-textos { display: flex; flex-direction: column; }
.marca-municipio { font-size: .875rem; }
.marca-titulo { font-size: 1.25rem; font-weight: 700; }
.menu { display: flex; gap: 1.25rem; }
.menu a { color: inherit; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"], .menu a:hover { border-bottom-color: currentColor; }

.abertura { background: var(--fundo-suave); border-bottom: 1px solid var(--borda); padding: 2.5rem 0; }
.abertura h1 { margin: 0 0 .75rem; font-size: 2rem; line-height: 1.2; }
.chamada { margin: 0; max-width: 42rem; font-size: 1.125rem; color: var(--texto-suave); }

.passos { padding-top: 2rem; padding-bottom: 3rem; }
.passos h2 { font-size: 1.375rem; margin: 0 0 1.25rem; }
.lista-passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem;
}
.lista-passos li { border: 1px solid var(--borda); padding: 1.25rem; }
.lista-passos h3 { margin: .5rem 0 .25rem; font-size: 1.0625rem; }
.lista-passos p { margin: 0; color: var(--texto-suave); }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; background: var(--cor); color: var(--cor-texto); font-weight: 700;
}

.aviso { padding-top: 2.5rem; padding-bottom: 3rem; }
.aviso h1 { font-size: 1.75rem; margin: 0 0 .75rem; }
code { background: var(--fundo-suave); padding: .1rem .3rem; }

.rodape { border-top: 1px solid var(--borda); background: var(--fundo-suave); font-size: .9375rem; }
.rodape-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; padding-top: 1.5rem; padding-bottom: 1rem;
}
.rodape p { margin: 0 0 .25rem; }
.rodape-nome { font-weight: 700; }
.assinatura { color: var(--texto-suave); font-size: .8125rem; padding-bottom: 1.5rem; }

/* ASSISTENTE VIRTUAL (16/10/2026): botão fixo no canto, painel de conversa nas cores do portal */
.assist { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; }
.assist-abrir {
  background: var(--cor2, var(--cor)); color: var(--cor2-texto, var(--cor-texto)); border: 0;
  padding: .7rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.assist-painel {
  position: absolute; right: 0; bottom: 3.25rem; width: min(24rem, calc(100vw - 2rem)); height: min(32rem, 75vh);
  display: flex; flex-direction: column; background: var(--fundo); border: 1px solid var(--borda);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.assist-painel[hidden] { display: none; }
.assist-topo {
  display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem;
  background: var(--cor); color: var(--cor-texto); font-weight: 700;
}
.assist-fechar { background: transparent; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.assist-msgs { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.assist-msg { max-width: 88%; padding: .55rem .75rem; font-size: .9375rem; }
.assist-msg p { margin: 0 0 .35rem; }
.assist-msg p:last-child { margin-bottom: 0; }
.assist-bot { align-self: flex-start; background: var(--fundo-suave); border: 1px solid var(--borda); }
.assist-eu { align-self: flex-end; background: var(--cor); color: var(--cor-texto); }
.assist-links { margin: .4rem 0 0; padding: 0; list-style: none; }
.assist-links li { margin: .2rem 0 0; }
.assist-sugestoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.assist-sugestoes button {
  background: var(--fundo); color: var(--cor); border: 1px solid var(--cor); padding: .3rem .6rem;
  font: inherit; font-size: .875rem; cursor: pointer; text-align: left;
}
.assist-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--borda); }
.assist-form input { flex: 1; min-width: 0; padding: .5rem .6rem; font: inherit; border: 1px solid var(--borda); }
.assist-form button {
  background: var(--cor2, var(--cor)); color: var(--cor2-texto, var(--cor-texto)); border: 0;
  padding: .5rem .9rem; font: inherit; font-weight: 700; cursor: pointer;
}
.assist-nota { margin: 0; padding: 0 .6rem .5rem; font-size: .75rem; color: var(--texto-suave); }

/* fatia 1: páginas públicas */
.acoes { margin: 1.5rem 0 0; display: flex; gap: .75rem; flex-wrap: wrap; }
.botao, .formulario button {
  display: inline-block; background: var(--cor2, var(--cor)); color: var(--cor2-texto, var(--cor-texto));
  border: 2px solid var(--cor2, var(--cor));
  padding: .625rem 1.25rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.botao-secundario { background: transparent; color: var(--cor2, var(--cor)); }
.pagina { padding-top: 2rem; padding-bottom: 3rem; }
.pagina h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
.introducao { color: var(--texto-suave); margin: 0 0 1.5rem; max-width: 46rem; }

.duvidas details { border: 1px solid var(--borda); border-bottom: 0; }
.duvidas details:last-child { border-bottom: 1px solid var(--borda); }
.duvidas summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; }
.duvidas details[open] summary { border-bottom: 1px solid var(--borda); }
.duvidas details > p, .duvidas details > ul { margin: 0; padding: 1rem 1.25rem 1rem 2.5rem; }
.duvidas details > p { padding-left: 1.25rem; }
.duvidas li { margin-bottom: .5rem; }

.norma { margin-bottom: 2rem; }
.norma h2 { font-size: 1.125rem; margin: 0 0 .75rem; }
.lista-normas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.lista-normas li { border-bottom: 1px solid var(--borda); padding: .75rem 0; }
.lista-normas p { margin: 0 0 .25rem; }
.norma-cab { display: flex; gap: .75rem; align-items: baseline; }
.etiqueta { font-size: .8125rem; color: var(--texto-suave); border: 1px solid var(--borda); padding: 0 .4rem; }

.formulario {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem;
  align-items: end; border: 1px solid var(--borda); padding: 1.25rem; background: var(--fundo-suave);
}
.campo { display: flex; flex-direction: column; gap: .375rem; }
.campo label { font-weight: 700; }
.campo input, .campo select {
  font: inherit; padding: .5rem .625rem; border: 1px solid #6b7280; background: #fff; min-height: 2.75rem;
}
.campo input[aria-invalid="true"] { border-color: #b91c1c; }
.erro { color: #b91c1c; font-weight: 700; margin: .75rem 0 0; }
.resultado { margin-top: 2rem; }
.resultado h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.resultado-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; align-items: start; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { border-bottom: 1px solid var(--borda); padding: .5rem .25rem; text-align: left; }
.tabela thead th { border-bottom: 2px solid var(--texto); }
.resumo th { font-weight: 400; color: var(--texto-suave); }
.resumo td, .tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.aviso-texto { border: 1px solid var(--foco); padding: .5rem .75rem; background: #fffbeb; }
.nota { color: var(--texto-suave); font-size: .9375rem; margin-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fatia 2: acesso */
.menu { align-items: center; flex-wrap: wrap; }
.form-sair { margin: 0; }
.form-sair button {
  background: transparent; border: 1px solid currentColor; color: inherit; font: inherit; padding: .2rem .7rem;
  cursor: pointer;
}
.estreita { max-width: 34rem; margin-left: auto; margin-right: auto; }
.formulario-coluna { grid-template-columns: 1fr; }
.subtitulo { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
.vinculos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.vinculos li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda); padding: .75rem .5rem;
}
.vinculo-atual { background: var(--fundo-suave); }
.vinculo-nome { margin: 0; font-weight: 700; }
.vinculo-info { margin: 0; color: var(--texto-suave); font-size: .9375rem; }
.vinculos form { margin: 0; }
.vinculos .botao { padding: .4rem .9rem; }

/* fatia 3: meus débitos */
.resumo-curto { max-width: 26rem; margin-bottom: 1rem; }
.grupo-debitos { margin-top: 1.5rem; }
.grupo-inscricao { font-weight: 400; color: var(--texto-suave); }
.rolagem { overflow-x: auto; position: relative; }   /* relative: o texto .sr (absoluto) não escapa da rolagem */
.tabela-debitos { min-width: 44rem; }
.tabela tfoot th, .tabela tfoot td { border-bottom: 0; border-top: 2px solid var(--texto); }
.fase {
  display: inline-block; padding: .05rem .5rem; background: var(--fase, #e5e7eb); color: #111827;
  border: 1px solid rgba(0, 0, 0, .15); font-size: .875rem;
}
.fase-data { color: var(--texto-suave); font-size: .875rem; white-space: nowrap; }
.voltar { margin: 0 0 .75rem; }
.linha-tempo { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--borda); }
.linha-tempo li { margin: 0 0 .6rem; position: relative; }
.linha-tempo li::before {
  content: ""; position: absolute; left: -1.4rem; top: .45rem; width: .65rem; height: .65rem;
  background: var(--cor); border-radius: 50%;
}
.lt-data { font-weight: 700; margin-right: .5rem; font-variant-numeric: tabular-nums; }
.explicacao { margin: 0 0 1rem; padding-left: 1.25rem; }
.explicacao li { margin-bottom: .4rem; }

/* fatia 4: parcelamento */
.bloco-campos { border: 1px solid var(--borda); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.bloco-campos legend { font-weight: 700; padding: 0 .4rem; font-size: 1.0625rem; }
.formulario-sem-fundo { background: transparent; border: 0; padding: 0; }
.tabela-escolha td:first-child { width: 2rem; }
.tabela-escolha input[type="checkbox"], .confirmacao input { width: 1.2rem; height: 1.2rem; }
.tabela-escolha label { cursor: pointer; }
.emitir { margin-top: 1.5rem; border-top: 1px solid var(--borda); padding-top: .5rem; }
.confirmacao { display: flex; gap: .6rem; align-items: flex-start; }

/* fatia 5: meus acordos */
.situacao { display: inline-block; padding: .05rem .5rem; font-size: .875rem; font-weight: 700; border: 1px solid; }
.situacao-ok { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.situacao-pendente { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.situacao-alerta { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.situacao-neutro { background: var(--fundo-suave); color: var(--texto-suave); border-color: var(--borda); }

/* fatia 6: modo atendimento */
.faixa-atendimento { background: #fef3c7; border-bottom: 1px solid #f59e0b; color: #78350f; }
.faixa-atendimento p { margin: 0; padding-top: .6rem; padding-bottom: .6rem; }

/* medida de leitura só no TEXTO corrido; blocos de layout (destaque, passos, colunas, cartões) usam a faixa toda */
.texto-site > p, .texto-site > ul, .texto-site > ol:not(.lista-passos), .texto-site > blockquote,
.texto-site > h2, .texto-site > h3, .texto-site > h4 { max-width: 48rem; }
.texto-site h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.texto-site h3 { font-size: 1.0625rem; margin: 1.25rem 0 .4rem; }
.texto-site p, .texto-site li { line-height: 1.65; }
.lista-posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.lista-posts li { border-bottom: 1px solid var(--borda); padding: 1rem 0; }
.lista-posts p { margin: .25rem 0 0; color: var(--texto-suave); }
.post-titulo { font-weight: 700; font-size: 1.125rem; }
.post-meta { color: var(--texto-suave); font-size: .875rem; margin: .25rem 0 .75rem; }
.estreita-larga { max-width: 44rem; margin-left: auto; margin-right: auto; }
.formulario-contato { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.campo-largo { grid-column: 1 / -1; }
.campo textarea { font: inherit; padding: .5rem .625rem; border: 1px solid #6b7280; background: #fff; resize: vertical; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 40rem) {
  /* tabela de débitos vira cartões: o valor e o link ficam à vista sem rolar de lado */
  .tabela-debitos { min-width: 0; }
  .tabela-debitos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-debitos tbody tr { display: block; border: 1px solid var(--borda); margin-bottom: .75rem; padding: .5rem .75rem; }
  .tabela-debitos tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; }
  .tabela-debitos tbody td::before { content: attr(data-rotulo); color: var(--texto-suave); text-align: left; }
  .tabela-debitos tbody td.link-detalhe { justify-content: flex-end; }
  .tabela-debitos tfoot tr { display: flex; justify-content: space-between; }
  .tabela-debitos tfoot td:last-child { display: none; }
  .abertura h1 { font-size: 1.5rem; }
  .topo .faixa { padding-top: .5rem; padding-bottom: .5rem; }
}

/* páginas montadas por SEÇÕES (modelo do e-sefin, 15/10/2026) */
.pagina-topo { padding-top: 2rem; }
.pagina-topo h1 { font-size: 1.75rem; margin: 0 0 .5rem; }
.secao { padding-top: 1rem; padding-bottom: 2rem; }
.secao + .secao { border-top: 1px solid var(--borda); }
.perfis { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.perfis a { border: 1px solid var(--borda); padding: .25rem .75rem; text-decoration: none; color: inherit; }
.perfis a[aria-current="page"] { background: var(--cor); color: var(--cor-texto); border-color: var(--cor); }
.servicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.servico { border: 1px solid var(--borda); padding: 1rem; }
.servico-nome { margin: 0 0 .25rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.servico-desc { margin: 0 0 .5rem; color: var(--texto-suave); }
.servico-info summary { cursor: pointer; font-size: .9375rem; }
.servico-info dl { margin: .5rem 0 0; }
.servico-info dt { font-weight: 700; margin-top: .5rem; }
.servico-info dd { margin: .1rem 0 0; color: var(--texto-suave); }

.texto-site .imagem img { max-width: 100%; height: auto; display: block; }

/* BLOCOS DE LAYOUT (roteiro "à Wix", fase 3): prontos e responsivos -- sem posicionamento livre */
.destaque { background: var(--cor); color: var(--cor-texto); padding: 2rem 1.5rem; margin: 0.5rem 0 1.5rem; }
.destaque h2 { margin: 0 0 .5rem; font-size: 1.6rem; color: inherit; }
.destaque p { margin: 0 0 1rem; max-width: 46rem; color: inherit; }
.destaque .botao { background: var(--cor-texto); color: var(--cor); border-color: var(--cor-texto); }
.colunas { display: grid; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.colunas.c2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.colunas.c3, .colunas.c1 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.colunas .item h3, .cartoes .item h3 { margin: 0 0 .35rem; font-size: 1.0625rem; }
.colunas .item p, .cartoes .item p { margin: 0; color: var(--texto-suave); }
.cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 1rem 0 1.5rem; }
.cartoes .item { border: 1px solid var(--borda); border-top: 4px solid var(--cor); padding: 1rem; }
.imagem-texto { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr 1fr; margin: 1rem 0 1.5rem; }
.imagem-texto.lado-direita figure { order: 2; }
.imagem-texto figure { margin: 0; }
.imagem-texto img { max-width: 100%; height: auto; display: block; }
.imagem-texto h3 { margin: 0 0 .5rem; }
@media (max-width: 640px) { .imagem-texto { grid-template-columns: 1fr; } .imagem-texto.lado-direita figure { order: 0; } }
.destaque .botao-secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); }

/* ===================================================================================================================
   TEMA MINIMALISTA (16/10/2026, "faca uma proposta mais minimalista, harmonica com o sistema iaCDA" -> aprovada):
   topo branco com linha fina, a cor da prefeitura só como DESTAQUE (item ativo, botão principal, números, links),
   cantos retos, bordas finas, abertura sem caixa colorida, "Como funciona" em colunas, rodapé cinza claro.
   Fica no FIM do arquivo de propósito: as regras abaixo vencem as anteriores.
   =================================================================================================================== */
:root { --texto: #111827; --texto-suave: #6b7280; --fundo-suave: #f9fafb; --borda: #e5e7eb; }
body { font-size: .9375rem; }
.topo { background: var(--fundo-suave); color: var(--texto); border-bottom: 1px solid var(--borda); }  /* cinza claro da linha selecionada (16/10/2026) */
.topo .faixa { min-height: 3.75rem; }
.brasao { height: 2.25rem; }
.marca-municipio { font-size: .75rem; color: var(--texto-suave); }
.marca-titulo { font-size: 1.0625rem; font-weight: 600; }
.menu { gap: 1.25rem; font-size: .875rem; }
.menu a { color: var(--texto-suave); border-bottom-width: 2px; }
.menu a:hover { color: var(--texto); border-bottom-color: var(--borda); }
.menu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--cor); }
.menu a[href="/entrar"] { border: 1px solid var(--borda); padding: .3rem .8rem; color: var(--texto); }
.menu a[href="/entrar"][aria-current="page"] { border-color: var(--cor); }
.form-sair button { border-color: var(--borda); color: var(--texto); font-size: .875rem; }

.botao, .formulario button { border-width: 1px; font-weight: 600; padding: .55rem 1.1rem; font-size: .9375rem; }
.botao-secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
.botao-secundario:hover { border-color: var(--texto-suave); }

.destaque { background: transparent; color: var(--texto); padding: 2.25rem 0 1rem; margin: 0; }
.destaque h2 { font-size: 1.75rem; font-weight: 600; line-height: 1.25; margin: 0 0 .6rem; color: var(--texto); }
.destaque p { color: var(--texto-suave); font-size: 1.0625rem; max-width: 40rem; }
.destaque .botao { background: var(--cor2, var(--cor)); color: var(--cor2-texto, var(--cor-texto));
                   border-color: var(--cor2, var(--cor)); }
.destaque .botao-secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
.abertura { background: transparent; border-bottom: 0; padding: 2.25rem 0 1rem; }
.abertura h1 { font-size: 1.75rem; font-weight: 600; }

.subtitulo, .texto-site h2.subtitulo { font-size: .875rem; font-weight: 600; color: var(--texto-suave);
                                        margin: 1.25rem 0 .75rem; }
.lista-passos { gap: 1.5rem; }
.lista-passos li { border: 0; border-top: 1px solid var(--borda); padding: .9rem 0 0; }
.lista-passos li:first-child { border-top: 2px solid var(--cor); padding-top: calc(.9rem - 1px); }
.lista-passos h3 { margin: .2rem 0 .2rem; font-size: 1rem; font-weight: 600; }
.lista-passos p { font-size: .875rem; }
.passo-num { display: block; width: auto; height: auto; background: none; color: var(--cor); font-size: .8125rem;
             font-weight: 600; font-variant-numeric: tabular-nums; }
.secao + .secao { border-top: 0; }
.pagina-topo { padding-top: 2.25rem; }
.pagina-topo h1, .pagina h1 { font-size: 1.5rem; font-weight: 600; }
.introducao { font-size: 1rem; }

.duvidas summary { font-weight: 600; }
.servico { padding: .9rem 1rem; }
.servico-nome { font-weight: 600; }
.formulario { background: var(--fundo); }
.campo label { font-weight: 600; font-size: .875rem; }
.campo input, .campo select, .campo textarea { border-color: #d1d5db; }
.etiqueta { font-size: .75rem; }

.rodape { background: var(--fundo-suave); font-size: .8125rem; color: var(--texto-suave); margin-top: 2rem; }
.rodape-grade { grid-template-columns: 2fr 1.4fr 1fr; padding-top: 1.25rem; }
.rodape-nome { color: var(--texto); font-weight: 600; }
.rodape a { color: var(--texto-suave); }
.rodape a:hover { color: var(--texto); }
.assinatura { font-size: .75rem; }
.rodape p.assinatura { margin-left: auto; margin-right: auto; }
.assist-abrir { box-shadow: none; font-weight: 600; font-size: .875rem; }
.assist-painel { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

/* FAIXA DE BANNERS (16/10/2026): só na Início, entre o topo e a abertura; um por vez (banners.js) */
.banners { position: relative; background: var(--fundo-suave); border-bottom: 1px solid var(--borda); }
.banner { display: none; position: relative; }
.banner.ativo { display: block; }
.banner-link { display: block; color: inherit; text-decoration: none; }
.banner img { display: block; width: 100%; max-width: var(--largura); margin: 0 auto; aspect-ratio: 4 / 1;
              object-fit: cover; }
.banner-texto { position: absolute; left: 0; right: 0; bottom: 1.25rem; }
.banner-caixa { display: inline-block; max-width: 32rem; background: rgba(255, 255, 255, .94); padding: .7rem 1rem; }
.banner-titulo { margin: 0; font-weight: 600; font-size: 1.0625rem; color: var(--texto); }
.banner-caixa p + p { margin: .2rem 0 0; color: var(--texto-suave); font-size: .875rem; }
.banner-pontos { position: absolute; left: 0; right: 0; bottom: .5rem; display: flex; gap: .35rem;
                 justify-content: flex-end; }
.banner-pontos button { width: 1.25rem; height: 3px; padding: 0; border: 0; background: #cbd5e1;
                        cursor: pointer; }
.banner-pontos button[aria-current="true"] { background: var(--cor); }

@media (max-width: 40rem) {
  .rodape-grade { grid-template-columns: 1fr; }
  .banner img { aspect-ratio: 4 / 3; }
  .banner-texto { bottom: .9rem; }
  .destaque h2, .abertura h1 { font-size: 1.4rem; }
  .menu { gap: .9rem; }
}

/* HIERARQUIA TIPOGRÁFICA das páginas internas (16/10/2026, "faça uma hierarquia no tamanho das fontes"):
   1 título da página (1.75rem) > 2 seção / grupo (1.125rem) > 3 corpo e tabela (.875rem) > 4 rótulos e
   metadados (.75rem, cinza). O número que importa (total) ganha destaque próprio. A Início mantém o "Como funciona"
   pequeno (só nas páginas internas, .pagina). */
.pagina h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.01em; }
.pagina .introducao { font-size: 1rem; margin-bottom: 1.75rem; }
.pagina .subtitulo { font-size: 1.125rem; font-weight: 600; color: var(--texto); margin: 2.25rem 0 .75rem; }
.pagina .grupo-inscricao { font-size: .875rem; font-weight: 400; color: var(--texto-suave); margin-left: .35rem; }
.pagina .tabela { font-size: .875rem; }
.pagina .tabela thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                           color: var(--texto-suave); border-bottom: 1px solid var(--texto); padding-bottom: .4rem; }
.pagina .tabela tbody td { padding-top: .6rem; padding-bottom: .6rem; }
.pagina .tabela tfoot th, .pagina .tabela tfoot td { font-size: .9375rem; font-weight: 600; padding-top: .7rem; }
.pagina .fase { font-size: .75rem; }
.pagina .fase-data, .pagina .link-detalhe a { font-size: .75rem; }
.pagina .fase-data { color: var(--texto-suave); }
.pagina .resumo-curto { font-size: 1rem; max-width: 24rem; margin-bottom: 1.25rem; }
.pagina .resumo-curto th { font-size: .875rem; }
.pagina .resumo-curto td { font-size: 1.125rem; font-weight: 600; }
.pagina .resumo-curto tr:last-child td { font-size: 1.5rem; }
.pagina .nota { font-size: .8125rem; }

/* CANAIS DE CONTATO da Minha área (16/10/2026) */
.nota-contatos { color: var(--texto-suave); font-size: .875rem; margin: -.4rem 0 1rem; }
.canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; max-width: 46rem; }
.dte-corpo { border-top: 1px solid var(--borda); padding-top: .8rem; max-width: 46rem; font-size: .875rem; }
.dte-corpo form { margin-top: .5rem; }
.canal { border-top: 1px solid var(--borda); padding-top: .8rem; }
.canal h3 { font-size: .9375rem; font-weight: 600; margin: 0 0 .5rem; }
.canal p { font-size: .875rem; }
.lista-canais { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .875rem; }
.lista-canais li { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
                   padding: .4rem 0; border-bottom: 1px solid var(--borda); word-break: break-all; }
.lista-canais form { margin: 0; }
.link-botao { background: none; border: 0; padding: 0; color: var(--texto-suave); font: inherit; font-size: .75rem;
              text-decoration: underline; cursor: pointer; }
.link-botao:hover { color: #b91c1c; }
.incluir-canal { display: flex; gap: .4rem; margin-top: .5rem; }
.incluir-canal input { flex: 1; min-width: 0; font: inherit; font-size: .875rem; padding: .45rem .6rem;
                       border: 1px solid #d1d5db; }
.incluir-canal .botao { padding: .45rem .8rem; font-size: .8125rem; }

/* SEGUNDA VIA À VISTA (16/10/2026): barra de escolha em Meus débitos e a linha digitável */
.barra-escolha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
                 border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: .6rem 0;
                 margin: 0 0 .5rem; position: sticky; top: 0; background: var(--fundo); z-index: 5; }
.marca-geral { font-size: .875rem; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.barra-acoes { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.tabela-debitos td.escolha { width: 2rem; }
.tabela-debitos input[type="checkbox"], .marca-geral input { width: 1.05rem; height: 1.05rem; }
.subtitulo-linha { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--texto-suave); margin: 1.5rem 0 .3rem; }
.linha-digitavel { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem;
                   letter-spacing: .03em; background: var(--fundo-suave); border: 1px solid var(--borda);
                   padding: .7rem .9rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 40rem) { .tabela-debitos td.escolha { justify-content: flex-start; } }

/* CAIXA POSTAL DTE (16/10/2026) */
.filtro-caixa { display: flex; gap: 1rem; border-bottom: 1px solid var(--borda); margin: 0 0 .5rem; font-size: .875rem; }
.filtro-caixa a { color: var(--texto-suave); text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent; }
.filtro-caixa a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--cor); }
.caixa { list-style: none; margin: 0; padding: 0; }
.caixa li { border-bottom: 1px solid var(--borda); }
.caixa a { display: grid; grid-template-columns: 7rem 1fr auto; gap: .2rem 1rem; padding: .8rem .2rem;
           color: var(--texto); text-decoration: none; }
.caixa a:hover { background: var(--fundo-suave); }
.caixa-tipo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.caixa-titulo { font-size: .9375rem; }
.caixa-meta { grid-column: 2; font-size: .75rem; color: var(--texto-suave); }
.caixa-status { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: .75rem; color: var(--texto-suave);
                text-align: right; }
.caixa li.nova .caixa-titulo { font-weight: 700; }
.caixa li.nova .caixa-tipo { color: var(--cor); }
.caixa li.nova .caixa-status { color: #b45309; }
@media (max-width: 40rem) { .caixa a { grid-template-columns: 1fr; } .caixa-meta, .caixa-status { grid-column: 1; grid-row: auto; text-align: left; } }

/* canais de contato (esquerda) e DTE (no fim da faixa) lado a lado; no celular, um embaixo do outro */
.contatos-faixa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.contatos-faixa .canais, .contatos-faixa .dte-corpo { max-width: none; }
@media (max-width: 52rem) { .contatos-faixa { grid-template-columns: 1fr; gap: 0; } }

/* HUB da Minha área (16/10/2026) */
.acoes.hub { gap: .5rem; }
.contador { display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .3rem; background: var(--cor); color: var(--cor-texto); font-size: .75rem; line-height: 1.25rem; text-align: center; }

/* faixa do contribuinte na área logada (16/10/2026): o mesmo estilo do nome do portal (.marca-titulo) */
.quem-pagina { font-size: 1.0625rem; font-weight: 600; color: var(--texto); padding-top: 1.5rem; margin-bottom: -.75rem; }
.quem-doc { margin-left: .75rem; padding-left: .75rem; border-left: 1px solid var(--borda); color: var(--texto-suave); font-weight: 400; font-size: .9375rem; }

/* PROCURAÇÃO ELETRÔNICA (16/10/2026): abas, passos e resumo */
.abas-proc { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.abas-proc .nova-proc { margin-left: auto; }
.acoes-linha { white-space: nowrap; }
.acoes-linha form { display: inline; margin-left: .5rem; }
.acoes-linha .botao { padding: .25rem .7rem; font-size: .875rem; }
.passos-proc { list-style: none; display: flex; gap: 1.5rem; padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--borda); }
.passos-proc li { padding: .5rem 0; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.passos-proc li span { display: inline-block; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border: 1px solid var(--borda); font-size: .8125rem; margin-right: .3rem; }
.passos-proc li.atual { color: var(--texto); font-weight: 600; border-bottom-color: var(--cor); }
.passos-proc li.atual span, .passos-proc li.feito span { background: var(--cor); color: var(--cor-texto); border-color: var(--cor); }
.resumo-proc { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1.5rem; }
.resumo-proc dt { color: var(--texto-suave); }
.resumo-proc dd { margin: 0; }
.form-proc .campo { max-width: 24rem; }
.campo-termo { background: var(--fundo-suave); border: 1px solid var(--borda); padding: 1rem; }
.quem-pagina { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; }
.quem-agente { margin-left: auto; font-size: .9375rem; font-weight: 400; color: var(--texto-suave); }
.quem-agente { color: var(--texto); }
/* rótulos Contribuinte/Procurador; só o contribuinte ATIVO em negrito (16/10/2026) */
.quem-pagina { font-weight: 400; }
.quem-contrib b { font-weight: 700; }
.quem-rotulo { color: var(--texto-suave); font-weight: 400; }
.vinculos li:not(.vinculo-atual) .vinculo-nome { font-weight: 400; }
/* SUBMENU fixo da área logada (16/10/2026): o estilo do menu principal, linha sob o item selecionado */
.submenu { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; font-size: .875rem; margin-top: 1.25rem; border-bottom: 1px solid var(--borda); }
.submenu a, .submenu-form button { color: var(--texto-suave); text-decoration: none; padding: .5rem 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; cursor: pointer; }
.submenu a:hover, .submenu-form button:hover { color: var(--texto); border-bottom-color: var(--borda); }
.submenu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--cor); }
.submenu-form { margin: 0 0 0 auto; }
/* TOTAIS da Minha área (16/10/2026): cards retos, rótulo cinza, valor em negrito */
.cards-resumo { list-style: none; margin-top: 1rem; margin-bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.cards-resumo a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .9rem; border: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.cards-resumo a:hover { border-color: var(--cor); }
.card-rotulo { font-size: .8125rem; color: var(--texto-suave); }
.card-valor { font-size: 1.125rem; font-weight: 700; }
.card-qtd { font-size: .8125rem; color: var(--texto-suave); }
.card-total a { background: var(--fundo-suave); }
.card-alerta a { border-color: var(--cor); }
.card-alerta .card-valor { color: var(--cor); }
/* submenu: item ativo em negrito; título da página principal do submenu só para leitor de tela (16/10/2026) */
.submenu a[aria-current="page"] { font-weight: 700; }
.area-sub .pagina > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grupo-descricao { font-weight: 400; color: var(--texto); margin-left: .5rem; }
.tabela-debitos td.link-detalhe { white-space: nowrap; }
/* MEUS DÉBITOS compacto (16/10/2026, "achate mais e verifique os tamanhos de fontes"): régua de 2 níveis --
   título do grupo 1rem/600, tabela .875rem (cabeçalho .75rem), linhas ~34px; colunas com largura fixa */
.grupo-debitos { margin-top: 0; }
.pagina .grupo-debitos .subtitulo { font-size: 1rem; margin: 1.25rem 0 .35rem; }
.grupo-descricao { font-size: .9375rem; }
.pagina .tabela-debitos { table-layout: fixed; }
.pagina .tabela-debitos thead th { padding-top: .3rem; padding-bottom: .3rem; }
.pagina .tabela-debitos tbody td { padding-top: .35rem; padding-bottom: .35rem; }
.pagina .tabela-debitos tfoot th, .pagina .tabela-debitos tfoot td { font-size: .875rem; padding-top: .4rem; padding-bottom: .4rem; }
.tabela-debitos .c-esc { width: 2.25rem; } .tabela-debitos .c-trib { width: 30%; } .tabela-debitos .c-exe { width: 10%; }
.tabela-debitos .c-venc { width: 13%; } .tabela-debitos .c-sit { width: 12%; } .tabela-debitos .c-fase { width: 22%; }
.tabela-debitos .c-val { width: 14%; } .tabela-debitos .c-det { width: 5.5rem; }
.barra-escolha { padding-top: .35rem; padding-bottom: .35rem; }
.barra-escolha .botao { font-size: .875rem; padding: .45rem 1rem; }
/* tabela única com Tipo e Inscrição (16/10/2026) */
.tabela-debitos .c-tipo { width: 9%; } .tabela-debitos .c-insc { width: 12%; }
.tabela-debitos .c-trib { width: 25%; } .tabela-debitos .c-exe { width: 8%; } .tabela-debitos .c-venc { width: 11%; }
.tabela-debitos .c-sit { width: 10%; } .tabela-debitos .c-fase { width: 16%; } .tabela-debitos .c-val { width: 12%; }
.pagina .tabela-debitos { margin-top: 1rem; }
/* colunas da composição do valor (16/10/2026): a tabela cresce; larguras recalculadas */
.tabela-debitos .c-tipo { width: 7%; } .tabela-debitos .c-insc { width: 9%; } .tabela-debitos .c-trib { width: 15%; }
.tabela-debitos .c-exe { width: 6%; } .tabela-debitos .c-venc { width: 8%; } .tabela-debitos .c-sit { width: 7%; }
.tabela-debitos .c-fase { width: 12%; } .tabela-debitos .c-comp { width: 8%; } .tabela-debitos .c-val { width: 9%; }
.tabela-debitos .c-det { width: 4.5rem; }
.tabela-debitos { min-width: 60rem; }
/* rótulos das colunas em letra normal (1ª maiúscula), sem caixa alta; tributo pela sigla (16/10/2026) */
.pagina .tabela thead th { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.tabela-debitos .c-trib { width: 8%; } .tabela-debitos .c-insc { width: 11%; } .tabela-debitos .c-tipo { width: 8%; }
.tabela-debitos .c-venc { width: 9%; } .tabela-debitos .c-sit { width: 8%; } .tabela-debitos .c-comp { width: 9%; } .tabela-debitos .c-val { width: 10%; }
/* RÉGUA ÚNICA da área logada (16/10/2026, "padronize esses fontes com mesmo tipo e tamanho"): cards, submenu,
   barra de ações e tabela de débitos em .875rem; hierarquia só pelo PESO (valores e totais em negrito) */
.cards-resumo .card-rotulo, .cards-resumo .card-valor, .cards-resumo .card-qtd, .submenu a, .submenu-form button,
.barra-escolha .botao, .pagina .tabela-debitos, .pagina .tabela-debitos thead th, .pagina .tabela-debitos tbody td,
.pagina .tabela-debitos tfoot th, .pagina .tabela-debitos tfoot td, .pagina .tabela-debitos .link-detalhe a { font-size: .875rem; }
.cards-resumo .card-valor { font-weight: 700; }
/* coluna CDA (16/10/2026, "coloque nas colunas, o nr da CDA") */
.tabela-debitos .c-cda { width: 11%; } .tabela-debitos .c-tipo { width: 6%; } .tabela-debitos .c-insc { width: 10%; }
.tabela-debitos .c-comp { width: 8%; } .tabela-debitos .c-venc { width: 8.5%; }
.tabela-debitos { min-width: 66rem; }
/* detalhes do débito abaixo da tabela; linha clicável; sem quebra na inscrição e na CDA (16/10/2026) */
.tabela-debitos tr.linha-debito:hover td, .tabela-debitos tr.linha-debito.ativa td { background: var(--fundo-suave); }
.tabela-debitos td:nth-child(3), .tabela-debitos td:nth-child(4) { white-space: nowrap; }
.tabela-debitos .c-cda { width: 12%; } .tabela-debitos .c-insc { width: 11%; }
.det-debito { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--borda); background: var(--fundo-suave); font-size: .875rem; }
.det-debito .det-titulo { font-size: .875rem; font-weight: 700; margin: 0 0 .25rem; }
.det-debito p { margin: 0 0 .25rem; }
/* IMPRESSÃO DO EXTRATO (16/10/2026): só o cabeçalho de impressão e a tabela */
.so-impressao { display: none; }
@media print {
  .topo, .quem-pagina, .cards-resumo, .submenu, .barra-escolha, .det-debito, .rodape, .assist, .faixa-atendimento,
  .pagina > .nota, .tabela-debitos .escolha, .tabela-debitos .c-esc { display: none !important; }
  .so-impressao { display: block; }
  .cab-impressao p { margin: 0 0 .25rem; font-size: 10pt; }
  .pagina { padding: 0; } .faixa { max-width: none; padding: 0; }
  .tabela-debitos { min-width: 0; font-size: 8.5pt !important; } .tabela-debitos td, .tabela-debitos th { font-size: 8.5pt !important; padding: 2pt 3pt !important; }
  .tabela-debitos tr.linha-debito td { background: none !important; }
  @page { size: A4 landscape; margin: 12mm; }
}
.acoes-dir { display: flex; justify-content: flex-end; margin-top: .75rem; }
/* Extrato sem a faixa em branco acima da tabela; detalhes + Imprimir na mesma faixa (16/10/2026) */
.area-sub .pagina { padding-top: .5rem; }
.pagina .tabela-debitos { margin-top: .25rem; }
.faixa-extrato { display: flex; align-items: flex-start; gap: 1rem; margin-top: .75rem; }
.faixa-extrato .det-debito { flex: 1; margin-top: 0; }
.faixa-extrato .botao { margin-left: auto; white-space: nowrap; }
/* Exercício com folga: Vencimento e Situação um pouco à direita (16/10/2026) */
.tabela-debitos .c-tipo { width: 6%; } .tabela-debitos .c-insc { width: 10%; } .tabela-debitos .c-cda { width: 11.5%; }
.tabela-debitos .c-trib { width: 7.5%; } .tabela-debitos .c-exe { width: 7.5%; } .tabela-debitos .c-venc { width: 9.5%; }
.tabela-debitos .c-sit { width: 8.5%; } .tabela-debitos .c-comp { width: 7.5%; } .tabela-debitos .c-val { width: 9.5%; }
.faixa-extrato { align-items: center; }
.faixa-extrato .det-debito { padding: .5rem .9rem; }
.faixa-extrato .det-info { margin: 0; }
/* cards por situação (16/10/2026) */
.cards-resumo .card-vencido a { background: #fef2f2; border-color: #fecaca; }
.cards-resumo .card-avencer a { background: #ecfdf5; border-color: #a7f3d0; }
.cards-resumo .card-parcelado a { background: #eff6ff; border-color: #bfdbfe; }
/* passos clicáveis (16/10/2026) */
.passos-proc .passo-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.passos-proc .passo-btn:hover { color: var(--texto); text-decoration: underline; }
/* PAGAR (16/10/2026): débitos (grade reduzida) | opções de pagamento */
.pagar-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 60rem) { .pagar-grade { grid-template-columns: 1fr; } }
.tabela-reduzida { min-width: 0 !important; }
.tabela-reduzida .c-tipo { width: 12%; } .tabela-reduzida .c-insc { width: 18%; } .tabela-reduzida .c-cda { width: 22%; }
.tabela-reduzida .c-trib { width: 14%; } .tabela-reduzida .c-venc { width: 15%; } .tabela-reduzida .c-val { width: 16%; }
.pagar-opcoes .subtitulo { margin-top: 0; font-size: .875rem; }
.tabela-opcoes { font-size: .875rem; }
.tabela-opcoes td, .tabela-opcoes th { padding-top: .35rem; padding-bottom: .35rem; }
.tabela-opcoes .botao { padding: .3rem .7rem; font-size: .8125rem; white-space: nowrap; }
.tabela-opcoes .opc-avista td { background: var(--fundo-suave); }
.tabela-opcoes .opc-indisp td { color: var(--texto-suave); }
.opc-outra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.opc-outra input { width: 4.5rem; padding: .25rem .4rem; }
.campo-plano { display: flex; gap: .5rem; align-items: center; }
/* Pagar sem a coluna CDA (16/10/2026) */
.tabela-reduzida .c-tipo { width: 14%; } .tabela-reduzida .c-insc { width: 24%; } .tabela-reduzida .c-trib { width: 18%; }
.tabela-reduzida .c-venc { width: 18%; } .tabela-reduzida .c-val { width: 20%; }
/* Pagar: grade de débitos mais estreita (16/10/2026, "reduza a largura da primeira grid") */
.pagar-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
/* Pagar: títulos das duas colunas na mesma linha e as tabelas começando juntas (16/10/2026) */
.pagar-grade .subtitulo, .pagina .pagar-grade .subtitulo { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; line-height: 1.5; }
.pagar-grade .rolagem { margin: 0; } .pagar-grade .tabela-debitos, .pagar-grade .tabela-opcoes { margin-top: 0; }
.pagar-grade thead th { height: 2.25rem; vertical-align: middle; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
/* Pagar: o mesmo espaçamento vertical nas duas tabelas (16/10/2026) -- botões compactos nas opções */
.pagar-grade tbody td { padding-top: .35rem !important; padding-bottom: .35rem !important; vertical-align: middle; }
.tabela-opcoes .botao { padding: .15rem .6rem; line-height: 1.35; font-size: .8125rem; }
.tabela-opcoes .opc-outra input { padding: .1rem .4rem; }
.pagar-grade tbody tr { height: 2.3125rem; }
/* linha editável do outro nº de parcelas (16/10/2026) */
.tabela-opcoes .opc-n { width: 3.5rem; padding: .1rem .3rem; margin-right: .15rem; font-size: .875rem; }
/* passos do Pagar: o inativo sem clique (16/10/2026) */
.passos-proc li.inativo { color: var(--borda); }
.passos-proc li.inativo span { border-color: var(--borda); background: none; color: var(--borda); }
.passos-proc a.passo-btn { color: inherit; text-decoration: none; }
.passos-proc a.passo-btn:hover { color: var(--texto); text-decoration: underline; }
/* SIMULAÇÃO no padrão da área (16/10/2026): título de seção .875rem/600, tabelas .875rem, mesmas alturas */
.pagina .resultado { margin-top: 1rem; }
.pagina .resultado h2, .pagina .emitir .subtitulo { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; }
.resultado-grade { gap: 2rem; }
.resultado .tabela, .resultado .tabela th, .resultado .tabela td { font-size: .875rem; }
.resultado .tabela thead th { height: 2.25rem; vertical-align: middle; padding-top: 0; padding-bottom: 0; }
.resultado .tabela tbody tr { height: 2.3125rem; }
.resultado .tabela tbody th, .resultado .tabela tbody td { padding-top: .35rem; padding-bottom: .35rem; font-weight: 400; }
.pagina .resumo-proc { font-size: .875rem; }
/* simulação em 3 blocos com o topo alinhado (16/10/2026) */
.sim-blocos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1rem; }
@media (max-width: 60rem) { .sim-blocos { grid-template-columns: 1fr; } }
.sim-bloco .subtitulo, .pagina .sim-bloco .subtitulo { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; line-height: 1.5; }
.sim-bloco .tabela, .sim-bloco .tabela th, .sim-bloco .tabela td { font-size: .875rem; }
.sim-bloco .tabela thead th { height: 2.25rem; vertical-align: middle; padding-top: 0; padding-bottom: 0; }
.sim-bloco .tabela tbody tr { height: 2.3125rem; }
.sim-bloco .tabela tbody th, .sim-bloco .tabela tbody td { padding-top: .35rem; padding-bottom: .35rem; font-weight: 400; }
.sim-bloco.emitir { margin: 0; padding: 0; border: 0; font-size: .875rem; }
.sim-bloco.emitir p { margin: 0 0 .6rem; font-size: .875rem; }
.sim-bloco .resumo-proc { margin: .75rem 0 0; }
.sim-blocos { margin-top: .25rem; }
/* Pagar em uma página: a simulação/guia abaixo das opções; a opção escolhida destacada (16/10/2026) */
.pagar-grade + .sim-blocos, .pagar-grade ~ .sim-blocos { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); }
.tabela-opcoes .opc-escolhida td { background: var(--fundo-suave); font-weight: 600; }
.tabela-opcoes form { margin: 0; }
/* Emissão é o passo 2: os blocos sem a linha divisória de "abaixo das opções" (16/10/2026) */
.passos-pagar ~ .sim-blocos { margin-top: .25rem; padding-top: 0; border-top: 0; }
/* MEUS ACORDOS em 4 colunas (16/10/2026) */
.acordos-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
@media (max-width: 64rem) { .acordos-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .acordos-grade { grid-template-columns: 1fr; } }
.acordo-col .subtitulo, .pagina .acordo-col .subtitulo { font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; line-height: 1.5; }
.acordo-col .tabela, .acordo-col .tabela th, .acordo-col .tabela td { font-size: .8125rem; }
.acordo-col .tabela thead th { height: 2.25rem; vertical-align: middle; padding-top: 0; padding-bottom: 0; }
.acordo-col .tabela tbody tr { height: 2.3125rem; }
.acordo-col .tabela tbody th, .acordo-col .tabela tbody td { padding: .3rem .3rem; font-weight: 400; }
.tabela-acordos td a { font-weight: 600; text-decoration: none; color: var(--texto); }
.tabela-acordos td .fase-data { display: block; }
.tabela-acordos tr.acordo-sel td { background: var(--fundo-suave); }
.acordo-col .aviso-texto { font-size: .8125rem; margin-top: .75rem; }
.acordos-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); }
.tabela-acordos td a, .tabela-acordos .situacao { white-space: nowrap; }
.tabela-acordos .situacao { font-size: .75rem; padding: 0 .35rem; }

/* ===================================================================================================================
   PADRÃO iaCDA NO PORTAL (17/10/2026, "aplique no portal a Source Sans 3 servida pelo próprio portal, as cores de
   cinza e borda do iaCDA, a pílula de situação e o padrão dos botões. Mantenha o corpo em 15-16px"):
   - FONTE: Source Sans 3 (a mesma do iaCDA), servida de /static/fontes (sem CDN; licença OFL em fontes/OFL.txt).
     Caminho ABSOLUTO de propósito: a prévia da tela Portal embute este CSS com <base> = endereço do portal.
   - CORPO em 16px: a Source Sans desenha menor que a Segoe UI no mesmo tamanho (x-height baixa); o iaCDA usa
     15px porque é ferramenta densa, o portal é para o cidadão. Os tamanhos das tabelas e telas ficam como estão.
   - CINZAS e BORDAS = styles/tokens.py (Gray/Text/Border; copiados, o portal não importa o iaCDA). A cor da
     prefeitura (--cor) continua sendo só o destaque (white label): o PRIMÁRIO é ela, nunca o lilás do iaCDA.
   - PÍLULA = a de fase/passo do iaCDA (cor de fundo, canto 0.5rem, texto 400 #1a1a1a, sem borda).
   - BOTÕES = régua do iaCDA (tokens.Botao): 2rem de altura, .875rem, peso 600, canto reto; NEUTRO = G_150/G_700.
   Fica no FIM do arquivo: vence as regras anteriores.
   =================================================================================================================== */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/fontes/SourceSans3-VF.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("/static/fontes/SourceSans3-Italic-VF.woff2") format("woff2");
}
:root {
  --texto: #262730;          /* Text.PRIMARY (G_900) */
  --texto-corpo: #374151;    /* Text.BODY (G_700) */
  --texto-suave: #6b7280;    /* Text.LABEL (G_500) */
  --fundo-suave: #f1f5f9;    /* Surface.SECTION (G_75) */
  --borda: #e2e8f0;          /* Border.STRONG (G_200): separadores de linha e caixas */
  --borda-campo: #94a3b8;    /* Border.FIELD (G_400): campos e as linhas separadoras de barra */
  --neutro-bg: #e6e9ef;      /* Botao.NEUTRO_BG (G_150) */
  --neutro-hover: #e2e8f0;   /* Botao.NEUTRO_HOVER (G_200) */
  --neutro-tx: #374151;      /* Botao.NEUTRO_TX (G_700) */
  --desab-bg: #f0f2f6;       /* Botao.DESAB_BG (G_100) */
  --desab-tx: #94a3b8;       /* Botao.DESAB_TX (G_400) */
}
body, button, input, select, textarea {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body { font-size: 1rem; }

/* linhas separadoras de barra (topo e submenu) em G_400, como no iaCDA */
.topo { border-bottom-color: var(--borda-campo); }
.submenu { border-bottom-color: var(--borda-campo); }
.campo input, .campo select, .campo textarea, .assist-form input, .incluir-canal input { border-color: var(--borda-campo); }

/* PÍLULA (fase e situação) */
.fase, .situacao, .pagina .fase, .tabela-acordos .situacao {
  display: inline-block; padding: .05rem .6rem; border: 0; border-radius: .5rem;
  color: #1a1a1a; font-weight: 400; font-size: .875rem; line-height: 1.5; white-space: nowrap;
}
.fase { background: var(--fase, #e8e8e8); }
.situacao-ok { background: #c6f6d5; }        /* Functional.STATUS_ATIVO_BG */
.situacao-pendente { background: #fff3cd; }  /* Functional.STATUS_RASCUNHO_BG */
.situacao-alerta { background: #fed7d7; }    /* Functional.PHASE_PROTESTO_BG */
.situacao-neutro { background: #e8e8e8; }    /* Functional.STATUS_INATIVO_BG */
.tabela-acordos .situacao, .pagina .fase { font-size: .8125rem; }

/* BOTÕES: uma régua; a cor pelo PAPEL (primário = cor da prefeitura; secundário = neutro cinza) */
.botao, .formulario button, .destaque .botao, .vinculos .botao, .acoes-linha .botao, .barra-escolha .botao,
.incluir-canal .botao, .tabela-opcoes .botao, .faixa-extrato .botao, .form-sair button, .assist-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  min-height: 2rem; padding: 0 .6rem; border: 0; border-radius: 0;
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.botao, .formulario button, .destaque .botao, .assist-form button { padding: 0 1rem; }
.botao-secundario, .destaque .botao-secundario, .form-sair button {
  background: var(--neutro-bg); color: var(--neutro-tx); border: 0;
}
.botao-secundario:hover, .form-sair button:hover { background: var(--neutro-hover); }
.botao:disabled, .botao[aria-disabled="true"], .formulario button:disabled {
  background: var(--desab-bg); color: var(--desab-tx); cursor: not-allowed;
}
/* EMISSÃO (17/10/2026, "coloque em negrito o q fica em cima da linha e passe uma linha embaixo de termo"): o cabeçalho
   das tabelas em negrito escuro e o título dos blocos sem tabela (Termo do acordo, guia) na MESMA faixa do cabeçalho,
   com a mesma linha embaixo -- os 3 blocos começam alinhados pela linha */
.sim-bloco .tabela thead th { font-weight: 700; color: var(--texto); }
.sim-bloco .subtitulo, .pagina .sim-bloco .subtitulo { display: flex; align-items: center; height: 2.25rem; margin: 0 0 .5rem;
  border-bottom: 1px solid var(--texto); font-size: .875rem; font-weight: 700; color: var(--texto); line-height: 1.2; }
/* GRADE DE DÉBITOS no estilo da grade do iaCDA (17/10/2026, "e possivel a grid da imagem 2 ficar no mesmo estilo da
   imagem 1" -- a st.dataframe da Esteira): divisórias horizontais E verticais em G_150 com moldura, cabeçalho em cinza
   claro com texto cinza normal, linha de 30px (ALT_LINHA) e cabeçalho de 32px (ALT_HEADER), texto cortado com "..." como
   no canvas, valores sem negrito (só a linha Total). Só na tela larga: no celular a grade continua virando cartões. */
@media screen and (min-width: 40.0625rem) {
  .pagina table.tabela-debitos { border-collapse: collapse; border: 1px solid var(--neutro-bg); }
  .pagina table.tabela-debitos th, .pagina table.tabela-debitos td {
    border: 1px solid var(--neutro-bg); padding: 0 .5rem; height: 1.875rem; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--texto);
  }
  .pagina table.tabela-debitos thead th {
    height: 2rem; padding: 0 .5rem; background: #f8f9fb; color: var(--texto-suave); font-weight: 400;
    border-bottom: 1px solid var(--neutro-bg);
  }
  .pagina table.tabela-debitos tbody td strong { font-weight: 400; }
  .pagina table.tabela-debitos tfoot th, .pagina table.tabela-debitos tfoot td {
    border-top: 1px solid var(--neutro-bg); padding: 0 .5rem; font-weight: 700;
  }
  .pagina table.tabela-debitos tfoot td strong { font-weight: 700; }
  .pagina table.tabela-debitos .c-esc, .pagina table.tabela-debitos td.escolha { text-align: center; padding: 0; }
}
/* valor nunca sai cortado com "..." (o canvas do iaCDA corta, mas no portal o número é o que o cidadão confere) e a
   margem interna um pouco menor, para a grade caber na mesma largura de antes (17/10/2026) */
@media screen and (min-width: 40.0625rem) {
  .pagina table.tabela-debitos th, .pagina table.tabela-debitos td,
  .pagina table.tabela-debitos thead th, .pagina table.tabela-debitos tfoot th, .pagina table.tabela-debitos tfoot td { padding: 0 .375rem; }
  .pagina table.tabela-debitos .num { overflow: visible; text-overflow: clip; }
}
/* cabeçalho das tabelas da Emissão no MESMO tamanho do título "Termo do acordo" (17/10/2026, "o tamanho dos fontes esta em desacordo") */
.pagina .sim-bloco .tabela thead th { font-size: .875rem; }
/* grade de débitos SEM a moldura externa (17/10/2026, "tire as bordas externa"): ficam só as divisórias internas */
@media screen and (min-width: 40.0625rem) {
  .pagina table.tabela-debitos { border: 0; }
  .pagina table.tabela-debitos thead th { border-top: 0; }
  .pagina table.tabela-debitos tfoot th, .pagina table.tabela-debitos tfoot td { border-bottom: 0; }
  .pagina table.tabela-debitos tr > :first-child { border-left: 0; }
  .pagina table.tabela-debitos tr > :last-child { border-right: 0; }
}
/* faixa do débito escolhido na MESMA altura do botão Imprimir extrato (2rem; 17/10/2026, "ajuste a altura da msg de
   texto para ficar igual a do botao"); texto longo corta com "..." para não crescer a faixa */
.faixa-extrato .det-debito { display: flex; align-items: center; min-height: 2rem; height: 2rem; padding: 0 .75rem; overflow: hidden; }
.faixa-extrato .det-debito[hidden] { display: none; }
.faixa-extrato .det-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
/* PAGAR (passo 1) na altura da grade do Extrato (17/10/2026, "ajuste a altura para ficar igual da grid do extrato"):
   cabeçalho 32px e linha 30px nas DUAS tabelas (débitos e opções); o botão e o campo de nº de parcelas DENTRO da linha
   ficam em 1.5rem para caber nos 30px (a régua de 2rem dos botões vale fora das grades) */
.pagar-grade thead th { height: 2rem; }
.pagar-grade tbody tr, .pagar-grade tfoot tr { height: 1.875rem; }
.pagar-grade tbody td, .pagar-grade tfoot th, .pagar-grade tfoot td { height: 1.875rem; padding-top: 0 !important; padding-bottom: 0 !important; }
.pagar-grade .tabela-opcoes .botao { min-height: 1.5rem; height: 1.5rem; padding: 0 .6rem; }
.pagar-grade .tabela-opcoes .opc-n { height: 1.5rem; padding: 0 .4rem; }
.pagar-grade .tabela-opcoes .opc-n { width: 6rem; }   /* cabe o "até 24" inteiro com folga (antes cortava em "até 2"; 17/10/2026, "aumente o tamanho do campo") */
/* caixas de seleção (e o botão de opção do Extrato) em CINZA, não na cor do navegador (17/10/2026, "coloque a cor do
   check box em cinza"): G_450 do iaCDA, o mesmo cinza das legendas */
.tabela-debitos input[type="checkbox"], .tabela-debitos input[type="radio"], .marca-geral input[type="checkbox"] { accent-color: #64748b; }
/* cabeçalho da tabela de opções igual ao da grade de débitos ao lado (17/10/2026, "alinhar o topo"): o fundo cinza marca
   o topo das duas na mesma linha; mesma cor/peso do texto e mesma linha clara embaixo */
.pagar-grade .tabela-opcoes thead th { background: #f8f9fb; color: var(--texto-suave); font-weight: 400; border-bottom: 1px solid var(--neutro-bg); }
/* tabela de OPÇÕES com as divisórias de coluna da grade de débitos ao lado (17/10/2026, "coloque as linhas q dividem as
   colunas"): mesma linha G_150 entre colunas e linhas, sem moldura externa */
@media screen and (min-width: 40.0625rem) {
  .pagar-grade table.tabela-opcoes { border-collapse: collapse; border: 0; }
  .pagar-grade table.tabela-opcoes th, .pagar-grade table.tabela-opcoes td { border: 1px solid var(--neutro-bg); padding-left: .375rem; padding-right: .375rem; }
  .pagar-grade table.tabela-opcoes thead th { border-top: 0; }
  .pagar-grade table.tabela-opcoes tr > :first-child { border-left: 0; }
  .pagar-grade table.tabela-opcoes tr > :last-child { border-right: 0; }
}
/* EMISSÃO no MESMO desenho das grades do Pagar (17/10/2026, "coloque no mesmo padrao de design"): cabeçalho com fundo
   cinza e texto cinza normal, divisórias de coluna e de linha em G_150 sem moldura externa, linha 30px / cabeçalho 32px.
   O título dos blocos sem tabela (Termo do acordo, guia) vira a mesma faixa de cabeçalho, para os 3 começarem iguais. */
@media screen and (min-width: 40.0625rem) {
  .pagina .sim-bloco table.tabela { border-collapse: collapse; border: 0; }
  .pagina .sim-bloco table.tabela th, .pagina .sim-bloco table.tabela td {
    border: 1px solid var(--neutro-bg); padding: 0 .375rem; height: 1.875rem; vertical-align: middle;
    color: var(--texto); font-weight: 400;
  }
  .pagina .sim-bloco table.tabela tbody tr { height: 1.875rem; }
  .pagina .sim-bloco table.tabela tbody th, .pagina .sim-bloco table.tabela tbody td { padding-top: 0; padding-bottom: 0; }
  .pagina .sim-bloco table.tabela thead th {
    height: 2rem; background: #f8f9fb; color: var(--texto-suave); font-weight: 400; border-top: 0;
  }
  .pagina .sim-bloco table.tabela tr > :first-child { border-left: 0; }
  .pagina .sim-bloco table.tabela tr > :last-child { border-right: 0; }
  .pagina .sim-bloco table.tabela td strong { font-weight: 700; }
  .sim-bloco .subtitulo, .pagina .sim-bloco .subtitulo {
    height: 2rem; padding: 0 .375rem; background: #f8f9fb; color: var(--texto-suave); font-weight: 400;
    border-bottom: 1px solid var(--neutro-bg);
  }
}
.pagina table.tabela-debitos thead th.c-tipo-rotulo { font-weight: 700; color: var(--texto); }   /* "Débito" no Pagar (17/10/2026) */
.pagar-grade .tabela-opcoes thead th.opc-rotulo { font-weight: 700; color: var(--texto); }   /* "Opções" no lugar de "Forma" (17/10/2026) */
/* TAMANHOS TROCADOS (17/10/2026, "coloque o tamanho da fonte debitos e opcoes para o sub menu e o tamanho das fontes do sub
   menu para debitos e opcoes"): submenu da Minha área (Extrato, Pagar...) em 1rem (16px, era .875rem) e passos do Pagar
   (Débitos e opções / Emissão) em .875rem (14px, era 1rem) */
.submenu, .submenu a, .submenu-form button, .pagina .submenu a { font-size: 1rem; }
/* ESCADA do Pagar (17/10/2026, "submenu 16px, passos 15px, cabeçalhos das duas grades em 14px iguais, e o passo inativo
   Emissão num cinza legível"): submenu 16 > passos 15 > grade 14 */
.passos-pagar, .passos-pagar li { font-size: .9375rem; }
.pagina .pagar-grade table.tabela-opcoes thead th, .pagina .pagar-grade table.tabela-debitos thead th { font-size: .875rem; }
.passos-proc li.inativo { color: var(--desab-tx); }   /* G_400: o mesmo cinza do botão desabilitado (era G_200, quase invisível) */
.passos-proc li.inativo span { border-color: var(--desab-tx); color: var(--desab-tx); }
/* faixas do topo da Minha área em 16px (17/10/2026, "os textos das faixas assinaladas devem ficar com 16px"): menu do topo
   (e o Sair), linha do contribuinte (era 17px, documento/vínculo 15px), cards de resumo (eram 14px) e o submenu */
.menu, .menu a, .form-sair button, .menu .form-sair button { font-size: 1rem; }
.quem-pagina, .quem-pagina *, .quem-pagina .quem-doc { font-size: 1rem; }
.cards-resumo .card-rotulo, .cards-resumo .card-valor, .cards-resumo .card-qtd { font-size: 1rem; }
/* recálculo das opções no Pagar (17/10/2026): aviso ao lado do "Total" e as opções apagadas até a página nova chegar */
.tabela-debitos .recalc { margin-left: 1rem; font-weight: 400; color: var(--texto-suave); font-style: italic; }
.tabela-debitos .recalc[hidden] { display: none; }
.pagar-opcoes.recalculando { opacity: .4; pointer-events: none; transition: opacity .15s; }
/* Emissão: o 1º rótulo de cada bloco em negrito escuro, como "Débito"/"Opções" no passo 1 (17/10/2026, "coloque os campos
   assinalados em negrito"): Composição, Parcela e o título Termo do acordo (e os da guia emitida) */
.pagina .sim-bloco table.tabela thead th:first-child, .pagina .sim-bloco .subtitulo { font-weight: 700; color: var(--texto); }
/* MEUS ACORDOS no padrão das grades do Pagar (17/10/2026, "coloque essas grids no mesmo padrao"): cabeçalho com fundo
   cinza e texto cinza normal (o 1º rótulo em negrito escuro), divisórias de coluna e linha em G_150 sem moldura externa,
   linha de 30px / cabeçalho de 32px, texto em 14px. A lista de acordos tem 2 linhas por termo (nº e data) e cresce. */
@media screen and (min-width: 40.0625rem) {
  .pagina .acordo-col table.tabela { border-collapse: collapse; border: 0; }
  .pagina .acordo-col table.tabela th, .pagina .acordo-col table.tabela td {
    border: 1px solid var(--neutro-bg); padding: 0 .375rem; height: 1.875rem; vertical-align: middle;
    font-size: .875rem; color: var(--texto); font-weight: 400;
  }
  .pagina .acordo-col table.tabela tbody tr { height: 1.875rem; }
  .pagina .acordo-col table.tabela tbody th, .pagina .acordo-col table.tabela tbody td { padding-top: .2rem; padding-bottom: .2rem; }
  .pagina .acordo-col table.tabela thead th {
    height: 2rem; padding-top: 0; padding-bottom: 0; background: #f8f9fb; color: var(--texto-suave); font-weight: 400;
    border-top: 0; font-size: .875rem;
  }
  .pagina .acordo-col table.tabela thead th:first-child { font-weight: 700; color: var(--texto); }
  .pagina .acordo-col table.tabela tr > :first-child { border-left: 0; }
  .pagina .acordo-col table.tabela tr > :last-child { border-right: 0; }
  .pagina .acordo-col table.tabela td strong { font-weight: 700; }
  .pagina .tabela-acordos td a { font-weight: 600; }
  .pagina .acordo-col table.tabela td { white-space: nowrap; }
}
/* larguras das 4 colunas refeitas para as grades em 14px sem quebra caberem (17/10/2026): Parcelas e Débitos ganham, a lista
   de acordos (com folga) cede */
@media (min-width: 64.0625rem) { .acordos-grade { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, 1.15fr); } }
@media screen and (min-width: 40.0625rem) { .pagina .acordo-col table.tabela th, .pagina .acordo-col table.tabela td { padding-left: .3rem; padding-right: .3rem; } }   /* cabe sem quebra a 1200px */
/* o layout responsivo de Meus acordos volta a valer (uma regra sem media query, de 16/10, mantinha 4 colunas em qualquer
   largura): 2 colunas abaixo de 64rem, 1 no celular */
@media (max-width: 64rem) { .acordos-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 40rem) { .acordos-grade { grid-template-columns: minmax(0, 1fr); } }
/* sigla da situação na grade e legenda abaixo dela (17/10/2026) */
.tabela-debitos .c-sit-sigla abbr { text-decoration: none; cursor: help; font-weight: 600; }
.legenda-sit { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; font-size: .875rem; color: var(--texto-suave); }
.legenda-sit b { color: var(--texto); font-weight: 600; }
.legenda-sit .legenda-titulo { color: var(--texto); font-weight: 600; }
/* duas colunas de situação (Pagamento e Dívida, só a sigla) -- 17/10/2026 */
.tabela-debitos .c-sit { width: 5%; }
/* St (sigla da dívida, depois da CDA) estreita; Pagto em texto (17/10/2026) */
.tabela-debitos .c-st { width: 3.5%; } .tabela-debitos .c-sit { width: 7.5%; }
.tabela-debitos .c-cda { width: 13%; } .tabela-debitos .c-sit { width: 6.5%; }   /* nº da CDA inteiro com a coluna St ao lado */
/* radio de seleção na grade de Acordos, no padrão do Extrato (17/10/2026) */
.tabela-acordos td.escolha, .tabela-acordos th.c-esc { width: 2rem; text-align: center; }
.pagina .acordo-col table.tabela-acordos td.escolha, .pagina .acordo-col table.tabela-acordos th.c-esc { padding: 0; }
.tabela-acordos input[type="radio"] { accent-color: #64748b; cursor: pointer; }
.tabela-acordos tr.linha-acordo { cursor: pointer; }
.tabela-acordos tr.linha-acordo:hover td { background: var(--fundo-suave); }
.pagina .acordo-col table.tabela-acordos thead th:nth-child(2) { font-weight: 700; color: var(--texto); }   /* "Termo" segue o 1º rótulo em negrito */
/* situação do acordo quebra em DUAS linhas quando não cabe ("Aguardando a entrada" invadia a coluna ao lado; 17/10/2026,
   "quebre o campo em duas linhas") -- o selo vira bloco de largura natural, texto centrado */
.pagina .acordo-col table.tabela-acordos td:last-child { white-space: normal; }
.tabela-acordos .situacao, .pagina .acordo-col table.tabela-acordos .situacao { white-space: normal; display: inline-block; max-width: 100%; text-align: center; line-height: 1.25; padding: .1rem .5rem; }
/* Cadastro só com os canais (o DTE foi para a página DTE, 17/10/2026); na página DTE: caixa | adesão */
.contatos-faixa.so-canais { grid-template-columns: minmax(0, 1fr); }
.contatos-faixa .caixa-col .subtitulo { margin-top: 0; }
.contatos-faixa > section > .subtitulo:first-child { margin-top: 0; }   /* títulos das duas colunas na mesma linha */
/* CAIXA POSTAL DTE em grade (17/10/2026, "coloque em grid as mensagens"): mesmo desenho das grades do portal --
   cabeçalho cinza com texto cinza normal (o 1º rótulo em negrito), divisórias G_150 sem moldura, linha 30px, 14px;
   linha clicável, não lida em negrito; aviso amarelo abaixo da grade */
.pagina table.tabela-dte { border-collapse: collapse; border: 0; width: 100%; font-size: .875rem; }
.pagina table.tabela-dte th, .pagina table.tabela-dte td {
  border: 1px solid var(--neutro-bg); padding: 0 .375rem; height: 1.875rem; vertical-align: middle; color: var(--texto);
  font-weight: 400; font-size: .875rem;
}
.pagina table.tabela-dte thead th { height: 2rem; background: #f8f9fb; color: var(--texto-suave); border-top: 0; white-space: nowrap; }
.pagina table.tabela-dte thead th:first-child { font-weight: 700; color: var(--texto); }
.pagina table.tabela-dte tr > :first-child { border-left: 0; }
.pagina table.tabela-dte tr > :last-child { border-right: 0; }
.pagina table.tabela-dte td a { color: inherit; text-decoration: none; }
.pagina table.tabela-dte tr.linha-dte { cursor: pointer; }
.pagina table.tabela-dte tr.linha-dte:hover td { background: var(--fundo-suave); }
.pagina table.tabela-dte tr.nova td { font-weight: 700; }
.pagina table.tabela-dte tr.nova td:last-child { color: #b45309; }
/* colunas curtas no tamanho do conteúdo; a Mensagem fica com o resto */
.caixa-col .tabela-dte td:not(:nth-child(3)), .caixa-col .tabela-dte th:not(:nth-child(3)) { white-space: nowrap; width: 1%; }
.tabela-anexos td:not(:nth-child(2)), .tabela-anexos th:not(:nth-child(2)) { white-space: nowrap; width: 1%; }
.aviso-dte { margin-top: .75rem; font-size: .875rem; }
/* documentos da mensagem do DTE (17/10/2026): a mesma grade das mensagens, mais estreita */
.pagina table.tabela-anexos { width: auto; min-width: 28rem; margin-bottom: 1rem; }
.pagina table.tabela-anexos td a { color: var(--cor); text-decoration: underline; }
/* CAIXA POSTAL 60|40 (17/10/2026): mensagens à esquerda (radio = abrir), mensagem escolhida à direita */
.dte-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: start; }
@media (max-width: 60rem) { .dte-split { grid-template-columns: minmax(0, 1fr); } }
.dte-split .dte-detalhe .subtitulo { margin: 0 0 .5rem; }
.dte-split .dte-detalhe .subtitulo + .nota { margin-top: 0; }
.pagina table.tabela-dte td.escolha, .pagina table.tabela-dte th.c-esc { width: 2rem; padding: 0; text-align: center; }
.tabela-dte input[type="radio"] { accent-color: #64748b; cursor: pointer; }
.pagina table.tabela-dte tr.dte-sel td { background: var(--fundo-suave); }
.pagina .caixa-col table.tabela-dte thead th:nth-child(2) { font-weight: 700; color: var(--texto); }   /* "Tipo" = 1º rótulo */
.pagina table.tabela-dte-dados, .pagina table.tabela-anexos { width: 100%; min-width: 0; margin-bottom: 1rem; }
.pagina table.tabela-dte-dados tbody th { background: #f8f9fb; color: var(--texto-suave); font-weight: 400; width: 40%; text-align: left; }
.dte-detalhe .aviso-texto { font-size: .875rem; margin: 0 0 1rem; }
/* Autorizações (17/10/2026): o DTE abre a página e o texto explicativo fecha, no quadro amarelo */
.pagina > section#dte:first-of-type .subtitulo, .pagina > h1 + section#dte .subtitulo { margin-top: 0; }
.aviso-autorizacoes { margin-top: 1.5rem; font-size: .875rem; }
/* "Nova autorização" no padrão dos botões (17/10/2026, "coloque o botao no padrao"): o link das abas (.filtro-caixa a,
   cinza e com sublinhado de aba) pintava o texto do botão de cinza sobre o azul -- agora é o botão primário de sempre */
.abas-proc a.botao.nova-proc { color: var(--cor2-texto, var(--cor-texto)); border: 0; border-bottom: 0; padding: 0 1rem;
  min-height: 2rem; display: inline-flex; align-items: center; font-size: .875rem; font-weight: 600; }
.abas-proc a.botao.nova-proc:hover { color: var(--cor2-texto, var(--cor-texto)); }
/* radio "agir em nome" na grade Recebidas (17/10/2026) */
.tabela-recebidas td.escolha, .tabela-recebidas th.c-esc { width: 2.25rem; text-align: center; }
.tabela-recebidas .form-agir { margin: 0; }
.tabela-recebidas input[type="radio"] { accent-color: #64748b; cursor: pointer; }
#dte .aviso-dte { max-width: 46rem; margin-top: 1rem; }
/* bloco do DTE no topo da Caixa Postal em 60|40, quadro amarelo à direita alinhado pelo topo, texto 14px (17/10/2026) */
.dte-adesao { margin-bottom: 1.5rem; }
.dte-adesao, .dte-adesao .dte-corpo, .dte-adesao .confirmacao, .dte-adesao label, .dte-adesao p { font-size: .875rem; }
.dte-adesao .dte-corpo { max-width: none; }
#dte.dte-adesao .aviso-dte { margin: 0; max-width: none; }
.dte-adesao .dte-adesao-col > .subtitulo { margin-top: 0; }
/* bloco do DTE (17/10/2026, "alinhe o bloco da msg, coloque o botao no lado direito"): grade de 2 linhas -- o título na
   1ª linha da coluna esquerda e o quadro amarelo na coluna direita a partir da 2ª linha, com o topo na linha sob o
   título; o botão Aderir encosta à direita da coluna da adesão */
.dte-adesao .dte-adesao-col { display: contents; }
.dte-adesao .dte-adesao-col > * { grid-column: 1; }
#dte.dte-adesao .aviso-dte { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
.dte-adesao .dte-corpo form { display: flex; flex-direction: column; }
.dte-adesao .dte-corpo form .botao { align-self: flex-end; }
.dte-split.dte-adesao { row-gap: 0; }
/* Caixa Postal (17/10/2026): sem mensagem aberta a grade ocupa a faixa inteira; sem linha em branco antes do "Aceito" */
.dte-split.dte-sem-sel { grid-template-columns: minmax(0, 1fr); }
.dte-adesao .dte-corpo { padding-top: .5rem; }
.dte-adesao .dte-corpo .confirmacao { margin-top: 0; }
/* ATUALIZAÇÃO CADASTRAL (17/10/2026): seções da página Cadastro */
.atu-secao { margin-bottom: 1.75rem; }
.atu-secao > .subtitulo { margin-top: 0; }
.pagina table.tabela-atu { width: 100%; }
.tabela-atu td:first-child { width: 14rem; } .tabela-atu td:nth-child(2) { width: 30%; }
.atu-form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.atu-form input { flex: 1; min-width: 0; height: 1.5rem; padding: 0 .4rem; font: inherit; font-size: .875rem; border: 1px solid var(--borda-campo); }
.pagina table.tabela-atu .atu-form .botao { min-height: 1.5rem; height: 1.5rem; padding: 0 .6rem; }
.atu-endereco { display: grid; grid-template-columns: 3fr 1fr 2fr; gap: .25rem 1rem; max-width: 56rem; font-size: .875rem; }
.atu-endereco .campo { margin: 0; } .atu-endereco .campo input { width: 100%; }
.atu-endereco .campo-logradouro { grid-column: span 2; } .atu-endereco .atu-acoes { grid-column: 1 / -1; margin: .25rem 0 0; }
@media (max-width: 40rem) { .atu-endereco { grid-template-columns: 1fr; } .atu-endereco .campo-logradouro { grid-column: auto; } }
.atu-atual { font-size: .875rem; margin: 0 0 .5rem; }
.atu-recusadas { font-size: .875rem; margin: 0; padding-left: 1.1rem; }
/* CAMPOS NO PADRÃO DO iaCDA na página Cadastro (17/10/2026, "coloque os campos no padrao do iaCDA"): tokens
   _get_form_field_css -- fundo G_150, só a borda INFERIOR (G_400), canto reto, 30px (a régua da grade), texto
   .875rem; foco = branco + sublinhado na cor de destaque (no portal, a da prefeitura). Rótulo .875rem / 400. */
.atu-secao input:not([type=hidden]):not([type=radio]):not([type=checkbox]) {
  height: 1.875rem; padding: 0 .5rem; font: inherit; font-size: .875rem; color: var(--texto);
  background: var(--neutro-bg); border: 0; border-bottom: 1px solid var(--borda-campo); border-radius: 0;
  box-shadow: none; box-sizing: border-box; min-height: 0; }
.atu-secao input:not([type=hidden]):focus { outline: none; background: #fff; border-bottom-color: var(--cor);
  box-shadow: 0 1px 0 0 var(--cor); }
.atu-secao input::placeholder { color: var(--desab-tx); }
.atu-secao label:not(.sr) { display: block; font-size: .875rem; font-weight: 400; color: var(--texto); margin: 0 0 .2rem; }
.atu-secao .botao, .pagina table.tabela-atu .atu-form .botao { min-height: 1.875rem; height: 1.875rem; padding: 0 .6rem;
  font-size: .875rem; }
.pagina table.tabela-atu .atu-form input { height: 1.875rem; }
/* endereço em grade de 6 colunas, compacta: Logradouro | Nº / Complemento | Bairro | CEP / Cidade | UF */
.atu-endereco { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem 1rem; max-width: 48rem; }
.atu-endereco .campo input { width: 100%; }
.atu-endereco .campo-logradouro { grid-column: span 5; } .atu-endereco .campo-numero { grid-column: span 1; }
.atu-endereco .campo-complemento, .atu-endereco .campo-bairro, .atu-endereco .campo-cep { grid-column: span 2; }
.atu-endereco .campo-cidade { grid-column: span 5; } .atu-endereco .campo-uf { grid-column: span 1; }
.atu-endereco .atu-acoes { grid-column: 1 / -1; }
.atu-secao .incluir-canal { display: flex; gap: .5rem; align-items: center; }
.atu-secao .incluir-canal input { flex: 1; min-width: 0; }
@media (max-width: 40rem) { .atu-endereco { grid-template-columns: 1fr; } .atu-endereco .campo { grid-column: auto !important; } }
/* endereço na FAIXA INTEIRA em 2 linhas (17/10/2026, "utilize a faixa inteira e apenas duas linhas"): grade de 12
   colunas -- Logradouro 5 | Nº 1 | Complemento 3 | Bairro 3 / CEP 2 | Cidade 5 | UF 1 | botão no fim da 2ª linha */
.atu-endereco { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: none; align-items: end; }
.atu-endereco .campo-logradouro { grid-column: span 5; } .atu-endereco .campo-numero { grid-column: span 1; }
.atu-endereco .campo-complemento, .atu-endereco .campo-bairro { grid-column: span 3; }
.atu-endereco .campo-cep { grid-column: span 2; } .atu-endereco .campo-cidade { grid-column: span 5; }
.atu-endereco .campo-uf { grid-column: span 1; }
.atu-endereco .atu-acoes { grid-column: span 4; margin: 0; justify-self: end; }