/* rest/login/_login.css — Simple + Dopamine */

.lg-body {
  margin: 0;
  background: #f6f8fc;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   MODO 1 — Wallpaper estatico (fondo.jpg)
   ============================================================ */
.lg-photo {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.lg-photo-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(15, 23, 42, .05) 0%, rgba(15, 23, 42, .25) 60%, rgba(15, 23, 42, .45) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, transparent 30%, rgba(15, 23, 42, .25) 100%);
}

/* ============================================================
   MODO 3 — Foto del local como "ventana" a la izquierda + paneles vidrio
   ============================================================ */
.lg-mode-3 {
  background: linear-gradient(135deg, #eef3fb 0%, #e8effa 50%, #e0e7ff 100%);
}
.lg-mode-3 .lg-photo {
  width: 34%;
  left: 0; right: auto;
}
.lg-mode-3 .lg-photo--sharp {
  filter: saturate(1.05) brightness(1.02) contrast(1.03);
  transform: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, black 0px, black 280px, transparent 500px);
          mask-image: linear-gradient(90deg, black 0px, black 280px, transparent 500px);
}
.lg-mode-3 .lg-photo--blur {
  filter: blur(10px) saturate(.85) brightness(1.05);
  transform: scale(1.04);
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 220px, black 480px, black 70%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 220px, black 480px, black 70%, transparent 100%);
}
@media (max-width: 1280px) {
  .lg-mode-3 .lg-photo--sharp {
    -webkit-mask-image: linear-gradient(90deg, black 0px, black 220px, transparent 400px);
            mask-image: linear-gradient(90deg, black 0px, black 220px, transparent 400px);
  }
  .lg-mode-3 .lg-photo--blur {
    -webkit-mask-image: linear-gradient(90deg, transparent 170px, black 380px, black 70%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 170px, black 380px, black 70%, transparent 100%);
  }
}
.lg-photo-tint--cold {
  background:
    linear-gradient(90deg,
      rgba(219, 234, 254, .15) 0%,
      rgba(219, 234, 254, .30) 25%,
      rgba(232, 239, 250, .75) 45%,
      rgba(232, 239, 250, .85) 70%,
      rgba(232, 239, 250, .80) 100%);
}

.lg-glass {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lg-strip {
  position: absolute;
  top: -5%;
  height: 110%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .35) 0%,
    rgba(255, 255, 255, .55) 35%,
    rgba(255, 255, 255, .45) 65%,
    rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  border-left: 1px solid rgba(255, 255, 255, .7);
  border-right: 1px solid rgba(255, 255, 255, .4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .2),
    0 0 40px rgba(15, 23, 42, .05);
}
.lg-strip--l1 { left: 7%;    width: 8%;  opacity: .92; }
.lg-strip--l2 { left: 16%;   width: 14%; opacity: .80;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .38) 50%,
    rgba(255, 255, 255, .20) 100%);
}
.lg-strip--r1 { right: 4%;   width: 7%;  opacity: .95; }

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .lg-strip {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .35) 100%);
  }
}

@media (max-width: 900px) {
  .lg-strip--l2, .lg-strip--r1 { display: none; }
  .lg-strip--l1 { width: 22%; }
}
@media (max-width: 560px) {
  .lg-glass { display: none; }
  .lg-mode-3 .lg-photo--sharp { display: none; }
  .lg-mode-3 .lg-photo--blur {
    width: 100%;
    filter: blur(20px) saturate(.85) brightness(1.05);
    -webkit-mask-image: none;
            mask-image: none;
    transform: none;
    opacity: .5;
  }
}

/* ============================================================
   MODO 4 — Canvas Factor Nube
   Modulos de datos + flujos + malla + arcos de nube operativa
   ============================================================ */
.lg-mode-4 { color: #1e293b; }

.fn-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Base — gradiente perla con respiracion superior/inferior */
.fn-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 90% at 50% -10%, #ffffff 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 110%, #d8e2f0 0%, transparent 55%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f8 55%, #e4ebf4 100%);
}

/* Malla de datos — dots, fade-out al centro */
.fn-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(71, 85, 105, .25) 1px, transparent 1.6px);
  background-size: 56px 56px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 52%, transparent 0%, transparent 32%, black 78%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 52%, transparent 0%, transparent 32%, black 78%);
  opacity: .9;
}

