* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #4CB5F5, #B7B8B6);
    }



    .login-container {
      background-color: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 400px;
    }

    .login-container h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: #333;
    }

    .form-group {
      margin-bottom: 1.2rem;
    }

    label {
      display: block;
      margin-bottom: 0.5rem;
      color: #555;
    }

    input[type="email"],
    input[type="password"] {
      width: 100%;
      padding: 0.8rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
      transition: border-color 0.3s;
    }

    input:focus {
      border-color: #0c2fce;
      outline: none;
    }

    .btn-login {
      width: 100%;
      padding: 0.8rem;
      background-color: #063852;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-login:hover {
      background-color: #5363ed;
    }

    
    .footer-text {
      text-align: center;
      margin-top: 1rem;
      color: #777;
      font-size: 0.9rem;
    }

    @media (max-width: 680px) {
      .login-container {
        padding: 1.5rem;
      }
    }
    .alert.error {
  background-color: #ffe5e5;
  color: #b00020;
  border: 1px solid #b00020;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.95rem;
}

  /* Estilos principales */
        .login-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

        .login-image {
            flex: 1;
            max-width: 400px;
            margin-right: 30px;
        }

        .login-image img {
            width: 100%;
            height: auto;
        }

        /* Responsive: ocultar imagen en móviles */
        @media (max-width: 768px) {
            .login-wrapper {
                flex-direction: column;
            }
            .login-image {
                display: none;
            }
        }