/* style/common.css */

/* Reset e estilos globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
  --bg-body: #FFFFFF;
  --bg-container: #F8F9FA;
  --text-primary: #002B5B;
  --text-secondary: #4B6587;
  --tooltip-bg: #ffffff;
  --tooltip-text: #002244;
  --tooltip-border: #0056b3;
  --shadow: 0 0 20px rgba(0, 43, 91, 0.1);
  --gradient-bg: linear-gradient(to bottom right, #F8FBFF 0%, #E3F0FF 100%);
  --btn-bg: #007BFF;
  --btn-hover: #0056b3;
  --btn-disabled-bg: #666;
  --btn-disabled-text: #b3b3b3;
  --btn-height: 44px;
  --btn-radius: 8px;
  --btn-padding-x: 18px;
  --status-bg: var(--bg-container);
  --status-text: var(--text-primary);
  --progress-bar: #004C99;
  --progress-bg: #ddd;
  --modal-bg: #F8F9FA;
  --modal-text: #002B5B;
  --share-whatsapp: #25D366;
  --share-email: #D44638;
  --input-disabled-bg: #ccc;
  --input-disabled-text: #666;
  --blink-color: red;
  --text-highlight: #D14A05;
}

html.dark {
  --bg-body: #0B1724;
  --bg-container: #0A1B28;
  --text-primary: #E6F0FF;
  --text-secondary: #AAB8C2;
  --tooltip-bg: #E6F0FF;
  --tooltip-text: #0A1B28;
  --tooltip-border: #007BFF;
  --shadow: 0 0 20px rgba(0, 43, 91, 0.4);
  --gradient-bg: linear-gradient(to bottom right, #0B1724 0%, #0D2437 100%);
  --btn-bg: #0056b3;
  --btn-hover: #007BFF;
  --btn-disabled-bg: #444;
  --btn-disabled-text: #999;
  --btn-height: 44px;
  --btn-radius: 8px;
  --btn-padding-x: 18px;
  --status-bg: var(--bg-container);
  --status-text: var(--text-primary);
  --progress-bar: #3399FF;
  --progress-bg: #222;
  --modal-bg: #0A1B28;
  --modal-text: #FFFFFF;
  --share-whatsapp: #128C7E;
  --share-email: #A8322C;
  --input-disabled-bg: #333;
  --input-disabled-text: #888;
  --blink-color: #FF6B6B;
  --text-highlight: #FF7A1A;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--gradient-bg);
    
    /* Centraliza o conteúdo na página */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Habilita a barra de rolagem vertical */
    overflow-y: auto;
    
    /* Garante que não haja rolagem horizontal */
    overflow-x: hidden;
}

/* Estilo para o container principal */
.main-container {
    background-color: var(--bg-container);
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 960px;
    margin-top: 20px;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: visible;
}

.main-container h2 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
}

.main-container p {
    color: var(--text-secondary);
    margin-bottom: 0px;
    font-size: 16px;
    text-align: center;
}

.query-container  {
    display: flex;
    width: 90%;
    margin: 0px auto; /* também centraliza dentro da main-container */
    align-items: center;     /* centraliza no eixo horizontal */
    justify-content: center;
}

.input-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center aligns children within the container */
    width: 90%;
    max-width: 960px;
}

.buttons-container {
    display: flex;
    justify-content: center; /* Centraliza os botões no meio */
    align-items: center; /* Alinha verticalmente */
    gap: 5px; /* Ajuste esse valor para controlar a proximidade */
    flex-wrap: wrap; /* Garante que os botões não quebrem para outra linha se houver espaço */
    margin-bottom: 10px; /* Adiciona margem inferior de 10px */
}

/* Parent elements positioning */
.custom-file-label,
#upload-button {
    position: relative;
}

.custom-file-label:hover {
    background-color: var(--btn-hover);
}

/* Tooltip Positioning */
.custom-file-label:hover + .tooltip,
#upload-button:hover + .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Position Tooltips */
.custom-file-label + .tooltip,
#upload-button + .tooltip {
    top: -50px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
}

/* Filename Display */
.filename-display {
    margin-left: 5px; /* Closer to the file selector button */
    flex-grow: 1; /* Allow it to take up the available space between buttons */
    text-align: left;
    font-size: 18px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate long filenames */
}

