<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8" />
  <!-- Garante a renderização no modo mais recente do IE (para padronizar em navegadores antigos) -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Calculadora</title>
  <style>
    /* Reset básico para ajudar a padronizar a aparência em todos os browsers, sem alterar mais nada */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
      color: #333;
      margin: 0;
      padding: 0;
      text-align: center;
      padding-bottom: 60px; /* Evita que o footer fixo cubra o conteúdo */
    }

    .logo {
      margin-top: 40px;
      margin-bottom: 5px;
      width: 12.5%;
      margin-left: auto;
      margin-right: auto;
    }
    .logo img {
      width: 100%;
      max-width: 100px;
    }

    /* Seletor de Idioma (agora centrado e abaixo do logo) */
.language-selector {
    /* Em vez de position absolute, usamos flex ou inline-flex e margin auto para centrar */
    display: inline-flex;        /* Mantém os links lado a lado */
    justify-content: center;     /* Se quiseres alinhar internamente */
    gap: 3px;                    /* Espaço entre as opções de idioma */
    margin: 5px auto 0 auto;    /* 10px de margem em cima, centro horizontal */
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 100;
}

/* Texto dentro do seletor (links e span) */
.language-selector a,
.language-selector span {
    font-size: 12px;
    color: #006893;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    background-color: transparent;
}

/* Idioma atualmente ativo (cinza) */
.language-selector .current-language {
    color: #ccc;
    cursor: default;
}

/* Hover para links ativos (no futuro) */
.language-selector a:hover {
    color: #89b7d3;
}

/* Tooltips personalizados */
.language-selector .lang-link {
    position: relative; /* Necessário para o tooltip */
    cursor: pointer;
}

/* Tooltip em ::after */
.language-selector .lang-link::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 130%;       /* Agora o balão fica 130% abaixo do link */
    left: 50%;
    transform: translateX(-50%);
    background-color: #89b7d3;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 10px;
    opacity: 0;              /* Invisível por padrão */
    pointer-events: none;    /* Não interfere no cursor */
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
}


/* Triângulo apontando para o link */
.language-selector .lang-link::before {
    content: "";
    position: absolute;
    top: 120%;  /* um pouco acima do tooltip propriamente dito */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #89b7d3 transparent; 
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}


/* Mostrar tooltip ao passar o rato em links 'disabled' */
.language-selector a.disabled:hover::after,
.language-selector a.disabled:hover::before {
    opacity: 1;
}

/* Links ativos (sem tooltip) */
.language-selector a:not(.disabled) {
    cursor: pointer;
}

