@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

body {
    font-family: 'Fira Code', monospace;
    background-color: #1e1e1e;
    color: #d4d4d4;
    margin: 0;
    padding: 0;
}

header, main, footer {
    padding: 40px;
    margin: 0 auto;
    max-width: 800px;
    border-radius: 5px;
}

header {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    border-bottom: 1px solid #444444;
    border-radius: 5px;
    padding: 60px 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

header h1 {
    margin: 0px;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Fira Code', monospace;
}

main {
    margin-top: 0;
    background-color: #252526;
    padding: 20px;
    border-radius: 5px;
    box-shadow: none;
}

section {
    margin-bottom: 20px;
}

label {
    color: #3c3c3c;
    font-weight: normal;
}

select, button, input {
    background-color: #3c3c3c;
    color: #d4d4d4;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    font-size: 1rem;
}

select:focus, button:focus, input:focus {
    outline: none;
    border-color: #007acc;
}

button {
    background-color: #0e639c;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.1s, box-shadow 0.1s;
}

button:hover {
    background-color: #b0b0b0; /* Cinza claro */
    transition: background-color 0.3s;
}

button:active {
    background-color: #888888; /* Cinza médio */
    transform: translateY(2px); /* Simula um botão pressionado */
    box-shadow: none;
}

button:disabled {
    background-color: #555555;
    color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
    border: 1px solid #444444;
}

/* Estilos gerais para todos os botões */
.btn {
    background-color: #0e639c;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Fira Code', monospace;
    margin: 5px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.green-button {
    background-color: #28a745;
    height: 35px;
}

.btn:hover {
    background-color: #1177bb;
}

.btn:disabled {
    background-color: #555555;
    color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
    border: 1px solid #444444;
}

/* Efeito ao clicar no botão (active) */
.btn:active {
    background-color: #888888; /* Cinza médio */
    transform: translateY(2px); /* Simula um botão pressionado */
    box-shadow: none;
}

/* Adicionar margem superior aos botões */
button.exportar-historico,
button.importar-historico,
button.limpar-historico {
    margin-top: 10px; /* Ajuste o valor conforme necessário */
}

/* Adicionar margem superior ao grupo de botões */
.button-group {
    margin-top: 10px; /* Ajuste o valor conforme necessário */
}

.button-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

#transcription-content,
#medical-record-content {
    height: 200px;
    overflow-y: auto;
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 10px;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    margin-bottom: 10px;
    text-align: left;
    font-family: 'Fira Code', monospace;
}

#transcription-content {
    overflow-y: auto;
    scroll-behavior: smooth;
}

#medical-record-content {
    text-align: justify;
    white-space: pre-wrap;
}

#medical-record-content p {
    margin: 0;
    padding: 5px 0;
    margin-bottom: 20px;
}

#medical-record-content br {
    line-height: 1.5;
}

#medical-record-content[contenteditable="true"] {
    border: 1px dashed #007acc;
    cursor: text;
    background-color: #2a2a2a;
}

#history-list {
    height: 200px;
    overflow-y: auto;
    background-color: #1e1e1e;
    padding: 0;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    list-style: none;
    margin: 0;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 6px;
    border-bottom: 1px solid #2d2d2d;
    background-color: #252526;
    color: #d4d4d4;
    transition: background-color 0.3s;
    font-size: 0.8rem;
    line-height: 1.2;
}

.history-item:hover {
    background-color: #373737;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 4px;
    color: #0e639c;
    transition: color 0.3s;
    padding: 2px;
    border-radius: 5px;
}

.history-item button:first-child {
    margin-left: 0;
}

.history-item button:hover {
    color: #1177bb;
}

.history-item .delete-btn {
    color: #d16969;
}

.history-item .delete-btn:hover {
    color: #e06c75;
}

.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.7);
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #252526;
    color: #d4d4d4;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content h2 {
    margin-top: 0;
}

.close-btn {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
}

.close-btn:hover {
    color: #eba2a2;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#theme-toggle {
    margin-top: 20px;
    width: 100%;
    max-width: 200px;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
    padding: 0;
}

body.light-theme {
    background-color: #ffffff;
    color: #333333;
}

