/* Reset básico */
* {
  margin: 0;

  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}


/* Estilo da div seo-text */
.seo-text {
  background-color: #f9f9f9; /* Cor de fundo suave */
  padding: 20px; /* Espaçamento interno */
  border-radius: 8px; /* Bordas arredondadas */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
 
  text-align: center; /* Centraliza o texto */
}

/* Estilo dos títulos dentro da div seo-text */
.seo-text h1.seo {
  font-size: 2.5em; /* Tamanho grande para o título principal */
  color: #007bff; /* Cor azul para destacar */
  margin-bottom: 10px; /* Espaçamento abaixo do título */
}

.seo-text h2.seo {

  font-size: 1.0rem;
  color: #444; /* Cor escura para contraste */
  text-align: center;
  margin-bottom: 15px;
  font-weight: normal;
  line-height: 1.5;
  }
  



/* Estilo para responsividade */
@media (max-width: 768px) {
  .seo-text h1.seo {
    font-size: 2em; /* Reduz o tamanho do título em dispositivos móveis */
  }

  .seo-text h2.seo {
    font-size: 1.5em; /* Reduz o tamanho do subtítulo em dispositivos móveis */
  }


}

/* Estilo da top-bar */
.top-bar {
  background: #909c9c;
  padding: 10px 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Estilo do formulário */
#dose-form {
  display: flex;
  gap: 10px; /* Espaçamento entre os elementos */
  flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
  justify-content: center; /* Centraliza os elementos */
  width: 100%; /* Ocupa 100% da largura da top-bar */
}

#dose-form label {
  font-size: 16px;
  white-space: nowrap; /* Impede que o texto do label quebre em várias linhas */
}

#dose-form input {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 100%; /* Ocupa 100% da largura disponível */
  max-width: 150px; /* Define uma largura máxima para os inputs */
}











/* Layout principal */
.container {
display: flex;
justify-content: center;
padding: 40px;
}

.layout {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
}

.medicacao-lista {
width: 40%;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-height: 80vh; /* Define a altura máxima da lista de medicações */
overflow-y: auto; /* Permite rolagem vertical */
position: sticky; /* Mantém a posição fixa durante o scroll */
top: 20px; /* Distância do topo da página para a lista */
}

.medicacao-lista h2 {
color: #007bff;
margin-bottom: 20px;
}

.medicacao-lista h3 {
color: #444;
margin-top: 20px;
}

.medicacao-linha {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.medicacao-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.medicacao-btn:hover {
background-color: #0056b3;
}

/* Lado direito (resultados e informações) */
.calculo {
width: 55%;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#resultado,
#informacoes {
margin-bottom: 20px;
}

#resultado h2,
#informacoes h2 {
color: #007bff;
}

#resultado p,
#informacoes p {
font-size: 16px;
color: #555;
}


.dose-info {
margin-top: 10px;
font-size: 14px;
color: #555;
background-color: #f9f9f9;
padding: 10px;
border-radius: 5px;
border-left: 4px solid #007bff;
border-right: 4px solid #007bff;
}


/* Estilo do slider */
.styled-slider {
-webkit-appearance: none; /* Remove o estilo padrão */
width: 100%;
height: 8px;
background: #e0e0e0; /* Cor de fundo da barra */
border-radius: 5px;
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
}

.styled-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Remove o estilo padrão */
appearance: none;
width: 20px;
height: 20px;
background: #007bff; /* Cor do botão */
border-radius: 50%; /* Deixa o botão redondo */
cursor: pointer;
border: 2px solid #fff; /* Borda branca ao redor do botão */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidade */
}

.styled-slider:active {
opacity: 1; /* Aumenta a opacidade ao interagir */
}

/* Estilo para Firefox */
.styled-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.styled-slider::-moz-range-track {
height: 8px;
background: #e0e0e0;
border-radius: 5px;
}

/* Estilo do tooltip */
#slider-tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: #007bff;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
display: none;
}

.styled-slider:active + #slider-tooltip {
display: block;
}

/* Estilo das marcas do slider */
.slider-marks {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 12px;
color: #666;
}

/* Container do slider */
.slider-container {
position: relative;
width: 100%;
margin-top: 10px;
}


/* Elementos dinâmicos */

/* Resultado */
#resultado {
background-color: #f1f9ff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

#resultado h2 {
color: #007bff;
margin-bottom: 10px;
}

#resultado p {
font-size: 16px;
color: #333;
margin: 5px 0;
}

/* Informações da Medicação */
#informacoes {
background-color: #eef4f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#informacoes h2 {
color: #007bff;
margin-bottom: 10px;
}

#informacoes p {
font-size: 16px;
color: #444;
line-height: 1.5;
}

/* Inputs e botões dinâmicos */
#dose-medicao {
width: 80px;
padding: 5px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
transition: border-color 0.3s;
}

#dose-medicao:focus {
border-color: #007bff;
}

#calcular-dose,
#dose-padrao,
#dose-alta, #dose-50, #dose-80 {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 8px 15px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}