/* File Input Button */
input[type="file"] {
    background-color: var(--bg-container);
    /* Hide the default file name display */
    color: transparent; 
    cursor: pointer;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    appearance: none;
    -webkit-appearance: none;
    height: 50px;
    width: 200px;
    padding: 0;
    box-sizing: border-box;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--btn-bg);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s;
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Custom File Label */
.custom-file-label {
    background-color: var(--btn-bg);
    color: white;
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 14px;
    padding: 12px 20px;
    cursor: pointer;
    padding: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

input[type="file"]:hover {
    background-color: var(--btn-hover);
}


.highlight-academicum {
  color: var(--text-highlight);
  font-weight: bold;
}

/* Para navegadores modernos */
input[type="file"]::file-selector-button:hover {
    background-color: var(--btn-hover);
}

/* Para Safari (WebKit) */
input[type="file"]::file-selector-button {
    background-color: var(--btn);
}

input[type="file"]:hover::file-selector-button {
    background-color: var(--btn-hover);
}

input[type="file"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    background-color: var(--btn-disabled-bg) !important;
    color: var(--btn-disabled-text) !important;
    border-color: #666;
}

input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    background-color: var(--btn-disabled-bg) !important;
    color: var(--btn-disabled-text) !important;
    cursor: not-allowed !important;
}

#file-input:disabled {
    opacity: 0.5; /* Reduz a opacidade para indicar desativação */
    cursor: not-allowed; /* Muda o cursor para mostrar que está desabilitado */
    /* Você pode adicionar outras propriedades, como cor de fundo ou borda, conforme necessário */
}

.custom-file-label.disabled {
    background-color: var(--btn-disabled-bg) !important; /* Cor de fundo para indicar desativação */
    color: var(--btn-disabled-text) !important; /* Cor do texto desabilitado */
    cursor: not-allowed; /* Indica visualmente que está desabilitado */
    opacity: 0.5;
}

.buttons-container select {
    margin-right: 10px; /* Right margin for spacing between elements */
    padding: 8px 12px; /* Padding for usability */
    font-size: 14px; /* Set a common font size for both select and button */
}

/* Remove margin-right on the last item in the buttons-container to prevent unnecessary spacing */
.buttons-container select:last-child {
    margin-right: 0;
}

#search-input:disabled, 
#language-select:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    cursor: not-allowed;  /* Show not-allowed cursor when disabled */
    opacity: 0.6;  /* Optional: Add a slight opacity change to visually indicate it's disabled */
}

/* Input de Pesquisa */
.search-inputs {
    width: 100%;
    max-width: 960px; /* Garante um limite máximo consistente */
    margin: 0 auto; /* Centraliza */
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center aligns the input field */
}

.search-inputs input[type="text"] {
    width: 90%;
    margin-bottom: 5px;
}

.search-inputs button {
    margin-top: 5px; /* Space between input and button */
}

/* Hover effect for search inputs tooltip */
#search-inputs:hover #search-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Anchor buttons (links com cara de botão) — unificados */
a.action-button,
a.question-button,
a.action-button:link,
a.question-button:link,
a.action-button:visited,
a.question-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  margin: 10px auto;
  background: var(--btn-bg);
  color: #fff !important;            /* branco também em :visited */
  text-align: center;
  border: 1px solid transparent;
  font-size: 16px;
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}

a.action-button:hover,
a.question-button:hover,
a.action-button:focus-visible,
a.question-button:focus-visible {
  background: var(--btn-hover);
  opacity: .95;
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,.25); /* focus ring acessível */
}

a.action-button:active,
a.question-button:active {
  transform: translateY(1px);
}

/* Estado "desabilitado" para links */
a.action-button[aria-disabled="true"],
a.question-button[aria-disabled="true"],
a.action-button.is-disabled,
a.question-button.is-disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: .6;
  pointer-events: none;
}

/* Botões reais — alinhados ao mesmo padrão */
.button,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  background: var(--btn-bg);
  color: #fff;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--btn-hover);
  opacity: .95;
}

.button:active,
button:active,
input[type="submit"]:active {
  transform: translateY(1px);
}

.button:disabled,
button:disabled,
input[type="submit"]:disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: .6;
}

/* Estilo base para tooltips */
.tooltip {
    visibility: hidden;
    opacity: 1;
    position: fixed; /* ou absolute, dependendo do contexto */
    z-index: 2147483647 !important; /* garante que fique acima de outros elementos */
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    text-align: center;
    border-radius: 4px;
    padding: 4px 8px;  /* Padding reduzido para manter o tooltip compacto */
    box-shadow: none !important;
    font-size: 12px;
    width: auto;
    max-width: none !important;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
    left: 50%;  /* Centraliza horizontalmente */
    transform: translateX(-50%);
    isolation: isolate;
}

/* Exibição do tooltip ao passar o mouse ou focar */
.tooltip:hover,
.tooltip:focus,
.tooltip:active {
    background-color: #fff !important;
    opacity: 1 !important;
}

/* Exemplo de como mostrar o tooltip ao pairar sobre o elemento pai */
.parent-element:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.output-container {
    display: flex;
    width: 90%;
    margin: 0px auto; /* também centraliza dentro da main-container */
    flex-direction: column;  /* empilha os itens verticalmente */
    align-items: center;     /* centraliza no eixo horizontal */
    justify-content: center;
}