body.light-theme header {
    background-color: #f3f3f3;
    color: #333333;
    border-bottom: 1px solid #e7e7e7;
}

body.light-theme main {
    background-color: #ffffff;
}

body.light-theme button {
    background-color: #0069d9;
}

body.light-theme select, body.light-theme button, body.light-theme input {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cccccc;
}

body.light-theme #transcription-content,
body.light-theme #medical-record-content {
    background-color: #f9f9f9;
    color: #333333;
    border: 1px solid #cccccc;
}

body.light-theme .history-item {
    background-color: #ffffff;
    color: #333333;
}

body.light-theme .history-item:hover {
    background-color: #f1f1f1;
}

body.light-theme .modal-content {
    background-color: #ffffff;
    color: #333333;
}

.status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status span {
    font-size: 1.2rem;
}

body.dark-theme {
    background-color: #333;
    color: #f4f4f9;
}

body.dark-theme header {
    background-color: #444;
}

body.dark-theme main {
    background-color: #555;
}

body.dark-theme button {
    background-color: #666;
}

footer {
    background-color: #f0f0f0; /* Cinza claro */
    color: #333333;
    text-align: center;
    padding: 30px 40px;
    border-top: 1px solid #cccccc;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Fira Code', monospace;
}

footer p {
    margin: 10px 0;
    font-size: 1rem;
}

footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

footer .social-icons a {
    color: #333333;
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.3s, transform 0.3s;
}

footer .social-icons a:hover {
    color: #007acc;
    transform: scale(1.2);
}

footer button {
    background-color: #0e639c;
    color: #ffffff;
}

footer button:hover {
    background-color: #1177bb;
}

#search-history {
    padding: 10px 10px;
    font-size: 1rem;
    margin-bottom: 10px;
    width: 50%; /* Dobrar a largura atual */
}

.bold-section {
    font-weight: bold;
}

#timer {
    margin-left: 0px;
    font-size: 1rem;
    color: #d4d4d4;
    
}

#rec-indicator {
    margin-left: 10px;
    font-size: 1rem;
    color: red;
    animation: blink 1s steps(2, start) infinite;
}

.hidden {
    display: none !important;
}

@keyframes blink {
    50% {
        visibility: hidden;
    }
}

.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: #252526;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #444444;
    width: 80%;
    max-width: 400px;
    border-radius: 5px;
    color: #d4d4d4;
    font-family: 'Fira Code', monospace;
}

.close-btn {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
}

.close-btn:hover {
    color: #eba2a2;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Fira Code', monospace;
}

.settings-buttons {
    display: flex;
    gap: 10px; /* Espaçamento entre os botões */
    justify-content: center; /* Centraliza os botões */
    margin-bottom: 20px; /* Espaço abaixo dos botões */
}

.settings-buttons button {
    flex: 1 1 calc(48% - 10px);
    height: 35px;
    font-size: 1.0rem;
    border-radius: 5px;
    padding: 0;
    max-width: 180px; /* Largura máxima dos botões */

}

@media (max-width: 500px) {
    .settings-buttons button {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #api-key {
        width: 100%;
    }
}

#api-key {
    width: 100%;
    height: 45px;
    padding: 8px;
    margin-bottom: 15px;
    font-size: 1rem;
    border-radius: 5px;
    box-sizing: border-box;
}

.buttons-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.buttons-group button {
    flex: 1;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
    padding: 0;
    margin-top: 10px; /* Ajuste o valor conforme necessário */
}

@media (max-width: 500px) {
    .buttons-group {
        flex-direction: column;
    }

    .buttons-group button {
        width: 100%;
    }

    #theme-toggle {
        width: 100%;
        max-width: none;
    }
}

.green-button {
    background-color: #28a745;
    color: #ffffff;
}

.green-button:hover {
    background-color: #218838;
}

/* Estilos para a área de configurações */
#settings-modal .modal-content {
    background-color: #ffffff; /* Fundo branco */
    color: #000000; /* Texto preto */
    padding: 20px;
    border-radius: 5px;
    font-family: 'Fira Code', monospace;
    max-width: 600px;
    margin: auto;
}