#calcular-dose:hover,
#dose-padrao:hover,
#dose-alta:hover {
background-color: #0056b3;
}

#calcular-dose:focus,
#dose-padrao:focus,
#dose-alta:focus {
outline: 2px solid #80d0ff;
}

.observacao-dose {
font-size: 14px; /* Tamanho pequeno para não sobrecarregar */
font-family: Arial, sans-serif; /* Fonte simples */

padding: 1px 1px; /* Espaçamento interno para dar um "respiro" */
border-radius: 5px; /* Bordas arredondadas */
margin-bottom: 10px; /* Espaço abaixo para não grudar no próximo item */

}

.dosemax-amoxclav0 {
display: inline-block;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 20px;
}

.dosemax-amoxclav1 {
font-size: 14px; /* Tamanho pequeno para não sobrecarregar */
font-family: Arial, sans-serif; /* Fonte simples */
float:right;
word-wrap: break-word; /* Quebra o texto, se necessário */
}

.dosemax-amoxclav2 {
flex-shrink: 0; /* Garante que o "Dose Máxima:" não seja comprimido */
}


.recomendado {
color: #007BFF;
font-size: 15px;
}

.explicacao {
color: #007BFF;
font-size: 15px; 
}

/* Estilo dos alertas */
.alert {
background-color: #ffefef;
color: #d9534f;
padding: 10px;
border-radius: 5px;
border: 1px solid #d9534f;
margin-top: 10px;
}

.alert strong {
font-weight: bold;
}



.icone-seringa {
font-size: 1.5em; 
color: #007BFF;
transform: scaleX(-1);
}

.icone-bottle {
  font-size: 1.5em; 
  color: #007BFF;}

  .fa-hourglass{
  font-size: 1.5em; 
  color: #0d1218;}

.icone-gotas   {
    font-size: 1.5em; 
    color: #007BFF;
    transform: scaleX(-1);}

    .icone-gotas-dramin   {
      font-size: 1.5em; 
      color: #007BFF;
      transform: scaleX(-1);
    margin-right: 19px;}


  .icone-comprimido {
    font-size: 1.5em; 
    color: #007BFF;}

   .icone-loção{
    font-size: 1.5em; 
    color: #007BFF;}
   

     .icone-musculo {
      width: 20px; /* Ajuste o tamanho do ícone */
      background-image: url("musculo.svg");
      display: inline-block;
      width: 16px;
      height: 16px;
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-left: 1px;

    }

    .icone-veia {
      transform: rotate(45deg);
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("veia.svg");
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-left: 1px;

    }

   

    


    
    .aviso-dose{color: red; font-weight: bold; text-align: center;
    }
    



   

  
  






/* Responsividade para telas menores */
@media (max-width: 768px) {
  /* Reset básico para telas menores */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Evita rolagem horizontal */
  }

  /* Ajustes no container principal */
  .container {
    padding: 0; /* Remove o padding lateral */
    width: 100%; /* Ocupa 100% da largura */
  }

  /* Ajustes no layout */
  .layout {
    flex-direction: column; /* Coloca os elementos em coluna */
    width: 100%; /* Ocupa 100% da largura */
    padding: 0; /* Remove o padding */
    margin: 0; /* Remove a margem */
    gap: 0; /* Remove o espaçamento entre os elementos */
  }

  /* Ajustes na lista de medicações */
  .medicacao-lista {
    width: 100%; /* Ocupa 100% da largura */
    padding: 10px; /* Reduz o padding */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
    max-height: none; /* Remove a altura máxima */
    overflow-y: visible; /* Remove a rolagem vertical */
    position: static; /* Remove a posição fixa */
  }

  /* Ajustes no cálculo e informações */
  .calculo {
    width: 100%; /* Ocupa 100% da largura */
    padding: 10px; /* Reduz o padding */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
  }

  /* Ajustes na top-bar */
  .top-bar {
    width: 100%; /* Ocupa 100% da largura */
    padding: 10px; /* Reduz o padding */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
  }

  /* Ajustes no formulário */
  #dose-form {
    width: 100%; /* Ocupa 100% da largura */
    padding: 0 10px; /* Reduz o padding */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
  }

  /* Ajustes nos inputs do formulário */
  #dose-form input {
    width: 100%; /* Ocupa 100% da largura */
    max-width: none; /* Remove a largura máxima */
  }

  /* Ajustes nos botões de medicação */
  .medicacao-btn {
    padding: 8px 12px; /* Reduz o padding dos botões */
    margin: 2px; /* Reduz a margem dos botões */
    font-size: 14px; /* Reduz o tamanho da fonte */
  }

  /* Ajustes no resultado e informações */
  #resultado,
  #informacoes {
    padding: 10px; /* Reduz o padding */
  }



  /* Ajustes gerais para evitar espaços extras */
  * {
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
    margin: 0; /* Remove a margem */
    padding: 0; /* Remove o padding */
  }

  /* Ajustes para evitar rolagem horizontal */
  body {
    overflow-x: hidden;
  }
}