/**
 * Resultado da busca — CSS do componente
 *
 * Referência visual: o mockup oficial em
 * _reference/compracon-react-tsx-original/app/globals.css (D-33), nas regras
 * `.found-quotas`, `.quota-table`, `.status`, `.table-interest-button` e
 * `.empty-state`.
 *
 * NENHUM hexadecimal. Onde o mockup usa um tom solto, entra o token mais
 * próximo do design system; onde ele usa o azul da marca com transparência,
 * usamos color-mix() sobre o token — escrever o rgba seria repetir o
 * hexadecimal decomposto, e ele deixaria de acompanhar o token.
 *
 * ATENCAO: TODA regra desce de `.cpc-resultado`, e não é organização — é o que
 * faz o componente vencer o tema. O Astra estiliza `button` e `table` por
 * elemento, e as regras de estado dele (`button:hover`) pesam mais que uma
 * classe sozinha (regra 12 da convention de widgets). A ÚNICA exceção é a
 * primeira regra do arquivo, e ela explica por quê: o recipiente que o
 * Elementor imprime em volta da seção não é alcançável de dentro dela.
 *
 * A referência roda sobre o reset do Tailwind, que este ambiente não tem: daí
 * a entrelinha e o `font` declarados onde o Astra impõe os dele.
 *
 * @since 4.7.0
 */

/* ═══════════════════════════════════════════════════════════════════════
 * A LARGURA DA SEÇÃO NÃO PODE SAIR DO CONTEÚDO DELA
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ATENCAO: É a única regra do arquivo que não desce de `.cpc-resultado`. Quem
 * decide a largura é o recipiente que o Elementor imprime EM VOLTA da seção, e
 * de dentro dela não há como alcançá-lo.
 *
 * Dentro de um contêiner flex do Elementor, o widget é um item de flex de
 * largura automática — ou seja, a largura do próprio conteúdo. Com o
 * alinhamento de fábrica (esticado) isso dá a largura da tela e ninguém
 * percebe; com o contêiner em linha, ou com o alinhamento trocado para centro
 * ou início, o item passa a medir o conteúdo de verdade. Com muitas cotas a
 * fila é mais larga que a tela e o resultado continua parecendo certo. Com UMA
 * cota a seção inteira encolhe até a largura do cartão e se recolhe para o meio
 * da página.
 *
 * Medido na bancada, tela de 393px, uma cota: seção de 269px no lugar de 393px,
 * conteúdo de 237px e a pílula de situação 30px FORA do cartão. Com esta regra:
 * 393px, 361px e a pílula dentro, em contêiner de coluna e de linha.
 *
 * A saída é a do próprio Elementor, a mesma dos widgets dele que precisam da
 * largura toda — espaçador, divisor, vídeo: o contêiner publica três variáveis
 * dizendo o que fazer em cada direção (em coluna, 100%; em linha, crescer para
 * ocupar a faixa), e quem as lê acompanha o que o operador escolheu no editor.
 * Escrever `width: 100%` na marra tiraria essa escolha dele.
 */
.e-con > .elementor-widget-cpc_resultado,
.e-con-inner > .elementor-widget-cpc_resultado {
	--flex-grow: var(--container-widget-flex-grow, 0);
	--align-self: var(--container-widget-align-self, initial);

	width: var(--container-widget-width, 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
 * A seção NASCE OCULTA, e o esconder mora na classe raiz
 * ═══════════════════════════════════════════════════════════════════════
 *
 * "Oculta" aqui é não ocupar espaço nenhum — nada pode piscar antes da
 * primeira busca. O JavaScript acrescenta `cpc-resultado-visivel` quando a
 * busca começa; dentro do editor do Elementor o PHP já entrega a classe, senão
 * o operador arrastaria um widget invisível.
 *
 * Duas camadas (regra 13): `.cpc-resultado` é o FUNDO e ocupa a largura da
 * tela sempre; `.cpc-resultado-conteudo` é o conteúdo, limitado pelo controle
 * do editor.
 */
.cpc-resultado {
	display: none;
}

.cpc-resultado.cpc-resultado-visivel {
	display: block;
	padding: 76px 0 90px;
	background: var(--cpc-branco);
	color: var(--cpc-texto-2);
	font-family: var(--cpc-fonte);
	font-weight: var(--cpc-peso-corpo);

	/* O Astra declara 1.857 no `body`. A referência não declara entrelinha
	 * nenhuma no corpo: vale `normal`. Sem esta linha, cada célula da tabela
	 * fica mais alta que a do mockup. */
	line-height: normal;
}

/* O atributo `hidden` precisa vencer o `display` do componente: `[hidden]` é a
 * declaração mais fraca que existe e qualquer `display` nosso a apaga. Uma
 * regra, todo elemento do widget — é o idiom de reset, não atalho. */
.cpc-resultado [hidden] {
	display: none !important;
}

/* Camada de conteúdo. `width` e `max-width` separados de propósito: com
 * `min()` numa linha só, o "sem limite" do editor não teria como ser escrito.
 * O respiro de 24px de cada lado é o do design system §1.4. */
.cpc-resultado .cpc-resultado-conteudo {
	width: calc(100% - 48px);
	max-width: var(--cpc-resultado-largura, 1200px);
	min-width: 0;
	margin-inline: auto;
}

/* ── Cabeçalho da seção ──────────────────────────────────────────────── */
.cpc-resultado .cpc-resultado-cabecalho {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.cpc-resultado .cpc-resultado-chapeu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cpc-azul-forte);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-forte);
	letter-spacing: var(--cpc-ee-rotulo);
	text-transform: uppercase;
}

/* 28px no mockup, 25px em celular — a metade de baixo do título de bloco. O
 * token vai até 34px, que é o título de seção: aqui ele deixaria a linha maior
 * que a da referência. Mesmo critério do hero, que também escreve o clamp onde
 * o mockup diverge da escala.
 *
 * `font-family: inherit` porque o Astra declara a fonte dos títulos por
 * elemento, e regra direta vence herança. O peso é o do mockup: ele não
 * declara nenhum no `h3`, e peso ausente significa 400 — nunca o negrito do
 * navegador. */
.cpc-resultado .cpc-resultado-titulo {
	margin: 8px 0 0;
	color: var(--cpc-texto);
	font-family: inherit;
	font-size: clamp(25px, 4vw, 28px);
	font-weight: var(--cpc-peso-corpo);
	line-height: var(--cpc-el-titulo);
	letter-spacing: var(--cpc-ee-numero);
}

.cpc-resultado .cpc-resultado-contagem {
	flex: 0 0 auto;
	padding: 9px 12px;
	border-radius: var(--cpc-raio-xs);
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
	font-size: var(--cpc-t-rotulo);
	font-weight: var(--cpc-peso-dado);
}

/* Contagem vazia não desenha caixa: antes da primeira busca ela não tem texto,
 * e uma pílula azul vazia no canto pareceria defeito. */
.cpc-resultado .cpc-resultado-contagem:empty {
	display: none;
}

/* ── Buscando e falhou ───────────────────────────────────────────────── */
.cpc-resultado .cpc-resultado-aviso {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: var(--cpc-raio-md);
	background: var(--cpc-fundo);
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo);
}

.cpc-resultado .cpc-resultado-aviso-falha {
	border: 1px solid var(--cpc-alerta-linha);
	background: var(--cpc-alerta-fundo);
	color: var(--cpc-alerta-texto);
}

/* ── A tabela ────────────────────────────────────────────────────────────
 *
 * A rolagem é do recipiente, nunca do corpo da página (regra 7 do design
 * system). O `tabindex` no recipiente é o que permite rolar sem mouse — a
 * referência já marca assim.
 */
.cpc-resultado .cpc-resultado-tabela-wrap {
	overflow-x: auto;
	border: 1px solid var(--cpc-linha);
	border-radius: var(--cpc-raio-lg);
	background: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-3);
	scrollbar-color: color-mix(in srgb, var(--cpc-azul) 35%, var(--cpc-branco)) transparent;
	scrollbar-width: thin;
}

.cpc-resultado .cpc-resultado-tabela {
	width: 100%;
	min-width: 970px;
	margin: 0;
	border-spacing: 0;
	border-collapse: separate;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-rotulo);
}

.cpc-resultado .cpc-resultado-tabela th,
.cpc-resultado .cpc-resultado-tabela td {
	padding: 17px 16px;
	border-bottom: 1px solid var(--cpc-linha-clara);
	text-align: left;
	white-space: nowrap;
}

