/* Auth pages shared styles - respects theme variables coming from PHP */
:root{
  --auth-primary: var(--primary, #00539C);
  --auth-secondary: var(--secondary, #00B4DB);
  --auth-text: var(--form-text, #ffffff);
}
.auth-wrapper{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{
  background: var(--form-bg, rgba(11,18,32,.25));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  backdrop-filter: blur(var(--form-blur, 6px));
  -webkit-backdrop-filter: blur(var(--form-blur, 6px));
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 100%;
  max-width: 440px;
}
.auth-card .title{
  color: var(--auth-text);
  text-align:center;
  margin-bottom: 10px;
  letter-spacing:.5px;
}
.brand-logo{max-height:72px; display:block; margin:0 auto 14px auto;}
.input-modern .input-group-text{
  background: transparent;
  border-right: 0;
  color: var(--auth-text);
  border-color: rgba(255,255,255,.35);
}
.input-modern .form-control{
  background: rgba(255,255,255,.08);
  border-left: 0;
  color: var(--auth-text);
  border-color: rgba(255,255,255,.35);
}
.input-modern .form-control::placeholder{ color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing:.08em; }
.input-modern .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(0, 180, 219, .15);
  border-color: rgba(255,255,255,.55);
}
.auth-btn{
  border: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--auth-primary), var(--auth-secondary));
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.auth-extras{ display:flex; justify-content:space-between; align-items:center; color: rgba(255,255,255,.85); }
.auth-extras a{ color: rgba(255,255,255,.85); text-decoration: none; }
.auth-extras a:hover{ opacity:.9; text-decoration: underline; }

/* round separator visual like the mock */
.hr-soft{position: relative; height:1px; background: rgba(255,255,255,.2); margin: 20px 0;}
.hr-soft:before, .hr-soft:after{content:''; position:absolute; top:-18px; left:50%; width:140px; height:1px; background: rgba(255,255,255,.2); transform:translateX(-50%);}
.avatar-ring{ width: 108px; height:108px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; margin: 12px auto 6px; }
.avatar-ring i{ font-size: 40px; color: rgba(255,255,255,.8); }

/* background layers */
.bg-layer{position:fixed; inset:0; overflow:hidden; z-index:-1;}
.bg-layer img,.bg-layer video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bg-overlay{position:fixed; inset:0; background: rgba(0,0,0, var(--overlay, .5)); z-index:-1;}


/* Toggle de contraseña */
.input-group .btn.toggle-pass{ border-color: rgba(255,255,255,.35); color:#fff; background: transparent; }
.input-group .btn.toggle-pass:hover{ background: rgba(255,255,255,.08); }