body {
  background: #092638; /* linear-gradient(to right, #3d3d3d 0%, #ff1b1b 50%, #3d3d3d 100%); */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95vh;
  margin: 0;
  padding: 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* container principal */
.container-content {
  display: flex;
  flex-direction: column; /* empilha: linha de conteúdo + p embaixo */
  align-items: center;
  /* background-image: linear-gradient(45deg, #F2E6D8, #BFA994); */
  background: #092638;
  color: black;
  border-radius: 2vh;
  padding: 2rem;
  min-height: 36vh;
}

img {
  margin-bottom: -6vw;
  width: 51vh;
  height: auto;
  background: #092638;
  margin-top: -6vw;
}



/* linha que contém logo + login */
.content-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  width: 100%;
  flex: 1; /* ocupa o espaço vertical disponível */
}

/* blocos individuais */
.contant-container,
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 30vw;
}


h1 {
    font-size: 1.5rem;
    color: #3b3b3b;
}

h2 {
    font-size: 1.2rem;
    color: #535555;
}

/* form estilizado */
form {
  width: 30vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  margin-top: 6vh;
}

input {
  padding: 2vh;
  width: 60%;
  border-radius: 1vh;
  border: 0;
  text-align: center;
  background: #FFFFFF;
}

button {
  border: 0;
  width: 50%;
  border-radius: 1vh;
  padding: 1.5vh;
  background: #ff3838;
  color: white;
  font-weight: 700;
  margin: auto;
}

ul {
  margin: 0;
  padding: 0;
}

ul > p {
  margin: 0;
  padding: 1vh;
  justify-content: center;
  text-align: center;
  color: #ff2020;
  font-weight: 600;
  font-size: 0.8rem;
}

/* p centralizado e no final do container */
.container-content > p {
  text-align: center;
  margin-top: 2rem;
}


#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toast {
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
  max-width: 300px;
  font-family: sans-serif;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast.success { background-color: #22c55e; }
.toast.error   { background-color: #ef4444; }
.toast.warning { background-color: #facc15; color: #111; }




/* Tablets: telas até 1024px */
@media (max-width: 1025px) {
  .contant-container,
  .login-container {
    width: 46vw; /* mais estreito */
    padding: 2rem;
  }


  .container-content {
    width: 79% !important;
  }
  
  img {
    margin-bottom: -31vw;
    width: 62vh;
    height: 75vh;
    margin-top: -67vw;
  }

  .login-container {
    border-left: 0px;
  }

  form {
    width: 50%; /* ocupa mais espaço relativo */
  }

  input {
    width: 80%;
  }

  button {
    width: 60%;
  }

  .content-row {
    flex-direction: column;
    gap: 2rem;
  }

  .login-container {
    border-left: 0px;
    width: 90%;
  }

  form {
    width: 100%;
  }

  input {
    width: 80%;
    font-size: 1.5vh;
  }

  button {
    font-size: 1.6vh;
  }

}

/* Celulares: telas até 768px */
@media (max-width: 768px) {
  img {
    margin-bottom: -38vw;
    width: 43vh;
    height: auto;
    margin-top: -67vw;
  }

  .contant-container,
  .login-container {
    width: 80%;
    padding: 1.5rem;
  }

  form {
    width: 100%;
    gap: 2vh;
  }

  input {
    width: 90%;
    padding: 1.5vh;
  }

  button {
    width: 70%;
    padding: 1.2vh;
  }

  .content-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1rem;
  }
}

/* Pequenos celulares: telas até 480px */
@media (max-width: 480px) {
  .contant-container,
  .login-container {
    width: 95%;
    padding: 1rem;
  }

  form {
    width: 100%;
    gap: 1.5vh;
  }

  input {
    width: 95%;
    padding: 1vh;
  }

  button {
    width: 80%;
    padding: 1vh;
  }

  h1 {
    font-size: 1rem;
  }

  h2 {
    font-size: 0.9rem;
  }
}


@media (max-height: 1024px) AND (max-width: 768px) {
  img {
    margin-bottom: -24vw;
    width: 43vh;
    height: auto;
    margin-top: -50vw;
  }
}