:root{
      --glass-bg: rgba(255,255,255,0.72);
      --accent: #00A5FF;
      --accent-hover: #008CDB;
      --muted: #6c6f74;
    }
    html,body{height:100%;}
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:2rem;
      background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 50%, #f3f3f3 100%);
      background-attachment: fixed;
    }

       body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../image/font.jpg"); /* Cambia la ruta a la imagen real */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  opacity: 0.9; /* Puedes ajustar la opacidad si lo deseas */
}


    .login-card{
      backdrop-filter: blur(6px) saturate(1.05);
      background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,246,0.75));
      border-radius:18px;
      box-shadow: 0 8px 30px rgba(20,24,30,0.08);
      border: 1px solid rgba(16,20,24,0.06);
      padding:2.25rem;
      max-width:460px;
      width:100%;
      text-align:center;
      position: relative;
    }

    .logo-img{
      max-width:200px;
      width:100%;
      margin-bottom:1rem;
    }

    .form-control:focus{box-shadow:none;border-color:var(--accent)}

    .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.05rem;color:var(--muted)}
    .has-icon .form-control{padding-left:40px}

    .show-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted)}

    .btn-primary{
      background-color:var(--accent) !important;
      border-color:var(--accent) !important;
      font-weight:500;
      box-shadow:0 4px 14px rgba(0,165,255,0.35);
      transition:all 0.2s ease-in-out;
    }
    .btn-primary:hover{
      background-color:var(--accent-hover) !important;
      border-color:var(--accent-hover) !important;
      box-shadow:0 6px 18px rgba(0,140,219,0.45);
    }

    .divider {height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.06),transparent);margin:1.25rem 0;border-radius:2px}

    footer small{color:var(--muted)}

    @media (max-width:540px){
      .login-card{padding:1.5rem;border-radius:14px}
      .logo-img{max-width:150px;}
    }

    /* Spinner overlay */
    #spinnerOverlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.75);
      z-index: 10;
      border-radius: 18px;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }
    #spinnerOverlay.show {
      display: flex;
    }
    #spinnerOverlay .spinner-border {
      width: 3rem;
      height: 3rem;
    }
    #spinnerOverlay .spinner-text {
      margin-top: 1rem;
      font-weight: 500;
      color: #00A5FF;
    }