.cpc-resultado .cpc-resultado-tabela th {
	background: var(--cpc-fundo-tabela-cabecalho);
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-micro);

	/* 850 no mockup. A regra 4 do design system mapeia peso quebrado para o
	 * múltiplo de 100 mais próximo: peso não carregado cai no vizinho sem
	 * aviso. */
	font-weight: var(--cpc-peso-forte);
	letter-spacing: var(--cpc-ee-rotulo);
	text-transform: uppercase;
}

/* O canto de dentro acompanha o de fora, menos a borda. */
.cpc-resultado .cpc-resultado-tabela th:first-child {
	border-radius: calc(var(--cpc-raio-lg) - 1px) 0 0;
}

.cpc-resultado .cpc-resultado-tabela th:last-child {
	border-radius: 0 calc(var(--cpc-raio-lg) - 1px) 0 0;
}

.cpc-resultado .cpc-resultado-tabela tbody tr {
	transition: background .18s ease;
}

.cpc-resultado .cpc-resultado-tabela tbody tr:hover {
	background: var(--cpc-fundo-campo);
}

.cpc-resultado .cpc-resultado-tabela tbody tr:last-child td {
	border-bottom: 0;
}

.cpc-resultado .cpc-resultado-tabela td:first-child {
	min-width: 170px;
}

.cpc-resultado .cpc-resultado-tabela td strong {
	display: block;
	color: var(--cpc-texto);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-dado);
}

.cpc-resultado .cpc-resultado-tabela td small {
	display: block;
	margin-top: 4px;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-nano);
}

/* ── Categoria e status dentro da linha ──────────────────────────────── */
.cpc-resultado .cpc-resultado-categoria {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--cpc-azul-forte);

	/* 750 no mockup — regra 4 de novo. */
	font-weight: var(--cpc-peso-forte);
}

/* Sem `stroke` no atributo do SVG: a cor vem daqui, e assim o desenho
 * acompanha a cor do texto ao redor. */
.cpc-resultado .cpc-resultado-icone {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cpc-resultado .cpc-resultado-status {
	display: inline-block;
	padding: 6px 8px;
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-neutro-fundo);
	color: var(--cpc-neutro-texto);
	font-size: var(--cpc-t-micro-grande);
	font-weight: var(--cpc-peso-forte);
}

/* Nenhuma informação depende só de cor (regra 5): o verde acompanha a palavra
 * "Contemplada", nunca a substitui. */
.cpc-resultado .cpc-resultado-status-contemplada {
	background: var(--cpc-ok-fundo);
	color: var(--cpc-ok-texto);
}

/* ── Botão de cada linha ─────────────────────────────────────────────────
 *
 * `font: inherit` antes do tamanho: sem ele o botão sai na fonte do navegador.
 * A cor no `:hover` é declarada porque o Astra pinta de branco o texto de
 * qualquer botão sob o mouse — aqui o fundo também vira azul, e as duas
 * declarações precisam andar juntas.
 */
.cpc-resultado .cpc-resultado-interesse {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 24%, transparent);
	border-radius: var(--cpc-raio-xs);
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
	font: inherit;
	font-size: var(--cpc-t-micro);
	font-weight: var(--cpc-peso-forte);
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease;
}

.cpc-resultado .cpc-resultado-interesse:hover,
.cpc-resultado .cpc-resultado-interesse:focus-visible {
	border-color: var(--cpc-azul);
	background: var(--cpc-azul);
	color: var(--cpc-branco);
	transform: translateY(-1px);
}

.cpc-resultado .cpc-resultado-interesse span {
	font-size: var(--cpc-t-corpo-grande);
}

/* ── Estado vazio ────────────────────────────────────────────────────────
 *
 * A borda tracejada do mockup é um azul-acinzentado que não está na paleta; o
 * token de linha é o papel dela, e a diferença numa borda tracejada é
 * imperceptível. Preferir o token a inventar o tom.
 */
.cpc-resultado .cpc-resultado-vazio {
	display: grid;
	place-items: center;
	min-height: 290px;
	padding: 40px;
	border: 1px dashed var(--cpc-linha);
	border-radius: var(--cpc-raio-lg);
	background: var(--cpc-fundo);
	text-align: center;
}

.cpc-resultado .cpc-resultado-vazio h3 {
	margin: 20px 0 5px;
	color: var(--cpc-texto);
	font-family: inherit;
	font-size: var(--cpc-t-card-grande);
	font-weight: var(--cpc-peso-forte);
}

.cpc-resultado .cpc-resultado-vazio p {
	margin: 0 0 20px;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo);
}

/* A lupa é desenhada em CSS, como na referência: um círculo e um cabo. */
.cpc-resultado .cpc-resultado-lupa {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cpc-azul);
	border-radius: 50%;
}

.cpc-resultado .cpc-resultado-lupa::after {
	position: absolute;
	right: -5px;
	bottom: -4px;
	width: 7px;
	height: 2px;
	border-radius: 2px;
	background: var(--cpc-azul);
	content: "";
	transform: rotate(45deg);
}

.cpc-resultado .cpc-resultado-limpar {
	min-height: 42px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-azul);
	color: var(--cpc-branco);
	font: inherit;
	font-size: var(--cpc-t-corpo);
	font-weight: var(--cpc-peso-forte);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.cpc-resultado .cpc-resultado-limpar:hover,
.cpc-resultado .cpc-resultado-limpar:focus-visible {
	background: var(--cpc-azul-forte);
	color: var(--cpc-branco);
	transform: translateY(-1px);
}

/* ── Só para leitor de tela ──────────────────────────────────────────── */
.cpc-resultado .cpc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * A FILA DE CARTÕES — o que aparece no lugar da tabela abaixo de 961px
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Referência visual: `.cota-card` e `.cota-carousel-controls` do mockup.
 *
 * ATENCAO: O QUE PROTEGE A PÁGINA (A-73), medido no portão 1 desta fase:
 *
 *   a fila é FLEX e ROLA           393px   correto, e é esta peça
 *   a fila com width: max-content 2836px   defeito, e é o que o mockup faz
 *   a fila sem overflow-x         3507px   defeito
 *   a tabela à mostra              720px   defeito, mesmo sem min-width e sem nowrap
 *
 * Ou seja: quem fecha a A-73 é a tabela NÃO ser desenhada, e quem mantém a
 * fila inofensiva é ela ser um recipiente flex que rola. Não trocar nenhuma
 * das duas por "um contêiner com overflow". Medição completa em
 * epics/03-home-hero-e-busca/03006-resultado-em-cartoes/_planning/validacao-da-solucao.md
 *
 * A fila não existe de 961px para cima: lá o resultado é a tabela.
 */
.cpc-resultado .cpc-resultado-fila-wrap {
	display: none;
}

.cpc-resultado .cpc-resultado-fila,
.cpc-resultado .cpc-resultado-fila-fantasma {
	position: relative;
	display: flex;
	gap: 18px;
	min-width: 0;
	margin: 0;
	overflow-x: auto;

	/* Respiro para a sombra do cartão não ser cortada pela própria rolagem. */
	padding: 4px 2px 18px;

	list-style: none;
	scroll-snap-type: x mandatory;

	/* Chegando ao fim da fila, o arrasto não vaza para a página atrás. */
	overscroll-behavior-inline: contain;

	scrollbar-width: none;
}

/* A barra de rolagem não aparece: quem navega a fila usa o arrasto ou as
 * setas, e uma barra sob os cartões cortaria a sombra deles. */
.cpc-resultado .cpc-resultado-fila::-webkit-scrollbar {
	display: none;
}

/* ATENCAO: `min-width: 0` protege O CARTÃO, não a página: item de flex nasce com
 * `min-width: auto`, que é o tamanho mínimo do conteúdo. Sem ele, um nome de
 * administradora comprido leva o cartão a 529px e come a espiada inteira
 * (medido). A página continua correta nos dois casos. */
.cpc-resultado .cpc-resultado-cartao {
	display: flex;
	flex: 0 0 min(82%, 353px);
	flex-direction: column;
	min-width: 0;

	/* O Astra dá margem a item de lista por elemento, e ela se somaria ao
	 * espaço entre os cartões — o mesmo motivo pelo qual a tabela zera a dela. */
	margin: 0;

	padding: 19px;
	border: 1px solid var(--cpc-linha);

	/* O mockup usa 16px, que fica entre dois degraus da escala. Vai o mesmo
	 * canto que o recipiente da tabela já usa nesta faixa. */
	border-radius: var(--cpc-raio-md);

	background: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-1);
	scroll-snap-align: start;
}

.cpc-resultado .cpc-resultado-cartao-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* `font-family: inherit` porque o Astra declara a fonte dos títulos por
 * elemento, e regra direta vence herança — o mesmo motivo do título da seção.
 * A quebra de palavra segura nome comprido dentro do cartão. */
