/* ============================================================
   Login BETA — estilo "minimal gallery": negro/gris + 1 acento rojo,
   tipografia grande, fondo animado tipo video, formulario de linea.
   Archivo autonomo: no depende de exing.css, no pisa nada del panel.
   ============================================================ */
:root{
  --lb-bg:#0a0a0b; --lb-ink:#f2f2f0; --lb-mut:#8a8a8f; --lb-line:#26262b;
  --lb-red:#ff2a1a; --lb-card:rgba(20,20,23,.55); --lb-card-bd:rgba(255,255,255,.09);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body.lb{
  background:var(--lb-bg); color:var(--lb-ink); min-height:100vh; overflow-x:hidden; overflow-y:auto;
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; position:relative;
}

/* ---- fondo animado (canvas) + capas cinematograficas ---- */
.lb-fx{position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block;}
.lb-vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.7) 100%);}
/* dither ESTATICO y fino: rompe el banding de los gradientes sin agregar ruido
   en movimiento (el ruido animado se veia "pixelado", peor por Escritorio Remoto). */
.lb-grain{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;}

/* ---- topbar ---- */
.lb-top{position:fixed; z-index:5; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; mix-blend-mode:normal;}
.lb-logo{width:104px; height:auto; opacity:.95;}
.lb-meta{display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.14em; color:var(--lb-mut);}
.lb-beta{color:var(--lb-red); border:1px solid var(--lb-red); border-radius:20px; padding:2px 9px; font-weight:600;}
.lb-clock{font-variant-numeric:tabular-nums; color:var(--lb-ink);}
.lb-city{text-transform:uppercase;}

/* ---- layout principal ---- */
.lb-main{position:relative; z-index:4; min-height:100vh;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px;
  padding:0 40px; max-width:1400px; margin:0 auto;}

/* ---- hero (izquierda) ---- */
.lb-hero{max-width:560px;}
.lb-kicker{text-transform:uppercase; letter-spacing:.24em; font-size:12px; color:var(--lb-mut); margin-bottom:18px;}
.lb-title{font-size:clamp(52px,8vw,104px); line-height:.92; font-weight:800; letter-spacing:-.02em;}
.lb-title::after{content:"."; color:var(--lb-red);}
.lb-tagline{margin-top:22px; font-size:19px; color:var(--lb-mut); max-width:420px;
  transition:opacity .3s ease, transform .3s ease;}

.lb-nav{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;}
.lb-opt{position:relative; display:inline-block; text-decoration:none;
  font-size:15px; letter-spacing:.04em; padding-bottom:9px;}
/* revelado tipo portfolio: el texto sube y entra una copia en color */
.lb-opt-line{display:block; position:relative; overflow:hidden; height:1.3em;}
.lb-opt-a, .lb-opt-b{display:block; line-height:1.3em; white-space:nowrap;
  transition:transform .5s cubic-bezier(.19,1,.22,1);}
.lb-opt-a{color:var(--lb-mut);}
.lb-opt-b{position:absolute; top:0; left:0; transform:translateY(110%); color:var(--lb-ink);}
.lb-opt:hover .lb-opt-a, .lb-opt.is-active .lb-opt-a{transform:translateY(-110%);}
.lb-opt:hover .lb-opt-b, .lb-opt.is-active .lb-opt-b{transform:translateY(0);}
.lb-opt::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--lb-red); transition:width .45s cubic-bezier(.19,1,.22,1);}
.lb-opt:hover::after, .lb-opt.is-active::after{width:100%;}

/* ---- panel de login (derecha) ---- */
.lb-panel{display:flex; justify-content:flex-end;}
.lb-card{width:100%; max-width:380px; padding:34px 32px; border-radius:18px;
  background:var(--lb-card); border:1px solid var(--lb-card-bd);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 30px 80px rgba(0,0,0,.55);}
.lb-card-t{font-size:15px; text-transform:uppercase; letter-spacing:.16em; color:var(--lb-mut); margin-bottom:26px; font-weight:600;}
.lb-error{margin:-14px 0 22px; padding:10px 12px; border-radius:9px; font-size:13.5px;
  color:#ffb3ad; background:rgba(255,42,26,.10); border:1px solid rgba(255,42,26,.32);}
.lb-form{display:flex; flex-direction:column;}
.lb-form label{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--lb-mut); margin:0 0 8px;}
.lb-form input{background:transparent; border:none; border-bottom:1px solid var(--lb-line);
  color:var(--lb-ink); font-size:16px; padding:8px 2px; margin-bottom:16px; outline:none;
  transition:border-color .25s ease;}
