/* =======================================================================
   Design System · Integrador SigaFisco
   Município do Carmo / RJ

   Camada propria, carregada DEPOIS do daisyUI. Nao usa @layer, e CSS sem
   camada vence CSS em camada, entao os tokens e o layout ficam por cima
   do daisyUI sem precisar de !important.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------- */
:root {
	/* Azuis institucionais */
	--carmo-900: #003d69;
	--carmo-700: #005C99;
	--carmo-500: #0f6fb5;
	--carmo-100: #e3edf6;  /* o mais claro da escala: fundo de selo e de aba ativa */
	--carmo-red: #e63329;  /* vermelho do logo. Fora de uso na interface */

	/* Superficies e texto */
	--surface:     #ffffff;
	--surface-alt: #f4f7fa;
	--line:        #e4ebf2;
	--ink:         #10243a;
	--ink-muted:   #5b7085;

	/* Escala tipografica. Teto absoluto: h1 = 1.5rem. */
	--fs-h1:   1.5rem;     /* 24px */
	--fs-h2:   1.25rem;    /* 20px */
	--fs-h3:   1.0625rem;  /* 17px */
	--fs-body: 0.9375rem;  /* 15px */
	--fs-sm:   0.8125rem;  /* 13px */
	--fs-xs:   0.75rem;    /* 12px */

	--lh-tight: 1.25;
	--lh-base:  1.6;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi:   600;
	--fw-bold:   700;

	/* Espacamento, base 4px.
	 *
	 * O NUMERO NO NOME E O MULTIPLO DE 4px, E A ESCALA TEM QUE SER CONTINUA
	 *
	 * `--sp-5` faltava aqui, e treze declaracoes espalhadas pelos dois
	 * arquivos pediam `var(--sp-5)`. Custom property que nao existe nao
	 * cai para o valor anterior da propriedade: a declaracao inteira fica
	 * invalida no calculo e a propriedade volta ao inicial, que para
	 * `padding` e `margin` e ZERO. O efeito nao e "um pouco menor", e
	 * nenhum.
	 *
	 * Foi assim que a ficha `.sis-campos` ficou sem respiro nenhum, que o
	 * `.sis-forma` encostou no titulo e na tabela, e que os botoes
	 * ficaram colados, sem que houvesse erro em lugar nenhum: o navegador
	 * descarta a declaracao em silencio e o CSS continua "valido".
	 *
	 * Escala continua ate onde ela e usada. Numero que nenhuma regra le
	 * nao entra: token cadastrado que ninguem usa e a mesma armadilha do
	 * parametro que nenhum codigo aplica. */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-12: 3rem;
	--sp-16: 4rem;

	/* Raios e sombras */
	--r-sm: 0.375rem;
	--r-md: 0.625rem;
	--r-lg: 0.875rem;
	--r-xl: 2rem;
	/* PILULA: raio maior que qualquer altura de elemento, e nao um numero
	   escolhido no olho. Serve para o que deve ficar totalmente arredondado
	   independentemente da altura, como a subaba. Entra na escala aqui
	   porque token usado sem estar definido nao avisa: ele zera a
	   propriedade, e o canto volta a reto sem erro em lugar nenhum. */
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(16, 36, 58, .08);
	--shadow-md: 0 6px 22px rgba(0, 18, 34, .22);
	--shadow-lg: 0 18px 48px rgba(0, 26, 46, .28);

	/* Layout. --header-h e a altura da aba branca, usada para afastar o
	   conteudo do topo. */
	--container: 1200px;

	/* A LARGURA DE TRABALHO DO SISTEMA, QUE NAO E A DA LANDING
	 *
	 * `--container` nasceu para a pagina de entrada, que e texto ao lado
	 * de um desenho: ali 1200px e leitura confortavel. O sistema por
	 * dentro e outra coisa. Carteira, Usuarios, Auditoria e a matriz de
	 * permissoes sao tabelas de cinco a nove colunas, e a 1200px elas
	 * apertavam a coluna do nome enquanto sobrava um palmo de cinza de
	 * cada lado num monitor de 1920.
	 *
	 * O responsavel registrou em 08/09/2026 que os `max-width`
	 * espalhados pelo sistema atrapalham. Este e o primeiro deles: o
	 * corpo passa a 1680px, que e o que um monitor de 1920 entrega com a
	 * margem lateral da tela, e continua com teto porque linha de texto
	 * corrida de ponta a ponta num monitor ultralargo nao se le. */
	--container-largo: 1680px;
	--logo-h: 84px;
	--header-h: calc(var(--logo-h) + var(--sp-8));
	/* A altura de TODO botao do sistema. Decisao do responsavel, em 10/09/2026:
	   "todos os botoes devem ter o mesmo tamanho". Ver `.botao-principal`. */
	--altura-botao: 2.375rem;
	/* A altura REAL do cabecalho fixo, que o `interface.js` mede na carga e ao
	   redimensionar. O valor daqui e o medido em 10/09/2026 no computador (65 px):
	   `--header-h` e a altura do logo com folga, e nao a da barra. */
	--altura-topo: 4.0625rem;

	--fonte: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* -----------------------------------------------------------------------
   2. Tema daisyUI "carmo"
   Sobrescreve as variaveis que os componentes do daisyUI consomem, para
   btn, card e badge sairem ja na identidade da Prefeitura.
   ----------------------------------------------------------------------- */
[data-theme="carmo"] {
	color-scheme: light;

	--color-base-100: var(--surface);
	--color-base-200: var(--surface-alt);
	--color-base-300: var(--line);
	--color-base-content: var(--ink);

	--color-primary: var(--carmo-700);
	--color-primary-content: #ffffff;
	--color-secondary: var(--carmo-900);
	--color-secondary-content: #ffffff;
	--color-accent: var(--carmo-500);
	--color-accent-content: #ffffff;
	--color-neutral: var(--ink);
	--color-neutral-content: #ffffff;

	--color-info: var(--carmo-500);
	--color-info-content: #ffffff;
	--color-success: #0f8a5f;
	--color-success-content: #ffffff;
	--color-warning: #b46b00;
	--color-warning-content: #ffffff;
	--color-error: var(--carmo-red);
	--color-error-content: #ffffff;

	--radius-selector: var(--r-sm);
	--radius-field: var(--r-sm);
	--radius-box: var(--r-lg);
	--size-selector: 0.25rem;
	--size-field: 0.25rem;
	--border: 1px;
	--depth: 0;
	--noise: 0;
}

/* -----------------------------------------------------------------------
   3. Base
   O gradiente vai no html, nao no body: o daisyUI pinta background-color
   no :root, o que impede o fundo do body de propagar para o canvas e
   deixa faixa branca sobrando.
   ----------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* `hidden` ESCONDE, EM QUALQUER ELEMENTO
   O `display: none` do atributo vem da folha do navegador, e qualquer
   `display` nosso na mesma classe o vence sem avisar. Foi assim com o
   balao (`.sis-balao { display: flex }`): o X, o Cancelar e o relogio de
   sete segundos poe `hidden`, e a caixa continuava na tela. E com o "?"
   dos avisos, que nascia escondido e aparecia mesmo sem aviso. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	min-height: 100%;
	background: var(--carmo-900);
	background-image:
		/* clarao frio no alto, luz principal */
		radial-gradient(68rem 40rem at 72% -12%, rgba(255, 255, 255, .13), transparent 60%),
		/* halo azul claro atras das engrenagens */
		radial-gradient(52rem 38rem at 78% 46%, rgba(15, 111, 181, .42), transparent 64%),
		/* peso escuro no canto inferior esquerdo, para o texto respirar */
		radial-gradient(58rem 42rem at 6% 96%, rgba(0, 33, 58, .55), transparent 66%),
		/* base do gradiente, em tres paradas */
		linear-gradient(158deg, var(--carmo-900) 0%, #004b80 46%, var(--carmo-700) 100%);
	background-attachment: fixed;
}

/* =====================================================================
   Barra de rolagem
   =====================================================================
   Nao havia estilo nenhum, entao ela saia como o navegador quisesse. No
   Windows o padrao e uma barra cinza-escura sobre trilho cinza-medio: os
   dois quase da mesma cor, e nao se enxerga onde esta o polegar nem o
   quanto falta rolar.

   O trilho passa a ser mais claro que a pagina e o polegar recebe
   contraste suficiente para ser visto de relance. `scrollbar-color` e o
   padrao (Firefox, e Chrome desde a 121); o `::-webkit-scrollbar` fica
   para as versoes que ainda nao o entendem, e as duas descrevem a mesma
   coisa de proposito.

   `scrollbar-gutter: stable` reserva o espaco da barra sempre. Sem isso a
   pagina inteira desloca alguns pixels para o lado quando o conteudo
   passa a caber, e o texto "pula" ao trocar de tela. */
:root {
	--barra-trilho:  #eef3f8;
	--barra-polegar: #a9bccd;
	--barra-polegar-ativo: #7e97ad;
}

html {
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--barra-polegar) var(--barra-trilho);
}