.cpc-resultado .cpc-resultado-cartao-titulo {
	margin: 17px 0 0;
	color: var(--cpc-texto);
	font-family: inherit;
	font-size: var(--cpc-t-corpo-grande);
	font-weight: var(--cpc-peso-dado);
	line-height: var(--cpc-el-titulo);
	overflow-wrap: anywhere;
}

.cpc-resultado .cpc-resultado-cartao-grupo {
	margin: 4px 0 0;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-nano);
}

.cpc-resultado .cpc-resultado-cartao-credito {
	margin: 12px 0 0;
}

.cpc-resultado .cpc-resultado-cartao-rotulo {
	display: block;
	margin-bottom: 5px;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-micro);
}

.cpc-resultado .cpc-resultado-cartao-credito strong {
	display: block;
	color: var(--cpc-texto);
	font-size: var(--cpc-t-numero);
	font-weight: var(--cpc-peso-dado);
	letter-spacing: var(--cpc-ee-numero);
}

/* O bloco cresce para ocupar a sobra, e é o que deixa o botão colado embaixo
 * em todos os cartões — inclusive nos que não têm grupo. */
.cpc-resultado .cpc-resultado-cartao-linhas {
	flex: 1 0 auto;
	margin-top: 17px;
	padding: 11px 0;
	border-top: 1px solid var(--cpc-linha-clara);
	border-bottom: 1px solid var(--cpc-linha-clara);
}

.cpc-resultado .cpc-resultado-cartao-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-micro);
}

.cpc-resultado .cpc-resultado-cartao-linha + .cpc-resultado-cartao-linha {
	margin-top: 7px;
}

.cpc-resultado .cpc-resultado-cartao-linha strong {
	color: var(--cpc-texto);
	font-size: var(--cpc-t-micro-grande);
	font-weight: var(--cpc-peso-dado);
}

/* No cartão o botão é a ação principal da tela: azul cheio, texto branco e
 * centrado, no mesmo tratamento do "Buscar cotas disponíveis" do hero — mesmo
 * gradiente, mesma sombra, mesmo peso (decisão do operador, 2026-08-13). E
 * 48px, o mínimo de alvo principal da regra 8 do design system.
 *
 * ATENCAO: SEM as duas animações do botão do hero — nem a respiração, nem o
 * lustro que atravessa. Pedido do operador: brilho aqui, no meio de uma fila
 * que já se move, vira ruído.
 *
 * A classe é só do cartão. O botão da linha da tabela continua o chip
 * secundário de 34px que sempre foi. */
.cpc-resultado .cpc-resultado-interesse-cartao {
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 14px;
	border: 0;
	background: var(--cpc-grad-botao);
	color: var(--cpc-branco);
	font-size: var(--cpc-t-corpo);
	box-shadow: var(--cpc-sombra-azul);
}

/* O tema pinta o texto de qualquer botão sob o mouse: a cor é declarada de novo
 * em todo estado, senão o rótulo branco se perde no azul. */
.cpc-resultado .cpc-resultado-interesse-cartao:hover,
.cpc-resultado .cpc-resultado-interesse-cartao:focus-visible {
	border: 0;
	background: var(--cpc-grad-botao);
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-azul-hover);
}

/* ── Setas e contador da tabela ──────────────────────────────────────────
 *
 * FORA do recipiente que rola: dentro dele os controles andariam de lado com a
 * tabela. A tabela mostra oito cotas por vez porque a altura dela é o que
 * empurrava o resultado para fora da tela (decisão do operador, 2026-08-13).
 */
.cpc-resultado .cpc-resultado-tabela-rodape {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.cpc-resultado .cpc-resultado-tabela-posicao {
	margin-right: 6px;
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-rotulo);
	font-weight: var(--cpc-peso-dado);
}

.cpc-resultado .cpc-resultado-tabela-anterior,
.cpc-resultado .cpc-resultado-tabela-proxima {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 24%, transparent);
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
	font: inherit;
	font-size: var(--cpc-t-corpo-grande);
	cursor: pointer;
	box-shadow: var(--cpc-sombra-1);
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

/* Mesmo tratamento das setas da fila: realce na borda e na seta, nunca a
 * bolinha cheia. */
.cpc-resultado .cpc-resultado-tabela-anterior:hover:not(:disabled),
.cpc-resultado .cpc-resultado-tabela-anterior:focus-visible:not(:disabled),
.cpc-resultado .cpc-resultado-tabela-proxima:hover:not(:disabled),
.cpc-resultado .cpc-resultado-tabela-proxima:focus-visible:not(:disabled) {
	border-color: var(--cpc-azul);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
}

.cpc-resultado .cpc-resultado-tabela-anterior:disabled,
.cpc-resultado .cpc-resultado-tabela-proxima:disabled {
	opacity: .35;
	cursor: default;
}

/* ── O espaço reservado da busca ─────────────────────────────────────────
 *
 * ATENCAO: Isto não é enfeite de carregamento. A página rola até a seção ANTES
 * de o servidor responder; se a seção estiver curta nessa hora, o navegador
 * apara a rolagem no fim do documento e o primeiro cartão nasce cortado pela
 * barra do navegador do celular. O fantasma dá à seção, desde o primeiro
 * instante, a altura que ela terá com as cotas.
 *
 * Ele usa AS MESMAS classes do cartão, então a altura reservada acompanha
 * qualquer mudança no cartão sem ninguém precisar lembrar.
 */
/* O esqueleto existe nas duas faixas: no computador ele reserva a altura da
 * tabela, no celular a dos cartões. Dentro dele, a forma que não é da faixa
 * fica escondida — exatamente como o resultado de verdade faz. */
.cpc-resultado .cpc-resultado-esqueleto .cpc-resultado-fila-fantasma,
.cpc-resultado .cpc-resultado-esqueleto .cpc-resultado-fila-rodape {
	display: none;
}

.cpc-resultado .cpc-resultado-fila-fantasma {
	overflow: hidden;
}

/* As barras cinzas. Sem animação: a interface funciona inteira sem nenhuma
 * (regra 6 do design system), e piscar embaixo de uma fila que desliza é
 * ruído.
 *
 * ATENCAO: NENHUMA barra declara altura. Cada uma carrega um espaço rígido e
 * vive dentro do mesmo elemento que o texto de verdade vai ocupar, com a mesma
 * fonte — a altura sai igual por construção. Foi a segunda tentativa: com
 * altura declarada em `1em`, o espaço reservado saía 41px menor que os cartões,
 * e a página parava 41px antes do lugar. Medido. */
.cpc-resultado .cpc-resultado-fantasma {
	display: block;
	width: 100%;
	border-radius: var(--cpc-raio-xs);
	background: var(--cpc-linha-clara);

	/* A barra é forma, não texto: nada dentro dela pode aparecer. */
	color: transparent;
}

/* As peças do topo herdam a forma da peça de verdade — a pílula do status
 * inclusive —, e a cor cinza vem depois, porque esta regra é a última. */
.cpc-resultado .cpc-resultado-cartao-topo .cpc-resultado-fantasma {
	width: 96px;
}

.cpc-resultado .cpc-resultado-cartao-topo .cpc-resultado-status.cpc-resultado-fantasma {
	width: 74px;
	background: var(--cpc-linha-clara);
}

.cpc-resultado .cpc-resultado-cartao-titulo .cpc-resultado-fantasma {
	width: 78%;
}

/* A segunda linha do titulo fantasma. Sem respiro entre as duas: duas linhas de
 * texto tambem nao tem. */
.cpc-resultado .cpc-resultado-cartao-titulo .cpc-resultado-fantasma + .cpc-resultado-fantasma {
	width: 52%;
}

.cpc-resultado .cpc-resultado-cartao-grupo .cpc-resultado-fantasma {
	width: 42%;
}

.cpc-resultado .cpc-resultado-cartao-rotulo .cpc-resultado-fantasma {
	width: 56px;
}

.cpc-resultado .cpc-resultado-cartao-credito strong .cpc-resultado-fantasma {
	width: 62%;
}

.cpc-resultado .cpc-resultado-cartao-linha .cpc-resultado-fantasma {
	width: 52px;
}

.cpc-resultado .cpc-resultado-cartao-linha strong .cpc-resultado-fantasma {
	width: 78px;
}

.cpc-resultado .cpc-resultado-fantasma-mais {
	width: 116px;
	border-color: transparent;
	background: var(--cpc-linha-clara);
}

.cpc-resultado .cpc-resultado-fantasma-circulo {
	width: 36px;
	height: 36px;
	border-radius: var(--cpc-raio-pilula);
}

.cpc-resultado .cpc-resultado-fantasma-contador {
	width: 42px;
	height: 12px;
}