.language-selector a:not(.disabled)::after,
.language-selector a:not(.disabled)::before {
    display: none;
}


    /* Container "pai" para alinhar as 2 colunas lado a lado */
    .master-container {
      display: flex;
      flex-wrap: nowrap; /* Impede que as colunas quebrem para outra linha */
      width: 900px;      /* Defina a largura conforme necessidade */
      margin: 0 auto; 
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 40px;
      border: 0px solid #006893;
      padding: 20px;
    }

    /* Coluna ESQUERDA (Diluição de Soluções) */
    .title-and-container {
      width: 50%;
      min-width: 320px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Coluna DIREITA (Solução Hidroalcoólica) */
    .right-container {
      width: 50%;
      min-width: 320px;
    }

    /* Título principal de cada coluna (Diluição / Hidroalcoólica) */
    .main-title {
      text-align: center;
      color: #6c757d;
      font-size: 22px;
      margin: 0 0 10px 0; 
    }

    /* Container sem linhas e sem sombra */
    .container {
      width: 100%;
      min-height: 320px;
      background-color: #006893;
      border-radius: 10px;          
      box-shadow: none;          
      padding: 20px;
      margin-top: 0;             
    }

    /* Linha branca horizontal acima dos resultados (Diluição e Hidroalcoólica) */
    #resultDilution,
    #resultAlcohol {
      border-top: 0.5px solid #fff; /* linha branca fina */
      padding-top: 10px;         /* espaçamento do texto em relação à linha */
      margin-top: 10px;          /* afasta a linha do conteúdo acima */
      color: white;             /* por padrão, texto em branco */
    }

    /* Para centralizar os botões fora do container e permitir ajustar a margem */
    .container-buttons {
      text-align: center;
      margin-top: 20px; 
    }

    .equation {
      font-size: 14px;
      margin-bottom: 20px;
      color: #6c757d; 
    }

    .form-group {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 27px;
      font-size: 12px;
      color: #fbfcfd;
    }
    .form-group label {
      width: 136.5px;
      text-align: left;
      margin-right: 10px;
    }

    .right-container .form-group label {
  font-family: Arial, sans-serif; /* ou outra */
  font-size: 14px;              /* Ajusta para o tamanho que quiseres */
  font-weight: bold;             /* Se quiseres em negrito */
  /* Outras propriedades, se precisares */
}


    input[type="number"] {
      width: 22%;
      font-size: 9px;
      padding: 7px;
      border-radius: 5px;
      border: 1px solid #ced4da;
      margin-right: 10px;
      color: #333; /* cor padrão do texto */
      font-weight: normal; /* peso padrão da fonte */
    }

    select {
      color: #6c757d; /* valor padrão de texto do SELECT */
      font-weight: normal;
    }

    /*
      Para as unidades (select) em "Diluição de Soluções" terem ~13% de largura
    */
    #c1Unit,
    #v1Unit,
    #c2Unit,
    #v2Unit {
      width: 18% !important;
      font-size: 8px;
      padding: 4.55px;
      border-radius: 5px;
      border: 1px solid #ced4da;
      margin-right: 10px;
    }

    select option {
      color: #000;
    }

    button {
      padding: 9.1px 18.2px;
      font-size: 12px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
      margin: 10px;
    }
    button[type="button"] {
      /* Botão "Calcular" */
      background-color: #009fc6;
      color: #ffffff;
    }
    button[type="reset"] {
      /* Botão "Limpar" */
      background-color: #ec3e26;
      color: #ffffff;
    }

    /* Texto dos resultados */
    #resultDilution,
    #resultAlcohol {
      font-size: 10px;
      margin-top: 40px;
    }

    /*
      Classe para "Solução Reserva (Mãe)" e "Solução Diluída":
      - Cor branca
      - Fonte normal
      - Tamanho de letra ~0.9em
      - Margem para espaçamento vertical
    */
    .equation-label {
      color: #fff;
      font-weight: normal;
      font-size: 14px;
      display: block;
      margin-bottom: 24px;
      text-align: left; 
    }

    /* Classe para alterar a cor dos símbolos (× e =) */
    .symbol-color {
  color: #fff;
  font-size: 20px;  /* ou 2em, etc. */
}

    /* Rodapé fixo */
    .exi-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #006893;
      color: #fff;
      text-align: center;
      font-size: 10px;
      padding: 10px;
      z-index: 9999;
    }

    /* Remove as setinhas (spinners) nos inputs type="number" em navegadores baseados em WebKit (Chrome, Safari, Opera) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove as setinhas nos inputs type="number" no Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

  </style>
</head>
<body>
  <!-- LOGO -->
  <div class="logo">
    <img src="exi_logo.png" alt="EXI Lab Logo" />
  </div>

  <!-- Seletor de Idioma abaixo do logo, centrado -->
<div class="language-selector">
    <span class="current-language">pt</span>
    
    <!-- Link para Espanhol (desativado) -->
    <!-- 
        Quando estiver pronto:
        - Retira a classe 'disabled'
        - Define href para algo real, por ex. 'es/index.html'
        - Remove 'data-tooltip' se não quiseres tooltip
    -->
    <a href="#" class="lang-link disabled" data-tooltip="Brevemente">es</a>
    
    <!-- Link para Inglês (desativado) -->
    <!-- 
        Quando estiver pronto:
        - Retira a classe 'disabled'
        - Define href para algo real, por ex. 'en/index.html'
        - Remove 'data-tooltip' se não quiseres tooltip
    -->
    <a href="#" class="lang-link disabled" data-tooltip="Coming Soon">en</a>
</div>


  <!-- Agrupamento pai para 2 colunas -->
  <div class="master-container">
    <!-- COLUNA 1: Diluição de Soluções -->
    <div class="title-and-container">
        <h2 class="main-title">
            Diluição de Soluções <span style="font-size: 8px;">(C1xV1=C2xV2)</span>
          </h2>
                
      <div class="container">
        <div class="equation">
          <span class="equation-label">Solução Reserva (Mãe)</span>
          <div class="form-group">
            <input type="number" id="c1" step="any" placeholder="Concentração1" />
            <select id="c1Unit">
              <option value="" disabled selected hidden>Unidades</option>
              <option value="Kg/L">Kg/L</option>
              <option value="Kg/mL">Kg/mL</option>
              <option value="Kg/µL">Kg/µL</option>
              <option value="g/L">g/L</option>
              <option value="g/mL">g/mL</option>
              <option value="g/µL">g/µL</option>
              <option value="mg/L">mg/L</option>
              <option value="mg/mL">mg/mL</option>
              <option value="mg/µL">mg/µL</option>
              <option value="µg/L">µg/L</option>
              <option value="µg/mL">µg/mL</option>
              <option value="µg/µL">µg/µL</option>
              <option value="ng/L">ng/L</option>
              <option value="ng/mL">ng/mL</option>
              <option value="ng/µL">ng/µL</option>
              <option value="pg/L">pg/L</option>
              <option value="pg/mL">pg/mL</option>
              <option value="pg/µL">pg/µL</option>
            </select>
            &nbsp;<span class="symbol-color">&times;</span>&nbsp;&nbsp;
            <input type="number" id="v1" step="any" placeholder="Volume1" />
            <select id="v1Unit">
              <option value="" disabled selected hidden>Unidades</option>
              <option value="L">L</option>
              <option value="mL">mL</option>
              <option value="µL">µL</option>
            </select>
          </div>
          <span class="symbol-color" style="font-size: 1.82em;">=</span><br />
          <span class="equation-label">Solução Diluída</span>
          <div class="form-group">
            <input type="number" id="c2" step="any" placeholder="Concentração2" />
            <select id="c2Unit">
              <option value="" disabled selected hidden>Unidades</option>
              <option value="Kg/L">Kg/L</option>
              <option value="Kg/mL">Kg/mL</option>
              <option value="Kg/µL">Kg/µL</option>
              <option value="g/L">g/L</option>
              <option value="g/mL">g/mL</option>
              <option value="g/µL">g/µL</option>
              <option value="mg/L">mg/L</option>
              <option value="mg/mL">mg/mL</option>
              <option value="mg/µL">mg/µL</option>
              <option value="µg/L">µg/L</option>
              <option value="µg/mL">µg/mL</option>
              <option value="µg/µL">µg/µL</option>
              <option value="ng/L">ng/L</option>
              <option value="ng/mL">ng/mL</option>
              <option value="ng/µL">ng/µL</option>
              <option value="pg/L">pg/L</option>
              <option value="pg/mL">pg/mL</option>
              <option value="pg/µL">pg/µL</option>
            </select>
            &nbsp;<span class="symbol-color">&times;</span>&nbsp;&nbsp;
            <input type="number" id="v2" step="any" placeholder="Volume2" />
            <select id="v2Unit">
              <option value="" disabled selected hidden>Unidades</option>
              <option value="L">L</option>
              <option value="mL">mL</option>
              <option value="µL">µL</option>
            </select>
          </div>
        </div>
        <p id="resultDilution"></p>
      </div>

      <!-- Botões fora do container -->
      <div class="container-buttons">
        <button type="button" onclick="calculateMissingValue()">Calcular</button>
        <button type="reset" onclick="resetForm()">Limpar</button>
      </div>
    </div>

    <!-- COLUNA 2: Solução Hidroalcoólica -->
    <div class="title-and-container right-container">
      <h2 class="main-title">Solução Hidroalcoólica</h2>
      <div class="container">
        <div class="form-group">
          <label for="percEtOH">% Álcool:</label>
          <input type="number" id="percEtOH" step="any" placeholder="% Álcool" />
        </div>
        <div class="form-group">
          <label for="volFinal">Volume Final (mL):</label>
          <input type="number" id="volFinal" step="any" placeholder="Volume Final" />
        </div>
        <div class="form-group">
          <label for="volEtOH">Volume Álcool (mL):</label>
          <input type="number" id="volEtOH" step="any" placeholder="Volume Álcool" />
        </div>
        <div class="form-group">
          <label for="volAgua">Volume Água (mL):</label>
          <input type="number" id="volAgua" step="any" placeholder="Volume Água" />
        </div>
        <p id="resultAlcohol"></p>
      </div>
      <div class="container-buttons">
        <button type="button" onclick="calcularValores()">Calcular</button>
        <button type="reset" onclick="limparCampos()">Limpar</button>
      </div>
    </div>
  </div>

  <!-- Rodapé fixo -->
  <footer class="exi-footer">
    Copyright © eXi: 2024 All rights reserved
  </footer>

  <script>
    /*
      ==========================================
      VARIÁVEIS E FUNÇÕES DA COLUNA "DILUIÇÃO"
      ==========================================
    */
    let listenersAdded = false;  // Para garantir que só adicionamos os 'eventListeners' após o 1º clique
    let lastMissing = null;      // Lembrar qual campo foi calculado por último (c1, v1, c2 ou v2)

    function calculateMissingValue() {
      // Depois do 1º clique em "Calcular", associamos listeners a todos os campos e selects
      if (!listenersAdded) {
        addChangeListenersDilution();
        listenersAdded = true;
      }

      // Tira cor verde/negrito
      resetInputColorsDilution();

      const c1 = parseFloat(document.getElementById('c1').value);
      const c1Unit = document.getElementById('c1Unit').value;
      const v1 = parseFloat(document.getElementById('v1').value);
      const v1Unit = document.getElementById('v1Unit').value;
      const c2 = parseFloat(document.getElementById('c2').value);
      const c2Unit = document.getElementById('c2Unit').value;
      const v2 = parseFloat(document.getElementById('v2').value);
      const v2Unit = document.getElementById('v2Unit').value;

      // Conta quantos valores numéricos estão preenchidos
      const filledValues = [c1, v1, c2, v2].filter(val => !isNaN(val)).length;
      const allUnitsSelected = (c1Unit && v1Unit && c2Unit && v2Unit);

      // Validar unidades
      if (!allUnitsSelected) {
        document.getElementById('resultDilution').style.color = 'white';
        document.getElementById('resultDilution').innerText = 'Preencha 3 campos e selecione todas as unidades.';
        return;
      }

      // Se 4 campos numéricos estão preenchidos
      if (filledValues === 4) {
        // Se sabemos quem foi calculado por último...
        if (lastMissing) {
          // Recalcular esse último missing, como se ainda estivesse “em falta”
          recalcLastMissing(c1, v1, c2, v2, c1Unit, v1Unit, c2Unit, v2Unit);
        } else {
          // Caso o utilizador tenha preenchido todos desde o início sem deixar nada em branco
          document.getElementById('resultDilution').style.color = 'white';
          document.getElementById('resultDilution').innerText =
            'Para calcular, deixe um campo em branco.';
        }
        return;
      }

      // Se exatamente 3 campos estão preenchidos => calcular o que está em falta
      if (filledValues === 3) {
        let msg = doStandardDilutionCalc(
          c1, v1, c2, v2,
          c1Unit, v1Unit, c2Unit, v2Unit
        );
        document.getElementById('resultDilution').style.color = 'white';
        document.getElementById('resultDilution').innerText = msg;
        return;
      }

      // Se menos de 3 campos preenchidos
      if (filledValues < 3) {
        document.getElementById('resultDilution').style.color = 'white';
        document.getElementById('resultDilution').innerText =
          'Preencha 3 campos numéricos.';
      }
    }

    // Função que faz o "c1 × v1 = c2 × v2" normal, assumindo exatamente 3 campos preenchidos
    function doStandardDilutionCalc(c1, v1, c2, v2, c1Unit, v1Unit, c2Unit, v2Unit) {
      // Converte volumes => Litros
      const v1InLiters = convertToLiters(v1, v1Unit);
      const v2InLiters = convertToLiters(v2, v2Unit);
      // Converte concentração => g/L
      const c1InGL = convertToGL(c1, c1Unit);
      const c2InGL = convertToGL(c2, c2Unit);

      let result, resultUnit, msg = '';

      if (isNaN(c1)) {
        // c1 é o “missing”
        result = (c2InGL * v2InLiters) / v1InLiters;
        resultUnit = c1Unit;
        const valConvert = convertFromGL(result, resultUnit).toFixed(6);

        // Preenche
        const el = document.getElementById('c1');
        el.value = valConvert;
        el.style.color = 'green';
        el.style.fontWeight = 'bold';

        msg = `Concentração1 = ${valConvert} ${resultUnit}`;
        lastMissing = 'c1';
      }
      else if (isNaN(v1)) {
        // v1 é o “missing”
        result = (c2InGL * v2InLiters) / c1InGL;
        resultUnit = v1Unit;
        const valConvert = convertFromLiters(result, resultUnit).toFixed(6);

        const el = document.getElementById('v1');
        el.value = valConvert;
        el.style.color = 'green';
        el.style.fontWeight = 'bold';

        msg = `Volume1 = ${valConvert} ${resultUnit}`;
        lastMissing = 'v1';
      }
      else if (isNaN(c2)) {
        // c2 é o “missing”
        result = (c1InGL * v1InLiters) / v2InLiters;
        resultUnit = c2Unit;
        const valConvert = convertFromGL(result, resultUnit).toFixed(6);

        const el = document.getElementById('c2');
        el.value = valConvert;
        el.style.color = 'green';
        el.style.fontWeight = 'bold';

        msg = `Concentração2 = ${valConvert} ${resultUnit}`;
        lastMissing = 'c2';
      }
      else if (isNaN(v2)) {
        // v2 é o “missing”
        result = (c1InGL * v1InLiters) / c2InGL;
        resultUnit = v2Unit;
        const valConvert = convertFromLiters(result, resultUnit).toFixed(6);

        const el = document.getElementById('v2');
        el.value = valConvert;
        el.style.color = 'green';
        el.style.fontWeight = 'bold';

        msg = `Volume2 = ${valConvert} ${resultUnit}`;
        lastMissing = 'v2';
      }

      return msg;
    }

    // Se os 4 campos estão preenchidos e tínhamos 'lastMissing' = 'c1' (por exemplo),
    // recalculamos c1 de novo, respeitando as unidades atuais.
    function recalcLastMissing(c1, v1, c2, v2, c1Unit, v1Unit, c2Unit, v2Unit) {
      // converte para base
      const v1L = convertToLiters(v1, v1Unit);
      const v2L = convertToLiters(v2, v2Unit);
      const c1GL = convertToGL(c1, c1Unit);
      const c2GL = convertToGL(c2, c2Unit);

      let result = null, valConvert = null, msg = '';

      switch (lastMissing) {
        case 'c1':
          result = (c2GL * v2L) / v1L;
          valConvert = convertFromGL(result, c1Unit).toFixed(6);
          document.getElementById('c1').value = valConvert;
          document.getElementById('c1').style.color = 'green';
          document.getElementById('c1').style.fontWeight = 'bold';

          msg = `Concentração1 (atualizado) = ${valConvert} ${c1Unit}`;
          break;

        case 'v1':
          result = (c2GL * v2L) / c1GL;
          valConvert = convertFromLiters(result, v1Unit).toFixed(6);
          document.getElementById('v1').value = valConvert;
          document.getElementById('v1').style.color = 'green';
          document.getElementById('v1').style.fontWeight = 'bold';

          msg = `Volume1 (atualizado) = ${valConvert} ${v1Unit}`;
          break;

        case 'c2':
          result = (c1GL * v1L) / v2L;
          valConvert = convertFromGL(result, c2Unit).toFixed(6);
          document.getElementById('c2').value = valConvert;
          document.getElementById('c2').style.color = 'green';
          document.getElementById('c2').style.fontWeight = 'bold';

          msg = `Concentração2 (atualizado) = ${valConvert} ${c2Unit}`;
          break;

        case 'v2':
          result = (c1GL * v1L) / c2GL;
          valConvert = convertFromLiters(result, v2Unit).toFixed(6);
          document.getElementById('v2').value = valConvert;
          document.getElementById('v2').style.color = 'green';
          document.getElementById('v2').style.fontWeight = 'bold';

          msg = `Volume2 (atualizado) = ${valConvert} ${v2Unit}`;
          break;
      }

      document.getElementById('resultDilution').style.color = 'white';
      document.getElementById('resultDilution').innerText = msg;
    }

    // Adiciona listeners de mudança em todos inputs e selects
    function addChangeListenersDilution() {
      const selectors = [
        '#c1', '#v1', '#c2', '#v2',
        '#c1Unit', '#v1Unit', '#c2Unit', '#v2Unit'
      ];
      document.querySelectorAll(selectors.join(', ')).forEach(element => {
        element.addEventListener('input', calculateMissingValue);
      });
    }

    // Botão "Limpar" do 1º container (Diluição de Soluções)
    function resetForm() {
      document.getElementById('c1').value = '';
      document.getElementById('v1').value = '';
      document.getElementById('c2').value = '';
      document.getElementById('v2').value = '';
      document.getElementById('c1Unit').selectedIndex = 0;
      document.getElementById('v1Unit').selectedIndex = 0;
      document.getElementById('c2Unit').selectedIndex = 0;
      document.getElementById('v2Unit').selectedIndex = 0;

      document.getElementById('resultDilution').innerText = '';
      document.getElementById('resultDilution').style.color = 'white';

      resetInputColorsDilution();
      listenersAdded = false;
      lastMissing = null;
    }

    // Remove cor verde e negrito nos inputs
    function resetInputColorsDilution() {
      ['c1','v1','c2','v2'].forEach(id => {
        const el = document.getElementById(id);
        el.style.color = '#333';
        el.style.fontWeight = 'normal';
      });
    }

    /*
      ==========================================
      FUNÇÕES DA COLUNA "SOLUÇÃO HIDROALCOÓLICA"
      ==========================================
    */
    function calcularValores() {
      resetInputColorsAlcohol();

      const percEtOH = parseFloat(document.getElementById('percEtOH').value);
      const volFinal = parseFloat(document.getElementById('volFinal').value);
      const volEtOH = parseFloat(document.getElementById('volEtOH').value);
      const volAgua = parseFloat(document.getElementById('volAgua').value);

      const valoresFornecidos = [percEtOH, volFinal, volEtOH, volAgua]
        .filter(value => !isNaN(value)).length;

      // Precisamente 2 campos preenchidos
      if (valoresFornecidos !== 2) {
        document.getElementById('resultAlcohol').style.color = 'white';
        document.getElementById('resultAlcohol').innerText =
          'Preencha apenas 2 campos.';
        return;
      }

      let resultadoTexto = '';

      // 1) %EtOH e Vol. Final -> Calcula Vol.EtOH e Vol.Água
      if (!isNaN(percEtOH) && !isNaN(volFinal)) {
        const volEtOHCalculado = (percEtOH / 100) * volFinal;
        const volAguaCalculado = volFinal - volEtOHCalculado;

        document.getElementById('volEtOH').value = volEtOHCalculado.toFixed(2);
        document.getElementById('volEtOH').style.color = 'green';
        document.getElementById('volEtOH').style.fontWeight = 'bold';

        document.getElementById('volAgua').value = volAguaCalculado.toFixed(2);
        document.getElementById('volAgua').style.color = 'green';
        document.getElementById('volAgua').style.fontWeight = 'bold';

        resultadoTexto = 
          `Volume de Álcool = ${volEtOHCalculado.toFixed(2)} mL, ` +
          `Volume de Água = ${volAguaCalculado.toFixed(2)} mL`;
      }
      // 2) %EtOH e Vol. Água -> Calcula Vol.EtOH e Vol.Final
      else if (!isNaN(percEtOH) && !isNaN(volAgua)) {
        const volEtOHCalculado = (percEtOH / (100 - percEtOH)) * volAgua;
        const volFinalCalculado = volEtOHCalculado + volAgua;

        document.getElementById('volEtOH').value = volEtOHCalculado.toFixed(2);
        document.getElementById('volEtOH').style.color = 'green';
        document.getElementById('volEtOH').style.fontWeight = 'bold';

        document.getElementById('volFinal').value = volFinalCalculado.toFixed(2);
        document.getElementById('volFinal').style.color = 'green';
        document.getElementById('volFinal').style.fontWeight = 'bold';

        resultadoTexto = 
          `Volume de Álcool = ${volEtOHCalculado.toFixed(2)} mL, ` +
          `Volume Final = ${volFinalCalculado.toFixed(2)} mL`;
      }
      // 3) Vol. Final e Vol. EtOH -> Calcula %EtOH e Vol. Água
      else if (!isNaN(volFinal) && !isNaN(volEtOH)) {
        const percCalculado = (volEtOH / volFinal) * 100;
        const volAguaCalculado = volFinal - volEtOH;

        document.getElementById('percEtOH').value = percCalculado.toFixed(2);
        document.getElementById('percEtOH').style.color = 'green';
        document.getElementById('percEtOH').style.fontWeight = 'bold';

        document.getElementById('volAgua').value = volAguaCalculado.toFixed(2);
        document.getElementById('volAgua').style.color = 'green';
        document.getElementById('volAgua').style.fontWeight = 'bold';

        resultadoTexto = 
          `% Álcool = ${percCalculado.toFixed(2)}%, ` +
          `Volume de Água = ${volAguaCalculado.toFixed(2)} mL`;
      }
      // 4) Vol. Final e Vol. Água -> Calcula Vol. EtOH e %EtOH
      else if (!isNaN(volFinal) && !isNaN(volAgua)) {
        const volEtOHCalculado = volFinal - volAgua;
        const percCalculado = (volEtOHCalculado / volFinal) * 100;

        document.getElementById('volEtOH').value = volEtOHCalculado.toFixed(2);
        document.getElementById('volEtOH').style.color = 'green';
        document.getElementById('volEtOH').style.fontWeight = 'bold';

        document.getElementById('percEtOH').value = percCalculado.toFixed(2);
        document.getElementById('percEtOH').style.color = 'green';
        document.getElementById('percEtOH').style.fontWeight = 'bold';

        resultadoTexto = 
          `Volume de Álcool = ${volEtOHCalculado.toFixed(2)} mL, ` +
          `% Álcool = ${percCalculado.toFixed(2)}%`;
      }
      // 5) %EtOH e Vol. EtOH -> Calcula Vol. Final e Vol. Água
      else if (!isNaN(percEtOH) && !isNaN(volEtOH)) {
        const volFinalCalculado = volEtOH / (percEtOH / 100);
        const volAguaCalculado = volFinalCalculado - volEtOH;

        document.getElementById('volFinal').value = volFinalCalculado.toFixed(2);
        document.getElementById('volFinal').style.color = 'green';
        document.getElementById('volFinal').style.fontWeight = 'bold';

        document.getElementById('volAgua').value = volAguaCalculado.toFixed(2);
        document.getElementById('volAgua').style.color = 'green';
        document.getElementById('volAgua').style.fontWeight = 'bold';

        resultadoTexto =
          `Volume Final = ${volFinalCalculado.toFixed(2)} mL, ` +
          `Volume de Água = ${volAguaCalculado.toFixed(2)} mL`;
      }
      // 6) Vol. EtOH e Vol. Água -> Calcula Vol. Final e %EtOH
      else if (!isNaN(volEtOH) && !isNaN(volAgua)) {
        const volFinalCalculado = volEtOH + volAgua;
        const percCalculado = (volEtOH / volFinalCalculado) * 100;

        document.getElementById('volFinal').value = volFinalCalculado.toFixed(2);
        document.getElementById('volFinal').style.color = 'green';
        document.getElementById('volFinal').style.fontWeight = 'bold';

        document.getElementById('percEtOH').value = percCalculado.toFixed(2);
        document.getElementById('percEtOH').style.color = 'green';
        document.getElementById('percEtOH').style.fontWeight = 'bold';

        resultadoTexto =
          `Volume Final = ${volFinalCalculado.toFixed(2)} mL, ` +
          `% Álcool = ${percCalculado.toFixed(2)}%`;
      }

      // Exibe o resultado
      document.getElementById('resultAlcohol').style.color = 'white';
      document.getElementById('resultAlcohol').innerText = resultadoTexto;
    }

    function resetInputColorsAlcohol() {
      ['percEtOH','volFinal','volEtOH','volAgua'].forEach(id => {
        const el = document.getElementById(id);
        el.style.color = '#333';
        el.style.fontWeight = 'normal';
      });
    }

    // Botão "Limpar" do 2º container
    function limparCampos() {
      document.getElementById('percEtOH').value = '';
      document.getElementById('volFinal').value = '';
      document.getElementById('volEtOH').value = '';
      document.getElementById('volAgua').value = '';
      document.getElementById('resultAlcohol').innerText = '';
      document.getElementById('resultAlcohol').style.color = 'white';

      resetInputColorsAlcohol();
    }

    /*
      ==========================================
                  FUNÇÕES DE CONVERSÃO
      ==========================================
    */
    function convertToLiters(volume, unit) {
      if (isNaN(volume)) return NaN;
      switch (unit) {
        case 'L':
          return volume;
        case 'mL':
          return volume / 1000;
        case 'µL':
          return volume / 1e6;
        default:
          return NaN;
      }
    }

    function convertFromLiters(volume, unit) {
      if (isNaN(volume)) return NaN;
      switch (unit) {
        case 'L':
          return volume;
        case 'mL':
          return volume * 1000;
        case 'µL':
          return volume * 1e6;
        default:
          return NaN;
      }
    }

    function convertToGL(concentration, unit) {
      if (isNaN(concentration)) return NaN;
      switch (unit) {
        case 'Kg/L':
          return concentration * 1000;
        case 'Kg/mL':
          return concentration * 1e6;
        case 'Kg/µL':
          return concentration * 1e9;
        case 'g/L':
          return concentration;
        case 'g/mL':
          return concentration * 1000;
        case 'g/µL':
          return concentration * 1e6;
        case 'mg/L':
          return concentration / 1000;
        case 'mg/mL':
          return concentration;
        case 'mg/µL':
          return concentration * 1000;
        case 'µg/L':
          return concentration / 1e6;
        case 'µg/mL':
          return concentration / 1000;
        case 'µg/µL':
          return concentration;
        case 'ng/L':
          return concentration / 1e9;
        case 'ng/mL':
          return concentration / 1e6;
        case 'ng/µL':
          return concentration / 1000;
        case 'pg/L':
          return concentration / 1e12;
        case 'pg/mL':
          return concentration / 1e9;
        case 'pg/µL':
          return concentration / 1e6;
        default:
          return NaN;
      }
    }

    function convertFromGL(concentration, unit) {
      if (isNaN(concentration)) return NaN;
      switch (unit) {
        case 'Kg/L':
          return concentration / 1000;
        case 'Kg/mL':
          return concentration / 1e6;
        case 'Kg/µL':
          return concentration / 1e9;
        case 'g/L':
          return concentration;
        case 'g/mL':
          return concentration / 1000;
        case 'g/µL':
          return concentration / 1e6;
        case 'mg/L':
          return concentration * 1000;
        case 'mg/mL':
          return concentration;
        case 'mg/µL':
          return concentration / 1000;
        case 'µg/L':
          return concentration * 1e6;
        case 'µg/mL':
          return concentration * 1000;
        case 'µg/µL':
          return concentration;
        case 'ng/L':
          return concentration * 1e9;
        case 'ng/mL':
          return concentration * 1e6;
        case 'ng/µL':
          return concentration * 1000;
        case 'pg/L':
          return concentration * 1e12;
        case 'pg/mL':
          return concentration * 1e9;
        case 'pg/µL':
          return concentration * 1e6;
        default:
          return NaN;
      }
    }
  </script>
</body>
</html>
