/*
 * A FOLHA DE COMPONENTE — o revestimento do Angular Material.
 *
 * Ela existe para dar forma moderna aos marcadores que as 323 views JÁ escrevem, sem tocar em
 * nenhuma delas (ADR-001). `md-card`, `md-whiteframe-z2`, `md-button`, `md-input-container`,
 * `md-dialog` e `md-list-item` continuam exatamente como estão no HTML; o que muda é o que esta
 * folha diz sobre eles. É por isso que o diff da task que a preenche NÃO PODE conter um `.phtml`
 * sequer — se contiver, a camada falhou e virou reescrita de views.
 *
 * POSIÇÃO NA ORDEM DE CARGA: depois de `style.css`, antes de `tema-escuro.css` e de `foco.css`
 * (ADR-017). Ela precisa vencer as folhas de tela, e precisa perder para o tema escuro e para o
 * indicador de foco — que são, nesta ordem, correção de tema e correção de acessibilidade, e as
 * duas têm a última palavra. Sem `@layer`: a ordem de carga continua sendo a alavanca, e
 * `MolduraComTemaTest` cobra a posição nas quatro molduras.
 *
 * TUDO AQUI LÊ TOKEN. Nenhuma cor literal — `CorLiteralForaDaPaletaTest` varre este diretório e
 * recusa —, nenhum pixel avulso de espaço, raio, sombra, duração ou camada: eles têm nome em
 * `paleta.css` e é de lá que vêm.
 *
 * A task_01 a criou VAZIA e a ligou às quatro molduras; foi isso que permitiu que a task_02 —
 * esta — fosse só CSS, sem um `.phtml` no diff.
 *
 * COMO ELA É VERIFICADA, e por que isto está no cabeçalho. Uma regra desta folha que PERCA para a
 * biblioteca não gera erro: gera o valor antigo, em silêncio, numa tela que ninguém abriu. Ler
 * este arquivo diz o que foi declarado; só `getComputedStyle` diz o que venceu (ADR-007). Dois
 * portões de navegador medem isto na pilha no ar, nos dois temas:
 *
 *     node test/Browser/portao-de-geometria.js   sombra, raio, contorno, botão, listagem, diálogo
 *     node test/Browser/portao-de-campo.js       a posição do rótulo nos quatro estados
 *
 * Eles não são conferência posterior. Na primeira execução acharam quatro defeitos que a leitura
 * desta folha dava por corretos — entre eles um `box-shadow: none` escrito num seletor de elemento
 * que perdia para a classe da biblioteca em 214 views, e um `font-size` num `md-card-content` que
 * derrubava o campo de busca do produto de volta aos 12px de antes do piso do DESIGN.md. Quem
 * mexer aqui roda os dois, e roda também `portao-do-tema.js` e `portao-da-busca.js`, que medem
 * superfícies que estas regras atravessam.
 */

/* ============================================================================================
 * 1. CONTÊINER — `md-whiteframe`, `md-card`
 *
 * Gancho medido: `md-whiteframe-z2` em 214 views (335 ocorrências). É o mais repetido do produto
 * e o que mais o data: um cartão de canto quase reto com sombra difusa por baixo é a assinatura
 * de Material Design 1.
 *
 * `z1`, `z2` e `z3` recebem O MESMO tratamento plano, e o nível declarado deixa de ter efeito
 * visual em repouso (US-001.EC-2). Não é descuido: a elevação por sombra permanente é o que sai,
 * e manter três sombras diferentes seria manter o defeito em três intensidades. `z1` não aparece
 * em view nenhuma hoje e `z3` em duas — a regra existe para que a próxima não nasça diferente.
 * ========================================================================================== */

md-whiteframe,
md-card {
	background-color: var(--superficie);

	/*
	 * A TARJA DO RÓTULO FLUTUANTE lê este token (seção 5). Ele é CONTEXTUAL: nasce na raiz valendo
	 * o fundo da página, e toda regra que pinta uma superfície o redeclara com a mesma cor, para
	 * que a herança leve até o campo a cor exata que está atrás dele (ADR-008 do polimento-ui).
	 * `FundoDoCampoPorSuperficieTest` cobra a declaração em toda regra de superfície.
	 */
	--fundo-do-campo: var(--superficie);

	/*
	 * LONGHANDS, e não o atalho `border: var(--contorno)`. Medido neste repositório em
	 * 2026-09-21: um atalho que contém `var()` vira um "valor de substituição pendente", e uma
	 * regra POSTERIOR e MAIS ESPECÍFICA que declare só `border-color: var(--outro)` perde para
	 * ele — o Chrome reexpande o atalho na hora de computar e reescreve a cor por cima. O
	 * defeito é mudo: a regra aparece casada e vencedora em `CSS.getMatchedStylesForNode`, e o
	 * computado continua sendo o da outra. Foi assim que o campo desabilitado saiu com a borda
	 * do campo normal. Longhand a longhand, a cascata volta a se comportar como se lê.
	 */
	border-width: 1px;
	border-style: solid;
	border-color: var(--borda);
	border-radius: var(--r-container);

	box-shadow: none;

	/*
	 * `clip`, e não `hidden`: os dois recortam o canto arredondado para que a primeira e a última
	 * linha da tabela não vazem sobre ele (US-002.EC-2), mas `hidden` cria um PORTO DE ROLAGEM, e
	 * um cabeçalho `position: sticky` lá dentro passaria a grudar num contêiner que não rola —
	 * isto é, nunca se moveria. `clip` recorta sem criar o porto, e o cabeçalho continua
	 * referenciando o rolador de verdade.
	 */
	overflow: clip;
}

/*
 * CONTÊINER VAZIO NÃO COLAPSA NUMA LINHA: mantém altura e contorno (US-001.EC-5) — e SÓ o vazio.
 *
 * A altura mínima morava na regra de cima, valendo para todo contêiner, e um `min-height`
 * explícito tira do item flex o `min-height: auto` que o impede de encolher abaixo do conteúdo.
 * Numa coluna de altura fixa cuja soma não cabe — o painel da listagem de Metas, `layout-fill` com
 * vinte linhas —, a barra de filtros encolhia até os 24px e o `overflow: clip` cortava o resto:
 * 42px de barra com 168px de formulário dentro, e os botões atrás da tabela (CT1,
 * BUG-20260928-barra-de-filtros-das-metas-cortada-com-a-lista-carregada).
 *
 * `:not(:has(> *))`, e não `:empty`: o vazio que o Angular produz é o de um `ng-if` falso, que
 * deixa comentário e espaço em branco, e `:empty` não casa espaço em branco. Nenhuma view tem
 * contêiner só com texto, o único outro caso que o seletor casa.
 */
md-whiteframe:not(:has(> *)),
md-card:not(:has(> *)) {
	min-height: var(--e-5);
}

/*
 * SEM SOMBRA EM REPOUSO — e este é o bloco que a primeira execução do portão obrigou a existir.
 *
 * A regra de elemento acima declarava `box-shadow: none` e PERDIA, em silêncio, para a biblioteca:
 * a elevação não está em `md-whiteframe`, está em `.md-whiteframe-z2`, que pesa (0,1,0) contra os
 * (0,0,1) do elemento. O computado media a sombra de MD1 nos dois temas enquanto a folha dizia o
 * contrário — a armadilha exata que o ADR-017 descreve e que o ADR-007 existe para pegar. Casar a
 * classe é a "disciplina de autoria" que o ADR-017 diz ser o preço de não usar `@layer`.
 *
 * AS DUAS FAMÍLIAS DE NOME estão escritas porque a biblioteca declara as duas para a mesma sombra:
 * `.md-whiteframe-z1` e `.md-whiteframe-1dp` são a mesma elevação com dois nomes, e uma view que
 * escreva a forma em `dp` cairia fora de uma lista que só conhecesse a forma em `z`.
 *
 * O SELETOR É ANCORADO EM `md-whiteframe` E `md-card`, e não na classe solta. Medido: fora desses
 * dois elementos a classe aparece em três lugares — dois `md-sidenav` e um `md-toolbar` —, e
 * nenhum deles é contêiner de conteúdo. O painel lateral e a barra superior TÊM elevação por
 * desenho, e achatá-los junto seria apagar a separação que eles precisam ter do conteúdo que passa
 * por baixo.
 */
md-whiteframe.md-whiteframe-z1,
md-whiteframe.md-whiteframe-z2,
md-whiteframe.md-whiteframe-z3,
md-whiteframe.md-whiteframe-z4,
md-whiteframe.md-whiteframe-z5,
md-whiteframe.md-whiteframe-1dp,
md-whiteframe.md-whiteframe-4dp,
md-whiteframe.md-whiteframe-7dp,
md-whiteframe.md-whiteframe-10dp,
md-whiteframe.md-whiteframe-12dp,
md-whiteframe.md-whiteframe-16dp,
md-whiteframe.md-whiteframe-24dp,
md-card.md-whiteframe-z1,
md-card.md-whiteframe-z2,
md-card.md-whiteframe-z3 {
	box-shadow: none;
}

/*
 * CONTÊINER DENTRO DE CONTÊINER não desenha contorno próprio (US-001.EC-1).
 *
 * O legado aninha `md-whiteframe` dentro de `md-whiteframe` — e com o contorno virando o recurso
 * primário de delimitação nos dois temas, aninhar passaria a produzir duas molduras concêntricas
 * onde antes havia duas sombras que se somavam sem se notar. O interno mede `border-width: 0px`;
 * a separação dele vem do espaço e da divisória, não de uma segunda moldura.
 *
 * `border-width: 0` e não `border: none`: o portão mede `border-width`, e zerar a largura é a
 * afirmação exata. As quatro combinações estão escritas porque o aninhamento real mistura as duas
 * tags — `md-card` dentro de `md-whiteframe` é tão comum quanto o par homogêneo.
 */
md-whiteframe md-whiteframe,
md-whiteframe md-card,
md-card md-whiteframe,
md-card md-card {
	border-width: 0;
	border-radius: var(--r-controle);
}

/*
 * A SOMBRA AMBIENTE existe num caso só: hover de contêiner INTEIRAMENTE clicável.
 *
 * "Inteiramente clicável" não é uma propriedade que o CSS saiba perguntar; o que existe é o
 * marcador que o legado escreve quando essa é a intenção — `ng-click` no próprio contêiner, ou o
 * contêiner sendo uma âncora. Um `ng-click` num botão lá dentro não casa, e é isso que se quer:
 * o contêiner só se eleva quando o contêiner inteiro é o alvo.
 */
md-whiteframe[class*="md-whiteframe-"][ng-click]:hover,
md-whiteframe[ng-click]:hover,
md-whiteframe[href]:hover,
md-card[class*="md-whiteframe-"][ng-click]:hover,
md-card[ng-click]:hover,
md-card[href]:hover {
	box-shadow: var(--sombra-ambiente);
	transition: box-shadow var(--dur-rapida) var(--ease-padrao);
}

/*
 * A IMPRESSÃO. O contorno permanece — no papel ele é a única delimitação que existe —, e a sombra
 * não é impressa em caso nenhum (US-001.EC-4).
 *
 * As folhas do projeto são servidas com `media="screen"`, e por isso todo `@media print` do
 * repositório já foi código morto uma vez. A task_01 corrigiu o `<link>` desta folha para
 * `screen,print`; sem isso este bloco não valeria nada, e a única forma de saber é medindo com
 * `Emulation.setEmulatedMedia('print')` — que é o que E2E-004 faz.
 */
@media print {
	md-whiteframe,
	md-card,
	md-whiteframe[class*="md-whiteframe-"],
	md-card[class*="md-whiteframe-"] {
		box-shadow: none;
		border-width: 1px;
		border-style: solid;
		border-color: var(--borda);
	}
}

/* ============================================================================================
 * 2. GEOMETRIA — a Regra do Raio Decrescente
 *
 * O raio diminui PARA DENTRO: contêiner 8px, controle dentro dele 4px, elemento dentro do
 * controle menor ou nenhum. Nunca o contrário — um botão de 8px dentro de um cartão de 8px
 * dissolve a hierarquia que o raio existe para desenhar.
 *
 * O raio de contêiner ir de 2px a 8px é a mudança isolada que mais rejuvenesce o produto, e é
 * também a mais barata: dois tokens e nenhuma view tocada.
 * ========================================================================================== */

md-dialog,
md-menu-content,
md-select-menu,
.md-autocomplete-suggestions-container,
md-sidenav {
	border-radius: var(--r-container);
}