/* ── Setas, contador e "ver mais" ────────────────────────────────────── */
.cpc-resultado .cpc-resultado-fila-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cpc-resultado .cpc-resultado-fila-controles {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cpc-resultado .cpc-resultado-fila-controles button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 24%, transparent);
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
	font: inherit;
	font-size: var(--cpc-t-corpo-grande);
	cursor: pointer;
	box-shadow: var(--cpc-sombra-1);
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

/* ATENCAO: o realce NAO pinta a bolinha inteira, e isso é decisão do operador
 * (2026-08-13): no celular, `:hover` gruda depois do toque — o dedo sai e o
 * botão continua no estado de "mouse em cima". Com a bolinha cheia, a seta que
 * a pessoa acabou de usar ficava azul maciça, parecendo outra coisa. O realce é
 * a borda e a seta, e o fundo continua branco.
 *
 * O branco e a cor da seta são declarados de novo porque o Astra pinta o texto
 * de qualquer botão sob o mouse. */
.cpc-resultado .cpc-resultado-fila-controles button:hover:not(:disabled),
.cpc-resultado .cpc-resultado-fila-controles button:focus-visible:not(:disabled) {
	border-color: var(--cpc-azul);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
}

.cpc-resultado .cpc-resultado-fila-controles button:disabled {
	opacity: .35;
	cursor: default;
}

.cpc-resultado .cpc-resultado-fila-posicao {
	min-width: 42px;
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-micro);
	font-weight: var(--cpc-peso-dado);
	text-align: center;
}

.cpc-resultado .cpc-resultado-fila-mais,
.cpc-resultado .cpc-resultado-fantasma-mais {
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--cpc-linha);
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
	font: inherit;
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-forte);
	cursor: pointer;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.cpc-resultado .cpc-resultado-fila-mais:hover,
.cpc-resultado .cpc-resultado-fila-mais:focus-visible {
	border-color: var(--cpc-azul);
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
}

/* ═══════════════════════════════════════════════════════════════════════
 * A JANELA DO EXTRATO — `<dialog>` aberto com showModal()
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Referência: `.quota-modal` e vizinhas no `globals.css` do mockup.
 *
 * ATENCAO: elemento aberto por `showModal()` vai para a CAMADA DE TOPO do
 * navegador. Ele deixa de ser posicionado em relação a qualquer ancestral, e
 * nenhum `transform`, `filter` ou `overflow` de contêiner do Elementor o corta
 * ou o desloca. Uma janela de `position: fixed` quebraria dentro de contêiner
 * com animação de entrada — e isso só apareceria na página montada.
 *
 * O bloco de fábrica do `<dialog>` já traz `margin: auto`, que é o que centra a
 * janela; aqui só se declara o que muda. A janela FECHADA não é desenhada pelo
 * navegador, e por isso nenhuma regra deste bloco precisa escondê-la.
 *
 * O respiro em volta da janela é `max-width`/`max-height` dela, não
 * preenchimento de um recipiente: em `<dialog>` não existe recipiente — o que
 * há é a faixa escura, que é um pseudoelemento sem caixa própria.
 */
.cpc-resultado .cpc-resultado-extrato {
	width: min(720px, calc(100% - 36px));

	/* ── Topo ancorado ───────────────────────────────────────── 03008 ──
	 *
	 * O bloco de fábrica do `<dialog>` traz `margin: auto`, que centra a janela
	 * nos dois eixos. Centrada, ela reparte QUALQUER diferença de altura pelas
	 * duas pontas: as três faces medem 847px, 654px e 292px, e a troca movia as
	 * quatro bordas de uma vez. Ancorado o topo, só o pé anda — o cabeçalho e o
	 * "×" ficam parados, e a janela lê como um elemento só com o miolo trocado.
	 *
	 * ATENCAO: a conta do respiro é o que faz isto funcionar. 48px de topo mais
	 * 18px de pé são os 66px que saem da altura máxima. Mexer num número sem
	 * mexer no outro faz a janela alta encostar numa das bordas.
	 */
	margin: 48px auto auto;

	/* Duas alturas, e a segunda ganha em quem a conhece: `svh` é a altura da
	 * tela do celular COM a barra do navegador à mostra, que é o estado em que
	 * a página abre. Com `vh` puro a janela nasce mais alta que a tela. */
	max-height: calc(100vh - 66px);
	max-height: calc(100svh - 66px);

	/* O horizontal fecha por causa do deslize das faces: elas saem 30px para o
	 * lado, e com `auto` isso viraria barra de rolagem lateral no meio da
	 * animação. O vertical continua rolando, que é o que a barra de ações presa
	 * no pé precisa para colar. */
	overflow-x: hidden;
	overflow-y: auto;

	/* A troca de face anima daqui. Quem mede e trava a altura é o JavaScript;
	 * o CSS só declara como o número anda. Mesma curva e duração da animação de
	 * entrada, logo abaixo — duas velocidades na mesma janela leem como dois
	 * componentes. */
	transition: height .24s ease;
	overscroll-behavior: contain;

	/* Sem respiro embaixo: quem o dá é a barra de ações, que fica presa no pé
	 * da janela e precisa encostar na borda para o conteúdo passar por baixo
	 * dela sem aparecer numa fresta. */
	padding: 28px 28px 0;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 18%, transparent);

	/* Bloco, não controle: a tabela do §1.5 põe janela e painel principal no
	 * `xl` — e é o mesmo raio da referência. */
	border-radius: var(--cpc-raio-xl);
	background: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-5);
	color: var(--cpc-texto-2);
	font-family: var(--cpc-fonte);
	font-weight: var(--cpc-peso-corpo);
	line-height: normal;
	animation: cpc-extrato-entra .24s ease both;
}

/* ATENCAO: a faixa escura herda os tokens do elemento que a originou, e isso
 * só passou a valer nos navegadores recentes. Se algum não resolver o token, a
 * faixa fica transparente — a janela continua funcionando, sem o escurecido. */
.cpc-resultado .cpc-resultado-extrato::backdrop {
	background: color-mix(in srgb, var(--cpc-escuro) 58%, transparent);
	backdrop-filter: blur(7px);
	animation: cpc-extrato-fundo .2s ease both;
}

@keyframes cpc-extrato-fundo {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ── O deslize entre as faces ──────────────────────────────── 03008 ──
 *
 * Avançar joga o conteúdo para a ESQUERDA e traz o novo pela direita; voltar
 * faz o inverso. É o gesto que diz "andei uma etapa" sem precisar de rótulo de
 * etapa nenhum — a direção carrega o sentido.
 *
 * ATENCAO: sai e entra são SEQUENCIAIS, não simultâneas. As duas faces nunca
 * estão na tela ao mesmo tempo: quem decide qual aparece é um atributo, e ele
 * troca no intervalo entre as duas animações. Cruzar as duas exigiria tirá-las
 * do fluxo, e aí a altura da janela deixaria de ser mensurável.
 */
@keyframes cpc-face-sai-esquerda {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-30px); }
}

@keyframes cpc-face-sai-direita {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(30px); }
}

