body {
  background-color: #F3F9F9;
}

.login-container {
  background: linear-gradient(to bottom, #58abc1, #8edbd8);
}

.login-box {
  max-width: 400px;
  width: 100%;
}

.logo_login {
  max-width: 200px;
}

.text-modalidad {
  color: #58abc1;
  font-weight: bold;
}

.btn-acurruco {
  background-color: #e9a73a;
  color: white;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.btn-acurruco:hover {
  background-color: #d58627;
}

.modo-switch button {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Cuando estamos en modo oscuro, el botón invierte colores */
body.modo-oscuro .modo-switch button {
  background-color: #333;
  color: #f0f0f0;
}

/* === Modo oscuro automático === */
body.modo-oscuro .login-container{
    background: linear-gradient(to bottom, #1389b0, #58abc1) !important;
    color: #f5f5f5;
}

/* === MODO OSCURO REAL SOBRE login-box === */
body.modo-oscuro .login-box {
  background-color: #1f1f1f !important;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5) !important; 
}

body.modo-oscuro .login-box label {
  color: #f0f0f0;
}

body.modo-oscuro .login-box input.form-control {
  background-color: #2e2e2e;
  color: #f5f5f5;
  border: 1px solid #555;
}

body.modo-oscuro .login-box input.form-control::placeholder {
  color: #aaa;
}

body.modo-oscuro .login-box .btn-acurruco {
  background-color: #d58627;
  color: #fff;
}

body.modo-oscuro .login-box .btn-acurruco:hover {
  background-color: #e9a73a;
}