:root {
  --apure-yellow: #FFCC00;
  --apure-blue: #003399;
}

    body {
      /* Fondo degradado corporativo */
      background: linear-gradient(135deg, var(--apure-blue) 0%, #001a4d 100%);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Roboto', sans-serif;
    }

    .login-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      width: 100%;
      max-width: 420px;
      position: relative;
    }

    /* Línea superior tricolor */
    .card-border-top {
      height: 6px;
      background: linear-gradient(to right, var(--apure-yellow) 33%, var(--apure-blue) 33%, var(--apure-blue) 66%, #009933 66%);
    }

    .login-header {
      padding: 40px 30px 20px;
      text-align: center;
    }

    .logo-text {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      color: var(--apure-blue);
      font-size: 1.8rem;
      text-decoration: none;
      letter-spacing: -1px;
    }

    .logo-text span {
      color: var(--apure-yellow);
      text-shadow: 1px 1px 0 #000;
    }

    .login-body {
      padding: 20px 40px 40px;
    }

    .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label {
      color: var(--apure-blue);
      font-weight: bold;
    }

    .form-control:focus {
      border-color: var(--apure-blue);
      box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.1);
    }

    .btn-login {
      background-color: var(--apure-blue);
      color: white;
      width: 100%;
      padding: 14px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      border: none;
      transition: 0.3s;
      margin-top: 10px;
    }

    .btn-login:hover {
      background-color: #002266;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .back-link {
      display: block;
      text-align: center;
      margin-top: 25px;
      color: #aaa;
      font-size: 0.9rem;
      text-decoration: none;
      transition: 0.3s;
    }

    .back-link:hover {
      color: white;
    }
  </style>