/* Login split-screen — HaceloIA. Prefijo lg2- para no chocar con auth-screen.css */

.lg2 {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #faf6f2;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Panel izquierdo ─────────────────────────────────────────────────── */
.lg2-hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #0b1120;
  color: #f8fafc;
  padding: 2rem clamp(1.5rem, 3.4vw, 3rem);
}
.lg2-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 18% 42%;
  pointer-events: none;
}
.lg2-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,17,32,.94) 6%, rgba(11,17,32,.72) 34%, rgba(11,17,32,.18) 62%, rgba(11,17,32,.45) 100%),
    linear-gradient(0deg, rgba(11,17,32,.90) 2%, rgba(11,17,32,0) 45%);
}
.lg2-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(90% 70% at 88% 78%, rgba(224,113,78,.26), rgba(224,113,78,0) 62%);
}

.lg2-hero-top,
.lg2-claim,
.lg2-hero-foot { position: relative; z-index: 2; }

.lg2-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lg2-brand { display: flex; align-items: center; gap: .75rem; }
.lg2-brand img { width: 44px; height: 44px; }
.lg2-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lg2-name span { color: #F2926E; }
.lg2-kicker { margin-top: .2rem; font-size: .64rem; font-weight: 600; letter-spacing: .22em; color: #7d8aa0; }

.lg2-eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: #7d8aa0; }
.lg2-eyebrow span { width: 26px; height: 2px; background: #E0714E; }
.lg2-claim h2 {
  /* El color va explicito a proposito: redesign.css tiene `h1..h6 { color }`
     y esa regla de elemento le gana a la herencia de .lg2-hero, por baja que
     sea su especificidad. Sin esto el claim salia gris oscuro sobre el video
     (ilegible en mobile, donde cae justo sobre el cuerpo del robot). En el
     prototipo HTML no se notaba porque ahi redesign.css no esta cargado. */
  color: #f8fafc;
  margin: 0; font-size: clamp(2.1rem, 3.9vw, 3.35rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.03; text-wrap: balance;
}
.lg2-claim h2 em { font-style: normal; color: #F2926E; }
.lg2-claim p { margin: 0; font-size: 1rem; line-height: 1.6; color: #94a3b8; max-width: 34ch; text-wrap: pretty; }

.lg2-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .7rem; letter-spacing: .06em; color: #5c6880; }
.lg2-made { font-weight: 700; letter-spacing: .18em; }

/* ── Panel derecho ───────────────────────────────────────────────────── */
.lg2-panel {
  position: relative;
  /* 2 filas (form + pie): el header con el logo se quitó. Si se dejaran las
     3 originales, .lg2-main caería en la fila `auto` y perdería el centrado. */
  display: grid; grid-template-rows: 1fr auto;
  padding: 2rem clamp(1.5rem, 3.4vw, 3rem);
  background: linear-gradient(160deg, #fdfbf8, #f4ece4);
}
.lg2-main { display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
.lg2-card { width: 100%; max-width: 390px; animation: lg2In .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lg2In { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lg2-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.9rem; text-align: center; }
.lg2-head h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #0f172a; }
.lg2-head h1 em { font-style: normal; color: #C25438; }
.lg2-head p { margin: 0; font-size: .94rem; line-height: 1.5; color: #64748b; }

.lg2-error {
  display: flex; gap: .55rem; align-items: flex-start;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; line-height: 1.4; margin-bottom: 1.15rem;
}

.lg2-form { display: flex; flex-direction: column; gap: 1.05rem; }
.lg2-field { display: flex; flex-direction: column; gap: .42rem; }
.lg2-field label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #334155; }
.lg2-field label i { color: #94a3b8; }
.lg2-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lg2-labelrow .lg-forgot { font-size: .76rem; font-weight: 600; color: #94a3b8; text-decoration: none; }
.lg2-labelrow .lg-forgot:hover { color: #C25438; }

.lg2 input[type="email"],
.lg2 input[type="password"],
.lg2 input[type="text"] {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #e7ddd2; border-radius: 12px;
  padding: .85rem 1rem; font-size: .95rem; color: #0f172a; font-family: inherit;
  outline: none; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s;
}
.lg2 input::placeholder { color: #a8b0bd; }
.lg2 input:hover { border-color: #d8c8b8; }
.lg2 input:focus { border-color: #E0714E; box-shadow: 0 0 0 3px rgba(224,113,78,.18); }

.lg2-pass { position: relative; display: flex; }
.lg2-pass input { padding-right: 3rem; }
.lg2-eye {
  position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0;
  background: none; border: 0; border-radius: 9px;
  color: #94a3b8; font-size: 1rem; cursor: pointer;
  transition: color .15s, background .15s;
}
.lg2-eye:hover { color: #334155; background: rgba(15,23,42,.05); }

.lg2-remember { display: flex; align-items: center; gap: .55rem; font-size: .83rem; color: #64748b; cursor: pointer; user-select: none; }
.lg2-remember input { accent-color: #E0714E; width: 15px; height: 15px; }

.lg2-btn {
  margin-top: .15rem; border: none; border-radius: 12px; cursor: pointer;
  padding: .95rem; font-size: .97rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff; font-family: inherit;
  background: linear-gradient(100deg, #C25438, #E0714E 55%, #F2926E);
  box-shadow: 0 12px 26px rgba(224,113,78,.3);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.lg2-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(224,113,78,.38); }
.lg2-btn:active { transform: none; filter: brightness(.97); }

/* ── Extras que usa /register (el login no los necesita) ───────────────────
   Variante secundaria para "Reenviar código": misma caja que el CTA pero sin
   peso visual, para que no compita con "Confirmar y crear cuenta". */
.lg2-btn--ghost {
  width: 100%; margin-top: .6rem;
  background: none; color: #C25438;
  border: 1px solid #e7ddd2; box-shadow: none;
}
.lg2-btn--ghost:hover { border-color: #d8c8b8; background: rgba(224,113,78,.05); box-shadow: none; transform: none; }

/* Aviso neutro (código reenviado, cuenta creada…). */
.lg2-info {
  background: #f0f9f4; border: 1px solid #bbe6cd; color: #166534;
  border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; line-height: 1.4; margin-bottom: 1.15rem;
}

/* Nota al pie de un campo (ej. el correo de una invitación, que no se edita). */
.lg2-hint { display: block; margin-top: .35rem; font-size: .78rem; color: #a8b0bd; }

.lg2-divider { display: flex; align-items: center; gap: .85rem; margin-top: 1.3rem; color: #a8b0bd; font-size: .72rem; letter-spacing: .08em; }
.lg2-divider::before, .lg2-divider::after { content: ''; flex: 1; height: 1px; background: #e7ddd2; }

.lg2-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; box-sizing: border-box; margin-top: 1rem;
  padding: .82rem; border-radius: 12px; border: 1px solid #e7ddd2;
  background: #fff; color: #334155; font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lg2-google:hover { border-color: #d8c8b8; box-shadow: 0 8px 18px rgba(15,23,42,.08); transform: translateY(-1px); color: #334155; }

.lg2-signup { text-align: center; font-size: .88rem; color: #64748b; margin: 1.5rem 0 0; }
.lg2-signup a { color: #C25438; font-weight: 700; text-decoration: none; }
.lg2-signup a:hover { text-decoration: underline; }

.lg2-panel-foot { display: flex; align-items: center; justify-content: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: #a8b0bd; }
.lg2-panel-foot span { width: 26px; height: 1px; background: #ddd0c2; }

/* ── Mobile: el video pasa a una franja superior ─────────────────────── */
@media (max-width: 900px) {
  .lg2 { grid-template-columns: 1fr; }
  .lg2-hero { min-height: 46vh; padding: 1.25rem 1.25rem 1.5rem; }
  .lg2-video { object-position: 50% 38%; }
  .lg2-claim { max-width: none; padding-bottom: 0; gap: .8rem; }
  .lg2-claim p { display: none; }
  .lg2-hero-foot { display: none; }
  /* Era `.lg2-panel-top .lg2-main`, pero son HERMANOS, no anidados: la regla
     nunca se aplicaba. El handoff pedía este padding para mobile. */
  .lg2-main { padding: 1.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lg2-video { display: none; }
  .lg2-card { animation: none; }
}