@keyframes cpc-face-entra-direita {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes cpc-face-entra-esquerda {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* A saída é mais curta que a entrada de propósito: sair rápido e entrar com
 * calma lê como uma peça sendo trazida, e não como duas peças disputando. */
.cpc-resultado .cpc-resultado-face-sai-esquerda {
	animation: cpc-face-sai-esquerda .15s ease-in both;
}

.cpc-resultado .cpc-resultado-face-sai-direita {
	animation: cpc-face-sai-direita .15s ease-in both;
}

.cpc-resultado .cpc-resultado-face-entra-direita {
	animation: cpc-face-entra-direita .24s ease-out both;
}

.cpc-resultado .cpc-resultado-face-entra-esquerda {
	animation: cpc-face-entra-esquerda .24s ease-out both;
}

@keyframes cpc-extrato-entra {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * A PÁGINA ATRÁS NÃO ROLA — segunda exceção à regra 12
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ATENCAO: esta é a segunda regra do arquivo que não desce de
 * `.cpc-resultado`, e pelo mesmo motivo da primeira: o elemento que precisa ser
 * alcançado — o `<html>` — não existe dentro do widget. A classe leva o prefixo
 * do projeto, como toda classe nossa.
 *
 * ATENCAO: NÃO é redundância com o `<dialog>`. Medido na bancada em
 * 2026-08-21, com a janela aberta por `showModal()`: uma rodada de mouse sobre
 * a faixa escura levou a página de 0 a 500px nas três telas. O `<dialog>` torna
 * o resto da página inerte ao clique e ao foco — não à rolagem.
 *
 * O respiro à direita repõe a largura que a barra de rolagem ocupava: sem ele o
 * conteúdo atrás salta uns 15px no instante em que a janela abre. A medida é
 * lida pelo navegador na hora, porque ela varia com o sistema e com o
 * aparelho — em celular costuma ser zero.
 *
 * ⚠️ Cabeçalho fixo do site continua se posicionando pela tela, não por este
 * respiro: ele ainda salta a largura da barra. Atrás de uma faixa escura
 * borrada, não se enxerga — e a saída para isso seria mexer em CSS global do
 * tema, que não é desta fase.
 */
html.cpc-extrato-aberto {
	overflow: hidden;
	padding-right: var(--cpc-extrato-respiro, 0);
}

/* ── Fechar ──────────────────────────────────────────────────────────────
 *
 * Redondo: a exceção 1 da regra 10 do design system — em controle redondo a
 * forma manda, e a altura não entra na conta do raio.
 *
 * A cor no `:hover` é declarada junto com o fundo porque o Astra pinta de
 * branco o texto de qualquer botão sob o mouse.
 */
.cpc-resultado .cpc-resultado-extrato-fechar {
	position: absolute;
	top: 17px;
	right: 17px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0 0 2px;
	border: 0;
	border-radius: 50%;
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
	font: inherit;
	font-size: var(--cpc-t-numero);
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.cpc-resultado .cpc-resultado-extrato-fechar:hover,
.cpc-resultado .cpc-resultado-extrato-fechar:focus-visible {
	background: color-mix(in srgb, var(--cpc-azul) 14%, var(--cpc-branco));
	color: var(--cpc-azul-forte);
	transform: rotate(4deg) scale(1.04);
}

/* ── O cabeçalho que NÃO troca ─────────────────────────────── 03008 ──
 *
 * Chapéu, categoria, situação, administradora, "Grupo · Cota" e o bloco de
 * crédito. Ele é irmão das três faces, não filho de nenhuma — e é por não ter
 * `data-cpc-face-conteudo` que a regra que esconde face nunca o alcança.
 *
 * O respiro embaixo é o que separa o que fica do que troca, e substitui o
 * respiro que a barra de progresso dava quando ela vinha logo depois do
 * crédito dentro da mesma face.
 */
.cpc-resultado .cpc-resultado-extrato-fixo {
	margin-bottom: 20px;
}

/* ── Cabeçalho ───────────────────────────────────────────────────────────
 *
 * O respiro à direita é o lugar do "×", que fica por cima: sem ele a pílula de
 * situação passaria por baixo do botão.
 */
.cpc-resultado .cpc-resultado-extrato-cabecalho {
	padding-right: 52px;
}

/* O chapéu da seção mede 13px; o da janela, 12px. Cor, peso, caixa alta e
 * espacejamento são os mesmos — só o tamanho e o fato de ocupar a linha
 * inteira mudam.
 *
 * ATENCAO: a referência usa 10px aqui, e nas outras seis peças marcadas abaixo.
 * Este arquivo NÃO segue esse número: 10px com espacejamento em caixa alta é
 * pequeno demais para leitura confortável, e a referência é base, não lei
 * (regra 9 do design system). Decisão do operador em 2026-08-21. */
.cpc-resultado .cpc-resultado-extrato .cpc-resultado-chapeu {
	display: block;
	margin-bottom: 13px;
	font-size: var(--cpc-t-rotulo);
}

/* A pílula de situação sobe um degrau SÓ dentro da janela. A da linha da
 * tabela e a do cartão continuam em 11px — mexer na classe base mudaria as
 * três, e a decisão do operador foi sobre a janela. */
.cpc-resultado .cpc-resultado-extrato-status {
	font-size: var(--cpc-t-rotulo);
}

.cpc-resultado .cpc-resultado-extrato-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* Na linha da tabela a categoria vem em caixa normal; na janela ela é chapéu, e
 * a referência a escreve em caixa alta. 11px na referência (legibilidade). */
.cpc-resultado .cpc-resultado-extrato-categoria {
	font-size: var(--cpc-t-rotulo);
	letter-spacing: var(--cpc-ee-rotulo);
	text-transform: uppercase;
}

/* `font-family: inherit` porque o Astra declara a fonte dos títulos por
 * elemento, e regra direta vence herança. O peso é o da referência: ela não
 * declara nenhum, e peso ausente significa 400 — nunca o negrito do navegador. */
.cpc-resultado .cpc-resultado-extrato-titulo {
	margin: 16px 0 4px;
	color: var(--cpc-texto);
	font-family: inherit;
	font-size: var(--cpc-t-titulo-bloco);
	font-weight: var(--cpc-peso-corpo);
	line-height: var(--cpc-el-titulo);
	letter-spacing: var(--cpc-ee-numero);
}

.cpc-resultado .cpc-resultado-extrato-identificacao {
	margin: 0;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-corpo);
}

/* ── Crédito em destaque ─────────────────────────────────────────────── */
.cpc-resultado .cpc-resultado-extrato-credito {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-top: 22px;
	padding: 18px 20px;
	border-radius: var(--cpc-raio-md);
	background: linear-gradient(120deg, var(--cpc-azul-claro), var(--cpc-fundo));
}

/* 12px na referência (legibilidade). */
.cpc-resultado .cpc-resultado-extrato-credito span {
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-dado);
}

.cpc-resultado .cpc-resultado-extrato-credito-valor {
	color: var(--cpc-texto);
	font-size: clamp(24px, 5vw, 34px);
	font-weight: var(--cpc-peso-forte);
	letter-spacing: var(--cpc-ee-titulo-secao);
	white-space: nowrap;
}

/* ── Progresso do pagamento ───────────────────────────────────────────── */
/* Sem respiro no alto: quem o dá agora é o cabeçalho fixo, que fica logo acima
 * em todas as faces (03008). */
.cpc-resultado .cpc-resultado-extrato-progresso {
	margin-top: 0;
}

.cpc-resultado .cpc-resultado-extrato-progresso-topo,
.cpc-resultado .cpc-resultado-extrato-legenda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* 12px na referência (legibilidade). */
.cpc-resultado .cpc-resultado-extrato-progresso-topo {
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo-pequeno);
}

.cpc-resultado .cpc-resultado-extrato-progresso-pago {
	color: var(--cpc-azul-forte);
	font-weight: var(--cpc-peso-dado);
}

.cpc-resultado .cpc-resultado-extrato-barra {
	height: 9px;
	margin-top: 9px;
	overflow: hidden;
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-linha);
}

.cpc-resultado .cpc-resultado-extrato-barra > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--cpc-grad-botao);
	box-shadow: 0 0 14px color-mix(in srgb, var(--cpc-azul) 35%, transparent);
}

/* Sem barra desenhada, os 7px de respiro dela somem junto e a legenda cola no
 * título. Cota sem percentual informado vira três travessões espremidos, o que
 * parece defeito — e não é: é a cota que não tem o dado. */
.cpc-resultado .cpc-resultado-extrato-barra[hidden] + .cpc-resultado-extrato-legenda {
	margin-top: 13px;
}

/* 10px na referência (legibilidade). */
.cpc-resultado .cpc-resultado-extrato-legenda {
	margin-top: 7px;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-rotulo);
	font-weight: var(--cpc-peso-dado);
}

/* ── A grade do extrato ──────────────────────────────────────────────────
 *
 * Item de ~42px de altura: pela faixa da regra 10 do design system (37px a
 * 50px) o raio é `sm`, e coincide com os 10px da referência.
 */
.cpc-resultado .cpc-resultado-extrato-grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin: 22px 0 0;
}

.cpc-resultado .cpc-resultado-extrato-grade > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid var(--cpc-linha-clara);
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-fundo-campo);
}

/* 11px e 12px na referência (legibilidade). São as duas peças que o visitante
 * mais lê na janela: treze pares de rótulo e valor. */
.cpc-resultado .cpc-resultado-extrato-grade dt {
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-corpo-pequeno);
}

.cpc-resultado .cpc-resultado-extrato-grade dd {
	margin: 0;
	color: var(--cpc-texto);
	font-size: var(--cpc-t-corpo);
	font-weight: var(--cpc-peso-forte);
	text-align: right;
}

/* Atraso: nenhuma informação depende só de cor (regra 5). O vermelho acompanha
 * o rótulo "Valor em atraso" e o valor, que continuam escritos. */
.cpc-resultado .cpc-resultado-extrato-grade > div.cpc-resultado-extrato-atraso {
	border-color: var(--cpc-alerta-linha);
	background: var(--cpc-alerta-fundo);
}

.cpc-resultado .cpc-resultado-extrato-grade > div.cpc-resultado-extrato-atraso dd {
	color: var(--cpc-alerta-texto);
}

