/* === Base y fondo === */
:root{
  --celeste:#6ad2df;
  --celeste-2:#21a7b6;
  --gris:#7c7e81;
  --negro:#000;
  --card-bg:rgba(16, 18, 20, 0.853);
}
*{ box-sizing:border-box; }
html,body{
  height:100%;
}
body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  color:#fff;
  background:#000;
}

/* === Layout === */
.center-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

/* === Tarjeta de login (glass) === */
.login-card{
  width:min(420px,92vw);
  background:
    linear-gradient(125deg, rgba(106,210,223,0.16), rgba(0,0,0,0.18)),
    var(--card-bg);
  border:1.2px solid rgba(106,210,223,0.30);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(106,210,223,0.12) inset;
  border-radius:18px;
  padding:1.8rem 1.4rem 1.3rem;
  text-align:left;
}

.brand{
  width:110px;
  display:block;
  margin:0 auto 0.6rem auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}
.login-card h1{
  font-size:1.35rem;
  font-weight:700;
  text-align:center;
  margin:.2rem 0 1.1rem;
  letter-spacing:.3px;
}

/* === Campos === */
.field{ margin-bottom:0.9rem; }
.field label{
  display:block;
  font-size:.95rem;
  color:#eaf5f6;
  margin-bottom:.35rem;
  font-weight:600;
}
.field input{
  width:100%;
  padding:.78rem .95rem;
  border:none;
  border-radius:12px;
  font-size:1rem;
  color:#fff;
  background:rgba(20,20,20,0.66);
  outline:none;
  box-shadow:0 2px 8px rgba(106,210,223,0.07);
  border:1.5px solid transparent;
  transition:border .15s, background .15s;
}
.field input:focus{
  border-color:var(--celeste);
  background:#18191ae6;
}

/* password + toggle */
.pwd-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.pwd-wrap input{
  padding-right:44px;
}
.toggle-pwd{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:50%;
  background:transparent;
  color:#cfecef;
  cursor:pointer;
  transition:background .18s, color .18s, transform .08s;
}
.toggle-pwd:hover{ background:rgba(106,210,223,0.12); color:#fff; }
.toggle-pwd.on{ color:var(--celeste); }

/* === Botón primario === */
.btn-primary{
  width:100%;
  padding:.85rem 1rem;
  border:none;
  border-radius:12px;
  background:var(--celeste);
  color:#191919;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(106,210,223,0.25);
  transition:background .2s, transform .12s, box-shadow .18s;
  margin-top:.2rem;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--celeste-2);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(33,167,182,0.28);
  outline:none;
}

/* === Mensajes === */
.error-msg{
  min-height:1.2em;
  margin:.6rem 0 0 0;
  color:#ff9b9b;
  font-size:.95rem;
  text-align:center;
}
.help-msg{
  margin:.9rem 0 0 0;
  color:#cfd6d7;
  font-size:.92rem;
  text-align:center;
}
.help-msg a{
  color:var(--celeste);
  font-weight:700;
  text-decoration:none;
}
.help-msg a:hover{ color:#ffffff; }

/* === Responsive === */
@media (max-width:480px){
  .login-card{ padding:1.35rem 1rem 1rem; border-radius:16px; }
  .brand{ width:96px; }
  .login-card h1{ font-size:1.22rem; margin-bottom:.9rem; }
  .field input{ padding:.72rem .9rem; font-size:.98rem; }
  .btn-primary{ padding:.8rem 1rem; font-size:1rem; border-radius:10px; }
}


.image-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* detrás del contenido */
  overflow: hidden;
  filter:brightness(0.35) contrast(1.05);
}

.image-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}