<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corkfit</title>
    <!-- Inclusão do Normalize.css para padronizar estilos entre navegadores -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <style>
        /* Reset box-sizing com prefixo */
        *, *::before, *::after {
            -webkit-box-sizing: border-box; /* Prefixo para WebKit */
            box-sizing: border-box;
        }

        /* Estilos Básicos */
        body { 
    font-family: 'Arial', sans-serif; 
    line-height: 1.6; 
    padding: 20px; 
    /* Remova ou comente a linha abaixo se for substituir pela propriedade background */
    /* background-color: #f4f4f4; */ 
    /* Adicione a propriedade background com o degradê das laterais para o centro */
    background: linear-gradient(to right, #d3d3d3 0%, #f4f4f4 50%, #d3d3d3 100%);
    color: #333; 
    margin: 0;
    padding-bottom: 60px; /* Espaço para o footer */
    position: relative; /* Adicionado para posicionamento absoluto */
}

    /* Propriedades da imagem de fundo */
    /* background-image: url('fundo.PNG'); /* Substitui pelo caminho real */
    /* background-repeat: no-repeat; /* Evita repetição */
    /* background-size: 1500px 770px; /* Define o tamanho fixo */
    /* background-attachment: fixed; /* Imagem fixa no scroll */
    /* background-position: center; /* Centraliza a imagem */


        /* Wrapper para o Logo */
        .logo-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }

        .logo img { 
            max-width: 100px; 
        }

        /* Contêiner principal com fundo azul */
        .container { 
            position: relative; /* Importante para o posicionamento absoluto interno */
            width: 700px; /* Largura fixa para eliminar responsividade */
            margin: auto; 
            padding: 10px; 
            background-color: #006893; /* Azul desejado */
            border: 1px solid #ccc; 
            border-radius: 5px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
            color: #fff; /* Texto em branco para contraste */
            position: relative; /* Para posicionamento absoluto do link */
        }

        .referencia {
        position: absolute;
        bottom: 10px;  /* Distância do fundo */
        left: 10px;    /* Distância da esquerda */
        color: white;  /* Cor do texto */
        font-size: 6px;  /* Tamanho pequeno */
    }

        /* Seletor de Idioma */
.language-selector {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 100;
}

.language-selector a,
.language-selector span {
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    background-color: transparent;
}

.language-selector .current-language {
    color: #ccc;
    cursor: default;
}

.language-selector a:hover {
    color: #89b7d3;
}

/* Tooltips Customizados */
.language-selector .lang-link {
    position: relative; /* Necessário para posicionar o tooltip em relação ao link */
    cursor: pointer; /* Indica que o elemento é interativo */
}

/* Tooltip em ::after */
.language-selector .lang-link::after {
    content: attr(data-tooltip); /* Usa o valor do atributo data-tooltip */
    position: absolute;
    bottom: 145%; /* Posiciona o tooltip acima do link */
    left: 50%;
    transform: translateX(-50%);
    background-color: #89b7d3; /* Cor de fundo do tooltip */
    color: #fff; /* Cor da fonte do tooltip */
    padding: 5px 8px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    white-space: nowrap; /* Impede quebra de linha */
    font-size: 10px; /* Tamanho da fonte */
    opacity: 0; /* Inicialmente invisível */
    pointer-events: none; /* Evita que o tooltip interfira em interações do usuário */
    transition: opacity 0.2s ease-in-out; /* Transição suave para a aparição */
    z-index: 1000; /* Garante que o tooltip fique acima de outros elementos */
}

/* Triângulo apontando para o link */
.language-selector .lang-link::before {
    content: "";
    position: absolute;
    bottom: 115%; /* Alinha com o tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #89b7d3 transparent transparent transparent; /* Triângulo apontando para baixo */
    opacity: 0; /* Inicialmente invisível */
    transition: opacity 0.2s ease-in-out; /* Transição suave */
    pointer-events: none;
    z-index: 1000;
}

/* Exibir o tooltip quando o usuário passar o mouse, somente se o link estiver desativado */
.language-selector a.disabled:hover::after,
.language-selector a.disabled:hover::before {
    opacity: 1;
}

/* Estilo adicional para links ativos (sem tooltips) */
.language-selector a:not(.disabled) {
    cursor: pointer;
}

