/* =====================================================================
   sistema.css  ·  Camada das telas internas do Execfisc

   Complementa design-system.css, que continua sendo a base de tokens,
   cores e tipografia. Aqui entram apenas as pecas que so existem dentro
   do sistema autenticado: topo com menu, tabelas densas, selo de
   procedencia e formulario de acesso.

   Duas regras do design system continuam valendo sem excecao:
     - nenhum texto passa de 1.5rem (--fs-h1 e o teto)
     - nunca escrever font-size, cor ou espacamento cru, sempre o token
   ===================================================================== */

/* --- Fundo -----------------------------------------------------------
   A home usa o gradiente azul cheio. A tela de trabalho usa superficie
   clara: quem passa o dia lendo tabela precisa de contraste alto e de
   pouca cor competindo com o dado. */
body.tem-sistema {
	background: var(--surface-alt);
	color: var(--ink);
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

/* --- Topo ------------------------------------------------------------ */
.sis-topo {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	/* Sem recuo a esquerda: a aba da marca encosta no canto, igual a da
	   landing. O recuo continua a direita, onde ficam menu e usuario. */
	padding: 0 var(--sp-6) 0 0;
	background: var(--carmo-900);
	box-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: 20;
	flex-wrap: wrap;
}

/* A MARCA OCUPA A MESMA POSICAO DA LANDING
   La ela e uma aba branca colada no canto superior esquerdo, arredondada
   so embaixo e a direita (.app-header__brand). Aqui era uma caixa
   recuada, arredondada nos dois cantos de baixo: quem passava da home
   para o sistema via o logo pular de lugar.
   A altura continua menor, porque isto e barra de trabalho e nao capa. */
/* A MARCA TEM O MESMO TAMANHO DA LANDING
 *
 * O desenho ja era o mesmo (aba branca colada no canto, arredondada so
 * embaixo e a direita), mas o logo vinha a 34px contra os 84px da home.
 * Quem entrava no sistema via a marca da Prefeitura encolher a um terco,
 * e o efeito nao e "menor": e o de ter saido do site oficial para outro
 * lugar.
 *
 * O logo passa a `--logo-h`, o mesmo token da landing, com o mesmo
 * recuo. A barra em volta continua enxuta: quem da altura a ela e a aba
 * da marca, e o resto (menu e usuario) nao ganhou espaco nenhum. */
.sis-topo__marca {
	display: flex;
	align-items: center;
	background: var(--surface);
	border-radius: 0 0 var(--r-xl) 0;
	padding: var(--sp-2) var(--sp-6);
	margin-right: var(--sp-4);
	flex: 0 0 auto;
	box-shadow: var(--shadow-md);

	/* A MARCA TRANSBORDA A BARRA, EM VEZ DE ESTICA-LA
	 *
	 * Logo grande e barra baixa sao pedidos que se contradizem enquanto a
	 * marca estiver empurrando a altura: uma aba de 92px obriga a barra a
	 * ter 92px, e ai a faixa azul come a tela em toda pagina.
	 *
	 * A saida e a mesma da landing, onde a aba branca desce por baixo do
	 * cabecalho. Aqui ela e feita com margem negativa embaixo: o elemento
	 * continua NO FLUXO, entao segue reservando a sua largura e quebrando
	 * junto no telefone, e so a altura dele deixa de contar para a barra.
	 *
	 * O que sobra para baixo passa por cima do conteudo, e nao o empurra.
	 * Por isso a barra tem `z-index` e a aba tem sombra: ela precisa
	 * parecer que esta na frente, porque esta. */
	align-self: flex-start;
	margin-bottom: calc(var(--logo-h) * -0.42);
	position: relative;
	z-index: 1;
}
.sis-topo__marca img { height: var(--logo-h); width: auto; display: block; }

.sis-menu {
	display: flex;
	gap: var(--sp-1);
	flex: 1 1 auto;
	flex-wrap: wrap;
	padding: var(--sp-2) 0;
}

.sis-menu__item {
	color: #fff;
	opacity: .82;
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	white-space: nowrap;
}
.sis-menu__item:hover { opacity: 1; background: rgba(255, 255, 255, .10); }

/* O item atual e marcado por fundo e por peso, nunca so por cor: quem
   nao distingue matiz continua enxergando onde esta. */
.sis-menu__item--atual {
	opacity: 1;
	background: rgba(255, 255, 255, .16);
	font-weight: var(--fw-semi);
}

/* --- Grupos do menu -------------------------------------------------- */
/* Feito com <details>, e nao com JavaScript. Abre por clique e por teclado,
   funciona com leitor de tela e continua funcionando com script desligado,
   que e o que se espera de navegacao em sistema de governo. */

.sis-grupo { position: relative; }

.sis-grupo__titulo {
	color: #fff;
	opacity: .82;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.sis-grupo__titulo::-webkit-details-marker { display: none; }
.sis-grupo__titulo::after {
	content: "";
	display: inline-block;
	width: .4em;
	height: .4em;
	margin-left: .5em;
	vertical-align: .12em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.sis-grupo[open] > .sis-grupo__titulo::after { transform: rotate(-135deg); vertical-align: .3em; }
.sis-grupo__titulo:hover { opacity: 1; background: rgba(255, 255, 255, .10); }
.sis-grupo__titulo:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
	opacity: 1;
}
.sis-grupo--atual > .sis-grupo__titulo {
	opacity: 1;
	background: rgba(255, 255, 255, .16);
	font-weight: var(--fw-semi);
}

.sis-grupo__painel {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 0;
	z-index: 30;
	min-width: 22rem;
	max-width: min(30rem, calc(100vw - var(--sp-6) * 2));
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
	padding: var(--sp-3);
}

.sis-grupo__nota {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	margin: 0 0 var(--sp-2);
	padding: 0 var(--sp-2);
	line-height: 1.4;
}

.sis-grupo__item {
	display: block;
	padding: var(--sp-2);
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--ink);
}
.sis-grupo__item:hover { background: var(--surface-alt); }
.sis-grupo__item--atual { background: var(--surface-alt); }
.sis-grupo__item--atual .sis-grupo__rotulo { font-weight: var(--fw-semi); }

.sis-grupo__rotulo {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}
/* O RESUMO NO MENU PARA EM DUAS LINHAS
 *
 * Do responsavel, em 09/09/2026: "nos menus, diminuir as descricoes, esta
 * deixando o menu muito grande, reduzir para apenas max 2 linhas".
 *
 * O mesmo `resumo` alimenta dois lugares: este menu e a tabela de `/telas.php`.
 * Na tabela o texto inteiro serve, e no menu ele empurra o item seguinte para
 * fora da tela: eram 36 itens, com mediana de 100 caracteres e um de 194.
 *
 * ENCURTAR O TEXTO NAO BASTA, E POR ISSO A TRAVA FICA AQUI
 *
 * Os treze maiores foram reescritos no mesmo commit, e isso resolve HOJE. O
 * proximo resumo que alguem escrever nao passa por conferencia nenhuma de
 * tamanho, e o menu voltaria a crescer sem ninguem perceber. Com o corte no
 * CSS, ele nao volta.
 *
 * `-webkit-line-clamp` e o unico jeito de cortar por LINHA, e nao por altura
 * fixa: altura em `rem` quebraria quando alguem aumentasse a fonte do
 * navegador. Ele e suportado em todos os navegadores atuais, inclusive Firefox,
 * apesar do prefixo no nome. Onde nao for, o `max-height` de reserva segura. */
.sis-grupo__resumo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	max-height: calc(1.35em * 2);
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	line-height: 1.35;
	margin-top: 1px;
}
/* --- A gaveta, o botao Menu e os atalhos, no computador ------------------
 *
 * No computador a gaveta nao existe para o layout: `display: contents` poe o
 * menu e o usuario direto na barra, como eram antes dela. O botao Menu e o
 * Sair da gaveta nao aparecem. */
.sis-gaveta { display: contents; }
.sis-topo__menu,
.sis-gaveta__usuario { display: none; }

/* O botao Menu, com as tres linhas que viram um X quando a gaveta abre. A
   altura e a do Sair, para a barra ter um ritmo so. */
.sis-topo__menu {
	align-items: center;
	gap: var(--sp-2);
	min-height: 2.25rem;
	padding: 0 var(--sp-3);
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1;
	cursor: pointer;
}
.sis-topo__menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sis-topo__menu-icone,
.sis-topo__menu-icone::before,
.sis-topo__menu-icone::after {
	display: block;
	width: 1rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform .15s ease, background-color .15s ease;
}
.sis-topo__menu-icone { position: relative; }
.sis-topo__menu-icone::before,
.sis-topo__menu-icone::after { content: ""; position: absolute; left: 0; }
.sis-topo__menu-icone::before { top: -5px; }
.sis-topo__menu-icone::after  { top: 5px; }
.sis-menu-aberto .sis-topo__menu-icone { background: transparent; }
.sis-menu-aberto .sis-topo__menu-icone::before { transform: translateY(5px) rotate(45deg); }
.sis-menu-aberto .sis-topo__menu-icone::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   O menu no telefone: uma barra fina e uma gaveta

   Do responsavel, em 11/09/2026: "o menu precisa ser otimizado para
   mobile, hoje nao esta". Medido a 390 px antes da mudanca: o cabecalho
   tinha 233 px de 844, em quatro linhas (marca, duas de grupos quebrando
   onde calhava, e nome, perfil, "?", escudo e Sair), e o grupo aberto
   cobria o conteudo e cortava os ultimos itens.

   Agora a barra e uma linha so: a marca, o "?", o escudo e o botao Menu. O
   menu, o nome, o perfil e o Sair moram na gaveta que o botao abre, logo
   abaixo da barra, com os grupos em sanfona. Como a barra ficou fina, ela
   volta a grudar no topo: o menu fica a um toque em qualquer ponto da tela.

   A gaveta so se esconde com `tem-js`, que o <head> marca: sem script ela
   fica aberta, e o menu continua alcancavel, que e o que ja era antes.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
	.sis-topo {
		gap: 0 var(--sp-2);
		padding: 0 var(--sp-3) 0 0;
	}
	.sis-topo__marca {
		padding: var(--sp-1) var(--sp-4);
		margin: 0 var(--sp-2) 0 0;
		align-self: stretch;
	}
	.sis-topo__marca img { height: 2.625rem; }

	/* Na barra ficam o "?", o escudo e o botao. O Sair mora na gaveta, com o
	   nome, o perfil e o Manual, que no computador ficam na faixa da conta.
	   `.sis-topo` na frente porque `.sis-topo__usuario` e declarado mais
	   abaixo neste arquivo, e ganharia pela ordem. */
	.sis-topo .sis-topo__usuario { margin-left: auto; gap: var(--sp-2); }
	.sis-topo__usuario > .sis-usuario__sair { display: none; }
	html.tem-js .sis-topo__menu { display: inline-flex; }

	.sis-gaveta {
		display: block;
		order: 3;
		flex: 0 0 100%;
		max-height: calc(100dvh - 3.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 0 var(--sp-3) var(--sp-3);
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	html.tem-js .sis-gaveta { display: none; }
	html.tem-js.sis-menu-aberto .sis-gaveta { display: block; }

	/* Uma linha por item, com altura de dedo, e o grupo abre embaixo dele. */
	.sis-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 2px;
		padding: var(--sp-2) 0;
	}
	.sis-menu__item,
	.sis-grupo__titulo {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0 var(--sp-3);
		font-size: var(--fs-body);
		opacity: 1;
	}
	.sis-grupo { position: static; }
	.sis-grupo__titulo::after { margin-left: auto; }
	.sis-grupo__painel {
		position: static;
		min-width: 0;
		max-width: none;
		margin: var(--sp-1) 0 var(--sp-2);
		box-shadow: none;
	}
	.sis-grupo__item { padding: var(--sp-2) var(--sp-3); }

	.sis-gaveta__usuario {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-2) var(--sp-3);
		padding: var(--sp-3);
		border-top: 1px solid rgba(255, 255, 255, .14);
		color: #fff;
		font-size: var(--fs-sm);
	}
	.sis-gaveta__usuario .sis-usuario__nome { flex: 1 1 100%; }
	.sis-gaveta__usuario .sis-usuario__manual { margin-left: auto; }
}

.sis-topo__usuario {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: #fff;
	font-size: var(--fs-xs);
	flex: 0 0 auto;
	padding: var(--sp-2) 0;
	/* Ancora do painel de ajuda, que abre alinhado a direita desta faixa. */
	position: relative;
}
.sis-usuario__nome  { font-weight: var(--fw-semi); }
.sis-usuario__papel { opacity: .75; }
.sis-usuario__perfil select {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--r-sm);
	padding: 2px var(--sp-2);
	font-size: var(--fs-xs);
}
.sis-usuario__perfil select option { color: var(--ink); }
/* SAIR E BOTAO, E NAO UM LINK SUBLINHADO
 *
 * Ele era um link com sublinhado, do lado do nome e do perfil, os tres em
 * texto branco pequeno: nada dizia qual dos tres era clicavel, e sair da
 * sessao e a unica acao daquele canto.
 *
 * Continua sendo `<a>` no HTML, porque e navegacao de verdade e precisa
 * funcionar com "abrir em nova aba" e com o teclado. O que muda e o
 * desenho: contorno e area de toque de botao.
 *
 * Contorno em vez de preenchido de proposito. Preenchido, ele competiria
 * com o botao que grava dentro da tela, que e a acao que importa. */
/* O Manual (11/09/2026) usa o mesmo desenho: e da conta, como o Sair. */
.sis-usuario__manual,
.sis-usuario__sair {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: 1;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .08);
	white-space: nowrap;
}
.sis-usuario__manual:hover,
.sis-usuario__sair:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .6);
}
.sis-usuario__manual:focus-visible,
.sis-usuario__sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- O aviso de acesso total, na barra --------------------------------
 *
 * POR QUE ELE SAIU DO CORPO DA PAGINA
 *
 * Ele era uma faixa de quatro linhas logo abaixo do titulo, repetida em
 * TODA tela. O texto e o mesmo sempre, entao depois da terceira tela ele
 * deixa de ser lido e passa a ser so altura perdida, empurrando para
 * baixo justamente o conteudo que se veio ver.
 *
 * POR QUE ELE NAO SUMIU DE VEZ
 *
 * Porque o perfil de acesso total atravessa a separacao entre
 * Procuradoria e Fazenda, e isso nao pode ser silencioso. A marca fica,
 * visivel em toda tela; o que virou clique foi a EXPLICACAO, que so
 * precisa aparecer quando alguem quer entender o que a marca quer dizer.
 *
 * POR QUE E UM ELEMENTO SO, E NAO A MARCA MAIS UM `?` AO LADO
 *
 * Dois elementos vizinhos dizendo a mesma coisa e ruido: o `?` seria uma
 * segunda coisa a interpretar sem trazer informacao nova. Aqui a propria
 * marca abre. Ela mantem a cor de alerta, ganha o `?` como sinal de que
 * ha algo atras dela, e continua legivel sem nenhum clique.
 *
 * `<details>` de novo, e nao script: abre por clique e por teclado, e um
 * botao de verdade para o leitor de tela e continua funcionando com
 * JavaScript desligado. O `name` e o mesmo dos grupos do menu, entao
 * abrir este fecha um menu aberto e vice-versa: nunca dois paineis
 * sobrepostos disputando o mesmo canto.
 * --------------------------------------------------------------------- */