/* Botão de fechar */
#settings-modal .close-btn {
    color: #000000;
    font-size: 1.5rem;
    float: right;
    cursor: pointer;
}

/* Título */
#settings-modal h2 {
    color: #333333; /* Cinza escuro */
    border-bottom: 1px solid #eba2a2;
    padding-bottom: 10px;
    margin-top: 0;
}

/* Labels */
#settings-modal label {
    color: #555555;
    display: block;
    margin-top: 20px;
}

/* Input da chave API */
#settings-modal input[type="text"] {
    background-color: #f9f9f9;
    color: #000000;
    border: 1px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
}

/* Status da chave API */
#api-key-status {
    color: #ce9178; /* Laranja */
    margin-top: 10px;
}

/* Botões */
.settings-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    
}

.settings-buttons button {
    background-color: #333333;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Fira Code', monospace;
    transition: background-color 0.3s;
    
}

.settings-buttons button:hover {
    background-color: #555555;
}

/* Estilo para o texto abaixo do botão "Alternar Tema" */
.settings-text {
    text-align: justify;
    color: #000000;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    line-height: 1.3;
     
}

/* Botão de alternar tema */
#theme-toggle {
    background-color: #e0e0e0;
    color: #000000;
}

#theme-toggle:hover {
    background-color: #d0d0d0;
}

/* Título da Seção Temporizador de Consulta */
.timer-title {
    color: black;
    font-size: 1.5rem;
    margin-bottom: 10px;
    
}

/* Display do Temporizador */
.timer-display {
    color: red;
    font-size: 2rem;
    text-align: center;
    margin: 20px 0px;
    font-weight: bold; /* Adicionado */
}

/* Estilos para as opções de alerta */
.alert-options {
    margin-top: 10px;
}

.alert-options label {
    display: block;
    color: #3c3c3c;
    margin-bottom: 2px;
}

.alert-checkbox {
    margin-right: 5px;
}

#cid10-results {
    max-height: 300px; /* Ajuste este valor para caber aproximadamente 10 resultados */
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

#cid10-results li {
    list-style: none;
    padding: 5px 10px;
    border-bottom: 1px solid #3c3c3c;
}

#cid10-results li:last-child {
    border-bottom: none;
}

/* Botões de Toggle */
.toggle-btn {
    background: none;
    border: none;
    color: #0e639c;
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: 10px;
    transition: transform 0.3s;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn.expanded {
    transform: rotate(45deg); /* Transforma o + em x */
}

/* Esconder conteúdo por padrão */
.hidden {
    display: none !important;
}

/* Estilo para a lista de resultados */
#cid10-results li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid #3c3c3c;
}

/* Estilo do botão de copiar */
.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

/* Estilo do ícone dentro do botão */
.copy-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Estilo para títulos das seções */
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    
}

/* Transição suave */
#timer-content,
#cid10-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
}

/* styles.css */



#timer-content.hidden,
#cid10-content.hidden {
    max-height: 0;
    opacity: 0;
}

#timer-content:not(.hidden),
#cid10-content:not(.hidden) {
    max-height: 1000px; /* Valor grande o suficiente */
    opacity: 1;
}

/* Estilos para a Calculadora Médica */
#medical-calculator {
    margin-top: 20px;
}

#medical-calculator label {
    display: block;
    margin-top: 10px;
}

#medical-calculator input[type="number"],
#medical-calculator select {
    width: 100%;
    max-width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}

#calculator-content #calc-result {
    margin-top: 20px;
}

.dose-type-selection label {
    margin-right: 20px;
}

.hidden {
    display: none !important;
}

 
    


/* Animação de tremer */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: 30; /* Aproximadamente 15 segundos */
}


#price-calculator-content .medicamentos-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#price-calculator-content .medicamento {
    border: 1px solid #3c3c3c;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#price-calculator-content label {
    display: block;
    margin-top: 5px;
    color: #d4d4d4;
}

#price-calculator-content input[type="text"],
#price-calculator-content input[type="number"] {
    width: 80%;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    max-width: 300px; /* Define um limite máximo de largura */
}

#price-calculator-content .button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

