/* --- Adicionado de index.html --- */

        .pergunta-texto {
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
            max-width: 759px;
            padding: 12px;
            font-size: 22px;
            font-family: Arial, sans-serif;
            color: #ffd700;
            background-color: #1a1a1a;
            border: 1px solid #ffd700;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            margin: 25px auto;
            text-align: center;
        }

        .pergunta-texto a {
            color: #00bfff;
            text-decoration: none;
        }

        .pergunta-texto a:hover {
            text-decoration: underline;
        }
    


        /* Campo Pergunta - Estilo Específico */
        #pergunta {
            width: 100%;
            /* Ocupa toda a largura do contêiner pai */
            max-width: 759px;
            /* Largura máxima consistente com outros inputs */
            margin: 0 auto 15px;
            /* Centraliza horizontalmente e adiciona espaçamento abaixo */
            padding: 12px;
            /* Espaçamento interno maior para conforto */
            font-size: 16px;
            /* Tamanho da fonte consistente */
            font-family: Arial, sans-serif;
            /* Fonte padrão */
            color: #333;
            /* Cor do texto */
            background-color: #f9f9f9;
            /* Fundo claro */
            border: 1px solid #ccc;
            /* Bordas padrão */
            border-radius: 5px;
            /* Bordas arredondadas */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* Sombra leve */
            resize: none;
            /* Desabilita redimensionamento manual */
            box-sizing: border-box;
            /* Inclui padding e borda no cálculo da largura */
            transition: border-color 0.3s, box-shadow 0.3s;
            /* Suaviza transições de foco */
        }

        /* Ajustes de Altura e Modos */
        #pergunta.text-mode {
            height: 550px;
            /* Altura maior no modo texto */
            line-height: 1.5;
            /* Ajusta o espaçamento entre linhas */
            overflow-y: auto;
            /* Adiciona rolagem vertical se necessário */
        }

        #pergunta.phrase-mode {
            height: 50px;
            /* Altura padrão para frases curtas */
        }

        /* Foco - Destaque */
        #pergunta:focus {
            border-color: #007bff;
            /* Destaque azul ao focar */
            box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
            /* Sombra ao focar */
            outline: none;
            /* Remove o contorno padrão */
        }

        /* Responsividade */
        @media (max-width: 768px) {
            #pergunta {
                font-size: 14px;
                /* Ajusta o tamanho da fonte para telas menores */
                padding: 10px;
                /* Reduz o padding interno */
            }

            #pergunta.text-mode {
                height: 150px;
                /* Altura menor em modo texto para telas menores */
            }

            #pergunta.phrase-mode {
                height: 40px;
                /* Altura padrão reduzida para telas menores */
            }
        }
    


        #containerNumAlternativas {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin: 20px;
        }

        #labelNumAlternativas {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .inputNumAlternativas {
            width: 150px;
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: #333;
        }

        .alternativaTexto,
        #relatorioAlternativas,
        #resultadoAlternativas {
            white-space: pre-wrap;
            /* Respeita quebras de linha */
            overflow-wrap: break-word;
            /* Quebra palavras longas */
            word-break: break-word;
            max-width: 759px;
            /* Limita a largura */
            padding: 12px;
            /* Aumenta o espaçamento interno */
            font-size: 20px;
            /* Fonte um pouco maior */
            font-family: Arial, sans-serif;
            color: #ffd700;
            /* Cor do texto dourada */
            background-color: #1a1a1a;
            /* Fundo escuro */
            border: 1px solid #ffd700;
            /* Borda dourada */
            border-radius: 6px;
            /* Bordas arredondadas */
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            /* Sombra para destaque */
            margin: 15px auto;
            /* Espaçamento maior entre elementos */
            text-align: center;
            /* Centraliza o texto */
        }

        /* Estilos para links dentro desses elementos */
        .alternativaTexto a,
        #relatorioAlternativas a,
        #resultadoAlternativas a {
            color: #00bfff;
            /* Azul claro para os links */
            text-decoration: none;
            /* Remove sublinhado */
        }

        .alternativaTexto a:hover,
        #relatorioAlternativas a:hover,
        #resultadoAlternativas a:hover {
            text-decoration: underline;
            /* Sublinha o link ao passar o mouse */
            color: #1e90ff;
            /* Azul mais escuro no hover */
        }

        #legendaAlternativas {
            margin-top: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            font-family: Arial, sans-serif;
            color: #333;
            white-space: pre-wrap;
            /* Permite quebra de linha */
            overflow-wrap: break-word;
            /* Quebra palavras longas */
        }

        .legenda-titulo {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 16px;
        }

        #resultadoGeral {
            white-space: pre-wrap;
            /* Preserva quebras de linha */
            overflow-wrap: break-word;
            /* Quebra palavras longas */
            word-break: break-word;
            /* Compatibilidade com navegadores antigos */
            font-size: 16px;
            font-family: Arial, sans-serif;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.5;
            /* Ajusta o espaçamento entre linhas */
        }
    


        @keyframes mudarCor {
            0% {
                background-color: transparent;
            }

            100% {
                background-color: transparent;
                /* Cor preta #333*/
            }
        }
    


        #idiomax {
            position: fixed;
            /* Mantém o botão no canto superior direito */
            top: 10px;
            /* Distância do topo */
            right: 20px;
            /* Distância da borda direita */
            width: auto;
            /* Sobrescreve o comportamento de largura */
            padding: 8px 16px;
            /* Dimensões compactas */
            background-color: rgba(111, 79, 55, 0.8);
            /* Marrom com transparência */
            /*background-color: #6f4f37;  Cor de fundo */
            color: #ffffff;
            /* Cor do texto */
            border: 2px solid #6f4f37;
            /* Cor da borda */
            border-radius: 5px;
            /* Bordas arredondadas */
            font-size: 14px;
            /* Tamanho do texto */
            cursor: pointer;
            /* Cursor de ponteiro */
            z-index: 1000;
            /* Acima dos outros elementos */
            transition: all 0.3s ease;
            /* Transições suaves */
        }

        /* Estilo ao passar o mouse */
        #idiomax:hover {
            background-color: #5a3b2a;
            /* Fundo mais escuro */
            transform: scale(1.1);
            /* Leve aumento no hover */
        }
    


        /* Bola Colorida */
        @keyframes rapidMixColors {
            0% {
                background: linear-gradient(60deg, #ff6347, #32cd32, #1e90ff, #ff69b4, #ffff00);
            }

            25% {
                background: linear-gradient(60deg, #32cd32, #1e90ff, #ff6347, #ffff00, #ff69b4);
            }

            50% {
                background: linear-gradient(60deg, #1e90ff, #ff6347, #32cd32, #ff69b4, #ffff00);
            }

            75% {
                background: linear-gradient(60deg, #ff6347, #ffff00, #32cd32, #1e90ff, #ff69b4);
            }

            100% {
                background: linear-gradient(60deg, #ffff00, #ff69b4, #ff6347, #32cd32, #1e90ff);
            }
        }
    


        /* Entrada de texto na seção de votação */
        textarea[id^="alternativa"] {
            width: 100%;
            max-width: 759px;
            height: auto;
            margin: 0 auto 15px;
            padding: 12px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            resize: vertical;
            /* Permite ajuste vertical */
            overflow-wrap: break-word;
            /* Quebra de palavras longas */
            word-break: break-word;
            /* Suporte para navegadores mais antigos */
        }

        @media (max-width: 768px) {
            textarea[id^="alternativa"] {
                height: 40px;
                /* Ajuste para dispositivos móveis */
                font-size: 14px;
            }
        }

        /* Estilo genérico para resultados e opções */
        #voto,
        .custom-option {
            white-space: pre-wrap;
            /* Preserva quebras de linha */
            overflow-wrap: break-word;
            /* Quebra palavras longas */
            word-break: break-word;
            /* Suporte adicional */
            height: auto;
            /* Ajusta dinamicamente a altura */
            padding: 12px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }

        /* Estilo específico para opções */
        .custom-option {
            margin: 5px 0;
            border-bottom: 1px solid #eee;
            /* Linha separadora */
            background-color: #fff;
            /* Fundo padrão */
            color: #000;
            /* Texto padrão */
            cursor: pointer;
            /* Indica interatividade */
        }

        .custom-option:last-child {
            border-bottom: none;
            /* Remove a linha da última opção */
        }

        /* Cores alternadas */
        .custom-option:nth-child(odd) {
            background-color: #d9edf7;
            /* Azul claro */
            color: #004085;
            /* Texto azul escuro */
        }

        .custom-option:nth-child(even) {
            background-color: #d4edda;
            /* Verde claro */
            color: #155724;
            /* Texto verde escuro */
        }

        /* Efeito ao passar o mouse */
        .custom-option:hover {
            background-color: #ffeeba;
            /* Amarelo claro */
            color: #856404;
            /* Texto âmbar escuro */
            transform: scale(1.05);
            /* Leve aumento */
        }

        /* Destaque para a opção selecionada */
        .custom-option.selected {
            background-color: #007bff;
            /* Azul vibrante */
            color: #fff;
            /* Texto branco */
            border-color: #0056b3;
            /* Borda azul escura */
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
            /* Brilho ao redor */
        }

        /* Container das opções */
        .custom-select {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 12px;
            max-width: 100%;
            max-height: 300px;
            /* Limite de altura */
            overflow-y: auto;
            /* Rolagem vertical */
            font-size: 16px;
            font-family: Arial, sans-serif;
            background-color: #fff;
        }
    


        #btnCopiarFormulario {
            display: inline-block;
            background-color: #ffffff;
            /* Fundo branco */
            color: #000000;
            /* Texto preto */
            font-size: 13px;
            /* Tamanho da fonte 18 */
            font-weight: bold;
            /* Texto em negrito */
            /*text-transform: uppercase;
             Texto em maiúsculas */
            padding: 12px 24px;
            /* Espaçamento interno */
            border: 2px solid #000000;
            /* Borda preta */
            border-radius: 8px;
            /* Bordas arredondadas */
            cursor: pointer;
            /* Muda o cursor ao passar o mouse */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            /* Sombra */
            transition: all 0.3s ease;
            /* Transição suave */
        }

        #btnCopiarFormulario:hover {
            background-color: #000000;
            /* Fundo preto ao passar o mouse */
            color: #ffffff;
            /* Texto branco ao passar o mouse */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
            /* Aumenta a sombra */
            transform: scale(1.05);
            /* Leve aumento */
        }

        #btnCopiarFormulario:active {
            transform: scale(0.95);
            /* Leve redução ao clicar */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* Reduz a sombra */
        }

        #btnCompartilharEspecial {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            background-color: #FF7800;
            /* Fundo vermelho */
            border: none;
            border-radius: 8px;
            padding: 12px 20px 12px 50px;
            position: relative;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

            transition: transform 0.3s, background-color 0.3s;
        }

        #btnCompartilharEspecial:hover {
            background-color: #cc0000;
            /* Vermelho mais escuro ao passar o mouse */
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }

        #btnCompartilharEspecial::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 50%;
            width: 18px;
            height: 24px;
            transform: translateY(-50%);
            background: #ffffff;
            clip-path: polygon(50% 0, 100% 30%, 70% 30%, 70% 100%, 30% 100%, 30% 30%, 0 30%);
            /* -webkit-clip-path: polygon(50% 0, 100% 30%, 70% 30%, 70% 100%, 30% 100%, 30% 30%, 0 30%);*/

        }
    


        .conteudo-ajustada {
            max-width: 100%;
            padding: 2px;
            background-color: #333;
            color: #f2f2f2;
            border-radius: 2px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* Estilo ao passar o mouse */
        button:hover {
            background-color: #d4a300;
            transform: scale(1.05);
            /* Leve aumento no tamanho */
        }

        /* Estilo ao clicar */
        button:active {
            background-color: #e9e8e4;
            /* Cor mais escura */
            transform: scale(0.95);
            /* Leve redução no tamanho */
        }
    


        .centralizado {
            display: block;
            /* Torna o <label> um bloco, permitindo a centralização */
            text-align: left;
            /* Centraliza o texto dentro do <label> */
            width: 100%;
            /* Garante que o <label> ocupe a largura total disponível */
        }

        #whatsapp-link {
            display: inline-block;
            background-color: #25D366;
            /* Cor verde característica do WhatsApp */
            color: white;
            text-decoration: none;
            font-family: Arial, sans-serif;
            font-size: 14px;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        #whatsapp-link:hover {
            background-color: #1DA851;
            /* Tom mais escuro ao passar o mouse */
        }

        #whatsapp-link img {
            vertical-align: middle;
        }

        #containerRelatorio {
            position: fixed;
            /* Fixa o relatório na tela, independente do scroll */
            top: 50%;
            /* Mantém na metade */
            right: 50%;

            left: 50%;
            transform: translate(-50%, -50%);
            /* Alinha ao centro */
            width: 300px;
            /* Define largura */
            max-height: 90vh;
            /* Limita a altura máxima */
            overflow-y: auto;
            /* Permite rolagem se o conteúdo for maior que o contêiner */
            background-color: #333;
            /* Cor de fundo */
            color: #f2f2f2;
            /* Cor do texto */
            padding: 15px;
            /* Espaçamento interno */
            border-radius: 8px;
            /* Bordas arredondadas */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

            /* Sombra para destaque */
            z-index: 1000;
            /* Garantia de visibilidade acima de outros elementos */
        }

        .justificado {
            text-align: justify;
            line-height: 1.5;
            /* Ajusta o espaçamento entre as linhas */
            margin: 2px 0;
            /* Adiciona margem para separar do restante do conteúdo */
        }



        #EnviarCopia {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            background-color: #007aff;
            /* Azul clássico do iOS */
            border: none;
            border-radius: 8px;
            padding: 12px 20px 12px 50px;
            /* Espaço extra para o ícone */
            position: relative;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

            transition: transform 0.3s, background-color 0.3s;
        }

        #EnviarCopia:hover {
            background-color: #005bb5;
            /* Escurecimento no hover */
            transform: scale(1.05);
            /* Leve aumento ao passar o mouse */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }

        #EnviarCopia::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 50%;
            width: 18px;
            height: 24px;
            transform: translateY(-50%);
            background: #ffffff;
            clip-path: polygon(50% 0,
                    /* Ponta da seta */
                    100% 30%,
                    70% 30%,
                    70% 100%,
                    30% 100%,
                    30% 30%,
                    0 30%);
            /* Retângulo com seta para cima */
        }

        .submodo-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            /* Garante alinhamento à esquerda */
            margin-bottom: 4px;
            /* Espaço entre itens */
            gap: 8px;
            /* Reduz espaço entre checkbox e texto */
        }

        .submodo-item input[type="checkbox"] {
            margin: 0;
            /* Remove margens padrão */
            padding: 0;
            /* Remove padding extra */
            border: 2px solid transparent;
            /* Define borda inicial */
            outline: none;
            /* Remove o outline padrão 100 */
            cursor: pointer;
            width: 32px;
            /* Ajuste tamanho do checkbox */
            height: 28px;
        }

        .submodo-item input[type="checkbox"]:hover,
        .submodo-item input[type="checkbox"]:focus {
            border-color: #f2ca02;
            /* Cor amarela ao focar ou passar o mouse */
            border-radius: 4px;
            /* Borda arredondada */
        }

        .submodo-item span {
            font-size: 14px;
            color: #f2f2f2;
            /* Cor do texto */
            text-align: left;
            /* Alinhamento à esquerda */
            line-height: 1.5;
        }

        /* Estilo do select com as cores do botão voltar-ao-inicio */

        /* Garantir que a div e o select tenham z-index adequado e boa visibilidade */
        #language-selector {
            position: absolute;
            top: 11px;
            right: 11px;
            z-index: 9999;
            /* Garantir que tenha um z-index alto para não ser sobreposto */
            font-size: 11px;
            color: #fff;
        }

        /* Ajuste de estilo do select */
        #language {
            background-color: #fff;
            /* Fundo branco */
            color: #000;
            /* Texto preto para contraste adequado */
            border: 1px solid #f2ca02;
            /* Cor da borda em amarelo */
            font-size: 11px;
            /* Tamanho do texto ajustado */
            padding: 8px;
            /* Ajuste do padding para tornar o select mais acessível */
            margin: 5px 0;
            /* Margem para evitar sobreposição com outros botões */
            border-radius: 5px;
            /* Bordas arredondadas */
            position: relative;
            /* Para garantir a funcionalidade do z-index */
        }

        /* Ajuste quando o select estiver em foco */
        #language:focus {
            background-color: #fff;
            /* Mantém o fundo branco */
            border-color: #f2ca02;
            /* Borda amarela ao focar */
            color: #000;
            /* Texto preto ao focar */
        }

        /* Estilo geral */


        .container {
            max-width: 800px;
            width: 100%;
            background-color: #333;
            padding: 20px;
            border-radius: 10px;
            box-sizing: border-box;
            overflow: hidden;
            /* Impede estouros horizontais */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        h1,
        h2,
        h3 {
            color: #f2ca02;
            text-align: center;
        }

        button:hover {
            background-color: #d4a300;
        }

        input,
        select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
            box-sizing: border-box;
            border-radius: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th,
        td {
            border: 1px solid #f2ca02;
            padding: 10px;
            text-align: center;
        }

        /* Responsividade */
        @media (max-width: 600px) {

            h1,
            h2,
            h3 {
                font-size: 20px;
            }

            button,
            input,
            select {
                font-size: 14px;
            }

            table {
                font-size: 12px;
            }
        }

        /* Estilo para seções dinâmicas */
        .dynamic-section {
            margin-top: 20px;
            padding: 10px;
            background-color: #444;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Centraliza textos */
        .center {
            text-align: center;
        }

        /* Estilo compartilhado */
        body {
            font-family: Arial, sans-serif;
            background-color: #222;
            color: #f2f2f2;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            width: 100%;
            background-color: #333;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }


        h1,
        h2,
        h3 {
            color: #f2ca02;
            text-align: center;

        }

        h4 {
            color: #f8f8f5;
            text-align: center;
        }

        button:hover {
            background-color: #d4a300;
        }

        /* 
Aqui abaixo que está resultando na diferença de tamanho do input e o .hidden abaixo é o que serve a separar telas 
input,
select {
    width: calc(100% - 24px);
}
*/



        .hidden {
            display: none;
        }



        /* Estilo específico da calculadora */
        .input-group {
            margin: 20px 0;
            text-align: center;
        }

        .input-label {
            display: block;
            margin-bottom: 10px;
            font-size: 16px;
        }

        input[type="number"] {
            border: none;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .result,
        .final-result {
            font-weight: bold;
            color: #ffcc00;
        }

        .final-result {
            margin-top: 20px;
        }

        .result-container {
            width: 100%;
            max-width: 759px;
            /* Consistência com os campos de entrada */
            margin: 0 auto;
            padding: 10px;
            overflow-x: auto;
            /* Adiciona rolagem horizontal, se necessário */
        }


        .input-group-result {
            text-align: left;
            margin: 15px 0;
            color: #ffcc00;
            background-color: #444;
            padding: 10px;
            border-radius: 5px;
        }

        /* Estilo específico da votação */
        table {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            border: 1px solid #f2ca02;
            text-align: center;
        }

        /* Media queries para responsividade */
        @media (max-width: 600px) {

            input,
            select,
            button {
                font-size: 14px;
            }
        }

        .botao-clicado {
            background-color: #007bff;
            /* Azul */
            color: #fff;
            /* Texto branco */
        }

        body {
            padding-bottom: 100px;
            /* Ajuste este valor para corresponder à altura do rodapé */
        }

        button.voltar-ao-inicio {
            background-color: transparent;
            color: #f2ca02;
            border: 1px solid #f2ca02;
            font-size: 14px;
            padding: 8px;
            margin: 5px 0;
        }

        button.voltar-ao-inicio:hover {
            background-color: #444;
            color: #fff;
        }

        .recolher-tela {
            background-color: transparent;
            color: #f2ca02;
            border: 1px solid #f2ca02;
            font-size: 14px;
            padding: 8px;
            margin: 5px 0;
            cursor: pointer;
        }

        .recolher-tela:hover {
            background-color: #444;
            color: #fff;
        }

        #textoProcessado {
            text-align: justify;
            background-color: #444;
            color: #f2f2f2;
            padding: 10px;
            border-radius: 5px;
        }

        #fileUpload {
            display: block;
            /* Certifica que é exibido corretamente */
        }
    


        #submodosSection select[multiple] {
            height: auto;
            /* Permitir ajuste automático */
            min-height: 170px;
            /* Altura mínima para exibir submodos curtos */
            max-height: none;
            /* Remover limite de altura */
        }

        @media (max-width: 768px) {

            /* Em telas menores (como celulares), manter a barra de rolagem */
            #submodosSection select[multiple] {
                max-height: 300px;
                /* Limite a altura com rolagem se necessário */
                overflow-y: auto;
                /* Ativar rolagem vertical */
            }
        }
    


        button {
            width: 100%;
            /* Largura total */
            padding: 12px;
            /* Padding */
            margin: 10px 0;
            /* Margem */
            font-size: 16px;
            /* Tamanho da fonte */
            background-color: #f2ca02;
            /* Cor de fundo */
            color: #222;
            /* Cor do texto */
            border: none;
            /* Sem borda */
            border-radius: 5px;
            /* Bordas arredondadas */
            cursor: pointer;
            /* Cursor de ponteiro */
            transition: background-color 0.3s ease, transform 0.2s ease;
            /* Transições */
        }

        .link-button {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            color: #fff;
            background-color: #f2ca02;
            border: none;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .link-button:hover {
            background-color: #d4a300;
        }

        .pix-button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #222;
            background-color: hsl(120, 23%, 97%);
            border: none;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .pix-button:hover {
            background-color: #45a049;
        }
    


        #decisiva-link {
            color: blue;
            /* Define a cor do texto como preto */
            text-decoration: none;
            /* Remove o sublinhado do link */
            font-family: Arial, sans-serif;
            font-size: 16px;
            /* Define o tamanho da fonte */
            font-weight: bold;
            /* Deixa o texto em negrito */
        }

        #decisiva-link:hover {
            color: #007BFF;
            /* Cor do texto ao passar o mouse (azul) */
        }
    




    


        .info-div {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            max-width: 300px;
            overflow-wrap: break-word;
        }

        .hidden {
            display: none;
        }

        .file-list {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-height: 200px;
            overflow-y: auto;
        }

        .file-list ul {
            padding-left: 20px;
        }
    


        .prateado {
            background-color: #c0c0c0;
            /* Cor prateada */
            color: #333;
            /* Cor do texto */
            border: 1px solid #a0a0a0;
            /* Borda sutil para o efeito de prateado */
            padding: 8px 16px;
            /* Padding para ajustar o tamanho do botão conforme o texto */
            font-size: 16px;
            /* Tamanho de fonte adequado */
            border-radius: 4px;
            /* Bordas levemente arredondadas */
            transition: all 0.3s ease;
            /* Transição suave ao interagir com o botão */
        }

        .prateado:hover {
            background-color: #b0b0b0;
            /* Cor prateada mais escura no hover */
            border-color: #888;
            /* Borda um pouco mais escura */
        }

        .prateado:active {
            background-color: #a0a0a0;
            /* Cor prateada ainda mais escura quando pressionado */
            border-color: #666;
            /* Borda ainda mais escura */
        }
    


        .compara-list {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-height: 200px;
            overflow-y: auto;
            background-color: #f9f9f9;
            color: #333;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
    /* === Estilo do Modal do Vídeo Flutuante === */
#modalVideoEvolutivo {
    display: none; /* Oculto por padrão */
    position: fixed; /* Fixa na tela */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 999999; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(4px);
}

/* Oculta as divs de lista e comparação quando estiverem vazias */
#fileList:empty, #compara:empty {
    display: none !important;
}

/* Oculta títulos e caixas de perguntas na tela inicial quando estiverem totalmente vazios */
#telaInicial h2:empty, 
#perguntaTextoX:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}