.language-selector a:not(.disabled)::after,
.language-selector a:not(.disabled)::before {
    display: none; /* Remove tooltips para links ativos */
}


        .title { 
            margin-bottom: 10px; 
            margin-top: 2px;
            font-size: 30px; 
            font-weight: bold; 
            color: #fff; /* Branco para contraste */
            text-align: center; 
        }

        .subtitle { 
            font-size: 14px; 
            font-weight: normal; 
            margin-bottom: 0px; 
            text-align: left; 
            color: #fff; /* Branco para contraste */
        }

        /* Estilo para o subtítulo do resultado */
        .subtitle.resultado-title {
            color: #dcdcdc; 
            font-size: 16px; 
        }

        .section {
            margin-bottom: 15px; /* Espaçamento entre seções */
        }

        /* Estilos para todos os inputs e selects */
        input, select {
            padding: 9.5px;
            width: 75%; 
            margin-top: 5px;
            margin-bottom: 5px;
            display: block;
            -webkit-appearance: none; /* Remove estilos padrões em Safari */
            appearance: none;
            background-color: #fff; /* Fundo branco para inputs */
            color: #333; /* Texto escuro para melhor legibilidade */
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 10px; /* Ajustar tamanho da fonte conforme necessário */
        }

        /* Estilos para selects desabilitados */
        select:disabled {
            background-color: #e0e0e0; 
            color: #666;            
            cursor: not-allowed;       
            border-color: #b0b0b0;     
            opacity: 0.9;              
            -webkit-appearance: none;  
            appearance: none;
            width: 75% !important;     
            text-decoration: line-through; 
        }

        /* Media query específica para WebKit (Safari) */
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            select:disabled {
                width: 75% !important; /* Reforça a largura no Safari */
            }
        }

        /* Remover aparência personalizada para selects desabilitados no Safari */
        select:disabled::-webkit-inner-spin-button,
        select:disabled::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Estilo específico para os placeholders */
        #B1::placeholder, #D1::placeholder {
            color: #b84d5b;
        }
        /* Prefixos para navegadores específicos */
        #B1::-webkit-input-placeholder, #D1::-webkit-input-placeholder { 
            color: #b84d5b;
        }
        #B1:-moz-placeholder, #D1:-moz-placeholder { 
            color: #b84d5b;
        }
        #B1::-moz-placeholder, #D1::-moz-placeholder { 
            color: #b84d5b;
        }
        #B1:-ms-input-placeholder, #D1:-ms-input-placeholder { 
            color: #b84d5b;
        }

        /* **Nova Regra CSS para os placeholders de E1 e E2** */
        #E1::placeholder, #E2::placeholder {
            color: #b84d5b; 
            opacity: 1; 
        }
        #E1::-webkit-input-placeholder, #E2::-webkit-input-placeholder {
            color: #b84d5b; 
            opacity: 1;
        }
        #E1:-moz-placeholder, #E2:-moz-placeholder {
            color: #b84d5b; 
            opacity: 1;
        }
        #E1::-moz-placeholder, #E2::-moz-placeholder {
            color: #b84d5b; 
            opacity: 1;
        }
        #E1:-ms-input-placeholder, #E2:-ms-input-placeholder {
            color: #b84d5b; 
            opacity: 1;
        }

        /* Flex Container para as Duas Colunas */
        .flex-container {
            display: -webkit-flex; 
            display: flex;
            justify-content: center; 
            align-items: flex-start;
            gap: 40px; 
            flex-wrap: nowrap; 
            margin-bottom: 20px;
        }

        /* Coluna Esquerda */
        .left-column {
            display: flex;
            flex-direction: column;
            gap: 10px; 
            width: 280px; 
        }

        /* Wrapper Interno da Coluna Esquerda */
        .left-content {
            padding-left: 40px; 
        }

        /* Coluna Direita */
        .right-column {
            display: flex;
            flex-direction: column;
            gap: 20px; 
            width: 280px; 
        }

        /* Estilo para os inputs de Perfil Interno do Gargalo */
        .perfil-inputs input {
            width: 65%; 
        }

        /* Wrapper para cada input na seção Perfil Interno do Gargalo */
        .input-wrapper {
            position: relative;
            margin-bottom: 5px;
        }

        /* Estilo para os contêineres que mostrarão o valor + placeholder na impressão */
        .input-wrapper[data-print-text]::after {
            content: attr(data-print-text);
            font-size: 12px;
            color: #000;
            display: block;
            margin-top: 2px;
        }

        /* Estilo para o contêiner do resultado */
        .resultado-frame {
            width: 520px; 
            padding: 15px; 
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            border-radius: 10px;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            box-sizing: border-box; 
            height: auto; 
            margin: 10px auto 0; 
            position: relative; /* Adicionado para posicionamento do ícone */
        }

        /* Alterar a cor da borda inferior de E1 e E2 */
        #E1, #E2 {
            border-bottom: 1px solid #006893; 
            border-top: none;
            border-left: none;
            border-right: none;
            outline: none; 
        }

        /* Texto informativo dentro do resultado-frame */
        .texto-informativo {
            font-size: 7px;
            text-align: left; 
            color: #9c9a9a;
            margin-top: 0px; 
        }

        /* Estilos para os inputs dentro do quadro do resultado */
        .resultado-frame input[type="text"] {
            width: 240px; 
            padding: 5px; 
            margin-bottom: 5px; 
            box-sizing: border-box; 
            text-align: center; 
            background-color: #fff; 
            border: 1px solid #fff;
            border-radius: 0px;
        }

        /* Estilo para o sinal de multiplicação */
        .multiplication-sign {
            margin: 10px 0; 
            color: #006893; 
            font-size: 18px;
        }

        /* Wrapper para centralizar os inputs e o 'x' */
        .resultado-content {
            display: -webkit-flex; 
            display: flex;
            flex-direction: row; 
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            width: 100%;
            gap: 10px;
            position: relative; 
        }

        /* Alinhamento específico para os inputs de resultado */
        #E1 {
            text-align: right;
            flex: 1;
        }

        #E2 {
            text-align: left;
            flex: 1;
        }

        /* Estilos para os textos pequenos abaixo de E1 e E2 */
        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .small-label {
            font-size: 8px; 
            color: #006893; 
            margin-top: 2px; 
            text-align: center;
            width: 100%;
        }

        .input-group.E1-group .small-label {
            text-align: right;
            width: 100%;
            padding-right: 20px; 
        }

        .input-group.E2-group .small-label {
            text-align: left;
            width: 100%;
            padding-left: 20px; 
        }

        #resetButton {
            background-color: #009fc6; 
            color: white; 
            padding: 10px 20px; 
            font-size: 10px; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: background-color 0.3s; 
            display: block;
        }

        #resetButton:hover {
            background-color: #89b7d3; 
        }

        /* Botão de Impressão */
        #btnImprimir {
            background-color: #4CAF50; /* Cor de fundo do botão */
            color: white; /* Cor do texto */
            padding: 10px 20px; 
            font-size: 10px; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: background-color 0.3s; 
            display: block;
        }

        #btnImprimir:hover {
            background-color: #45a049; /* Cor ao passar o mouse */
        }

        /* Estilos para inputs desabilitados */
        input:disabled {
            background-color: #d3d3d3; 
            color: #666; 
            cursor: not-allowed; 
            text-decoration: line-through; 
        }

        /* Estilos para o Footer */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #006893;
            color: #fff;
            text-align: center;
            font-size: 10px;
            padding: 10px;
            z-index: 9999;
            border: 1px solid #fff;
        }

        /* Estilos para o Modal Personalizado */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%;
            overflow: auto; 
            background-color: rgba(0,0,0,0.5); 
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px; 
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            position: relative;
            text-align: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
            font-size: 12px; 
            color: #333;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 15px;
            cursor: pointer;
        }

        .close-button:hover,
        .close-button:focus {
            color: #000;
            text-decoration: none;
        }

        /* Novo Contêiner para Reset Button, Impressão e Feedback Link Centralizados */
        .button-container {
            display: flex;
            justify-content: center; 
            gap: 20px; /* Reduzi o gap para acomodar mais um botão */
            margin-top: 20px; 
            /* margin-left: 210px; Removi o margin-left para centralizar os botões */
        }

        .feedback-link {
            position: absolute;   
            bottom: 30px;         /* Ajusta conforme precisares (sobe/desce) */
            left: 10px;          /* Ajusta para pôr mais à direita/esquerda */
            font-size: 8px;       /* Exemplo de tamanho de letra */
            color: #fff;          /* Caso queiras o texto em branco */
            margin: 0;            /* Remove margens automáticas */
        }

        .feedback-link a {
            color: #fff; 
            text-decoration: underline; 
            font-size: 8px; 
            transition: color 0.3s;
        }

        .feedback-link a:hover {
            color: #89b7d3; 
        }

        /* **Estilos para placeholders de E1 e E2** (override para cinza mais claro) */
        #E1::placeholder, #E2::placeholder {
            color: #d1d0d0; 
            opacity: 1; 
        }
        #E1::-webkit-input-placeholder, #E2::-webkit-input-placeholder {
            color: #d1d0d0; 
            opacity: 1;
        }
        #E1:-moz-placeholder, #E2:-moz-placeholder {
            color: #d1d0d0; 
            opacity: 1;
        }
        #E1::-moz-placeholder, #E2::-moz-placeholder {
            color: #d1d0d0; 
            opacity: 1;
        }
        #E1:-ms-input-placeholder, #E2:-ms-input-placeholder {
            color: #d1d0d0; 
            opacity: 1;
        }

        /* Ícone “i” no canto superior direito do resultado-frame */
        .infoIcon {
            position: absolute;
            top: 10px;   /* Ajustado para dentro do contêiner */
            right: 10px; /* Ajustado para dentro do contêiner */
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #006893;
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            font-weight: bold;
            margin-left: 10px; 
            z-index: 1001; /* Garantir que fique acima do bubble */
        }

        /* Balão, inicialmente oculto */
        #bubble {
            display: none;
            position: absolute;
            width: 430px;
            background-color: #fff;
            border: 1px solid #006893;
            padding: 10px;
            z-index: 1002; /* Superior ao ícone */
            border-radius: 10px; 
            top: 40px; /* Posicionado abaixo do ícone */
            right: 10px; /* Alinhado com o ícone */
            box-shadow: 0 4px 8px rgba(94, 83, 83, 0.1);
        }

        /* Animação de piscar (normal) */
        @keyframes piscar {
          0%   { opacity: 1; }
         50%  { opacity: 0; }
        100% { opacity: 1; }
        }
  
        .blink {
         animation: piscar 1s infinite;
        }

        #bubble h4 {
            margin: 0 0 8px 0;
            font-size: 12px;
        }

        /* Novo Quadro de Interpretação para Impressão */
        #interpretationBox {
            display: none; /* Escondido na tela */
            width: 520px;
            padding: 15px;
            border: 1px solid #000;
            background-color: #fff;
            border-radius: 5px;
            margin: 20px auto 0;
            box-sizing: border-box;
        }

        /* Estilos de Impressão */
        @media print {
            /* Ocultar o botão de impressão durante a impressão */
            #btnImprimir {
                display: none;
            }

            /* Ocultar o botão de reset durante a impressão */
            #resetButton {
                display: none;
            }

            /* Ocultar o link de feedback durante a impressão */
            .feedback-link {
                display: none;
            }

            /* Ocultar o footer durante a impressão */
            footer {
                display: none;
            }

            /* Garantir que o logotipo esteja centralizado */
            .logo-wrapper {
                justify-content: center;
                margin-bottom: 2px;
            }

            /* Ajustar o tamanho do logotipo para impressão */
            .logo img {
                max-width: 80px; /* Ajuste conforme necessário */
            }

            /* Ajustar a largura do contêiner principal para 100% na impressão */
            .container { 
                width: 100%; 
                background-color: #fff; /* Fundo branco para impressão */
                color: #000; /* Texto preto para melhor legibilidade */
                box-shadow: none; /* Remover sombra */
                border: none; /* Remover borda */
            }

            /* Ajustar títulos e subtítulos para impressão */
            .title { 
                margin-top: 0px;
                margin-bottom: 5px;
                font-size: 20px; 
                color: #000;
            }

            .subtitle { 
                color: #000; 
                font-size: 10px; 
                text-align: left;
                font-weight: bold;
            }

            .subtitle.resultado-title {
                color: #000; 
                font-size: 16px;
            }

            /* Estilizar o título "Preconização Calibre (L x D)" para impressão */
            .resultado-frame h2.subtitle.resultado-title {
            font-size: 14px !important; /* Defina o tamanho desejado aqui */
            color: #006893 !important;      /* Opcional: muda a cor para preto na impressão */
            text-align: center !important; /* Garante alinhamento centralizado na impressão */
            font-weight: normal !important;  /* Exemplo: tornar o texto em negrito na impressão */
            }

            /* Organizar os grupos de inputs/selects em ordem horizontal */
            .flex-container {
                display: flex;
                 justify-content: center; 
                 align-items: flex-start;
                 gap: 10px; 
                 flex-wrap: nowrap; 
                 margin-bottom: 0px; /* Espaçamento entre flex-container e resultado-frame */
                }

            .left-column, .right-column {
                width: 45%; /* Ajuste conforme necessário */
                padding: 0;
                /* Remover float: left; */
                float: none;
                display: flex;
                flex-direction: column;
            }

            /* Distribuir o conteúdo da coluna direita verticalmente */
            .right-column {
                justify-content: space-between; /* Distribui o conteúdo uniformemente */
            }

            /* Ajustar os inputs e selects para 90% de largura na impressão */
            input, select {
                width: 90%; 
                font-size: 12px; /* Aumentar o tamanho da fonte para a impressão */
            }

            /* Estilizar o quadro de resultado para impressão */
            .resultado-frame {
                width: 100%;
                padding: 10px; 
                border: 1px solid #000;
                box-shadow: none;
                background-color: #fff;
                border-radius: 5px; 
                margin: 10px 0; 
            }
            

            /* Controlar o tamanho da letra dos placeholders */
            .input-wrapper[data-placeholder]::before {
                content: attr(data-placeholder) ": ";
                font-size: 10px; /* Defina o tamanho desejado aqui */
                font-weight: normal; /* Texto normal para placeholders */
                color: #333;
            }

            .input-wrapper[data-value]::after {
                content: attr(data-value);
                font-size: 10px; /* Defina o tamanho desejado aqui */
                font-weight: bold; /* Texto em negrito para valores */
                color: #333;
            }

            /* Ajustar o texto informativo */
            .texto-informativo {
                font-size: 6px;
                color: #000;
            }

            /* Ajustar o ícone “i” e balão para impressão */
            .infoIcon, #bubble {
                display: none;
            }

            /* Ajustes gerais para a página impressa */
            body {
                margin: 5mm;
                font-family: Arial, sans-serif;
                color: #000;
                background: none;
            }

            /* Exibir placeholders e valores ao lado dos valores na impressão */
            .perfil-inputs input {
                display: none; /* Esconder inputs */
            }

            .input-wrapper[data-placeholder],
            .input-wrapper[data-value] {
                display: block;
                margin-bottom: 5px;
            }

            .input-wrapper:not([data-placeholder]) {
                display: none;
            }

            /* Garantir que as colunas fiquem lado a lado */
            .left-column, .right-column {
                /* Removido float: left; */
            }

            .resultado-frame {
                clear: both;
            }

            /* Exibir o Quadro de Interpretação */
            #interpretationBox {
                display: block;
                text-align: center; /* Adicionado para centralizar o texto */
            }

            /* --- Novas Regras para Impressão --- */

            /* Ocultar inputs e selects na coluna esquerda */
            .left-column input,
            .left-column select {
                display: none;
            }

            /* Exibir o texto correspondente aos inputs e selects da coluna esquerda */
            .left-column .section::after {
                content: attr(data-print-text);
                display: block;
                margin-bottom: 10px;
                font-size: 10px;
                color: #000;
            }
            
             /* Controlar o tamanho da fonte do título "Interpretação dos Resultados" */
            #interpretationBox h2 {
            font-size: 12px; /* Defina o tamanho desejado aqui */
             /* Você pode adicionar outras propriedades conforme necessário */
            font-weight: bold; /* Exemplo: tornar o texto em negrito */
            color: #000; /* Cor do texto */
            margin-bottom: 0px; /* Espaçamento abaixo do título */
            }

            /* Estilos para o printNote */
            #printNote {
            display: block !important; /* Força a exibição durante a impressão */
            text-align: left;
            margin-left: 60px;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 8px; /* Tamanho de fonte consistente */
            color: #000; /* Texto preto para impressão */
        }

         /* Adiciona o prefixo "corktir®: " antes do conteúdo de printNote */
    #printNote::before {
        content: "corkfit®:  "; /* "corkfit®: " */
        /* Opcional: ajustar estilos específicos para o prefixo */
        /* Por exemplo, se desejar que o prefixo tenha o mesmo estilo:
           Ele herdará as propriedades do #printNote, mas você pode personalizar
           individualmente se necessário.
        */
    }

            /* Garantir que o printNote apareça no final da página */
         .container {
            position: relative;
         }
}

    </style>
