:root{
  --bg: #0b0b10;
  --primary: #acb3e8;
  --primary-600: #9aa2e4;
  --text: #f8f9fb;
  --muted: #c9ccdb;
  --danger: #ef476f;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg) url('../../../img/plantilla/logos/login.jpg') center/cover no-repeat fixed;
}

/* overlay para mejorar la legibilidad del fondo */
body::before{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(172,179,232,.10), transparent 60%),
              linear-gradient(180deg, rgba(8,8,14,.35), rgba(8,8,14,.15));
  pointer-events:none;
}

/* Contenedor centrado */
.container{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

/* Tarjeta con efecto glass */
.card{
  width:100%;
  max-width:420px;
  background: rgba(18,19,28,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow:hidden;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px 10px;
}
.card-header h1{
  font-size:22px;
  margin:0;
  font-weight:600;
  letter-spacing:.3px;
}
.brand img{
  height:42px; width:auto; display:block;
}

.card-body{ padding: 10px 22px 18px; }
.card-footer{ padding: 14px 22px 22px; border-top:1px solid rgba(255,255,255,.08); }

.form-group{ margin-bottom:14px; }

.label{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin-bottom:6px;
}

.input-wrap{
  position:relative;
}
.input{
  width:100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:12px 44px 12px 42px;
  color:var(--text);
  font-size:15px;
  outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder{ color: rgba(255,255,255,.55); }
.input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(172,179,232,.25);
}

/* Icono izquierdo dentro del input */
.input-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:16px; color: var(--primary);
}

/* Botón ver/ocultar contraseña */
.input-action{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background: none; border:0; color: var(--muted); cursor:pointer;
  font-size:16px; padding:6px;
}
.input-action:hover{ color: var(--text); }

/* Recordarme + link */
.row-between{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;
}
.checkbox{
  display:flex; align-items:center; gap:8px; font-size:14px; color: var(--muted);
}
.checkbox input{
  width:18px; height:18px; accent-color: var(--primary);
}

/* Botón principal */
.btn{
  width:100%;
  border:0;
  border-radius:12px;
  background: var(--primary);
  color:#111;
  padding:12px 16px;
  font-weight:600;
  cursor:pointer;
  transition: filter .15s, transform .02s;
}
.btn:hover{ filter: brightness(1.04); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Link */
.link, .card-footer a{
  color: var(--primary-600);
  text-decoration:none;
}
.link:hover, .card-footer a:hover{ text-decoration:underline; }

/* Mensajes */
.form-error{ color: var(--danger); font-size:14px; margin:6px 0 0; display:none; }
.form-hint{ color: var(--muted); font-size:12px; margin-top:6px; }

/* Mejoras pequeñas */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}