/* =====================================================================
   Chart Expand — botão "expandir" + overlay fullscreen pros 4 gráficos.
   No mobile (≤700px), o overlay força orientação landscape via rotação CSS
   pra aproveitar a tela toda sem o usuário precisar girar o aparelho.
   ===================================================================== */

/* Botão "expandir" no canto sup-direito do container do gráfico */
.leto-chart-expand-btn {
	position: absolute; top: 10px; right: 10px; z-index: 4;
	appearance: none; border: 1px solid rgba(0,0,0,.12);
	background: rgba(255,255,255,.85); color: var(--leto-ink, #1a1a1a);
	width: 32px; height: 32px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background .2s, border-color .2s, transform .2s;
	backdrop-filter: blur(6px);
}
.leto-chart-expand-btn:hover { background: #fff; border-color: rgba(0,0,0,.24); transform: translateY(-1px); }
.leto-chart-expand-btn:focus-visible { outline: 2px solid var(--leto-green-deep, #5e6b3a); outline-offset: 2px; }

/* Garantir que o container tenha position pra ancorar o botão */
.fundo-chart__plot, .aum-chart__plot, .ins-idex__chart--live, .fiagro-chart--hist { position: relative; }

/* No painel IDEX (azul) o botão precisa de outras cores pra contraste */
.page-insights .ins-idex__chart--live .leto-chart-expand-btn {
	background: rgba(0,128,255,.92); color: #fff; border-color: rgba(255,255,255,.32);
}
.page-insights .ins-idex__chart--live .leto-chart-expand-btn:hover { background: #0080ff; }

/* Overlay fullscreen */
.leto-chart-expand-overlay {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(20,20,18,.92);
	display: none;
	padding: 24px;
}
.leto-chart-expand-overlay.is-open { display: flex; align-items: center; justify-content: center; }
body.leto-chart-expand-open { overflow: hidden; }

.leto-chart-expand-close {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	appearance: none; border: 1px solid rgba(255,255,255,.32);
	background: rgba(0,0,0,.4); color: #fff;
	width: 44px; height: 44px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background .2s, border-color .2s;
}
.leto-chart-expand-close:hover { background: rgba(0,0,0,.7); border-color: #fff; }

/* Host do gráfico ampliado */
.leto-chart-expand-host {
	width: 100%; height: 100%;
	background: #fff; border-radius: 12px;
	padding: clamp(16px, 2vw, 32px);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 30px 80px rgba(0,0,0,.4);
	overflow: hidden;
}
/* Quando o container do chart vai pro overlay, ocupa o host inteiro */
.leto-chart-expand-host > .fundo-chart__plot,
.leto-chart-expand-host > .aum-chart__plot,
.leto-chart-expand-host > .ins-idex__chart--live,
.leto-chart-expand-host > .fiagro-chart--hist {
	width: 100% !important; height: 100% !important; max-height: 100% !important;
	flex: 1; min-height: 0;
}
.leto-chart-expand-host canvas { width: 100% !important; height: 100% !important; }

/* Esconder o botão "expandir" quando já está dentro do overlay */
.leto-chart-expand-host .leto-chart-expand-btn { display: none; }

/* Mobile: rotaciona o host pra landscape forçado, aproveitando a tela toda.
   Aplica só quando o aparelho está em portrait E é estreito.
   width/height invertidos porque a rotação 90° inverte os eixos visualmente. */
@media (max-width: 700px) and (orientation: portrait) {
	.leto-chart-expand-overlay.is-open { padding: 16px; }
	.leto-chart-expand-host {
		width: 100vh; height: calc(100vw - 32px);
		transform: rotate(90deg);
		transform-origin: center center;
	}
	.leto-chart-expand-close {
		/* Botão no canto FÍSICO superior-direito (não rotaciona) */
		top: 12px; right: 12px;
	}
}