/* =====================================================================
   login_mundial.css — Panel lateral del login (hero "pro", edición Mundial)
   Estética: SaaS premium — glass card central, tiles flotando, conectores
   punteados, mini stat card y cajas isométricas, sobre azul suave.
   El guiño al Mundial va en el COPY + acentos (sol de mayo, celeste, amarillo),
   sin caricatura. Todo scopeado bajo .login-arg. Apagar: $MUNDIAL=false.
   Marca: amarillo #FCD535, slate #34495E, celeste #74ACDF.
   ===================================================================== */

.login-arg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 95% at 50% 26%, #eef5fd 0%, #d3e4f7 46%, #aecdee 100%);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.login-arg::after { display: none !important; } /* mata la franja de main.css */

/* Anillos de "piso" reflectante abajo */
.lh-rings {
  position: absolute;
  left: 50%; bottom: 4%;
  width: 120%; height: 46%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.lh-rings::before, .lh-rings::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
}
.lh-rings::before { width: 58%; height: 58%; }
.lh-rings::after  { width: 86%; height: 86%; border-color: rgba(255,255,255,.28); }

/* Red de conectores punteados (decorativa) */
.lh-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lh-net svg { width: 100%; height: 100%; display: block; }
.lh-net .dot { animation: lhPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-net .dot:nth-child(2) { animation-delay: .6s; }
.lh-net .dot:nth-child(3) { animation-delay: 1.2s; }
.lh-net .dot:nth-child(4) { animation-delay: 1.8s; }
.lh-net .dot:nth-child(5) { animation-delay: 2.4s; }
@keyframes lhPulse { 0%,100% { opacity:.35; transform:scale(.8);} 50% { opacity:1; transform:scale(1.25);} }

/* ---------------------------------------------------------------------
   Tiles de cristal flotando
   --------------------------------------------------------------------- */
.lh-tile {
  position: absolute;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 30px rgba(40, 86, 150, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #4f8ed6;
  font-size: 26px;
  animation: lhFloat 6s ease-in-out infinite;
  will-change: transform;
}
.lh-tile--1 { top: 16%;  left: 12%; animation-delay: 0s;   }
.lh-tile--2 { top: 24%;  right: 11%; animation-delay: 1.2s; }
.lh-tile--3 { top: 60%;  left: 9%;  animation-delay: 2.1s; }
.lh-tile--4 { top: 11%;  right: 26%; width: 54px; height: 54px; font-size: 22px; animation-delay: .7s; }
@keyframes lhFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------------------------------------------------------------------
   Card central (glass)
   --------------------------------------------------------------------- */
.lh-card {
  position: relative;
  z-index: 4;
  width: min(80%, 430px);
  padding: 34px 38px 30px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.5) 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 30px 70px rgba(40, 86, 150, .22), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  animation: lhCardIn .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lhCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lh-logo { width: 50px; height: 50px; margin: 0 auto 14px; display: block; }
.lh-logo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(230,184,0,.35)); }

.lh-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #1f5e96;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(116,172,223,.45);
}
/* solcito del eyebrow */
.lh-eyebrow .sol {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #ffd84d 0 52%, #f0a800 53% 100%);
  box-shadow: 0 0 0 2px rgba(252,213,53,.35);
  flex: 0 0 auto;
}

.lh-title {
  margin: 0 0 12px;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #1f2d3d;
}
.lh-title .hl { color: #2f7ed1; }

.lh-sub {
  margin: 0 auto 24px;
  max-width: 320px;
  font-size: .95rem;
  line-height: 1.55;
  color: #5a6a7b;
}

/* Features */
.lh-features { display: flex; justify-content: center; gap: 20px; }
.lh-feat { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 90px; }
.lh-feat-ic {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #2f7ed1;
  background: rgba(116,172,223,.14);
  border: 1.5px solid rgba(116,172,223,.5);
}
.lh-feat-l { font-size: .82rem; font-weight: 700; color: #2b3a4d; }
.lh-feat-s { font-size: .68rem; color: #7c8a99; margin-top: -3px; }

/* ---------------------------------------------------------------------
   Mini stat card flotante
   --------------------------------------------------------------------- */
.lh-stat {
  position: absolute;
  z-index: 4;
  top: 52%; right: 6%;
  width: 168px;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 16px 38px rgba(40, 86, 150, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: lhFloat 7s ease-in-out infinite; animation-delay: .4s;
}
.lh-stat .top { display: flex; justify-content: space-between; align-items: center; }
.lh-stat .lbl { font-size: .72rem; color: #6a7889; font-weight: 600; }
.lh-stat .day { font-size: .62rem; color: #9aa7b5; }
.lh-stat .num { font-size: 1.5rem; font-weight: 800; color: #1f2d3d; line-height: 1.25; }
.lh-stat .delta { font-size: .68rem; font-weight: 700; color: #25b07a; }
.lh-stat svg { display: block; width: 100%; height: 28px; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Cajas isométricas (abajo derecha)
   --------------------------------------------------------------------- */
.lh-boxes {
  position: absolute;
  z-index: 4;
  right: 7%; bottom: 6%;
  width: 212px; height: 172px;
  animation: lhFloat 8s ease-in-out infinite; animation-delay: 1s;
}
.lh-boxes svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 24px rgba(40,86,150,.2)); }
/* Banderita argentina ondeando sobre la caja */
.lh-flag-cloth { transform-box: fill-box; transform-origin: 0% 50%; animation: lhFlagWave 3s ease-in-out infinite; }
@keyframes lhFlagWave {
  0%, 100% { transform: skewY(0deg)  scaleX(1);   }
  35%      { transform: skewY(-4deg) scaleX(.97); }
  70%      { transform: skewY(3deg)  scaleX(.99); }
}

/* ---------------------------------------------------------------------
   Responsive + accesibilidad
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) { .login-arg { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .lh-tile, .lh-stat, .lh-boxes, .lh-net .dot, .lh-card, .lh-flag-cloth { animation: none !important; }
}