@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: #ececec;
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  flex-direction: column;
}
body.dark-mode {
  background-color: #242124;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#containerMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  position: relative;
}

.toastify {
  border-radius: 15px;
  font-size: 12px;
  background: #242124;
  box-shadow: none;
}

body.dark-mode .toastify {
  background: #dad2bc;
  color: black;
  box-shadow: none;
}

#logo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
}

#icono {
  top: 10px;
  right: 15px;
  display: flex;
  align-items: center;
  z-index: 10;
  padding: 5px;
}

#iconoToggler {
  font-size: 30px;
  cursor: pointer;
  transition: transform 0.2s;
}

#iconoToggler:hover {
  transform: scale(1.1);
}

#bienvenida {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  flex-shrink: 0;
}

#bienvenida h1 {
  margin: 0;
  width: 100%;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

body.dark-mode #bienvenida {
  color: white;
}

#imagen {
  text-align: center;
  margin: 0;
  padding: 5px 0;
  flex-shrink: 0;
}

#imagen img {
  height: 80px;
  width: 80px;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-shrink: 0;
}

#formulario {
  background-color: #dad2bc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 500px;
  height: auto;
  min-height: 220px;
  padding: 15px 20px;
  border-radius: 20px;
  border: 5px solid #242124;
}
body.dark-mode #formulario {
  background-color: #70798c;
  border: 5px solid #ececec;
}

#formulario h3 {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: 10px;
}

#formulario .mb-3 {
  margin-bottom: 10px !important;
  margin-top: 5px !important;
}

#formulario .admin {
  margin: 5px 0;
}

#formulario .admin h5 {
  margin: 0;
  font-size: clamp(0.85rem, 2vw, 1rem);
}

body.dark-mode #formulario h3 {
  color: white;
}

.form-control {
  background-color: #ececec;
}

.form-control:focus {
  border-color: #242124;
  box-shadow: 0 0 5px #242124;
  outline: none;
}

body.dark-mode .form-control {
  background-color: #242124;
}
body.dark-mode .form-control:focus {
  border-color: #ececec;
  box-shadow: 0 0 5px #ececec;
  outline: none;
}

.admin a {
  text-decoration: underline;
  color: inherit;
}

.btn-primary {
  --bs-btn-color: white;
  --bs-btn-border-color: #2c262c;
  --bs-btn-bg: #2c262c;
  --bs-btn-hover-bg: #393139;
  --bs-btn-hover-border-color: #2c262c;
  --bs-btn-active-bg: #393139;
  --bs-btn-active-border-color: #2c262c;
  font-weight: 400;
}

body.dark-mode .btn-primary {
  --bs-btn-color: black;
  --bs-btn-border-color: #dad2bc;
  --bs-btn-bg: #dad2bc;
  --bs-btn-hover-bg: #dad2bcc6;
  --bs-btn-hover-border-color: #dad2bcc6;
  --bs-btn-active-bg: #dad2bcc6;
  --bs-btn-active-border-color: #dad2bcc6;
}

footer {
  text-align: center;
  flex-shrink: 0;
  padding: 5px 0;
  font-size: 0.85rem;
}

footer p {
  margin: 0;
}

@media (max-width: 550px) {
  #imagen {
    display: none;
  }
  .form {
    margin: 5px 0;
  }
  #formulario {
    padding: 10px 15px;
    min-height: 200px;
  }
  #containerMain {
    padding: 5px;
  }
  #bienvenida h1 {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }
}