body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


#banner-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #3CFFEB;
  background: linear-gradient(90deg, rgba(60, 255, 235, 1) 0%, rgba(0, 241, 196, 1) 100%);

  overflow: hidden;
  position: relative;
}

#banner-container--logo {
  margin-top: 48px;
  margin-left: 44px;
  width: 20%;
}

#banner-container--banner {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: -163px;
}

#form-container {
  overflow-x: scroll;
}

#Panel_Login {
  width: 545px;
  margin: 119px auto;
}

#Panel_Login h3 {
  font-size: 25px;
  line-height: 120%;
  font-weight: 400;
}

.button-box {
  text-align: center;
}

.btn-cancel {
  padding: 12px 40px;
  height: 46px;
  font-size: 16px;
  border-radius: 24px;
  text-decoration: none;
  justify-content: center;
  text-align: center;
  border: solid 1px #19b2a3;
  color: #19b2a3;
}

.btn-cancel:hover {
  background-color: #19b2a3;
  color: white;
  border: none;
}

.btn-continue {
  padding: 12px 40px;
  height: 46px;
  font-size: 16px;
  margin-left: 18px;
  border-radius: 24px;
  justify-content: center;
  background-color: #19b2a3;
  color: white;
  border: none;
}

.btn-continue:hover {
  background-color: #148f82;
  border: none;
  color: white;
}

/* Botón INACTIVO (estado inicial) */
.btn-continue[disabled] {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  cursor: not-allowed;
}

/* Botón ACTIVO (cuando está habilitado) */
.btn-continue:not([disabled]) {
  background-color: #19b2a3 !important;
  border-color: #19b2a3 !important;
}

/* Efecto hover para el botón activo */
.btn-continue:not([disabled]):hover {
  background-color: #148f82 !important;
  border-color: #148f82 !important;
}

.btn-continue:focus,
.btn-continue:active {
  outline: none !important;
  /* Elimina el borde de enfoque */
  box-shadow: none !important;
  /* Elimina cualquier sombra */
  border: none !important;
  /* Asegúrate de que no tenga borde */
  color: white;
}

#logoSmall {
  display: none;
}

.modal-header {
  border: none;
}

.modal-footer {
  border: none;
}

#toast-container > div {
    width: 470px !important;
    gap: 8px;
}

.toast-title {
    margin-left: 32px;
    margin-bottom: 5px;
}
.toast-message {
    margin-left: 32px;
}

.custom-error::before {
  margin-right: 50px;
}

.custom-warning {
  padding: 20px;
  background-color: #FFFEDF;
  border: 1px solid #F7ED06;
}


.custom-icon-warning::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 16px;
  height: 16px;
  background-image: url("../Img/Iris/attention.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#tituloModal {
  font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 120%;
}

#MensajeModal {
  font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 19.2px */
}

@media (max-width: 991.98px) {
  #logoSmall {
    display: block;
    margin: 0 auto;
  }
  #form-container {
    width: 100%;
  }
  #banner-container {
    display: none;
  }
}

/* --- Para Móviles (hasta 768px) --- */
@media (max-width: 767.98px) {
  #logoSmall {
    display: block;
    margin: 0 auto;
  }
  #form-container {
    width: 100%;
  }
  #banner-container {
    display: none;
  }
}

/* --- Para Móviles pequeños (hasta 576px) --- */
@media (max-width: 575.98px) {
  #logoSmall {
    display: block;
    margin: 0 auto;
  }
  #form-container {
    width: 100%;
  }
  #banner-container {
    display: none;
  }
}