/* Estilos base para el cuerpo y la fuente */
body {
    font-family: 'Arial', sans-serif;
    background:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHUlEQVQoU2NkYGD4z0AEYBxVSFhL0KsCYy0wDAEA11IIC1YpI5wAAAABJRU5ErkJggg==") repeat,
    radial-gradient(
      at 30% 20%,
      rgba(255 255 255 / 0.10) 0%,
      rgba(255 255 255 / 0) 60%
    ),
    linear-gradient(
      120deg,
      #bbbfc6 0%,    /* gris claro pulido */
      #a9aeb8 35%,   /* gris neutro elegante */
      #8e94a2 100%   /* gris medio sobrio */
    );

  /* Propiedades compartidas para las tres capas */
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: auto, cover, cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .title {
    text-align: center;
  }
  
  /* Estilos del contenedor principal del formulario de login */
  .login-container {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    transform: scale(1.25);
    width: 350px;
    max-height: 500;
  }
  
  /* Estilos de los inputs del formulario */
  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    /* Asegura que el padding no afecte el ancho total */
  }
  
  /* Estilos para los iconos de usuario y contraseña */
  .icon {
    background: #ccc;
    color: white;
    padding: 10px;
    min-width: 50px;
    text-align: center;
  }
  
  /* Estilos para el botón de login */
  button[type="submit"] {
    width: 100%;
    padding: 15px;
    border: none;
    background: #cd2727;
    /* Color de fondo del botón */
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button[type="submit"]:hover {
    background: #454545;
    /* Color al pasar el mouse por encima */
  }
  
  /* Estilos para la funcionalidad de "Recordar usuario" */
  .remember-me {
    margin: 20px 0;
  }
  
  /* Estilos para el link de "Olvidar contraseña" */
  .forgot-password {
    text-align: right;
    display: block;
    margin-top: 10px;
  }
  
  /* Estilo del header de la forma de inicio de sesión */
  .login-header {
    background-color: #5F27CD;
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  
  /* Puedes añadir más estilos aquí según necesites */
  
  .logo{
    max-width: 250;
    height: auto;
    text-align: center;
  }