/* Reset e base */
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
html, body { height:100%; width:100%; overflow-x:hidden; }
body { background-color: #00427e; background-image: url('../images/padrao/detalhe-footer.png'); background-size: cover; color: #4A4D4F; text-align: center; animation: fadeIn 1s forwards; background-size: 100%;}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Container principal */
.container { width: 80vw; max-width:1200px; min-width:300px; min-height:70vh; margin:5vh auto; background: #FFF; border-radius:50px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); overflow:hidden; }

/* Banner flex */
.div-principal-banner { display: flex; flex-wrap: nowrap; height:100%; }

/* Coluna esquerda */
.div-esquerda { background: #00427e; color:#FFF; width: 30%; min-width: 220px; padding: 2rem; display: flex; flex-direction: column; align-items: center; border-radius:50px 0 0 50px; height:auto; min-height:80vh; }
.imagem_aebel { width:80%; height:auto; margin-bottom:1rem; }
.div-esquerda h1 { font-size:2rem; margin-bottom:.5rem; }
.div-esquerda h3 { font-size:1.2rem; margin-bottom:1.5rem; }

/* Navbar de links - sempre vertical */
.navbar { width:100%; overflow-y:auto; }
.navbar ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.navbar a { display:inline-block; padding:.6em 1em; border-radius:50px; color:#9BCFE0; text-decoration:none; transition:0.2s; }
.navbar a:hover { background:#0072a9; transform:scale(1.1); }

/* Coluna direita */
.div-direita { background:#FFF; width:100%; padding:2rem; border-radius:0 50px 50px 0; display:flex; flex-direction:column; align-items:center; height:100%; }

/* Caixa de busca */
.search-container { position:relative;display: flex; width:100%; max-width: 600px; margin-bottom:2rem; }
#search { width:40vw; padding: .8em 1em; border:none; border-radius:50px; box-shadow: inset 0 5px 10px rgba(0,0,0,0.1); font-size:1rem; }
#clear-input { position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:1.2rem; color:#888; cursor:pointer; display:none; }

/* Medicamento principal - oculta por padrão */
#medicamento_principal { display:none; width:100%; }
.medicamento-info { width:100%; max-width:800px; background:#FFF; border-radius:50px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding:2rem; overflow-y:auto; }
/* #div_item { text-align:justify; }
.div_item_p { margin-bottom:1rem; padding:1rem; border-radius:20px; background:#F9F9F9; }
.div_item_p_b { color:#00427e; } */
#div_item {
  text-align: justify;
  /* se quiser limitar largura, para ver as quebras acontecerem */
  /* max-width: 600px; */
}

.div_item_p {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 20px;
  background: #F9F9F9;

  /* forçar quebra de linhas longas */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* word-break: break-all;  opcional */
  white-space: normal;
}

.div_item_p span {
  /* herda do pai, mas caso queira garantir */
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.div_item_p_b {
  color: #00427e;
}

/* Animação highlight */
@keyframes highlight { from { background-color: rgba(155,207,224,0.5); } to { background-color: transparent; } }

/* Jquery UI custom */
.ui-autocomplete { max-height:200px; overflow-y:auto; border-radius:20px; max-width: 40vw; }
.ui-menu-item-wrapper { 
  box-shadow: inset 0 5px 5px #CED0DE;
  margin-bottom: 2px;
}
.ui-menu-item-wrapper.ui-state-active { background:#00427e !important; }

/* Responsividade */
@media (max-width: 1024px) {
  .div-principal-banner { flex-wrap: wrap; }
  .div-esquerda, .div-direita { width:100%; border-radius:50px; }
  .div-esquerda { order:2; }
  .div-direita { order:1; }
}
@media (max-width: 600px) {
  .div-esquerda h1 { font-size:1.5rem; }
  .div-esquerda h3 { font-size:1rem; }
  .navbar ul { gap:.3rem; }
  #search { font-size:.9rem; }
  .medicamento-info { padding:1rem; }
  #div_item p { font-size:.9rem; padding:.8rem; }
  .div-esquerda{
    height:100%;
    min-height: 10vh;
  }
}

.imagem-autocomplete{
  height: 30px;
  width: 30px;
}

.info{
  margin-bottom: 2vh;
}