.sis-ajuda { position: relative; flex: 0 0 auto; }

/* O BOTAO NEUTRO: "sobre esta tela"
 *
 * Mesma mecanica da marca de acesso total, e pela mesma razao. As telas
 * carregavam tres e quatro faixas de texto explicativo empilhadas antes
 * do conteudo, sempre as mesmas: em Certificados eram duas, em Prazos
 * eram tres, e nenhuma delas mudava de uma visita para a outra.
 *
 * Texto que nao muda nao precisa estar aberto. O que muda, e o que exige
 * acao, continua no corpo da pagina: alerta de certificado vencendo, erro
 * de formulario e contagem de pendencia nao entram aqui.
 *
 * Redondo e do tamanho de `Sair`, para que a barra tenha um ritmo so. */
.sis-ajuda__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1;
	cursor: pointer;
	user-select: none;
	list-style: none;
}
.sis-ajuda__botao::-webkit-details-marker { display: none; }
.sis-ajuda__botao::after { content: "?"; }
.sis-ajuda__botao:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .6);
}
.sis-ajuda__botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* A MARCA DO ACESSO TOTAL E UMA BOLINHA COM O ESCUDO
 *
 * Ate 09/09/2026 ela era a etiqueta "ACESSO TOTAL" com um `?` ao lado, em
 * toda tela, ao lado do nome. Decisao do responsavel: so o escudo.
 *
 * A cor de alerta fica, e ela e que carrega o aviso. O texto virou o rotulo
 * acessivel e o `title`: quem passa o mouse le, quem usa leitor de tela ouve,
 * e quem so olha ve a cor que nao e a do resto da barra. */
.sis-ajuda__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border-radius: 50%;
	background: #ffd9a0;
	color: #6b3b00;
	border: 1px solid #e8b96b;
	cursor: pointer;
	user-select: none;
	list-style: none;
}
.sis-ajuda__marca::-webkit-details-marker { display: none; }
.sis-ajuda__marca .ico { width: 1rem; height: 1rem; }
.sis-ajuda__marca:hover { background: #ffe6c2; }
.sis-ajuda__marca:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sis-ajuda__painel {
	position: absolute;
	top: calc(100% + var(--sp-2));
	/* Ancorado a direita porque este e o canto direito da barra: aberto
	   pela esquerda, o painel sairia da tela. */
	right: 0;
	z-index: 30;
	width: 26rem;
	max-width: calc(100vw - var(--sp-6) * 2);
	/* Explicacao de tela pode ter quatro blocos. Sem teto, o painel passa
	   da dobra e os ultimos ficam inalcancaveis. */
	max-height: 70dvh;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
	padding: var(--sp-4);
	color: var(--ink);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--fw-normal);
}
.sis-ajuda__painel p { margin: 0 0 var(--sp-3); }
.sis-ajuda__painel > :last-child { margin-bottom: 0; }
.sis-ajuda__titulo { font-weight: var(--fw-semi); }
.sis-ajuda__bloco { margin: 0 0 var(--sp-4); }
.sis-ajuda__bloco:last-child { margin-bottom: 0; }
.sis-ajuda__bloco p { margin: 0; }
.sis-ajuda__bloco .sis-ajuda__titulo { margin-bottom: var(--sp-1); }

/* A variante do acesso total mantem a cor de alerta do que ela substituiu. */
.sis-ajuda__painel--admin {
	background: #fff6e8;
	border-color: #e8b96b;
	color: #6b3b00;
}
.sis-ajuda__painel--admin code {
	background: rgba(107, 59, 0, .10);
	padding: 0 4px;
	border-radius: 3px;
}

/* --- Corpo ----------------------------------------------------------- */
/* O recuo de cima soma o que a aba da marca transborda da barra. Sem
   isso a aba cairia por cima do titulo da tela na primeira dobra, que e
   onde ela mais atrapalha. */
.sis-corpo {
	flex: 1 1 auto;
	padding: calc(var(--sp-6) + var(--logo-h) * 0.42) var(--sp-6) var(--sp-8);
}
/* `--container-largo`, e nao `--container`: a razao esta no comentario do
   token, em design-system.css. Em resumo, a landing e leitura e o sistema
   e tabela, e os dois nao cabem na mesma largura. */
.sis-corpo__interno { max-width: var(--container-largo); margin: 0 auto; }

/* A FAIXA DA CONTA OCUPA O CANTO DIREITO DA LACUNA DA MARCA
 *
 * Do responsavel, em 11/09/2026. O recuo de cima do corpo existia so para
 * a aba da marca, que desce por baixo da barra, e o lado direito dessa
 * altura ficava vazio. O nome, o perfil e o Manual descem da barra para
 * ali, e o recuo encolhe: a faixa passa a ser quem reserva a altura da
 * aba, com `min-height`, e o titulo fica onde estava.
 *
 * So no computador. No celular a aba nao transborda, e os tres moram na
 * gaveta, como antes: a faixa nasce escondida e o recuo so muda a partir
 * de 721 px, o mesmo corte da gaveta. O modificador `--conta` existe
 * porque `/validar` usa `.sis-corpo` sem faixa nenhuma, e perderia o recuo
 * que o protege da aba. */
.sis-conta { display: none; }
@media (min-width: 721px) {
	.sis-corpo--conta { padding-top: var(--sp-2); }
	.sis-conta {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: var(--sp-2) var(--sp-3);
		min-height: calc(var(--logo-h) * 0.42);
		margin: 0 0 var(--sp-4);
		font-size: var(--fs-sm);
		color: var(--ink);
	}
}
/* Na faixa o fundo e claro, e o seletor da barra era branco sobre azul. A
   altura e a do botao ao lado, para os dois alinharem. */
.sis-conta .sis-usuario__papel { color: var(--ink-muted); opacity: 1; }
.sis-conta .sis-usuario__perfil select {
	min-height: var(--altura-botao);
	padding: 0 var(--sp-3);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	font-size: var(--fs-sm);
	font-family: inherit;
	cursor: pointer;
}
.sis-conta .sis-usuario__perfil select:hover { border-color: var(--carmo-500); }
.sis-conta .sis-usuario__perfil select:focus-visible { outline: 2px solid var(--carmo-700); outline-offset: 1px; }

.sis-titulo {
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	color: var(--carmo-900);
	margin: 0 0 var(--sp-1);
}
.sis-subtitulo {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin: 0 0 var(--sp-6);
}

.sis-rodape {
	flex: 0 0 auto;
	padding: var(--sp-4) var(--sp-6);
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	border-top: 1px solid var(--line);
	background: var(--surface);
}
.sis-rodape__versao {
	margin-left: var(--sp-3);
	padding-left: var(--sp-3);
	border-left: 1px solid var(--line);
}

/* --- Selo de procedencia ---------------------------------------------
   O componente central do sistema. Todo numero, nome e documento aparece
   com a fonte de onde veio, porque metade do dado vem de bases antigas
   que servem para enriquecer, nao para decidir. Numero sem selo mente por
   omissao. */
.selo {
	display: inline-block;
	font-size: var(--fs-xs);
	line-height: 1.4;
	padding: 1px var(--sp-2);
	border-radius: 999px;
	background: #eef4f9;
	color: var(--carmo-700);
	border: 1px solid #d8e6f1;
	white-space: nowrap;
	vertical-align: middle;
	margin-left: var(--sp-2);
	cursor: help;
}

/* Dado historico: veio de base antiga e NAO e a posicao atual do debito.
   O ambar nao decora, avisa. */
.selo--historico {
	background: #fdf5e6;
	color: #8a5a00;
	border-color: #f0dfb8;
}

.selo--sem {
	background: #fbecec;
	color: #9b2c2c;
	border-color: #f3d2d2;
}

/* Ausencia e ausencia, nunca zero. */
.sem-dado {
	color: var(--ink-muted);
	font-style: italic;
	font-size: var(--fs-sm);
}

/* --- Tabela densa ---------------------------------------------------- */
.sis-tabela-caixa {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow-x: auto;          /* conteudo largo rola aqui, nunca a pagina */
}
.sis-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sis-tabela th {
	text-align: left;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	font-weight: var(--fw-semi);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--line);
	background: var(--surface-alt);
	white-space: nowrap;
}
.sis-tabela td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.sis-tabela tbody tr:hover { background: #f8fbfd; }

.sis-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A linha que abre um bloco dentro da tabela (o acervo de modelos, por tipo de
   pedido, desde 11/09/2026). Ela e `th`, e por isso herdaria o jeito do
   cabecalho das colunas, em maiusculas pequenas e cinza: com as duas iguais,
   o titulo do bloco se lia como mais uma coluna. Aqui ela desfaz isso, em letra
   normal, na cor do texto e com o fundo da aba ativa. */
.sis-tabela tr.sis-tabela__grupo th {
	font-size: var(--fs-sm);
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
	background: var(--carmo-100);
	white-space: normal;
}
.sis-tabela tr.sis-tabela__grupo:hover { background: transparent; }
.sis-tabela__grupo-nota { font-weight: var(--fw-normal); color: var(--ink-muted); margin-right: var(--sp-2); }
/* O acervo de modelos sao duas tabelas, uma por familia, com as mesmas colunas.
   `fixed` faz as duas obedecerem ao `colgroup` e alinharem; o piso de largura
   deixa a caixa rolar de lado no celular, em vez de espremer as colunas. */
.sis-tabela--acervo { table-layout: fixed; min-width: 56rem; }
.sis-tabela--acervo td { overflow-wrap: anywhere; }
/* Com a largura fixa, botao que nao cabe VAZA da celula em vez de alargar a
   coluna: medido em 11/09/2026, o "desativar" passava da borda da tabela. Aqui
   ele desce para a linha de baixo. */
.sis-tabela--acervo .sis-acoes--linha { flex-wrap: wrap; }

/* --- Cartoes de numero ----------------------------------------------- */
.sis-cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}
.sis-cartao {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}
.sis-cartao__rotulo {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	margin: 0 0 var(--sp-1);
}
.sis-cartao__valor {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semi);
	color: var(--carmo-900);
	line-height: var(--lh-tight);
	font-variant-numeric: tabular-nums;
}
.sis-cartao__nota { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-1); }

/* --- Cartao que filtra ------------------------------------------------
 *
 * Na Triagem os quatro numeros grandes do topo eram exatamente as quatro
 * opcoes do `select` logo abaixo: a mesma coisa dita duas vezes, e quem
 * olhava "Prazo vencido sem ato" precisava descer e reencontrar ali a
 * palavra que acabou de ler. O numero que se esta olhando E o filtro.
 *
 * O cartao vira `<a>`, e a aparencia diz que ele e clicavel: cor de link
 * no rotulo nao serve, porque o rotulo e o texto pequeno e o que o olho
 * pega e o numero. O que diz e a borda mudando no `hover` e o cursor.
 *
 * `--aberto` marca o filtro em vigor. Ele nao e so enfeite: e por ele que
 * se DESFAZ o filtro, porque o mesmo cartao volta a levar para "todas". */