/*
 * O CAMPO NÃO ESTÁ NESTA LISTA. O raio dele é o do `::before` que desenha a borda (seção 5); o
 * contêiner não tem traço nenhum para arredondar. O `md-select` e o `md-datepicker` continuam aqui
 * pelo uso AVULSO — fora de um campo eles ainda são uma caixa própria.
 */
.md-button,
md-checkbox .md-container,
md-select .md-select-value,
md-datepicker .md-datepicker-input-container {
	border-radius: var(--r-controle);
}

/* Pílula: o que conta, filtra ou distingue — nunca o que executa uma ação. */
md-chips md-chip,
.md-chip,
.md-badge {
	border-radius: var(--r-pilula);
}

/* ============================================================================================
 * 3. BOTÃO — `.md-button`, 1.940 ocorrências em 269 views
 *
 * CAIXA NORMAL. O `text-transform: uppercase` do Material Design 1 foi desenhado para rótulos
 * curtos em inglês; em português ele produz "GERAR RELATÓRIO ANALÍTICO", que se lê letra a letra.
 *
 * NENHUMA SIGLA É PRODUZIDA POR CSS, e nenhuma é desfeita: "CPF", "ACRA" e "PDF" continuam
 * maiúsculas porque estão escritas assim no markup. É a diferença entre o texto e a aparência do
 * texto — e é ela que faz `textContent === 'PDF'` continuar valendo depois desta folha.
 * ========================================================================================== */

.md-button {
	text-transform: none;

	/*
	 * O tracking volta a zero. O Material o abre em 0,01em para compensar as maiúsculas; sem elas,
	 * a mesma abertura só afrouxa a palavra.
	 */
	letter-spacing: 0;
	font-size: var(--t-corpo);
	font-weight: 500;
	min-height: 36px;
	line-height: 1.4;
	padding: 0 var(--e-4);

	/*
	 * O rótulo que não cabe QUEBRA EM DUAS LINHAS e o botão cresce em altura (US-003.EC-3) —
	 * nunca trunca com reticências sem `title`. O Material declara `white-space: nowrap`, que a
	 * 360px transforma rótulo longo em texto cortado.
	 */
	white-space: normal;
	height: auto;
}

/*
 * O BOTÃO SÓ COM ÍCONE não é afetado pelo acima e mantém o alvo de toque (US-003.EC-2). Ele não
 * tem rótulo para quebrar, e deixá-lo herdar `height: auto` o faria encolher abaixo do alvo.
 */
.md-button.md-icon-button,
.md-button.md-fab {
	min-width: var(--alvo-toque);
	min-height: var(--alvo-toque);
	padding: 0;
	white-space: nowrap;
}

/*
 * A ALTURA FIXA É SÓ DO BOTÃO DE ÍCONE. O FAB já passa do alvo: a biblioteca o desenha com
 * 56×56 e `line-height: 56px` — e o `md-mini`, com 40×40 e `line-height: 40px` — em
 * `.md-button.md-fab`, que pesa (0,2,0) como esta folha. Pôr `height` aqui mudava UMA das três
 * medidas: o círculo virava uma elipse de 56×40, e no `<a>` o `line-height` de 56px empurrava o
 * contador uns 8px para baixo. O `md-mini` só escapava porque `.md-fab.md-mini` pesa (0,3,0).
 */
.md-button.md-icon-button {
	height: var(--alvo-toque);
}

/*
 * O BOTÃO DE ÍCONE QUE É LINK CENTRALIZA POR FLEX. Sem padding e com altura fixa, quem punha o
 * ícone no meio era o `<button>`, que centraliza o próprio conteúdo por natureza. O `md-button`
 * com `ng-href` vira `<a>`, que não faz isso: o "Metas" da barra superior desenhava o ícone
 * colado no topo, 8px acima dos vizinhos (medido: centro do ícone em 24, do botão em 32).
 */
a.md-button.md-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * O BOTÃO DE TEXTO QUE É LINK TAMBÉM. O `line-height: 1.4` acima troca os 36px do Material para
 * que o rótulo quebre em duas linhas, e a altura passa a vir do `min-height`: no `<button>` o
 * texto continua no meio, no `<a>` ele cola no topo. "Voltar à Busca", no Panorama, desenhava o
 * rótulo de 732 a 748 num botão de 731 a 767.
 *
 * O `gap` devolve o espaço entre o ícone e o texto ("Abrir visita", no diálogo da ocorrência): numa
 * caixa flexível o espaço que abre o texto cai no começo da linha e some.
 *
 * `.md-no-style` fica de fora: é o `<a>` que o `md-list-item` gera, com o desenho do item de
 * lista (o menu lateral), e não o de um botão.
 */
a.md-button:not(.md-icon-button):not(.md-fab):not(.md-no-style) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
}

/* Em contexto de toque o alvo sobe para 40px em todo botão, e não só no de ícone. */
@media (pointer: coarse) {
	.md-button {
		min-height: var(--alvo-toque);
	}
}

/*
 * PREENCHIDO, FANTASMA, DESTRUTIVO — o vocabulário de ênfase.
 *
 * O ANEL DE FOCO NÃO ESTÁ AQUI. Ele é de `foco.css`, que carrega DEPOIS desta folha e é a
 * autoridade sobre indicador de foco em todo o produto. Redefini-lo aqui produziria duas regras
 * disputando o mesmo papel, com a de acessibilidade perdendo por acidente de ordem.
 */
.md-button.md-raised,
.md-button.md-fab {
	background-color: var(--acao);
	color: var(--texto-sobre-acao);
	box-shadow: none;
}

.md-button.md-raised:hover,
.md-button.md-fab:hover {
	box-shadow: var(--sombra-ambiente);
}

/*
 * A AÇÃO PRIMÁRIA PRECISA DE MAIS ESPECIFICIDADE, e a regra acima não tinha.
 *
 * `.md-button.md-raised` vale (0,2,1). O tema do Material escreve
 * `.md-button.md-raised.md-primary.md-default-theme`, que vale (0,4,0) — e vence. O resultado foi
 * MEDIDO: com `--acao` valendo `#993D00` na instalação de treinamento, o botão computava
 * `rgb(63, 81, 181)`, o índigo 500 de fábrica. Nas DUAS instalações.
 *
 * Isto passou despercebido porque é invisível na marca padrão: `#3F51B5` (a biblioteca) e `#3753B5`
 * (a receita) são o mesmo azul a olho nu. Só a instalação indígena e a de treinamento o
 * mostravam — e são exatamente as que ninguém abre para revisar. É o modo de falha do ADR-017 por
 * extenso: especificidade insuficiente perde em SILÊNCIO para a biblioteca.
 *
 * Contra o `<style>` que o `$mdThemingProvider` injeta em tempo de bootstrap a ordem de carga não
 * ajuda — ele entra depois de toda folha nossa. Só a especificidade resolve, e é por isso que o
 * seletor leva `html` na frente: (0,4,1) contra (0,4,0).
 *
 * O estado de repouso e o de passagem são declarados juntos porque o Material declara os dois; sem
 * o segundo, o botão volta ao índigo assim que o ponteiro chega nele.
 *
 * O `:not([disabled])` é o mesmo do estado de passagem, logo abaixo. Sem ele, o `html` que vence o
 * tema vence também o `[disabled]` do Material, e o botão desabilitado fica idêntico ao habilitado
 * ("Confirmar" do login por código; BUG-20260925-botao-primario-desabilitado-parece-ativo).
 */
html .md-button.md-raised.md-primary:not([disabled]),
html .md-button.md-raised.md-primary.md-default-theme:not([disabled]),
html .md-button.md-fab.md-primary:not([disabled]),
html .md-button.md-fab.md-primary.md-default-theme:not([disabled]) {
	background-color: var(--acao);
	color: var(--texto-sobre-acao);
}

html .md-button.md-raised.md-primary:not([disabled]):hover,
html .md-button.md-raised.md-primary.md-default-theme:not([disabled]):hover,
html .md-button.md-fab.md-primary:not([disabled]):hover,
html .md-button.md-fab.md-primary.md-default-theme:not([disabled]):hover {
	background-color: var(--acao-tinta-media);
	color: var(--texto-sobre-acao);
}

/*
 * O ELEVADO SEM COR É O MESMO PREENCHIDO — e perdia a passagem e o ícone para o tema.
 *
 * "Filtros avançados" e "Refinar busca", na Busca, e o "Filtros" do Evento são `md-raised` sem
 * `md-primary`. Em repouso a primeira regra desta seção vence — `.md-button.md-raised` (0,2,1)
 * contra os (0,2,0) do tema —, e o botão sai em `--acao`. Nos outros dois estados, não. O tema
 * escreve `.md-button.md-raised:not([disabled]):hover { background-color: {{background-50}} }`,
 * que pesa (0,4,0), e `.md-button.md-raised:not([disabled]) md-icon { color: {{background-900}} }`,
 * (0,3,1). O MEDIDO: ícone `#212121` sobre o fundo de ação e, na passagem, texto branco sobre
 * `#FAFAFA` — o botão sumia debaixo do ponteiro.
 *
 * O repouso também é repetido com a alavanca `html`: dentro de um diálogo o botão ganha a classe
 * `.md-default-theme`, e `.md-button.md-default-theme.md-raised` (0,3,0) venceria a regra de cima.
 * A passagem e o foco repetem os da ação primária, e o ícone herda a tinta do botão. O
 * `:not(.md-warn)` do ícone deixa o destrutivo com a regra dele, mais abaixo; o desabilitado fica
 * com a biblioteca, como no primário.
 */
html .md-button.md-raised:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]),
html .md-button.md-raised.md-default-theme:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]) {
	background-color: var(--acao);
	color: var(--texto-sobre-acao);
}

html .md-button.md-raised:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]):hover,
html .md-button.md-raised:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]).md-focused,
html .md-button.md-raised.md-default-theme:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]):hover,
html .md-button.md-raised.md-default-theme:not(.md-primary):not(.md-accent):not(.md-warn):not([disabled]).md-focused {
	background-color: var(--acao-tinta-media);
	color: var(--texto-sobre-acao);
}

html .md-button.md-raised:not(.md-warn):not([disabled]) md-icon,
html .md-button.md-raised.md-default-theme:not(.md-warn):not([disabled]) md-icon {
	color: inherit;
}

/*
 * O FANTASMA PRIMÁRIO — o mesmo defeito do bloco acima, na TINTA.
 *
 * O `<style>` do tema escreve `.md-button.md-primary { color: {{primary-color}} }` e o mesmo para o
 * `md-icon` de dentro. Nenhuma regra nossa o vencia no claro, e o botão plano primário — 306
 * ocorrências em 240 views — MEDIA `rgb(63, 81, 181)` nas três instalações: um botão índigo numa
 * tela verde, na indígena, e numa tela ocre, na de treinamento.
 *
 * A cor é `--acao-tinta`, e não `--acao`: o fantasma é tinta sobre a superfície (design-v2,
 * "Botão"), e é o token que `tema-escuro.css` já usava para este mesmo botão. Ele gira com o tema,
 * então a regra escura passa a repetir o valor que esta já dá.
 *
 * O `:not([disabled])` devolve o desabilitado à biblioteca. `.md-button.md-default-theme[disabled]`
 * EMPATA com a regra da cor primária e vence por vir depois; um seletor nosso mais pesado, sem a
 * exclusão, pintaria de ação um botão que não age.
 */
html .md-button.md-primary:not(.md-raised):not(.md-fab):not([disabled]),
html .md-button.md-primary:not(.md-raised):not(.md-fab):not([disabled]) md-icon {
	color: var(--acao-tinta);
}