/* Bandas diagonales de flujo (muy sutiles) */
.fn-band {
  position: absolute;
  left: -15%; right: -15%;
  height: 95px;
  pointer-events: none;
}
.fn-band--1 {
  top: 17%;
  transform: rotate(-9deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(96, 165, 250, .07) 22%,
    rgba(96, 165, 250, .11) 50%,
    rgba(96, 165, 250, .07) 78%,
    transparent 100%);
}
.fn-band--2 {
  top: 64%;
  height: 70px;
  transform: rotate(7deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 211, 252, .06) 25%,
    rgba(125, 211, 252, .10) 50%,
    rgba(125, 211, 252, .06) 75%,
    transparent 100%);
}

/* SVG con modulos, conexiones, arcos y nodos */
.fn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Pulsacion sutil de nodos clave */
.fn-pulse        { animation: fn-pulse 3.6s ease-in-out infinite; }
.fn-pulse--b     { animation-delay: -.9s; }
.fn-pulse--c     { animation-delay: -1.8s; }
.fn-pulse--d     { animation-delay: -2.7s; }
@keyframes fn-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1;   }
}

/* Glow central que jerarquiza el card */
.fn-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 50% at 50% 50%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 65%);
}

/* Wordmark FACTOR · NUBE */
.fn-mark {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .58em;
  color: rgba(15, 23, 42, .22);
  font-weight: 700;
  text-transform: uppercase;
  font-family: -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
  padding-left: .58em; /* compensa letter-spacing */
}

@media (prefers-reduced-motion: reduce) {
  .fn-pulse { animation: none; }
}

/* Responsive — modulos se recortan al hacer slice del SVG */
@media (max-width: 900px) {
  .fn-band--1 { top: 12%; }
  .fn-band--2 { top: 70%; }
  .fn-grid    { background-size: 44px 44px; }
}
@media (max-width: 560px) {
  .fn-canvas  { opacity: .55; }
  .fn-band    { display: none; }
  .fn-mark    { font-size: 9px; letter-spacing: .45em; bottom: 14px; }
}

/* ============================================================
   Fondo dopaminico — orbes circulares moviendose despacito
   Mezcla 2 capas: orbes "ambient" (blur grande) + esferas 3D (sharp)
   ============================================================ */
.dp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #eef3fb 60%, #e8effa 100%);
}

.dp-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: dp-drift 70s ease-in-out infinite alternate;
}

/* Capa 1 — Orbes ambient (glow grande, blurred) */
.dp-orb--blue {
  width: 520px; height: 520px;
  left: -120px; top: -140px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
  filter: blur(70px);
  opacity: .55;
  animation-duration: 80s;
}
.dp-orb--cyan {
  width: 460px; height: 460px;
  right: -100px; top: 4%;
  background: radial-gradient(circle, #67e8f9 0%, transparent 70%);
  filter: blur(70px);
  opacity: .5;
  animation-delay: -12s;
  animation-duration: 95s;
}
.dp-orb--mint {
  width: 320px; height: 320px;
  left: 52%; top: 40%;
  background: radial-gradient(circle, #86efac 0%, transparent 70%);
  filter: blur(70px);
  opacity: .38;
  animation-delay: -45s;
  animation-duration: 110s;
}

/* Capa 2 — Esferas 3D (highlight arriba-izq + sombra abajo-der) */
.dp-orb--pink {
  width: 220px; height: 220px;
  left: 8%; bottom: 6%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #fbcfe8 18%, #f472b6 55%, #db2777 100%);
  box-shadow:
    0 30px 60px -18px rgba(219, 39, 119, .45),
    inset -16px -22px 40px rgba(190, 24, 93, .35),
    inset 12px 14px 28px rgba(255, 255, 255, .55);
  opacity: .9;
  animation-duration: 85s;
  animation-delay: -25s;
}
.dp-orb--sun {
  width: 280px; height: 280px;
  right: 6%; bottom: -50px;
  background:
    radial-gradient(circle at 30% 28%, #ffffff 0%, #fed7aa 16%, #fb923c 55%, #ea580c 100%);
  box-shadow:
    0 36px 70px -20px rgba(234, 88, 12, .5),
    inset -18px -26px 46px rgba(194, 65, 12, .35),
    inset 14px 16px 32px rgba(255, 255, 255, .55);
  opacity: .92;
  animation-duration: 75s;
  animation-delay: -40s;
}
.dp-orb--lilac {
  width: 220px; height: 220px;
  right: 26%; top: 8%;
  background:
    /* capa 1 — highlight especular arriba-izq */
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .65) 0%, transparent 38%),
    /* capa 2 — logo del cliente como reflejo */
    var(--orb-logo) center / 60% auto no-repeat,
    /* capa 3 — base esfera */
    radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 18%, #60a5fa 55%, #1d4ed8 100%);
  background-blend-mode: screen, overlay, normal;
  box-shadow:
    0 30px 60px -18px rgba(29, 78, 216, .5),
    inset -16px -22px 40px rgba(30, 64, 175, .4),
    inset 12px 14px 28px rgba(255, 255, 255, .55);
  opacity: .95;
  animation-duration: 90s;
  animation-delay: -20s;
}

/* Esferas extra (variedad) */
.dp-orb--cherry {
  width: 120px; height: 120px;
  left: 38%; bottom: 14%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #fecaca 16%, #ef4444 55%, #b91c1c 100%);
  box-shadow:
    0 18px 40px -14px rgba(185, 28, 28, .42),
    inset -10px -14px 24px rgba(153, 27, 27, .3),
    inset 8px 10px 18px rgba(255, 255, 255, .55);
  opacity: .85;
  animation-duration: 100s;
  animation-delay: -55s;
}
.dp-orb--teal {
  width: 100px; height: 100px;
  left: 70%; bottom: 24%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #99f6e4 16%, #2dd4bf 55%, #0f766e 100%);
  box-shadow:
    0 16px 36px -12px rgba(15, 118, 110, .42),
    inset -8px -12px 22px rgba(17, 94, 89, .32),
    inset 6px 8px 16px rgba(255, 255, 255, .55);
  opacity: .85;
  animation-duration: 115s;
  animation-delay: -15s;
}

@keyframes dp-drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0); }
  25%  { transform: translate(40px, -30px) scale(1.06) rotate(6deg); }
  50%  { transform: translate(-30px, 50px) scale(.96) rotate(-5deg); }
  75%  { transform: translate(50px, 20px) scale(1.03) rotate(3deg); }
  100% { transform: translate(-40px, -40px) scale(1.08) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-orb { animation: none; }
}

