/* ============================================================
   BIG BEN — Login
   ============================================================ */
body.login-body { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

/* ---- Panel de marca ---- */
.login-brand {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
}
.login-brand__rays {
  position: absolute; top: -20%; right: -10%; width: 700px; height: 700px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 16deg, rgba(255,255,255,.05) 16deg 17deg);
}
.login-brand__glow { position: absolute; width: 460px; height: 460px; left: -140px; bottom: -160px;
  background: radial-gradient(circle, rgba(224,35,58,.5), transparent 62%); pointer-events: none; }

.login-brand__top { position: relative; z-index: 2; }
.login-brand .brand { color: #fff; }
.login-brand .brand img { height: 52px; }
.login-brand .brand__txt b { color: #fff; }
.login-brand .brand__txt span { color: var(--yellow); }

.login-brand__mid { position: relative; z-index: 2; max-width: 30ch; }
.login-brand__mid h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  line-height: 1.1; letter-spacing: 0; margin-bottom: 16px;
}
.login-brand__mid h1 .pop { color: var(--yellow); }
.login-brand__mid p { color: rgba(255,255,255,.78); font-size: 1.05rem; }

.login-brand__card {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 16px 20px; max-width: 340px;
}
.login-brand__card .anglia { width: 44px; height: 44px; border-radius: 11px; background: var(--sky); display: grid; place-items: center; font-weight: 900; font-size: 12px; flex-shrink: 0; }
.login-brand__card b { font-size: 14.5px; }
.login-brand__card small { display: block; font-size: 12.5px; color: rgba(255,255,255,.62); }

/* ---- Panel del formulario ---- */
.login-panel {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 32px; background: var(--cream);
}
.login-card { width: 100%; max-width: 410px; }
.login-card__back {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px;
  color: var(--ink-soft); margin-bottom: 34px; transition: color .2s;
}
.login-card__back:hover { color: var(--navy); }
.login-card__back svg { width: 18px; height: 18px; }

.login-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0; margin-bottom: 6px; }
.login-card > p { color: var(--ink-soft); margin-bottom: 30px; }

.login-card .field label { font-size: 14px; }
.login-card .field input { background: #fff; }

.login-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 24px; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--navy); }
.login-forgot { font-size: 14px; font-weight: 700; color: var(--red); }
.login-forgot:hover { text-decoration: underline; }

.login-pass { position: relative; }
.login-pass__toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); display: grid; place-items: center; padding: 4px;
}
.login-pass__toggle svg { width: 20px; height: 20px; }
.login-pass input { padding-right: 44px; }

.login-sep { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.login-foot { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--ink-soft); }
.login-foot a { font-weight: 800; color: var(--navy); }
.login-foot a:hover { text-decoration: underline; }

.login-error {
  display: none; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--red) 10%, #fff); border: 1px solid color-mix(in srgb, var(--red) 30%, #fff);
  color: var(--red-deep); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 20px;
}
.login-error.show { display: flex; }
.login-error svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 860px) {
  body.login-body { grid-template-columns: 1fr; }
  .login-brand { padding: 32px; min-height: 38vh; }
  .login-brand__mid { display: none; }
  .login-brand__card { display: none; }
  .login-panel { padding: 40px 24px; }
}