/* =====================================================================
   LOGIN v2 — panel claro teal con teléfono, tarjetas y elementos flotantes.
   Solo diseño: no cambia formulario, rutas ni lógica.
   ===================================================================== */

/* ---------------- panel izquierdo ---------------- */
.stage .brand-panel{
  container-type:inline-size;
  isolation:isolate;
  padding:clamp(18px,3vh,40px) clamp(24px,3.4vw,56px) clamp(14px,2.4vh,30px);
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(171,213,219,.75), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(129,192,201,.45), transparent 60%),
    linear-gradient(135deg, #F4FBFC 0%, #DDF1F3 42%, #BFE3E8 100%);
  gap:0;
}
.stage .brand-panel::after{ display:none; }

.lp-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.lp-waves{ position:absolute; left:0; bottom:0; width:100%; height:58%; }
.lp-blob{ position:absolute; border-radius:50%; }
.lp-blob.b1{ width:62%; aspect-ratio:1; right:-20%; top:-26%; background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.7), rgba(171,213,219,.35) 60%, transparent 72%); }
.lp-blob.b2{ width:34%; aspect-ratio:1; left:-10%; bottom:18%; background:radial-gradient(circle, rgba(244,166,196,.22), transparent 68%); }
.lp-leaves{ position:absolute; left:0; bottom:0; width:clamp(70px,9.5cqw,130px); height:auto; }
.stage #network{ z-index:1; opacity:.9; }

.lp-top{ position:relative; z-index:2; flex:none; }
.lp-logo{ display:block; height:clamp(84px,13.5vh,148px); width:auto; object-fit:contain; }

.lp-main{ position:relative; z-index:2; flex:1; min-height:0; margin-top:1vh; }