</head>
<body>

    <!-- Wrapper do Logo fora do contêiner principal -->
    <div class="logo-wrapper">
        <div class="logo">
            <img src="exi_logo.png" alt="Corkfit Logo">
        </div>
    </div>

    <!-- Contêiner principal com fundo azul -->
    <div class="container">

        <!-- Seletor de Idioma no Topo Superior Direito -->
<div class="language-selector">
    <span class="current-language">pt</span>
    
    <!-- Link para Espanhol (desativado) -->
    <!-- 
        Quando os links de idiomas estiverem prontos:
        - Remova a classe 'disabled' 
        - Atualize o atributo 'href' para o link real, por exemplo, 'es/index.html'
        - Remova o atributo 'data-tooltip' se não for mais necessário
    -->
    <a href="#" class="lang-link disabled" data-tooltip="Brevemente">es</a>
    
    <!-- Link para Inglês (desativado) -->
    <!-- 
        Quando os links de idiomas estiverem prontos:
        - Remova a classe 'disabled' 
        - Atualize o atributo 'href' para o link real, por exemplo, 'en/index.html'
        - Remova o atributo 'data-tooltip' se não for mais necessário
    -->
    <a href="#" class="lang-link disabled" data-tooltip="Coming Soon">en</a>
</div>

        

        <h1 class="title">corkfit<span style="font-size: 50%; vertical-align: super;">&reg;</span></h1>

        <!-- Flex Container para as Duas Colunas -->
        <div class="flex-container">
            <!-- Coluna Esquerda -->
            <div class="left-column">
                <div class="left-content">
                    <!-- Seção Tipo de Rolha -->
                    <div class="section tipo-rolha">
                        <h2 class="subtitle">Tipo de Rolha</h2>
                        <select name="tipoRolha" id="tipoRolha">
                            <option value="" disabled selected>Selecione (obrigatório)</option>
                            <option value="A1" class="A1">Cilíndrica Natural Vinho</option>
                            <option value="A2" class="A2">Cilíndrica Técnica Vinho</option>
                            <option value="A3" class="A3">Cilíndrica Champanhe</option>
                            <option value="A4" class="A4">Bartop Natural</option>
                            <option value="A5" class="A5">Bartop Técnica</option>
                        </select>
                    </div>
                    
                    <!-- Seção Tipo de Vinho -->
                    <div class="section tipo-vinho">
                        <h2 class="subtitle">Tipo de Vinho</h2>
                        <select name="tipoVinho" id="tipoVinho" disabled>
                            <option value="" disabled selected>Selecione (obrigatório)</option>
                            <option value="C1">Tranquilo, Consumo rápido</option>
                            <option value="C2">Tranquilo, Reserva/Estágio</option>
                            <option value="C3">Frisante (&gt;1 &lt; 2,5 bar)</option>
                            <option value="C4">Espumante (&gt; 3 bar)</option>
                        </select>
                    </div>
                    
                    <!-- Seção Nível de Enchimento -->
                    <div class="section nivel-enchimento">
                        <h2 class="subtitle">Nível de Enchimento</h2>
                        <input type="text" id="B1" name="nivelEnchimento" placeholder="valor em mm - obrigatório" disabled>
                    </div>
                </div>
            </div>
            
            <!-- Coluna Direita -->
            <div class="right-column">
                <!-- Seção Perfil Interno do Gargalo -->
                <div class="section perfil-gargalo">
                    <h2 class="subtitle">Perfil Interno do Gargalo</h2>
                    <div class="perfil-inputs">
                        <div class="input-wrapper">
                            <input type="text" id="D1" name="perfilInicial" placeholder="a 3mm ou teórico - obrigatório" disabled>
                        </div>
                        <div class="input-wrapper">
                            <input type="text" id="D2" name="perfil38mm" placeholder="a 38mm - se disponível" disabled>
                        </div>
                        <div class="input-wrapper">
                            <input type="text" id="D3" name="perfil45mm" placeholder="a 45mm - se disponível" disabled>
                        </div>
                        <div class="input-wrapper">
                            <input type="text" id="D4" name="perfil49mm" placeholder="a 49mm - se disponível" disabled>
                        </div>
                        <div class="input-wrapper">
                            <input type="text" id="D5" name="perfil54mm" placeholder="a 54mm - se disponível" disabled>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção Resultado -->
        <div class="resultado-frame">
            <h2 class="subtitle resultado-title" style="text-align: center; font-size: 1.2em; font-weight: normal; color: #006893;">
                Preconização Calibre (L x D)
            </h2>
            <div class="resultado-content">
                <!-- Grupo para E1 -->
                <div class="input-group E1-group">
                    <input type="text" id="E1" name="resultado-L" placeholder="Resultado Preconização L (comprimento)" style="font-size: 0.6em;" readonly>
                    <span class="small-label">L1 - L2 - L3 - L4</span>
                </div>
                <span class="multiplication-sign">x</span>
                <!-- Grupo para E2 -->
                <div class="input-group E2-group">
                    <input type="text" id="E2" name="resultado-D" placeholder="Resultado Preconização D (diâmetro)" style="font-size: 0.6em;" readonly>
                    <span class="small-label">DL1 - DL2 - DL3 - DL4</span>
                </div>
            </div>
            
            <!-- Texto Personalizável Dentro da Seção Resultado -->
            <div id="textoPersonalizavel" class="texto-informativo">
                <p>LH - Low Headspace - NR | BOSC - Bottle Out Specifications-Conicidade - NR | NR - Não Recomendado | NA - Valor não disponível</p>
                <p>L(1,2,3,4) = Comprimentos(1,2,3,4) | DL(1,2,3,4) = Diâmetro ajustado aos Comprimentos L(1,2,3,4)</p>
            </div>

            <!-- Ícone “i” para o balão dinâmico -->
            <span 
                class="infoIcon"
                id="iconeI"
                onmouseover="mostrarBubble()" 
                onmouseout="esconderBubble()"
            >i</span>
        </div>

        <!-- Novo Quadro de Interpretação para Impressão -->
        <div id="interpretationBox">
            <h2>Interpretação dos Resultados</h2>
            <div id="interpretationContentBox"></div>
        </div>

        <!-- Novo Contêiner para Reset Button, Impressão e Feedback Link Centralizados -->
        <div class="button-container">
            <button type="button" id="resetButton">Limpar</button>
            <!-- Botão de Impressão Adicionado -->
            <button type="button" id="btnImprimir">Imprimir</button>
            </div>
            <!-- Link de feedback FORA do container dos botões -->