/*
 * DESTRUTIVO — tinta `--erro`; fundo preenchido só no diálogo de confirmação (design-v2, US-008.EC-2).
 *
 * O botão plano já vencia: `.md-button.md-warn` do tema vale (0,3,0) e a regra abaixo, (0,4,0). O
 * elevado e o FAB, não. O tema escreve `.md-button.md-warn.md-raised.md-default-theme` e o mesmo
 * para `.md-fab`, que valem (0,4,0) contra (0,2,1) de `.md-button.md-raised` aqui em cima — e todo
 * `md-warn` preenchido media `rgb(255, 87, 34)`, o deep-orange de fábrica. Hexadecimal fora da
 * paleta, nas três instalações. O `html` na frente é a mesma alavanca do bloco da ação primária.
 *
 * O ELEVADO, FORA DO DIÁLOGO, PERDE O FUNDO e fica só na tinta, como o plano. A regra do diálogo
 * (seção 6) devolve o preenchimento a quem está em `md-dialog-actions`, com um seletor mais pesado.
 * A passagem ganha a superfície tingida de erro, que é o par medido para texto (9,2:1), e não o
 * deep-orange 600 que o tema declara em `:hover` e em `.md-focused`.
 *
 * O FAB CONTINUA PREENCHIDO. Os `md-fab md-mini md-warn` do produto são CONTADORES — "zero
 * estados", "zero cidades" — e não ações destrutivas; o círculo cheio é a forma deles. Como no
 * `md-primary`, a regra vale também desabilitado. O `ng-disabled` desses contadores é fixo numas
 * telas e vem da ACL noutras: sem isso, o zero sairia cinza numa tela e vermelho na vizinha — ou
 * para um usuário e não para outro —, ao lado do não-zero que já sai em `--acao` em todas. A cor
 * passaria a dizer permissão, e não quantidade.
 *
 * O `md-icon` segue a tinta do botão: o tema o pinta de `warn-contrast`, branco, que sobre o
 * elevado sem fundo seria ícone invisível.
 */
.md-button.md-warn:not(.md-raised):not(.md-fab) {
	color: var(--erro);
}

html .md-button.md-raised.md-warn:not([disabled]),
html .md-button.md-raised.md-warn.md-default-theme:not([disabled]) {
	background-color: transparent;
	color: var(--erro);
	box-shadow: none;
}

html .md-button.md-raised.md-warn:not([disabled]):hover,
html .md-button.md-raised.md-warn:not([disabled]).md-focused,
html .md-button.md-raised.md-warn.md-default-theme:not([disabled]):hover,
html .md-button.md-raised.md-warn.md-default-theme:not([disabled]).md-focused {
	background-color: var(--erro-fundo);
	color: var(--erro-tinta);
}

html .md-button.md-fab.md-warn,
html .md-button.md-fab.md-warn.md-default-theme {
	background-color: var(--erro);
	color: var(--texto-sobre-acao);
}

html .md-button.md-fab.md-warn:not([disabled]):hover,
html .md-button.md-fab.md-warn:not([disabled]).md-focused,
html .md-button.md-fab.md-warn.md-default-theme:not([disabled]):hover,
html .md-button.md-fab.md-warn.md-default-theme:not([disabled]).md-focused {
	background-color: var(--erro-tinta-media);
}

html .md-button.md-raised.md-warn:not([disabled]) md-icon,
html .md-button.md-raised.md-warn.md-default-theme:not([disabled]) md-icon,
html .md-button.md-fab.md-warn:not([disabled]) md-icon,
html .md-button.md-fab.md-warn.md-default-theme:not([disabled]) md-icon {
	color: inherit;
}

/* ============================================================================================
 * 4. LISTAGEM — `md-list.list-striped` + `md-list-item.sub-header`
 *
 * Gancho medido: 107 views com `list-striped`, 128 com `sub-header`. Continua sendo `md-list` no
 * DOM — trocar por `<table>` em 126 views é reescrita, não revestimento (ADR-001) —, mas passa a
 * SE COMPORTAR como tabela.
 *
 * `md-list-item` apaga o `role` escrito pelo autor e move o `ng-click` para um `<button>` que ele
 * mesmo gera. Isso é problema da semântica (task_06), não desta folha; o que importa aqui é a
 * consequência: densidade e cabeçalho grudento têm de ser medidos no DOM RENDERIZADO, porque o
 * que o `.phtml` diz não é o que o navegador recebe.
 * ========================================================================================== */

/*
 * O CABEÇALHO GRUDENTO. `position: sticky` resolve contra o porto de rolagem mais próximo, e é
 * por isso que ele funciona igual na janela, dentro de um `slideIndex` com duas listagens e
 * dentro do corpo de um diálogo (US-004.EC-5, EC-6) sem uma linha por caso. O contêiner acima usa
 * `overflow: clip` justamente para não virar um porto e não sequestrar esta regra.
 *
 * `top: 0` NÃO É A BORDA DO ROLADOR. O `sticky` para na borda do CONTEÚDO do porto, isto é, depois
 * do padding dele — e a área principal ganhou 24px de padding na margem única da moldura. Com
 * `top: 0` sobrava uma faixa de 24px acima do cabeçalho grudado, e as linhas continuavam passando
 * por ela, à vista, por cima dele. `--topo-colado` é de `estrutura.css`: diz onde um elemento
 * grudento deve parar, descontando o padding e, havendo trilha, a altura dela. Fora da área
 * principal (diálogo) vale o zero da raiz da paleta, que é o certo.
 */
md-list > md-list-item.sub-header {
	position: sticky;
	top: var(--topo-colado);
	z-index: var(--camada-fixo);
	background-color: var(--superficie-sobreposta);
	border-bottom: 1px solid var(--borda);
	font-size: var(--t-rotulo);
	font-weight: 500;

	/* Caixa normal no cabeçalho pela mesma razão do botão: rótulo de coluna em português. */
	text-transform: none;
	letter-spacing: 0;
	color: var(--texto-secundario);
}

/*
 * DENTRO DE ABA O TOPO VOLTA A ZERO. `md-tab-content` tem `overflow` próprio e vira o porto de
 * rolagem da listagem que estiver nela — mas ele não rola, porque cresce com o conteúdo. Um `sticky`
 * com o topo da área principal (trilha: 32px) num porto que não rola não fica parado: é EMPURRADO
 * 32px para baixo, em cima da primeira linha. A aba não tem trilha nem padding para descontar.
 */
md-tab-content {
	--topo-colado: 0px;
}

/*
 * CADA LINHA É UM CONTEXTO DE EMPILHAMENTO PRÓPRIO, abaixo do cabeçalho.
 *
 * O cabeçalho está em `--camada-fixo`, 20 — e 20 é também o `z-index` que o Material dá a todo
 * `.md-button.md-fab`. Os contadores das listagens eram `md-fab md-mini`: no empate vence quem vem
 * depois no DOM, e a linha rolava POR CIMA do cabeçalho (medido na listagem de Pólos). Os
 * contadores deixaram de ser FAB; esta regra é o que impede o próximo elemento posicionado de
 * dentro de uma linha de empatar outra vez. `isolation` confina todo `z-index` de dentro à camada
 * da própria linha. Menu e dica abertos da linha vão para o `<body>`, fora do alcance disto.
 */
md-list > md-list-item:not(.sub-header) {
	isolation: isolate;
}

/*
 * A ZEBRA SAI, A DIVISÓRIA ENTRA.
 *
 * A zebra de MD1 pinta uma textura horizontal que compete com o dado; a divisória delimita sem
 * pintar. O seletor repete o da regra de zebra de `style.css` — elemento + classe + três `:not()`
 * + `:nth-child()` — porque é preciso empatar a especificidade dela para desfazê-la pela ordem de
 * carga, que é a única alavanca desta folha (ADR-017).
 */
md-list.list-striped > md-list-item:not(.sub-header):not(.footer):not(.selected):nth-child(2n),
md-virtual-repeat-container.list-striped md-list-item:not(.sub-header):not(.footer):not(.selected):nth-child(2n) {
	background-color: transparent;
}

/*
 * A DIVISÓRIA FICA ENTRE AS LINHAS, e por isso não sobra nenhuma.
 *
 * A primeira versão punha `border-bottom` em toda linha e tirava do `:last-child`. Não funciona, e
 * o portão mostrou por quê: `:last-child` é ESTRUTURAL. Numa listagem do Material a última linha do
 * DOM costuma ser um rodapé, um item de `ng-if` ou uma linha oculta — a última VISÍVEL quase nunca
 * é a última filha, e a divisória órfã aparecia sob o último registro como a moldura de uma tabela
 * que não existe (US-004.EC-1).
 *
 * Com a divisória no `border-top` do irmão SEGUINTE, ela por construção só existe entre duas
 * linhas. Uma listagem de uma linha só não tem irmão, logo não tem divisória — sem depender de
 * qual elemento é o último.
 */
md-list.list-striped > md-list-item:not(.sub-header),
md-virtual-repeat-container.list-striped md-list-item:not(.sub-header) {
	border-top: 0;
	border-bottom: 0;
}

md-list.list-striped > md-list-item:not(.sub-header) + md-list-item:not(.sub-header),
md-virtual-repeat-container.list-striped md-list-item:not(.sub-header) + md-list-item:not(.sub-header) {
	border-top: 1px solid var(--borda);
}

/*
 * A linha INTEIRA recebe o véu de hover, não a célula (US-004.AC-3).
 *
 * O seletor repete a cadeia de três `:not()` pela mesma razão da zebra acima: há duas regras de
 * (0,5,2) na disputa. A zebra desta folha zera o fundo da linha par, e o `list-hover` de
 * `style.css` pinta o cinza de MD1 na ímpar — nas 102 views que carregam as duas classes. Com
 * `:not(.sub-header)` sozinho a regra pesava (0,3,2) e perdia para as duas, calada: o `:hover`
 * ficava ativo e o fundo não mudava. A variante `:nth-child(2n)` passa a zebra; as demais empatam
 * com `style.css` e vencem pela ordem de carga (ADR-017).
 *
 * `.selected` fica de fora, como no legado: a linha selecionada mantém o fundo tingido sob o
 * ponteiro, que é o que a distingue do hover (US-004.AC-4).
 */
md-list.list-striped > md-list-item:not(.sub-header):not(.footer):not(.selected):hover,
md-list.list-striped > md-list-item:not(.sub-header):not(.footer):not(.selected):nth-child(2n):hover,
md-list.list-hover > md-list-item:not(.sub-header):not(.footer):not(.selected):hover,
md-virtual-repeat-container.list-striped md-list-item:not(.sub-header):not(.footer):not(.selected):hover,
md-virtual-repeat-container.list-striped md-list-item:not(.sub-header):not(.footer):not(.selected):nth-child(2n):hover,
md-virtual-repeat-container.list-hover md-list-item:not(.sub-header):not(.footer):not(.selected):hover {
	background-color: var(--veu-hover);
}

/*
 * A LINHA SELECIONADA usa o fundo tingido da marca, e é distinguível do hover (US-004.AC-4). O
 * legado pintava selecionada com um verde de paleta que não dizia nada sobre seleção e ainda
 * mudava de tom em linha par.
 */
md-list.list-striped > md-list-item.selected,
md-list.list-striped > md-list-item.selected:nth-child(2n),
md-virtual-repeat-container.list-striped md-list-item.selected,
md-virtual-repeat-container.list-striped md-list-item.selected:nth-child(2n) {
	background-color: var(--acao-tingido-fundo);
	color: var(--acao-tingido-tinta);
}

/*
 * AS TRÊS DENSIDADES da seção G do DESIGN.md, mapeadas em ganchos que o legado JÁ escreve —
 * porque um gancho novo exigiria tocar em `.phtml`, que é o que esta camada não faz.
 *
 *   Confortável 48px — `md-list` que não é listagem de dados: o padrão do Material, mantido.
 *   Padrão      40px — `md-list.list-striped`: as listagens longas, que é o caso corrente.
 *   Compacta    32px — `md-list.md-dense` e listagem dentro de diálogo: comparação de muitos
 *                      registros em espaço curto.
 *
 * A densidade varia ALTURA DE LINHA E RECUO, nunca tamanho de fonte. Densidade que encolhe a letra
 * é hostilidade, e é a anti-referência declarada do produto.
 */
md-list.list-striped > md-list-item {
	min-height: var(--alvo-toque);
	font-size: var(--t-dado);
}

md-list.md-dense > md-list-item,
md-dialog md-list.list-striped > md-list-item {
	min-height: var(--e-6);
}

/*
 * NÚMERO À DIREITA, COM NUMERAL TABULAR; texto à esquerda; NENHUMA COLUNA CENTRALIZADA —
 * centralizar coluna de dado destrói a borda de leitura vertical, que é o que permite comparar
 * valores de cima a baixo sem contar dígitos.
 *
 * O gancho é o que o legado escreve para marcar coluna numérica: `text-right` das folhas de tela e
 * o alinhamento do Material. Célula que mistura número e texto ("3 de 12 visitas") NÃO casa e
 * continua à esquerda (US-005.EC-1), porque ela não é marcada como numérica em lugar nenhum.
 */
