/* assets/auth.css — Marco visual de login.php y first_login.php (rediseño 2026-06).
   Namespace: ls-  ·  Tipografía: Satoshi (la del app)  ·  Acento violeta #3a3165 (TailAdmin)
   Sin beige: lado derecho claro (#F1F5F9) + tarjeta blanca.
   Skyline (Obelisco BA) con luces que titilan/parpadean. */

:root{
  --ls-primary:#3a3165;
  --ls-primary-hover:#2d2651;
  --ls-ink:#1C2434;
  --ls-body:#64748B;
  --ls-muted:#8A99AF;
  --ls-stroke:#E2E8F0;
  --ls-bg:#F1F5F9;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body.app-bg{
  min-height:100vh; margin:0;
  display:flex; flex-direction:row;
  font-family:'Satoshi', system-ui, -apple-system, sans-serif;
  color:var(--ls-ink);
  background:var(--ls-bg);
}

/* ── IZQUIERDA — panel violeta oscuro + skyline ─────────────── */
.ls-left{
  flex:0 0 48%; max-width:48%;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  background:
    radial-gradient(125% 90% at 50% -12%, #2c2256 0%, rgba(44,34,86,0) 55%),
    linear-gradient(180deg, #15112e 0%, #0d0b1f 60%, #08060f 100%);
}
.ls-left::before{ /* grilla sutil que se desvanece hacia abajo */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(150,138,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,138,196,.05) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 90%);
          mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 90%);
}
/* glow superior que "respira" */
.ls-glow{
  position:absolute; top:-110px; left:50%; transform:translateX(-50%);
  width:420px; height:360px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(124,95,210,.55) 0%, rgba(90,68,170,.24) 40%, transparent 72%);
  animation: ls-glow-in .9s ease-out both, ls-breathe 7s ease-in-out 1s infinite;
}

/* marca */
.ls-brand{
  position:relative; z-index:3; margin-top:54px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation: ls-fade-in .55s ease-out both;
}
.ls-brand-logo{
  height:58px; width:auto;
  filter:brightness(0) invert(1) drop-shadow(0 6px 26px rgba(150,120,255,.6));
}
.ls-brand-title{
  font-family:'Satoshi',sans-serif; font-weight:800;
  font-size:1.6rem; color:#f3effe; letter-spacing:.005em; line-height:1;
  text-shadow:0 2px 22px rgba(140,110,240,.45);
}
.ls-brand-sub{
  font-size:.62rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(190,182,225,.5);
}

/* skyline al fondo */
.ls-city{
  flex:1; width:100%; display:flex; align-items:flex-end;
  position:relative; z-index:2; overflow:hidden; margin-top:.5rem;
}
.ls-city svg{ width:100%; height:100%; display:block; }

/* ── DERECHA — claro (SIN beige) + tarjeta ──────────────────── */
.ls-right{
  flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1.5rem; overflow-y:auto;
  background:var(--ls-bg);
}
.ls-right::before{ /* glow violeta sutil arriba-derecha (reemplaza la textura beige) */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 50% at 100% 0%, rgba(58,49,101,.09) 0%, transparent 60%),
    radial-gradient(45% 45% at 0% 100%, rgba(58,49,101,.05) 0%, transparent 60%);
}

.ls-card{
  position:relative; z-index:1;
  width:100%; max-width:392px;
  background:#fff; border:1px solid var(--ls-stroke); border-radius:18px;
  padding:2.5rem 2.25rem 2rem;
  box-shadow:0 1px 2px rgba(28,36,52,.04), 0 22px 50px -18px rgba(58,49,101,.30);
  animation: ls-card-in .6s cubic-bezier(.22,1,.36,1) both;
}
.ls-card-logo{ display:block; height:40px; width:auto; margin:0 auto 1.15rem; }
.ls-heading{
  font-family:'Satoshi',sans-serif; font-weight:800;
  font-size:1.7rem; color:var(--ls-ink);
  text-align:center; letter-spacing:-.02em; margin:0 0 .3rem;
}
.ls-sub{ font-size:.88rem; color:var(--ls-body); text-align:center; margin:0 0 1.6rem; }

