/* ===== BASE ===== */
body.login-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: url("https://images.unsplash.com/photo-1524334228333-0f6db392f8a1?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGZvbmRvJTIwbmVncm98ZW58MHx8MHx8fDA%3D");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding:16px;
  overflow:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

@keyframes bgFloat{
  from{ filter:hue-rotate(0deg); }
  to{ filter:hue-rotate(25deg); }
}

/* ===== LOGIN BOX ===== */
.login-box{
  width:100%;
  max-width:360px;
  background:rgba(15,23,42,.88);
  border:1px solid #1e293b;
  border-radius:14px;
  padding:28px 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 25px 60px rgba(0,0,0,.65);

  box-sizing:border-box;
}

/* ===== LOGO ===== */
.login-logo{
  text-align:center;
  margin-bottom:16px;
}

.login-logo img{
  height:90px;
  max-width:100%;

}

/* ===== TÍTULO ===== */
.login-box h1{
  text-align:center;
  margin:0 0 22px;
  font-size:20px;
  color:#e5e7eb;
  letter-spacing:.4px;
}

/* ===== INPUTS ===== */
.login-box input{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  font-size:16px; /* evita zoom iOS */
  border-radius:8px;
  border:1px solid #1e293b;
  background:#020617;
  color:#e5e7eb;
}

.login-box input::placeholder{
  color:#64748b;
}

.login-box input:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 1px #3b82f6;
}

/* ===== BOTÓN ===== */
.login-box button{
  width:100%;
  padding:14px;
  font-size:16px;
  border-radius:8px;
  border:none;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}

.login-box button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(37,99,235,.45);
}

.login-box button:active{
  transform:scale(.98);
}

/* ===== MENSAJES ===== */
.error{
  background:#7f1d1d;
  color:#fecaca;
  padding:10px;
  border-radius:8px;
  margin-bottom:14px;
  text-align:center;
  font-size:14px;
}
/* ===== ESTILOS BASE (antes en style.css) ===== */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  overflow-x: hidden;
}
body {
  background: #0b1117;
  color: #e5e7eb;
  font-family: Inter, Arial, sans-serif;
}
.login-box input,
.login-box button {
  box-sizing: border-box;
}
.login-box input[type="text"],
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}