/* ========= RESPONSIVIDADE (MOBILE) ========= */
@media (max-width: 600px) {
	body {
		place-items: start;
	}

	button {
		padding: 3vw;
		font-size: 3.5vw;
		border-radius: 2vw;
	}

	select {
		background-position: right 3vw center;
		background-size: 4vw;
	}

	input[type='radio'] {
		width: 4vw;
		height: 4vw;
	}

	/* ========= ZOOM CUSTOMIZADO ========= */
	#toggle-zoom,
	#toggle-zoom + .botao-alternancia {
		display: none !important;
	}

	body.zoom-ativo {
		zoom: 1 !important;
		transform: none !important;
		overflow-x: hidden;
	}

	/* ========= CABEÇALHO / BARRA DE FERRAMENTAS ========= */
	.barra-ferramentas {
		gap: 4vw;
		padding: 3vw 4vw;

		.barra-ferramentas__item {
			.seletor-idioma {
				padding: 1.5vw 10vw 1.5vw 2.5vw;
				font-size: 3vw;
				border: 0.1vw solid transparent;
			}

			.botao-alternancia {
				width: 7vw;
				height: 7vw;

				svg {
					width: 5vw;
					height: 5vw;
				}
			}
		}
	}

	/* ========= SEÇÃO HERO ========= */
	.apresentacao-container {
		grid-template-columns: 1fr;
		gap: 6vw;

		padding: 8vw 6vw;
		text-align: center;
		border-bottom-left-radius: 35vw;

		.apresentacao-texto {
			justify-items: center;
			gap: 3vw;

			max-width: 100%;
			padding-left: 0;

			h1 {
				font-size: 6vw;
			}

			p {
				font-size: 3.5vw;
				line-height: 1.6;
			}
		}

		.apresentacao-imagem {
			margin-right: 0;

			img {
				width: 45vw;
			}
		}
	}

	/* ========= CARD PRINCIPAL ========= */
	.cartao-principal {
		gap: 6vw;

		width: 100%;
		padding: 5vw;
		border-radius: 3vw;
		box-shadow: none;

		h2 {
			font-size: 5vw;
		}

		/* Subcard de Configurações e Filtros */
		.sub-cartao-configuracao {
			gap: 5vw;
			padding: 4vw;
			border-radius: 2vw;

			.linha-formulario {
				grid-template-columns: 1fr;
				gap: 5vw;

				.campo-grupo {
					gap: 3vw;
				}
			}

			label {
				font-size: 3.5vw;
			}

			input[type='number'] {
				padding: 2.5vw;
				font-size: 3vw;
				border-radius: 1.5vw;
			}

			select {
				padding: 3vw 12vw 3vw 3vw;
				font-size: 3vw;
				border-radius: 1.5vw;
			}
		}

		/* Bloco de Botões Globais */
		.botoes-container {
			gap: 6vw;

			h3 {
				font-size: 4vw;
			}

			.linha-botoes {
				flex-direction: column;
				align-items: center;
				gap: 2vw;

				button {
					width: 100%;
				}
			}
		}

		/* Formulário Dinâmico e Odontograma */
		.container-formulario-dinamico {
			flex-direction: column;
			gap: 6vw;
			padding: 2vw 0;

			.grupo-dentes {
				width: 100%;
				min-width: auto;

				.cabecalho-arco h4 {
					margin: 5vw 0;
					font-size: 5vw;
				}
			}

			.grade-arcos {
				gap: 0.1vw;
			}

			.hemiarco {
				gap: 3vw;

				.etiqueta-lado {
					font-size: 4vw;
				}
			}

			.coluna-dentes {
				gap: 2vw;
			}

			/* Card Dente Total (Entrada Única) */
			.cartao-dente-simples {
				border-width: 0.3vw;
				border-radius: 1.5vw;

				.container-numero {
					width: 12vw;
					padding: 2vw;

					.numero-dente {
						font-size: 3.5vw;
					}
				}

				.entrada-total {
					width: 18vw;
					padding: 2vw;
					font-size: 4vw;
					border-left-width: 0.3vw;
				}
			}

			/* Card Dente por Componente (Triplo: C, P, O) */
			.componente-dente {
				width: 44vw;
				border-width: 0.2vw;
				border-radius: 1.8vw;

				.dente-titulo {
					padding: 1.5vw;

					h3 {
						font-size: 4vw;
					}
				}

				.dente-corpo {
					gap: 0.8vw;
					padding: 2vw 1vw;

					.caixa-entrada input.entrada-componente {
						padding: 1.5vw 0;
						font-size: 3.5vw;
						border-width: 0.3vw;
						border-radius: 1vw;
					}
				}

				.dente-legenda {
					padding: 1.5vw 0;
					border-top-width: 0.2vw;

					label {
						font-size: 3vw;
					}
				}
			}
		}

		/* Linha de Processamento e Gerar Histograma */
		.linha-processamento {
			grid-template-columns: 1fr;
			gap: 8vw;
			padding-top: 6vw;

			.grupo-distribuicao {
				justify-content: space-around;
				gap: 0;

				.titulo-distribuicao {
					font-size: 3.2vw;
				}

				.radios-distribuicao {
					justify-content: flex-end;
					gap: 6vw;
					width: 45vw;

					label {
						gap: 2vw;
						font-size: 3vw;
					}
				}
			}

			.botao-gerar-histograma {
				justify-self: center;
				width: 90%;
				padding: 3vw;
				font-size: 3.5vw;
				border-radius: 1.2vw;
			}
		}
	}

	/* ========= CONTAINER DO HISTOGRAMA ========= */
	.container-histograma {
		gap: 6vw;

		width: 100%;
		padding: 5vw;
		border-radius: 3vw;
		box-shadow: none;

		canvas {
			width: 100%;
			max-width: 600px;
			height: auto;
			border-radius: 1vw;
		}

		.botao-gerar-imagem {
			justify-self: center;
			width: 90%;
			font-size: 3.5vw;
			border-radius: 1.2vw;
		}
	}

	/* ========= RODAPÉ INSTITUCIONAL ========= */
	.rodape-institucional {
		padding: 8vw 0;

		.conteudo-rodape {
			gap: 6vw;
			width: 90vw;

			.texto-informativo {
				gap: 4vw;

				h3 {
					font-size: 5vw;
				}

				p {
					font-size: 3.5vw;
					line-height: 1.5;
				}

				.logos-parceiros {
					flex-direction: column;
					gap: 8vw;

					img {
						width: 35vw;
						max-height: none;
					}
				}

				h4 {
					font-size: 4vw;
				}
			}

			.botao-download-manual {
				padding: 3vw 5vw;
				font-size: 3.5vw;
				border-radius: 1.2vw;
			}

			.direitos-autorais {
				padding-top: 4vw;
				font-size: 3.2vw;
			}
		}
	}

	/* ========= MODAL DE RESPOSTA E ERROS ========= */
	.modal-overlay .modal-conteudo {
		gap: 5vw;

		width: 85vw;
		padding: 5vw;
		border-radius: 2vw;

		.modal-icone {
			width: 12vw;
			height: 12vw;
			font-size: 10vw;
			border-width: 0.8vw;
		}

		#modal-titulo {
			font-size: 4.5vw;
		}

		.modal-corpo {
			gap: 3.5vw;
			font-size: 3.5vw;

			.alerta-titulo {
				font-size: 3.2vw;
			}

			.alerta-comparativo {
				gap: 2vw;

				max-height: 35vw;
				padding: 3vw;
				border-radius: 1.5vw;

				.erro-item {
					padding: 1.5vw;
					font-size: 2.8vw;
					border-left: 0.8vw solid #f87171;

					.marcador-erro {
						margin-right: 2vw;
					}
				}
			}

			.caixa-dica {
				padding: 1.5vw;

				.alerta-dica {
					font-size: 2.8vw;
				}
			}
		}

		.modal-botao {
			padding: 2vw 8vw;
			font-size: 2.8vw;
			border-radius: 1.5vw;
		}
	}
}