/* campos */
.ls-field{ margin-bottom:1.05rem; }
.ls-label{
  display:block; margin-bottom:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ls-body);
}
.ls-input-wrap{ position:relative; }
.ls-input{
  width:100%; font-family:inherit; font-size:.92rem; color:var(--ls-ink);
  background:#fff; border:1.5px solid var(--ls-stroke); border-radius:11px;
  padding:.82rem 1rem; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.ls-input::placeholder{ color:#aeb6c4; }
.ls-input:hover{ border-color:#cdd4df; }
.ls-input:focus{ border-color:var(--ls-primary); box-shadow:0 0 0 3px rgba(58,49,101,.13); }
.ls-input:disabled{ background:#f4f5f8; color:#9aa3b2; }
.ls-input-pwd{ padding-right:2.8rem; }
.ls-eye{
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--ls-muted); display:flex; align-items:center; transition:color .18s;
}
.ls-eye:hover{ color:var(--ls-primary); }

/* botón */
.ls-btn{
  width:100%; font-family:inherit; font-size:.94rem; font-weight:700; letter-spacing:.01em;
  padding:.9rem; margin-top:.6rem; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,#453c78 0%,#3a3165 100%);
  border:none; border-radius:12px;
  box-shadow:0 6px 16px -4px rgba(58,49,101,.5);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.ls-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(58,49,101,.55); }
.ls-btn:active{ transform:translateY(0); filter:brightness(.97); }
.ls-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(58,49,101,.28), 0 6px 16px -4px rgba(58,49,101,.5); }

/* ayudas / error / nota */
.ls-help{ font-size:.74rem; color:var(--ls-muted); margin-top:.35rem; }
.ls-error{
  display:flex; align-items:flex-start; gap:.55rem;
  background:#fdf2f3; border:1px solid rgba(211,64,83,.18); border-left:3px solid #D34053;
  border-radius:0 .6rem .6rem 0; padding:.65rem .85rem; font-size:.82rem; color:#a32f3f;
  margin-bottom:1.1rem; line-height:1.45;
  animation: ls-fade-in .3s ease-out both;
}
.ls-note{ font-size:.74rem; color:var(--ls-muted); text-align:center; margin-top:1.3rem; }

/* ════════════════ ANIMACIONES BASE ════════════════ */
@keyframes ls-fade-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes ls-card-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes ls-glow-in{ from{opacity:0;transform:translateX(-50%) translateY(-24px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes ls-breathe{ 0%,100%{opacity:.82} 50%{opacity:1} }

/* ════════════════ LUCES DE LA CIUDAD (titilan / parpadean) ════════════════ */

/* estrellas */
.ls-city .twk-1{ animation: ls-twinkle 3.6s ease-in-out infinite; }
.ls-city .twk-2{ animation: ls-twinkle 4.8s ease-in-out -1.6s infinite; }
.ls-city .twk-3{ animation: ls-twinkle 5.8s ease-in-out -3.1s infinite; }
@keyframes ls-twinkle{ 0%,100%{opacity:.22} 50%{opacity:1} }

/* ventanas encendidas (cálidas) — glow titilante constante */
.ls-city .ww,
.ls-city .ww rect{ fill:#ffd58a; }
.ls-city .ww{ animation: ls-win-glow 4.5s ease-in-out infinite; }
@keyframes ls-win-glow{ 0%,100%{opacity:.55} 45%{opacity:1} 72%{opacity:.72} }

/* ventanas que se prenden y apagan en distintos momentos (la ciudad "vive") */
.ls-city .wa{ animation: ls-win-cycle 7s    ease-in-out infinite; }
.ls-city .wb{ animation: ls-win-cycle 9.5s  ease-in-out -2.4s infinite; }
.ls-city .wc{ animation: ls-win-cycle 8.2s  ease-in-out -4.7s infinite; }
.ls-city .wd{ animation: ls-win-cycle 11s   ease-in-out -1.3s infinite; }
@keyframes ls-win-cycle{
  0%, 40%, 100% { fill:rgba(145,136,198,.26); }   /* apagada (violeta tenue) */
  58%           { fill:rgba(255,196,110,.95); }   /* encendida (cálida) */
  82%           { fill:rgba(255,196,110,.50); }
}

/* luces rojas de antena (aviación) — parpadeo on/off */
.ls-city .blink-r{ animation: ls-blink-red 2s steps(1, end) infinite; }
@keyframes ls-blink-red{ 0%,48%{opacity:1} 50%,100%{opacity:.12} }

/* faro del obelisco — pulso suave */
.ls-city .ls-finial{ animation: ls-finial 3.4s ease-in-out infinite; }
@keyframes ls-finial{ 0%,100%{opacity:.8} 50%{opacity:1} }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:720px){
  body.app-bg{ flex-direction:column; height:auto; }
  .ls-left{ flex:0 0 auto; max-width:100%; padding:1.6rem 1.5rem 1.2rem; }
  .ls-brand{ margin-top:.25rem; }
  .ls-city{ display:none; }
  .ls-right{ padding:2rem 1rem; }
  .ls-card{ box-shadow:0 8px 30px -10px rgba(40,30,70,.18); }
}

/* ── accesibilidad: sin movimiento ──────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ls-brand, .ls-card, .ls-glow, .ls-error,
  .ls-city .twk-1, .ls-city .twk-2, .ls-city .twk-3,
  .ls-city .ww, .ls-city .wa, .ls-city .wb, .ls-city .wc, .ls-city .wd,
  .ls-city .blink-r, .ls-city .ls-finial{ animation:none !important; }
  .ls-city .ww{ opacity:.92; }                 /* ventanas cálidas quedan fijas encendidas */
  .ls-city .wa, .ls-city .wb,
  .ls-city .wc, .ls-city .wd{ fill:rgba(255,196,110,.6); }  /* algunas encendidas, sin parpadeo */
}