/* Ajustes proprios do painel, por cima do design system copiado do datajud.
   Aqui so entra o que o design system nao cobre, para a copia continuar sendo copia. */

/* A CAIXA DE LOGIN SOBE
   No datajud este bloco e um modal centrado na tela. Aqui ele e a propria pagina, e
   centrado na vertical ele descia demais, empurrado pela altura do cabecalho. Pedido do
   responsavel em 17/09/2026: subir. */
.entrar-area {
	display: flex;
	justify-content: center;
	padding-top: var(--sp-2);
}

.entrar-caixa {
	margin: 0;
	width: 100%;
	/* Pedido do responsavel em 17/09/2026: alargar um pouco. Era 26rem, e a linha do
	   captcha com o botao ao lado ficava no limite. */
	max-width: 28rem;
}

@media (min-width: 640px) {
	.entrar-area { padding-top: var(--sp-4); }
}

/* O BOTAO "ENTRAR" ESTAVA SENDO CORTADO, E A CAUSA NAO ERA A LARGURA
 *
 * `.modal__caixa` tem `max-height` com `overflow-y: auto`, para caixa alta rolar em tela
 * baixa. Acontece que **CSS nao permite** `overflow-y: auto` junto de `overflow-x: visible`:
 * quando um eixo e `auto`, o outro deixa de ser `visible` e vira `auto` tambem. A caixa
 * passou a recortar na horizontal, e quem fica de fora e o ultimo item da linha, que e o
 * botao.
 *
 * Alargar a caixa sozinho nao resolveria: adiaria. Enquanto a linha puder transbordar, ela
 * transborda em alguma largura de tela, e o corte volta.
 *
 * A DECISAO DE 10/09/2026 CONTINUA VALENDO, E ESTA E A EXCECAO DELA
 * ----------------------------------------------------------------
 * O design system registra: *"deslize sempre na mesma linha ao lado do botao"*, com
 * `flex-wrap: nowrap`. Isso segue verdadeiro sempre que os dois cabem, que e o caso normal.
 * Abaixo de 26rem de caixa util eles nao cabem, e ai a escolha real nao e entre uma linha e
 * duas: e entre duas linhas e **um botao cortado**, que nem clicavel esta por inteiro. */
.entrar__acoes {
	flex-wrap: wrap;
	row-gap: var(--sp-3);
}

/* Quem cede espaco e o trilho, e nunca o botao.
 *
 * O trilho aguenta encolher porque o pino tem largura fixa e o rotulo ja corta com
 * reticencias. O botao nao: rotulo espremido deixa de parecer botao, e a geometria dele e a
 * mesma de todo botao do sistema, por decisao de 10/09/2026, *"todos os botoes devem ter o
 * mesmo tamanho"*. Por isso ele nao encolhe aqui: a caixa e que cresceu. */
.entrar__acoes .captcha-deslize {
	flex: 1 1 8rem;
	min-width: 6.5rem;
}

.entrar__acoes .botao-principal {
	flex: 0 0 auto;
}

/* Tabela do painel rola sozinha quando nao cabe, em vez de empurrar a pagina para o lado.
   O design system exige que a pagina nunca role na horizontal. */
.sis-tabela { width: 100%; }

/* ARRASTAR E SOLTAR, POR CIMA DO CAMPO DE ARQUIVO
 *
 * O `<input type="file">` fica invisivel mas **presente**, cobrindo a area inteira: e ele
 * que recebe o clique e e ele que envia. Sem JavaScript a area continua clicavel e o envio
 * continua funcionando, que e a mesma regra do captcha do login. */
.solta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	min-height: 9rem;
	padding: var(--sp-6) var(--sp-4);
	border: 2px dashed var(--line);
	border-radius: var(--r-md);
	background: var(--surface-alt);
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}

.solta input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.solta__titulo { font-weight: var(--fw-semi); color: var(--ink); margin: 0; }
.solta__nota { font-size: var(--fs-xs); color: var(--ink-muted); margin: 0; }

.solta:hover,
.solta--sobre { border-color: var(--carmo-500); background: var(--surface); }
.solta--cheia { border-style: solid; border-color: var(--carmo-700); }

.solta__lista {
	list-style: none;
	margin: var(--sp-2) 0 0;
	padding: 0;
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	max-height: 8rem;
	overflow-y: auto;
	/* A lista fica ACIMA do campo invisivel, senao rolar nela clicaria no seletor. */
	position: relative;
	z-index: 1;
}
.solta__lista li { padding: 1px 0; }

/* OS GRAFICOS DO PAINEL, LADO A LADO E COM TAMANHO MAXIMO
 *
 * POR QUE ELES SAIRAM GIGANTES
 * ----------------------------
 * `.grafico` e SVG com `viewBox`, e o design system lhe da `width: 100%; height: auto`.
 * Isso significa que a **altura acompanha a largura**: um grafico sozinho, ocupando a
 * pagina inteira numa tela larga, escala a altura na mesma proporcao e vira um bloco
 * enorme. Empilhados, tres deles tomavam varias rolagens.
 *
 * O painel legado nao tinha esse problema por dois motivos que valem copiar: os graficos
 * ficavam **em linha**, cada um com um terco da largura, e a area de cada um tinha
 * **altura fixa**, de 320px, porque o Chart.js exige altura declarada.
 *
 * Aqui a linha volta, e a altura ganha teto. `max-height` num SVG com `viewBox` nao corta
 * nada: o proprio SVG reduz o desenho para caber, mantendo a proporcao.
 */
.painel-graficos {
	display: grid;
	/* Tres em tela larga, dois em tela media, um no telefone, sem media query.
	 *
	 * O minimo de 24rem nao e estetico. Como o texto do SVG escala junto com o desenho,
	 * coluna estreita encolhe o rotulo ate ele ficar ilegivel: num terco de 700px o rotulo
	 * de 13px sairia com 5px. Abaixo de 24rem e melhor quebrar para a linha seguinte. */
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: var(--sp-4);
	align-items: start;
	margin-bottom: var(--sp-6);
}

.grafico-caixa { display: flex; flex-direction: column; }

.grafico-caixa__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--line);
}

.grafico-caixa__titulo {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--carmo-900);
	margin: 0;
}

/* O recorte do periodo, no lugar onde o legado punha o mesmo dado. */
.grafico-caixa__quando {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	white-space: nowrap;
}

/* O teto. Sem ele o desenho cresce com a largura da tela e nao para mais. */
.grafico-caixa .grafico {
	max-width: 100%;
	max-height: 17rem;
}

/* A tabela de numeros exatos continua existindo, e agora recolhida.
   O design system e claro que ela nao e enfeite, "quem precisa do numero exato nao o tira
   de uma barra". Tres delas abertas ao mesmo tempo, porem, eram mais tabela que painel. */
.grafico-caixa details { margin-top: var(--sp-3); }
.grafico-caixa summary {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	cursor: pointer;
}
.grafico-caixa summary:hover { color: var(--carmo-700); }
.grafico-caixa .grafico-par__tabela { max-height: 14rem; margin-top: var(--sp-2); }