<div class="feedback-link">
    <a 
  style="cursor: pointer; text-decoration: underline; color: #fff;" 
  onclick="window.location='mailto:exi@exi.pt?subject=Consulta Preconização Calibre&body=%0A%0A---%0APor%20favor%20escreva%20acima%20desta%20linha%20---%0A%0APor%20favor%20envie%20o%20m%C3%A1ximo%20de%20informa%C3%A7%C3%A3o%20poss%C3%ADvel%20-%20Perfil%20do%20gargalo,%20ficha%20t%C3%A9cnica da garrafa,%20tipo%20de%20rolha%20pretendido,%20tipo%20de%20vinho,%20n%C3%ADvel%20de%20enchimento,%20etc....'; return false;"
>
  Quer a nossa opinião técnica? Clique aqui.
</a>
</div>

<!-- Texto de referência abaixo do link de feedback -->
<div class="referencia">
    referência normativa EN12726
</div>

        </div>
    </div>

    <!-- Rodapé (Footer) -->
    <footer>
        Copyright © eXi: 2024 All rights reserved
    </footer>


    <!-- Modal Personalizado -->
    <div id="customModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <p id="modalMessage">Mensagem do modal</p>
        </div>
    </div>
    
    <!-- Modal Personalizado -->
<div id="printModal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>Identificação do Perfil</h2>
        <input type="text" id="printInput" placeholder="Identificação do Perfil (opcional)" />
        <button id="confirmPrint">Confirmar e Imprimir</button>
    </div>