*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track {
	background: var(--barra-trilho);
}
*::-webkit-scrollbar-thumb {
	background: var(--barra-polegar);
	border-radius: 8px;
	/* A borda da cor do trilho afina o polegar sem encolher a area que o
	   mouse acerta: o alvo continua com 12px, e so o desenho e mais fino. */
	border: 3px solid var(--barra-trilho);
}
*::-webkit-scrollbar-thumb:hover { background: var(--barra-polegar-ativo); }
*::-webkit-scrollbar-corner { background: var(--barra-trilho); }

/* A home tem fundo azul escuro, e o trilho claro acima ficaria como uma
   listra branca colada na lateral. Aqui o trilho e um claro do proprio
   azul, e o polegar sobe mais para continuar visivel. */
body:not(.tem-sistema) {
	scrollbar-color: rgba(255, 255, 255, .45) rgba(255, 255, 255, .12);
}
body:not(.tem-sistema)::-webkit-scrollbar-track { background: rgba(255, 255, 255, .12); }
body:not(.tem-sistema)::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .45);
	border-color: transparent;
}
body:not(.tem-sistema)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .62); }

/* Coluna unica de altura cheia: header, conteudo elastico e rodape.
   E o que evita barra de rolagem na tela inicial. */
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	font-family: var(--fonte);
	font-size: var(--fs-body);
	line-height: var(--lh-base);
	color: var(--ink);
	background: transparent;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); }

p { margin: 0; }

/* -----------------------------------------------------------------------
   4. Header
   Nao e mais uma barra branca de ponta a ponta. E uma aba branca colada
   no canto superior esquerdo, com o canto direito de baixo arredondado.
   O rotulo fica solto sobre o azul, do outro lado.
   ----------------------------------------------------------------------- */
.app-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-right: var(--sp-8);
	pointer-events: none;  /* so a aba e o rotulo recebem clique */
}

.app-header__brand {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	padding: var(--sp-4) var(--sp-8);
	background: var(--surface);
	border-radius: 0 0 var(--r-xl) 0;
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.app-header__brand img {
	display: block;
	height: var(--logo-h);
	width: auto;
}

.app-header__right {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	margin-top: var(--sp-4);
}

.app-header__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .70);
	white-space: nowrap;
}

/* Botao claro. Usa o mesmo tratamento das engrenagens: degrade do branco
   para o azul mais claro da escala, contorno tenue e sombra projetada.
   E o componente de acao padrao sobre o fundo azul. */
.btn-claro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	/* A altura e a de todo botao do sistema (`--altura-botao`, 10/09/2026). A
	   pilula e o degrade continuam: e o botao da pagina publica, sobre a foto. */
	min-height: var(--altura-botao);
	padding: 0 var(--sp-6);
	border: 1px solid rgba(0, 61, 105, .12);
	border-radius: 999px;
	background: linear-gradient(160deg, #ffffff 0%, #e6f0f8 100%);
	box-shadow: 0 6px 18px rgba(0, 18, 34, .28);
	color: var(--carmo-900);
	font-family: var(--fonte);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
}