.sis-cartao--filtro {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.sis-cartao--filtro:hover {
	border-color: var(--carmo-500);
	background: var(--surface-alt);
}
.sis-cartao--filtro:focus-visible {
	outline: 2px solid var(--carmo-700);
	outline-offset: 2px;
}
.sis-cartao--aberto {
	border-color: var(--carmo-700);
	box-shadow: inset 0 0 0 1px var(--carmo-700);
}
.sis-cartao--aberto .sis-cartao__nota { color: var(--carmo-700); }



@media (max-width: 640px) {
	/* A barra do telefone mora no bloco "O menu no telefone", no alto. */
	.sis-corpo { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
}

/* A MESMA REGRA DE `design-system.css`, E ELA JA ESTAVA CERTA AQUI
 *
 * As duas conviveram divergentes ate 09/09/2026: la a duracao era encurtada
 * para 0,01 ms, o que para uma animacao `infinite` significa cem mil voltas por
 * segundo. Aqui sempre foi `animation: none`.
 *
 * Nao se encontraram porque a unica animacao infinita do sistema, as
 * engrenagens da landing, mora na unica pagina que nao carrega este arquivo.
 * Duas versoes da mesma regra em dois arquivos que quase nunca se cruzam e o
 * jeito mais silencioso de uma delas envelhecer. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* --- Acesso total -----------------------------------------------------
   O ADMIN atravessa a separacao entre Procuradoria e Fazenda. Isso e
   legitimo e as vezes necessario, mas nao pode ser silencioso: enquanto o
   perfil ativo tiver acesso total, a marca fica no topo e a faixa fica
   abaixo do titulo, em toda tela. */
.sis-admin {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px var(--sp-2);
	border-radius: var(--r-sm);
	background: #ffd9a0;
	color: #6b3b00;
	border: 1px solid #e8b96b;
	cursor: help;
}

.sis-aviso--admin {
	border-color: #e8b96b;
	background: #fff6e8;
	color: #6b3b00;
}
.sis-aviso--admin code {
	background: rgba(107, 59, 0, .10);
	padding: 0 4px;
	border-radius: 3px;
}

/* --- A peca formatada ------------------------------------------------
 * O que vai ao juizo nao pode parecer bloco de texto de bloco de notas.
 * Serifa, medida de linha confortavel e recuo de primeira linha, que e
 * como peca processual se apresenta no papel.
 *
 * A largura tem teto em `ch`, e nao em pixel, porque o que cansa a
 * leitura e o numero de CARACTERES por linha, e nao a largura fisica. */
.peca {
	/* PALATINO 12, DO MODELO PADRAO DO MUNICIPIO
	 *
	 * Definido pelo responsavel em 08/09/2026, junto com o papel
	 * timbrado: "FONTE PALATINO 12, NEGRITO EM DESTAQUES".
	 *
	 * A pilha de reserva importa mais que de costume, porque a peca e
	 * impressa pelo Chrome do servidor e lida no navegador de quem
	 * revisa, e nem toda maquina tem a mesma Palatino. Os nomes cobrem
	 * Windows (Palatino Linotype), macOS (Palatino) e Linux (URW
	 * Palladio), e a reserva final continua serifada: peca em fonte sem
	 * serifa nao parece peca.
	 *
	 * 12pt em vez de 1rem, porque o alvo e o papel. A tela mostra um
	 * pouco maior, e e o mesmo tamanho que sai impresso. */
	font-family: "Palatino Linotype", Palatino, "Palatino LT STD",
	             "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
	font-size: 12pt;
	line-height: 1.7;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-8) var(--sp-8);
	/* SEM TETO DE LARGURA
	 *
	 * Havia `max-width: 78ch` aqui, pela regra de que texto longo cansa
	 * acima de uns 80 caracteres por linha. A regra e boa para artigo, e
	 * nao serve aqui: a peca e lida para CONFERIR contra o papel, e o
	 * papel tem a largura que tem. Teto na tela fazia a quebra de linha
	 * da conferencia nao bater com a da folha.
	 *
	 * O responsavel registrou em 08/09/2026 que os `max-width` espalhados
	 * pelo sistema atrapalham, e que serao revistos em conjunto. Este sai
	 * agora porque e o que ele estava olhando. */
	text-align: justify;
	hyphens: auto;
}
.peca__paragrafo { margin: 0 0 var(--sp-4); text-indent: 2.5em; }
/* O enderecamento e a assinatura nao levam recuo: eles nao sao paragrafo
   de texto corrido, e o recuo os deixaria tortos. */
.peca__paragrafo:first-child,
.peca__titulo + .peca__paragrafo { text-indent: 0; }
.peca__titulo {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: var(--sp-6) 0 var(--sp-3);
	text-align: left;
}
.peca__lista { margin: 0 0 var(--sp-4) var(--sp-6); padding: 0; }
.peca__lista li { margin-bottom: var(--sp-2); text-align: justify; }
.peca strong { font-weight: 700; }

/* --- A tabela do extrato --------------------------------------------
 * Ela nasceu para os anexos: extrato de execucoes fiscais, de divida
 * ativa, de remessa. Extrato e uma conta, e conta se confere pela coluna.
 *
 * `text-align: left` explicito porque `.peca` justifica tudo, e texto
 * justificado dentro de celula estreita abre buracos entre as palavras.
 *
 * As bordas sao so horizontais, no padrao de tabela de documento: grade
 * fechada em peca parece formulario, e o que vai aos autos e peca. */
.peca__tabela {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--sp-4);
	font-size: .92em;
	text-align: left;
}
.peca__tabela th,
.peca__tabela td {
	padding: .35em .6em;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	text-indent: 0;
}
.peca__tabela thead th {
	font-weight: 700;
	border-bottom: 2px solid var(--ink);
	white-space: nowrap;
}
/* O fecho e onde mora o total, e ele tem de saltar aos olhos: e o numero
   que a peca afirma no corpo e que o anexo existe para comprovar. */
.peca__tabela tfoot td {
	font-weight: 700;
	border-top: 2px solid var(--ink);
	border-bottom: none;
}
.peca__tabela-numero {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.peca { padding: var(--sp-4); text-align: left; hyphens: manual; }
	.peca__paragrafo { text-indent: 1.5em; }
	/* Tabela de extrato nao encolhe abaixo do que as colunas pedem: ela
	   rola dentro do proprio bloco, e a peca nao rola de lado. */
	.peca__tabela { font-size: .82em; }
}

/* --- Passos numerados ------------------------------------------------
 * Uma lista ordenada que se le como sequencia, e nao como itens soltos.
 *
 * O modal de emitir descreve o caminho do documento em cinco passos, e
 * sem o numero a leitura vira paragrafo corrido: o leitor perde onde
 * esta, e a ordem, que e a informacao principal, some.
 *
 * O contador e desenhado a mao, e nao pelo marcador do navegador, porque
 * o `reset` do design system zera `list-style` em toda lista. */
.sis-passos {
	counter-reset: passo;
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
}
.sis-passos li {
	counter-increment: passo;
	position: relative;
	/*  NAO EXISTE na escala, e token que nao existe zera a
	   propriedade em vez de deixa-la como estava: o numero ficava POR CIMA
	   da primeira palavra de cada passo. A escala vai de 1 a 6, depois 8.
	   E o mesmo defeito que ja custou treze declaracoes neste arquivo. */
	padding-left: var(--sp-8);
	margin-bottom: var(--sp-3);
	line-height: 1.6;
}
.sis-passos li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--carmo-900);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- A folha timbrada -------------------------------------------------
 * O que envolve a peca: marca, identidade do documento, codigo e rodape.
 * A `.peca` de dentro continua cuidando so do texto.
 *
 * Fundo branco e borda fina de proposito: isto imita papel, e papel com
 * sombra e gradiente parece apresentacao, e nao documento. */
.peca-folha {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-8);
	max-width: 60rem;
}
.peca-folha .peca {
	border: 0;
	border-radius: 0;
	padding: var(--sp-6) 0;
	background: none;
	max-width: none;
}
/* A FAIXA SANGRA ATE A BORDA, PORQUE NO PAPEL ELA SANGRA
 *
 * A faixa do modelo do Municipio vai de margem a margem, sem respiro dos
 * lados. Deixa-la dentro do `padding` da folha produziria uma tarja
 * flutuando no meio do branco, que e o contrario do que um papel
 * timbrado parece. As margens negativas a levam ate a borda. */
.peca-folha__faixa {
	margin: calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) 0;
}
.peca-folha__faixa img {
	display: block;
	width: 100%;
	height: auto;
}
.peca-folha__marca {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding-bottom: var(--sp-4);
	border-bottom: 2px solid var(--carmo-900);
}
.peca-folha__marca img { height: 64px; width: auto; }
.peca-folha__orgao {
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--carmo-900);
	/* Abaixo da faixa, e nao ao lado dela: quem identifica o Municipio e a
	   faixa; esta linha diz qual orgao dele assina. */
	text-align: center;
	font-weight: var(--fw-bold);
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: var(--sp-3) 0 var(--sp-2);
	border-bottom: 2px solid var(--carmo-900);
}
/* O PE DO DOCUMENTO, ONDE MORA A IDENTIDADE DELE
 *
 * Pedido do responsavel, em 09/09/2026: "as informacoes do documento serao
 * no rodape, em cima vamos manter a originalidade". Isto era
 * `.peca-folha__identidade` e ficava ANTES do texto, logo abaixo da faixa
 * oficial, competindo com ela e empurrando o enderecamento ao Juizo para
 * baixo.
 *
 * A esquerda o que se le e se digita: numero, hora, codigo de validacao.
 * A direita o QR, que e o mesmo endereco para quem aponta a camera. O
 * `align-items: flex-end` alinha o QR pela BASE do bloco, e nao pelo
 * topo: e na ultima linha, a do codigo, que os dois se correspondem. */
.peca-folha__pe {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sp-5);
	padding: var(--sp-4) 0 0;
	margin-top: var(--sp-5);
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
}
/* Ele encolhe se precisar, mas nao abaixo do que uma linha de codigo de
   validacao ocupa: quebrado no meio, o codigo deixa de ser digitavel. */
.peca-folha__pe-dados { flex: 1 1 22rem; min-width: 0; }
.peca-folha__rotulo {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
}
.peca-folha__nota {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	line-height: 1.5;
	margin-top: var(--sp-1);
}
/* O QR e o seu rotulo empilham, e o rotulo fica EMBAIXO.
 *
 * Com `text-align` apenas, o "aponte a camera" ficava ao lado do desenho,
 * porque `span` e inline e o SVG tambem. Em coluna, o rotulo cai sob o
 * QR, que e onde se le, e o bloco inteiro para de empurrar a largura do
 * pe. `flex: 0 0 auto` impede que ele encolha e amasse o simbolo. */
.peca-folha__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	flex: 0 0 auto;
	text-align: center;
}
.peca-folha__qr svg { display: block; }
.peca-folha__qr-vazio {
	border: 1px dashed var(--line);
	border-radius: var(--r-sm);
	padding: var(--sp-2) var(--sp-3);
	text-align: left;
}
.peca-folha__qr-vazio code { font-size: var(--fs-xs); border: 0; background: none; padding: 0; }

/* A tarja da previa e vermelha e larga: ela existe para impedir que um
   papel de previa seja levado aos autos como se fosse peca emitida. */
.peca-folha__previa {
	background: #fdf1f1;
	border: 1px solid #f3d2d2;
	color: #9b2c2c;
	border-radius: var(--r-sm);
	padding: var(--sp-3) var(--sp-4);
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}
.peca-folha__codigo { margin-top: var(--sp-3); }
.peca-folha__codigo code {
	font-size: var(--fs-sm);
	letter-spacing: .08em;
	border: 0;
	background: none;
	padding: 0;
	word-break: break-all;
}
.peca-folha__rodape {
	margin-top: var(--sp-6);
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--ink-muted);
	text-align: center;
}
/* A faixa do rodape traz o pino de endereco e o espaco ao lado vazio: no
   Word aquilo era caixa de texto, e caixa de texto nao viaja dentro da
   imagem. O contato entra por cima, ancorado nesse espaco. */