</div>

    <!-- Balão solto no body, para evitar overflow hidden -->
    <div id="bubble">
        <h4>Interpretação dos Resultados</h4>
        <div id="interpretationContent"></div>
    </div>

    <!-- Contêiner para a mensagem personalizada na impressão -->
    <div id="printNote" style="display: none;"></div>


    <!-- JavaScript Integrado -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Seleção dos elementos
            const tipoRolha = document.getElementById('tipoRolha');
            const tipoVinho = document.getElementById('tipoVinho');
            const D3Input = document.getElementById('D3');
            const D4Input = document.getElementById('D4');
            const D5Input = document.getElementById('D5');
            const B1Input = document.getElementById('B1');
            const D1Input = document.getElementById('D1');
            const D2Input = document.getElementById('D2');
            const E1Input = document.getElementById('E1');
            const E2Input = document.getElementById('E2');
            const resetButton = document.getElementById('resetButton');
            const btnImprimir = document.getElementById('btnImprimir'); // Seleção do botão de impressão

            // Seleção dos elementos do modal
            const modal = document.getElementById('customModal');
            const modalMessage = document.getElementById('modalMessage');
            const closeButton = document.querySelector('.close-button');

            // Seleção dos elementos do printModal
            const printModal = document.getElementById('printModal');
            const printInput = document.getElementById('printInput');
            const confirmPrint = document.getElementById('confirmPrint');

            // Função para exibir o modal com a mensagem
            function showAlert(message) {
                modalMessage.textContent = message;
                modal.style.display = 'block';
            }

            // Fechar o modal ao clicar no botão de fechar
            closeButton.onclick = function() {
                modal.style.display = 'none';
            }

            // Fechar o modal ao clicar fora do conteúdo do modal
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
                if (event.target == printModal) {
                    printModal.style.display = 'none';
                }
            }

            // Função para validar intervalo
            function validateRange(inputElement, min, max, fieldName) {
                let value = inputElement.value.replace(',', '.');
                const numericValue = parseFloat(value);
                if (isNaN(numericValue)) {
                    showAlert(`${fieldName} deve ser um número.`);
                    inputElement.value = '';
                    setTimeout(() => inputElement.focus(), 0);
                    return false;
                }
                if (numericValue < min || numericValue > max) {
                    showAlert(`${fieldName} deve estar entre ${min} e ${max} (mm).`);
                    inputElement.value = '';
                    setTimeout(() => inputElement.focus(), 0);
                    return false;
                }
                return true;
            }

            // Lista de inputs para validação
            const validationRules = [
                {element: B1Input, min: 20, max: 100, name: 'Nível de Enchimento'},
                {element: D1Input, min: 12, max: 40, name: 'perfil Inicial'},
                {element: D2Input, min: 12, max: 40, name: 'perfil a esta profundidade'},
                {element: D3Input, min: 12, max: 40, name: 'perfil a 45mm'},
                {element: D4Input, min: 12, max: 40, name: 'perfil a 49mm'},
                {element: D5Input, min: 12, max: 40, name: 'perfil a 54mm'},
            ];

            // Adicionar listeners de 'blur' para cada input
            validationRules.forEach(rule => {
                rule.element.addEventListener('blur', function() {
                    if (rule.element.value) {
                        validateRange(rule.element, rule.min, rule.max, rule.name);
                    }
                });
            });

            // Função para verificar se o valor é válido (números, ponto e vírgula)
            function verificarNumero(event) {
                const input = event.target;
                const regex = /^[0-9.,]+$/;
                if (input.value && !regex.test(input.value)) {
                    showAlert('Por favor, insira apenas números, inteiros ou decimais.');
                    input.value = ''; 
                }
            }


            // Adicionar listeners de 'input' e 'change' para B1, D1 a D5 (validação de número)
            [B1Input, D1Input, D2Input, D3Input, D4Input, D5Input].forEach(input => {
                input.addEventListener('input', verificarNumero);
                input.addEventListener('change', verificarNumero);
            });

            // Função para resetar todos os campos
            function resetAll() {
                tipoRolha.value = '';
                tipoVinho.value = '';

                tipoVinho.disabled = true;
                B1Input.disabled = true;
                D1Input.disabled = true;
                D2Input.disabled = true;
                D3Input.disabled = true;
                D4Input.disabled = true;
                D5Input.disabled = true;

                B1Input.value = '';
                D1Input.value = '';
                D2Input.value = '';
                D3Input.value = '';
                D4Input.value = '';
                D5Input.value = '';
                E1Input.value = '';
                E2Input.value = '';

                Array.from(tipoVinho.options).forEach(option => option.disabled = false);

                // Reseta os placeholders padrão
                document.querySelectorAll('.perfil-inputs .input-wrapper').forEach(wrapper => {
                    const input = wrapper.querySelector('input');
                    if (input.id === 'D2') {
                        input.placeholder = 'a 38mm - se disponível';
                    }
                });

                // REMOVE O PISCAR
                document.getElementById("iconeI").classList.remove("blink");

                // Esconder o balão se estiver visível
                esconderBubble();

                // Remover data-placeholder e data-value das seções da coluna direita
                const perfilWrappers = document.querySelectorAll('.perfil-inputs .input-wrapper');
                perfilWrappers.forEach(wrapper => {
                    wrapper.removeAttribute('data-placeholder');
                    wrapper.removeAttribute('data-value');
                });

                // Remover data-print-text das seções da coluna esquerda
                const leftSections = document.querySelectorAll('.left-column .section');
                leftSections.forEach(section => {
                    section.removeAttribute('data-print-text');
                });
            }

            // Função para atualizar opções de "tipo de vinho"
            function updateTipoVinhoOptions() {
                Array.from(tipoVinho.options).forEach(option => option.disabled = false);

                if (tipoRolha.value === 'A1' || tipoRolha.value === 'A2') {
                    const optionC4 = tipoVinho.querySelector('option[value="C4"]');
                    if (optionC4) optionC4.disabled = true;
                }

                if (tipoRolha.value === 'A3') {
                    const optionC1 = tipoVinho.querySelector('option[value="C1"]');
                    const optionC2 = tipoVinho.querySelector('option[value="C2"]');
                    if (optionC1) optionC1.disabled = true;
                    if (optionC2) optionC2.disabled = true;

                    D3Input.disabled = true;
                    D4Input.disabled = true;
                    D5Input.disabled = true;

                    document.getElementById('D2').placeholder = 'a 42/48mm - se disponível';
                }

                if (tipoRolha.value === 'A3' && (tipoVinho.value === 'C3' || tipoVinho.value === 'C4')) {
                    document.getElementById('D2').placeholder =
                        (tipoVinho.value === 'C3') ? 'a 42mm - se disponível' : 'a 48mm - se disponível';
                }

                if (tipoRolha.value === 'A4' || tipoRolha.value === 'A5') {
                    const optionC3 = tipoVinho.querySelector('option[value="C3"]');
                    const optionC4_alt = tipoVinho.querySelector('option[value="C4"]');
                    if (optionC3) optionC3.disabled = true;
                    if (optionC4_alt) optionC4_alt.disabled = true;

                    D3Input.disabled = true;
                    D4Input.disabled = true;
                    D5Input.disabled = true;

                    document.getElementById('D2').placeholder = '(mm) no L exposto (m.u. 20)';
                }
            }

            // Função unificada para calcular L
            function calcularLUnificado() {
                let B1 = B1Input.value.replace(',', '.');
                let D1 = D1Input.value.replace(',', '.');
                B1 = parseFloat(B1);
                D1 = parseFloat(D1);
                const tipoRolhaValor = tipoRolha.value;
                const tipoVinhoValor = tipoVinho.value;
                let L = '';

                if (isNaN(B1) || isNaN(D1)) {
                    E1Input.value = '';
                    return;
                }

                if (D1 < 10) {
                    E1Input.value = '';
                    return;
                }

                // A1/A2 + C1
                if ((tipoRolhaValor === 'A1' || tipoRolhaValor === 'A2') && tipoVinhoValor === 'C1') {
                    let R4 = (B1 - 38) > 13 ? 38 : "38LH";
                    let R5 = (B1 - 45) > 13 ? 45 : "45LH";
                    let R6 = (B1 - 49) > 13 ? 49 : "49LH";
                    let R7 = (B1 - 54) > 13 ? 54 : "54LH";

                    if ((R4 === 38 || R4 === "38LH")
                        && !isNaN(parseFloat(D2Input.value.replace(',', '.')))
                        && (parseFloat(D2Input.value.replace(',', '.')) - D1) > 2.0) {
                        R4 = (R4 === 38) ? "38BOSC" : "38LHBOSC";
                    }
                    if ((R5 === 45 || R5 === "45LH")
                        && !isNaN(parseFloat(D3Input.value.replace(',', '.')))
                        && (parseFloat(D3Input.value.replace(',', '.')) - D1) > 2.0) {
                        R5 = (R5 === 45) ? "45BOSC" : "45LHBOSC";
                    }
                    if ((R6 === 49 || R6 === "49LH")
                        && !isNaN(parseFloat(D4Input.value.replace(',', '.')))
                        && (parseFloat(D4Input.value.replace(',', '.')) - D1) > 2.0) {
                        R6 = (R6 === 49) ? "49BOSC" : "49LHBOSC";
                    }
                    if ((R7 === 54 || R7 === "54LH")
                        && !isNaN(parseFloat(D5Input.value.replace(',', '.')))
                        && (parseFloat(D5Input.value.replace(',', '.')) - D1) > 2.0) {
                        R7 = (R7 === 54) ? "54BOSC" : "54LHBOSC";
                    }

                    L = `${R4}-${R5}-${R6}-${R7}`;
                }
                // A1/A2 + C2/C3
                else if ((tipoRolhaValor === 'A1' || tipoRolhaValor === 'A2')
                      && (tipoVinhoValor === 'C2' || tipoVinhoValor === 'C3')) {
                    let threshold = 17;
                    let R4 = (B1 - 38) > threshold ? 38 : "38LH";
                    let R5 = (B1 - 45) > threshold ? 45 : "45LH";
                    let R6 = (B1 - 49) > threshold ? 49 : "49LH";
                    let R7 = (B1 - 54) > threshold ? 54 : "54LH";

                    const deltaThreshold = 1.8;
                    if ((R4 === 38 || R4 === "38LH")
                        && !isNaN(parseFloat(D2Input.value.replace(',', '.')))
                        && (parseFloat(D2Input.value.replace(',', '.')) - D1) > deltaThreshold) {
                        R4 = (R4 === 38) ? "38BOSC" : "38LHBOSC";
                    }
                    if ((R5 === 45 || R5 === "45LH")
                        && !isNaN(parseFloat(D3Input.value.replace(',', '.')))
                        && (parseFloat(D3Input.value.replace(',', '.')) - D1) > deltaThreshold) {
                        R5 = (R5 === 45) ? "45BOSC" : "45LHBOSC";
                    }
                    if ((R6 === 49 || R6 === "49LH")
                        && !isNaN(parseFloat(D4Input.value.replace(',', '.')))
                        && (parseFloat(D4Input.value.replace(',', '.')) - D1) > deltaThreshold) {
                        R6 = (R6 === 49) ? "49BOSC" : "49LHBOSC";
                    }
                    if ((R7 === 54 || R7 === "54LH")
                        && !isNaN(parseFloat(D5Input.value.replace(',', '.')))
                        && (parseFloat(D5Input.value.replace(',', '.')) - D1) > deltaThreshold) {
                        R7 = (R7 === 54) ? "54BOSC" : "54LHBOSC";
                    }

                    L = `${R4}-${R5}-${R6}-${R7}`;
                }
                // A4 / A5
                else if (tipoRolhaValor === 'A4' || tipoRolhaValor === 'A5') {
                    L = 'L total = (L exposto pretendido + cápsula)';
                }
                // A3 + C3
                else if (tipoRolhaValor === 'A3' && tipoVinhoValor === 'C3') {
                    L = 42 + ' (L tradicional)';
                }
                // A3 + C4
                else if (tipoRolhaValor === 'A3' && tipoVinhoValor === 'C4') {
                    L = 48 + ' (L tradicional)';
                }

                E1Input.value = L;
            }

            // Função para calcular E2
            function calcularE2() {
                if (!B1Input.value || !D1Input.value) {
                    E2Input.value = '';
                    return;
                }

                let B1 = B1Input.value.replace(',', '.');
                let D1 = D1Input.value.replace(',', '.');
                B1 = parseFloat(B1);
                D1 = parseFloat(D1);
                const D2 = parseFloat(D2Input.value.replace(',', '.')) || 0;
                const tipoRolhaValor = tipoRolha.value;
                const tipoVinhoValor = tipoVinho.value;
                let E2 = '';

                if (D1 < 10) {
                    E2Input.value = '';
                    return;
                }

                const multiplicadores = {
                    'A4C1': 1.03,
                    'A4C2': 1.035,
                    'A5C1': 1.02,
                    'A5C2': 1.025
                };

                if (tipoRolhaValor === 'A1' || tipoRolhaValor === 'A2') {
                    if (tipoVinhoValor === 'C1') {
                        let R10 = D1 + 5.8;
                        let results = ['D2','D3','D4','D5'].map(id => {
                            const input = document.getElementById(id);
                            if (input.value) {
                                let value = parseFloat(input.value.replace(',', '.'));
                                const delta = value - D1;
                                
                                // Nova condição incluída
                                if (R10 > value + 4.2) {
                                    return Math.round(value + 4).toString();
                                }
                                
                                return (delta <= 2)
                                    ? Math.round(R10).toString()
                                    : Math.round(value + 4.2) + "BOSC";
                            }
                            return 'NA';
                        });
                        const allNA = results.every(result => result === 'NA');
                        E2 = allNA ? Math.round(R10).toString() : results.join('-');
                        E2Input.value = E2;
                    } else if (tipoVinhoValor === 'C2' || tipoVinhoValor === 'C3') {
                        let R10 = D1 + 6.8;
                        let results = ['D2','D3','D4','D5'].map(id => {
                            const input = document.getElementById(id);
                            if (input.value) {
                                let value = parseFloat(input.value.replace(',', '.'));
                                const delta = value - D1;

                                // Nova condição incluída
                                if (R10 > value + 6.8) {
                                    return Math.round(value + 5.2).toString();
                                }

                                return (delta <= 1.8)
                                    ? Math.round(R10).toString()
                                    : Math.round(value + 5.2) + "BOSC";
                            }
                            return 'NA';
                        });
                        const allNA_C2C3 = results.every(result => result === 'NA');
                        E2 = allNA_C2C3 ? Math.round(R10).toString() : results.join('-');
                        E2Input.value = E2;
                    }
                }

                // A4 / A5
                else if (tipoRolhaValor === 'A4' || tipoRolhaValor === 'A5') {
                    const key = `${tipoRolhaValor}${tipoVinhoValor}`;
                    const multiplicador = multiplicadores[key] || 1;
                    let R8 = D1 * multiplicador;

                    if ((tipoRolhaValor === 'A4' && (tipoVinhoValor === 'C1' || tipoVinhoValor === 'C2'))
                     || (tipoRolhaValor === 'A5' && (tipoVinhoValor === 'C1' || tipoVinhoValor === 'C2'))) {

                        if (D2 === 0 || R8 > D2) {
                            E2 = Math.round(R8 * 10) / 10;
                        } else {
                            let ajuste;
                            if (tipoRolhaValor === 'A4') {
                                ajuste = (tipoVinhoValor === 'C1') ? 1.03 : 1.035;
                            } else {
                                ajuste = (tipoVinhoValor === 'C1') ? 1.02 : 1.025;
                            }
                            if (R8 <= D2) {
                                E2 = Math.round((D2 * ajuste) * 10) / 10;
                            } else {
                                E2 = Math.round((D2 * 1.01) * 10) / 10;
                            }
                        }
                        E2 = Math.round(E2 * 10) / 10;
                        E2Input.value = E2;
                    }
                }
                // A3
                else if (tipoRolhaValor === 'A3') {
                    if (tipoVinhoValor === 'C3') {
                        let R9 = D1 + 10;
                        E2 = R9 + ((D2 - D1) > 2 ? 1 : 0);
                        E2 = Math.round(E2 * 2) / 2;
                        E2Input.value = E2;
                    } else if (tipoVinhoValor === 'C4') {
                        let R9 = D1 + 12;
                        E2 = R9 + ((D2 - D1) > 2 ? 1 : 0);
                        E2 = Math.round(E2 * 2) / 2;
                        E2Input.value = E2;
                    }
                }
            }

            // Chamamos updateTipoVinhoOptions() logo no arranque
            updateTipoVinhoOptions();

            // ----------------------
            // LISTENERS PARA CÁLCULO
            // ----------------------

            // Tipo de rolha
            tipoRolha.addEventListener('change', function() {
                if (tipoRolha.value) {
                    tipoVinho.disabled = false;
                } else {
                    tipoVinho.disabled = true;
                    tipoVinho.value = '';
                }
                updateTipoVinhoOptions();
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao(); // Chama para já ativar ou não o piscar
            });

            // Tipo de vinho
            tipoVinho.addEventListener('change', function() {
                if (!tipoRolha.value) {
                    showAlert('Por favor, selecione primeiro o tipo de rolha.');
                    tipoVinho.value = '';
                    return;
                }
                updateTipoVinhoOptions();
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();

                if (tipoVinho.value !== "") {
                    B1Input.disabled = false;
                    D1Input.disabled = false;
                    D2Input.disabled = false;

                    if (!['A3','A4','A5'].includes(tipoRolha.value)) {
                        D3Input.disabled = false;
                        D4Input.disabled = false;
                        D5Input.disabled = false;
                    } else {
                        D3Input.disabled = true;
                        D4Input.disabled = true;
                        D5Input.disabled = true;
                    }
                } else {
                    B1Input.disabled = true;
                    D1Input.disabled = true;
                    D2Input.disabled = true;
                    D3Input.disabled = true;
                    D4Input.disabled = true;
                    D5Input.disabled = true;
                }
            });

            // Inputs B1, D1, D2, D3, D4, D5 => Chamam cálculo e gerarInterpretacao()
            B1Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });
            D1Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });
            D2Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });
            D3Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });
            D4Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });
            D5Input.addEventListener('input', function(){
                calcularLUnificado();
                calcularE2();
                gerarInterpretacao();
            });

            // Botão de reset
            resetButton.addEventListener('click', function() {
                resetAll();
            });

            // Botão de Impressão