/* ---------------- texto ---------------- */
.lp-copy{ position:absolute; left:0; top:0; bottom:0; width:44%; padding-bottom:7vh; display:flex; flex-direction:column; justify-content:center; }
.stage .brand-panel .eyebrow{ color:#2D96A5; font-size:clamp(.6rem,.95cqw,.78rem); letter-spacing:.2em; margin-bottom:clamp(8px,1.6vh,16px); animation:none; }
.stage .brand-panel .slogan{ color:#0B3B46; font-size:clamp(1.9rem,4.5cqw,3.6rem); line-height:1.04; font-weight:800; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.stage .brand-panel .subcopy{ color:#3F6B74; font-size:clamp(.8rem,1.45cqw,1.05rem); line-height:1.55; max-width:38ch; margin:clamp(10px,2vh,20px) 0 0; display:block; animation:none; }

.lp-features{ list-style:none; margin:clamp(14px,3.2vh,34px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1.2cqw,16px); text-align:center; }
.lp-features li{ display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1vh,10px); font-size:clamp(.58rem,1.05cqw,.8rem); line-height:1.25; color:#0B3B46; font-weight:500; }
.lp-features .fi{ width:clamp(38px,5.4cqw,62px); aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -10px rgba(0,96,110,.5), inset 0 0 0 2px rgba(255,255,255,.6); }
.lp-features .fi svg{ width:46%; height:46%; }
.fi.f1{ background:#BDEBEC; color:#0B8A9A; }
.fi.f2{ background:#FADCE8; color:#D9467F; }
.fi.f3{ background:#E3E1FA; color:#4A4AA8; }
.fi.f4{ background:#E2E6FA; color:#4F5BC8; }

/* ---------------- visual (teléfono + tarjetas) ---------------- */
.lp-visual{
  --u:clamp(8px, min(1.4cqw, 1.8vh), 17px);
  font-size:var(--u);
  position:absolute; right:.5%; top:50%; transform:translateY(-50%);
  width:36em; height:44em;
}
.lp-phone{
  position:absolute; left:8em; top:1.5em; width:20.5em; height:40em; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#fff,#F4FBFC); border:.9em solid #2D96A5; border-radius:3.2em; rotate:3.5deg;
  box-shadow:0 3em 5em -2em rgba(0,60,70,.55), inset 0 0 0 .15em rgba(255,255,255,.4), 0 0 0 .15em #1B7F8D;
}
.ph-status{ display:flex; justify-content:space-between; align-items:center; padding:1em 1.5em .3em; font-size:.8em; font-weight:700; color:#0B3B46; }
.ph-sig{ display:inline-flex; align-items:flex-end; gap:.15em; }
.ph-sig i{ width:.3em; background:#0B3B46; border-radius:1px; } .ph-sig i:nth-child(1){ height:.4em; } .ph-sig i:nth-child(2){ height:.65em; } .ph-sig i:nth-child(3){ height:.9em; } .ph-sig i:nth-child(4){ height:1.15em; }
.ph-head{ display:flex; align-items:center; gap:.75em; padding:.7em 1.1em; border-bottom:1px solid rgba(0,128,148,.12); }
.ph-back{ width:1.4em; height:1.4em; color:#0B8A9A; flex:none; }
.ph-av{ width:2.8em; height:2.8em; border-radius:50%; flex:none; }
.ph-who{ display:flex; flex-direction:column; line-height:1.2; }
.ph-who b{ font-size:1em; color:#0B3B46; } .ph-who small{ font-size:.78em; color:#0B8A9A; }
.ph-call{ width:1.3em; height:1.3em; margin-left:auto; color:#0B8A9A; flex:none; }
.ph-chat{ flex:1; padding:1.1em 1em; display:flex; flex-direction:column; gap:1em; background:linear-gradient(180deg,#F3F8F9,#EAF4F6); }
.ph-chat .msg{ font-size:.86em; line-height:1.4; padding:.8em 1em .6em; border-radius:1.1em; max-width:86%; color:#0B3B46; box-shadow:0 .4em 1em -.5em rgba(0,60,70,.35); }
.ph-chat .msg time{ display:block; text-align:right; font-size:.78em; color:#7A9AA1; margin-top:.3em; }
.ph-chat .msg.in{ background:#fff; border-top-left-radius:.3em; align-self:flex-start; }
.ph-chat .msg.out{ background:#CFF2E8; border-top-right-radius:.3em; align-self:flex-end; }
.ph-input{ display:flex; align-items:center; gap:.6em; margin:.8em; padding:.5em .5em .5em .9em; border-radius:2em; background:#fff; box-shadow:0 .5em 1.2em -.6em rgba(0,60,70,.4); }
.ph-emoji{ color:#7A9AA1; font-size:1.2em; }
.ph-ph{ flex:1; font-size:.8em; color:#9AB3B8; }
.ph-send{ width:2.5em; height:2.5em; border-radius:50%; background:linear-gradient(135deg,#0B9AAE,#0B6F82); display:flex; align-items:center; justify-content:center; flex:none; }
.ph-send svg{ width:1.1em; height:1.1em; }

.lp-stat{
  position:absolute; left:0; top:23em; width:14.6em; padding:1.1em 1.2em 1em; background:#fff; border-radius:1.5em;
  box-shadow:0 2em 3.5em -1.6em rgba(0,60,70,.5), 0 0 0 1px rgba(0,128,148,.1); font-size:.92em; z-index:3;
}
.st-head{ display:flex; align-items:center; gap:.6em; font-size:.88em; color:#3F6B74; margin-bottom:.6em; font-weight:600; }
.st-ic{ width:1.9em; height:1.9em; border-radius:50%; background:linear-gradient(135deg,#0B9AAE,#0B6F82); display:flex; align-items:center; justify-content:center; }
.st-ic svg{ width:.95em; height:.95em; }
.st-row{ display:flex; justify-content:space-between; padding:.5em 0; font-size:.86em; color:#3F6B74; border-top:1px solid rgba(0,128,148,.1); }
.st-row b{ color:#0B7C8C; font-weight:800; }
.st-spark{ display:block; width:100%; height:2.3em; margin-top:.4em; }

.lp-avatar{ position:absolute; width:5.6em; height:5.6em; border-radius:50%; background:#fff; border:.3em solid #fff; box-shadow:0 1.2em 2em -.8em rgba(0,60,70,.55); z-index:3; }
.lp-avatar svg{ width:100%; height:100%; border-radius:50%; display:block; }
.lp-avatar.a1{ left:1.2em; top:3.4em; }
.lp-avatar.a1 .dot{ position:absolute; right:.1em; bottom:.2em; width:1.3em; height:1.3em; border-radius:50%; background:#1DC48B; border:.25em solid #fff; }
.lp-avatar.a2{ right:-.4em; top:28em; }

.lp-notif{ position:absolute; right:-1.4em; top:12.5em; display:flex; align-items:center; gap:.7em; padding:.9em 1.2em; background:#fff; border-radius:1.5em; box-shadow:0 1.6em 2.8em -1.2em rgba(0,60,70,.5); z-index:4; }
.n-ic{ width:2.3em; height:2.3em; border-radius:50%; background:linear-gradient(135deg,#0B9AAE,#0B6F82); display:flex; align-items:center; justify-content:center; }
.n-ic svg{ width:1.2em; height:1.2em; }
.n-tx{ font-weight:700; font-size:.95em; line-height:1.15; color:#0B3B46; max-width:5.5em; }
.n-badge{ position:absolute; top:-.7em; right:-.3em; min-width:1.8em; height:1.8em; border-radius:50%; background:#E5252E; color:#fff; font-size:.8em; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 .3em #fff; animation:lpPing 2.4s ease-in-out infinite; }

.lp-typing{ position:absolute; right:2.4em; top:22.5em; display:flex; align-items:center; gap:.35em; padding:.9em 1.2em; background:#fff; border-radius:1.4em; border-bottom-right-radius:.3em; box-shadow:0 1em 2em -.9em rgba(0,60,70,.45); z-index:4; }
.lp-typing i{ width:.55em; height:.55em; border-radius:50%; background:#0B8A9A; animation:lpDot 1.2s ease-in-out infinite; }
.lp-typing i:nth-child(2){ animation-delay:.18s; } .lp-typing i:nth-child(3){ animation-delay:.36s; }

.lp-plane{ position:absolute; right:-.5em; top:-.6em; width:8.5em; height:auto; z-index:4; filter:drop-shadow(0 .6em .8em rgba(0,100,110,.3)); }
.lp-spark{ position:absolute; left:5.5em; top:19em; width:2em; height:2em; background:#F47AA8; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); z-index:4; }
.lp-heart{ position:absolute; left:9.2em; top:16.5em; width:3.6em; height:3.6em; border-radius:50%; background:#FDE1EB; display:flex; align-items:center; justify-content:center; box-shadow:0 .8em 1.4em -.7em rgba(240,120,160,.6); z-index:4; }
.lp-heart svg{ width:1.7em; height:1.7em; }
.lp-dash{ position:absolute; height:.32em; border-radius:.2em; background:#2D96A5; opacity:.8; z-index:4; }
.lp-dash.d1{ right:.6em; top:7.2em; width:2.6em; rotate:-38deg; } .lp-dash.d2{ right:-.2em; top:9.2em; width:2.2em; rotate:-18deg; } .lp-dash.d3{ right:2.6em; top:5.2em; width:1.8em; rotate:-58deg; }

/* flotación suave */
.fl-a{ animation:flA 6.5s ease-in-out infinite; } .fl-b{ animation:flB 7.5s ease-in-out infinite; } .fl-c{ animation:flC 8.5s ease-in-out infinite; }
.tw{ animation:twinkle 3.2s ease-in-out infinite; }
@keyframes flA{ 0%,100%{ translate:0 0; } 50%{ translate:.3em -.9em; } }
@keyframes flB{ 0%,100%{ translate:0 0; } 50%{ translate:-.4em -.7em; } }
@keyframes flC{ 0%,100%{ translate:0 0; } 50%{ translate:.2em .8em; } }
@keyframes twinkle{ 0%,100%{ scale:1; opacity:1; } 50%{ scale:.6; opacity:.55; } }
@keyframes lpDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-.4em); opacity:1; } }
@keyframes lpPing{ 0%,100%{ scale:1; } 50%{ scale:1.15; } }

@media (prefers-reduced-motion:reduce){
  .fl-a, .fl-b, .fl-c, .tw, .lp-typing i, .n-badge{ animation:none !important; }
}

/* ---------------- panel derecho ---------------- */
.stage .auth-panel{
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(171,213,219,.5), transparent 60%),
    radial-gradient(50% 45% at 0% 100%, rgba(244,166,196,.18), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #EDF7F9 100%);
}
.stage .card{
  max-width:420px; border-radius:30px; border:1px solid rgba(0,128,148,.14);
  box-shadow:0 50px 100px -30px rgba(0,80,95,.62), 0 18px 36px -14px rgba(0,96,110,.34), 0 0 0 1px rgba(0,128,148,.16);
  background:#fff;
}
.stage .card .welcome-title{ margin:clamp(6px,1.2vh,14px) 0 0; text-align:center; font-size:clamp(1.5rem,3.4vh,2.05rem); font-weight:800; letter-spacing:-.02em; color:#0B3B46; }
.stage .card .welcome-text{ margin:4px 0 0; text-align:center; font-size:.86rem; color:#5E8A92; }
.stage .card .subtitle{ text-align:center; font-size:.6rem; letter-spacing:.16em; color:#9AB3B8; margin:clamp(4px,.8vh,10px) 0 0; }
@media (max-height:780px){ .stage .card .subtitle{ display:none; } }

.stage .field-input input{ border-radius:14px; background:#F3F9FA; border:1.5px solid rgba(0,128,148,.18); transition:border-color .18s, box-shadow .18s, background .18s; }
.stage .field-input input:hover{ border-color:rgba(0,128,148,.45); background:#fff; }
.stage .field-input input:focus{ outline:none; border-color:#008094; background:#fff; box-shadow:0 0 0 4px rgba(0,128,148,.14); }
.stage .btn-primary{
  border-radius:14px; background:linear-gradient(135deg,#00B2CB 0%,#008094 60%,#006377 100%); font-weight:700; letter-spacing:.01em;
  box-shadow:0 16px 30px -14px rgba(0,128,148,.85); transition:transform .18s, box-shadow .18s, filter .18s;
}
.stage .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 22px 38px -14px rgba(0,128,148,.9); }
.stage .btn-primary:active{ transform:translateY(0); }

/* ---------------- responsive ---------------- */
@media (max-width:940px){
  .lp-visual, .lp-features{ display:none; }
  .lp-copy{ position:static; width:100%; }
  .lp-main{ flex:none; margin-top:12px; }
  .stage .brand-panel{ min-height:0; }
  .stage .brand-panel .slogan{ font-size:clamp(1.6rem,6vw,2.3rem); }
  .stage .brand-panel .subcopy{ display:none; }
}

/* =====================================================================
   CELULAR / TABLETA — el formulario va primero, sin scroll de más
   ===================================================================== */
/* 901–940px: la regla "sin scroll en escritorio" de auth-login.css recortaba el contenido en columna */
@media (max-width:940px){
  html, body{ height:auto !important; overflow:visible !important; overflow-x:hidden !important; }
  .stage{ height:auto !important; min-height:100vh; min-height:100dvh; }
}

@media (max-width:768px){
  /* el panel de marca (logo + eslogan) empujaba el formulario fuera de la pantalla; el logo ya está en la tarjeta */
  .stage .brand-panel{ display:none; }
  .stage{ background:linear-gradient(160deg,#F4FBFC 0%,#DDF1F3 55%,#BFE3E8 100%); }
  .stage .auth-panel{
    flex:1 1 auto; width:100%; min-height:100vh; min-height:100dvh;
    padding:60px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .stage .card{ max-width:440px; padding:24px 20px 20px; border-radius:24px; box-shadow:0 30px 60px -30px rgba(0,80,95,.55), 0 0 0 1px rgba(0,128,148,.14); }
  .stage .card .card-logo-img{ height:clamp(84px,14vh,120px) !important; max-width:min(260px,72%) !important; }
  .stage .card .subtitle{ display:block; font-size:.56rem; }

  /* campos cómodos al tacto y a 16px (iOS no hace zoom al enfocar) */
  .stage .field-input input{ font-size:16px; min-height:48px; }
  .stage .btn-primary, .stage .btn-sso{ min-height:48px; font-size:1rem; }
  .row-between{ flex-wrap:wrap; gap:10px 14px; }
  .remember, .forgot{ min-height:36px; display:inline-flex; align-items:center; }
  .stage .lang-toggle{ top:14px; right:14px; }
  .legal-footer{ text-align:center; flex-wrap:wrap; justify-content:center; }
}

@media (max-width:380px){
  .stage .auth-panel{ padding-left:12px; padding-right:12px; }
  .stage .card{ padding:20px 16px 16px; border-radius:20px; }
  .stage .card .welcome-title{ font-size:1.45rem; }
}

/* celular acostado: poca altura, el contenido hace scroll en vez de cortarse */
@media (max-width:940px) and (max-height:500px){
  .stage .auth-panel{ align-items:flex-start; padding-top:56px; }
  .stage .card .card-logo-img{ height:64px !important; }
  .stage .card .welcome-text{ display:none; }
}

/* 2FA y demás pantallas con tarjeta: campos a 16px también */
@media (max-width:768px){
  .twofa-wrap input, .card input:not([type="checkbox"]):not([type="radio"]){ font-size:16px; }
}