/* =========================================================
   GEOMEP — Login compartido (GeoVisor y Tablero Ambiental)
   Mismo archivo en ambas apps: panel de marca con el logo
   animado + la tarjeta de ingreso de cada app a la derecha.
   Sistema visual de geomep.net: acento #0B6B87, IBM Plex Sans,
   Big Shoulders Display solo para la palabra GEOMEP.
   ========================================================= */

.lg-shell{
  position:relative;z-index:3;
  width:min(1040px,100% - 32px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(32px,6vw,88px);align-items:center;
  padding:40px 0;
}

/* ---- Panel de marca ---- */
.lg-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.lg-globe{width:min(260px,70%);height:auto;overflow:visible}
.lg-type{display:inline-flex;flex-direction:column;align-items:stretch;margin-top:4px}
.lg-word{
  font-family:'Big Shoulders Display','IBM Plex Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(3.4rem,2rem + 4vw,5.75rem);line-height:.92;letter-spacing:.015em;color:#16191C;
}
.lg-word i{font-style:normal;display:inline-block}
.lg-word .geo{color:#0B6B87}
.lg-rule{display:block;height:2px;background:#9FD3E3;margin:8px 0 10px}
.lg-tag{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#434C55;white-space:nowrap}
.lg-app{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:8px 14px;border-radius:6px;background:#fff;border:1px solid #DFE3E6;
  box-shadow:0 1px 2px rgba(16,25,32,.06);
  font-family:'IBM Plex Sans',system-ui,sans-serif;color:#16191C;
}
.lg-app strong{font-size:15px;font-weight:600}
.lg-app span{font-size:13px;color:#434C55}
.lg-app i.dot{width:8px;height:8px;border-radius:50%;background:#0B6B87;font-style:normal}

/* ---- Animación del logo ---- */
.lg-ball{transform-box:fill-box;transform-origin:center;animation:lgIn 1s cubic-bezier(.16,1,.3,1) both}
.lg-land{animation:lgSpin 42s linear infinite}
.lg-orbit-front{stroke-dasharray:100;animation:lgDraw 1.5s .45s cubic-bezier(.16,1,.3,1) both}
.lg-orbit-back{animation:lgFade .8s .7s both}
.lg-sat{animation:lgFade .6s 1.3s both}
.lg-word i{animation:lgLetter .75s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--i) * .06s)}
.lg-rule{transform-origin:left center;animation:lgRule .9s .75s cubic-bezier(.16,1,.3,1) both}
.lg-tag,.lg-app{animation:lgFade .8s 1.05s both}
@keyframes lgSpin{to{transform:translateX(104px)}}
@keyframes lgIn{from{opacity:0;transform:scale(.86) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes lgDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
@keyframes lgLetter{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes lgRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .lg-ball,.lg-land,.lg-orbit-front,.lg-orbit-back,.lg-sat,.lg-word i,.lg-rule,.lg-tag,.lg-app{animation:none}
}

/* ---- Responsive ---- */
@media (max-width:820px){
  .lg-shell{grid-template-columns:1fr;gap:20px;padding:72px 0 32px;justify-items:center}
  .lg-globe{width:130px}
  .lg-word{font-size:3rem}
  .lg-tag{font-size:10.8px;letter-spacing:.1em}
  .lg-app{margin-top:16px}
}
@media (max-width:420px){
  .lg-tag{white-space:normal}
}

/* El logo grande ya está en el panel de marca */
.lg-shell .lp-brand-icon{display:none}
.lg-shell .lp-card{width:100%;max-width:400px}

/* Tablero: tarjeta de ingreso dentro del panel compartido */
.lg-shell .login-box{width:100%;max-width:400px;justify-self:center}
.lg-shell .login-brand-icon{display:none}

/* GeoVisor: la tarjeta no repite "GeoMEP" junto al nombre (ya está en el panel grande) --
   pero SÍ muestra su propio .lp-tagline (descripción corta de la app, "Plataforma web GIS"),
   que no es lo mismo que el lema de la empresa del panel grande. Antes esta regla también
   ocultaba .lp-tagline, de cuando ahí adentro iba el lema repetido -- dejó de aplicar el
   2026-10-23 al cambiar ese texto por una descripción propia (ver i18n.js, login.appDescription). */
.lg-shell .lp-brand-sub-inline{display:none}