.lb-form input:focus{border-color:var(--lb-red);}
.lb-links{margin:-8px 0 22px; text-align:right;}
.lb-links a, .lb-alt a{color:var(--lb-mut); text-decoration:none; font-size:13px; transition:color .2s ease;}
.lb-links a:hover, .lb-alt a:hover{color:var(--lb-red);}
.lb-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--lb-red); color:#fff; border:none; border-radius:10px; cursor:pointer;
  font-size:15px; font-weight:600; letter-spacing:.03em; padding:14px 18px;
  transition:transform .18s ease, filter .18s ease;}
.lb-btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.lb-btn span{transition:transform .2s ease;}
.lb-btn:hover span{transform:translateX(4px);}
.lb-alt{margin-top:20px; font-size:13px; color:var(--lb-mut); text-align:center;}

/* ---- ingreso con Microsoft (SSO) ---- */
/* Separador con la palabra "o" centrada sobre una linea fina. */
.lb-sep{display:flex; align-items:center; gap:12px; margin:22px 0 16px;
  font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--lb-mut);}
.lb-sep::before, .lb-sep::after{content:""; flex:1; height:1px; background:var(--lb-line);}
/* Boton secundario: deliberadamente NO rojo, para que el ingreso por clave
   siga siendo la accion primaria mientras convivan los dos metodos. */
.lb-sso{display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px 18px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--lb-card-bd);
  color:var(--lb-ink); font-size:15px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; transition:background .18s ease, border-color .18s ease, transform .18s ease;}
.lb-sso:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-1px);}
.lb-sso-ic{width:18px; height:18px; flex:none;}

/* ---- footer ---- */
.lb-foot{position:fixed; z-index:5; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lb-mut);}
.lb-hint{color:var(--lb-mut); opacity:.8;}

/* ---- responsive ---- */
@media (max-width:900px){
  .lb-main{grid-template-columns:1fr; padding:120px 26px 90px; gap:34px; align-items:start;}
  .lb-panel{justify-content:flex-start;}
  .lb-card{max-width:100%;}
  .lb-foot .lb-hint{display:none;}
}
/* El hero (Sustentabilidad + nav) queda SIEMPRE centrado a la izquierda, igual
   que en el login. Si el formulario es mas alto que la pantalla, scrollea la
   tarjeta por dentro en vez de descentrar/empujar el hero. */
.lb-panel .lb-card{max-height:calc(100vh - 160px); overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;}          /* Firefox / Edge legacy */
.lb-panel .lb-card::-webkit-scrollbar{width:0; height:0; display:none;}  /* Chrome / Edge */

/* ---- extras para Registrarse / Recuperar (misma estetica del login) ---- */
.lb-form select{background:transparent; border:none; border-bottom:1px solid var(--lb-line);
  color:var(--lb-ink); font-size:16px; padding:8px 2px; margin-bottom:16px; outline:none;
  cursor:pointer; transition:border-color .25s ease;}
.lb-form select:focus{border-color:var(--lb-red);}
.lb-form select option{background:#141418; color:var(--lb-ink);}
.lb-note{margin:-8px 0 16px; font-size:12.5px; color:var(--lb-mut); line-height:1.45;}
.lb-msg{margin:0 0 20px; padding:11px 13px; border-radius:9px; font-size:13.5px; line-height:1.5;
  color:var(--lb-ink); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);}
.lb-msg-ok{color:#9fe6b4; background:rgba(80,200,120,.10); border-color:rgba(80,200,120,.30);}
.lb-question{margin:0 0 20px; padding:13px 15px; border-radius:11px; font-size:15px; font-weight:500;
  color:var(--lb-ink); background:rgba(255,255,255,.04); border:1px solid var(--lb-card-bd);}

/* pagina de resultado (ej: registro creado) — card unica centrada */
.lb-center{position:relative; z-index:4; min-height:100vh; display:flex;
  align-items:center; justify-content:center; padding:100px 26px 60px;}
.lb-center .lb-card{max-width:440px; text-align:center;}
.lb-result-ic{font-size:44px; line-height:1; margin-bottom:14px;}
.lb-result-t{font-size:22px; font-weight:700; margin-bottom:10px; color:var(--lb-ink); letter-spacing:-.01em;}
.lb-result-m{font-size:14.5px; color:var(--lb-mut); line-height:1.55; margin-bottom:24px;}
.lb-center .lb-btn{width:100%;}