:root{
  /* 🟦 FONDOS */
  --bg:#070b12;
  --bg2:#0b1324;
  --bg3:#0f172a;
  --line:rgba(59,130,246,.25);

  /* 🔵 AZUL PRINCIPAL */
  --primary:#3b82f6;
  --primary-soft:#93c5fd;
  --primary-dark:#1d4ed8;

  /* 🔴 ESTADOS */
  --danger:#dc2626;

  /* 📝 TEXTO */
  --text:#f1f5f9;
  --muted:#9ca3af;
}

body{
  min-height:100vh;
  margin:0;
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    url("/img/LOGIN/fondo-app.jpeg") 
    center/cover no-repeat fixed;
}

body::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      1200px 700px at 10% -10%,
      rgba(59,130,246,.20),
      transparent 60%
    ),
    radial-gradient(
      1000px 650px at 105% 0%,
      rgba(96,165,250,.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(2,6,23,.55),
      rgba(2,6,23,.92)
    );
  z-index:0;
}

/* CARD */
.login-card{
  width:100%;
  max-width:460px;
  background:linear-gradient(
    180deg,
    rgba(59,130,246,.05),
    rgba(2,6,23,.55)
  );
  border:1px solid rgba(59,130,246,.35);
  border-radius:1.6rem;
  box-shadow:0 20px 70px rgba(0,0,0,.75);
  padding:2.2rem;
  backdrop-filter:blur(10px);
  animation:fadeUp .45s ease;
  position:relative;
  z-index:1;
}

/* BRAND */
.brand-badge{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem 1.15rem;
  border-radius:999px;
  font-weight:900;
  font-size:1.05rem;
  color:#e0ecff;
  background:linear-gradient(
    135deg,
    rgba(59,130,246,.25),
    rgba(147,197,253,.15)
  );
  border:1.5px solid var(--primary);
  box-shadow:
    0 0 8px rgba(59,130,246,.75),
    0 0 18px rgba(37,99,235,.55);
}

.brand-title{
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size:2rem;
  color:#fff;
  margin-top:.8rem;
}

.brand-sub{
  color:var(--muted);
  font-size:.95rem;
}

/* FORM */
.form-label{
  font-weight:700;
  color:#e5e7eb;
}

.input-wrap{ position:relative; }

.input-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
}

.form-control{
  background:rgba(2,6,23,.85);
  border:1px solid rgba(245,179,1,.28);
  color:var(--text);
  border-radius:1rem;
  padding:.9rem .95rem .9rem 2.5rem;
  caret-color: #f8fafc;
}

.form-control::placeholder{
  color:#9ca3af !important;
}

.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .25rem rgba(59,130,246,.25);
  background:rgba(2,6,23,.95);
  color: #f8fafc !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px rgba(2,6,23,.95) inset !important;
  caret-color: #f8fafc;
}

/* BOTONES */
.btn-brand{
  background:linear-gradient(
    185deg,
    #2563eb,
    #60a5fa
  );
  border:none;
  font-weight:800;
  border-radius:1rem;
  padding:.9rem;
  color:#020617;
  box-shadow:0 12px 28px rgba(59,130,246,.55);
}

.btn-brand:hover{
  filter:brightness(1.08);
}

.btn-soft{
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:1rem;
  padding:.75rem;
  color:#e0ecff;
  text-decoration:none;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(147,197,253,.55);
  box-shadow:
    0 0 10px rgba(59,130,246,.65),
    0 0 20px rgba(37,99,235,.45);
}

.btn-soft:hover{
  background:rgba(59,130,246,.20);
  transform:translateY(-1px);
}

/* FOOTER */
.small-note{
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
  margin-top:1rem;
}

/* ALERT */
.alert-danger-custom{
  background:rgba(220,38,38,.15);
  border:1px solid rgba(220,38,38,.6);
  color:#fecaca;
  border-radius:.9rem;
  padding:.5rem;
}

/* ANIMATION */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}