/* ── Aviso e ações ───────────────────────────────────────────────────────
 *
 * ATENCAO: o aviso NÃO diz que os dados são demonstrativos. A referência
 * começa com essa frase porque os dados dela são inventados; com cota real ela
 * vira mentira (D-33).
 */
/* 10px na referência (legibilidade). É um aviso legal: ilegível não avisa. */
.cpc-resultado .cpc-resultado-extrato-aviso {
	margin: 17px 0 0;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-rotulo);
	line-height: 1.5;
}

/* ── A barra de ações fica presa no pé, em toda tela ──────────────────────
 *
 * ATENCAO: a referência a deixa rolar junto com o conteúdo, e isso não
 * sobrevive a notebook. Medido em 2026-08-21, cota não contemplada: a janela
 * mede 811px, e em 1366x768 ela é aparada em 732px e em 1280x700 em 664px —
 * nas duas, os botões ficam FORA da tela e só aparecem depois de rolar por
 * dentro da janela. "Solicitar atendimento" é a saída da página; escondê-lo
 * atrás de uma rolagem é escondê-lo.
 *
 * Presa em toda largura, e não só no celular: onde o conteúdo cabe, `sticky`
 * não muda nada — o que muda é só onde ele não cabe.
 */
.cpc-resultado .cpc-resultado-extrato-acoes {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	padding: 14px 0 22px;
	border-top: 1px solid var(--cpc-linha-clara);
	background: var(--cpc-branco);
}

/* 44px de altura: faixa de 37px a 50px da regra 10, logo `sm`. */
.cpc-resultado .cpc-resultado-extrato-acoes button {
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--cpc-raio-sm);
	font: inherit;

	/* 12px na referência (legibilidade). */
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-forte);
	cursor: pointer;
	transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cpc-resultado .cpc-resultado-extrato-voltar {
	border: 1px solid var(--cpc-linha);
	background: var(--cpc-branco);
	color: var(--cpc-texto-2);
}

.cpc-resultado .cpc-resultado-extrato-atendimento {
	border: 0;
	background: var(--cpc-azul);
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-azul);
}

.cpc-resultado .cpc-resultado-extrato-acoes button:hover,
.cpc-resultado .cpc-resultado-extrato-acoes button:focus-visible {
	transform: translateY(-1px);
}

/* A cor do texto vai junto do fundo nos dois: o Astra pinta de branco o texto
 * de qualquer botão sob o mouse, e regra de estado dele vence classe sozinha. */
.cpc-resultado .cpc-resultado-extrato-voltar:hover,
.cpc-resultado .cpc-resultado-extrato-voltar:focus-visible {
	border-color: var(--cpc-azul);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
}

.cpc-resultado .cpc-resultado-extrato-atendimento:hover,
.cpc-resultado .cpc-resultado-extrato-atendimento:focus-visible {
	background: var(--cpc-azul-forte);
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-azul-hover);
}

/* ── As três faces da janela ──────────────────────────────── 03007 ──
 *
 * Uma janela, três conteúdos: extrato, formulário de contato e confirmação.
 * Quem decide qual aparece é UM atributo na própria janela — assim há um lugar
 * só que manda, e ele é legível no inspetor.
 *
 * ATENCAO: `[hidden]` não serve aqui. O reset dele (regra 12) existe para
 * esconder peça por decisão do JavaScript; misturar estado de tela no mesmo
 * mecanismo faria as duas coisas disputarem o mesmo interruptor.
 */
.cpc-resultado .cpc-resultado-extrato [data-cpc-face-conteudo] {
	display: none;
}

/* ATENCAO: o valor vem de uma variavel, e nao e enfeite. Este seletor pesa
 * DUAS classes e dois atributos a mais que o da propria face, entao um `block`
 * escrito aqui vence qualquer `display` que a face declare para si — foi assim
 * que o arranjo em coluna do formulario e da confirmacao ficou sem efeito
 * nenhum, e o filete da barra de acoes acabou encostando na autorizacao.
 *
 * Com a variavel, quem manda no MODO de exibicao e a face; aqui fica so a
 * decisao de estar ou nao na tela, que e o assunto deste bloco. */
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="extrato"] [data-cpc-face-conteudo="extrato"],
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="formulario"] [data-cpc-face-conteudo="formulario"],
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="sucesso"] [data-cpc-face-conteudo="sucesso"] {
	display: var( --cpc-face-modo, block );
}

/* ── O piso das duas faces finais ─────────────────────────── 03008 ──
 *
 * Sem piso, a moldura mudava de altura a cada digitação que revelasse ou
 * escondesse a faixa de recusa, e de novo na confirmação. O piso segura as
 * duas num tamanho só.
 *
 * ATENCAO: piso IGUAL não quer dizer janela do mesmo tamanho. A confirmação
 * esconde o cabeçalho da cota (bloco mais abaixo), então a janela dela é
 * menor de propósito — a decisão é de 2026-08-24 e está registrada lá.
 *
 * ATENCAO: 380px é o número a ajustar se alguma das duas ficar apertada ou
 * folgada demais na tela. É UM lugar, e vale para as duas — é essa a razão de
 * ele estar aqui e não repetido em cada face.
 */
.cpc-resultado .cpc-resultado-contato,
.cpc-resultado .cpc-resultado-sucesso {
	--cpc-face-modo: flex;
	flex-direction: column;
	min-height: 380px;
}

/* O formulário ocupa o que sobra da face, e é dentro dele que a barra de ações
 * acha o pé. */
.cpc-resultado .cpc-resultado-contato-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* Duas margens automáticas repartem a sobra em partes iguais: o miolo desce
 * metade dela e a barra de ações vai para o pé. O resultado é conteúdo centrado
 * na área ACIMA dos botões, com os botões encostados embaixo — e não conteúdo
 * colado no alto com um vazio solto no pé, que foi o que derrubou a primeira
 * tentativa de piso nesta fase.
 */
.cpc-resultado .cpc-resultado-contato-campos,
.cpc-resultado .cpc-resultado-contato-form .cpc-resultado-extrato-acoes {
	margin-top: auto;
}

/* ── A confirmação não leva o cabeçalho da cota ───────────── 03008 ──
 *
 * Decisão do operador em 2026-08-24: chegando aqui a pessoa JÁ enviou, e a
 * identificação da cota deixou de ser o que ela precisa ver. O que importa é a
 * confirmação e o caminho do WhatsApp — então a moldura esvazia e sobra a
 * mensagem.
 *
 * É a única face que esconde o cabeçalho, e por isso a regra é qualificada pela
 * face: o cabeçalho continua fixo para as outras duas.
 */
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="sucesso"] .cpc-resultado-extrato-fixo {
	display: none;
}

/* Sem cabeçalho, a confirmação é a única coisa na janela — e aí ela se centra
 * INTEIRA, botões inclusive, em vez de empurrar os botões para o pé. Confirmação
 * é um cartão, não um formulário com rodapé. */
.cpc-resultado .cpc-resultado-sucesso {
	justify-content: center;
}

/* ── A face do formulário ─────────────────────────────────── 03007 ── */

.cpc-resultado .cpc-resultado-contato-titulo {
	margin: 0 34px 6px 0;
	color: var(--cpc-texto);

	/* Mesma medida do título do extrato: é o mesmo papel na mesma janela. */
	font-size: var(--cpc-t-card-grande);
	font-weight: var(--cpc-peso-forte);
	line-height: 1.25;
}

.cpc-resultado .cpc-resultado-contato-chamada {
	margin: 0 0 20px;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo);
	line-height: 1.45;
}

.cpc-resultado .cpc-resultado-contato-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cpc-resultado .cpc-resultado-contato-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.cpc-resultado .cpc-resultado-contato-campo label {
	color: var(--cpc-texto-rotulo);
	font-size: var(--cpc-t-rotulo);
	font-weight: var(--cpc-peso-medio);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* 46px de altura: faixa de 37px a 50px da regra 10, logo `sm`. */
.cpc-resultado .cpc-resultado-contato-campo input {
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--cpc-linha);
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-branco);
	color: var(--cpc-texto);
	font-family: var(--cpc-fonte);
	font-size: var(--cpc-t-corpo);
	font-weight: var(--cpc-peso-medio);

	/* O Astra dá largura automática a input; sem isto a grade não segura. */
	width: 100%;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* ── 16px em tela de toque, e o número é a regra ───────────── 03008 ──
 *
 * O Safari do iPhone AMPLIA a página sozinho ao entrar num campo cuja letra
 * mede menos de 16px, e não desamplia ao sair: o layout fica torto e a pessoa
 * precisa dar zoom para trás com os dedos. Nossos campos mediam 14px, que é o
 * corpo do projeto — passavam raspando por baixo do limite.
 *
 * ATENCAO: a condição é PONTEIRO GROSSO, não largura de tela. Quem amplia é o
 * navegador de toque, e ele faz isso em tablet e em telefone deitado, larguras
 * que os cortes deste arquivo não pegariam. Largura descreveria o sintoma pela
 * metade.
 *
 * ATENCAO: a saída NÃO é desligar o zoom na página. Tirar do usuário a
 * capacidade de ampliar é falha de acessibilidade, e conserta a distorção
 * quebrando outra coisa. Quem sobe é a letra.
 */