/* Estilo comum para #status-message */
#status-message {
    background-color: var(--status-bg);
    color: var(--status-text);
    display: none;
    position: relative;
    left: 0;
    width: 90%; 
    text-align: center;
    padding: 5px;
    font-size: 1em;
    margin-top: 5px;
    z-index: 100;
    animation: blink 0.4s linear infinite;
}

/* Estilização para erro: vermelho e piscante */
#status-message.error {
    color: red;
    font-weight: bold;
    animation: blink 1s infinite alternate;
}

/* Classe para realçar com blinking (por exemplo, em mensagens de erro) */
.blinking {
    color: red !important;
    animation: blink 1s step-start infinite;
}

/* Keyframes para animação de piscar */
@keyframes blink {
    0%, 100% {
        opacity: 1; /* Visível */
    }
    50% {
        opacity: 0; /* Invisível */
    }
}

/* Progress Containers */
#progress-bar-container {
    background-color: var(--progress-bg);
    display: none;  
    width: 90%; /* para ocupar toda a largura do container pai */
    margin: 10px 0; /* espaçamento vertical */
    height: 20px;
}

#progress-bar {
    background-color: var(--progress-bar);
    width: 1%;
    height: 100%;
    transition: width 0.4s ease;
}

#progress-spin-container {
    display: none;  /* ou block quando o spinner for exibido */
    margin: 20px auto;
    width: 50px;
    height: 50px;
    background-image: url('../images/spinner.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Estilo comum para mensagens de acurácia e fonte */
#accuracy-message,
#font-message {
    color: var(--text-secondary);
    font-size: 1em;
    text-align: center; /* opcional, se quiser centralizar a mensagem */
}

/* Caso você precise do efeito blinking para o accuracy message */
#accuracy-message.blinking {
    color: red !important;  /* Força a cor vermelha para destacar */
    animation: blink 1s step-start infinite;
}

/* Estilos básicos para sharing */
.share-button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-left: 10px; /* Espaçamento de 10px à esquerda */
    display: none; /* Inicialmente oculto; será exibido via JavaScript */
    background: none; /* Remove o fundo padrão do botão */
    border: none; /* Remove a borda padrão do botão */
    padding: 0; /* Remove o padding padrão do botão */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.share-button img {
    width: 100%;
    height: 100%;
}

.share-button:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.share-button:active {
    transform: scale(0.9);
}

.share-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

/* Estilos básicos para o modal */
.modal {
    display: none; /* Oculto por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escurecido */
}

/* Caixa de conteúdo do modal */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 8px;
    position: relative; /* Necessário para o botão "X" */
}

/* Botão de fechar (X) */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilo para o botão share dentro do modal */
.share-button-modal {
    position: absolute;
    top: 10px; /* Alinha na parte superior */
    left: 10px; /* Alinha à direita */
    width: 30px; /* Tamanho da imagem */
    height: 30px; /* Tamanho da imagem */
    cursor: default; /* Remove qualquer funcionalidade */
    opacity: 0.9; /* Levemente visível */
    pointer-events: none; /* Garante que não seja clicável */
}

/* Efeito ao passar o mouse sobre o botão */
.share-button-modal:hover {
    opacity: 1; /* Totalmente visível ao passar o mouse */
}

/* Container dos botões de compartilhamento */
.social-share-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Estilo comum para todos os botões de compartilhamento */
.social-share-buttons .social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Tamanho do botão */
    height: 60px;
    background-color: var(--share-whatsapp); /* Cor verde do WhatsApp */
    border: none;
    border-radius: 50%; /* Botão circular */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.social-share-buttons .social-button.email {
    background-color: var(--share-email); /* Cor vermelha para email */
}

/* Efeito de hover */
.social-share-buttons .social-button:hover {
    opacity: 0.9;
    transform: scale(1.05);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Estilo para ícones Font Awesome (::before) */
.social-share-buttons .social-icon::before {
    font-size: 1.8rem; /* Aumenta o tamanho do ícone */
    color: #fff; /* Define a cor branca fixa */
    display: inline-block; /* Garante que o ícone seja exibido */
    text-align: center; /* Centraliza o ícone */
    width: 100%; /* Ajusta a largura para garantir centralização */
    height: auto; /* Mantém proporção */
}

/* Efeito de hover nos botões */
.social-share-buttons .social-button:hover {
    opacity: 0.9;
    transform: scale(1.05); /* Leve aumento */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Acessibilidade: Estilo de foco */
.social-share-buttons .social-button:focus {
    outline: 3px solid #000;
}

/* Responsividade: Ajuste de tamanhos em telas menores */
@media (max-width: 600px) {
    .social-share-buttons .social-button {
        width: 50px;
        height: 50px;
    }

    .social-share-buttons .social-icon::before {
        font-size: 1.5rem; /* Ícones menores para telas pequenas */
    }
}