/* ================================================================
   login.css — Pantalla de acceso (misma paleta/tipografía que a.html)
   Requiere theme.css cargado antes.
   ================================================================ */

body.login-body{
  height:100vh;
  overflow:hidden;
  display:flex;
}

.login-screen{
  display:flex;
  width:100%;
  height:100%;
}

/* ---------- Panel izquierdo: marca / mesh gradient ---------- */
.login-brand-panel{
  flex:1.1;
  background:var(--mesh);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px;
  color:#fff;
  overflow:hidden;
}
.login-brand-panel::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 10%, rgba(255,255,255,.16), transparent 55%);
  pointer-events:none;
}
.login-brand-top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.login-brand-mark{
  width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.login-brand-mark img{ width:30px; height:30px; object-fit:contain; }
.login-brand-top .name{ font-weight:800; font-size:19px; letter-spacing:-0.01em; }
.login-brand-top .tag{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }

.login-brand-mid{ position:relative; z-index:1; max-width:420px; }
.login-brand-mid h1{ font-size:32px; font-weight:800; line-height:1.2; margin:0 0 14px; letter-spacing:-0.01em; }
.login-brand-mid p{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.82); margin:0; }

.login-brand-foot{ position:relative; z-index:1; font-size:12px; color:rgba(255,255,255,.6); }

/* ---------- Panel derecho: formulario ---------- */
.login-form-panel{
  flex:1;
  min-width:380px;
  background:var(--surface-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.login-form-card{
  width:100%;
  max-width:380px;
}
.login-form-card h2{
  font-size:24px; font-weight:800; letter-spacing:-0.01em;
  margin:0 0 6px;
}
.login-form-card .lead{
  font-size:13.5px; color:var(--on-surface-variant); margin:0 0 30px;
}

.login-alert{
  display:flex; align-items:center; gap:9px;
  background:var(--error-container);
  color:var(--on-error-container);
  border-radius:0.75rem;
  padding:12px 14px;
  font-size:13px;
  font-weight:600;
  margin-bottom:20px;
}
.login-alert i{ font-size:14px; flex-shrink:0; }

.login-field{ margin-bottom:18px; }
.login-field label{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; color:var(--on-surface);
  margin-bottom:7px;
}
.login-field label i{ font-size:12px; color:var(--on-surface-variant); }
.login-field input{
  width:100%;
  background:var(--surface-container-low);
  border:1px solid var(--border-subtle);
  border-radius:0.75rem;
  padding:12px 14px;
  font-size:14px;
  font-family:'Inter',sans-serif;
  color:var(--on-surface);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-field input:focus{
  outline:none;
  border-color:var(--primary-container);
  box-shadow:0 0 0 3px rgba(0,62,199,0.12);
}

.login-submit{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;
  border:none;
  border-radius:0.75rem;
  padding:13px 16px;
  font-weight:800;
  font-size:14.5px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  box-shadow:var(--primary-glow);
  margin-top:6px;
}
.login-submit:hover{ filter:brightness(1.05); }
.login-submit i{ font-size:14px; }

@media (max-width: 860px){
  .login-brand-panel{ display:none; }
  .login-form-panel{ min-width:0; }
}