@media ( pointer: coarse ) {
	.cpc-resultado .cpc-resultado-contato-campo input {
		font-size: var(--cpc-t-corpo-grande);
	}
}

.cpc-resultado .cpc-resultado-contato-campo input:focus-visible {
	border-color: var(--cpc-azul);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpc-azul) 22%, transparent);
	outline: none;
}

/* O campo-armadilha sai da tela, e não some por `display`: campo escondido por
 * `display: none` é o primeiro que um robô aprende a pular. */
.cpc-resultado .cpc-resultado-contato-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* O respiro DE BAIXO é o que afasta a autorização do filete da barra de ações,
 * e ele é fixo de propósito: a barra sobe por margem automática, e margem
 * automática vale zero quando a face enche — foi assim que o filete acabou
 * encostando na linha da autorização (visto pelo operador em 2026-08-24). O
 * mínimo tem de morar em quem está EM CIMA, onde não depende de sobra. */
.cpc-resultado .cpc-resultado-contato-autorizacao {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 24px;
}

/* Sem deslocamento próprio: quem alinha a caixa com o texto é o `align-items`
 * do bloco acima. O 1px que havia aqui somava ao alinhamento e era o que
 * deixava a caixa visivelmente mais alta que a frase. */
.cpc-resultado .cpc-resultado-contato-autorizacao input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--cpc-azul);
	cursor: pointer;
}

.cpc-resultado .cpc-resultado-contato-autorizacao label {
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo-pequeno);
	line-height: 1.45;
	cursor: pointer;
}

/* O aviso de recusa. Vem com ícone de texto e não só com cor. */
.cpc-resultado .cpc-resultado-contato-aviso {
	margin: 14px 0 0;
	padding: 10px 14px;
	border: 1px solid var(--cpc-alerta-linha);
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-alerta-fundo);
	color: var(--cpc-alerta-texto);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-medio);
	line-height: 1.4;
}

/* O enviar é a ação principal da face, e usa o mesmo tratamento do botão
 * principal do extrato — mesmo papel, mesmo desenho. */
.cpc-resultado .cpc-resultado-contato-enviar {
	border: 0;
	background: var(--cpc-azul);
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-azul);
}

.cpc-resultado .cpc-resultado-contato-enviar:hover,
.cpc-resultado .cpc-resultado-contato-enviar:focus-visible {
	background: var(--cpc-azul-forte);
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-azul-hover);
}

.cpc-resultado .cpc-resultado-contato-voltar {
	border: 1px solid var(--cpc-linha);
	background: var(--cpc-branco);
	color: var(--cpc-texto-2);
}

.cpc-resultado .cpc-resultado-contato-voltar:hover,
.cpc-resultado .cpc-resultado-contato-voltar:focus-visible {
	border-color: var(--cpc-azul);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
}

/* Enquanto o pedido corre. O botão fica desabilitado, e o desabilitado precisa
 * PARECER desabilitado — senão o segundo clique é tentado. */
.cpc-resultado .cpc-resultado-contato-enviar[disabled] {
	opacity: .6;
	box-shadow: none;
	cursor: progress;
}

/* ── A face da confirmação ────────────────────────────────── 03007 ── */

/* A barra de ações é a MESMA peça nas três faces, e nesta ela destoava: o
 * conteúdo é centrado e os botões ficavam à direita, com um filete por cima que
 * não separava nada. O filete existe para descolar a barra presa de um conteúdo
 * que passa por baixo dela; nesta face não há o que rolar. Quem qualifica é a
 * face, não classe nova — a peça continua sendo uma só (03008). */
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="sucesso"] .cpc-resultado-extrato-acoes {
	justify-content: center;
	border-top: 0;
}

/* ATENCAO: consequência de a barra desta face ter passado a ter UM botão só
 * (03008). Sem número de WhatsApp configurado, esse botão não é desenhado — e a
 * barra ficaria como uma faixa branca de 36px sem nada dentro. A janela
 * continua com saída pelo "×"; o que se corrige aqui é a faixa vazia. */
.cpc-resultado .cpc-resultado-extrato[data-cpc-face="sucesso"] .cpc-resultado-extrato-acoes:has( > a[hidden] ) {
	display: none;
}

/* `align-items` além do `text-align`: virando coluna flex (bloco acima), os
 * filhos deixam de ser centrados pelo alinhamento de texto e passam a ser
 * caixas — o selo encostaria à esquerda. O `text-align` fica, porque é ele que
 * ainda centra o texto DENTRO do título e do parágrafo. */
.cpc-resultado .cpc-resultado-sucesso {
	align-items: center;
	padding-top: 8px;
	text-align: center;
}

/* A barra de ações é a exceção: ela atravessa a largura toda, e sem isto
 * encolheria ao tamanho dos dois botões. */
.cpc-resultado .cpc-resultado-sucesso .cpc-resultado-extrato-acoes {
	align-self: stretch;
}

.cpc-resultado .cpc-resultado-sucesso-selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;

	/* Círculo: o raio acompanha a altura, e altura igual à largura é pílula
	 * (regra 10). */
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-ok-fundo);
	color: var(--cpc-ok-texto);
}

.cpc-resultado .cpc-resultado-sucesso-selo svg {
	width: 30px;
	height: 30px;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.cpc-resultado .cpc-resultado-sucesso-titulo {
	margin: 0 0 8px;
	color: var(--cpc-texto);
	font-size: var(--cpc-t-card-grande);
	font-weight: var(--cpc-peso-forte);
	line-height: 1.25;
}

.cpc-resultado .cpc-resultado-sucesso-texto {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo);
	line-height: 1.45;
}

/* O botão de WhatsApp. Verde de marca de terceiro, dos tokens — o hexadecimal
 * vive só na linha que define o token. */
.cpc-resultado .cpc-resultado-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;

	/* 44px de altura: faixa de 37px a 50px da regra 10, logo `sm`. */
	border-radius: var(--cpc-raio-sm);

	/* O verde ESCURO, e não o claro (03008). Branco sobre o verde claro dá
	 * 1,98:1 — o pior contraste do sistema, pior que o botão azul, que está em
	 * 2,97:1. Sobre o escuro dá 4,14:1. Ainda não é os 4,5:1 do mínimo AA, e a
	 * medida está registrada na crítica do fluxo, no `_planning` do épico. */
	background: var(--cpc-whatsapp-forte);
	color: var(--cpc-branco);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-forte);

	/* A mesma elevação dos outros botões de destaque, no verde que é a cor
	 * deste (03008). Sem ela, o botão principal da confirmação era o único da
	 * interface plantado no branco sem sombra nenhuma. */
	box-shadow: var(--cpc-sombra-whatsapp);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* ATENCAO: `!important`, e é o idiom de reset da regra 12 da convention de
 * widgets, não atalho. Este sublinhado já sobreviveu a `text-decoration: none`
 * declarado no `<a>` E no `<span>` de dentro, o que só acontece com regra de
 * fora pesando mais que duas classes nossas — o Astra não a tem (ele zera
 * sublinhado de link), então ela vem do kit do Elementor, que mora no banco e
 * em `uploads/`, fora do espelho e fora do nosso alcance.
 *
 * O elemento também entra por `a.` e sob a janela: peso de sobra, para o caso
 * de a origem mudar de lugar amanhã. E o rótulo de um botão não é link de texto
 * corrido — aqui não há o que negociar com o tema. */
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:link,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:visited,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:hover,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:focus,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:focus-visible,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp:active,
.cpc-resultado .cpc-resultado-extrato a.cpc-resultado-whatsapp span {
	text-decoration: none !important;
}

.cpc-resultado .cpc-resultado-whatsapp:hover,
.cpc-resultado .cpc-resultado-whatsapp:focus-visible {
	background: color-mix(in srgb, var(--cpc-whatsapp-forte) 84%, var(--cpc-escuro));
	color: var(--cpc-branco);
	box-shadow: var(--cpc-sombra-whatsapp-hover);
	transform: translateY(-1px);
}