.btn-claro:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
}

.btn-claro:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   5. Conteudo e rodape
   ----------------------------------------------------------------------- */
.app-main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--header-h) + var(--sp-6)) var(--sp-6) var(--sp-4);
}

/* Texto a esquerda, engrenagens a direita. */
.app-main__inner {
	width: 100%;
	max-width: var(--container);
	display: grid;
	grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-12);
}

.app-main__visual {
	width: 100%;
	display: flex;
	justify-content: center;
}

.app-footer {
	flex: 0 0 auto;
	padding: 0 var(--sp-6) var(--sp-6);
	font-size: var(--fs-xs);
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, .55);
	text-align: center;
}

.app-footer__versao {
	margin-left: var(--sp-2);
	padding-left: var(--sp-2);
	border-left: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .42);
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   6. Hero
   ----------------------------------------------------------------------- */
.hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	text-align: left;
	color: #fff;
}

.hero h1 { color: #fff; }

.eyebrow {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .60);
}

.subtitle {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
}

.hero__orgs {
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}

.hero__orgs-line { display: block; }

.hero__orgs strong {
	font-weight: var(--fw-semi);
	color: #fff;
}

.text-muted { color: var(--ink-muted); }

/* -----------------------------------------------------------------------
   7. Engrenagens (modulos do integrador)
   Geometria adaptada do pen "Engrenages SVG" (MIT). Cores e rotulos nossos.
   ----------------------------------------------------------------------- */
.gears {
	width: 100%;
	max-width: 880px;
	/* O freio e inline-flex, entao ele acompanha o alinhamento do texto. A
	   direita ele fica sob a borda das engrenagens e le como parte delas; a
	   esquerda ficava solto no meio da pagina. */
	text-align: right;
}

.gears__svg {
	display: block;
	width: 100%;
	height: auto;
	/* Teto de altura: e o que garante que a pagina inteira caiba na tela
	   sem barra de rolagem. O SVG reduz sozinho, sem distorcer. */
	max-height: 56dvh;
	filter: drop-shadow(0 10px 22px rgba(0, 18, 34, .38));
}

/* -----------------------------------------------------------------------
   O FREIO DAS ENGRENAGENS SAIU

   Existiu por algumas horas em 10/09/2026: um campo "Parar a animacao" abaixo
   das engrenagens, porque a animacao engasgava em PC com GPU fraca (o
   `drop-shadow` do SVG e refeito a cada quadro). O responsavel pediu a
   retirada: "na landing do site remover check de parar animacao".

   `prefers-reduced-motion` continua desligando o giro para quem pediu isso ao
   sistema operacional.
   ----------------------------------------------------------------------- */

.gear { cursor: pointer; }

/* So a silhueta gira. O rotulo fica parado, senao ficaria de cabeca para
   baixo metade do tempo. */
.gear__spin {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	/* A reserva acompanha a escala do partial: todas as engrenagens
	   declaram `--giro`, entao ela nunca e usada hoje. Deixa-la em 120s
	   faria a primeira engrenagem que esquecesse de declarar girar tres
	   vezes mais rapido que as vizinhas, e parecer defeito de mecanismo. */
	animation: gear-turn var(--giro, 720s) linear infinite;
}

.gear--rev .gear__spin { animation-direction: reverse; }

@keyframes gear-turn {
	to { transform: rotate(360deg); }
}

.gear__shape {
	stroke: rgba(0, 61, 105, .12);
	stroke-width: 0.5;
	transition: filter .18s ease;
}

.gear__label {
	font-family: var(--fonte);
	font-weight: var(--fw-bold);
	font-size: var(--fs, 9px);
	letter-spacing: 0.01em;
	fill: var(--carmo-900);
	pointer-events: none;
}

/* Escala de cinco azuis, cada um com degrade proprio no <defs> do SVG.
   Todos mais claros que o fundo, para a peca nao sumir. O rotulo e sempre
   azul escuro: da 4.74:1 ate no tom mais fundo. */