.peca-folha__faixa--rodape {
	position: relative;
	margin: 0 calc(var(--sp-8) * -1) calc(var(--sp-8) * -1);
}
.peca-folha__contato {
	position: absolute;
	left: 12%;
	right: 32%;
	top: 50%;
	transform: translateY(-50%);
	text-align: left;
	color: #fff;
	line-height: 1.5;
}
.peca-folha__contato strong { color: #fff; }

@media (max-width: 640px) {
	.peca-folha { padding: var(--sp-4); }
	.peca-folha__marca { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
	.peca-folha__qr { text-align: left; }
}

/* Na impressao, o que interessa e a folha. */
@media print {
	.sis-topo, .sis-conta, .sis-rodape, .sis-abas, .sis-abas-linha, .sis-filtros,
	.sis-forma__acoes, .botao-principal, .botao-acao { display: none !important; }
	.peca-folha { border: 0; padding: 0; max-width: none; }
	.sis-corpo { padding: 0; }
}

/* --- Botao de acao dentro de tabela -----------------------------------
 * As acoes do acervo eram `sis-link`: texto sublinhado, do tamanho do
 * texto ao redor. Numa coluna com quatro delas, nada dizia que eram
 * botoes, e uma dessas quatro desativa um modelo.
 *
 * Contorno em vez de preenchido, pela mesma razao do botao Sair: cheio,
 * competiria com o botao que grava dentro do formulario. */
/* A geometria e a do `.botao-principal`, decidida em 10/09/2026: mesma altura,
   mesma letra, mesmo recuo. O contorno, e nao o preenchimento, e o que o separa. */
.botao-acao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--altura-botao);
	padding: 0 var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	font-family: inherit;
	line-height: 1.2;
	color: var(--carmo-700);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.botao-acao:hover { background: var(--surface-alt); border-color: var(--carmo-500); }
.botao-acao:focus-visible { outline: 2px solid var(--carmo-700); outline-offset: 1px; }
/* A acao que desliga nao pode ter o mesmo peso da que constroi. */
.botao-acao--cuidado { color: #9b2c2c; }
.botao-acao--cuidado:hover { background: #fdf1f1; border-color: #f3d2d2; }


/* --- Editor da peca ---------------------------------------------------
 * A barra de formatacao e os marcadores ficam ao lado do campo, e nao
 * dentro dele: dentro, roubariam altura justamente de onde se escreve. */
/* TRES COLUNAS: ESCREVER, VER, E OS MARCADORES
 *
 * Pedido do responsavel, em 08/09/2026: o editor devia ser mais alto e
 * deixar ver o resultado enquanto se escreve. A previa entrou ao lado, e
 * nao abaixo: abaixo, ela sai da tela justamente quando o texto cresce, e
 * o texto cresce sempre.
 *
 * As areas sao nomeadas porque a ordem muda com a largura, e mudar ordem
 * por `grid-column` numerado e como se acerta a primeira vez e se erra na
 * segunda. */
.editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 15rem;
	grid-template-areas: "texto previa lado";
	gap: var(--sp-4);
}
.editor__campo  { grid-area: texto; }
.editor__previa { grid-area: previa; min-width: 0; }
.editor__lado   { grid-area: lado; }

/* O LADO A LADO SE SUSTENTA ATE 1250px, E O CORTE FOI MEDIDO
 *
 * Descontando a coluna de marcadores (15rem), os vaos e o recuo do
 * formulario, a 1250px sobram cerca de 460px para cada lado, que na fonte
 * da peca da uns 50 caracteres por linha: da para ler a estrutura, que e
 * o que se confere enquanto se escreve. Abaixo disso as duas colunas
 * viram tirinhas, e ai vale mais empilhar.
 *
 * O primeiro corte tinha ficado em 1500px, e a foto mostrou o problema:
 * num monitor de 1400 a previa caia para baixo do campo e sumia da tela,
 * justamente numa largura em que ela ainda cabia ao lado. */
@media (max-width: 1250px) {
	.editor {
		grid-template-columns: minmax(0, 1fr) 15rem;
		grid-template-areas: "texto lado" "previa previa";
	}
	/* Empilhados, os dois precisam caber quase juntos na tela: com a
	   altura cheia, ver a previa exigiria rolar uma tela inteira, e quem
	   rola uma tela inteira para conferir para de conferir. */
	.editor__campo,
	.editor__previa { height: 90vh; min-height: 36rem; }
}
@media (max-width: 1000px) {
	.editor {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "texto" "previa" "lado";
	}
}

/* A ALTURA VEM DA JANELA, E NAO DE UM NUMERO DE LINHAS
 *
 * O campo tinha `rows="24"`, que e altura fixa: sobrava tela embaixo num
 * monitor grande e faltava num notebook. Aqui ele ocupa o que a janela
 * tem, descontado o que fica em volta (barra, titulo, abas, os campos de
 * cima e o rodape do formulario). O piso existe para a janela baixa, onde
 * a conta daria um campo de tres linhas.
 *
 * A ALTURA E DA COLUNA, E NAO DO CAMPO
 *
 * As duas colunas sao o mesmo texto, e uma terminando trinta pixels acima
 * da outra faz o olho procurar de novo a cada paragrafo. Se a altura
 * fosse do campo e da folha, elas nunca alinhariam: acima do campo ha um
 * rotulo e a barra de formatacao, e acima da folha ha so um titulo.
 *
 * Entao a altura e das COLUNAS, e o campo e a folha crescem para ocupar o
 * que sobrar dentro de cada uma. O que estiver em volta pode mudar de
 * tamanho a vontade que o alinhamento se refaz sozinho.
 *
 * `min-height: 0` nos dois porque item de flex nao encolhe abaixo do
 * proprio conteudo por padrao: sem isso, texto longo empurraria a folha
 * para fora da coluna em vez de rolar dentro dela. */
.editor__campo,
.editor__previa {
	display: flex;
	flex-direction: column;
	/* O DOBRO DA ALTURA, A PEDIDO
	 *
	 * Pedido do responsavel, em 09/09/2026: "aumentar o dobro a altura dos
	 * editores". A altura era `100vh - 26rem`, que numa tela comum dava
	 * pouco mais de uma tela de texto, e peca de tres paginas nao cabe
	 * nisso: escrever exigia rolar o tempo todo, e conferir a estrutura
	 * exigia rolar de novo.
	 *
	 * Agora ela e o dobro da tela menos o mesmo desconto de cabecalho e
	 * formulario. Nao cabe na janela de proposito: quem escreve peca rola o
	 * texto, e o que nao pode e a caixa ser menor que o assunto.
	 *
	 * O `min-height` dobra junto, para telas baixas. */
	height: calc(200vh - 26rem);
	min-height: 48rem;
}
.editor__campo textarea,
.editor__papel { flex: 1 1 auto; min-height: 0; }

/* A coluna de marcadores nao acompanha a altura: ela tem o tamanho do que
   carrega, e esticada ate embaixo viraria uma faixa cinza vazia. */
.editor { align-items: stretch; }
.editor__lado { align-self: start; }

/* `resize` continua valendo, e agora ele muda a altura do campo dentro da
   coluna, e nao a da coluna. */
.editor__campo textarea { resize: vertical; }

/* O papel rola por dentro, e nao empurra a pagina: quem escreve fica com
   o campo e a previa parados no lugar. */
.editor__papel {
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
}
/* A `.peca` de dentro ja e a folha: aqui ela nao repete borda nem fundo,
   senao viram duas molduras. */
.editor__papel .peca {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
}

.editor__previa h4 {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	margin: 0 0 var(--sp-2);
}

/* "atualizando" vive dentro do titulo, e nao numa linha propria: linha
   que aparece e some a cada tecla faz a folha inteira pular meio
   centimetro, e ler texto que pula e pior que esperar. */
.editor__estado {
	font-weight: var(--fw-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--carmo-700);
	margin-left: var(--sp-2);
}

/* O MARCADOR PINTADO, E POR QUE ELE PRECISA APARECER
 *
 * No modelo, `{{devedor}}` ainda e um buraco: so o caso o preenche. Solto
 * no meio do paragrafo ele parece erro de digitacao, e quem revisa o
 * texto tenta corrigi-lo. Pintado, ele diz o que e, e mostra de relance
 * quantos ha e onde. */
.peca__marcador {
	background: #fdf3e0;
	border: 1px solid #f0dfb8;
	border-radius: var(--r-sm);
	padding: 0 3px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: .9em;
	color: #6b4700;
	white-space: nowrap;
}
/* --- O vidro por onde se assiste o robo --------------------------------

   A foto da tela do servidor chega com a largura da janela DELE, que nao
   e a de quem assiste. Entao ela se ajusta a caixa, com fundo escuro por
   tras: fundo claro faz a borda da imagem sumir na pagina, e quem olha
   nao sabe onde termina a foto e onde comeca o sistema.

   A altura e limitada porque a foto de um portal e alta, e sem teto ela
   empurraria o passo a passo para fora da tela, justamente o que se quer
   ler junto com a imagem. */
.rpa-vidro {
	margin-top: var(--sp-4);
	background: #1f2430;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-2);
	min-height: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.rpa-vidro img {
	display: block;
	max-width: 100%;
	max-height: 34rem;
	width: auto;
	border-radius: var(--r-sm);
}

.rpa-vidro__vazio {
	margin: 0;
	color: #c9cede;
	font-size: var(--fs-sm);
	text-align: center;
	padding: var(--sp-6) var(--sp-4);
}

/* O VIDRO COM O TECLADO NA MAO
 *
 * Quando alguem assume o teclado, o clique na foto vira clique no navegador
 * do servidor. Isso precisa SE VER: a mesma imagem, com o mesmo aspecto, e
 * um clique com consequencia do outro lado e um clique que nao faz nada sao
 * coisas diferentes demais para parecerem iguais.
 *
 * A moldura e o cursor sao o aviso, e o `title` da imagem diz o resto. */
.rpa-vidro--teclado {
	border-color: var(--carmo-500);
	box-shadow: 0 0 0 2px var(--carmo-100);
}

.rpa-vidro--teclado img { cursor: crosshair; }

/* A tira de abas do navegador do servidor. Ela rola na horizontal porque
   endereco de portal e longo, e quebrar a linha empurraria a foto para
   baixo a cada aba nova. */
.rpa-abas {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	padding-bottom: var(--sp-1);
	margin-top: var(--sp-4);
}

/* `text-overflow` nao corta texto solto dentro de `inline-flex`, que e o que
   `.botao-acao` e: quem corta o rotulo e o script, e aqui fica so o teto de
   largura, como segunda linha. */
.rpa-abas__item {
	flex: 0 0 auto;
	max-width: 18rem;
	overflow: hidden;
	white-space: nowrap;
}

.rpa-abas__item[aria-current="true"] {
	border-color: var(--carmo-500);
	background: var(--carmo-100);
}

/* A linha da execucao que esta sendo assistida, na lista das anteriores. */
.sis-atual > td { background: var(--carmo-100); }

@media (max-width: 900px) {
	.editor { grid-template-columns: 1fr; }
}
.editor textarea {
	font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
	font-size: var(--fs-sm);
	line-height: 1.6;
}
.editor__lado {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	max-height: 894px;
	overflow-y: auto;
}
.editor__lado h4 {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	margin: 0 0 var(--sp-2);
}
.editor__lado h4 + * { margin-top: 0; }
.editor__lado hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0 var(--sp-3); }

/* Cada marcador e um botao: clicar insere no ponto onde o cursor estava.
   Sem script ele continua sendo o texto do marcador, visivel para copiar
   a mao, que e como se fazia antes de existir o botao. */
.editor__marca {
	display: block;
	width: 100%;
	text-align: left;
	font-family: ui-monospace, Consolas, monospace;
	font-size: var(--fs-xs);
	padding: 3px var(--sp-2);
	margin-bottom: 2px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: none;
	color: var(--carmo-700);
	cursor: pointer;
}
.editor__marca:hover { background: var(--surface); border-color: var(--line); }
.editor__marca span { display: block; color: var(--ink-muted); font-family: var(--fonte); }

.editor__campo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
.editor__campo > label { margin-right: auto; }
.editor__campo > textarea,
.editor__campo > .campo__ajuda { width: 100%; }

.editor__barra { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }

/* --- Graficos ---------------------------------------------------------
 * SVG desenhado pelo proprio PHP. A cor sai dos tokens, e nao de valor
 * cravado, para que o grafico acompanhe o tema em vez de ser uma ilha.
 *
 * `viewBox` faz a escala: a largura e 100% e a altura acompanha, entao o
 * mesmo desenho serve para a tela larga e para o telefone sem duas
 * versoes. */
.grafico {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: var(--fonte);
}
.grafico__rotulo {
	font-size: 13px;
	fill: var(--ink);
}
.grafico__valor {
	font-size: 13px;
	font-weight: var(--fw-semi);
	fill: var(--ink);
}
.grafico__eixo-rotulo {
	font-size: 11px;
	fill: var(--ink-muted);
}
.grafico__eixo { stroke: var(--line); stroke-width: 1; }

/* O trilho mostra a escala inteira atras da barra: sem ele, uma barra
   pequena parece pequena sem que se veja em relacao a que. */
.grafico__trilho { fill: var(--surface-alt); }
.grafico__barra  { fill: var(--carmo-700); }
.grafico__barra--vazia { fill: var(--line); }

/* As fatias da barra repartida. Cinco tons, e nao cinco cores: matiz
   diferente sugeriria categorias sem relacao, e aqui elas sao partes do
   mesmo total. Quem nao distingue matiz continua vendo a diferenca. */
.grafico__fatia--0 { fill: var(--carmo-900); }
.grafico__fatia--1 { fill: var(--carmo-700); }
.grafico__fatia--2 { fill: var(--carmo-500); }
.grafico__fatia--3 { fill: #7aa8c9; }
.grafico__fatia--4 { fill: var(--carmo-100); }
.grafico__fatia-rotulo {
	font-size: 12px;
	font-weight: var(--fw-semi);
	fill: #fff;
}
.grafico__fatia--4 + .grafico__fatia-rotulo { fill: var(--ink); }

/* O desenho e a tabela lado a lado quando cabe, e um sobre o outro quando
   nao cabe. A tabela nao e enfeite: quem precisa do numero exato nao o
   tira de uma barra. */
.grafico-par {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--sp-5);
	align-items: start;
	margin-bottom: var(--sp-6);
}
@media (max-width: 900px) {
	.grafico-par { grid-template-columns: 1fr; }
}

.grafico-fonte {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	margin: var(--sp-2) 0 0;
	line-height: var(--lh-base);
}

/* --- Filtros ----------------------------------------------------------
   Grade que se acomoda sozinha. Nada de linha fixa: a barra de filtro
   cresce e diminui com a largura sem virar tres telas diferentes. */
/* FLEX, E NAO GRADE, E A RAZAO E O TETO DE CADA CAMPO
 *
 * A grade era `auto-fit` com `1fr`: com tres filtros numa tela larga os
 * tres esticavam ate uns 500px cada. Um `select` de meia tela com "Todos"
 * dentro nao parece campo, e num `input` de data o cursor fica a um palmo
 * do rotulo.
 *
 * Por um teto na coluna nao resolve: `minmax(11rem, 22rem)` mudaria a
 * CONTAGEM de colunas, porque o navegador conta pela medida maxima quando
 * ela e definida, e a barra que hoje mostra quatro filtros lado a lado
 * passaria a mostrar dois. Por o teto no item, mantendo a grade, deixaria
 * cada campo pequeno dentro de uma coluna grande, com um vao entre eles.
 *
 * No flex a sobra fica no FIM da linha, e nao entre os campos. Os filtros
 * crescem juntos ate o teto e param; a barra continua da largura da
 * tabela logo abaixo, que e o que faz as duas parecerem a mesma coisa.
 */
.sis-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: end;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
}
.sis-filtro { flex: 1 1 11rem; min-width: 0; max-width: 22rem; }

/* A busca pesa o dobro e chega mais longe, porque o que se digita nela e
   longo: nome de devedor, numero de processo, CPF. Ela era `span 2` na
   grade, e aqui e o mesmo dobro dito em flex. */
.sis-filtro--busca { flex: 2 1 20rem; max-width: 40rem; }
.sis-filtro label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	color: var(--ink-muted);
	margin-bottom: var(--sp-1);
}
.sis-filtro input,
.sis-filtro select {
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
}
.sis-filtro input:focus,
.sis-filtro select:focus {
	outline: 2px solid var(--carmo-500);
	outline-offset: 1px;
}
.sis-filtro--acoes { display: flex; gap: var(--sp-3); align-items: center; }
.sis-filtro--acoes .botao-principal { width: auto; }
.sis-filtro--acoes a { font-size: var(--fs-sm); color: var(--ink-muted); }

/* BOTAO VIZINHO NAO ENCOSTA NO OUTRO
 *
 * Onde os botoes estao dentro de um `flex` com `gap`, o espaco ja existe.
 * O caso que faltava e outro: dois FORMULARIOS irmaos, cada um com o seu
 * botao, um do lado do outro na mesma celula da tabela. Sao dois blocos
 * independentes, sem contêiner comum que possa dar `gap`, e por isso os
 * botoes ficavam colados, parecendo um controle unico partido ao meio.
 *
 * Colados, o risco nao e so visual: o dedo que erra por dois pixels
 * aciona o botao errado, e num deles a acao e "tirar da remessa".
 *
 * `+` alcanca so o irmao imediato, entao o primeiro da fila nao ganha
 * margem a esquerda e a linha continua alinhada com o resto da celula. */
form + form,
form + .botao-principal,
.botao-principal + .botao-principal,
.botao-principal + a { margin-left: var(--sp-2); }
/* Na linha de acoes do modal quem separa e o `gap`. Com a margem de cima somada,
   o Cancelar ficava 24 px longe do botao, e no celular, onde ele desce para a
   linha de baixo, entrava 8 px e nao alinhava com o botao de cima. */
.modal__acoes .modal__cancelar { margin-left: 0; }

/* Formulario curto dentro de celula tem de ficar na linha para que a
   regra acima signifique alguma coisa: dois blocos empilhados nao se
   encostam de lado. */
td > form { display: inline-block; vertical-align: middle; }
td > form.sis-forma-linha { display: flex; }

/* Segunda linha de uma celula da tabela: contexto, nunca dado principal. */
.sis-secundario {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	margin-top: 2px;
	line-height: 1.4;
}

/* --- Paginacao -------------------------------------------------------- */
.sis-paginacao {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
	font-size: var(--fs-sm);
}
.sis-paginacao span { color: var(--ink-muted); }

/* --- Ficha: abas e blocos --------------------------------------------- */
/* ABA A ESQUERDA, ACAO A DIREITA, NA MESMA LINHA
 *
 * A acao que CRIA nao pertence a lista: ela nao filtra nem navega. Posta
 * no fim da pagina, depois da tabela, ela so e encontrada por quem rola
 * ate o fim, e em tela com muitas linhas isso e nunca. No canto direito
 * da barra de abas ela fica na altura dos olhos, e o eixo horizontal
 * separa sozinho o que e ver do que e criar. */