#price-calculator-content #preco-resultado p {
    margin-top: 10px;
    color: #333333; /* Cor padrão para resultados */
    font-family: 'Fira Code', monospace;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dddddd;
    /* Removido font-weight: bold; */
}

#preco-resultado p.melhor-custo {
    background-color: #e6ffe6 !important; /* Verde claro */
    border-color: #33cc33 !important;
    color: #006600 !important;
}

#preco-resultado p.pior-custo {
    background-color: #ffe6e6 !important; /* Vermelho claro */
    border-color: #ff3333 !important;
    color: #990000 !important;
}

#preco-resultado p.melhor-custo {
    background-color: #e6ffe6; 
    border-color: #33cc33;
    color: #006600; 
}

#preco-resultado p.pior-custo {
    background-color: #ffe6e6; 
    border-color: #ff3333;
    color: #990000; 
}

/* Opcional: Melhorar estilização geral */
#preco-resultado strong {
    color: #007acc; /* Azul para destacar o nome do medicamento */
}

/* Estilos para destacar os melhores e piores medicamentos */
#preco-resultado p {
    font-size: 1rem;
}

/* Estilos para a Calculadora Comparativa de Preços */
#price-calculator-content {
    margin-top: 40px;
}

#price-calculator-content .medicamentos-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espaçamento entre as colunas */
}

/* Estilização de cada bloco de medicamento */
#price-calculator-content .medicamento {
    flex: 1 1 calc(25% - 20px); /* Até 4 colunas */
    border: 1px solid #cccccc;
    padding: 15px;
    border-radius: 5px;
    background-color: #ffffff; /* Fundo branco */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* Centralização dos elementos internos */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centralizar os títulos dos medicamentos */
#price-calculator-content .medicamento h3 {
    color: #007acc; /* Azul suave para destaque */
    font-family: 'Fira Code', monospace;
    text-align: center;
    margin-bottom: 10px;
}

/* Centralizar os labels */
#price-calculator-content .medicamento label {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    color: #333333; /* Texto escuro */
    font-family: 'Fira Code', monospace;
}

/* Centralizar as caixas de texto e ajustar a largura */
#price-calculator-content .medicamento input[type="text"],
#price-calculator-content .medicamento input[type="number"] {
    width: 80%; /* Define uma largura menor para centralização */
    padding: 8px;
    margin-top: 5px;
    background-color: #f9f9f9; /* Fundo cinza muito claro */
    color: #333333; /* Texto escuro */
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-family: 'Fira Code', monospace;
    transition: background-color 0.3s, border-color 0.3s;
    max-width: 300px; /* Define um limite máximo de largura */
    
    /* Centralizar horizontalmente */
    margin-left: auto;
    margin-right: auto;
}

/* Estilizar o botão "Limpar Tudo" */
#limpar-tudo-btn {
    background-color: #ffcccc;
    color: #990000;
}

#limpar-tudo-btn:hover {
    background-color: #ffb3b3;
    border-color: #ff6666;
}

/* Responsividade para telas menores */
@media (max-width: 1200px) {
    #price-calculator-content .medicamentos-flex {
        flex: 1 1 45%; /* Duas colunas em telas médias */
    }
}

@media (max-width: 768px) {
    #price-calculator-content .medicamentos-flex {
        flex: 1 1 100%; /* Uma coluna em telas pequenas */
    }
}

/* Ajustar a altura da caixa de texto "Prontuário" */
#medical-record-content {
    height: 450px;
}

/* Estilos para a área da Calculadora Médica */
#medical-calculator {
    background-color: #f5f5f5; /* Fundo claro */
    color: #333333; /* Texto escuro para melhor legibilidade */
    border: 1px solid #cccccc; /* Borda sutil */
    padding: 20px;
    border-radius: 8px;
}

#medical-calculator input,
#medical-calculator select,
#medical-calculator button {
    background-color: #ffffff; /* Fundo branco para campos */
    color: #3c3c3c; /* Texto escuro */
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 5px;
}

/* Estilos para a área da Comparador de Preços */
#price-calculator-section {
    background-color: #f5f5f5; /* Fundo claro */
    color: #333333; /* Texto escuro para melhor legibilidade */
    border: 1px solid #cccccc; /* Borda sutil */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