.cpc-resultado .cpc-resultado-whatsapp-icone {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* A troca — celular e tablet ─────────────────────────────── ≤ 960px ──
 *
 * ATENCAO: Este bloco vem ANTES do bloco de 640px de propósito: as duas faixas têm o
 * mesmo peso, e quem vem depois vence. Escrito no fim do arquivo, ele
 * desfaria os ajustes de celular.
 */
@media (max-width: 960px) {
	/* É ISTO que fecha a A-73: a tabela não é desenhada. */
	.cpc-resultado .cpc-resultado-tabela-wrap {
		display: none;
	}

	/* ATENCAO: as setas da tabela moram FORA do recipiente dela, e por isso não
	 * somem junto — some o que está dentro do recipiente escondido. Sem esta
	 * regra, a linha de página da tabela ("1 a 8 de 27") aparecia no celular
	 * ACIMA dos cartões, com as setas de uma tabela que não está na tela, e a
	 * fila logo abaixo com o contador dela. Duas paginações para um resultado
	 * só. Visto pelo operador em 2026-08-13. */
	.cpc-resultado .cpc-resultado-tabela-rodape {
		display: none;
	}

	/* Cinto de segurança, e nada além disso: enquanto a tabela estiver
	 * escondida estas duas regras não fazem efeito nenhum. Elas existem para o
	 * dia em que alguém voltar a mostrar a tabela em tela pequena sem lembrar
	 * desta fase. Sozinhas elas NÃO resolvem — medido: 720px. */
	.cpc-resultado .cpc-resultado-tabela {
		min-width: 0;
	}

	.cpc-resultado .cpc-resultado-tabela th,
	.cpc-resultado .cpc-resultado-tabela td {
		white-space: normal;
	}

	.cpc-resultado .cpc-resultado-fila-wrap {
		display: block;
	}

	/* A tabela-fantasma some junto com a tabela de verdade: ela carrega a mesma
	 * classe do recipiente, e a regra acima já a alcança. O que entra no lugar
	 * é a fila fantasma. */
	.cpc-resultado .cpc-resultado-esqueleto .cpc-resultado-fila-fantasma {
		display: flex;
	}

	.cpc-resultado .cpc-resultado-esqueleto .cpc-resultado-fila-rodape {
		display: flex;
	}
}

/* Celular ─────────────────────────────────────────────────── ≤ 640px ── */
@media (max-width: 640px) {
	.cpc-resultado.cpc-resultado-visivel {
		padding: 56px 0 68px;
	}

	/* Respiro lateral de 16px de cada lado — o `--cpc-largura-celular` do
	 * design system §1.4, escrito como largura. */
	.cpc-resultado .cpc-resultado-conteudo {
		width: calc(100% - 32px);
	}

	.cpc-resultado .cpc-resultado-cabecalho {
		align-items: start;
		flex-direction: column;
		gap: 12px;
	}

	.cpc-resultado .cpc-resultado-tabela-wrap {
		border-radius: var(--cpc-raio-md);
	}

	.cpc-resultado .cpc-resultado-tabela th:first-child {
		border-radius: calc(var(--cpc-raio-md) - 1px) 0 0;
	}

	.cpc-resultado .cpc-resultado-tabela th:last-child {
		border-radius: 0 calc(var(--cpc-raio-md) - 1px) 0 0;
	}

	/* O "nenhuma cota encontrada" ocupa o MESMO espaço que os cartões ocupariam
	 * — 380px medidos, cartão mais linha de setas. É o espaço que a página já
	 * reservou antes de rolar: se o vazio fosse mais curto, a página encolheria
	 * embaixo do visitante depois que ele já tivesse parado de rolar. */
	.cpc-resultado .cpc-resultado-vazio {
		min-height: 380px;
		padding: 28px 20px;
	}

	/* Cartão um pouco menor no celular, como o mockup faz: a espiada do
	 * próximo continua sendo o que avisa que existe mais coisa ao lado. */
	.cpc-resultado .cpc-resultado-cartao {
		flex-basis: min(82%, 310px);
	}

	.cpc-resultado .cpc-resultado-fila,
	.cpc-resultado .cpc-resultado-fila-fantasma {
		gap: 14px;
	}

	/* ── A janela do extrato cola no rodapé ──────────────────────────────
	 *
	 * O `margin` de fábrica do `<dialog>` é `auto` nos quatro lados, e é ele
	 * que centra a janela. Com `auto` só em cima, ela desce e encosta embaixo —
	 * é o que a referência faz no celular, e é o gesto que se espera ali.
	 */
	.cpc-resultado .cpc-resultado-extrato {
		width: calc(100% - 20px);
		max-height: calc(100vh - 20px);
		max-height: calc(100svh - 20px);
		margin: auto auto 10px;

		/* Sem respiro embaixo: quem o dá é a barra de ações, que fica presa no
		 * pé da janela e precisa encostar na borda para o conteúdo passar por
		 * baixo dela sem aparecer numa fresta. */
		padding: 22px 16px 0;
		border-radius: var(--cpc-raio-lg) var(--cpc-raio-lg) var(--cpc-raio-md) var(--cpc-raio-md);
	}

	/* 44px é o mínimo de alvo de toque das diretrizes; a referência usa 38px,
	 * que é apertado para o dedo. No computador continua 38px. */
	.cpc-resultado .cpc-resultado-extrato-fechar {
		top: 13px;
		right: 13px;
		width: 44px;
		height: 44px;
	}

	.cpc-resultado .cpc-resultado-extrato-credito {
		align-items: start;
		flex-direction: column;
		gap: 3px;
		padding: 14px 15px;
	}

	.cpc-resultado .cpc-resultado-extrato-grade {
		grid-template-columns: 1fr;
	}

	/* No celular a barra empilha os dois botões: lado a lado eles não cabem em
	 * 359px de janela útil. Ela já é presa no pé pela regra base. */
	.cpc-resultado .cpc-resultado-extrato-acoes {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		margin-top: 18px;
		padding: 12px 0 16px;
	}

	/* Empilhados, o que está em cima é lido primeiro — e no computador a
	 * posição de destaque é a da direita, que é a última na marcação. Só a
	 * ORDEM VISUAL muda aqui: o `Tab` continua seguindo a marcação. */
	.cpc-resultado .cpc-resultado-extrato-atendimento,
	.cpc-resultado .cpc-resultado-contato-enviar,
	.cpc-resultado .cpc-resultado-whatsapp {
		order: -1;
	}

	/* Dez campos lado a lado não cabem em 359px de janela útil. */
	.cpc-resultado .cpc-resultado-contato-campos {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Celular estreito ────────────────────────────────────────── ≤ 380px ── */
@media (max-width: 380px) {
	.cpc-resultado .cpc-resultado-conteudo {
		width: calc(100% - 24px);
	}
}

/* A interface funciona inteira sem animação (regra 6 do design system). */
@media (prefers-reduced-motion: reduce) {
	.cpc-resultado .cpc-resultado-tabela tbody tr,
	.cpc-resultado .cpc-resultado-interesse,
	.cpc-resultado .cpc-resultado-limpar,
	.cpc-resultado .cpc-resultado-fila-controles button,
	.cpc-resultado .cpc-resultado-fila-mais,
	.cpc-resultado .cpc-resultado-tabela-anterior,
	.cpc-resultado .cpc-resultado-tabela-proxima,
	.cpc-resultado .cpc-resultado-extrato-fechar,
	.cpc-resultado .cpc-resultado-extrato-acoes button,
	.cpc-resultado .cpc-resultado-contato-campo input,
	.cpc-resultado .cpc-resultado-whatsapp,

	/* A altura da troca de face (03008). Quem pediu menos movimento troca de
	 * uma vez: o problema nunca foi a mudança de altura, foi ela acontecer sem
	 * ser anunciada. */
	.cpc-resultado .cpc-resultado-extrato {
		transition: none;
	}

	.cpc-resultado .cpc-resultado-extrato,
	.cpc-resultado .cpc-resultado-extrato::backdrop {
		animation: none;
	}

	.cpc-resultado .cpc-resultado-interesse:hover,
	.cpc-resultado .cpc-resultado-interesse:focus-visible,
	.cpc-resultado .cpc-resultado-limpar:hover,
	.cpc-resultado .cpc-resultado-limpar:focus-visible,
	.cpc-resultado .cpc-resultado-extrato-fechar:hover,
	.cpc-resultado .cpc-resultado-extrato-fechar:focus-visible,
	.cpc-resultado .cpc-resultado-extrato-acoes button:hover,
	.cpc-resultado .cpc-resultado-extrato-acoes button:focus-visible,
	.cpc-resultado .cpc-resultado-whatsapp:hover,
	.cpc-resultado .cpc-resultado-whatsapp:focus-visible {
		transform: none;
	}
}