md-list .text-right,
md-list [align="right"],
table td.text-right,
table th.text-right {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Célula numérica vazia não colapsa a largura da coluna (US-005.EC-2). */
md-list .text-right:empty,
table td.text-right:empty {
	min-width: var(--e-6);
}

/*
 * COLUNA MAIS ESTREITA QUE O CONTEÚDO: trunca com reticências, e o nome acessível continua
 * completo porque o texto permanece no DOM (US-004.EC-4). A largura das outras colunas não muda de
 * linha para linha porque quem a define é o `flex` do layout, não o conteúdo.
 */
md-list.list-striped > md-list-item .md-list-item-text,
md-list.list-striped > md-list-item [flex] {
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * `text-overflow` SÓ AGE EM LINHA QUE NÃO QUEBRA. Sem o `nowrap` a célula quebrava em várias
 * linhas — o padrão é `normal`, e nas linhas clicáveis o `md-list-item .md-no-style.md-button` da
 * biblioteca também declara `normal` — e as reticências nunca apareciam.
 *
 * Só na CÉLULA-FOLHA, `[flex]` sem `[layout]`: o `div[layout="row"][flex]` que embrulha a linha
 * passaria o `nowrap` por herança a todas as colunas, e numa caixa flex o `text-overflow` não age
 * de qualquer jeito. O `.md-list-item-text` também fica de fora — ele guarda `h3`/`p` em bloco,
 * que herdariam o `nowrap` e seriam cortados SEM reticências.
 */
md-list.list-striped > md-list-item [flex]:not([layout]) {
	min-width: 0;
	white-space: nowrap;
}

/*
 * No celular a coluna tem poucos caracteres e a reticência não devolve o texto em lugar nenhum —
 * não há `title`, nem ponteiro. Ali a célula QUEBRA, que é a outra saída que US-004.EC-4 admite,
 * e a linha cresce em altura: a `min-height` da densidade é piso, não teto.
 */
@media (max-width: 599px) {
	md-list.list-striped > md-list-item [flex]:not([layout]) {
		white-space: normal;
	}
}

/* ============================================================================================
 * 5. CAMPO — `md-input-container`, 548 ocorrências em 204 views
 *
 * UMA ANATOMIA SÓ, para texto, número, área de texto, select, autocomplete, datepicker e chips
 * (ADR-004 e ADR-009 do polimento-ui). O contêiner é uma GRADE de uma coluna e duas faixas:
 *
 *   faixa 1 — o campo:     altura mínima `--campo-altura` (48px). Rótulo, controle e ícones.
 *   faixa 2 — a mensagem:  altura mínima `--campo-mensagem` (20px), SEMPRE reservada. Erro, ajuda
 *                          e contador. Ela só cresce se a mensagem quebrar em duas linhas.
 *
 * A BORDA É O `::before` DA FAIXA 1, e não `border` do contêiner. É isso que tira a mensagem de
 * dentro da caixa sem deslocar nada, e que deixa a espessura ir de 1px a 2px no foco sem mexer em
 * caixa nenhuma — o pseudo-elemento ocupa a célula inteira e a borda cresce PARA DENTRO dele.
 *
 * O QUE ESTA REESCRITA TIROU, e por quê cada coisa existia:
 *
 *   - a borda real no contêiner, com um recuo de 16px em cima para alojar o rótulo DENTRO da
 *     caixa: o rótulo agora recorta a borda, como o `design-v2.md` pedia desde o começo;
 *   - `.md-errors-spacer { min-height: 0 }`: zerava a reserva da mensagem, e o erro fazia a caixa
 *     crescer e empurrar o formulário para baixo — o defeito que a US-009 relata;
 *   - os três `calc(… - 1px)`: devolviam no recuo o pixel que o foco engrossava na borda;
 *   - a EXCEÇÃO do `md-autocomplete`, com a borda no invólucro e o foco por `:focus-within`: ela
 *     existia porque a borda precisava morar fora do contêiner que o autocomplete embrulha. Com a
 *     borda no `::before`, o contêiner de dentro recebe a mesma anatomia de qualquer campo.
 *
 * O RECORTE. O rejuvenescimento desistiu dele porque a tarja atrás do rótulo precisa da cor da
 * superfície, e os campos se apoiam em cinco superfícies. O que faltava era um token CONTEXTUAL:
 * `--fundo-do-campo` nasce na raiz valendo `--fundo`, e cada regra que pinta uma superfície o
 * redeclara com a mesma cor (ADR-008 do polimento-ui). A herança leva o valor até o rótulo.
 * `FundoDoCampoPorSuperficieTest` cobra a declaração; `portao-de-campo.js` mede tarja × fundo.
 *
 * O QUE NÃO É MEDIDO AQUI: `portao-de-campo.js` mede no navegador, nos dois temas, a altura das
 * faixas, a posição do rótulo, a cor da tarja, os estados da borda lidos do `::before` e o
 * deslocamento causado por erro. Esta folha diz o que foi declarado; ele diz o que venceu.
 * ========================================================================================== */

md-input-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(var(--campo-altura), auto) minmax(var(--campo-mensagem), auto);
	position: relative;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

/*
 * `.md-block` TAMBÉM É GRADE. A biblioteca declara `md-input-container.md-block { display: block }`,
 * e esse seletor pesa mais do que o de cima: sem esta linha os contêineres com `class="md-block"` —
 * nove dos quatorze campos do Projeto — ficavam fora da anatomia, sem as duas faixas, e encolhiam
 * para 30px quando a fileira empilhava a 360px (US-012.EC-3). Medido no `portao-de-campo.js`.
 */
md-input-container.md-block {
	display: grid;
}

/*
 * O `clearfix` DA BIBLIOTECA SAI. O Material dá ao contêiner um `::after { display: table }` para
 * conter os `float` de dentro; numa grade `float` não se aplica, e o pseudo-elemento viraria um
 * item a mais, posto automaticamente numa terceira faixa implícita.
 */
md-input-container::after {
	content: none;
}

/*
 * A BORDA. LONGHANDS, e não o atalho: um atalho com `var()` vira "valor de substituição pendente",
 * e os estados abaixo — que trocam só a cor ou só a largura — perderiam para ele em silêncio (a
 * lição registrada na seção 1).
 *
 * `--camada-base` põe o pseudo-elemento num contexto próprio ABAIXO do rótulo, que é posicionado
 * e pinta a tarja por cima do traço.
 */
md-input-container::before {
	content: "";
	grid-area: 1 / 1;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: var(--borda-campo);
	border-radius: var(--r-controle);
	pointer-events: none;
	position: relative;
	z-index: var(--camada-base);
	transition: border-color var(--dur-rapida) var(--ease-padrao);
}

/*
 * OS ESTADOS DA BORDA (ADR-009 do polimento-ui), em ordem crescente de prioridade — cada um vence o
 * anterior por vir depois com o mesmo peso, e o desabilitado vence todos pelo `:has()`.
 *
 * O FOCO É `--acao-tinta`, e não `--acao`: `--acao` é superfície com texto branco por cima e mede
 * cerca de 2,2:1 contra a página escura; como contorno ela reprova a SC 1.4.11. `--acao-tinta` gira
 * com o tema e passa nos dois.
 *
 * O ERRO VENCE O FOCO (US-010.EC-1): um campo inválido focado continua dizendo que está errado.
 */
md-input-container:hover::before {
	border-color: var(--borda-componente);
}

md-input-container.md-input-focused::before {
	border-width: 2px;
	border-color: var(--acao-tinta);
}

/*
 * `.campo--com-erro` é o inválido que vem do SERVIDOR (`erroDeCampoService`, `estados.js`): o
 * `ngModel` não o conhece, então a classe da biblioteca não entra, e o campo pinta o mesmo erro.
 */
md-input-container.md-input-invalid::before,
md-input-container.campo--com-erro::before {
	border-width: 2px;
	border-color: var(--erro);
}

/*
 * O DESABILITADO TROCA SÓ A COR, E NÃO PINTA FUNDO. Um `background-color` aqui derrubou o rótulo
 * do Material para 4,46:1 no rejuvenescimento, e o nome do campo bloqueado continua sendo
 * informação que a pessoa precisa ler. O `:has()` pergunta pelo estado onde a biblioteca o põe —
 * no controle, e não no contêiner.
 */
md-input-container:has(.md-input[disabled])::before,
md-input-container:has(md-select[disabled])::before,
md-input-container:has(md-datepicker[disabled])::before {
	border-width: 1px;
	border-color: var(--borda-neutra);
}

/*
 * A POSIÇÃO NA GRADE. Tudo o que o contêiner guarda vai para a faixa 1, centrado — o rótulo, o
 * controle e o que mais a biblioteca puser ali —; o que é MENSAGEM vai para a faixa 2, colado no
 * topo dela. A lista da faixa 2 é a do ADR-009: as mensagens do `ng-messages`, o espaçador de
 * erros que o Material acrescenta a todo campo de texto, o contador e o texto de ajuda.
 *
 * As QUATRO linhas, e não `1 / 1`: para um item `position: absolute` — o rótulo —, a linha final
 * `auto` é a borda do contêiner inteiro, e não o fim da trilha. Com `1 / 1` o bloco que contém o
 * rótulo era a faixa 1 MAIS a 2, e o `top: 50%` do repouso o punha a 34px do topo, dentro da faixa
 * de mensagem, em vez de no meio da caixa (24px). Medido no `portao-de-campo.js` (E2E-051); para os
 * itens do fluxo as duas formas são a mesma.
 */
md-input-container > * {
	grid-area: 1 / 1 / 2 / 2;
	align-self: center;
	min-width: 0;
}

md-input-container > [ng-messages],
md-input-container > .md-input-messages-animation,
md-input-container > .md-errors-spacer,
md-input-container > .md-char-counter,
md-input-container > .ajuda-do-campo,
md-input-container > .erro-de-campo,
md-input-container > [md-autocomplete-parent-scope] {
	grid-row: 2;
	grid-column: 1;
	align-self: start;
}

/*
 * O `ng-messages` DE UM `md-autocomplete` chega ao contêiner de dentro EMBRULHADO: a biblioteca
 * transclui o que sobra do elemento num `<div md-autocomplete-parent-scope>`, e é esse embrulho —
 * não o `[ng-messages]` — o filho direto. Sem a linha acima ele caía na regra geral e a mensagem
 * aparecia DENTRO da caixa, 17px abaixo do topo da faixa 1. Medido no `portao-de-campo.js`
 * (polimento-ui E2E-034, legados: Técnico de campo, Assinante e os dois formulários de documento).
 */

/*
 * O SUBLINHADO SAI. As variantes de largura da biblioteca — repouso, focado, redimensionado,
 * inválido e o foco do `md-select` — estão escritas porque cada uma é uma regra própria lá, e
 * desfazer só a primeira deixaria o sublinhado reaparecendo exatamente no foco.
 */
md-input-container .md-input,
md-input-container.md-input-focused .md-input,
md-input-container.md-input-resized .md-input,
md-input-container .md-input.ng-invalid.ng-dirty,
md-input-container md-select .md-select-value,
md-input-container.md-input-invalid md-select .md-select-value,
md-input-container md-select:not([disabled]):focus .md-select-value {
	border-width: 0;
}

/*
 * O CONTROLE DE TEXTO OCUPA A FAIXA INTEIRA, com o recuo do campo dos dois lados: clicar em
 * qualquer ponto da caixa põe o cursor nela, e o texto fica centrado na altura por ser uma linha
 * só. `float`, a altura de 30px e os recuos de 1px e 2px da biblioteca eram a geometria do
 * sublinhado.
 */
md-input-container > .md-input,
md-input-container.md-input-focused > .md-input,
md-input-container.md-input-resized > .md-input,
md-input-container > .md-input.ng-invalid.ng-dirty {
	align-self: stretch;
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 var(--campo-recuo);
	line-height: var(--e-5);
	background-color: transparent;
}

/*
 * A ÁREA DE TEXTO cresce a partir da mesma altura (BR-04), e o texto começa no alto da caixa, não
 * no meio. O redimensionamento vertical continua com a pessoa.
 */
md-input-container > textarea.md-input,
md-input-container.md-input-focused > textarea.md-input,
md-input-container.md-input-resized > textarea.md-input {
	min-height: var(--campo-altura);
	padding-top: var(--campo-recuo);
	padding-bottom: var(--campo-recuo);
	resize: vertical;
}

/* ------------------------------------------------------------------------------- o rótulo */

/*
 * O RÓTULO EM REPOUSO é o texto indicativo: centrado na faixa 1, na posição do texto (US-008.AC-1).
 *
 * `position: absolute` é o da biblioteca e FICA: um rótulo fora do fluxo não empurra a largura do
 * campo, e um rótulo longo não alarga a coluna. Como o contêiner é uma grade posicionada, o
 * `grid-area` que o rótulo herda da regra acima faz da FAIXA 1 o bloco que o contém — `top: 50%`
 * é o meio da caixa, e não do contêiner inteiro com a mensagem.
 *
 * O recuo de `--e-1` de cada lado é o da tarja (ADR-008): o texto do rótulo continua alinhado com o
 * texto do campo, e a tarja sobra 4px para cada lado dele quando ele sobe para a borda.
 *
 * `opacity: 1` desfaz o `.md-placeholder` que o `md-select` sem valor põe no rótulo para escondê-lo
 * e mostrar uma cópia dele dentro da caixa. Aqui o rótulo é um só, em todo tipo de campo.
 */
md-input-container > label:not(.md-no-float):not(.md-container-ignore) {
	top: 50%;
	bottom: auto;
	left: calc(var(--campo-recuo) - var(--e-1));
	right: auto;
	width: auto;
	max-width: calc(100% - 2 * var(--campo-recuo) + var(--e-1));
	margin: 0;
	padding: 0 var(--e-1);

	/*
	 * `--e-4`, e não a linha de 24px do texto: flutuando, o rótulo sobe METADE da própria altura
	 * acima da caixa — 6px com esta linha em escala 0,75 —, e é a faixa de mensagem do campo de
	 * CIMA que o recebe. Com 24px ele subiria 9px e encostaria numa mensagem de uma linha.
	 */
	line-height: var(--e-4);
	opacity: 1;
	color: var(--texto-rotulo-alfa);
	transform: translateY(-50%);
	transform-origin: left center;
	transition: top var(--dur-media) var(--ease-padrao), transform var(--dur-media) var(--ease-padrao);

	/*
	 * O rótulo longo em português trunca com reticências e NUNCA sobrepõe o valor (US-008.EC-1).
	 * O nome acessível continua completo: o texto permanece no DOM, e é o desenho que o recorta.
	 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * O RÓTULO FLUTUANDO RECORTA A BORDA (US-008.AC-2): o centro dele fica sobre o traço de cima, em
 * escala 0,75, e a tarja em `--fundo-do-campo` interrompe o traço atrás dele.
 *
 * `top: 0` é o topo da faixa 1, que é a linha da borda; `translateY(-50%)` com a origem no meio
 * põe o CENTRO do rótulo exatamente nela, em qualquer escala. O teto de largura é dividido pela
 * escala porque a caixa é medida antes dela: sem isso o rótulo flutuando cortaria com 75% da
 * largura que tem.
 */
md-input-container.md-input-focused > label:not(.md-no-float):not(.md-container-ignore),
md-input-container.md-input-has-placeholder > label:not(.md-no-float):not(.md-container-ignore),
md-input-container.md-input-has-value > label:not(.md-no-float):not(.md-container-ignore) {
	top: 0;
	max-width: calc((100% - 2 * var(--campo-recuo) + var(--e-1)) / 0.75);
	transform: translateY(-50%) scale(0.75);
	background-color: var(--fundo-do-campo);
}

/*
 * O VALOR QUE CHEGA JÁ PREENCHIDO NÃO ANIMA (US-008.EC-3). Uma tela de edição abre com o rótulo
 * já no recorte, sem a subida por cima do valor. É o que a biblioteca faz em `md-input-has-value`,
 * e a transição acima a desfazia; ela volta aqui. A subida pelo FOCO continua animada, e a descida
 * também — quem sai é a classe, e a transição que vale é a do estado de chegada.
 */
md-input-container.md-input-has-value > label:not(.md-no-float):not(.md-container-ignore) {
	transition: none;
}

/*
 * A COR DO RÓTULO acompanha a borda (US-008.AC-4): tinta de ação no foco, erro na invalidez. O
 * `html` na frente é peso: o tema do Material pinta o rótulo focado com `primary-color` por um
 * seletor de (0,3,2) injetado depois desta folha, e o empate seria dele.
 */
html md-input-container.md-input-focused > label:not(.md-no-float):not(.md-container-ignore) {
	color: var(--acao-tinta);
}

html md-input-container.md-input-invalid > label:not(.md-no-float):not(.md-container-ignore) {
	color: var(--erro);
}

/*
 * O ASTERISCO (ADR-015 do polimento-ui) vem SÓ do `md-required` que o Material põe no rótulo de
 * todo controle obrigatório, e do rótulo de grupo de rádio, que o Material não marca.
 *
 * `content: " *" / ""` dá ao asterisco um texto alternativo VAZIO: quem anuncia a obrigatoriedade
 * é o `required` do controle, e "Nome asterisco" no leitor de tela é decoração lida em voz alta. A
 * forma sem barra vem antes: um navegador que não entenda a sintaxe descarta só a segunda
 * declaração e fica com o asterisco de hoje.
 *
 * Os seletores pesados são peso, não enfeite. `:not(.md-container-ignore)` empata com a regra da
 * folha da biblioteca, (0,2,3), e vence por vir depois; o último vence o tema, que em repouso pinta
 * o asterisco de cinza por um seletor de (0,4,3) injetado depois desta folha — e o asterisco é
 * `--erro` em todo estado. O primeiro, o mais leve, é o nome do contrato (UT-014).
 */
md-input-container label.md-required::after,
md-input-container label:not(.md-container-ignore).md-required::after,
html md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required::after,
.rotulo-de-grupo.md-required::after {
	content: " *";
	content: " *" / "";
	color: var(--erro);
}

/*
 * CAMPO DESABILITADO NÃO MOSTRA ASTERISCO (US-003.EC-3, US-005.AC-2). O Material marca o rótulo pelo
 * `required` e não olha o `disabled`, e 30 controles das views trocam de `ng-disabled` por regra da
 * tela sem deixar de ser `required` — o "Valor (R$)" do Projeto novo é um deles. Repetir a condição
 * do `ng-disabled` num `ng-required` em cada um seria copiar 30 regras de tela para a marcação; a
 * pergunta "o usuário pode preencher isto?" é de aparência, e mora aqui.
 *
 * O segundo seletor empata o peso do terceiro seletor da regra acima, que só vale fora de foco e de
 * erro; o primeiro vence os outros dois nos demais estados.
 */
html md-input-container:has(.md-input[disabled], md-select[disabled], md-datepicker[disabled]) label.md-required::after,
html md-input-container:has(.md-input[disabled], md-select[disabled], md-datepicker[disabled]):not(.md-input-focused):not(.md-input-invalid) label.md-required::after {
	content: none;
}

/*
 * O ASTERISCO SOBREVIVE À RETICÊNCIA (BR-06). Ele sai do fluxo do texto e se aloja num recuo que o
 * rótulo obrigatório reserva à direita: o texto é cortado antes dele, e ele fica.
 */
md-input-container > label.md-required:not(.md-no-float):not(.md-container-ignore) {
	padding-right: calc(var(--e-1) + 0.75em);
}

md-input-container > label.md-required:not(.md-no-float):not(.md-container-ignore)::after {
	position: absolute;
	top: 0;
	right: var(--e-1);
	font-size: inherit;
	vertical-align: baseline;
}

/*
 * O RÓTULO DE GRUPO de `md-radio-group`: a tipografia do rótulo de campo flutuando, acima das
 * opções (US-013.AC-2). É marcação da task de views; a folha só lhe dá a aparência.
 *
 * `0.75em`, e não `--t-rotulo`: o rótulo de campo HERDA o corpo do formulário (13px) e flutua em
 * escala 0,75, ou seja, a 9,75px efetivos. Com `--t-rotulo` o rótulo de grupo saía com 12px, ao lado
 * de rótulos de campo de 9,75px na mesma tela — medido no `portao-de-campo.js` (E2E-050). Herdando o
 * mesmo corpo e aplicando a mesma escala, os dois são o mesmo tamanho em qualquer contexto.
 */
.rotulo-de-grupo {
	display: block;
	margin: 0 0 var(--e-2);
	font-size: 0.75em;
	line-height: var(--e-5);
	color: var(--texto-rotulo-alfa);
}

/*
 * A LINHA DE MENSAGEM DO GRUPO É RESERVADA, como a faixa 2 de todo campo (ADR-004). Fora de um
 * `md-input-container` o `ng-messages` só ocupa altura quando há mensagem, e a do grupo de rádio —
 * que abre o formulário do Assinante — empurrava 14px para baixo todos os campos seguintes ao
 * enviar vazio. Medido no `portao-de-campo.js` (polimento-ui E2E-034, legados: Assinante).
 */
md-radio-group + .erro-de-campo {
	min-height: var(--campo-mensagem);
	margin-top: 0;
}

/* ---------------------------------------------------------------------------- a mensagem */

/*
 * A MENSAGEM mora na faixa 2, alinhada ao texto do campo. Uma linha dela mede ~14px e ocupa o alto
 * da faixa de 20px, deixando os 6px de baixo para o rótulo flutuante do campo seguinte, que sobe
 * até ali. Ela QUEBRA em até duas linhas (US-009.EC-1) — é o único caso em que a faixa cresce e o
 * que está abaixo desce —, e é cortada na segunda.
 *
 * O `padding-top` de 8px da biblioteca sai: ele descia a mensagem para dentro do rótulo flutuante
 * do campo de baixo, que sobe meia linha acima da própria caixa.
 */
md-input-container .md-input-message-animation,
md-input-container .md-input-message-animation:not(.md-char-counter),
md-input-container .md-char-counter {
	padding: 0 var(--campo-recuo);
	font-size: var(--t-rotulo);
	line-height: 1.15;
	white-space: normal;
}

/*
 * A MENSAGEM É `--erro`, e não o deep-orange A700 do tema, que mede abaixo de 4,5:1 sobre papel
 * branco (US-009.AC-3). O `html` vence o seletor de (0,2,1) que o tema injeta depois desta folha.
 */
html md-input-container .md-input-message-animation:not(.md-char-counter),
html md-input-container .md-input-messages-animation {
	color: var(--erro);
}

md-input-container .md-input-message-animation:not(.md-char-counter) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*
 * O ESPAÇADOR da biblioteca guarda 24px, e não os 20px da faixa: com ele a faixa 2 mediria 24. Ele
 * passa a guardar exatamente a faixa — é ali que o contador de caracteres mora.
 */
md-input-container > .md-errors-spacer {
	float: none;
	min-height: var(--campo-mensagem);
}

/*
 * UMA MENSAGEM POR VEZ (US-009.AC-4): em erro, a ajuda cede a linha à mensagem de erro — a do
 * Angular ou a do servidor. A mensagem do servidor ganha o recuo das outras.
 */
md-input-container.md-input-invalid > .ajuda-do-campo,
md-input-container.campo--com-erro > .ajuda-do-campo {
	visibility: hidden;
}

md-input-container > .erro-de-campo {
	padding: 0 var(--campo-recuo);
}

/* ----------------------------------------------------------------------------- os tipos */

/*
 * `md-select` — O VALOR E A SETA DENTRO DA CAIXA, com o recuo do campo (US-011.AC-2).
 *
 * A seta é `.md-select-icon`, irmã do texto dentro de `.md-select-value`. O valor longo trunca sem
 * empurrá-la (US-011.EC-1). O deslocamento de 2px que a biblioteca dá ao texto e à seta era o
 * acerto de linha de base com o sublinhado; sem ele, o valor do select fica na mesma linha de base
 * do texto digitado ao lado.
 */
md-input-container > md-select {
	align-self: stretch;
	display: flex;
	margin: 0;
}

/*
 * O SELECT VAZIO LEVA O MESMO RECUO. A biblioteca dá ao valor em estado de placeholder
 * `padding-left: 0; padding-right: 2px` por `md-input-container md-select
 * .md-select-value.md-select-placeholder`, (0,2,2), que vencia a regra geral, (0,1,2): enquanto
 * nada estava escolhido, a seta ficava a 2px da borda direita (Situação, nos filtros do Evento), e
 * saltava 10px para dentro ao escolher. A terceira linha repete o seletor da biblioteca e vence
 * pela ordem de carga.
 */
md-input-container md-select .md-select-value,
md-input-container.md-input-invalid md-select .md-select-value,
md-input-container md-select .md-select-value.md-select-placeholder {
	flex: 1 1 auto;
	box-sizing: border-box;
	height: 100%;
	min-height: 0;
	padding: 0 var(--campo-recuo);
}

md-input-container md-select .md-select-value > span:not(.md-select-icon) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: none;
}

md-input-container md-select .md-select-value .md-select-icon {
	margin: 0;
	transform: none;
}

/*
 * A CÓPIA DO RÓTULO SAI. Sem valor, o `md-select` escreve o texto do rótulo dentro da caixa e
 * esconde o rótulo de verdade; com a anatomia única o rótulo de verdade É o texto indicativo, e a
 * cópia ficaria atrás dele. `visibility`, e não `display`: a caixa guarda a altura da linha. Vale
 * só quando o autor não deu `placeholder` próprio ao select — aí o texto é outro, e fica.
 */
md-input-container md-select:not([placeholder]) .md-select-value.md-select-placeholder > span:first-child {
	visibility: hidden;
}

/*
 * `md-datepicker` — O CALENDÁRIO E O TRIÂNGULO DENTRO DA BORDA (US-011.AC-1).
 *
 * O componente vira uma linha flexível que ocupa a faixa inteira, com o recuo do campo dos dois
 * lados: o botão do calendário encosta no recuo da esquerda, o triângulo no da direita, e o texto
 * ocupa o que sobra entre os dois — longo, ele é cortado antes do triângulo, sem passar por baixo
 * (US-011.EC-1). As margens, o `float`, o `top: 13.5px` e o deslocamento de 45% da biblioteca eram
 * o posicionamento do sublinhado, e saem todos.
 *
 * `._md-datepicker-has-triangle-icon` é escrito porque a biblioteca o usa para dar ao componente um
 * recuo e uma margem negativa de 18px — o triângulo pendurado para fora do sublinhado.
 */
md-input-container > md-datepicker,
md-input-container > md-datepicker._md-datepicker-has-triangle-icon {
	align-self: stretch;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 var(--campo-recuo);
	overflow: visible;
	min-width: 0;
}

md-input-container md-datepicker .md-datepicker-button.md-icon-button {
	/*
	 * O seletor precisa vencer o `.md-icon-button` da seção 3, que dá o alvo de toque a todo botão
	 * de ícone: por isso `.md-icon-button` escrito aqui. O alvo continua o mesmo, 40×40 (US-011.AC-5).
	 */
	flex: none;
	float: none;
	top: 0;
	margin: 0;
	padding: 0;
	width: var(--alvo-toque);
	min-width: var(--alvo-toque);
	height: var(--alvo-toque);
	min-height: var(--alvo-toque);
	line-height: var(--alvo-toque);
	vertical-align: middle;
}

md-input-container md-datepicker .md-datepicker-input-container,
md-input-container md-datepicker .md-icon-button + .md-datepicker-input-container,
md-input-container md-datepicker .md-datepicker-input-container.md-datepicker-focused {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
	border-width: 0;
}

/*
 * `order: 0` É O QUE DEIXA O TRIÂNGULO À DIREITA. O `<input>` já vem antes do triângulo no DOM, mas
 * o Material dá `order: 2` a todo `.md-input` de `md-input-container` (é como ele põe o rótulo,
 * `order: 1`, acima do campo). Numa linha flexível o triângulo, com `order: 0`, passava à frente
 * do input: saía colado ao calendário, em cima do rótulo em repouso (medido: triângulo em x=529,
 * rótulo em x=533, input só em x=569).
 */
md-input-container md-datepicker .md-datepicker-input.md-input {
	order: 0;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0 0 var(--e-2);
	line-height: var(--e-5);
	font-size: inherit;
}

/*
 * A máscara do calendário é uma sobreposição decorativa com 340px FIXOS; num item flexível ela
 * viraria largura mínima e empurraria o triângulo para fora da borda. Fora do fluxo ela continua
 * cumprindo o papel dela, que é cobrir o texto enquanto o painel abre.
 */
md-input-container md-datepicker .md-datepicker-input-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

md-input-container md-datepicker .md-datepicker-triangle-button.md-button.md-icon-button {
	position: relative;
	right: auto;
	bottom: auto;
	flex: none;
	transform: none;
	margin: 0;
}

/*
 * O RÓTULO DO DATEPICKER EM REPOUSO fica depois do botão do calendário, na posição do texto; a
 * biblioteca o prendia à direita com `right: 18px` e uma largura calculada para o sublinhado. Ao
 * flutuar ele volta ao recuo de todo campo, alinhado com os rótulos das caixas de cima e de baixo.
 *
 * Os seletores repetem as duas classes do Material para pesar (0,4,2) contra os (0,4,1) dele.
 */
md-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
	left: calc(var(--campo-recuo) + var(--alvo-toque) + var(--e-2) - var(--e-1));
	right: auto;
	width: auto;
	max-width: calc(100% - 2 * var(--campo-recuo) - var(--alvo-toque) - var(--e-2) + var(--e-1));
}

md-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-focused > label:not(.md-no-float):not(.md-container-ignore),
md-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-has-placeholder > label:not(.md-no-float):not(.md-container-ignore),
md-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon.md-input-has-value > label:not(.md-no-float):not(.md-container-ignore) {
	left: calc(var(--campo-recuo) - var(--e-1));
	max-width: calc((100% - 2 * var(--campo-recuo) + var(--e-1)) / 0.75);
}

/*
 * O ÍCONE DO DATEPICKER DESABILITADO acompanha o texto desabilitado (US-011.EC-2). O tema do
 * Material pinta o ícone por um seletor próprio, injetado depois desta folha; os dois `[disabled]`
 * — o do componente e o do botão, que a biblioteca desabilita junto — dão o peso que vence.
 */
html md-input-container md-datepicker[disabled] .md-datepicker-button[disabled] .md-datepicker-calendar-icon,
md-input-container .md-input[disabled],
md-input-container md-select[disabled] .md-select-value {
	color: var(--texto-desabilitado);
	opacity: 1;
}

md-input-container .md-input[disabled],
md-input-container md-select[disabled] .md-select-value {
	background-image: none;
}

/*
 * `md-chips` — AS FICHAS DENTRO DA CAIXA (US-014). Vazio, o campo tem a altura e o rótulo interno
 * de todo campo; com fichas, o rótulo sobe para o recorte, e fichas que não cabem numa linha fazem
 * a faixa 1 crescer por linha, sem passar da borda (US-014.EC-1). O sublinhado das fichas é uma
 * sombra no tema do Material, e sai como os outros.
 */
md-input-container > md-chips {
	align-self: stretch;
	display: flex;
	align-items: center;
	min-width: 0;
}

md-input-container md-chips .md-chips,
md-input-container md-chips.md-default-theme .md-chips,
md-input-container md-chips .md-chips.md-focused,
md-input-container md-chips.md-default-theme .md-chips.md-focused {
	box-shadow: none;
	padding: var(--e-2) var(--campo-recuo) 0;
	width: 100%;
	box-sizing: border-box;
}

/*
 * O `.md-chips` NO MEIO É O PESO. A biblioteca dá `margin: 8px 8px 0 0` por `.md-chips md-chip`,
 * (0,1,1), e sem a classe esta regra pesava (0,0,3) e perdia: a folga ia toda para cima da ficha
 * (8px do padding + 8px da margem) e nenhuma para baixo, e a ficha encostava na borda de baixo
 * (Programas, na ficha da família e na da visita). Com a margem embaixo, a ficha de 32px fica
 * centrada nos 48px da faixa 1, e cada linha a mais soma 40px.
 */
md-input-container md-chips .md-chips md-chip {
	margin: 0 var(--e-2) var(--e-2) 0;
}

/*
 * A FICHA ESTÁTICA CRESCE EM ALTURA. A ficha escrita no markup, sem `ng-model`, não ganha o
 * `.md-chip-content` da biblioteca — que é quem segura o texto numa linha, com reticências —, e o
 * texto que não cabe quebra DENTRO dos 32px fixos: a 1044px, "MARANHÃO VERDE :: EIXO INDÍGENA"
 * punha "INDÍGENA" fora da caixa, e a segunda linha de "DATER :: ATER CONVENCIONAL" sumia atrás da
 * ficha de baixo. Uma linha continua medindo 32px (16 de linha e 8 em cima e embaixo); cada linha
 * a mais soma 16. A ficha com `.md-chip-content` (Evento, filtros) fica como está.
 */
md-chips md-chip:not(:has(> .md-chip-content)) {
	height: auto;
	min-height: var(--e-6);
	padding-top: var(--e-2);
	padding-bottom: var(--e-2);
	line-height: var(--e-4);
	box-sizing: border-box;
}

/*
 * O AUTOCOMPLETE QUE ALIMENTA AS FICHAS é a entrada do campo, e não um campo. Sem contêiner próprio,
 * ele cai na regra do autocomplete solto mais abaixo e desenharia uma segunda borda, e reservaria
 * uma segunda faixa de mensagem, dentro da faixa 1 do campo de fichas (Evento, filtros).
 *
 * O `:not([md-floating-label])` É O PESO, e não enfeite. Sem ele esta exceção pesava (0,0,5) e a
 * regra do autocomplete solto, (0,1,3), vencia: a segunda borda aparecia
 * dentro do campo, com o rótulo em repouso por cima dela (Tipo de atividade, Programa, Tema e
 * Público-alvo nos filtros do Evento). Repetir a forma do seletor que ela precisa vencer é o que a
 * faz valer.
 */
md-input-container md-chips md-autocomplete:not([md-floating-label]) md-autocomplete-wrap {
	margin-bottom: 0;
}

md-input-container md-chips md-autocomplete:not([md-floating-label]) md-autocomplete-wrap::before {
	content: none;
}

/*
 * O RÓTULO DO CAMPO DE FICHAS acompanha as FICHAS, e não só o texto digitado (US-014.AC-2,
 * US-014.EC-3). A entrada das fichas sempre traz o atributo `placeholder`, e o Material marca o
 * contêiner com `md-input-has-placeholder`, que faria o rótulo flutuar vazio; e as fichas não
 * passam pelo `ngModel` da entrada, de modo que nenhuma classe diz "tem ficha". Vazio e sem foco,
 * o rótulo repousa na caixa; com uma ficha, ele sobe ao recorte como o de qualquer campo preenchido.
 */
md-input-container.md-input-has-placeholder:has(> md-chips):not(.md-input-focused):not(.md-input-has-value):not(:has(md-chip)) > label:not(.md-no-float):not(.md-container-ignore) {
	top: 50%;
	max-width: calc(100% - 2 * var(--campo-recuo) + var(--e-1));
	transform: translateY(-50%);
	background-color: transparent;
}

md-input-container:has(> md-chips md-chip) > label:not(.md-no-float):not(.md-container-ignore) {
	top: 0;
	max-width: calc((100% - 2 * var(--campo-recuo) + var(--e-1)) / 0.75);
	transform: translateY(-50%) scale(0.75);
	background-color: var(--fundo-do-campo);
}

/*
 * O ESPAÇO ENTRE DOIS CAMPOS NA MESMA LINHA — o contrato do `md-auto-horizontal-margin`, estendido
 * às duas formas de campo que o Material deixa de fora.
 *
 * O Material afasta com 16px, pela margem esquerda, todo `md-input-container` que é filho direto de
 * uma linha e não é o primeiro. Só esse: o `md-autocomplete` não recebe a classe (o
 * `md-input-container` dele fica aninhado), e o embrulho `<div layout="row" flex>` que junta o
 * autocomplete ao botão de limpar também não. Com o sublinhado isso não aparecia; com o contorno,
 * as caixas se ENCOSTAM. Medido no Sintético de Serviço: Pólo, Regional, Equipe e Extensionista
 * em x = 49→366→683→1000→1317, zero pixel entre eles, e Data Início/Fim, que são contêineres
 * diretos, a 16px.
 *
 * AS CONDIÇÕES DE LARGURA SÃO AS DO MATERIAL (`angular-material.css`, bloco
 * `md-auto-horizontal-margin`): a margem vale só enquanto a linha é linha NAQUELA largura. Sem
 * elas, o campo que empilha no celular por `layout-xs="column"` sairia recuado 16px.
 *
 * `:not(.layout-wrap)` É O QUE PRESERVA O PAR DE 50%. Numa linha que quebra, dois `flex="50"` com
 * 16px entre eles somam 100% + 16px e o par vira duas linhas — a Busca afasta as facetas por
 * `padding-right` justamente por isso. Linha que quebra é grade, e grade decide o próprio espaço.
 */
@media (max-width: 599px) {
	.layout-row:not(.layout-xs-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-xs-row:not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child) {
		margin-left: var(--e-4);
	}
}

@media (min-width: 600px) and (max-width: 959px) {
	.layout-row:not(.layout-gt-xs-column):not(.layout-sm-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-xs-row:not(.layout-sm-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-sm-row:not(.layout-sm-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child) {
		margin-left: var(--e-4);
	}
}

@media (min-width: 960px) and (max-width: 1279px) {
	.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-md-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-md-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-sm-row:not(.layout-md-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-md-row:not(.layout-md-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child) {
		margin-left: var(--e-4);
	}
}

@media (min-width: 1280px) and (max-width: 1919px) {
	.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column):not(.layout-lg-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column):not(.layout-lg-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-sm-row:not(.layout-gt-md-column):not(.layout-lg-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-md-row:not(.layout-lg-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-lg-row:not(.layout-lg-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child) {
		margin-left: var(--e-4);
	}
}

@media (min-width: 1920px) {
	.layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column):not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column):not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-sm-row:not(.layout-gt-md-column):not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-md-row:not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-gt-lg-row:not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child),
	.layout-xl-row:not(.layout-gt-lg-column):not(.layout-xl-column):not(.layout-wrap) > :is(md-autocomplete, div:has(> md-autocomplete), div:has(> md-input-container)):not(:first-child) {
		margin-left: var(--e-4);
	}
}

/*
 * O CAMPO SEGUIDO DE TEXTO NA MESMA LINHA. O contrato acima afasta o campo do que vem ANTES dele;
 * o que vem DEPOIS só se afasta quando também é campo. Nas fichas somente leitura, em que a linha
 * alterna rótulo e valor, a caixa de Programas vinha seguida do rótulo "Local de residência" e o
 * rótulo encostava no contorno. A regra geral pediria `:has(+ :not(div:has(…)))`, e `:has()` não
 * aninha; por isso a marca vai no próprio contêiner, e o vão é o mesmo `--e-4` do lado esquerdo.
 */
.campo-seguido-de-texto {
	margin-right: var(--e-4);
}

/*
 * NO CELULAR, A LINHA DE CAMPOS EMPILHA. Nenhuma das linhas de filtro dos relatórios diz
 * `layout-xs="column"`, e a 360px três a cinco campos dividiam a largura: 54px para Pólo, Regional,
 * Equipe e Extensionista no Sintético de Serviço, 11px na busca de Projetos, medido em 28 telas.
 * Abaixo de 600px, a linha cujos filhos são SÓ campos — contêiner, autocomplete, ou o `<div>` que
 * embrulha um deles — vira coluna, e cada campo ocupa a largura toda.
 *
 * "SÓ CAMPOS" É O LIMITE. Linha com botão, texto ou caixa de seleção entre os filhos (a busca com o
 * "Novo" ao lado, as janelas da regra com o botão de remover) continua linha: empilhar ali separa o
 * campo da ação que é dele. E quem já declarou `layout-xs` decidiu, e fica como decidiu.
 *
 * O `:not(.layout-xs-column)` e o `:nth-child(n)` são PESO: a margem do espaço entre campos, logo
 * acima, pesa (0,4,2) e continuaria recuando 16px todo campo depois do primeiro, já empilhado.
 *
 * `nowrap` PORQUE A COLUNA NÃO QUEBRA. Numa linha `layout-wrap layout-align="start center"` (os
 * filtros do Evento), a coluna que quebra agrupa os campos numa faixa do tamanho do mais largo, e o
 * `align-content: center` do Material a centraliza: cada grupo saía com uma largura e uma borda
 * esquerda próprias, a 4px uma da outra.
 */
@media (max-width: 599px) {
	.layout-row:not(.layout-xs-row):not(.layout-xs-column):has(> :is(md-input-container, md-autocomplete), > div > :is(md-input-container, md-autocomplete)):not(:has(> :not(md-input-container, md-autocomplete, div))) {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.layout-row:not(.layout-xs-row):not(.layout-xs-column):has(> :is(md-input-container, md-autocomplete), > div > :is(md-input-container, md-autocomplete)):not(:has(> :not(md-input-container, md-autocomplete, div))) > :nth-child(n) {
		flex: 0 0 auto;
		max-width: none;
		margin-right: 0;
		margin-left: 0;
	}
}

/*
 * `md-autocomplete` — A REGRA GERAL, NO CONTÊINER DE DENTRO. O invólucro não desenha nada; o que
 * sobra dele é o botão de limpar e a barra de progresso, que a biblioteca pendura no invólucro e
 * que precisam ficar dentro da borda do contêiner (US-011.AC-3). Os 30px são o tamanho que a
 * própria biblioteca dá ao botão, na mesma regra.
 */
/*
 * O INVÓLUCRO É TRANSPARENTE. O tema do Material o pinta com `background-hue-1`, e aquele fundo
 * ficaria entre o campo e a superfície: a tarja do rótulo, que pinta a cor da SUPERFÍCIE, viraria
 * um retângulo sobre ele. O `html` é peso contra o seletor de (0,1,1) do tema, injetado depois.
 */
html md-autocomplete.md-default-theme,
html md-autocomplete[md-floating-label] {
	background-color: transparent;
}

md-autocomplete[md-floating-label] .md-show-clear-button button {
	top: calc((var(--campo-altura) - 30px) / 2);
	right: var(--e-2);
}

md-autocomplete[md-floating-label] .md-show-clear-button input.md-input {
	padding-right: calc(var(--e-2) + 30px + var(--e-1));
}

md-autocomplete[md-floating-label] md-autocomplete-wrap md-progress-linear {
	top: calc(var(--campo-altura) - var(--e-1));
	bottom: auto;
	left: var(--campo-recuo);
	right: var(--campo-recuo);
	width: auto;
}

/*
 * O AUTOCOMPLETE SEM RÓTULO FLUTUANTE não tem `md-input-container` nenhum: é um `input` solto no
 * invólucro, 15 ocorrências em 9 views. Sem contêiner não há grade nem `::before`, e ele sairia sem
 * borda nenhuma. Ele recebe a MESMA borda, com os mesmos tokens e estados, no invólucro dele —
 * até a marcação ganhar o rótulo flutuante e esta regra ficar sem ninguém para casar. Não é a
 * exceção retirada: aquela desenhava a borda POR FORA de um contêiner que tem a sua.
 */
md-autocomplete:not([md-floating-label]) {
	height: auto;
}

md-autocomplete:not([md-floating-label]) md-autocomplete-wrap {
	height: var(--campo-altura);
	margin-bottom: var(--campo-mensagem);
}

md-autocomplete:not([md-floating-label]) md-autocomplete-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: var(--borda-campo);
	border-radius: var(--r-controle);
	pointer-events: none;
	transition: border-color var(--dur-rapida) var(--ease-padrao);
}

md-autocomplete:not([md-floating-label]):hover md-autocomplete-wrap::before {
	border-color: var(--borda-componente);
}

md-autocomplete:not([md-floating-label]) md-autocomplete-wrap:focus-within::before {
	border-width: 2px;
	border-color: var(--acao-tinta);
}

md-autocomplete:not([md-floating-label]):has(input[disabled]) md-autocomplete-wrap::before {
	border-width: 1px;
	border-color: var(--borda-neutra);
}

md-autocomplete:not([md-floating-label]) input:not(.md-input) {
	height: var(--campo-altura);
	line-height: var(--campo-altura);
	padding: 0 var(--campo-recuo);
}

/*
 * `md-checkbox` e `md-switch` NA FILEIRA DE UM CAMPO (US-013). Os dois se alinham ao meio da faixa
 * 1 do campo vizinho: ocupam a mesma altura dela e deixam embaixo a mesma linha reservada, de modo
 * que uma fileira de campo e controle termina na mesma altura. O texto longo do switch quebra sem
 * mover o controle (US-013.EC-1).
 */
md-switch {
	height: auto;
	min-height: var(--campo-altura);
	margin-top: 0;
	margin-bottom: var(--campo-mensagem);
	white-space: normal;
}

md-switch .md-label {
	white-space: normal;
}

/*
 * A TRILHA DO SWITCH FICA NO MEIO DA FAIXA 1, e não no meio do texto. O Material centraliza os dois
 * filhos (`align-items: center`): com o texto quebrando em três linhas, a trilha descia 32px e saía
 * da altura do campo vizinho (US-013.EC-1, medido no Dispositivo). Presa ao topo com meia faixa de
 * folga, ela fica onde fica um switch de uma linha; o texto cresce abaixo. Os 24px são a altura fixa
 * da trilha na folha da biblioteca.
 */
md-switch > .md-container {
	align-self: flex-start;
	margin-top: calc((var(--campo-altura) - 24px) / 2);
}

/*
 * A CAIXA E O TEXTO DO `md-checkbox` SE CENTRAM UM NO OUTRO, em todo contexto. O Material não
 * centraliza nada: põe a caixa por `margin-top: 21px` com `translateY(-50%)`, em posição absoluta, e
 * o texto por `margin-top: 10px` — números fechados para a tipografia dele, 14px sobre 20px. Com os
 * 13px deste produto o texto ficava 3,5px acima da caixa no checkbox avulso e 6,5px na fileira de
 * campo, onde a regra abaixo centrava a caixa e deixava o texto preso aos 10px. Medido nas 37
 * ocorrências, em 22 views: nenhuma alinhada. O portão media a caixa contra o campo vizinho, nunca o
 * texto contra a caixa.
 *
 * A caixa sai do posicionamento absoluto e vira item flex, como o texto. Ela continua `relative`
 * porque o disco de foco (`::before`) e o ripple ancoram nela. As margens repetem a geometria
 * horizontal da biblioteca: caixa a 3px da borda do host, texto a 36px (3 + 18 + 3 + 12).
 */
md-checkbox {
	display: inline-flex;
	align-items: center;
}

md-checkbox .md-container {
	position: relative;
	top: auto;
	transform: none;
	flex: none;
	margin: 0 3px;
}

md-checkbox .md-label {
	margin: 0 0 0 12px;
}

md-checkbox .md-label:empty {
	margin: 0;
}

[layout="row"] > md-checkbox,
.layout-row > md-checkbox {
	min-height: var(--campo-altura);
	margin-top: 0;
	margin-bottom: var(--campo-mensagem);
}

/* ------------------------------------------------------------------ AS EXCEÇÕES NOMEADAS
 *
 * Cada uma traz o gancho e o MOTIVO, e nenhuma é silenciada por exclusão ampla. Uma exceção sem
 * motivo escrito é uma regra que ninguém vai ousar remover depois.
 */

/*
 * EXCEÇÃO — campo dentro de `md-toolbar`.
 *
 * MOTIVO: a barra superior é preenchida com a cor da marca, e um contorno sobre ela é um retângulo
 * cinza sobre tinta saturada. Campo em barra é campo de busca, e ele se delimita pela própria
 * superfície tingida. Nenhuma view tem um hoje (medido em 2026-09-23); a regra existe para que o
 * primeiro não nasça com borda.
 */
md-toolbar md-input-container::before {
	border-width: 0;
}

/* ============================================================================================
 * 6. DIÁLOGO — `md-dialog`, 47 ocorrências em 17 views
 *
 * CABEÇALHO NEUTRO. Hoje é uma `md-toolbar` preenchida com a cor primária: um diálogo de
 * confirmação com o mesmo peso cromático da barra do aplicativo. Ele passa a ser título sobre
 * superfície, com divisória — e a cor concentrada volta a ficar onde ela distingue a instalação,
 * que é a barra superior. A Regra da Voz Única não é violada: o diálogo não é identidade, é foco.
 * ========================================================================================== */

/*
 * A CAIXA DO DIÁLOGO, e a coluna de três faixas em que só a do meio rola — sem isso um diálogo
 * mais alto que a janela rola inteiro e o título sai da tela junto com as ações (US-008.EC-1).
 *
 * A LARGURA É UM TETO PADRÃO, E NÃO UMA LARGURA IMPOSTA. Os 560px da §H valem só para o diálogo
 * cujo autor não decidiu largura nenhuma — os presets `confirm()`/`alert()` e os poucos
 * `<md-dialog>` sem `flex`. Quem decidiu continua decidindo, e sem nenhuma regra desta folha:
 *
 *   - `flex="50|60|80|90"` (21 dos 30 `<md-dialog>`) vira a classe `.flex-NN` da biblioteca em
 *     tempo de execução, que declara `max-width: NN%` com peso (0,1,0) e vence este (0,0,1);
 *   - a classe própria da tela (`.aud-dialogo`, `.evento-painel`) também pesa (0,1,0) e vence.
 *
 * Por isso NÃO HÁ variante larga aqui. Havia — `md-dialog[aria-label][flex]` e
 * `md-dialog.md-dialog-fullscreen` a 720px —, e as duas pesavam mais que os ganchos do autor: o
 * `flex="90"` do convênio caía de 90% para 720px, o `flex="50"` crescia para 720px numa janela de
 * 1280px, e o `.md-dialog-fullscreen`, que a biblioteca põe em todo diálogo aberto com
 * `fullscreen: true`, tirava o `.aud-dialogo` dos 900px dele.
 *
 * `border-box` porque o teto é a largura DESENHADA: `tema-escuro.css` põe 1px de borda no
 * diálogo, e em `content-box` os 560px saíam 562px só no escuro. Os diálogos com `flex` já eram
 * `border-box` pela `.flex-NN` da biblioteca; agora todos medem o teto do mesmo jeito.
 */
md-dialog {
	border-radius: var(--r-container);
	box-shadow: var(--sombra-elevada);
	background-color: var(--superficie);
	--fundo-do-campo: var(--superficie);
	box-sizing: border-box;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

/*
 * EXCEÇÃO — o diálogo que mostra uma IMAGEM (a foto e a assinatura da ficha de visita).
 *
 * MOTIVO: os 560px são a medida de um formulário curto, e uma foto não é formulário. Presa neles,
 * a foto rolava de lado dentro do corpo. O teto volta aos 80% da biblioteca, que são o que essas
 * telas sempre tiveram.
 *
 * `:has()` porque a marcação não tem gancho, e a folha não viaja com `.phtml`. Onde `:has()` não
 * existe, a regra some e o diálogo fica nos 560px: a foto rola, mas nada quebra.
 */
md-dialog:has(> md-dialog-content > img) {
	max-width: 80%;
}

/*
 * O CABEÇALHO. `md-toolbar` dentro de `md-dialog` perde o preenchimento e a elevação e vira uma
 * faixa de superfície com divisória. O seletor é descendente para casar as duas formas do legado —
 * a `md-toolbar` direta e a embrulhada num `md-dialog-content`.
 */
md-dialog md-toolbar,
md-dialog md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-dialog md-toolbar:not(.md-menu-toolbar) {
	/*
	 * `inherit`, e não `var(--superficie)`. O diálogo tem UM nível de superfície, e qual é ele
	 * depende do tema: `tema-escuro.css` carrega depois desta folha e põe o `md-dialog` em
	 * `--superficie-elevada`. Um cabeçalho cravado em `--superficie` ficaria um degrau abaixo do
	 * corpo no tema escuro — uma emenda visível atravessando o topo de todo diálogo, medida pelo
	 * portão na primeira execução. Herdando, o cabeçalho é sempre a mesma superfície do diálogo,
	 * qualquer que seja ela, e a folha continua independente de tema.
	 */
	background-color: inherit;

	/* O mesmo `inherit`, pelo mesmo motivo: o cabeçalho É a superfície do diálogo (ADR-008). */
	--fundo-do-campo: inherit;
	color: var(--texto);
	border-bottom: 1px solid var(--borda);
	box-shadow: none;
	min-height: var(--e-7);
}

md-dialog md-toolbar .md-toolbar-tools {
	height: var(--e-7);
	min-height: var(--e-7);
	font-size: var(--t-title);
	font-weight: 500;
	color: var(--texto);
}

md-dialog md-toolbar .md-toolbar-tools md-icon,
md-dialog md-toolbar .md-toolbar-tools .md-button {
	color: var(--icone-neutro);
}

md-dialog md-dialog-content {
	overflow-y: auto;
	flex: 1 1 auto;
}

md-dialog md-toolbar,
md-dialog md-dialog-actions {
	flex: 0 0 auto;
}

/* As ações à direita, a primária por último (US-008.AC-3). */
md-dialog md-dialog-actions {
	justify-content: flex-end;
	border-top: 1px solid var(--borda);
	padding: var(--e-2) var(--e-3);
}

/*
 * O diálogo destrutivo é o ÚNICO caso de ação preenchida na cor de erro (US-008.EC-2).
 *
 * O seletor precisa pesar mais que o do elevado `md-warn` da seção 3, que tira o fundo de todo
 * destrutivo fora daqui: (0,4,2) contra (0,4,1), e (0,6,2) contra (0,6,1) na passagem. Com o peso
 * antigo, (0,3,2), o diálogo perdia para a própria regra desta folha.
 */
html md-dialog-actions .md-button.md-raised.md-warn:not([disabled]),
html md-dialog-actions .md-button.md-raised.md-warn.md-default-theme:not([disabled]) {
	background-color: var(--erro);
	color: var(--texto-sobre-acao);
}

html md-dialog-actions .md-button.md-raised.md-warn:not([disabled]):hover,
html md-dialog-actions .md-button.md-raised.md-warn:not([disabled]).md-focused,
html md-dialog-actions .md-button.md-raised.md-warn.md-default-theme:not([disabled]):hover,
html md-dialog-actions .md-button.md-raised.md-warn.md-default-theme:not([disabled]).md-focused {
	background-color: var(--erro-tinta-media);
	color: var(--texto-sobre-acao);
}

/*
 * DIÁLOGO SOBRE DIÁLOGO: cada um na sua camada, e UM VÉU SÓ (US-008.EC-3).
 *
 * O Material empilha um `md-backdrop` por diálogo; dois véus a 48% escurecem em dobro e a tela do
 * segundo diálogo fica mais escura que a do primeiro sem que nada o justifique. O véu seguinte
 * fica transparente — a camada já separa os planos, e escurecer duas vezes não acrescenta
 * separação, só peso.
 */
md-backdrop.md-dialog-backdrop {
	z-index: var(--camada-veu);
}

.md-dialog-container {
	z-index: var(--camada-dialogo);
}

md-backdrop.md-dialog-backdrop ~ md-backdrop.md-dialog-backdrop {
	z-index: var(--camada-veu-sobreposto);
	opacity: 0;
}

.md-dialog-container ~ .md-dialog-container {
	z-index: var(--camada-dialogo-sobreposto);
}

/*
 * O `md-scroll-mask` VEM JUNTO, e esquecê-lo mata o clique de TODO diálogo do produto.
 *
 * Ao abrir um diálogo, o `$mdUtil.disableScrollAround` do Material injeta um
 * `<div class="md-scroll-mask">` transparente cobrindo a viewport inteira — é ele que impede a
 * página de rolar atrás do diálogo. Na folha da biblioteca ele nasce em `z-index: 50`, logo abaixo
 * do véu (79) e do diálogo (80) DELA.
 *
 * As três regras acima trouxeram véu e diálogo para a escala deste projeto (30 e 40) e deixaram a
 * máscara onde estava. Ela passou a ser a camada MAIS ALTA das três: o diálogo continuava visível,
 * porque a máscara é transparente, e continuava alcançável por TAB, porque foco não faz teste de
 * acerto — mas todo clique do mouse parava nela. `document.elementFromPoint()` no centro do botão
 * "Concordo" do termo de uso devolvia `div.md-scroll-mask`
 * (BUG-20260921-botoes-de-dialogo-nao-respondem-ao-clique).
 *
 * O lugar dela é o do véu: a máscara é parte do mesmo aparato de bloqueio, tem de ficar acima de
 * todo conteúdo de página (`--camada-fixo`, 20) e abaixo do diálogo que ela protege. No empate com
 * o véu quem pinta por cima é ela, que vem depois no DOM — e como é transparente, isso não aparece.
 *
 * Mover a MÁSCARA, e não o diálogo: as quatro camadas acima já estão medidas entre si para o caso
 * de diálogo sobre diálogo, e subir o diálogo para fugir da máscara o colocaria sobre o toast.
 */
.md-scroll-mask {
	z-index: var(--camada-veu);
}

/* ============================================================================================
 * 7. O MESMO VOCABULÁRIO EM `md-card`, `md-toolbar` E `md-chips`
 * ========================================================================================== */

md-card md-card-title {
	padding: var(--e-4);
}

/*
 * O RECUO, E SÓ O RECUO.
 *
 * Havia um `font-size: var(--t-corpo)` aqui, e ele foi um defeito de verdade que o
 * `portao-da-busca.js` pegou na primeira execução depois desta folha: 15/15 antes, 11/15 depois. O
 * campo de busca e o seletor de escopo da tela da Busca NÃO TÊM regra de tamanho própria — a
 * memória deste projeto registra a medição —, eles herdam do `body`, que a task_01 pôs em
 * `0.8125rem` para cumprir o piso de 13px do DESIGN.md. Um tamanho declarado em `md-card-content`
 * se interpõe nessa herança e leva o controle mais usado do produto de volta aos 14px, em toda
 * tela que ponha conteúdo dentro de um cartão.
 *
 * Tipografia de corpo é da RAIZ, e a raiz já decidiu. Esta folha desenha caixa, não texto.
 */
md-card md-card-content {
	padding: var(--e-4);
}

/*
 * `md-toolbar` FORA DO DIÁLOGO continua preenchida com a cor da marca — é a decisão do ADR-006, e
 * a chegada do multi-marca a reforça em vez de enfraquecê-la. O que esta folha faz é a geometria:
 * altura, alvo de toque e tamanho de título. A COR É DA TASK_03, e nada aqui a toca.
 */
md-toolbar:not(.md-menu-toolbar) .md-toolbar-tools {
	font-size: var(--t-title);
	font-weight: 500;
}

md-toolbar .md-button.md-icon-button {
	min-width: var(--alvo-toque);
	min-height: var(--alvo-toque);
}

md-chips md-chip,
.md-chip {
	height: var(--e-6);
	line-height: var(--e-6);
	background-color: var(--superficie-sobreposta);
	color: var(--texto-corpo);
	font-size: var(--t-rotulo);
	box-shadow: none;
}

md-chips md-chip.md-focused,
md-chips md-chip.selected {
	background-color: var(--acao-tingido-fundo);
	color: var(--acao-tingido-tinta);
}

/* ============================================================================================
 * 8. MOVIMENTO
 *
 * Movimento COMUNICA ESTADO — abriu, fechou, chegou, saiu. Nada mais. Não há sequência de entrada
 * de página: quem abre o INAGRO chega numa tarefa, não assiste à tela carregar.
 *
 * Nenhuma duração literal: toda transição desta folha lê `var(--dur-*)` e `var(--ease-padrao)`, e
 * `UT-053` cobra isso varrendo as folhas do projeto.
 * ========================================================================================== */

.md-button,
md-chips md-chip,
md-list.list-striped > md-list-item {
	transition: background-color var(--dur-rapida) var(--ease-padrao),
		color var(--dur-rapida) var(--ease-padrao),
		box-shadow var(--dur-rapida) var(--ease-padrao);
}

md-dialog,
md-sidenav {
	transition-duration: var(--dur-lenta);
	transition-timing-function: var(--ease-padrao);
}

/*
 * MOVIMENTO REDUZIDO. `paleta.css` já zera os tokens de duração neste mesmo `@media`, o que basta
 * para tudo que lê `var(--dur-*)` — isto é, para toda regra desta folha.
 *
 * O que ele NÃO alcança é a biblioteca: `angular-material.min.css` declara `.4s` e `.3s` literais
 * em dezenas de regras, e nenhuma delas lê token nenhum. E2E-018 mede TODA `transition-duration`
 * da tela, não só as nossas — então a anulação precisa ser abrangente, e uma regra abrangente de
 * especificidade zero não vence a biblioteca sem `!important`.
 *
 * É o único `!important` desta folha, e ele não é a estratégia de especificidade dela (ADR-017
 * proíbe isso): é o idioma padrão do escape de movimento reduzido, onde a intenção é justamente
 * vencer TUDO, inclusive o que ainda não foi escrito.
 *
 * A DURAÇÃO AQUI TAMBÉM É TOKEN, e não o `0.01ms` literal que este bloco costuma trazer pronto da
 * internet. `UT-053` recusou o literal, e com razão: dentro deste mesmo `@media`, `--dur-rapida`
 * JÁ VALE `0.01ms`, porque `paleta.css` o redefine aqui (UT-050). Escrever o número seria uma
 * segunda fonte de verdade para o mesmo valor — e seria a fonte que ninguém lembraria de mexer no
 * dia em que "praticamente zero" deixasse de ser um centésimo de milissegundo.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: var(--dur-rapida) !important;
		animation-duration: var(--dur-rapida) !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}