#price-calculator-content input,
#price-calculator-content select,
#price-calculator-content button {
    background-color: #ffffff; /* Fundo branco para campos */
    color: #3c3c3c; /* Texto escuro */
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 5px;
}

/* Estilos para a área da Timer */
#timer {
    background-color: #f5f5f5; /* Fundo claro */
    color: #333333; /* Texto escuro para melhor legibilidade */
    border: 1px solid #cccccc; /* Borda sutil */
    padding: 20px;
    border-radius: 8px;
    
     
}

#timer input,
#timer select,
#timer button {
    background-color: #ffffff; /* Fundo branco para campos */
    color: #3c3c3c; /* Texto escuro */
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 5px;
}

/* Estilos para a área pesquisa CID-10 */
#cid10-search {
    background-color: #f5f5f5; /* Fundo claro */
    color: #333333; /* Texto escuro para melhor legibilidade */
    border: 1px solid #cccccc; /* Borda sutil */
    padding: 20px;
    border-radius: 8px;
}

#cid10-search input,
#cid10-search select,
#cid10-search button {
    background-color: #ffffff; /* Fundo branco para campos */
    color: #3c3c3c; /* Texto escuro */
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 5px;
}

input, select {
    border-radius: 10px;
}

input[type="checkbox"],
select {
    margin-bottom: 3px; /* Ajuste o valor conforme necessário */
}

.week-inputs {
    display: flex;
    gap: 20px;
}

.week-column {
    flex: 1;
}

/* Exibir colunas adicionais quando 2 meses forem selecionados */
.two-months .week-column#additional-weeks {
    display: block;
}

#cid10-input {
    width: 500px; /* Ajuste a largura conforme necessário */
    height: 35px; /* Ajuste a altura conforme necessário */
}

/* Estilo para o alerta personalizado */
.alerta-customizado {
    background-color: #ffcccc;
    color: #990000;
    padding: 10px 20px;
    border: 1px solid #ff3333;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    font-family: 'Fira Code', monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from { opacity: 0; right: 0; }
    to { opacity: 1; right: 20px; }
}

@keyframes fadeout {
    from { opacity: 1; right: 20px; }
    to { opacity: 0; right: 0; }
}

/* styles.css */
.alerta-customizada {
    background-color: #ffcccc;
    color: #990000;
    padding: 10px 20px;
    border: 1px solid #ff3333;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    font-family: 'Fira Code', monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
    /* Adicione quaisquer outras propriedades necessárias para combinar com o estilo existente */
}

#settings-btn {
    font-size: 1.2rem;
    padding: 12px 20px;
    background-color: #3c3c3c;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#settings-btn:hover {
    background-color: #aaaaaa;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

#settings-btn:active {
    background-color: #2d2d2d;
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos para os botões incrementadores */
#increment-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.increment-btn, .clear-btn {
    background-color: #0e639c;
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1 1 0px;
    margin: 1px;
    font-size: 1rem;
    font-family: 'Fira Code', monospace;
}

.increment-btn:hover, .clear-btn:hover {
    background-color: #1177bb;
}

/* Estilo específico para o botão "Apagar" maior */
.clear-btn {
    flex: 1 1 100%;
    background-color: #e06c75;
}

.clear-btn:hover {
    background-color: #be5046;
}

/* Centraliza o container dos controles do temporizador */
#timer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para a caixa de entrada dos minutos */
#timer-input {
    width: 200px; /* Ajuste a largura conforme necessário */
    height: 60px; /* Aumenta a altura da caixa */
    text-align: center; /* Centraliza o texto digitado */
    font-size: 1.5rem; /* Fonte maior */
    font-weight: bold; /* Fonte em negrito */
    padding: 10px;
    border: 2px solid #0e639c;
    border-radius: 5px;
    margin-bottom: 20px; /* Espaçamento abaixo da caixa */
    background-color: #3c3c3c;
    color: #ffffff;
}

/* Centraliza o texto do placeholder */
#timer-input::placeholder {
    text-align: center;
    font-size: 1.0rem;
    font-weight: bold;
    color: #cccccc;
}

