/* === THEMES =============================================================== */
:root{
  --radius:16px;
  --shadow: 0 10px 30px rgba(2,6,23,.18);
  --focus: 0 0 0 3px rgba(99,102,241,.25);
}

/* LIGHT (por compatibilidad) */
:root,
[data-theme="light"]{
  --bg: #eef2f7;
  --bg-accent: #e6ebf2;
  --card: #ffffff;
  --card-alpha: rgba(255,255,255,.85);
  --border: #e5e7eb;
  --text: #0f172a;
  --muted:#64748b;
  --input-bg:#f8fafc;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --danger:#ef4444;
}

/* DARK */
[data-theme="dark"]{
  --bg: #0b1220; /* pizarra profunda */
  --bg-accent: radial-gradient(1200px 600px at 20% -10%, #132036 10%, transparent 60%),
               radial-gradient(900px 500px at 100% 110%, #1b2a46 0%, transparent 60%),
               #0b1220;
  --card: #0f172a;
  --card-alpha: rgba(15,23,42,.85);
  --border: #1e293b;
  --text: #e5e7eb;
  --muted:#93a3b8;
  --input-bg:#0b1220;
  --primary:#60a5fa;   /* azul suave */
  --primary-600:#3b82f6;
  --danger:#f87171;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* GLASS (fondo degradado + tarjeta translúcida) */
[data-theme="glass"]{
  --bg: linear-gradient(135deg,#101827 0%, #18243a 50%, #0f1626 100%);
  --bg-accent: none;
  --card: rgba(255,255,255,.06);
  --card-alpha: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.15);
  --text: #e8eef6;
  --muted:#a8b3c6;
  --input-bg: rgba(255,255,255,.06);
  --primary:#8b97ff;    /* lavanda */
  --primary-600:#6f7bff;
  --danger:#ff8b8b;
  --shadow: 0 20px 60px rgba(0,0,0,.50);
  backdrop-filter: blur(10px);
}

/* === BASE ================================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font: 15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: var(--bg);
  background-image: var(--bg-accent);
}

/* Layout */
.center-screen{
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.card{
  width:100%; max-width:460px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px;
}

/* Head */
.brand{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.brand-dot{width:10px; height:10px; border-radius:50%; background:var(--primary)}
h1{margin:6px 0 4px; font-size:28px; line-height:1.2}
.sub{margin:0 0 16px; color:var(--muted)}

/* Form */
.label{display:block; margin:12px 0 6px; color:var(--muted); font-weight:700}
.input{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--input-bg); color:var(--text);
  outline:none;
}
.input:focus{ box-shadow: var(--focus); border-color: var(--primary) }

.actions{margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; min-width:120px; border-radius:10px; border:0;
  background:var(--primary); color:#fff; font-weight:800; cursor:pointer;
}
.btn:hover{background:var(--primary-600)}
.error{
  margin-top:12px; padding:10px 12px; border-radius:8px;
  background:rgba(239,68,68,.08); color:#991b1b; border:1px solid rgba(239,68,68,.25);
  font-size:14px;
}
[data-theme="dark"] .error,
[data-theme="glass"] .error{
  background: rgba(239,68,68,.12); color:#fecaca; border-color: rgba(239,68,68,.35);
}

/* Helpers */
.meta{margin-top:14px; color:var(--muted); font-size:12px; text-align:left}

/* Input con botón de "ojo" */
.input-group{position:relative}
.eye-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0;
}
.eye-btn svg{
  width:20px; height:20px; stroke:var(--muted); fill:none;
}
.eye-btn:hover svg{stroke:var(--primary)}

/* feedback por campo y estado */
.field-error{ color:#b91c1c; font-size:.85rem; margin-top:.25rem; display:none }
.input.invalid{ border-color: var(--danger); outline-color: var(--danger) }
.title{ margin:0 0 12px; font-size:20px; font-weight:800 }