/* =========================
   Variables y temas
   ========================= */
:root{
  --radius: 12px;
  --max-width: 420px;
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Tema claro (por defecto) */
:root.theme--light,
:root.theme--auto:not(.prefers-dark){
  --bg: #f6f7fb;
  --card: #ffffff;
  --accent: #0b74de;
  --accent-600: #095bb8;
  --muted: #6b7280;
  --danger: #d9534f;
  --shadow: 0 6px 20px rgba(11,22,50,0.08);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  --text: #0b1220;
  --input-border: #e6e9f2;
  --hr: #eef2ff;
}

/* Tema oscuro */
:root.theme--dark,
:root.theme--auto.prefers-dark{
  --bg: #071025;
  --card: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  --accent: #66b3ff;
  --accent-600: #3aa0ff;
  --muted: #9aa8b6;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --text: #e6eef8;
  --input-border: rgba(255,255,255,0.06);
  --hr: rgba(255,255,255,0.03);
}

/* Forzar preferencia OS dark */
@media (prefers-color-scheme: dark) {
  :root.prefers-dark { }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:
    radial-gradient(1200px 400px at 10% 10%, rgba(11,116,222,0.04), transparent),
    radial-gradient(900px 300px at 90% 90%, rgba(11,116,222,0.02), transparent),
    var(--bg);
  color:var(--text);
}

/* Container */
.login-wrap{
  width:100%;
  max-width: calc(var(--max-width) + 40px);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-card{
  width:100%;
  max-width: var(--max-width);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.login-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(11,22,50,0.12);
}

/* Header */
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.brand .logo{
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent), var(--accent-600));
  display:inline-flex; align-items:center; justify-content:center; color:white;
  font-weight:700; font-size:18px;
  box-shadow: 0 6px 18px rgba(11,116,222,0.12), inset 0 -6px 18px rgba(255,255,255,0.06);
}
.brand .title{ font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.brand .subtitle{ display:block; margin-top:2px; font-size:13px; color:var(--muted); font-weight:500; }

/* Form */
form{ display:flex; flex-direction:column; gap:14px; }
label{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px; font-weight:600; }
.field{ display:flex; flex-direction:column; gap:6px; }
input[type="email"], input[type="password"]{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--input-border);
  background:transparent; transition: border-color var(--transition), box-shadow var(--transition);
  font-size:15px; color:var(--text); outline:none;
}
input::placeholder{ color: rgba(0,0,0,0.25); }
body.theme--dark input::placeholder{ color: rgba(255,255,255,0.12); }

input:focus{
  border-color: var(--accent); box-shadow: 0 6px 24px rgba(11,116,222,0.08); transform: translateY(-1px);
}

/* Row */
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.checkbox{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.checkbox input{ width:16px; height:16px; accent-color: var(--accent); }
.forgot{ font-size:13px; color:var(--accent); text-decoration:none; font-weight:600; }
.forgot:hover{ text-decoration:underline; }

/* Button */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px 14px; border-radius:10px; border:0; cursor:pointer; color:white;
  background: linear-gradient(180deg, var(--accent), var(--accent-600));
  font-weight:700; letter-spacing:0.01em; font-size:15px; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-shadow: 0 8px 28px rgba(11,116,222,0.14);
}
.btn:active{ transform: translateY(1px) scale(.998); }
.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; box-shadow:none; background: linear-gradient(180deg, #9fbff0, #89a9e6); }

/* Small / hr / helper */
.hr{ height:1px; background: var(--hr); border-radius:1px; margin:6px 0 10px; }
.small{ font-size:13px; color:var(--muted); text-align:center; margin-top:8px; }
.helper{ font-size:12px; color:var(--muted); }
.error{ font-size:13px; color:var(--danger); font-weight:600; }

/* Signup */
.signup{ margin-top:12px; font-size:14px; color:var(--muted); text-align:center; }
.signup a{ color:var(--accent); text-decoration:none; font-weight:700; margin-left:6px; }

/* Theme toggle */
.theme-toggle{ margin-top:12px; display:flex; gap:8px; align-items:center; justify-content:flex-start; }
.theme-toggle label{ font-size:13px; color:var(--muted); font-weight:600; }
.theme-toggle select{ padding:8px 10px; border-radius:8px; border:1px solid var(--input-border); background:transparent; color:var(--text); }

/* Responsive */
@media (max-width:420px){
  .login-card{ padding:20px; border-radius:10px; }
  .brand .logo{ width:40px; height:40px; font-size:16px; border-radius:8px; }
}