/* graficobarras.css - grafico de barras em HTML/CSS puro; ASCII puro, o texto vem da JSP */

.graficoBarras {
	--max: 100;
	--passo: calc(var(--max) / 4);
	--largura-rotulo: 250px;
	--altura-barra: 16px;
	--altura-plot: 320px;
	--espaco-valor: 56px;
	--largura-eixo: 44px;

	--cor-texto: #333333;
	--cor-fraca: #6b7580;
	--cor-grade: #e8e8e8;
	--cor-neutra: #767b80;

	--passo-frac: calc(var(--passo) / var(--max));

	position: relative;
	color: var(--cor-texto);
	font-size: 11px;
	line-height: 1.3;
}

/* "deitado" e o padrao: o :not() casa tambem quando a tag nao emite data-horizontal */
.graficoBarras:not([data-horizontal="false"]) {
	--frac-util: calc(100% - var(--espaco-valor));
}

.graficoBarras[data-horizontal="false"] {
	--frac-util: calc(var(--altura-plot) - var(--espaco-valor));
}

/* ========== Cabecalho ========== */

.graficoBarras-cabecalho {
	margin-bottom: 8px;
}

/* zera o h4 nu, que layout.css, typo.css e turquoise.css ja pintam nesta pagina */
.graficoBarras-titulo {
	margin: 0 0 2px 0;
	padding: 0;
	width: auto;
	border: 0;
	color: #1b5c73;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}

.graficoBarras-subtitulo {
	margin: 0 0 6px 0;
	color: var(--cor-fraca);
	font-size: 11px;
}

.graficoBarras-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 16px;
}