/* Estilos para o Tradutor Online */
#tradutor-section {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 20px;
    color: #333333; /* Texto escuro para melhor legibilidade */
    border: 1px solid #cccccc; /* Borda sutil */
    border-radius: 8px;
   
}

#tradutor-section h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}



#tradutor-content.hidden {
    display: none;
}

.language-selectors {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.language-selectors label {
    margin-right: 5px;
}

.language-selectors select {
    margin-right: 20px;
    padding: 5px;
}


/* Estilos para o botão de intercambiar idiomas */
#swap-languages-btn {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
}



/* Estilos para notificações */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #000000;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
}

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

.modal-content {
    background-color: #1e1e1e;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #445e6e;
    width: 80%;
    max-width: 500px;
    color: #ffffff;
    border-radius: 5px;
}

.close-button {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

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

/* Ajustes adicionais */
.language-selectors {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.language-selectors select {
    margin-right: 10px;
    padding: 0px;
}

.translator-textareas {
    display: flex;
    flex-direction: column;
    
}

.translator-textareas textarea {
    width: 100%;
    height: 100px;
    resize: none;
    
}

/* Estilos para as caixas de texto do Tradutor Online */
.text-area-group textarea {
    font-size: 1rem; /* Ajuste para o tamanho desejado */
    font-family: 'Fira Code', monospace; /* Herda a fonte das caixas de transcrição e prontuário */
}

/* Estilos para os grupos de texto e botões */
.translator-textareas {
    display: flex;
    flex-direction: column;
}


/* Adicione esta regra para separar os botões da caixa de tradução */
.text-area-group .button-group {
    margin-bottom: 20px; /* Espaço de 20px entre botões e caixa de tradução */
}

/* styles.css */

/* Container da barra de teste */
#microphone-test {
    width: 70px;
    height: 17px;
    background-color: #cccccc;
    margin-left: 60px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    overflow: hidden;
}

/* Nível da barra de teste */
#mic-level {
    width: 0%;
    height: 100%;
    background-color: rgb(108, 211, 157);
    transition: width 0.01s;
}

/* Estilo para o símbolo de aviso */
#mic-warning {
    color: #f00;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* styles.css */

.hidden {
    display: none !important;
}

.right-align {
    display: flex;
    justify-content: right;
}

.bg-f0f0f0-padding {
    background-color: #f0f0f0;
    padding: 10px;
}

/* Estilização geral para compatibilidade */

/* Estilos para Firefox */
::-webkit-scrollbar {
    scrollbar-width: thin; /* Define a largura da barra de rolagem */
    scrollbar-color: #C0C0C0 #808080; /* Cor da thumb e do trilho */
}

/* Estilos para navegadores baseados em WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 16px; /* Largura da barra de rolagem vertical */
    height: 16px; /* Altura da barra de rolagem horizontal */
}

::-webkit-scrollbar-track {
    background: #ffffff; /* Cor do trilho */
    border: 1px solid #000000; /* Borda para dar efeito 3D */
}

::-webkit-scrollbar-thumb {
    background-color: #C0C0C0; /* Cor da "thumb" */
    border: 1px solid #000000; /* Borda para dar efeito 3D */
    border-radius: 6; /* Barras de rolagem retas, sem arredondamento */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #000000; /* Cor da thumb ao passar o mouse */
}

/* Botões de Rolagem (pode não ser suportado em todos os navegadores) */
::-webkit-scrollbar-button {
    background: #C0C0C0; /* Cor dos botões */
    border: 1px solid #000000; /* Borda para efeito 3D */
}

::-webkit-scrollbar-button:single-button {
    height: 16px;
    width: 16px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo {
    height: 200px; /* Ajuste o tamanho conforme necessário */
    
}

/* Estilize o botão "Traduzir" para ser um pouco mais largo */
#translate-btn {
    width: 130px; /* Largura maior que os demais botões */
    color: #000000;
    opacity: 0.7;
    border: 1px solid #444444;
    cursor: pointer;
    font-weight: bold;
transition: background-color 0.3s;
}

#translate-btn:hover {
background-color: #cfc2c2;
}

.privacy-policy {
    font-size: 1.0rem;
    line-height: 1.5;
    margin-bottom: 1em;
    color: #000000;
    text-align: justify;
    line-height: 1.2;
}