@media (max-width: 700px) {
  .dp-orb--cherry, .dp-orb--teal { display: none; }
  .dp-orb--lilac { width: 110px; height: 110px; }
}

/* ============================================================
   MODO 5 — Nubes (Factor Nube) + utensilios de restaurante, glossy.
   Misma paleta dopamine, deriva CASI IMPERCEPTIBLE (3-9 min/ciclo).
   ============================================================ */
.dp5-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -10%, #ffffff 0%, #eef3fb 58%, #e7eefa 100%);
}

/* Capa 1 — cintas aurora ambient (deriva lentisima) */
.dp5-rib {
  position: absolute;
  width: 1100px;
  height: 360px;
  border-radius: 46% 54% 60% 40% / 100% 100% 0 0;
  filter: blur(90px);
  will-change: transform;
  animation: dp5-rib 520s ease-in-out infinite alternate;
}
.dp5-rib--a {
  left: -160px; top: -120px;
  --ang: -14deg; --rdx: 26px; --rdy: -18px;
  background: linear-gradient(90deg, rgba(96,165,250,.55), rgba(103,232,249,.30) 55%, transparent);
  opacity: .6;
  animation-duration: 480s;
}
.dp5-rib--b {
  right: -220px; top: 18%;
  --ang: 12deg; --rdx: -22px; --rdy: 16px;
  background: linear-gradient(90deg, transparent, rgba(134,239,172,.30) 45%, rgba(45,212,191,.45));
  opacity: .5;
  animation-delay: -120s;
  animation-duration: 560s;
}
.dp5-rib--c {
  left: 12%; bottom: -200px;
  --ang: 6deg; --rdx: 20px; --rdy: -14px;
  width: 1300px;
  background: linear-gradient(90deg, rgba(244,114,182,.40), rgba(251,146,60,.32) 60%, transparent);
  opacity: .45;
  animation-delay: -200s;
  animation-duration: 620s;
}

/* Capa 2 — siluetas glossy (nube / campana / gorro chef) via mask SVG.
   El gloss lo da el degradado interno + drop-shadow (no box-shadow,
   que la mask recortaria). */
.dp5-gem {
  position: absolute;
  -webkit-mask: var(--shape) center / contain no-repeat;
          mask: var(--shape) center / contain no-repeat;
  will-change: transform;
  animation: dp5-float 420s ease-in-out infinite alternate;
}