.graficoBarras-legenda span {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.graficoBarras-legenda i {
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border-radius: 2px;
	background: var(--cor-serie, var(--cor-neutra));
}

/* ========== Paleta ========== */

/* a cor vem de data-serie, nunca da ordem na tela: filtrar nao repinta as demais */
.graficoBarras [data-serie] { --cor-serie: var(--cor-neutra); }
.graficoBarras [data-serie="0"] { --cor-serie: #0f6ba8; }
.graficoBarras [data-serie="1"] { --cor-serie: #c77f17; }
.graficoBarras [data-serie="2"] { --cor-serie: #a8437a; }
.graficoBarras [data-serie="3"] { --cor-serie: #008300; }
.graficoBarras [data-serie="4"] { --cor-serie: #4a3aa7; }
.graficoBarras [data-serie="5"] { --cor-serie: #c0392b; }

/* paleta "azul": serie ordinal (faixa de idade, mes), um matiz so, claro -> escuro */
.graficoBarras[data-paleta="azul"] [data-serie="0"] { --cor-serie: #7fb3d5; }
.graficoBarras[data-paleta="azul"] [data-serie="1"] { --cor-serie: #5a9cc7; }
.graficoBarras[data-paleta="azul"] [data-serie="2"] { --cor-serie: #3585b9; }
.graficoBarras[data-paleta="azul"] [data-serie="3"] { --cor-serie: #0f6ba8; }
.graficoBarras[data-paleta="azul"] [data-serie="4"] { --cor-serie: #0b5486; }
.graficoBarras[data-paleta="azul"] [data-serie="5"] { --cor-serie: #073d63; }

/* ========== Pecas comuns aos 2 modos ========== */

.graficoBarras-plot {
	position: relative;
}

.graficoBarras-rotulo {
	overflow-wrap: break-word;
}

.graficoBarras-serie {
	--valor: 0;
	--frac: calc(var(--valor) / var(--max));
	position: relative;
}

.graficoBarras-barra {
	position: absolute;
	display: block;
	background: var(--cor-serie, var(--cor-neutra));
	transition: width 0.2s ease, height 0.2s ease;
}

.graficoBarras-valor {
	position: absolute;
	color: var(--cor-texto);
	font-size: 10px;
	white-space: nowrap;
}

.graficoBarras-eixo {
	position: relative;
	color: var(--cor-fraca);
	font-size: 10px;
}

.graficoBarras-eixo span {
	position: absolute;
}

.graficoBarras .graficoBarras-eixoNome {
	position: static;
	display: block;
	padding-top: 15px;
	text-align: right;
}

.graficoBarras-rotuloCategoria {
	position: absolute;
	bottom: 0;
	color: var(--cor-fraca);
	font-weight: bold;
}

/* ========== Modo deitado ========== */

/* display:contents poe rotulo e barras nas colunas do MESMO grid do eixo */
.graficoBarras:not([data-horizontal="false"]) .graficoBarras-plot {
	display: grid;
	grid-template-columns: minmax(0, var(--largura-rotulo)) minmax(calc(var(--espaco-valor) + 60px), 1fr);
	align-items: center;
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-grupo {
	display: contents;
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-rotulo {
	padding: 3px 10px 3px 0;
}

/* a grade e um gradiente repetido; o +1px faz aparecer a linha final sobre o --max */
.graficoBarras:not([data-horizontal="false"]) .graficoBarras-series {
	padding: 3px 0;
	background-image: repeating-linear-gradient(to right,
		var(--cor-grade) 0, var(--cor-grade) 1px,
		transparent 1px, transparent calc(100% * var(--passo-frac)));
	background-size: calc(var(--frac-util) + 1px) 100%;
	background-repeat: no-repeat;
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-serie {
	height: var(--altura-barra);
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-serie + .graficoBarras-serie {
	margin-top: 2px;
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-barra {
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--frac-util) * var(--frac));
	border-radius: 0 4px 4px 0;
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-valor {
	top: 50%;
	left: calc(var(--frac-util) * var(--frac) + 6px);
	transform: translateY(-50%);
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-eixo {
	grid-column: 2;
	height: 30px;
	margin-top: 3px;
}

/* o :not() e obrigatorio: o nome do eixo tambem e um span daqui de dentro */
.graficoBarras:not([data-horizontal="false"]) .graficoBarras-eixo span:not(.graficoBarras-eixoNome) {
	left: calc(var(--frac-util) * (var(--tick, 0) / var(--max)));
	transform: translateX(-50%);
}

.graficoBarras:not([data-horizontal="false"]) .graficoBarras-rotuloCategoria {
	left: 0;
	max-width: var(--largura-rotulo);
}

/* ========== Modo em pe ========== */

/* em pe a altura da barra e px puro, nunca %: percentual exigiria altura na cadeia toda */
.graficoBarras[data-horizontal="false"] .graficoBarras-plot {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	margin-top: 18px;
	padding-left: var(--largura-eixo);
	padding-bottom: 18px;
	background-image: repeating-linear-gradient(to top,
		var(--cor-grade) 0, var(--cor-grade) 1px,
		transparent 1px, transparent calc(100% * var(--passo-frac)));
	background-size: calc(100% - var(--largura-eixo)) calc(var(--frac-util) + 1px);
	background-position: var(--largura-eixo) calc(var(--espaco-valor) - 1px);
	background-repeat: no-repeat;
}

/* column-reverse poe o rotulo embaixo das barras, com o mesmo HTML dos dois modos */
.graficoBarras[data-horizontal="false"] .graficoBarras-grupo {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column-reverse;
	align-items: center;
}

.graficoBarras[data-horizontal="false"] .graficoBarras-series {
	display: flex;
	width: 100%;
	height: var(--altura-plot);
	gap: 2px;
	align-items: flex-end;
	justify-content: center;
}

.graficoBarras[data-horizontal="false"] .graficoBarras-serie {
	width: var(--altura-barra);
	height: var(--altura-plot);
}

.graficoBarras[data-horizontal="false"] .graficoBarras-barra {
	bottom: 0;
	left: 50%;
	width: var(--altura-barra);
	height: calc(var(--frac-util) * var(--frac));
	border-radius: 4px 4px 0 0;
	transform: translateX(-50%);
}

.graficoBarras[data-horizontal="false"] .graficoBarras-valor {
	bottom: calc(var(--frac-util) * var(--frac) + 4px);
	left: 50%;
	transform: translateX(-50%);
}

.graficoBarras[data-horizontal="false"] .graficoBarras-rotulo {
	width: 100%;
	margin-top: 5px;
	text-align: center;
}

.graficoBarras[data-horizontal="false"] .graficoBarras-eixo {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--largura-eixo);
	height: var(--altura-plot);
}

.graficoBarras[data-horizontal="false"] .graficoBarras-eixo span:not(.graficoBarras-eixoNome) {
	right: 6px;
	bottom: calc(var(--frac-util) * (var(--tick, 0) / var(--max)));
	transform: translateY(50%);
}

.graficoBarras[data-horizontal="false"] .graficoBarras-eixoNome {
	position: absolute;
	top: -16px;
	left: 0;
	padding-top: 0;
	text-align: left;
	white-space: nowrap;
}

.graficoBarras[data-horizontal="false"] .graficoBarras-rotuloCategoria {
	left: 0;
	right: 0;
	text-align: center;
}

/* ========== Rotulo inclinado ========== */

/* em pe, nome comprido so cabe girado; o title da tag guarda o nome inteiro */
.graficoBarras[data-horizontal="false"][data-rotulo-inclinado="true"] .graficoBarras-rotulo {
	width: auto;
	max-height: var(--largura-rotulo);
	margin: 5px auto 0 auto;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========== Estados e chaves que desligam ========== */

/* nulo nao tem barra (o traco vem da tag); zero tem barra de tamanho zero */
.graficoBarras-serie[data-nulo="true"] .graficoBarras-barra {
	display: none;
}

.graficoBarras-serie[data-nulo="true"] .graficoBarras-valor {
	color: var(--cor-fraca);
}

/* sem numero e sem eixo nao ha o que reservar: redefinir na raiz muda o que deriva */
.graficoBarras[data-valores="false"] {
	--espaco-valor: 0px;
}

/* moeda precisa de 96px de canaleta; o :not() impede reservar sem numero na barra */
.graficoBarras[data-formato="moeda"]:not([data-valores="false"]) {
	--espaco-valor: 96px;
}

.graficoBarras[data-eixo="false"] {
	--largura-eixo: 0px;
}

.graficoBarras[data-valores="false"] .graficoBarras-valor {
	display: none;
}

.graficoBarras[data-legenda="false"] .graficoBarras-legenda {
	display: none;
}

.graficoBarras[data-eixo="false"] .graficoBarras-eixo {
	display: none;
}

.graficoBarras[data-eixo="false"] .graficoBarras-plot,
.graficoBarras[data-eixo="false"] .graficoBarras-series {
	background-image: none;
}

/* ========== Cartoes-resumo ========== */

/* faixa de totais por serie (chave exibeCartoes); a cor vem de data-serie */
.graficoBarras-cartoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.graficoBarras-cartao {
	flex: 1 1 120px;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid var(--cor-grade);
	border-left: 3px solid var(--cor-serie, var(--cor-neutra));
}

.graficoBarras-cartaoValor {
	display: block;
	color: var(--cor-texto);
	font-size: 17px;
	font-weight: bold;
	line-height: 1.1;
}

.graficoBarras-cartaoRotulo {
	display: block;
	margin-top: 2px;
	color: var(--cor-fraca);
	overflow-wrap: break-word;
}

.graficoBarras[data-cartoes="false"] .graficoBarras-cartoes {
	display: none;
}

.graficoBarras-vazio {
	padding: 14px 2px;
	color: var(--cor-fraca);
	font-style: italic;
}

/* ========== Camada 2 ========== */

.graficoBarras-filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-bottom: 8px;
}

.graficoBarras-chip {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	padding: 3px 9px;
	border: 1px solid var(--cor-grade);
	border-radius: 10px;
	background: #ffffff;
	color: var(--cor-fraca);
	font-family: inherit;
	font-size: 11px;
	line-height: 1.3;
	cursor: pointer;
}

.graficoBarras-chip i {
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 2px;
	background: var(--cor-serie, var(--cor-neutra));
	opacity: 0.3;
}

.graficoBarras-chip[aria-pressed="true"] {
	border-color: var(--cor-serie, var(--cor-neutra));
	color: var(--cor-texto);
	font-weight: bold;
}

.graficoBarras-chip[aria-pressed="true"] i {
	opacity: 1;
}

.graficoBarras-chip[data-serie="todos"] {
	color: var(--cor-texto);
}

.graficoBarras-chip:focus-visible {
	outline: 2px solid #1b5c73;
	outline-offset: 1px;
}

.graficoBarras-semSerie {
	margin: 0 0 8px 0;
	color: var(--cor-fraca);
	font-style: italic;
}

.graficoBarras-acoes {
	margin-top: 10px;
}

.graficoBarras-botaoTabela {
	padding: 3px 9px;
	border: 1px solid var(--cor-grade);
	background: #ffffff;
	color: #1b5c73;
	font-family: inherit;
	font-size: 11px;
	cursor: pointer;
}

.graficoBarras-botaoTabela:focus-visible {
	outline: 2px solid #1b5c73;
	outline-offset: 1px;
}

.graficoBarras-tabela {
	margin-top: 8px;
	border-collapse: collapse;
	font-size: 11px;
}

/* zera o caption nu, que o hercules.css pinta com fundo #1B5C73 */
.graficoBarras-tabela caption {
	padding: 0 0 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cor-fraca);
	font-size: inherit;
	font-weight: normal;
	text-align: left;
}

.graficoBarras-tabela th,
.graficoBarras-tabela td {
	padding: 3px 14px 3px 0;
	border-bottom: 1px solid var(--cor-grade);
	text-align: left;
	vertical-align: top;
}

.graficoBarras-tabela td {
	text-align: right;
}

/* o tooltip mora dentro da raiz, que ja e position:relative: o .js dispensa o scroll */
.graficoBarras-tooltip {
	position: absolute;
	z-index: 10;
	max-width: 260px;
	padding: 4px 7px;
	border-radius: 2px;
	background: #333333;
	color: #ffffff;
	font-size: 10px;
	line-height: 1.35;
	pointer-events: none;
}

.graficoBarras-serie[tabindex] {
	cursor: pointer;
}

/* (0,2,0) vence por especificidade o display das pecas acima; sem ela o hidden nao esconde */
.graficoBarras [hidden] {
	display: none;
}

/* ========== Foco e movimento ========== */

.graficoBarras-serie:hover .graficoBarras-barra {
	filter: brightness(1.12);
}

.graficoBarras-serie:focus-visible {
	outline: 2px solid #1b5c73;
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.graficoBarras-barra {
		transition: none;
	}
}

/* ========== Impressao ========== */

@media print {
	.graficoBarras {
		--cor-grade: #cccccc;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.graficoBarras-barra {
		transition: none;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
	}

	.graficoBarras-series,
	.graficoBarras-grupo {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}