:root {
    --background-color: #feffff;
    --primary-color:  rgb(47, 155, 243, 0.658);
    --secondary-color: #FD1808;
    --text-color: #000000;
    --placeholder-color: #040505;
  }

  body{
    background-color: rgb(47, 155, 243, 0.658);
  }
  
  .circle{
      width: 430px;
      height: 520px;
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top: 50%;
  
    }
    
  .circle .shape{
      height: 200px;
      width: 200px;
      position: absolute;
      border-radius: 50%;
      
    }
  
  /* Afecta el circulo superior del Login */
  .shape:first-child{
    background: linear-gradient(
        #fd2a2a,
        #eb5a21
    );
    left: -60px;
    top: -60px;
    box-shadow: 0 0 15px #fd2a2a;
  }
  
  /* Afecta el circulo inferior del Login */
  .shape:last-child{
    background: linear-gradient(
        to right,
        #2f7ef3,
        #4e82e4
    );
    right: -30px;
    bottom: -80px;
    box-shadow: 0 0 15px  rgb(47, 155, 243, 0.658);
  }
  
    /* Afecta al Login */
    .login form {
      background-image: url('https://espain-espinoza.com/imagenes/LOGO.png');
      background-repeat: no-repeat;
      background-position: center 10px;
      background-size: 150px auto;
      height: 400px; /* Afecta el alto del form */
      width: 300px;  /* Afecta el ancho del form */
      background-color: rgba(255,255,255,0.13);
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255,255,255,0.1);
      box-shadow: 0 0 40px rgba(29, 29, 31, 0.6);
      padding: 30px 30px;
    }
    
    .login form *{
      font-family: 'Poppins',sans-serif;
      color: #000000; /* Afecta al color del texto del Input */
      letter-spacing: 0.5px;
      outline: none;
      border: none;
    }
    
    .login label{
      display: block;
      margin-top: 50px;
      font-size: 16px;
      font-weight: 500;
    }
    
    .login form input[type="password"], .login form input[type="text"] {
      display: block;
      margin-top: 60px;
      font-size: 16px;
      font-weight: 500;
      width: 270px; /* Afecta el ancho del input */
      height: 50px; /* Afecta el alto del input */
      border: 1px solid #e0dee4; /* Afecta al borde del input */
      margin-bottom: 10px;
      padding: 0 15px;
      transition: border-color 0.2s;
    }
    
    .login form input[type="password"]:focus, .login form input[type="text"]:focus {
      border-color: var(--primary-color);
  }
  
    ::placeholder{
      color: var(--placeholder-color);
    }
    
    .login form input[type="submit"] {
      margin-top: 50px;
      width: 100%;
      background-color: var(--background-color);
      color: #080710;
      padding: 15px 0;
      font-size: 18px;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer; 
      transition: background-color 0.2s;
    }
    
      
    body.loggedin {
    background-color:  rgb(47, 155, 243, 0.658);;
    }
  
    .content {
      width: 1000px;
      margin: 0 auto;
      }
  
     
      .content > div p {
      padding: 5px;
      margin: 0 0 10px;
      }
      

  
  /* Ajusta el margen para el mensaje de error */
  .login .alert {
    position: absolute;
    top: -40px; /* Ajusta según sea necesario */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Ajusta el ancho según sea necesario */
    z-index: 1;
  }

  .btn-acceder {
    margin-top: 50px;
    width: 100%;
    background-color: var(--background-color);
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer; 
    transition: background-color 0.2s;
    border: 5px;
}

.btn-acceder:hover {
    background-color: #ccc; /* Color al pasar el ratón */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.btn-acceder:active {
    background-color: #ccc; /* Color cuando se hace clic */
    transform: scale(0.98); /* Reduce el tamaño al hacer clic */
}

.btn-acceder:focus {
    outline: none; /* Elimina el contorno por defecto */
    box-shadow: 0 0 0 3px  rgb(47, 155, 243, 0.658); /* Añade un efecto de sombra */
}

.login form p{
    width: 350px;
    transform: translateY(70px); /* Mueve el texto 50px a la derecha y 20px hacia abajo */
    text-align: center;
  }
 .login .alert{
    color:green
  }