<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Calculadora - Ajuste do Nível de Enchimento vs Temperatura</title>
    <!-- Link para o Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    
    <!-- Início do CSS -->
    <style>
        /* =======================================================
           Seção: CSS - Estilos para a Calculadora
           ======================================================= */

        /* CSS Reset Básico */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        /* Estilos Gerais do Corpo */
        body { 
            font-family: Arial, sans-serif; 
            line-height: 1.6; 
            padding: 20px; 
            background-color: #f4f4f4; 
            color: #333; 
            margin: 0;
        }

        /* Logotipo fora do container principal */
        .logo-container {
            text-align: center;
            margin-bottom: 5px; /* Espaço entre o logotipo e o container */
            background-color: #f4f4f4; /* Fundo para destacar o logotipo */
            padding: 10px;
            border-radius: 0px;
        }

        .logo-container img {
            width: 100px; /* Ajuste conforme necessário */
            height: auto;
            display: block;
            margin: 0 auto; /* Centraliza a imagem */
        }

        /* Container principal com fundo azul */
        .container { 
            width: 730px; /* Largura fixa */
            margin: 0 auto; /* Centraliza horizontalmente */
            padding: 10px; 
            background-color: #006893; /* Fundo azul */
            border: 1px solid #ccc; 
            border-radius: 5px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
            position: relative; /* Posicionamento relativo para o iframe */
            color: #fff; /* Texto em branco para contraste */
        }

        .title { 
            margin-bottom: 10px; 
            font-size: 20px; 
            font-weight: bold; 
            text-align: left; 
        }

        /* Estilos do garrafa_info.html */
        #garrafa-info {
            position: absolute; /* Para posicionamento exato */
            top: 80px; /* Ajuste conforme necessário */
            right: 35px; /* Mantém o menu à direita */
            width: 210px;
            height: auto;
            overflow: auto;
            font-family: 'Verdana', sans-serif;
            font-size: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.5); /* Transparência ajustada */
            z-index: 10; /* Garante que está acima de outros elementos */
        }

        #garrafa-info strong {
            display: block;
            color: #050505; /* Cor do título */
            font-size: 10px; /* Tamanho da fonte do título */
            font-weight: normal;
            text-align: center; /* Centralizando o título */
            margin-bottom: 10px;
        }

        #garrafa-info select {
            width: 100%;
            padding: 8px 5px; /* Padding maior para melhor interação */
            margin-bottom: 5px;
            border: 1px solid #888; /* Borda mais escura para a aba */
            background-color: #ffffff; /* Cor de fundo da aba */
            color: #333; /* Cor do texto da aba */
            font-weight: normal; /* Negrito no texto da aba */
            font-size: 8.5px; 
            border-radius: 4px;
            appearance: none; /* Remove estilos padrão para personalização */
            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><polygon points="0,0 10,0 5,5" fill="%23333"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px 5px;
            transition: border-color 0.3s, box-shadow 0.3s; /* Adicionando transições */
        }

        /* Adicionar transições para suavizar mudanças de foco */
        #garrafa-info select:focus {
            border-color: #009fc6; /* Cor de destaque ao focar */
            outline: none; /* Remove a borda de foco padrão */
            box-shadow: 0 0 5px rgba(0, 159, 198, 0.5); /* Sombra de foco */
        }

        /* Detalhes da Garrafa */
        #detalhes-garrafa {
            color: #555; /* Cor do texto dos detalhes */
            font-family: 'Courier New', monospace; /* Fonte monoespaçada para os detalhes */
            font-size: 10px; /* Tamanho da fonte dos detalhes */
            background-color: #e6e6e6; /* Fundo mais escuro para a área de detalhes */
            padding: 5px; /* Espaçamento interno */
            border: 1px solid #bbb; /* Borda dos detalhes */
            white-space: pre-line; /* Mantém a formatação de múltiplas linhas */
            text-align: center; /* Centraliza o texto horizontalmente */
            border-radius: 4px;
            margin-top: 10px;
        }

        /* Grupo de Inputs Alinhados Horizontalmente */
        .input-group {
            display: flex; /* Alinha os campos horizontalmente */
            gap: 40px; /* Espaçamento entre os campos */
            margin-top: 10px;
            margin-bottom: 10px;
        }

        /* Estilos para a seleção "Volume da Garrafa" */
        .input-garrafa-volume {
            width: 200px; /* Mesma largura dos outros inputs */
            padding: 8px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            margin-top: 5px; 
            font-size: 10px; 
            box-sizing: border-box; 
            background-color: #e1f5fe; /* Fundo consistente com .input-fillLevel */
            color: #333; 
            font-weight: normal;
            appearance: none; /* Remove estilos padrão para personalização */
            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><polygon points="0,0 10,0 5,5" fill="%23333"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 10px 5px;
            transition: border-color 0.3s, box-shadow 0.3s; /* Adicionando transições */
        }

        /* Adicionar transições para suavizar mudanças de foco */
        .input-garrafa-volume:focus {
            border-color: #009fc6; /* Cor de destaque ao focar */
            outline: none; /* Remove a borda de foco padrão */
            box-shadow: 0 0 5px rgba(0, 159, 198, 0.5); /* Sombra de foco */
        }

        label, output { 
            display: block; 
            margin-top: 10px; 
        }

        /* Estilos Gerais para Inputs Numéricos */
        input[type="number"] {
            padding: 8px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
            margin-top: 5px; 
            letter-spacing: 0.5px; 
            font-size: 10px; /* Garantir consistência no tamanho da fonte */
            box-sizing: border-box; /* Para que o padding não afete a largura total */
            transition: border-color 0.3s, box-shadow 0.3s; /* Adicionando transições */
        }

        /* Estilos para Inputs Numéricos ao Focar */
        input[type="number"]:focus {
            border-color: #009fc6; /* Cor de destaque ao focar */
            outline: none; /* Remove a borda de foco padrão */
            box-shadow: 0 0 5px rgba(0, 159, 198, 0.5); /* Sombra de foco */
        }

        /* Estilos Gerais para Outputs */
        .output-box {
            padding: 8px; 
            border: 2px solid #90EE90; 
            border-radius: 4px; 
            margin-top: 5px; 
            letter-spacing: 0.5px; 
            font-size: 10px; /* Garantir consistência no tamanho da fonte */
            box-sizing: border-box; /* Para que o padding não afete a largura total */
            display: block; /* Para garantir que o output ocupe toda a largura disponível */
            background-color: #006893; /* Fundo para diferenciar do input */
            color: #fff; /* Texto em branco */
        }

        /* Estilos Específicos */

        /* Campo "Temperatura" */
        .input-temperature {
            width: 200px; /* Largura específica para Temperatura */
            background-color: #fff; /* Exemplo: fundo levemente amarelo */
            cursor: text; /* Garantir cursor de texto */
        }

        /* Campo "Nível de Enchimento" */
        .input-fillLevel {
            width: 200px; /* Largura específica para Nível de Enchimento */
            background-color: #fff; /* Exemplo: fundo levemente azul */
            cursor: text; /* Garantir cursor de texto */
        }

        /* Campo "Comprimento da Rolha" */
        .input-rolha-length {
            width: 200px; /* Largura específica para Comprimento da Rolha */
            background-color: #fff; /* Exemplo: fundo levemente rosa */
            cursor: text; /* Garantir cursor de texto */
        }

        /* Caixa de Output Ajustada */
        .output-adjustedFillLevel {
            width: 215px; /* Largura específica para Output */
            background-color: #006893; /* Cor de fundo */
        }

        /* Caixa de Output Pressão Iniciada */
        .output-pressaoIniciada {
            width: 215px; /* Largura específica para Output */
            background-color: #006893; /* Mesma cor de fundo para consistência */
            margin-left: 20px; /* Espaçamento entre as caixas */
        }

        /* Caixa de Output Headspace */
        .output-headspace {
            width: 215px; /* Largura específica para Output */
            background-color: #006893; /* Mesma cor de fundo para consistência */
            margin-left: 20px; /* Espaçamento entre as caixas */
        }

        /* Novo contêiner para alinhar outputs horizontalmente */
        .outputs-container {
            display: flex;
            align-items: center; /* Alinha verticalmente ao centro */
            margin-top: 10px;
        }

        /* Estilos Gerais para Labels de Output */
        .output-label {
            color: #fff; /* Cor do texto */
            font-weight: normal;
            font-size: 12px;
            margin-bottom: 5px;
        }

        /* Estilos para Botões */
        button { 
            padding: 10px 20px; 
            background-color: #009fc6; /* Botão com azul mais escuro */
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            margin-top: 20px; 
            margin-right: 10px;
            font-size: 10px; /* Tamanho fixo da fonte */
            transition: background-color 0.3s;
        }

        button.back-button { 
            background-color: #ec3e26; 
        }

        /* Botões ao Passar o Mouse */
        button:hover {
            opacity: 0.9;
        }

        /* Estilos para o Rodapé */
        footer { /* Apenas para o texto maior (descritivo "A expansão térmica....") */
            text-align: justify; 
            margin-top: 10px; 
            font-size: 10px; 
        }

        .footer-text { 
            margin-top: 20px; 
            border-top: 1px solid #ccc; 
            padding-top: 0px; 
        }

        .copyright { 
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #006893;
            color: #fff;
            text-align: center;
            font-size: 12px;
            padding: 10px;
            z-index: 9999;
            border: 1px solid #fff; /* Linha fina branca em todos os lados */
        }

        /* Estilos para Textos Vermelhos */
        .red-text { 
            font-size: 10px; 
            color: #fff; /* Tom de vermelho mais suave */
        }

        .smaller-text { 
            font-size: 9px; 
        }

        .smaller-text-red { 
            font-size: 10px; 
            color: #FF6347;
            background-color: #fff; 
        }

        /* Estilos para o Ícone de Informação */
        .info-icon { 
            position: relative;
            display: inline-block;
            margin-left: 5px;
            width: 14px;
            height: 14px;
            background-color: #fff;
            color: #007BFF;
            border-radius: 50%;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }

        .info-icon:hover {
            background-color: #f0f0f0;
        }

        /* Estilos para a Bolha de Informação */
        .info-bubble { 
            display: none; 
            position: absolute; 
            top: -8px; /* Ajusta a posição abaixo do ícone */
            left: 130px;
            transform: translateX(-50%);
            background-color: white; 
            color: #333;
            text-align: center;  
            border: 1px solid #ccc; 
            padding: 5px; 
            border-radius: 5px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
            font-family: 'Arial', sans-serif; 
            font-size: 9px; 
            word-wrap: break-word;
            z-index: 10000;
            width: 200px; /* Define a largura fixa */
            height: 65px; /* Define a altura fixa */
        }

        /* Mostrar a bolha ao passar o mouse */
        .info-icon:hover .info-bubble {
            display: block;
        }

        /* Estilos para Placeholders */
        input::placeholder {
            font-size: 9px; /* Tamanho fixo da fonte */
            color: #aaa; /* Cor do placeholder (cinza claro) */
        }

        /* Garantir que o cursor de texto apareça nas caixas de entrada 2, 3 e 4 */
        .input-temperature,
        .input-fillLevel,
        .input-rolha-length {
            cursor: text;
        }

        /* Classe para destacar campos com erro */
        .input-error {
            border: 2px solid #FF6347 !important; /* Borda vermelha */
            background-color: #ffe6e6; /* Fundo levemente vermelho para destaque */
        }

        /* Mensagens de Erro */
        .error-message {
            color: #FF6347;
            font-size: 9px;
            margin-top: 2px;
            height: 18px; /* Define uma altura fixa */
            line-height: 14px; /* Centraliza verticalmente o texto */
            visibility: hidden; /* Oculta a mensagem sem remover o espaço */
        }
    </style>
    <!-- Fim do CSS -->