/* TITULO E ACAO NA MESMA LINHA, OS DOIS A ESQUERDA
 *
 * Irmao de `.sis-abas-linha`, e com uma diferenca que e o motivo de
 * existir: la a acao vai para a ponta direita, porque do outro lado ha
 * uma fileira de abas ocupando a linha. Aqui o que ha e um titulo curto, e
 * acao jogada na outra ponta de uma tela de 1680px fica longe do que ela
 * age, e longe de onde o olho ja esta.
 *
 * `flex-wrap` porque titulo longo com botao ao lado nao cabe no telefone,
 * e ali o botao desce em vez de espremer o titulo. */
.sis-titulo-linha {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	margin: var(--sp-6) 0 var(--sp-2);
}
.sis-titulo-linha > .sis-secao { margin: 0; }

/* A NOTA DA SECAO NAO SOBE ATRAS DO BOTAO
 *
 * `.sis-secao__nota` tem margem de topo NEGATIVA, de proposito: ela existe
 * para colar a nota no titulo que vem logo acima. Depois desta linha, o
 * que vem acima nao e so o titulo, e sim uma faixa da altura de um botao,
 * e a margem negativa puxava a nota para dentro dele. */
.sis-titulo-linha + .sis-secao__nota { margin-top: 0; }

.sis-abas-linha {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	margin-bottom: var(--sp-5);
}
.sis-abas-linha .sis-abas { margin-bottom: 0; flex: 1 1 auto; }
.sis-abas-linha__acao { flex: 0 0 auto; padding-bottom: var(--sp-2); }

/* A contagem ao lado do rotulo da aba: quem olha decide para onde ir sem
   precisar abrir as tres. */
.sis-aba__conta {
	display: inline-block;
	margin-left: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	padding: 0 var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--surface-alt);
	color: var(--ink-muted);
}
.sis-aba--atual .sis-aba__conta { background: var(--carmo-100); color: var(--carmo-700); }

.sis-abas {
	display: flex;
	gap: var(--sp-1);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}
.sis-aba {
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.sis-aba:hover { color: var(--ink); }
.sis-aba--atual {
	color: var(--carmo-700);
	border-bottom-color: var(--carmo-700);
	font-weight: var(--fw-semi);
}

/* --- Subabas ----------------------------------------------------------

   SUBABA E OUTRA COISA QUE ABA, E PRECISA PARECER OUTRA COISA

   A aba diz em que ASSUNTO se esta; a subaba, que pedaco daquele assunto.
   Desenhar as duas iguais faria a segunda fileira parecer uma continuacao
   da primeira, e quem olha nao saberia qual manda em qual.

   Por isso ela e pilula e nao aba: sem a linha de baixo, com fundo na
   selecionada, e menor. A hierarquia fica visivel sem precisar de titulo
   explicando que ali comeca outro nivel.

   Ela nasceu no Integrador, cuja aba de API tinha quatro secoes e cento e
   cinquenta e cinco linhas numa rolagem so. */
.sis-subabas {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	margin: calc(var(--sp-5) * -1 + var(--sp-1)) 0 var(--sp-5);
}
.sis-subaba {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
}
.sis-subaba:hover { color: var(--ink); border-color: var(--ink-muted); }
.sis-subaba--atual {
	color: var(--carmo-700);
	background: var(--carmo-100);
	border-color: var(--carmo-100);
	font-weight: var(--fw-semi);
}
/* A contagem da subaba e menor que a da aba, pela mesma razao. */
.sis-subaba__conta {
	margin-left: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--ink-muted);
}
.sis-subaba--atual .sis-subaba__conta { color: var(--carmo-700); }

/* Lista de rotulo e valor, para a ficha. */
.sis-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--sp-4) var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
}
/* FORMULARIO DENTRO DE TELA INTERNA
 *
 * `.sis-campos` e a ficha: rotulo e valor, so leitura. Faltava o par
 * dela para ESCRITA, e sem ele todo formulario novo nascia solto no
 * fundo da pagina, sem borda e sem respiro, encostado no titulo de cima
 * e na tabela de baixo. Quem abria a tela nao via onde o formulario
 * comecava e onde acabava.
 *
 * Mesma superficie, mesma borda e mesmo padding da ficha, de proposito:
 * ler e escrever sao a mesma tela, e nao deviam parecer dois sistemas.
 *
 * SEM TETO DE LARGURA
 *
 * Ele teve `max-width: 54rem`, pelo argumento de que campo esticado numa
 * tela larga afasta o rotulo do valor. O responsavel decidiu em
 * 08/09/2026 que os tetos saem, aqui como saiu o dos `ch`: o formulario
 * acompanha a largura do conteudo, e quem precisa de coluna estreita usa
 * `sis-forma__linha`, que ja distribui os campos em colunas de 14rem. */
.sis-forma {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
}
.sis-forma > :last-child { margin-bottom: 0; }

/* Os campos lado a lado dentro de um formulario. E o irmao de
   `.sis-campos`, sem a superficie, porque a superficie ja e do
   `.sis-forma` que o envolve: dois cartoes aninhados viram moldura
   dentro de moldura. */
.sis-forma__linha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0 var(--sp-5);
}

/* A faixa de acao no pe do formulario, separada dos campos por uma
   linha: o botao que grava nao pode parecer mais um campo. */
.sis-forma__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}
.sis-forma__acoes .botao-principal { width: auto; }
.sis-forma__nota {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	margin: 0;
}

/* Formulario curto dentro de celula de tabela: tirar, devolver, ligar,
   desligar. O campo de motivo e o botao na mesma linha, porque separados
   em duas linhas a tabela cresce e perde a leitura. */
.sis-forma-linha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin-top: var(--sp-2);
}
.sis-forma-linha input[type="text"] {
	flex: 1 1 9rem;
	min-width: 0;
	padding: var(--sp-1) var(--sp-2);
	font-size: var(--fs-xs);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
}
.sis-forma-linha .botao-principal {
	width: auto;
	flex: 0 0 auto;
}

.sis-campo__rotulo {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	margin: 0 0 2px;
}
.sis-campo__valor { font-size: var(--fs-body); color: var(--ink); margin: 0; }

/* Texto integral de despacho, decisao ou sentenca. Fonte monoespacada
   porque o original vem com alinhamento por espaco. */
.sis-integra {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: var(--fs-sm);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-x: auto;
	max-height: 30rem;
	overflow-y: auto;
}
.sis-hash {
	font-family: ui-monospace, Consolas, monospace;
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	word-break: break-all;
}

/* --- Secao dentro da pagina ------------------------------------------- */
.sis-secao {
	font-size: var(--fs-h3);
	color: var(--carmo-900);
	margin: var(--sp-6) 0 var(--sp-3);
	font-weight: var(--fw-semi);
}
.sis-secao:first-of-type { margin-top: 0; }

/* Botao que age como link: usado quando a acao precisa ser POST, para
   nao existir link que muda estado do sistema num GET. */
.sis-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--carmo-700);
	font-size: var(--fs-sm);
	font-family: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.sis-link:hover { color: var(--carmo-900); }

code {
	font-family: ui-monospace, Consolas, monospace;
	font-size: var(--fs-xs);
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 1px 4px;
}

/* --- Mapa das telas ---------------------------------------------------
   A nota do grupo fica junto do titulo, e nao num tooltip: ela explica por
   que aquelas telas estao juntas, e explicacao escondida atras do mouse nao
   alcanca quem navega por teclado nem quem imprime. */

/* A nota da secao acompanha a largura do conteudo que ela explica.
 *
 * O teto de 62ch veio da regra tipografica de linha confortavel, e ela
 * vale para texto corrido. Aqui abaixo dela vem quase sempre uma TABELA,
 * que usa a largura toda: a nota quebrava em cinco linhas curtas ao lado
 * de um vazio de meia tela, e a coluna estreita parecia um bloco solto,
 * sem relacao com a tabela. */
.sis-secao__nota {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin: calc(var(--sp-3) * -1) 0 var(--sp-3);
	max-width: 100%;
	line-height: var(--lh-base);
}