/* Formas */
.dp5-gem--cloudA, .dp5-gem--cloudB, .dp5-gem--logo {
  --shape: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,100,70'%3E%3Cpath%20d='M30,66Q10,66,10,47Q10,30,28,31Q31,13,52,15Q72,15,74,33Q92,32,92,49Q92,66,73,66Z'/%3E%3C/svg%3E");
}
.dp5-gem--cloche {
  --shape: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,100,72'%3E%3Cpath%20d='M50,14a3.5,3.5,0,0,1,3.5,3.5a31,31,0,0,1,28,34.5H18.5a31,31,0,0,1,28,-34.5A3.5,3.5,0,0,1,50,14ZM7,58h86a3,3,0,0,1,0,9H7a3,3,0,0,1,0,-9Z'/%3E%3C/svg%3E");
}
.dp5-gem--chef {
  --shape: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,100,92'%3E%3Cpath%20d='M32,84V54Q15,55,15,39Q15,24,31,27Q33,11,50,11Q67,11,69,27Q85,24,85,39Q85,55,68,54V84Z'/%3E%3C/svg%3E");
}

/* Nube grande azul (top-left) */
.dp5-gem--cloudA {
  width: 320px; height: 224px;
  left: 6%; top: 11%;
  --rot: 0deg; --dx: 13px; --dy: -9px; --dr: 1.2deg;
  background:
    radial-gradient(55% 50% at 32% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 55%),
    radial-gradient(85% 80% at 70% 90%, rgba(29,78,216,.55), rgba(29,78,216,0) 60%),
    linear-gradient(150deg, #93c5fd, #3b82f6 52%, #1d4ed8);
  filter: drop-shadow(0 18px 26px rgba(29,78,216,.36)) drop-shadow(0 5px 9px rgba(29,78,216,.26));
  opacity: .95;
  animation-duration: 420s;
  animation-delay: -30s;
}
/* Nube mediana mint (centro-alto) */
.dp5-gem--cloudB {
  width: 176px; height: 123px;
  left: 57%; top: 21%;
  --rot: 0deg; --dx: -11px; --dy: 11px; --dr: -1.4deg;
  background:
    radial-gradient(55% 50% at 32% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 55%),
    radial-gradient(85% 80% at 70% 90%, rgba(15,118,110,.5), rgba(15,118,110,0) 60%),
    linear-gradient(150deg, #99f6e4, #2dd4bf 52%, #0f766e);
  filter: drop-shadow(0 14px 22px rgba(15,118,110,.34)) drop-shadow(0 4px 8px rgba(15,118,110,.24));
  opacity: .9;
  animation-duration: 480s;
  animation-delay: -150s;
}
/* Gorro de chef pink (abajo-izq) */
.dp5-gem--chef {
  width: 200px; height: 184px;
  left: 9%; bottom: 7%;
  --rot: -3deg; --dx: 10px; --dy: -11px; --dr: 1deg;
  background:
    radial-gradient(55% 50% at 32% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 52%),
    radial-gradient(85% 80% at 70% 90%, rgba(190,24,93,.5), rgba(190,24,93,0) 60%),
    linear-gradient(150deg, #fbcfe8, #f472b6 52%, #db2777);
  filter: drop-shadow(0 18px 26px rgba(219,39,119,.36)) drop-shadow(0 5px 9px rgba(219,39,119,.26));
  opacity: .92;
  animation-duration: 540s;
  animation-delay: -70s;
}
/* Campana/cloche sun (abajo-der) */
.dp5-gem--cloche {
  width: 280px; height: 202px;
  right: 6%; bottom: -26px;
  --rot: 2deg; --dx: -13px; --dy: -8px; --dr: -1.2deg;
  background:
    radial-gradient(55% 50% at 32% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 52%),
    radial-gradient(85% 80% at 70% 90%, rgba(194,65,12,.5), rgba(194,65,12,0) 60%),
    linear-gradient(150deg, #fed7aa, #fb923c 52%, #ea580c);
  filter: drop-shadow(0 20px 30px rgba(234,88,12,.38)) drop-shadow(0 5px 10px rgba(234,88,12,.26));
  opacity: .93;
  animation-duration: 500s;
  animation-delay: -210s;
}
/* Nube indigo con el logo del cliente (Factor NUBE + marca) */
.dp5-gem--logo {
  width: 250px; height: 175px;
  right: 23%; top: 8%;
  --rot: 0deg; --dx: 11px; --dy: 9px; --dr: 1deg;
  background:
    radial-gradient(55% 50% at 32% 22%, rgba(255,255,255,.7), rgba(255,255,255,0) 50%),
    var(--orb-logo) center / 52% auto no-repeat,
    linear-gradient(150deg, #c7d2fe, #818cf8 52%, #4338ca);
  background-blend-mode: screen, overlay, normal;
  filter: drop-shadow(0 18px 28px rgba(67,56,202,.36)) drop-shadow(0 5px 9px rgba(67,56,202,.26));
  opacity: .95;
  animation-duration: 460s;
  animation-delay: -110s;
}

/* Deriva minima: ~12px y ~1.5deg en varios minutos */
@keyframes dp5-float {
  from { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
  to   { transform: translate(var(--dx, 12px), var(--dy, -10px))
                    rotate(calc(var(--rot, 0deg) + var(--dr, 1.5deg))) scale(1.02); }
}

@keyframes dp5-rib {
  from { transform: translate(0, 0) rotate(var(--ang, 0deg)); }
  to   { transform: translate(var(--rdx, 24px), var(--rdy, -16px))
                    rotate(calc(var(--ang, 0deg) + 3deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .dp5-gem, .dp5-rib { animation: none; }
}

@media (max-width: 700px) {
  .dp5-gem--cloudB, .dp5-gem--cloche { display: none; }
  .dp5-gem--cloudA { width: 200px; height: 140px; }
  .dp5-gem--chef   { width: 130px; height: 120px; }
  .dp5-gem--logo   { width: 170px; height: 119px; right: 7%; }
}

/* ============================================================
   Layout — wrap centrado
   ============================================================ */
.lg-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.lg-stack {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ============================================================
   Logo suelto — sin caja, flotando arriba
   ============================================================ */
.lg-logo-loose {
  height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  animation: lg-logo-float 6s ease-in-out infinite;
  filter:
    drop-shadow(0 12px 24px rgba(25, 118, 210, .18))
    drop-shadow(0 4px 8px rgba(15, 23, 42, .08));
  transition: transform .25s ease;
  cursor: pointer;
}
.lg-logo-loose:hover { transform: scale(1.05); }

@keyframes lg-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-logo-loose { animation: none; }
}

/* ============================================================
   Card simple
   ============================================================ */
.lg-card {
  width: 100%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  padding: 32px 30px 26px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 18px 50px rgba(15, 23, 42, .1),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}

.lg-field { margin-bottom: 14px; }
.lg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.lg-inputwrap { position: relative; }
.lg-inputwrap .lg-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
  transition: color .15s ease;
  z-index: 3;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-family: "FontAwesome" !important;
}
.lg-input {
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
  padding: 0 44px 0 40px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  outline: none !important;
  font-family: inherit !important;
  line-height: normal !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-input::placeholder { color: #94a3b8; }
.lg-input:focus {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 4px rgba(25, 118, 210, .12) !important;
}
.lg-inputwrap:focus-within .lg-icon { color: #1976d2; }

/* Toggle ojo en password */
.lg-eye {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
  transition: color .15s ease, background .15s ease;
  z-index: 3;
}
.lg-eye:hover { color: #1976d2; background: rgba(25, 118, 210, .08); }
.lg-eye:focus { outline: none; color: #1976d2; }
.lg-eye .fa { line-height: 1; }

.lg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.lg-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  user-select: none;
  margin: 0;
  font-weight: 500;
}
.lg-check input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: #1976d2;
  cursor: pointer;
  margin: 0;
}

.lg-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #1976d2 0%, #29b6f6 100%);
  box-shadow:
    0 8px 22px rgba(25, 118, 210, .35),
    0 2px 6px rgba(25, 118, 210, .2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden;
}
.lg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.lg-btn:hover {
  filter: brightness(1.04);
  box-shadow:
    0 12px 28px rgba(25, 118, 210, .45),
    0 3px 8px rgba(25, 118, 210, .25);
  transform: translateY(-1px);
}
.lg-btn:hover::before { transform: translateX(120%); }
.lg-btn:active { transform: translateY(0); }
.lg-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.lg-btn .fa { font-size: 13px; }

.lg-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 480px) {
  .lg-stack { max-width: 100%; gap: 18px; }
  .lg-logo-loose { height: 88px; }
  .lg-card { padding: 26px 22px 22px; border-radius: 18px; }
}