:root {
  --color-one: #7d4ea8;
  --color-secondary: #2c3e50;
  --color-accent: #1abc9c;
  --color-background: #f4f6f9;
  --color-text: #2c3e50;
  --color-white: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-one);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#login {
  width: 100%;
}

#login .container {
  max-width: 600px;
  background-color: #EAEAEA;
  border: 1px solid #9C9C9C;
  height: 450px;
  padding: 20px;
  border-radius: 10px;
}

#login-form {
  padding: 20px;
}

#submit {
  margin: 20px 0px;
  background-color: var(--color-one);
}

.color-letra {
  color: var(--color-one);
}

.centrado {
  display: flex;
  width: 90%;
  justify-items: center;
}

#logo {
  margin-top: -105px;
  margin-bottom: 1px;
  filter: drop-shadow(1px 1px 17px white);
  height: 280px;
  width: 250px;
}

/* Estilos para dispositivos pequeños (móviles) */
@media (max-width: 867px) {
  body {
    width: 100%;
    padding: 20px;
    transform: scale(1.0);
    padding: 10px;
    max-height: 100%;
    background-color: var(--color-one);
  }
  #login .container {
    max-width: 95%;
    margin-top: 10px;
    width: 70%;
    padding: 1px;
    height: auto;
    border: none;
  }
  .color-letra {
    font-size: 2.0em;
  }
  #submit {
    font-size: 1.8em;
    padding: 9px;
    margin: 20px 0px 10px;
  }
  #logo {
    margin: -190px 0px 20px 0px;
    height: 400px;
    width: 360px;
    filter: drop-shadow(1px 1px 17px white);

  }
  #iniciar {
    font-size: 2.7em;
    font-weight: bolder;
    color: var(--color-one);
    margin: 1px 0px -2px;  
    align-self: center;
  }
  .centrado {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  input {
    height: 45px;
    color: #2c3e50;
    font-size: 30px !important;
  }
}

/* Estilos para tablets y dispositivos medianos */
@media (min-width: 868px) and (max-width: 1024px) {
  body {
    width: 100%;
    padding: 20px;
    transform: scale(1.0);
    padding: 10px;
    max-height: 100%;
    background-color: var(--color-one);
  }
  #login .container {
    max-width: 95%;
    margin-top: 10px;
    width: 90%;
    padding: 1px;
    height: auto;
    border: none;
  }
  .color-letra {
    font-size: 3.5em;
  }
  #submit {
    font-size: 3.2em;
    padding: 9px;
    margin: 20px 0px 10px;
  }
  #logo {
    margin: -190px 0px 20px 0px;
    height: 600px;
    width: 560px;
    filter: drop-shadow(1px 1px 17px white);

  }
  #iniciar {
    font-size: 4.0em;
    font-weight: bolder;
    color: var(--color-one);
    margin: 1px 0px -2px;  
    align-self: center;
  }
  .centrado {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  input {
    height: 80px;
    color: #2c3e50;
    font-size: 40px !important;
  }
}

/* Estilos para dispositivos grandes (desktops) */
@media (min-width: 1025px) {
  body {
    transform: scale(1.0);
  }
  #login .container {
    margin-top: 60px;
    width: 100%;
    padding: 10px;
    height: 330px;
    border: 1px solid #9C9C9C;
    margin-bottom: 0;
  }
  .color-letra {
    font-size: 1.3em;
  }
  #submit {
    font-size: 1em;
    padding: 10px;
    margin: 0;
  }
  #logo {
    margin-bottom: -60px;
    height: 330px;
    width: 300px;
  }
  #iniciar {
    font-size: 32px;
    font-weight: bolder;
    color: var(--color-one);
    margin-top: -18px;
    margin-bottom: -8px;
    align-self: center;
  }
  .centrado{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}