.privacy-policy p {
    margin-bottom: 1em;
}

.privacy-policy .more-text {
    display: none;
}

.privacy-policy .toggle-text {
    display: block;
    text-align: right;
    color: #6e6e6e;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
}

.privacy-policy .toggle-text:hover {
    color: #000000;
}

.nota-transcricao-inicial {
    font-size: 1.0rem;
    line-height: 1.5;
    margin-bottom: 1em;
    color: #000000;
    text-align: justify;
    line-height: 1.2;
}

.nota-transcricao-inicial p {
    margin-bottom: 1em;
}

.nota-transcricao-inicial .more-text {
    display: none;
}

.nota-transcricao-inicial .toggle-text {
    display: block;
    text-align: right;
    color: #6e6e6e;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
}

.nota-transcricao-inicial .toggle-text:hover {
    color: #000000;
}


.nota-prontuario-inicial {
    font-size: 1.0rem;
    line-height: 1.5;
    margin-bottom: 1em;
    color: #000000;
    text-align: justify;
    line-height: 1.2;
}

.nota-prontuario-inicial p {
    margin-bottom: 1em;
}

.nota-prontuario-inicial .more-text {
    display: none;
}

.nota-prontuario-inicial .toggle-text {
    display: block;
    text-align: right;
    color: #6e6e6e;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
}

 /* Seção de Passos */
 .steps {
    padding: 10px 10px;
    background-color: #f9f9f9;
}

.steps h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.4em;
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step {
    display: flex;
    align-items: center;
    margin: 1px 0;
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.step-number {
    background-color: #000000;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    margin-right: 0px;
    flex-shrink: 0;
}

.step-description {
    font-size: 1.1em;
}

/* Seção de FAQ */
.faq {
    padding: 10px 10px;
    background-color: #fff;
}

.faq h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.4em;
}

.faq-item {
    max-width: 800px;
    margin: 10px auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.faq-question {
    background-color: #000000;
    color: #fff;
    padding: 15px;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    font-size: 1.0em;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #4e4e4e;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.5em;
    transition: transform 0.3s;
}

.faq-question.active::after {
    content: '-';
}

.faq-answer {
    display: none;
    background-color: #f1f1f1;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 1em;
}





/* Responsividade */

    

    .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-number {
        margin-bottom: 15px;
    }



    /* Animação de piscar */
@keyframes blinkMinificador {
    0% { background-color: #c9c9c9; }
    50% { background-color: #ffcccc; }
    100% { background-color: #c9c9c9; }
}

.blinkMinificador {
    animation: blinkMinificador 1s ease-in-out 15;
}

/* styles.css */
#mic-button {
    background-color: #ffffff;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5px;
    font-size: 1.7rem;
    font-family: 'Fira Code', monospace;
    margin: 0px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Torna o botão redondo */
    padding: 0; /* Remove o espaçamento interno */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Defina a animação de piscar */
@keyframes micBlink {
    0%, 100% {
        background-color: #f3d0d0;
    }
    50% {
        background-color: transparent;
    }
}

/* Aplique a animação quando o microfone estiver ativo */
#mic-button.active {
    animation: micBlink 2s infinite;
}

#mic-button.active {
    background-color: #f3d0d0; /* Cor quando o microfone está ativo */
}

#mic-button:hover {
    background-color: #f3d0d0;
}

#warning-modal {
    top: 200px; /* Ajuste este valor conforme necessário */
    z-index: 2000; /* Garante que fique acima das outras modais */
}

section .openai-button {
    background-color: #000000; /* Azul do tema de desenvolvedor */
    color: #ffffff;
    border: none;
    padding: 10px 30px; /* Aumenta o tamanho do botão */
    font-size: 1.1rem;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: block;
    margin: 0 auto;
    

}

section .openai-button:hover {
    background-color: #c9f0d6;
}




/* No arquivo styles.css, adicione: */
.flash-button {
    animation: flash 1.5s infinite;
}

@keyframes flash {
    0% { background-color: #D98880; }
    50% { background-color: #F5B7B1; }
    100% { background-color: #D98880; }
}