</head>
<body>
    <!-- =======================================================
        Seção: HTML - Estrutura da Calculadora
        ======================================================= -->
    <div class="logo-container">
        <img src="exi_logo.png" alt="Logo eXi">
    </div>
    <div class="container">
        <h1 class="title">Nível de Enchimento, Pressão Interna e Headspace</h1>
        
        <!-- Conteúdo de garrafa_info.html incorporado diretamente -->
        <div id="garrafa-info">
            <strong>Informação Garrafa</strong>
            <select id="tipo-garrafa" onchange="mostrarInfo()">
                <option value="">Selecione uma Garrafa</option>
                <option value="Garrafa Bordeaux (Bordalesa)-750ml: valor padrão: 63mm (variação comum: entre 60mm e 65mm)">Garrafa Bordeaux (Bordalesa) - 750ml</option>
                <option value="Garrafa Bordeaux (Bordalesa)-375ml: valor padrão: 43mm (variação comum: entre 40mm e 45mm)">Garrafa Bordeaux (Bordalesa) - 375ml</option>
                <option value="Garrafa Borgonha-750ml: valor padrão: 55mm (variação comum: entre 52mm e 58mm)">Garrafa Borgonha - 750ml</option>
                <option value="Garrafa Borgonha-375ml: valor padrão: 38mm (variação comum: entre 35mm e 40mm)">Garrafa Borgonha - 375ml</option>
                <option value="Garrafa Alsace-750ml: valor padrão: 48mm (variação comum: entre 45mm e 50mm)">Garrafa Alsace Tipo Reno - 750ml</option>
                <option value="Garrafa Alsace-375ml: valor padrão: 33mm (variação comum: entre 30mm e 35mm)">Garrafa Alsace Tipo Reno - 375mm</option>
                <option value="Garrafa Magnum-1.5L: valor padrão: 75mm (variação comum: entre 70mm e 80mm)">Garrafa Magnum - 1500</option>
                
                <!-- Outras opções -->
            </select>
            <div id="detalhes-garrafa"></div>
        </div>
        <!-- Fim do conteúdo de garrafa_info.html -->
        
        <!-- Novo Grupo de Inputs: Volume da Garrafa e Temperatura Alinhados Horizontalmente -->
        <div class="input-group">
            <div class="field volume">
                <label for="garrafa-volume" class="red-text">
                    1. Volume da Garrafa, em mL
                </label>
                <select id="garrafa-volume" name="garrafa-volume" class="input-garrafa-volume required" required>
                    <option value="" disabled selected>Selecione ou Informação Garrafa</option>
                    <option value="375" data-original-text="375">375</option>
                    <option value="500" data-original-text="500">500</option>
                    <option value="750" data-original-text="750">750</option>
                    <option value="1500" data-original-text="1500">1500</option>
                </select>
                <div class="error-message" id="error-garrafa-volume"></div>
            </div>
            <div class="field temperatura">
                <label for="temperature" class="red-text">
                    4. Temperatura do vinho, em °C
                </label>
                <input 
                    type="number" 
                    id="temperature" 
                    name="temperature" 
                    class="input-temperature required" 
                    min="10" 
                    max="25" 
                    required 
                    placeholder="Insira Valor">
                <div class="error-message" id="error-temperature"></div>
            </div>
        </div>
        
        <!-- Campo "Nível de Enchimento" com Info Icon -->
        <div class="field fill-level">
            <label for="fillLevel" class="red-text">
                2. Nível de enchimento, em mm
            </label>
            <div class="fill-level-container">
                <input 
                    type="number" 
                    id="fillLevel" 
                    name="fillLevel" 
                    class="input-fillLevel required" 
                    step="0.1" 
                    required 
                    placeholder="Insira Valor ou Informação Garrafa">
                <!-- Info Icon com Info Bubble -->
                <span class="info-icon" onmouseover="showInfo(this)" onmouseout="hideInfo(this)">i
                    <div class="info-bubble">
                        Para valores Padrão de "Volume da Garrafa" e "Nível de Enchimento", selecione automaticamente em "Informação Garrafa".
                    </div>
                </span>
            </div>
            <div class="error-message" id="error-fillLevel"></div>
        </div>

        <!-- Campo "Comprimento da Rolha" com validação atualizada -->
        <div class="field comprimento">
            <label for="rolha-length" class="red-text">
                3. Comprimento da Rolha, em mm
            </label>
            <input 
                type="number" 
                id="rolha-length" 
                name="rolha-length" 
                class="input-rolha-length required" 
                min="25" 
                max="63" 
                required
                placeholder="Insira Valor">
            <div class="error-message" id="error-rolha-length"></div>
        </div>

        <!-- Novas Caixas de Output: Nível Ajustado, Pressão Iniciada e Headspace -->
        <div class="outputs-container">
            <div class="output-item">
                <label for="adjustedFillLevel" class="output-label">Ajuste do Nível de Enchimento (NE)</label>
                <output 
                    id="adjustedFillLevel" 
                    name="adjustedFillLevel" 
                    class="output-box output-adjustedFillLevel">
                    0.0
                </output>
            </div>
            <div class="output-item">
                <label for="pressaoIniciada" class="output-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&Delta; Pressão Interna sem ajuste do NE</label>
                <output 
                    id="pressaoIniciada" 
                    name="pressaoIniciada" 
                    class="output-box output-pressaoIniciada">
                    0.0
                </output>
            </div>
            <div class="output-item">
                <label for="headspace" class="output-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Headspace (Câmara de Expansão)</label>
                <output 
                    id="headspace" 
                    name="headspace" 
                    class="output-box output-headspace">
                    0.0
                </output>
            </div>
        </div>
        
        <!-- Botões de Ação -->
        <button type="button" onclick="calculateAdjustment()">Calcular</button>
        <button type="button" class="back-button" onclick="limparFormulario()">Limpar</button>

        <!-- Rodapé -->
        <footer class="footer-text">
            <p class="custom-text">
                <span style="color: #90EE90; font-size: 9px; font-weight: normal;">
                    Headspace recomendado a 20ºC: Consumo Rápido - mínimo 14mm | Reserva/Estágio - mínimo 18mm. Pressão Interna deve ser o mais próximo de 0 bar.
                </span>
            </p>
            <p style="margin-top: 20px;">
                A expansão térmica do vinho, aspecto crucial para a seleção adequada do calibre da rolha, é influenciada por uma variedade de fatores, incluindo o teor alcoólico e a densidade do vinho, bem como a configuração geométrica da garrafa, entre outros. Importa salientar que este modelo representa apenas uma simulação aproximada mas fiável, concebida para auxiliar na prevenção de potenciais problemas.
            </p>
            <div class="copyright">
                Copyright © eXi: 2024 All rights reserved
            </div>
        </footer>
    </div>
    
    <!-- =======================================================
        Seção: JavaScript - Funcionalidades da Calculadora
        ======================================================= -->
    <script>
        // Variável de controle para atualizações automáticas
        let autoUpdateEnabled = false;

        // Funções do calculadora.js
        function calculateAdjustment() {
            // Validação dos inputs
            if (!validateInputs()) {
                return;
            }

            const tempInput = document.getElementById('temperature');
            const fillLevelInput = document.getElementById('fillLevel');
            const rolhaLengthInput = document.getElementById('rolha-length');
            const volumeSelect = document.getElementById('garrafa-volume');
            const resultFillLevel = document.getElementById('adjustedFillLevel');
            const resultPressao = document.getElementById('pressaoIniciada');
            const resultHeadspace = document.getElementById('headspace');
            
            const temperature = parseFloat(tempInput.value);
            const fillLevel = parseFloat(fillLevelInput.value);
            const rolhaLength = parseFloat(rolhaLengthInput.value);
            const volume = parseInt(volumeSelect.value, 10);
            
            // Validação existente para Nível de Enchimento
            if (fillLevel < 30 || fillLevel > 330) {
                displayError(['fillLevel'], 'Corrija o valor do nível de enchimento (30mm - 330mm).');
                return;
            } else {
                removeError(['fillLevel']);
            }

            // Validação existente para Temperatura
            if (temperature > 40) {
                displayError(['temperature'], 'Temperatura do Vinho muito alta (máx. 40°C).');
                return;
            } else if (temperature < 8) {
                displayError(['temperature'], 'Temperatura do Vinho muito baixa (mín. 8°C).');
                return;
            } else {
                removeError(['temperature']);
            }

            // **Nova Validação para Comprimento da Rolha**
            if (rolhaLength < 25 || rolhaLength > 63) {
                displayError(['rolha-length'], 'Corrija o valor do comprimento da rolha (25mm - 63mm).');
                return;
            } else {
                removeError(['rolha-length']);
            }

            // Determinar o valor de C com base no volume da garrafa
            let C;
            switch(volume) {
                case 750:
                    C = 21;
                    break;
                case 375:
                    C = 20;
                    break;
                case 500:
                    C = 20.5;
                    break;
                case 1500:
                    C = 22;
                    break;
                default:
                    C = 21; // Valor padrão caso nenhum caso corresponda
            }
            
            // Aplicar a fórmula para Ajuste do Nível de Enchimento
            let adjustedFillLevel;
            if (temperature === 20) {
                adjustedFillLevel = fillLevel;
            } else {
                const formulaPart = (-0.00942 * Math.pow(temperature, 2) - 0.23183 * temperature + 71.443) / 63.0384 - 1;
                adjustedFillLevel = fillLevel + (fillLevel * formulaPart) * Math.pow((21 / C), 2);
            }
            
            // Formatar o resultado
            adjustedFillLevel = adjustedFillLevel.toFixed(1);
            resultFillLevel.textContent = `Ajustar NE para ${adjustedFillLevel}mm`;
            
            // === Cálculo da Pressão Iniciada ===
            let pressaoIniciada;
            if (temperature === 20 && C === 21 && rolhaLength === 45) {
                pressaoIniciada = 0;
            } else {
                pressaoIniciada = 0.08 * (20 - temperature) * (63 / fillLevel) * Math.pow((21 / C), 2) * (rolhaLength / 45);
            }
            
            // Formatar o resultado para duas casas decimais e obter o valor absoluto
            let pressaoIniciadaFormatted = Math.abs(pressaoIniciada).toFixed(2);
            
            // Determinar a mensagem a ser exibida com base no valor de pressaoIniciada
            let pressaoMessage;
            if (pressaoIniciada > 0) {
                pressaoMessage = `Potencial Aumento de ${pressaoIniciadaFormatted} bar`;
            } else if (pressaoIniciada < 0) {
                pressaoMessage = `Potencial Diminuição de ${pressaoIniciadaFormatted} bar`;
            } else { // pressaoIniciada === 0
                pressaoMessage = `${pressaoIniciadaFormatted} bar`;
            }
            
            // Atualizar o output com a mensagem correta
            resultPressao.textContent = pressaoMessage;
            // ===================================
            
            // **Cálculo de Headspace**
            // Requisitos:
            // - "Comprimento da Rolha" e "Nível de Enchimento" são obrigatórios
            // - Se a temperatura for exatamente 20ºC, exibir apenas um resultado
            // - Se a temperatura for diferente de 20ºC, exibir dois resultados
            // - Não exibir as fórmulas, apenas os resultados

            // Cálculo para Headspace
            const headspaceAt20 = fillLevel - rolhaLength;
            let headspaceResult = `a 20ºC = ${headspaceAt20.toFixed(1)}mm`;
            
            // Se temperatura != 20, exibir segunda linha na mesma linha
            if (temperature !== 20) {
                const headspaceAtTemp = adjustedFillLevel - rolhaLength;
                headspaceResult += ` | a ${temperature}ºC = ${headspaceAtTemp.toFixed(1)}mm`;
            }
            
            resultHeadspace.textContent = headspaceResult;

            // **Habilitar Atualizações Automáticas Após o Primeiro Cálculo**
            if (!autoUpdateEnabled) {
                autoUpdateEnabled = true;
                attachAutoUpdateListeners();
            }
        }

        // Função para Exibir Mensagens de Erro
        function displayError(fieldIds, message) {
            fieldIds.forEach(id => {
                const field = document.getElementById(id);
                if (field) {
                    field.classList.add('input-error');
                    const errorElement = document.getElementById(`error-${id}`);
                    if (errorElement) {
                        errorElement.textContent = message;
                        errorElement.style.visibility = 'visible'; // Torna a mensagem visível
                    }
                }
            });
        }

        // Função para Remover Mensagens de Erro
        function removeError(fieldIds) {
            fieldIds.forEach(id => {
                const field = document.getElementById(id);
                if (field) {
                    field.classList.remove('input-error');
                    const errorElement = document.getElementById(`error-${id}`);
                    if (errorElement) {
                        errorElement.textContent = '';
                        errorElement.style.visibility = 'hidden'; // Oculta a mensagem
                    }
                }
            });
        }

        // Função para Validar os Inputs Obrigatórios
        function validateInputs() {
            let isValid = true;

            // Lista de IDs dos campos obrigatórios
            const requiredFields = ['garrafa-volume', 'fillLevel', 'rolha-length', 'temperature'];

            requiredFields.forEach(id => {
                const field = document.getElementById(id);
                const errorElement = document.getElementById(`error-${id}`);
                if (!field.value || field.value.trim() === '') {
                    field.classList.add('input-error');
                    if (errorElement) {
                        errorElement.textContent = 'Este campo é obrigatório.';
                        errorElement.style.visibility = 'visible'; // Torna a mensagem visível
                    }
                    isValid = false;
                } else {
                    field.classList.remove('input-error');
                    if (errorElement) {
                        errorElement.textContent = '';
                        errorElement.style.visibility = 'hidden'; // Oculta a mensagem
                    }
                }
            });

            return isValid;
        }

        // Função para Remover Classes de Erro dos Inputs
        function removeErrorClasses() {
            const errorFields = document.querySelectorAll('.input-error');
            errorFields.forEach(field => {
                field.classList.remove('input-error');
            });

            const errorMessages = document.querySelectorAll('.error-message');
            errorMessages.forEach(message => {
                message.textContent = '';
                message.style.visibility = 'hidden'; // Oculta todas as mensagens
            });
        }

        // Função para Limpar o Formulário
        function limparFormulario() {
            // Limpa os campos de input
            document.getElementById('temperature').value = '';
            document.getElementById('fillLevel').value = '';
            document.getElementById('rolha-length').value = '';
            document.getElementById('adjustedFillLevel').textContent = '0.0';
            document.getElementById('pressaoIniciada').textContent = '0.0';
            document.getElementById('headspace').textContent = '0.0';
    
            // Reseta a seleção dos dropdowns
            document.getElementById('tipo-garrafa').selectedIndex = 0;
            document.getElementById('garrafa-volume').selectedIndex = 0; // Reseta a nova seleção
    
            // Restaurar os textos originais das opções do Volume da Garrafa
            var volumeSelect = document.getElementById('garrafa-volume');
            for (var i = 0; i < volumeSelect.options.length; i++) {
                var option = volumeSelect.options[i];
                if (option.getAttribute('data-original-text')) {
                    option.text = option.getAttribute('data-original-text');
                }
            }
    
            // Limpa o texto das informações de garrafas
            document.getElementById('detalhes-garrafa').textContent = '';
    
            // **Resetar a Variável de Controle e Remover Event Listeners**
            autoUpdateEnabled = false;
            removeAutoUpdateListeners();

            // Remover classes de erro dos inputs
            removeErrorClasses();
        }

        // Função para Mostrar Informações da Garrafa Selecionada
        function mostrarInfo() {
            var select = document.getElementById('tipo-garrafa');
            var info = document.getElementById('detalhes-garrafa');
            var selectedValue = select.value;
            
            // Atualiza os detalhes da garrafa
            info.textContent = selectedValue.replace(/-/g, ':\n'); // Modificação existente
            
            // Extrai o valor padrão usando expressão regular
            var regex = /valor padrão:\s*(\d+)mm/;
            var match = selectedValue.match(regex);
            if (match && match[1]) {
                var defaultFillLevel = match[1]; // Obtém apenas o número
                var fillLevelInput = document.getElementById('fillLevel');
                if (fillLevelInput) {
                    fillLevelInput.value = defaultFillLevel;
                    
                    // Opcional: Chama a função de cálculo após definir o valor
                    calculateAdjustment();
                }
            }

            // Extrai o volume a partir do texto da opção selecionada
            var selectedOption = select.options[select.selectedIndex];
            var optionText = selectedOption.text;
            // Assume que o volume está no final do texto, por exemplo, "750 mL" ou "1.5L"
            var volumeMatch = optionText.match(/(\d+(\.\d+)?)\s*(ml|l)/i);
            if (volumeMatch) {
                var volumeNumber = parseFloat(volumeMatch[1]);
                var volumeUnit = volumeMatch[3].toLowerCase();
                var volumeValue;
                if (volumeUnit === 'l') {
                    volumeValue = Math.round(volumeNumber * 1000); // Converte litros para mL (ex: 1.5L => 1500)
                } else {
                    volumeValue = parseInt(volumeMatch[1], 10); // Mantém apenas o número (ex: 750 mL => 750)
                }
                var volumeSelect = document.getElementById('garrafa-volume');
                if (volumeSelect) {
                    // Verifica se o valor existe nas opções
                    var optionExists = false;
                    for (var i = 0; i < volumeSelect.options.length; i++) {
                        if (parseInt(volumeSelect.options[i].value, 10) === volumeValue) {
                            volumeSelect.value = volumeValue.toString();
                            optionExists = true;
                            break;
                        }
                    }
                    // Se o volume não existir, reseta a seleção
                    if (!optionExists) {
                        volumeSelect.selectedIndex = 0;
                    }

                    // Dispara o evento 'change' para atualizar o texto da opção selecionada
                    var event = new Event('change');
                    volumeSelect.dispatchEvent(event);
                }
            }
        }

        // JavaScript para manipular a exibição do Volume da Garrafa
        document.getElementById('garrafa-volume').addEventListener('change', function() {
            var select = this;
            var selectedValue = select.value;
            var selectedIndex = select.selectedIndex;
            var selectedOption = select.options[selectedIndex];

            // Restaurar todos os textos originais
            for (var i = 0; i < select.options.length; i++) {
                var option = select.options[i];
                if (option.getAttribute('data-original-text')) {
                    option.text = option.getAttribute('data-original-text');
                }
            }

            // Atualizar o texto do option selecionado para exibir apenas o valor numérico
            if (selectedOption.getAttribute('data-original-text')) {
                selectedOption.text = selectedOption.value; // Exibe apenas o número
            }
        });

        // Restaurar os textos originais ao focar no seletor
        document.getElementById('garrafa-volume').addEventListener('focus', function() {
            var select = this;
            for (var i = 0; i < select.options.length; i++) {
                var option = select.options[i];
                if (option.getAttribute('data-original-text')) {
                    option.text = option.getAttribute('data-original-text');
                }
            }
        });

        // Funções para Mostrar e Ocultar a Bolha de Informação
        function showInfo(element) {
            var infoBubble = element.querySelector('.info-bubble');
            if (infoBubble) {
                infoBubble.style.display = 'block';
            }
        }
        
        function hideInfo(element) {
            var infoBubble = element.querySelector('.info-bubble');
            if (infoBubble) {
                infoBubble.style.display = 'none';
            }
        }

        // Função para Anexar Event Listeners para Atualizações Automáticas
        function attachAutoUpdateListeners() {
            const inputs = [
                document.getElementById('temperature'),
                document.getElementById('fillLevel'),
                document.getElementById('rolha-length'),
                document.getElementById('garrafa-volume'),
                document.getElementById('tipo-garrafa')
            ];
    
            inputs.forEach(input => {
                // Use 'input' event para capturar alterações em tempo real
                input.addEventListener('input', calculateAdjustment);
                // Para selects, use 'change' event
                if (input.tagName.toLowerCase() === 'select') {
                    input.removeEventListener('input', calculateAdjustment); // Remove listener 'input' se estiver aplicado
                    input.addEventListener('change', calculateAdjustment);
                }
            });
        }
    
        // Função para Remover Event Listeners ao Limpar o Formulário
        function removeAutoUpdateListeners() {
            const inputs = [
                document.getElementById('temperature'),
                document.getElementById('fillLevel'),
                document.getElementById('rolha-length'),
                document.getElementById('garrafa-volume'),
                document.getElementById('tipo-garrafa')
            ];
    
            inputs.forEach(input => {
                // Remove os listeners adicionados
                input.removeEventListener('input', calculateAdjustment);
                input.removeEventListener('change', calculateAdjustment);
            });
        }
    
        // Adicionar Event Listeners para Remover Erros ao Preencher os Campos
        document.addEventListener('DOMContentLoaded', () => {
            const requiredFields = ['garrafa-volume', 'fillLevel', 'rolha-length', 'temperature'];

            requiredFields.forEach(id => {
                const field = document.getElementById(id);
                field.addEventListener('input', () => {
                    if (field.value && field.value.trim() !== '') {
                        field.classList.remove('input-error');
                        const errorElement = document.getElementById(`error-${id}`);
                        if (errorElement) {
                            errorElement.textContent = '';
                            errorElement.style.visibility = 'hidden'; // Oculta a mensagem
                        }
                    }
                });
                // Para selects, também escutar o evento 'change'
                if (field.tagName.toLowerCase() === 'select') {
                    field.addEventListener('change', () => {
                        if (field.value && field.value.trim() !== '') {
                            field.classList.remove('input-error');
                            const errorElement = document.getElementById(`error-${id}`);
                            if (errorElement) {
                                errorElement.textContent = '';
                                errorElement.style.visibility = 'hidden'; // Oculta a mensagem
                            }
                        }
                    });
                }
            });
        });
    </script>
    <!-- Fim do JavaScript -->
</body>
</html>