.gear--a1 .gear__shape { fill: url(#grad-a1); }
.gear--a2 .gear__shape { fill: url(#grad-a2); }
.gear--a3 .gear__shape { fill: url(#grad-a3); }
.gear--a4 .gear__shape { fill: url(#grad-a4); }
.gear--a5 .gear__shape { fill: url(#grad-a5); }

.gear:hover .gear__shape,
.gear:focus-visible .gear__shape {
	filter: brightness(1.06) drop-shadow(0 3px 7px rgba(0, 20, 38, .40));
}

.gear:focus-visible { outline: none; }
.gear:focus-visible .gear__label { text-decoration: underline; }

/* Lista equivalente, para telas onde o desenho nao cabe legivel. */
.mods { display: none; }

.mods ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-2);
	width: 100%;
	max-width: 26rem;
}

.mods .btn-claro {
	width: 100%;
	padding-inline: var(--sp-3);
}

/* -----------------------------------------------------------------------
   8. Responsivo
   ----------------------------------------------------------------------- */
@media (max-width: 960px) {
	:root { --logo-h: 64px; }

	.app-main__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-8);
		justify-items: center;
	}

	.hero {
		align-items: center;
		text-align: center;
	}

	.gears__svg { max-height: 46dvh; }
}

@media (max-width: 640px) {
	:root { --logo-h: 48px; }

	.app-header { padding-right: var(--sp-4); }
	.app-header__brand { padding: var(--sp-3) var(--sp-4); }
	.app-header__label { display: none; }

	/* Abaixo disso os rotulos dentro das engrenagens ficariam ilegiveis. */
	.gears { display: none; }
	.mods { display: flex; justify-content: center; width: 100%; }
}

/* QUEM PEDE MENOS MOVIMENTO RECEBE NENHUM
 *
 * ISTO ERA `animation-duration: 0.01ms`, E FAZIA O CONTRARIO DO QUE PARECE
 *
 * O responsavel encontrou em 09/09/2026: "em alguns PCs, na landing, as
 * engrenagens estao rodando o tempo todo".
 *
 * A regra anterior e um trecho conhecido, copiado por toda a internet, e ele
 * funciona para transicao e para animacao que ACABA: encurtar a duracao faz o
 * efeito terminar antes de ser visto. Para animacao `infinite` ele nao encurta
 * coisa nenhuma: encurta o CICLO.
 *
 * As engrenagens giram em `var(--giro)`, de 306s a 852s por volta, e sao a
 * unica animacao infinita do sistema. Com a duracao em 0,01 ms cada volta
 * passa a durar 0,01 ms: CEM MIL VOLTAS POR SEGUNDO. Medido no proprio
 * navegador, com `getComputedStyle`, que devolveu `1e-05s` e
 * `iteration-count: infinite`.
 *
 * POR QUE SO EM ALGUNS PCs
 *
 * Porque so vale para quem pediu menos movimento. No Windows isso e "Mostrar
 * animacoes" desligado, e vem desligado em boa parte das maquinas geridas por
 * TI e em modo de economia de bateria. Nessas, a engrenagem que deveria levar
 * catorze minutos por volta pisca no ritmo do monitor; nas outras, ela arrasta
 * meio grau por segundo e ninguem repara.
 *
 * E o pior efeito possivel para uma regra de acessibilidade: ela transforma o
 * pedido de "menos movimento" em estroboscopio, e ainda obriga o navegador a
 * redesenhar um SVG de 880px com `drop-shadow` a cada quadro, para sempre.
 *
 * A LANDING NAO CARREGA `sistema.css`, E LA A REGRA JA ESTAVA CERTA
 *
 * `sistema.css`, que so as telas autenticadas carregam, sempre disse
 * `animation: none !important`. As duas versoes conviveram sem se encontrar,
 * porque a unica animacao infinita mora justamente na unica pagina que carrega
 * so este arquivo.
 *
 * `animation: none` E SEGURO PARA AS QUATRO ANIMACOES QUE EXISTEM
 *
 * Conferidas uma a uma: `gear-turn` para de girar; `modal-entra` e
 * `modal-entra-baixo` animam `opacity: 0 -> 1`, e sem animacao a caixa fica na
 * opacidade natural, que e 1, visivel; `captchaTreme` deixa de sacudir. Nenhuma
 * delas depende do estado final da animacao para aparecer, que e o unico caso
 * em que encurtar seria melhor que desligar. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
   Bloco de JSON, para o manual de integracao

   Ele existe porque o manual que vai para a empresa de tributos precisa
   mostrar corpo de requisicao e de resposta, e JSON sem largura fixa e sem
   rolagem propria empurra a pagina inteira para o lado.

   A ROLAGEM E DO BLOCO, E NUNCA DA PAGINA. Corpo que rola na horizontal e o
   defeito que a secao 8 do CLAUDE.md descreve para tabela larga, e JSON e
   pior: uma linha comprida basta.

   O corpo continua no teto do sistema: `--fs-sm`, e nunca `font-size` cru.
   --------------------------------------------------------------------- */
.sis-json {
	font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
	font-size: var(--fs-sm);
	line-height: 1.5;
	/* `--surface-alt` e o cinza claro que a escala ja tem. Inventar um
	   `--carmo-50` so para este bloco seria um token novo para um uso so, e
	   a secao 8 do CLAUDE.md e clara: token novo entra na definicao antes de
	   ser usado, e a escala nao ganha degrau por conveniencia. */
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: var(--sp-3);
	margin: 0 0 var(--sp-3);
	overflow-x: auto;
	white-space: pre;
	tab-size: 2;
}

.sis-json__rotulo {
	display: block;
	font-family: var(--fonte);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	margin: 0 0 var(--sp-1);
}

/* No papel o fundo cinza vira mancha e o traco some. A borda fica, o fundo
   sai, e a rolagem nao existe: quem imprime precisa que a linha quebre. */
@media print {
	.sis-json { background: none; white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* =====================================================================
   Formulario e aviso
   =====================================================================
   Estas pecas moravam em sistema.css, que so as telas autenticadas
   carregam. Estavam no lugar errado desde o inicio: a entrada e a porta
   do sistema, e nao uma tela de dentro dele. Enquanto o login foi uma
   pagina separada isso nao incomodou, porque a pagina carregava os dois
   arquivos; com o formulario dentro da home, o modal apareceria sem
   estilo nenhum.

   Ficam aqui, na base, que os dois lados carregam. */

.campo { margin-bottom: var(--sp-4); }
.campo label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	color: var(--ink);
	margin-bottom: var(--sp-1);
}
/* `select` e `textarea` entram junto com `input`, e nao por simetria:
   so o `input` estava estilizado, entao todo formulario com lista de
   opcoes misturava campo do sistema com campo cru do navegador, com
   altura, fonte e borda diferentes na mesma linha. */
.campo input,
.campo select,
.campo textarea {
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-body);
	font-family: inherit;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
}
.campo textarea { min-height: 6rem; resize: vertical; line-height: var(--lh-base); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: 2px solid var(--carmo-500);
	outline-offset: 1px;
	border-color: var(--carmo-500);
}
.campo input:disabled,
.campo select:disabled { background: var(--surface-muted, #f4f6f8); color: var(--ink-muted); }
.campo__ajuda { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-1); }

/* UMA GEOMETRIA SO PARA TODO BOTAO, DECIDIDA EM 10/09/2026
 *
 * Do responsavel: "todos os botoes devem ter o mesmo tamanho", e antes, sobre a
 * tabela de permissoes, "botao nao deve ser full width".
 *
 * `.botao-principal` nascia com `width: 100%` e letra de corpo, e cada contexto o
 * reduzia de um jeito: o modal, o filtro, o formulario, a linha da tabela. O
 * `.botao-acao` era menor, de letra miuda. Resultado: nenhum par de botoes lado a
 * lado saia do mesmo tamanho, e o ultimo pedido foi o terceiro sobre isso.
 *
 * Agora a altura, a letra e o recuo sao os mesmos para os dois, e ficam aqui. A
 * COR continua sendo a diferenca, e isso segue a decisao de 09/09/2026 escrita em
 * `.botao-principal--cuidado`: mesma geometria, peso diferente. Contexto nenhum
 * redefine altura nem letra; o que um contexto ainda pode fazer e dizer a
 * largura, como o modal no celular.
 *
 * `inline-flex` pelo icone: com `inline-block`, icone e rotulo eram conteudo em
 * linha, e no botao do extrato em CSV o icone ficava EM CIMA do texto. A borda
 * transparente existe para a altura bater com a do `.botao-acao`, que tem borda:
 * sem ela, os dois diferiam em dois pixels, e lado a lado isso se ve. */
.botao-principal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: auto;
	min-height: var(--altura-botao);
	padding: 0 var(--sp-4);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
	background: var(--carmo-700);
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
}
.botao-principal:hover { background: var(--carmo-900); }
.botao-principal:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* A MESMA GEOMETRIA, O PESO DIFERENTE
 *
 * Do responsavel, em 09/09/2026: "os botoes ficaram 1 gigante e outro menor,
 * padronizar visualmente na tela".
 *
 * Ele estava vendo dois atos irmaos desenhados em escalas diferentes: um
 * `.botao-principal`, que ocupa a largura toda, e um `.botao-acao`, que e miudo
 * e de texto pequeno. Lado a lado, o tamanho dizia que um importava mais que o
 * outro, e nao e disso que se trata: os dois aprovam, e um deles aprova o que
 * falhou numa conferencia.
 *
 * Igualar os dois em `.botao-principal` tambem estaria errado, e a regra esta
 * escrita em `.botao-acao--cuidado`: a acao que desliga nao pode ter o mesmo
 * peso da que constroi. Entao a geometria e a mesma e a cor nao e: quem olha ve
 * dois atos do mesmo tamanho, e um deles pede atencao.
 *
 * O vermelho e o mesmo de `.botao-acao--cuidado`, para que cuidado tenha uma
 * cor so no sistema. */
.botao-principal--cuidado { background: #9b2c2c; }
.botao-principal--cuidado:hover { background: #7c2323; }

/* O botao que ABRE um modal e um link, e nao um `<button>`: ele navega
   para o endereco que contem o formulario, e por isso funciona sem
   script, abre em outra aba e o "voltar" do navegador entende.
   `--linha` porque ele fica no meio do texto da tela, e nao ocupando a
   largura toda como o botao que grava dentro de um formulario. */
.botao-principal--linha {
	/* `inline-flex`, e nao `inline-block`, POR CAUSA DO ICONE
	 *
	 * Com `inline-block` o icone e o rotulo sao conteudo em linha, e a
	 * largura do botao foi calculada como se o icone nao estivesse la: a
	 * faisca ficava numa linha e "Gerar o texto com IA" na de baixo,
	 * dentro do mesmo botao. `.botao-acao` ja era `inline-flex` com `gap`,
	 * e por isso os icones dele nunca deram esse problema.
	 *
	 * `nowrap` porque rotulo de botao nao quebra: se nao couber, quem tem
	 * de mudar e o rotulo, e nao a caixa. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	white-space: nowrap;
	width: auto;
	text-decoration: none;
	text-align: center;
}

/* O BOTAO OCUPADO: UM SEGUNDO GIRANDO, E O SEGUNDO CLIQUE RECUSADO
 *
 * Do responsavel, em 11/09/2026: "feedback de clique em todos os botoes, para
 * evitar clique duplo sempre". Quem marca e desmarca e `clique-unico.js`.
 *
 * O rotulo fica transparente e o giro vai POR CIMA dele, e nao ao lado: o
 * botao mantem a largura exata, e a linha de botoes nao se mexe no clique. A
 * cor do giro e a do rotulo, lida pelo script antes de apaga-lo, entao ele
 * sai branco no `.botao-principal` e escuro no `.botao-acao`.
 *
 * Quem pediu menos animacao ao sistema operacional ve o anel parado: a regra
 * global de `prefers-reduced-motion` deste arquivo zera todo `animation`.
 *
 * SEM `pointer-events: none`, DE PROPOSITO
 *
 * Foi a primeira versao, e na bancada o segundo clique ATRAVESSOU o botao: caiu
 * no paragrafo de tras, que selecionou o texto e fez o rotulo transparente
 * reaparecer pintado pela selecao. Com uma linha de tabela clicavel atras, seria
 * a linha que receberia o clique. Quem recusa e a escuta de captura do script,
 * que ve o clique chegar no proprio botao. */
.sis-ocupado {
	color: transparent !important;
	cursor: progress;
	user-select: none;
}
.sis-ocupado--ancora { position: relative; }
input.sis-ocupado { color: inherit !important; opacity: .6; }
.sis-giro {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	border: 2px solid var(--giro-cor, currentColor);
	border-right-color: transparent;
	border-radius: 50%;
	animation: sis-giro .7s linear infinite;
}
@keyframes sis-giro { to { transform: rotate(360deg); } }

/* --- Icone -----------------------------------------------------------
 *
 * A APARENCIA INTEIRA MORA AQUI, E NAO DENTRO DA FOLHA
 *
 * Os simbolos sao gravados sem `stroke`, `stroke-width` nem os remates,
 * de proposito: atributo de apresentacao dentro do `<symbol>` venceria
 * esta regra, e mudar o peso do tracado passaria a exigir remontar a
 * folha. Ver o comentario em app/bin/icones.php.
 *
 * As quatro propriedades abaixo sao HERDADAS, e e por isso que elas
 * atravessam o `<use>` e alcancam o desenho, que vive numa arvore
 * sombra: CSS de fora nao estiliza o conteudo de um `<use>`, mas
 * heranca passa.
 *
 * O TAMANHO E EM `em`, E NAO EM PIXEL
 *
 * O icone acompanha o corpo do texto ao lado. O mesmo desenho serve o
 * botao da coluna de acoes, em `--fs-xs`, e o botao que grava, em
 * `--fs-body`, sem uma classe de tamanho para cada. `1.15em` porque o
 * traco da Lucide e desenhado numa caixa de 24 com respiro: a `1em` ele
 * parece menor que a letra maiuscula ao lado.
 *
 * `flex: 0 0 auto` porque o botao e `inline-flex`, e sem isso o icone
 * encolhe quando o rotulo e longo, virando um risco achatado.
 * --------------------------------------------------------------------- */
.ico {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	vertical-align: -0.18em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* SEM TETO DE LARGURA, E EM `ch` MUITO MENOS
 *
 * Ele teve um `max-width: 108ch` por algumas horas, pela regra tipografica
 * da linha confortavel. O responsavel decidiu em 08/09/2026 que teto em
 * `ch` sai do sistema inteiro, e o motivo esta na secao 8 do CLAUDE.md: a
 * medida nao se enxerga na tela, entao ninguem sabe onde a caixa vai
 * terminar antes de abrir o navegador.
 *
 * O aviso acompanha a largura do conteudo, como o resto. */
.sis-aviso {
	border: 1px solid #f0dfb8;
	background: #fdf9f0;
	color: #6b4700;
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-4);
}
.sis-aviso--erro { border-color: #f3d2d2; background: #fdf1f1; color: #9b2c2c; }

/* =====================================================================
   Modal de entrada
   =====================================================================
   Sem script. O servidor desenha o modal ja aberto quando ha razao para
   isso: alguem pediu para entrar, ou o login falhou e a mensagem precisa
   voltar no mesmo lugar onde foi digitada.

   Fechar e um link para a home. Vale para o X e para o fundo, entao
   clicar fora fecha, que e o que se espera de um modal, e continua
   valendo sem JavaScript. */

/* NENHUM MODAL DO SISTEMA APARECIA, E O CULPADO ERA UM NOME REPETIDO
 *
 * O daisyUI, que entra antes deste arquivo, define a SUA `.modal` com
 * `visibility: hidden` e `pointer-events: none`, porque la o modal so
 * aparece quando ganha `.modal-open`. Este arquivo redefinia `.modal`
 * com posicao, empilhamento e alinhamento, e nunca tocava naquelas duas
 * propriedades: elas sobreviviam intactas.
 *
 * O resultado era invisivel no sentido literal. O HTML do modal estava
 * na pagina, correto, com titulo, formulario e botao, e o navegador nao
 * desenhava nada. Oito telas usam `Pagina::modalAbrir`, e em todas o
 * clique parecia nao fazer efeito nenhum.
 *
 * E o mesmo tipo de defeito do token que nao existe, ja registrado na
 * secao 8 do CLAUDE.md: a regra some sem erro, sem aviso e sem rastro,
 * e so a tela denuncia. A diferenca e que aqui a causa vem de fora.
 *
 * A licao que fica: classe nossa com nome de classe do daisyUI precisa
 * declarar TUDO o que a de la declara, ou usar outro nome. Hoje sao
 * duas: `.modal` e `.hero`.
 */
/* O FUNDO COBRE A JANELA INTEIRA, INCLUSIVE A FAIXA DA BARRA DE ROLAGEM
 *
 * O `html` reserva o espaco da barra sempre (`scrollbar-gutter: stable`, para a
 * pagina nao pular quando a barra aparece), e um fixo com `inset: 0` termina
 * antes dessa faixa. Medido em 10/09/2026, para o T74, a 1366 px: todo modal saia
 * 5 px a esquerda do centro da janela, que e metade da faixa. Com `100vw` e
 * `right: auto` o fundo vai ate a borda, o centro e o da janela, e a faixa da
 * barra escurece junto com o resto. No celular a barra nao ocupa espaco, e nada
 * muda. */
.modal {
	position: fixed;
	inset: 0;
	right: auto;
	width: 100vw;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-6);
	visibility: visible;
	pointer-events: auto;
	overflow: visible;
	transition: none;
}

/* O fundo e um link que cobre a tela inteira. Fica ABAIXO da caixa na
   ordem de empilhamento, senao ele interceptaria o clique nos campos. */
.modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(0, 18, 34, .62);
	backdrop-filter: blur(2px);
}

/* COM MODAL ABERTO, QUEM ROLA E O MODAL
 *
 * A caixa sempre rolou por dentro, com `max-height` e `overflow-y: auto`.
 * O que incomodava era a PAGINA continuar rolando atras dela: a tela de
 * Documentos e longa, entao a barra da direita seguia ali, e mexer nela
 * arrastava o fundo enquanto a peca ficava parada. Duas barras, e a de
 * fora nao fazia o que se esperava.
 *
 * `:has()` resolve sem JavaScript: se existe um `.modal` na pagina, o
 * corpo para de rolar. O modal e servido pelo servidor e so existe no
 * HTML quando esta aberto, entao a condicao e exata.
 */
body:has(.modal) { overflow: hidden; }

/* A CAIXA NAO ROLA. QUEM ROLA E O CORPO
 *
 * Ela rolava, e o efeito era o que o responsavel descreveu: a barra de
 * rolagem aparecia por FORA do conteudo, levando junto o titulo e o botao
 * de gravar. Num formulario alto, gravar saia da tela e era preciso rolar
 * o modal inteiro para reencontra-lo.
 *
 * O comentario de `.modal__corpo`, logo abaixo, ja PROMETIA este
 * comportamento: "o corpo rola, e o titulo com as acoes ficam parados". A
 * regra dele nunca fez isso, so definia uma margem. Era intencao escrita
 * sem nada a fazendo valer, e o defeito ficou de pe ate alguem reclamar.
 *
 * `overflow: hidden` aqui e o que impede a caixa de crescer alem do teto e
 * de criar a sua propria barra. */
.modal__caixa {
	position: relative;
	z-index: 1;
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-8);
	width: 100%;
	max-width: 24rem;
	max-height: calc(100dvh - var(--sp-6) * 2);
	overflow-y: auto;
}

/* SO A CAIXA QUE TEM CORPO VIRA COLUNA, E ISSO NAO E DETALHE
 *
 * A primeira versao desta correcao virou TODA caixa em coluna de flex, e
 * isso quebrou o modal de entrada de duas maneiras.
 *
 * A primeira foi vista em foto, a 900 por 380: com `overflow: hidden` na
 * caixa e sem corpo para rolar, o campo de senha ficava cortado e o botao
 * Entrar sumia da tela, sem barra de rolagem nenhuma. Ninguem entrava no
 * sistema. `index.php` monta o login como `<form class="modal__caixa">`
 * direto, e a marca, o titulo e os campos sao filhos da caixa.
 *
 * A segunda so apareceu ao medir, e e mais silenciosa: filho de flex
 * encolhe por padrao. Numa coluna apertada, a marca e os campos do login
 * seriam espremidos em vez de rolar, e o modal ficaria funcional e
 * estranho, que e pior de diagnosticar do que quebrado.
 *
 * Por isso o recorte e por ESTRUTURA e nao por tela: caixa com corpo
 * ganha a coluna e delega a rolagem ao corpo; caixa sem corpo continua
 * exatamente como sempre foi. Modal novo sem corpo funciona sem ninguem
 * lembrar desta linha.
 *
 * A regressao estava na porta da frente e passaria despercebida em
 * monitor grande, que e onde se desenvolve. */
.modal__caixa:has(.modal__corpo) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal__fechar {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-4);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink-muted);
	text-decoration: none;
}
.modal__fechar:hover { color: var(--ink); }

/* O DESLIZE E O BOTAO, LADO A LADO
 *
 * Pedido do responsavel, em 10/09/2026: o deslize "ao lado do botao".
 *
 * `flex-wrap` e o que faz isso continuar certo em tela estreita: onde os dois
 * nao cabem na mesma linha, o deslize fica em cima e o botao embaixo, com
 * largura cheia. Sem ele, o trilho encolheria ate nao caber o dedo, que e o
 * gesto que o controle inteiro existe para pedir. */
.entrar__acoes {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	/* SEM QUEBRA: OS DOIS FICAM SEMPRE NA MESMA LINHA
	 *
	 * Decisao do responsavel, em 10/09/2026: "deslize sempre na mesma linha ao
	 * lado do botao". A primeira versao quebrava em tela estreita, e ele
	 * preferiu a linha unica.
	 *
	 * Quem encolhe e o deslize, e nunca o botao: `Entrar` com o texto
	 * espremido deixa de parecer botao, e o trilho aguenta encolher porque o
	 * pino tem largura fixa e o rotulo ja corta com reticencias. */
	flex-wrap: nowrap;
}
.entrar__acoes .captcha-deslize {
	/* Base zero e o que permite encolher ate o minimo declarado abaixo, em vez
	   de partir de 11rem e empurrar o botao para fora. */
	flex: 1 1 0;
	min-width: 7.5rem;
	margin-bottom: 0;
}
/* O BOTAO PRECISA DE `width: auto`, E ISSO NAO E REDUNDANCIA
 *
 * `.botao-principal` nasce com `width: 100%`, porque em toda outra tela ele e
 * o unico da linha. Como item de flex, `flex-basis: auto` LE essa largura: o
 * botao reivindicava os 100% e espremia o deslize ate o rotulo "Segure e
 * deslize" ficar coberto pelo pino, ilegivel. Visto em foto, a 500 px.
 *
 * Ele nao encolhe e nao cresce: fica do tamanho do texto dele, e o que sobra
 * e do trilho, que e quem precisa de espaco para o dedo. */
.entrar__acoes .botao-principal {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
}
.modal__fechar:focus-visible { outline: 2px solid var(--carmo-500); outline-offset: 2px; }

/* A marca na caixa de entrada.
 *
 * `height` fixo em 54px deixava o brasao pequeno demais para o que ele e
 * ali: a unica identificacao visual de que aquela caixa e da Prefeitura,
 * e o que a pessoa olha antes de digitar a senha. Passa a acompanhar a
 * largura da caixa, com teto, entao cresce na tela grande e nao estoura
 * no telefone.
 *
 * `max-width` em vez de `width` para a imagem nunca passar da caixa, e
 * `height: auto` para a proporcao 887x365 do arquivo ser respeitada. */
.modal__marca {
	text-align: center;
	margin-bottom: var(--sp-6);
}
.modal__marca img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 15rem;
	height: auto;
}

.modal__caixa h2 {
	font-size: var(--fs-h3);
	color: var(--carmo-900);
	margin: 0 0 var(--sp-1);
	text-align: center;
}
.modal__nota {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	text-align: center;
	margin: 0 0 var(--sp-6);
}
.modal__rodape { text-align: center; margin-top: var(--sp-4); }

.hero__saiu {
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .82);
}

/* A caixa entra com um movimento curto. Quem pediu menos animacao no
   sistema operacional nao recebe nenhum: a regra global de
   prefers-reduced-motion deste arquivo zera a duracao com !important, e
   por isso vence mesmo estando escrita antes daqui. */
@keyframes modal-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.modal__caixa { animation: modal-entra .16s ease-out; }

/* ---------------------------------------------------------------------
   Modal de FORMULARIO, dentro do sistema

   O modal de entrada e estreito porque tem dois campos. Formulario de
   tela interna tem seis, oito, e alguns lado a lado: na largura de 24rem
   eles empilham numa coluna comprida que nao cabe na altura da janela.

   Sao tres larguras, e nao uma so ajustavel: largura declarada no PHP
   vira decisao registrada, e nao um numero escolhido no olho a cada tela.
   --------------------------------------------------------------------- */
.modal__caixa--estreito { max-width: 24rem; }
.modal__caixa--medio    { max-width: 34rem; }
.modal__caixa--largo    { max-width: 52rem; }

/* O titulo do modal de formulario alinha a esquerda. O da entrada e
   centralizado porque acompanha a marca; aqui nao ha marca, e titulo
   centralizado sobre campos alinhados a esquerda fica torto. */
.modal__titulo {
	font-size: var(--fs-h3);
	color: var(--carmo-900);
	margin: 0 0 var(--sp-1);
	padding-right: var(--sp-6);   /* espaco do X, que e absoluto */
}
.modal__subtitulo {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin: 0 0 var(--sp-5);
}

/* O corpo rola, e o titulo com as acoes ficam parados. Sem isto, num
   formulario alto o botao de gravar sai da tela e a pessoa precisa rolar
   o modal inteiro para achar.

   `min-height: 0` NAO E ENFEITE, E E A LINHA QUE FAZ ISTO FUNCIONAR

   Item de flex tem tamanho minimo automatico igual ao do seu conteudo, e
   por isso ele se recusa a encolher: sem esta linha, o corpo cresce ate
   caber tudo, empurra a caixa, e o `overflow-y` nunca chega a valer. A
   regra parece completa, e nao faz nada. */
.modal__corpo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin-bottom: var(--sp-2);
	/* Espaco para a barra nao encostar no conteudo. */
	padding-right: var(--sp-2);
	margin-right: calc(var(--sp-2) * -1);
}

/* AS ACOES GRUDAM NO FIM DO CORPO QUE ROLA
 *
 * Elas moram DENTRO do `<form>`, que mora dentro do corpo, entao rolariam
 * junto com os campos. `sticky` as mantem visiveis no pe do modal enquanto
 * o resto rola, sem precisar mudar o HTML de nenhuma das telas que ja
 * chamam `modalAcoes`.
 *
 * O fundo opaco e obrigatorio: sem ele os campos passariam POR TRAS do
 * botao de gravar, e a leitura ficaria embaralhada exatamente onde a
 * pessoa vai clicar. */
.modal__acoes {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-2);
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.modal__acoes .botao-principal { width: auto; }

/* Cancelar e link, e nao botao: ele nao envia nada, so navega. Fica com
   peso visual menor de proposito, porque a acao principal e a outra. */
/* O CANCELAR CONTINUA LINK, COM CARA DO BOTAO AO LADO
 *
 * Ele e `<a>` de proposito, e isso nao muda: nao envia nada, e navegacao, abre em
 * outra aba e o "voltar" entende (ver `Pagina::modalAcoes`). O que muda e o
 * desenho. Do responsavel, em 10/09/2026: "padronizar no sistema o tamanho de
 * todos os botoes, o sistema deve ter consistencia visual". Texto solto ao lado de
 * um botao de 38 px era o unico par desigual que sobrava em todo modal. Agora ele
 * tem a geometria e o contorno do `.botao-acao`, e a cor apagada diz que e o gesto
 * que nao grava. */
.modal__cancelar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--altura-botao);
	padding: 0 var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--ink-muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	white-space: nowrap;
}
.modal__cancelar:hover { color: var(--ink); border-color: var(--ink-muted); background: var(--surface-alt); }