.sis-lista-seca {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sis-lista-seca > li + li { margin-top: var(--sp-2); }

/* --- Lista de escolha -------------------------------------------------
 *
 * Uma caixa de marcar por linha, com o nome do que ela liga e, embaixo, o
 * que aquilo significa. Nasceu para os perfis de um usuario, onde a tela
 * antiga oferecia um `select` de um perfil so com os botoes conceder e
 * revogar ao lado: para tirar um e por outro eram dois envios, e nada
 * dizia quais a pessoa ja tinha.
 *
 * A LINHA INTEIRA E CLICAVEL, e nao so o quadradinho. O rotulo envolve a
 * caixa, entao isso sai do proprio HTML, sem script.
 *
 * O `width: auto` da caixa nao e enfeite: `.campo input` vale 100%, e uma
 * caixa de marcar esticada pela largura do modal vira uma barra que nem
 * parece caixa. Aqui ela nao esta dentro de `.campo`, e a regra existe
 * para o dia em que estiver.
 * --------------------------------------------------------------------- */
.sis-escolhas {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.sis-escolha {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	cursor: pointer;
}
.sis-escolha:hover { border-color: var(--carmo-500); background: var(--surface-alt); }
.sis-escolha:focus-within { outline: 2px solid var(--carmo-500); outline-offset: 1px; }
.sis-escolha input { width: auto; flex: 0 0 auto; margin-top: .2rem; }
.sis-escolha__rotulo { font-weight: var(--fw-semi); }
.sis-escolha__nota {
	display: block;
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	line-height: var(--lh-base);
	margin-top: var(--sp-1);
}

/* Situacao por fundo e por palavra, nunca so por cor. */
.sis-situacao {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	padding: 1px var(--sp-2);
	border-radius: var(--r-sm);
	white-space: nowrap;
	border: 1px solid;
}
.sis-situacao--pronta   { background: #eef6ef; color: #1f5d32; border-color: #cfe4d4; }
.sis-situacao--parcial  { background: #fdf9f0; color: #6b4700; border-color: #f0dfb8; }
.sis-situacao--pendente { background: #fdf1f1; color: #9b2c2c; border-color: #f3d2d2; }

/* `--erro` E `--pendente` SAO IGUAIS DE PROPOSITO, E OS DOIS NOMES FICAM
 *
 * Vermelho e vermelho: nao ha por que "nao imprimiu" ter uma cor e
 * "vencido" ter outra. O que muda e o que a tela esta dizendo, e nome de
 * classe que mente no ponto de uso e pior que classe repetida: chamar de
 * "pendente" um PDF que falhou faria o proximo leitor procurar uma fila.
 *
 * `--erro` era usada em tres lugares (o modelo que nao preenche o caso, a
 * previa que nao imprimiu e a que ficou sem papel) e nao existia em CSS
 * nenhum: os tres selos saiam com a borda da cor do texto e sem fundo,
 * indistinguiveis de um selo neutro, justamente onde a tela avisa que
 * algo falhou. */
.sis-situacao--erro { background: #fdf1f1; color: #9b2c2c; border-color: #f3d2d2; }

/* O SELO DE PROCEDENCIA TEM MENOS PESO QUE O FATO
 *
 * `--fonte` e para o codigo que a origem devolve quando ele fica AO LADO
 * do que ele explica: na Carteira, o `sitProc` do TJRJ ao lado do local
 * dos autos. Ele precisa continuar visivel, porque numero exibido tem que
 * poder ser rastreado ate a fonte, e precisa parar de competir com o
 * fato, porque sozinho ele nao informa nada. Ver o comentario em
 * carteira.php.
 *
 * ELE VEM DEPOIS DA CLASSE BASE, E ISSO NAO E ARRUMACAO
 *
 * As duas tem a mesma especificidade, entao quem vence e quem vem por
 * ultimo. Escrito antes de `.sis-situacao`, o `border: 1px solid` dela
 * devolveria a borda para a cor do texto e o `font-weight` para semibold,
 * e o selo continuaria com o mesmo peso de sempre: a regra existiria,
 * seria valida, e nao faria efeito nenhum. */
.sis-situacao--fonte {
	background: none;
	border-color: var(--line);
	color: var(--ink-muted);
	font-weight: var(--fw-normal);
	margin-left: var(--sp-2);
}

/* Bloco que se abre dentro da celula, para o texto longo que explica um
   numero. Fica fechado por padrao porque a tabela precisa continuar
   legivel de relance, e aberto quando alguem quer o motivo. */
.sis-detalhe { margin-top: var(--sp-2); }
.sis-detalhe > summary {
	font-size: var(--fs-xs);
	color: var(--carmo-700);
	cursor: pointer;
	text-decoration: underline;
}
.sis-detalhe > summary:focus-visible { outline: 2px solid var(--carmo-500); outline-offset: 2px; }
.sis-detalhe > p {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	line-height: var(--lh-base);
	margin: var(--sp-2) 0 0;
}

/* Dispensa dentro da linha da tabela: o motivo e o botao juntos, porque
   dispensar sem motivo nao e permitido e separar os dois convidaria a
   tentar. */
/* A COLUNA DE ACOES DE UMA TABELA
 *
 * Um link por linha, e nao uma fileira separada por barra vertical. Numa
 * celula estreita a fileira quebra em lugar imprevisivel e duas acoes
 * acabam grudadas, e aqui uma delas e "desativar".
 *
 * A area de toque vem do padding vertical, e nao de `line-height`: o alvo
 * cresce sem afastar as linhas de texto ao lado. */
/* ACAO E BOTAO, E NAO LINK SUBLINHADO
 *
 * `.sis-acoes` e, por definicao, a coluna do que se PODE FAZER com aquela
 * linha. Ela vinha desenhando os `<a>` como texto sublinhado, e o
 * resultado era uma coluna onde "informar", "trocar" e "apagar" tinham a
 * mesma aparencia de um link de navegacao qualquer, ao lado de <button>s
 * irmaos com cara de botao. Uma dessas acoes apaga um segredo.
 *
 * A regra e do responsavel, e e curta: quando for acao, e botao.
 *
 * Continua sendo `<a>` no HTML onde a acao e navegacao (abre um modal com
 * endereco proprio, e o botao voltar do navegador fecha). O que muda e a
 * aparencia, que passa a dizer a verdade sobre o que aquilo faz.
 */
.sis-acoes { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); }

/* A BARRA EM LINHA, E POR QUE ESTA DECLARACAO MORA AQUI E NAO LA EM CIMA
 *
 * Ate 12/09/2026 este modificador estava escrito 900 linhas ANTES de
 * `.sis-acoes`, e as duas regras tem o mesmo peso: ganha a ultima, e a ultima
 * era a coluna. O modificador existia, o HTML o usava, e os botoes saiam um
 * por linha, sem erro em lugar nenhum.
 *
 * E o mesmo defeito que a secao 8 do CLAUDE.md descreve para especificidade,
 * na versao mais silenciosa dele: aqui nem especificidade havia, so ordem.
 *
 * O responsavel apontou em 12/09/2026: "os botoes devem ficar lado a lado, e
 * nao um por linha". Declaracao de modificador vem depois da base, sempre. */
.sis-acoes--botoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sis-acoes a,
.sis-acoes button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	font-family: inherit;
	line-height: 1.4;
	color: var(--carmo-700);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.sis-acoes a:hover,
.sis-acoes button:hover { background: var(--surface-alt); border-color: var(--carmo-500); color: var(--carmo-900); }
.sis-acoes a:focus-visible,
.sis-acoes button:focus-visible { outline: 2px solid var(--carmo-700); outline-offset: 1px; }

/* Celula que so carrega acao: alinha a direita, como a coluna de numero,
   e nao estica o botao pela largura toda da coluna. */
.sis-acoes-celula { text-align: right; white-space: nowrap; }

/* A que desfaz nao tem o mesmo peso da que constroi. */
.sis-acoes .botao-acao--cuidado,
.sis-acoes a.perigo { color: #9b2c2c; }
.sis-acoes .botao-acao--cuidado:hover,
.sis-acoes a.perigo:hover { background: #fdf1f1; border-color: #f3d2d2; color: #7b1d1d; }

/* Duas acoes curtas na mesma linha, e nao empilhadas: na linha das abas
   do processo, empilhar rouba altura de onde se le o processo. */
.sis-acoes--linha { flex-direction: row; align-items: center; gap: var(--sp-2); }
.sis-acoes--linha > form { display: flex; }

/* `align-items: stretch` saiu daqui em 12/09/2026, junto com o conserto da
   ordem: ele nasceu quando o modificador nao pegava e a barra era coluna, e
   numa LINHA ele so faria o botao crescer ate a altura do texto ao lado, o que
   quebra a geometria unica de botao da secao 8 do CLAUDE.md. */
.sis-acoes--botoes > form { display: flex; }
.sis-acoes--botoes > form > .botao-acao { width: 100%; justify-content: center; }
.sis-acoes--botoes > .botao-acao { justify-content: center; }

/* "ver o texto" e um controle, e nao uma nota de rodape. Sublinhado solto
   dentro de uma celula de tabela se confunde com link de navegacao, e
   quem clica espera sair da pagina, e nao abrir um bloco ali mesmo. */
.sis-detalhe > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 2px var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	text-decoration: none;
	width: fit-content;
}
.sis-detalhe > summary:hover { background: var(--surface-alt); border-color: var(--carmo-500); }
.sis-detalhe[open] > summary { margin-bottom: var(--sp-2); }

.sis-dispensa { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.sis-dispensa input[type="text"] {
	font-size: var(--fs-xs);
	padding: 2px var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	min-width: 12rem;
	flex: 1 1 12rem;
}

/* Barra de progresso do lote. O numero vem do banco, contando linhas com
   status final; nao existe barra que anda sozinha enquanto o trabalho nao
   anda, que e o pior tipo de barra de progresso. */
.sis-barra {
	height: 8px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	min-width: 8rem;
}
.sis-barra__feito {
	height: 100%;
	background: var(--carmo-700);
	transition: width .3s ease-out;
}

/* A peca gerada, exibida como o texto que ela e. Monospace para que a
   pessoa veja exatamente o que sairia, inclusive espaco e quebra. */
/* VISOR DE DOCUMENTO
 *
 * O PDF embutido na tela, em `documento-ver.php`. Ele existe porque quem
 * confere um documento nao esta so lendo o papel: esta comparando o papel
 * com o processo e com o devedor, e o link para outra aba tira a pessoa do
 * sistema justamente ai.
 *
 * A altura e em `vh` e nao em `rem` porque o util aqui e a proporcao da
 * TELA de quem le, e nao um tamanho fixo: 78vh deixa a barra do sistema e
 * a ficha do documento visiveis acima, sem que o visor vire uma fresta em
 * monitor pequeno.
 *
 * `min-height` impede que a mesma conta produza um visor de 200 pixels em
 * janela baixa, onde nao caberia nem o cabecalho da peca.
 */
.sis-visor {
	display: block;
	width: 100%;
	height: 78vh;
	min-height: 26rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	margin-bottom: var(--sp-6);
}

.sis-peca {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-6);
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: var(--fs-sm);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-x: auto;
	max-height: 30rem;
	overflow-y: auto;
	margin-bottom: var(--sp-6);
}

/* =====================================================================
   Telefone
   =====================================================================
   O SISTEMA PEDIA ZOOM PARA SER USADO, E A CULPA ERA DE UM PIXEL

   O Safari do iPhone aplica zoom sozinho quando o campo que recebe foco
   tem fonte menor que 16px. `--fs-body` e 15px, e todo `input` e `select`
   do sistema usava esse token: bastava tocar num filtro para a tela
   inteira ampliar e sair do lugar, e o usuario tinha de reduzir na mao a
   cada campo.

   Nao e caso de mudar o token, que vale para o texto todo e obedece a
   escala do design system. E caso de dizer, no telefone, que CONTROLE de
   formulario tem 16px. Isso nao aumenta texto nenhum: aumenta so o que o
   dedo toca, que e onde 16px ja era o certo.

   `max-width` em vez de `pointer: coarse` porque tablet com mouse e
   navegador de desenvolvedor tambem precisam do mesmo comportamento. */

@media (max-width: 900px) {
	.campo input,
	.campo select,
	.campo textarea,
	.sis-filtro input,
	.sis-filtro select,
	.sis-dispensa input[type="text"],
	/* O formulario curto de dentro da tabela usa `--fs-xs` de proposito,
	   para caber na celula. Por especificidade ele venceria a regra
	   abaixo e traria o zoom de volta so ali, no campo de motivo, que e
	   justamente onde se escreve mais. Por isso vem nomeado. */
	.sis-forma-linha input[type="text"],
	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	select,
	textarea {
		font-size: 16px;
	}
}

@media (max-width: 640px) {
	/* A pagina NUNCA rola de lado. Conteudo largo rola dentro da propria
	   caixa, e e por isso que toda tabela vive num `.sis-tabela-caixa`.

	   `clip`, E NAO SO `hidden`, DESDE 10/09/2026

	   `hidden` no `html` e no `body` ao mesmo tempo faz do `body` um conteiner
	   de rolagem que nunca rola: o `overflow-y` dele passa a valer `auto`, a
	   altura cresce com o conteudo, e quem rola e a janela. Tudo o que e
	   `sticky` passa a grudar num conteiner parado, ou seja, nao gruda. Medido
	   a 390 px na tabela de permissoes: a barra de gravar sumia com a rolagem.
	   `clip` corta o transbordo do mesmo jeito sem criar conteiner. `hidden`
	   fica antes, como reserva para navegador que nao conhece `clip`. */
	html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

	/* No telefone cada filtro ocupa a linha inteira: dois campos de 11rem
	   lado a lado numa tela de 360px devolvem a barra de rolagem
	   horizontal que a regra acima acabou de tirar. */
	.sis-filtro, .sis-filtro--busca { flex-basis: 100%; max-width: none; }

	.sis-filtros { padding: var(--sp-3); gap: var(--sp-2); }
	.sis-cartoes { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
	.sis-cartao  { padding: var(--sp-3); }

	/* Tabela densa no telefone: menos respiro lateral para caber mais
	   coluna antes de precisar arrastar. */
	.sis-tabela th, .sis-tabela td { padding: var(--sp-2); }

	/* O rodape da peca gerada e o bloco de texto longo nao podem empurrar
	   a largura. */
	.sis-peca { padding: var(--sp-3); font-size: var(--fs-xs); }
	.sis-visor { height: 60vh; min-height: 18rem; }
}

@media (max-width: 400px) {
	/* Abaixo disso dois cartoes lado a lado ficam ilegiveis. */
	.sis-cartoes { grid-template-columns: 1fr; }
}

/* --- O cartao de tarefa, e a trilha de passos --------------------------
 *
 * Pedido do responsavel em 08/09/2026, sobre o Assistente: "tem que ter
 * estilo cards, cara de assistente passo a passo". E, sobre a tela nova
 * do caminho: "uma tela estilo Wizard onde lista as tarefas conforme a
 * necessidade".
 *
 * SAO DUAS TELAS E UM COMPONENTE SO
 *
 * O Assistente listava as tarefas em TABELA, com quatro colunas: o que
 * fazer, quanto, por que, e ir. Tabela e boa para comparar linhas entre
 * si, e ninguem compara tarefas: le-se uma, faz-se, volta-se. Pior, a
 * coluna "por que" empurrava o numero para o meio da linha, e o numero e
 * a informacao que decide se aquilo e para agora.
 *
 * O caminho precisa da MESMA peca, com uma diferenca: la a ordem e de
 * dependencia e o cartao e um degrau. Se cada tela tivesse o seu cartao,
 * as duas divergiriam no primeiro ajuste. Entao o cartao e um so, e o que
 * muda e o modificador.
 *
 * O NUMERO DA ESQUERDA NAO E ENFEITE EM NENHUMA DAS DUAS
 *
 * No caminho ele e o degrau: a etapa 4 depende da 3. No Assistente ele e
 * a ORDEM DE ATAQUE, que e o que aquela tela ja ordenava por urgencia e
 * nao mostrava. Nos dois casos ele responde "por onde comeco", que e a
 * pergunta da tela.
 *
 * A LARGURA NAO E DE CARTAO DE PAINEL
 *
 * Estes nao vao lado a lado numa grade de tres. Cada um carrega frase
 * inteira, e frase em coluna estreita vira escada. Eles empilham, e a
 * unica coisa que muda com a tela larga e o respiro.
 */

.sis-trilha {
	counter-reset: etapa;
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

/* A NUMERACAO CORRIDA, QUANDO A TRILHA E FEITA DE VARIOS BLOCOS
 *
 * O Assistente separa as tarefas em blocos ("o que nao pode esperar", "o
 * que espera decisao"), e cada bloco e uma lista propria. Sem isto, cada
 * lista recomecaria do 1, e a tela diria que ha tres tarefas numero 1.
 *
 * O contador nasce no conjunto, e as listas de dentro param de cria-lo. */
.sis-trilha-conjunto { counter-reset: etapa; }
.sis-trilha-conjunto .sis-trilha { counter-reset: none; }

.sis-tarefa {
	counter-increment: etapa;
	position: relative;
	background: var(--surface);
	/* SEM FAIXA NA ESQUERDA, DESDE 12/09/2026
	   Decisao do responsavel: "remover as bordas do lado esquerdo dos cards,
	   nao gostamos". A faixa de 3px era quem mudava de cor com o estado, e o
	   estado nao se perdeu com ela: quem o diz agora e o numero da etapa, que
	   ja estava ali e ja mudava de cor no "aqui". Moldura igual dos quatro
	   lados. */
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	padding-left: var(--sp-12);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.sis-tarefa::before {
	content: counter(etapa);
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--carmo-100);
	color: var(--carmo-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* O `hidden` sai daqui explicito, e nao por conta do navegador.
 *
 * O padrao do `hidden` e `display: none`, e qualquer regra de `display`
 * na mesma pessoa o vence sem avisar. Os blocos de trava, detalhe e "por
 * que" nascem escondidos e sao mostrados pelo script: se um dia alguem
 * der `display` a eles, o cartao passaria a mostrar campo vazio em vez de
 * nao mostrar campo nenhum, e ninguem descobriria pelo CSS. */
.sis-tarefa [hidden] { display: none !important; }
/* Desde 11/09/2026 a mesma regra vale para tudo, em design-system.css. Esta
   fica como registro de onde o defeito apareceu primeiro. */

.sis-tarefa__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
}

.sis-tarefa__titulo {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semi);
	color: var(--ink);
	margin: 0;
}

/* O numero e grande porque e ele que decide se aquilo e para agora. Ele
   para em `--fs-h2`: o teto da escala e o `h1`, e numero maior que titulo
   de tela seria escala furada, nao enfase. */
.sis-tarefa__quanto {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.sis-tarefa__numero {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--carmo-900);
	line-height: 1.1;
}
.sis-tarefa__unidade { font-size: var(--fs-sm); color: var(--ink-muted); }

/* O botao encosta no pe do cartao, e nao no fim do texto: com alturas
   diferentes, botao solto no meio faz a pilha parecer desalinhada. */
.sis-tarefa__acao { margin-top: auto; padding-top: var(--sp-1); }

/* --- Os estados -------------------------------------------------------
 * Tres, e nao dois: "esperando alguma coisa", "em dia" e "ainda medindo".
 * O terceiro existe porque o numero chega por Ajax, e cartao sem numero
 * precisa dizer que esta sem numero, e nao parecer zerado. */

.sis-tarefa--parado::before { background: var(--carmo-500); color: #fff; }

.sis-tarefa--aqui {
	background: #fffdf7;
}
.sis-tarefa--aqui::before { background: var(--carmo-900); color: #fff; }

/* A ETAPA VAZIA VIRA UMA LINHA, E NAO UM CARTAO DE CORPO INTEIRO
 *
 * O caminho tem dezoito etapas, e num dia bom quinze estao vazias. Com
 * todas em altura de cartao cheio, a tela vira uma rolagem de nada, e as
 * duas ou tres que importam se perdem no meio.
 *
 * Ela nao some, e isso e regra da tela: e vendo o caminho inteiro que se
 * sabe onde se esta. So encolhe para o tamanho do que tem a dizer, que e
 * uma frase curta. O link continua ali, porque quem quer conferir uma
 * etapa zerada precisa conseguir chegar nela. */
.sis-tarefa--vazio {
	background: var(--surface-alt);
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-3);
	gap: var(--sp-2) var(--sp-3);
}
.sis-tarefa--vazio .sis-tarefa__titulo { color: var(--ink-muted); font-weight: var(--fw-medium); }
/* Empurrado para a direita, o link fica na mesma coluna em todas as
   linhas vazias, e a pilha ganha uma borda de leitura. */
.sis-tarefa--vazio .sis-tarefa__acao { margin-top: 0; padding-top: 0; margin-left: auto; }
.sis-tarefa--vazio::before {
	background: var(--line);
	color: var(--ink-muted);
	/* Em uma linha so, o numero acompanha o meio dela, e nao o topo. */
	top: 50%;
	transform: translateY(-50%);
}

.sis-tarefa--medindo .sis-tarefa__titulo { color: var(--ink); }
.sis-tarefa__esperando {
	color: var(--ink-muted);
	font-style: italic;
}

/* O placar da trilha: uma linha entre o titulo e os cartoes, dizendo
   quantas etapas daquela metade estao esperando alguma coisa. */
.sis-trilha-placar {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

@media print {
	/* No papel o cartao vira paragrafo: fundo e faixa colorida so gastam
	   tinta, e o numero da esquerda continua dizendo a ordem. */
	.sis-tarefa { background: none; border-color: #ccc; break-inside: avoid; }
	.sis-tarefa__acao { display: none; }
}

/* --- A tela publica de validacao --------------------------------------
 * Ela e a UNICA sem login, e quem a abre e o cartorio, o juizo ou o
 * proprio cidadao, com a peca impressa na mao. Por isso ela nao usa o
 * fundo acinzentado da tela de trabalho: la o cinza existe para destacar
 * o cartao branco de quem passa o dia lendo tabela, e aqui nao ha tabela
 * nenhuma, so uma resposta.
 *
 * Pedido do responsavel, em 09/09/2026: "em validar, fundo branco".
 *
 * O branco fica NESTA classe, e nao em `.sis-corpo`, que vale para o
 * sistema inteiro. */
/* O branco vai no CORPO, e nao so na area de conteudo.
 *
 * `.sis-corpo` e um filho flexivel: ele cresce ate o conteudo e para.
 * Pintando so ele, sobrava o fundo escuro do `html` numa faixa a direita
 * e outra embaixo, exatamente onde o conteudo nao chegava. */
body.tela-publica,
.tela-publica .sis-corpo { background: #fff; }

/* --- A tabela que acompanha um grafico --------------------------------
 * Pedido do responsavel, em 09/09/2026: altura fixa, com rolagem dentro.
 *
 * O desenho tem altura propria e nao cresce. A tabela cresce com o numero
 * de linhas, e a de anos de ajuizamento tem uma por ano: ela empurrava o
 * bloco inteiro e deixava o grafico sozinho no alto de um espaco vazio.
 *
 * O `max-height` e teto, e nao altura: tabela de cinco linhas continua
 * ocupando cinco linhas, sem um vazio embaixo esperando rolagem que nao
 * existe. */
.grafico-par__tabela {
	max-height: 22rem;
	overflow-y: auto;
}
/* O cabecalho fica, senao quem rola perde de vista qual coluna e qual, e
   numero sem rotulo em cima nao e numero, e digito. */
.grafico-par__tabela thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	box-shadow: inset 0 -1px 0 var(--line);
}

/* O bloco centrado da peca: o fecho e a assinatura.
 *
 * Pedido do responsavel, em 09/09/2026: "a assinatura esta ficando errada,
 * sem opcao de centralizar".
 *
 * `text-indent` volta a zero aqui, e nao so por estetica: o recuo de
 * 2,5em e do PARAGRAFO forense, e recuo com centro produz um bloco que
 * nao esta nem numa coisa nem noutra. Quem assina fica no meio da folha,
 * sem recuo, como em toda peca. */
.peca__paragrafo--centro {
	text-align: center;
	text-indent: 0;
	margin-top: var(--sp-6);
}

/* --- O balao de aviso e a barra de carregando --------------------------

   NASCERAM COM O `navegacao.js`, EM 10/09/2026

   Salvar passou a trocar o conteudo sem recarregar e sem mexer na rolagem.
   O aviso de "salvo" continua sendo desenhado pela tela no alto da pagina,
   e com a rolagem mantida ele nasceria fora da vista: salvar pareceria nao
   ter feito nada. O balao repete o TEXTO dele num canto fixo.

   NO CANTO SUPERIOR DIREITO DESDE 11/09/2026, a pedido do responsavel: "os
   alerts do sistema canto superior direito". Nasceu embaixo, com o argumento
   de que um aviso colado no cabecalho se le como parte do menu; por isso ele
   fica ABAIXO do cabecalho, com folga, e nunca encostado nele. O
   `--altura-topo` e o medido pelo `interface.js`, e acompanha o celular.

   Desde a mesma data ele e tambem a pergunta que o `confirm()` do navegador
   fazia (`.sis-balao--pergunta`), e o `alert()`: ver `balao.js`.

   A barra no topo existe porque a troca nao recarrega, e sem recarga o
   navegador nao mostra o proprio indicador. Um clique que demora um segundo
   sem sinal nenhum e clicado de novo. */
.sis-balao {
	position: fixed;
	top: calc(var(--altura-topo) + var(--sp-3));
	right: var(--sp-5);
	z-index: 200;
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	max-width: min(30rem, calc(100vw - var(--sp-8)));
	padding: var(--sp-3) var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-sm);
	color: var(--ink);
}
.sis-balao--erro { border-color: #f3d2d2; background: #fdf1f1; color: #9b2c2c; }
.sis-balao__texto { margin: 0; line-height: var(--lh-base); }
/* A pergunta leva a borda da marca: e o sistema esperando uma resposta, e
   nao contando o que ja aconteceu. */
.sis-balao--pergunta { border-color: var(--carmo-500); }
.sis-balao__corpo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.sis-balao__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sis-balao__fechar {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--fs-h3);
	line-height: 1;
	cursor: pointer;
	padding: 0 var(--sp-1);
	opacity: .7;
}
.sis-balao__fechar:hover { opacity: 1; }
.sis-balao__fechar:focus-visible { outline: 2px solid var(--carmo-500); outline-offset: 2px; }

html.sis-carregando::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 210;
	background: linear-gradient(90deg, transparent, var(--carmo-500), transparent) no-repeat;
	background-size: 40% 100%;
	animation: sis-carregando 1s linear infinite;
}
@keyframes sis-carregando {
	from { background-position: -60% 0; }
	to   { background-position: 160% 0; }
}
main[aria-busy="true"] { cursor: progress; }

@media (max-width: 40rem) {
	.sis-balao { left: var(--sp-3); right: var(--sp-3); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	html.sis-carregando::before { animation: none; background: var(--carmo-500); }
}

/* --- A tabela de permissoes por perfil ---------------------------------

   NASCEU EM 10/09/2026, a pedido do responsavel: "poder definir a permissao em
   tabela com toggle para cada perfil".

   A chave e o `toggle` do daisyUI, que ja vem na folha dele: desenhar outro
   interruptor seria um segundo componente para a mesma coisa.

   A barra com "Novo perfil" e "Gravar alteracoes" gruda logo abaixo do
   cabecalho: sao trinta e uma linhas, e quem mexe numa chave la embaixo nao pode
   ter de subir procurando onde grava. */
/* A coluna da permissao e cabecalho de linha (`th`), pela acessibilidade: o
   leitor de tela anuncia "usuario.editar, Procuradoria" ao chegar na chave.
   So que `.sis-tabela th` e o estilo do cabecalho de COLUNA, em maiusculas e com
   fundo proprio, e a descricao saia gritando. Aqui ela volta a ser texto. */
.sis-matriz th[scope="row"] {
	font-weight: var(--fw-normal);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--fs-sm);
	color: var(--ink);
	min-width: 13rem;
}
.sis-matriz th[scope="row"] code { font-size: var(--fs-xs); }

/* A COLUNA DAS PERMISSOES FICA PRESA A ESQUERDA
 *
 * Quando a tabela rola de lado, o nome da permissao continua a vista, e a chave
 * nunca fica sem dizer do que e. Precisa de fundo opaco: transparente, as chaves
 * passariam POR TRAS do nome, embaralhando justamente o que se le. */
.sis-matriz th[scope="row"],
.sis-matriz thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--surface);
	box-shadow: inset -1px 0 0 var(--line);
}
.sis-matriz thead th:first-child { background: var(--surface-alt); }

/* SEIS PERFIS CABEM A 1280 PX
 *
 * Em 11/09/2026, com 11rem por perfil e 16rem para a permissao, a tabela tinha
 * 1.312 px: a coluna do acesso total saia da tela e a do atendimento ficava
 * cortada, e o responsavel leu isso como "as permissoes sumiram". Com 8,5rem e
 * 13rem sao 1.024 px. O cabecalho quebra dentro da coluna, e a descricao ja
 * para em tres linhas. */
.sis-matriz__perfil {
	text-align: center;
	vertical-align: bottom;
	width: 8.5rem;
	min-width: 7.5rem;
}
/* A QUEBRA DE LINHA NUNCA TINHA VALIDO AQUI
 *
 * `.sis-tabela th` pede `nowrap`, e ganha de `.sis-matriz__perfil` pela
 * especificidade (0,1,1 contra 0,1,0). O `white-space: normal` que estava na
 * regra acima perdia calado, e o cabecalho e a descricao de cada permissao saiam
 * numa linha so: medido em 11/09/2026, a coluna das permissoes tinha 342 px e as
 * dos perfis ate 260, e a largura escrita acima nao valia nada. */
.sis-matriz th.sis-matriz__perfil,
.sis-matriz th[scope="row"] { white-space: normal; }
/* O codigo do perfil e uma palavra so ("FAZENDA_ATENDIMENTO"), e sem isto ele
   empurraria a coluna para alem da largura dela. */
.sis-matriz__perfil code { overflow-wrap: anywhere; }

/* --- Tabela que vira cartoes no telefone ----------------------------------
 *
 * Abaixo de 720 px cada linha vira um bloco, e cada celula mostra o proprio
 * rotulo, lido de `data-rotulo`. Nasceu em 11/09/2026 na lista de usuarios, onde
 * a coluna de acoes ficava fora da tela e o responsavel leu isso como "alterar
 * cadastro desabilitado". Serve a qualquer tabela curta cuja ultima coluna seja
 * de acao: tabela longa de numeros continua rolando de lado, porque em cartao
 * ela deixaria de se comparar linha com linha.
 *
 * O `!important` do alinhamento vence o `style` da propria celula de acoes, que
 * as alinha a direita no computador. */
@media (max-width: 720px) {
	.sis-tabela--cartoes thead { display: none; }
	.sis-tabela--cartoes,
	.sis-tabela--cartoes tbody,
	.sis-tabela--cartoes tr,
	.sis-tabela--cartoes td { display: block; width: 100%; }
	.sis-tabela--cartoes tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
	.sis-tabela--cartoes td { padding: var(--sp-1) var(--sp-3); border: 0; text-align: left; }
	.sis-tabela--cartoes td[data-rotulo]::before {
		content: attr(data-rotulo);
		display: block;
		font-size: var(--fs-xs);
		font-weight: var(--fw-semi);
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--ink-muted);
	}
	.sis-tabela--cartoes .sis-acoes { justify-content: flex-start !important; flex-wrap: wrap; }
}

/* O seletor de perfil do celular: fora dele, nao aparece. */
.sis-matriz__escolha { display: none; }
@media (max-width: 720px) {
	html.tem-js .sis-matriz__escolha {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		margin-bottom: var(--sp-3);
	}
	html.tem-js .sis-matriz__escolha select { flex: 1 1 auto; min-width: 0; }
	/* So a coluna do perfil escolhido. As outras continuam no formulario. */
	html.tem-js .sis-matriz .sis-matriz__fora { display: none; }
	.sis-matriz th[scope="row"] { min-width: 0; }
	.sis-matriz__perfil { width: 6rem; min-width: 6rem; }
}
.sis-matriz__celula { text-align: center; }
.sis-matriz__grupo th {
	background: var(--surface-alt);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
}
/* A chave que mudou e ainda nao foi gravada fica marcada, pelo `interface.js`. */
.sis-matriz__celula--mudou { background: var(--carmo-100); }
.sis-matriz__barra {
	position: sticky;
	top: var(--altura-topo);
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	padding: var(--sp-2) 0;
	background: var(--surface-alt);
}
.sis-matriz__conta { font-size: var(--fs-sm); color: var(--ink-muted); }
.sis-matriz__conta--mudou { color: var(--carmo-700); font-weight: var(--fw-semi); }

/* --- Os avisos explicativos atras do "?" --------------------------------

   A pedido do responsavel, em 10/09/2026. Quem poe e tira a classe no <html> e
   o `avisos.js`, que diz por que cada um dos `:not` abaixo fica sempre a vista.
   Sem o script a classe nunca entra, e os avisos aparecem como sempre. */
html.sis-avisos-ocultos .sis-aviso:not([role="alert"]):not([role="status"]):not(.sis-aviso--erro):not([data-uma-vez]):not([data-aviso-fixo]),
html.sis-avisos-ocultos .sis-aviso[data-aviso-oculto] {
	display: none;
}
/* Quantos avisos estao escondidos nesta tela, num numero pequeno sobre o "?". */
.sis-ajuda__botao { position: relative; }
.sis-ajuda__botao[data-avisos]:not([data-avisos=""])::before {
	content: attr(data-avisos);
	position: absolute;
	top: -.35rem;
	right: -.45rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 .2rem;
	border-radius: var(--r-pill);
	background: var(--carmo-red);
	color: #fff;
	font-size: .625rem;
	font-weight: var(--fw-bold);
	line-height: 1rem;
	text-align: center;
}
/* O botao do "?" e `<button>`, e nao `<summary>`: sem isto herdaria a moldura
   de botao do navegador. */
button.sis-ajuda__botao { padding: 0; font-family: inherit; }
button.sis-ajuda__botao[aria-pressed="true"] { background: rgba(255, 255, 255, .28); }

/* A descricao do perfil no cabecalho da coluna, e o link de editar nome e
   descricao, pedido em 10/09/2026. A descricao vai em letra normal, e nao em
   maiusculas como o resto do cabecalho: e frase, e frase em maiusculas grita. */
.sis-matriz__descricao {
	/* Tres linhas no maximo; a frase inteira fica no `title`, ao passar o mouse. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	white-space: normal;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-normal);
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink-muted);
	line-height: var(--lh-base);
}
.sis-matriz__editar {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	text-transform: none;
	letter-spacing: normal;
	color: var(--carmo-700);
	text-decoration: none;
}
.sis-matriz__editar:hover { text-decoration: underline; }

/* --- O QR do alto do aviso de cobranca ----------------------------------

   Pedido do responsavel em 10/09/2026. Vai no papel impresso pelo Chrome, e por
   isso as medidas estao em `pt` e `mm`, como o resto da peca: o alvo e a folha.
   Nao quebra entre paginas, porque QR cortado ao meio nao se le. */
.peca-folha__qr-aviso {
	display: flex;
	align-items: center;
	gap: 5mm;
	margin: 0 0 8pt;
	padding: 3mm 4mm;
	border: 1px solid #c9d3dc;
	border-radius: 2mm;
	break-inside: avoid;
	page-break-inside: avoid;
}
.peca-folha__qr-aviso svg { flex: 0 0 auto; display: block; }
.peca-folha__qr-aviso-texto { font-size: 10pt; line-height: 1.35; }

/* --- O aviso aberto pelo devedor (aviso.php) ----------------------------

   Tela sem login, lida quase sempre no celular de quem acabou de escanear o QR
   do papel. O recibo vem primeiro e com o numero grande: e ele que a pessoa
   mostra no balcao. */
/* O corpo e coluna flexivel, e item com margem automatica encolhe ate o
   conteudo: sem a largura cheia, o bloco ficava com os 34rem inteiros e
   vazava a tela de 400 px pela direita. */
.aviso-pagina {
	width: 100%;
	max-width: 34rem;
	margin: var(--sp-6) auto;
	padding-inline: var(--sp-4);
	box-sizing: border-box;
}
.aviso-pagina h1 { margin-top: 0; }
.aviso-recibo {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	border: 1px solid var(--color-success);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--color-success) 8%, var(--surface));
}
.aviso-recibo p { margin: 0; }
.aviso-recibo__titulo { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); }
.aviso-recibo__texto { margin-top: var(--sp-1) !important; }
.aviso-recibo__rotulo {
	margin-top: var(--sp-3) !important;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-muted);
}
.aviso-recibo__hash {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: var(--fs-h2);
	font-weight: var(--fw-semi);
	letter-spacing: .04em;
	word-break: break-all;
}
.aviso-recibo__nota { margin-top: var(--sp-2) !important; font-size: var(--fs-sm); color: var(--ink-muted); }

.aviso-ola { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin: 0 0 var(--sp-1); }

.aviso-total {
	margin: var(--sp-4) 0 var(--sp-5);
	padding: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--surface-alt);
}
.aviso-total p { margin: 0; }
.aviso-total__rotulo { font-size: var(--fs-sm); color: var(--ink-muted); }
.aviso-total__valor { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--ink); }
.aviso-total__nota { margin-top: var(--sp-1) !important; font-size: var(--fs-sm); color: var(--ink-muted); }

.aviso-subtitulo { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin: var(--sp-5) 0 var(--sp-3); }

.aviso-processos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.aviso-processo {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.aviso-processo p { margin: 0; }
.aviso-processo__numero { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.aviso-processo__linha { margin-top: var(--sp-1) !important; font-size: var(--fs-sm); color: var(--ink-muted); }
.aviso-processo__valor { margin-top: var(--sp-1) !important; font-weight: var(--fw-semi); }
.aviso-processo__valor .sis-secundario { font-weight: var(--fw-normal); font-size: var(--fs-sm); }

.aviso-baixar { margin: var(--sp-5) 0; }
.aviso-como {
	margin: var(--sp-5) 0;
	padding: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--surface-alt);
}
.aviso-como p:last-child { margin-bottom: 0; }

/* --- A coluna de acoes, na ponta direita da tabela ----------------------
   Pedido do responsavel em 10/09/2026, na lista de provedores: o botao fica
   numa ultima coluna, do lado direito, e nao espremido dentro da situacao.
   Largura minima e sem quebra: a coluna tem o tamanho do botao. */
.sis-tabela th.sis-tabela__acoes,
.sis-tabela td.sis-tabela__acoes { text-align: right; white-space: nowrap; width: 1%; }
.sis-tabela td.sis-tabela__acoes form { display: inline-flex; margin: 0; }

/* O ritmo de cada canal, no alto da aba "Na fila" das cobrancas. */
.sis-fila-ritmo { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.sis-fila-ritmo li + li { margin-top: var(--sp-1); }

/* O valor de parametro que e texto (parametros.php): quebra, guarda os
   paragrafos e parte endereco comprido em qualquer ponto. Sem isto a coluna
   esticava ate a largura da mensagem inteira. */
.sis-tabela td.sis-param-texto { overflow-wrap: anywhere; min-width: 14rem; }
/* So o valor guarda as quebras: na celula inteira, as quebras do proprio
   PHP entre um elemento e outro virariam linhas em branco. */
.sis-tabela td.sis-param-texto strong { display: block; white-space: pre-line; font-weight: var(--fw-medium); }

/* --- Um campo e o botao a direita dele, sempre no mesmo lugar ------------
   Pedido do responsavel em 10/09/2026, na emissao direta: o campo muda (busca,
   depois a lista de quem notificar) e o Procurar nao sai do lugar. O botao
   alinha pela base do campo, e a ajuda fica fora da linha para nao empurra-lo. */
.sis-busca-linha { display: flex; align-items: flex-end; gap: var(--sp-3); }
.sis-busca-linha > .campo { flex: 1 1 auto; min-width: 0; margin: 0; }
.sis-busca-linha > .campo select,
.sis-busca-linha > .campo input { width: 100%; }
.sis-busca-linha > .botao-principal { flex: 0 0 auto; }
.sis-busca-linha + .campo__ajuda { margin-top: var(--sp-2); }

/* Quem a busca do balcao achou e nao pode receber notificacao nova, um por
   linha, com o motivo ou o caminho da notificacao que ja existe. */
.sis-lista-balcao { list-style: none; margin: 0; padding: 0; }
.sis-lista-balcao > li { padding-block: var(--sp-3); border-top: 1px solid var(--line); }

/* O botao de PDF no alto do comprovante (extrato-envios.php). E da tela, e nao
   do papel: some na impressao, como o resto da navegacao. */
.folha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
@media print { .folha-acoes { display: none; } }

/* Os botoes de uma linha, empilhados na coluna de acoes (modelo-por-tipo.php):
   um por modelo, cada um com a versao escrita, alinhados a direita. */
.sis-acoes-coluna { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.sis-acoes-coluna form { margin: 0; }
.sis-modelo-id { font-variant-numeric: tabular-nums; margin-right: var(--sp-1); }

/* A caixa de tabela com altura definida: rola por dentro e o cabecalho fica.
   Pedida para as notificacoes emitidas em 11/09/2026. `max-height` e teto, e
   nao altura: lista curta continua curta. */
.sis-tabela-caixa--alta { max-height: min(40rem, 70vh); overflow-y: auto; }
.sis-tabela-caixa--alta thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	box-shadow: inset 0 -1px 0 var(--line);
}

/* O andamento da tarefa em Execucoes (migracao 207): a barra, o N de M e o fim
   do registro corrido. O registro rola dentro de si, sem empurrar a tabela. */
.sis-andamento { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-sm); }
.sis-andamento__barra { width: 10rem; height: .5rem; }
.sis-log-vivo {
	margin: var(--sp-2) 0 0;
	max-height: 9rem;
	overflow: auto;
	padding: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: 1.4;
	white-space: pre-wrap;
	background: var(--surface-alt);
	border-radius: var(--r-sm);
}

/* O modal de instalar (11/09/2026), montado por `instalar.js` quando o sistema
   logado roda numa aba comum. O nome NAO e `.modal`: essa classe e a do modal
   que o servidor desenha, e o Esc do `interface.js` e o `navegacao.js` a
   procuram para fechar. Este nao fecha. A caixa, o titulo e as acoes sao os
   mesmos do modal comum, para ter a mesma cara. */
.sis-instalar {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-6);
	background: rgba(0, 18, 34, .62);
	backdrop-filter: blur(2px);
}
body:has(.sis-instalar) { overflow: hidden; }
.sis-instalar__texto { margin: 0 0 var(--sp-2); }
.sis-instalar__passos { margin: 0; padding-left: var(--sp-5); }
.sis-instalar__passos li + li { margin-top: var(--sp-2); }
@media (max-width: 640px) {
	.sis-instalar { padding: var(--sp-3); }
	.sis-instalar .modal__caixa { max-width: none; width: 100%; padding: var(--sp-5); }
	.sis-instalar .modal__acoes .botao-principal,
	.sis-instalar .modal__cancelar { width: 100%; }
}

/* --- O manual de uso ------------------------------------------------------

   NASCEU EM 11/09/2026, a pedido do responsavel: "elaborar o manual de uso do
   sistema, de acordo com o grupo / privilegio do usuario". A tela e
   `/manual.php`, e o conteudo mora em `app/nucleo/manual/`.

   A ATENCAO NAO E `.sis-aviso`, E DE PROPOSITO
   O `avisos.js` esconde atras do "?" todo `.sis-aviso` explicativo. No manual,
   o cuidado de cada tarefa E o conteudo: escondido, o manual ensinaria o passo
   e calaria sobre o efeito que nao se desfaz.

   A secao para abaixo do cabecalho fixo quando se chega pelo sumario, pelo
   `scroll-margin-top`: sem ele, o titulo da tela ficaria atras da barra. */
.sis-manual__escolha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.sis-manual__perfil { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin: 0; }
.sis-manual__perfil .campo { margin: 0; }
.sis-manual__sumario {
	columns: 16rem;
	column-gap: var(--sp-6);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}
.sis-manual__sumario-grupo { break-inside: avoid; margin: 0 0 var(--sp-3); }
.sis-manual__sumario-grupo > strong { display: block; color: var(--carmo-900); margin-bottom: var(--sp-1); }
.sis-manual__sumario ul { list-style: none; margin: 0; padding: 0; line-height: var(--lh-base); }
.sis-manual__bloco { scroll-margin-top: calc(var(--altura-topo) + var(--sp-4)); }
.sis-manual__papel { font-size: var(--fs-body); line-height: var(--lh-base); margin: 0 0 var(--sp-4); }
.sis-manual__tela {
	scroll-margin-top: calc(var(--altura-topo) + var(--sp-4));
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
.sis-manual__tela-titulo {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	color: var(--carmo-900);
}
.sis-manual__abrir { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.sis-manual__para-que { margin: 0 0 var(--sp-4); line-height: var(--lh-base); }
.sis-manual__tarefa { margin: 0 0 var(--sp-4); }
.sis-manual__tarefa:last-child { margin-bottom: 0; }
.sis-manual__tarefa-titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--ink); }
.sis-manual__tarefa .sis-passos { margin-bottom: var(--sp-2); }
.sis-manual__atencao {
	margin: 0;
	padding: var(--sp-2) var(--sp-3);
	background: rgba(255, 255, 255, .6);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}
.sis-manual__rotina { margin: 0 0 var(--sp-5); }

/* A LATERAL DO MANUAL, COM A BUSCA (11/09/2026)
 *
 * Do responsavel: "ao rolar ele deve ficar na lateral para permitir a pessoa
 * navegar e funcionar como menu". Na tela larga o sumario vira coluna a
 * esquerda e gruda enquanto o manual rola; no estreito ele fica em cima, como
 * era, e a busca vai junto. So existe na tela: o PDF nao tem `.sis-manual__web`.
 *
 * O TOPO DA LATERAL DESCONTA A ABA DA MARCA
 *
 * A aba desce por baixo da barra no canto esquerdo, que e onde a lateral
 * mora, e ela e fixa junto com a barra. Grudada so abaixo da barra, a lateral
 * teria a busca coberta pelo logo a cada rolagem. */
.sis-manual__busca { margin: 0 0 var(--sp-3); }
.sis-manual__busca input { font-size: var(--fs-sm); min-height: var(--altura-botao); }
.sis-manual__sumario a[aria-current] { font-weight: var(--fw-semi); color: var(--carmo-900); }
.sis-manual__achados {
	list-style: none;
	margin: 2px 0 var(--sp-2);
	padding: 0 0 0 var(--sp-3);
	font-size: var(--fs-xs);
	line-height: var(--lh-base);
}
::highlight(manual-busca) { background-color: #ffe08a; color: inherit; }

@media (min-width: 1001px) {
	.sis-manual__web {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: var(--sp-6);
		align-items: start;
	}
	.sis-manual__lateral {
		--lateral-topo: calc(var(--altura-topo) + var(--logo-h) * 0.42 + var(--sp-3));
		position: sticky;
		top: var(--lateral-topo);
		max-height: calc(100dvh - var(--lateral-topo) - var(--sp-3));
		/* A BUSCA FICA SEMPRE A VISTA, E SO O SUMARIO ROLA (11/09/2026)
		   Do responsavel: "caixa de busca do manual sempre fixa visivel ao
		   topo". Com a lateral inteira rolando, a busca subia junto quando o
		   sumario acompanhava a leitura, e quem queria buscar precisava rolar
		   a lateral de volta. Agora a lateral e coluna: a busca em cima, fixa,
		   e o sumario embaixo com a rolagem so dele. */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: var(--sp-4);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
	}
	.sis-manual__lateral .sis-manual__busca { flex: 0 0 auto; }
	/* Dentro da lateral o sumario e lista corrida, e nao o cartao em colunas.
	   A margem negativa com o mesmo recuo por dentro abre espaco para o fundo
	   do item passar da coluna do texto sem virar rolagem de lado. */
	.sis-manual__lateral .sis-manual__sumario {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		columns: auto;
		margin: 0 calc(var(--sp-2) * -1);
		padding: 0 var(--sp-2);
		background: none;
		border: 0;
		border-radius: 0;
	}
	/* Cada item e uma linha clicavel, como no menu, e a tela lida agora tem
	   fundo, e nao so peso: e o "voce esta aqui" de quem navega por ela. */
	.sis-manual__lateral .sis-manual__sumario a {
		display: block;
		margin: 0 calc(var(--sp-2) * -1);
		padding: 1px var(--sp-2);
		border-radius: var(--r-sm);
		text-decoration: none;
	}
	.sis-manual__lateral .sis-manual__sumario a:hover { background: var(--surface-alt); }
	.sis-manual__lateral .sis-manual__sumario a[aria-current] { background: var(--surface-alt); }
}

@media print {
	.sis-manual__tela { break-inside: auto; border: 0; padding: 0; margin-bottom: var(--sp-5); }
	.sis-manual__tarefa { break-inside: avoid; page-break-inside: avoid; }
	.sis-manual__tela-titulo { break-after: avoid; page-break-after: avoid; }
	.sis-manual__sumario { background: none; }
}