btnImprimir.addEventListener('click', function () {
    // Exibe o modal
    printModal.style.display = 'block';
});

// Fechar o modal ao clicar no botão de fechar
document.querySelectorAll('.close-button').forEach(button => {
    button.addEventListener('click', function () {
        printModal.style.display = 'none';
    });
});

// Confirmar e imprimir
confirmPrint.addEventListener('click', function () {
    const userInput = printInput.value.trim();
    const printNote = document.getElementById('printNote');

    // Exibe o texto se houver, senão deixa vazio
    printNote.textContent = userInput || '';
    printNote.style.display = 'block';

    // Adiciona um pequeno atraso para garantir a atualização antes da impressão
    setTimeout(function () {
        window.print();
        printNote.textContent = '';
        printNote.style.display = 'none';
    }, 100);

    // Fecha o modal
    printModal.style.display = 'none';
});

            // Eventos beforeprint e afterprint para manipular placeholders na impressão
            function handleBeforePrint() {
                // Atualização para os inputs dentro de perfil-inputs
                const perfilInputs = document.querySelectorAll('.perfil-inputs .input-wrapper');
                perfilInputs.forEach(wrapper => {
                    const input = wrapper.querySelector('input');
                    if (input.value.trim() !== '') {
                        wrapper.setAttribute('data-placeholder', input.placeholder);
                        wrapper.setAttribute('data-value', input.value);
                    } else {
                        wrapper.removeAttribute('data-placeholder');
                        wrapper.removeAttribute('data-value');
                    }
                });

                // Novo Código para os elementos da coluna esquerda
                const leftElements = document.querySelectorAll('.left-column .section select, .left-column .section input');

                leftElements.forEach(element => {
                    const section = element.closest('.section'); // Obtém a secção mais próxima
                    const subtitle = section.querySelector('.subtitle')?.textContent.trim(); // Obtém o título da secção (subtitle)

                     if (element.value.trim() !== '') {
                     let text = '';

                    if (element.tagName.toLowerCase() === 'select') {
                    const selectedOption = element.options[element.selectedIndex];
                    text = selectedOption ? selectedOption.text.trim() : ''; // Obtém o texto do option selecionado
                     } else { // Para input
                    text = element.value.trim(); // Obtém o valor do input
                     }

                      // Define o valor apenas (sem duplicar o título no atributo)
                      section.setAttribute('data-print-text', text);
                     } else {
                    // Remove o atributo se o valor estiver vazio
                    section.removeAttribute('data-print-text');
                     }
                });


                // Copiar o conteúdo da interpretação para o quadro de impressão
                const interpretationContent = document.getElementById("interpretationContent").innerHTML;
                const interpretationBox = document.getElementById("interpretationContentBox");
                interpretationBox.innerHTML = interpretationContent;
            }

            function handleAfterPrint() {
                // Remover data-placeholder e data-value dos inputs dentro de perfil-inputs
                const perfilInputs = document.querySelectorAll('.perfil-inputs .input-wrapper');
                perfilInputs.forEach(wrapper => {
                    wrapper.removeAttribute('data-placeholder');
                    wrapper.removeAttribute('data-value');
                });

                // Novo Código para remover data-print-text da coluna esquerda
                const leftSections = document.querySelectorAll('.left-column .section');
                leftSections.forEach(section => {
                    section.removeAttribute('data-print-text');
                });

                // Limpar o conteúdo do quadro de interpretação após a impressão
                const interpretationBox = document.getElementById("interpretationContentBox");
                interpretationBox.innerHTML = '';
            }

            // Adicionar listeners para beforeprint e afterprint
            if (window.matchMedia) {
                const mediaQueryList = window.matchMedia('print');
                mediaQueryList.addListener(function(mql) {
                    if (mql.matches) {
                        handleBeforePrint();
                    } else {
                        handleAfterPrint();
                    }
                });
            }

            window.addEventListener('beforeprint', handleBeforePrint);
            window.addEventListener('afterprint', handleAfterPrint);
        });

        // ---------------------------------------------------
        //  FUNÇÕES DO BALÃO DINÂMICO (interpretação de E1/E2)
        // ---------------------------------------------------

        // Mostra o balão, posicionando-o à direita do ícone, alinhado ao topo
        function mostrarBubble() {
            // 1) Gera o conteúdo do balão
            gerarInterpretacao();

            // 2) REMOVER O PISCAR NO MOMENTO EM QUE ABRE O BALÃO (OPÇÃO 1)
            var icone = document.getElementById("iconeI");
            icone.classList.remove("blink");

            // 3) Descobre a posição do ícone “i”
            var bubble = document.getElementById("bubble");
            var rect = icone.getBoundingClientRect();
            
            // 4) Tornar o balão visível e alinhar ao topo do ícone, ligeiramente à direita
            bubble.style.display = "block";
            bubble.style.top  = (rect.bottom + window.scrollY - 60) + "px"; // Posicionar abaixo do ícone
            bubble.style.left = (rect.left + window.scrollX + 40) + "px"; // Alinhar à esquerda do ícone
        }

        // Esconder o balão
        function esconderBubble() {
            document.getElementById("bubble").style.display = "none";
        }

        // Só colorir dígitos
        function colorNumbers(str, cor) {
            return str.replace(/\d+/g, function(match) {
                return '<span style="color:' + cor + ';">' + match + '</span>';
            });
        }

        // Gera a lógica E1/E2 e interpreta
        function gerarInterpretacao() {
            var E1 = document.getElementById("E1").value;
            var E2 = document.getElementById("E2").value;

            // Se E1 e E2 têm valores, faz piscar o ícone; caso contrário, remove
            var iconeI = document.getElementById("iconeI");
            if (E1 && E1.trim() !== "" && E2 && E2.trim() !== "") {
                iconeI.classList.add("blink");
            } else {
                iconeI.classList.remove("blink");
            }

            // Vamos buscar o <h4> que está dentro do #bubble
            var bubbleTitle = document.querySelector("#bubble h4");

            // Se E1 e E2 estão ambos vazios, mudamos título e mensagem e terminamos a função
            if (!E1 && !E2) {
                bubbleTitle.textContent = "Interpretação dos resultados";
                document.getElementById("interpretationContent").innerHTML = 
                    "<p style='font-size: 12px; color: grey;'>Por favor preencha os campos solicitados</p>";
                return; 
            } else {
                // Caso contrário, repõe o título para "Interpretação dos Resultados"
                bubbleTitle.textContent = "Interpretação dos Resultados";
            }

            // Preparação dos valores
            var Lvals = E1 ? E1.split("-").map(function(v){return v.trim();}) : [];
            var Dvals = E2 ? E2.split("-").map(function(v){return v.trim();}) : [];
            var maxLen = Math.max(Lvals.length, Dvals.length);

            var cores = ["green","blue","orange","red","purple"];
            var html = "";

            for (var i = 0; i < maxLen; i++) {
                var Ltxt = Lvals[i] ? Lvals[i] : "NA";
                var Dtxt = Dvals[i] ? Dvals[i] : "NA";
                var cor  = cores[i] || "black";

                // Colorir só números
                var Lcol = (Ltxt === "NA") ? "NA" : colorNumbers(Ltxt, cor);
                var Dcol = (Dtxt === "NA") ? "NA" : colorNumbers(Dtxt, cor);

                // Verificar “BOSC” / “LH”
                var combo   = Ltxt + Dtxt;
                var temBOSC = (combo.indexOf("BOSC") !== -1);
                var temLH   = (combo.indexOf("LH")   !== -1);

                // Interpretação base
                var interpretacao = "Calibre Recomendado";

                // Se houver "NA", forçamos esta interpretação
                if (Ltxt === "NA" || Dtxt === "NA") {
                    interpretacao = "sem valores para calcular diâmetro";
                } else if (temBOSC && temLH) {
                    interpretacao = "Calibre preconizado mas Não Recomendado - Headspace e Conicidade";
                } else if (temBOSC) {
                    interpretacao = "Calibre preconizado mas Não Recomendado - Conicidade";
                } else if (temLH) {
                    interpretacao = "Calibre preconizado mas Não Recomendado - Headspace";
                }

                html += '<div style="margin-bottom:3px;">'
                      +   '<span style="font-weight:bold;font-size:12px;">' + Lcol + '</span>'
                      +   ' x '
                      +   '<span style="font-weight:bold;font-size:12px;">' + Dcol + '</span>'
                      +   '<br>'
                      +   '<span style="font-size:12px; color:#555;">' + interpretacao + '</span>'
                      + '</div>';
            }

            // Injetar o HTML final no interpretationContent (balão)
            document.getElementById("interpretationContent").innerHTML = html;
        }
    </script>