.modal__nota-acao {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	margin: var(--sp-3) 0 0;
}

/* ---------------------------------------------------------------------
   Modal no telefone

   Em tela pequena o modal deixa de ser uma caixa flutuante e vira a
   propria tela: colado embaixo, ocupando a largura toda, com o topo
   arredondado. E o formato que o dedo alcanca, e a caixa centralizada com
   margem dos dois lados desperdicaria a largura que ja falta.

   `100dvh` e nao `100vh`: o `vh` do celular conta a barra de endereco
   como se ela nao existisse, e o rodape do modal fica escondido atras
   dela justamente onde estao os botoes.
   --------------------------------------------------------------------- */
/* O MODAL FICA CENTRALIZADO NO CELULAR TAMBEM
 *
 * Decisao do responsavel, em 10/09/2026: "em mobile manter o modal
 * centralizado".
 *
 * Ate aqui ele era uma folha colada no rodape, com o canto arredondado so em
 * cima. O argumento era o alcance do dedo, e ele nao se sustentou na tela de
 * entrada: o modal de login e alto, com marca, titulo, dois campos, o deslize
 * e o botao. Colado embaixo, o topo dele saia da tela e a marca ficava cortada
 * justamente na primeira coisa que a pessoa ve do sistema.
 *
 * Centralizado, a caixa sobra dos dois lados e a rolagem, quando precisa, e
 * dela e nao da pagina. */
@media (max-width: 640px) {
	.modal {
		padding: var(--sp-3);
		align-items: center;
	}
	.modal__caixa,
	.modal__caixa--estreito,
	.modal__caixa--medio,
	.modal__caixa--largo {
		max-width: none;
		width: 100%;
		/* Item de flex nasce com `min-width: auto` e nao encolhe abaixo do
		 * conteudo. A caixa virou item de flex ao ser centralizada, entao
		 * `min-width: 0` deixa a largura declarada valer. Preventivo: nao
		 * havia vazamento medido, e sem ele um conteudo largo o produziria. */
		min-width: 0;
		max-height: calc(100dvh - var(--sp-3) * 2);
		padding: var(--sp-5);
		border-radius: var(--r-lg);
	}
	.modal__caixa { animation: modal-entra .18s ease-out; }

	/* O X fica pequeno demais para o dedo no tamanho de leitura. */
	.modal__fechar {
		font-size: 1.75rem;
		padding: var(--sp-2);
		top: var(--sp-1);
		right: var(--sp-2);
	}

	/* Botao de largura cheia, e Cancelar embaixo: um do lado do outro em
	   tela estreita deixa os dois pequenos, e o Cancelar acaba recebendo
	   o toque que era para o outro. */
	.modal__acoes { gap: var(--sp-3); }
	.modal__acoes .botao-principal,
	.modal__acoes .botao-acao { width: 100%; }
	.modal__cancelar { width: 100%; }
}

@media (max-width: 480px) {
	.modal__caixa { padding: var(--sp-4); }
}