/* ============================================================
   ICEL Connect — Acceso (Lanzador)  ·  estilos de integración
   + Animaciones corporativas (moléculas / átomos) en panel azul
   ============================================================ */
:root{
  --navy:#0A2240; --ink:#0F1B2D; --muted:#65718A; --muted2:#94A0B5;
  --card:#FFFFFF; --line:#E2E7F0; --line2:#EDF0F6;
  --reca:#2563EB; --doc:#12A98F; --e360:#834DDB; --icel:#1577C7; --icel-d:#0E5DA0;
  --bi:#12A6C9; --siad:#E0902B;
  --accent:var(--icel);
  --font:'Figtree',system-ui,-apple-system,sans-serif;
  --display:'Sora',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ font-family:var(--font); color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }

/* layout */
.login-split{ min-height:100vh; display:grid; grid-template-columns:1.02fr .98fr; }

/* ============================================================
   PANEL DE MARCA (lado azul)
   ============================================================ */
.brand-panel{ position:relative; overflow:hidden; color:#fff; display:flex; flex-direction:column; padding:44px 48px;
  background:
    radial-gradient(120% 90% at 18% 8%, #15457F 0%, rgba(21,69,127,0) 55%),
    radial-gradient(90% 80% at 92% 96%, #123A6E 0%, rgba(18,58,110,0) 50%),
    linear-gradient(150deg, #0C2C55 0%, #0A2240 52%, #081B34 100%); }

/* retícula de puntos con leve deriva */
.bp-grid{ position:absolute; inset:-40px; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.1px, transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 110% at 30% 30%, #000 35%, transparent 78%);
  mask-image:radial-gradient(120% 110% at 30% 30%, #000 35%, transparent 78%);
  animation:gridDrift 28s linear infinite; }
@keyframes gridDrift{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(26px,26px,0);} }

/* glows que respiran y derivan */
.bp-glow{ position:absolute; border-radius:50%; filter:blur(60px); will-change:transform,opacity; }
.bp-glow.a{ width:340px; height:340px; left:-90px; top:30px; background:rgba(37,99,235,.32); animation:glowA 16s ease-in-out infinite; }
.bp-glow.b{ width:300px; height:300px; right:-70px; bottom:40px; background:rgba(131,77,219,.26); animation:glowB 20s ease-in-out infinite; }
.bp-glow.c{ width:220px; height:220px; right:120px; top:-40px; background:rgba(18,169,143,.22); animation:glowC 18s ease-in-out infinite; }
@keyframes glowA{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.9; } 50%{ transform:translate(34px,26px) scale(1.12); opacity:1; } }
@keyframes glowB{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.85; } 50%{ transform:translate(-30px,-22px) scale(1.1); opacity:1; } }
@keyframes glowC{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.7; } 50%{ transform:translate(-24px,30px) scale(1.18); opacity:.95; } }

/* ---------- capa de MOLÉCULAS / ÁTOMOS animados ---------- */
.bp-mol{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.mol{ position:absolute; color:#7FC0F5; opacity:.5; will-change:transform; }
.mol .ring{ transform-origin:50% 50%; }
.mol .e{ transform-origin:50% 50%; }
.mol.m1{ width:150px; height:150px; left:6%;  top:14%;  color:#6EB7F2; opacity:.55; animation:floatY 17s ease-in-out infinite; }
.mol.m2{ width:104px; height:104px; left:62%; top:8%;   color:#9C7CF0; opacity:.42; animation:floatX 21s ease-in-out infinite; }
.mol.m3{ width:128px; height:128px; left:70%; top:58%;  color:#54CFB6; opacity:.40; animation:floatY 24s ease-in-out infinite reverse; }
.mol.m4{ width:78px;  height:78px;  left:30%; top:70%;  color:#6EB7F2; opacity:.38; animation:floatX 19s ease-in-out infinite reverse; }
.mol.m1 .ring{ animation:spin 34s linear infinite; }
.mol.m2 .ring{ animation:spin 28s linear infinite reverse; }
.mol.m3 .ring{ animation:spin 40s linear infinite; }
.mol.m4 .ring{ animation:spin 24s linear infinite reverse; }
.mol .e1{ animation:spin 9s linear infinite; }
.mol .e2{ animation:spin 13s linear infinite reverse; }
.mol .e3{ animation:spin 11s linear infinite; }

/* red de nodos (líneas + vértices) que se dibuja sola */
.bp-net{ position:absolute; inset:0; z-index:1; pointer-events:none; color:#5FB4F2; opacity:.5; }
.bp-net .edge{ stroke:currentColor; stroke-width:1; stroke-dasharray:5 5; opacity:.5; animation:dash 6s linear infinite; }
.bp-net .node{ fill:currentColor; }
.bp-net .node.pulse{ animation:nodePulse 4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes dash{ to{ stroke-dashoffset:-20; } }
@keyframes nodePulse{ 0%,100%{ opacity:.45; transform:scale(1);} 50%{ opacity:1; transform:scale(1.7);} }

/* partículas flotantes */
.particle{ position:absolute; z-index:1; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 8px rgba(127,192,245,.8); animation:rise linear infinite; }
@keyframes rise{
  0%{ transform:translateY(20px) scale(.6); opacity:0; }
  15%{ opacity:.7; }
  85%{ opacity:.6; }
  100%{ transform:translateY(-140px) scale(1); opacity:0; }
}

@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-26px);} }
@keyframes floatX{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(22px,-14px);} }

/* contenido por encima de las animaciones */
.bp-top{ position:relative; z-index:3; }
.bp-mid{ position:relative; z-index:3; margin:auto 0; }
.bp-kicker{ font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.bp-title{ font-family:var(--display); font-weight:700; font-size:38px; line-height:1.08; letter-spacing:-.02em; margin:14px 0 0; max-width:13ch; }
.bp-title b{ font-weight:800; background:linear-gradient(90deg,#5FB4F2,#9C7CF0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bp-sub{ margin-top:16px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.66); max-width:34ch; }
.bp-sys{ position:relative; z-index:3; margin-top:36px; display:flex; flex-direction:column; gap:12px; }
.bp-sys-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(4px);
  opacity:0; transform:translateY(14px); animation:rowIn .6s cubic-bezier(.2,.7,.2,1) forwards; }
.bp-sys-row:nth-child(1){ animation-delay:.15s; }
.bp-sys-row:nth-child(2){ animation-delay:.28s; }
.bp-sys-row:nth-child(3){ animation-delay:.41s; }
.bp-sys-row:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); transition:.18s; }
@keyframes rowIn{ to{ opacity:1; transform:none; } }
.bp-sys-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:0 0 42px; background:rgba(255,255,255,.07); }
.bp-sys-tx b{ display:block; font-family:var(--display); font-weight:600; font-size:15px; }
.bp-sys-tx span{ font-size:12.5px; color:rgba(255,255,255,.55); }
.bp-more{ display:flex; align-items:center; gap:11px; padding:6px 14px; font-size:12.5px; color:rgba(255,255,255,.5);
  opacity:0; transform:translateY(14px); animation:rowIn .6s cubic-bezier(.2,.7,.2,1) .54s forwards; }
.bp-more-ico{ width:42px; display:flex; justify-content:center; }
.bp-foot{ position:relative; z-index:3; margin-top:34px; font-size:12px; color:rgba(255,255,255,.4); }

/* ============================================================
   PANEL DE FORMULARIO
   ============================================================ */
.form-panel{ display:flex; align-items:center; justify-content:center; padding:48px 40px; background:var(--card); position:relative; }
.form-wrap{ width:100%; max-width:392px; }
.fp-head{ font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-.02em; color:var(--navy); margin:0; }
.fp-sub{ margin:9px 0 30px; font-size:14.5px; color:var(--muted); line-height:1.5; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.inp-wrap{ position:relative; }
.inp{ width:100%; height:48px; border:1.5px solid var(--line); border-radius:11px; padding:0 15px; font-family:var(--font); font-size:15px; color:var(--ink); background:#FBFCFE; transition:.15s; }
.inp::placeholder{ color:#A9B3C5; }
.inp:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.inp.has-eye{ padding-right:46px; }
.inp-err{ border-color:#E05656; background:#FEF6F6; }
.inp-err:focus{ box-shadow:0 0 0 4px rgba(224,86,86,.15); border-color:#E05656; }
.eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent; color:var(--muted2); cursor:pointer; border-radius:8px; display:grid; place-items:center; }
.eye:hover{ color:var(--muted); background:#F1F4F9; }
.eye .eye-off{ display:none; }
.eye.on .eye-open{ display:none; }
.eye.on .eye-off{ display:block; }
.inline-err{ display:flex; align-items:center; gap:6px; color:#D33B3B; font-size:12.5px; font-weight:600; margin-top:8px; }

.btn{ width:100%; height:50px; border:0; border-radius:12px; font-family:var(--font); font-weight:700; font-size:15.5px; color:#fff; cursor:pointer; transition:.18s; display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent)); box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ background:#C7CFDD; box-shadow:none; cursor:not-allowed; transform:none; filter:none; }
.btn.loading{ pointer-events:none; opacity:.85; }

.fp-foot{ margin-top:22px; text-align:center; font-size:13.5px; color:var(--muted); }
.fp-foot a{ color:var(--accent); font-weight:600; text-decoration:none; }
.fp-foot a:hover{ text-decoration:underline; }

/* lanzador */
.back-link{ background:none; border:0; color:var(--muted); font-family:var(--font); font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0; margin-bottom:20px; }
.back-link:hover{ color:var(--navy); }
.user-chip{ display:inline-flex; align-items:center; gap:9px; background:#F1F4F9; border-radius:999px; padding:5px 13px 5px 5px; margin-bottom:22px; }
.user-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--icel),var(--reca)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; font-family:var(--display); }
.user-chip b{ font-size:13.5px; white-space:nowrap; }
.firsttime-pill{ display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--icel) 10%, #fff); color:var(--icel-d); font-weight:700; font-size:12px; border-radius:999px; padding:6px 13px 6px 12px; margin-bottom:16px; }
.ft-dot{ width:7px; height:7px; border-radius:50%; background:var(--icel); box-shadow:0 0 0 3px color-mix(in srgb,var(--icel) 22%, transparent); }

.launch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.launch-grid.single{ grid-template-columns:1fr; }
.launch{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 10px 14px; border:1.5px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; font-family:var(--font); position:relative; animation:launchIn .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes launchIn{ from{ transform:translateY(13px) scale(.95);} to{ transform:none;} }
.launch:hover{ border-color:var(--c); transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,27,45,.1); }
.launch-ico{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 12%, #fff); transition:.16s; }
.launch:hover .launch-ico{ transform:scale(1.05); }
.launch b{ font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--ink); text-align:center; line-height:1.2; }
.launch-go{ height:15px; display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:11px; color:var(--c); opacity:0; transition:.16s; }
.launch:hover .launch-go{ opacity:1; }
.launch.welcome .launch-ico{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--icel) 28%, transparent); }
.launch-grid.single .launch{ flex-direction:row; justify-content:flex-start; gap:16px; padding:20px; }
.launch-grid.single .launch b{ font-size:16.5px; }
.launch-grid.single .launch .launch-go{ margin-left:auto; height:auto; }
.note{ font-size:12.5px; color:var(--muted2); margin:16px 2px 0; line-height:1.5; }
.note a{ color:var(--icel); font-weight:600; text-decoration:none; }

/* overlay entrando */
.enter-ov{ position:absolute; inset:0; z-index:50; background:rgba(255,255,255,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }
.enter-ring{ width:78px; height:78px; border-radius:21px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 12%, #fff); position:relative; }
.enter-ring::after{ content:''; position:absolute; inset:-7px; border-radius:25px; border:3px solid color-mix(in srgb, var(--c) 22%, transparent); border-top-color:var(--c); animation:spin .8s linear infinite; }
.enter-ov b{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--navy); }
.enter-ov span{ font-size:13.5px; color:var(--muted); margin-top:-12px; }
.hidden{ display:none !important; }

/* wordmark */
.wm{ display:inline-flex; align-items:center; gap:11px; }
.wm-word{ font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1; }
.wm-light{ font-weight:600; margin-left:7px; letter-spacing:.02em; }
.greet{ animation:greetIn .42s cubic-bezier(.2,.7,.2,1); }
@keyframes greetIn{ from{ transform:translateY(10px);} to{ transform:translateY(0);} }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:980px){
  .brand-panel{ padding:38px 38px; }
  .bp-title{ font-size:32px; }
}
@media (max-width:880px){
  .login-split{ grid-template-columns:1fr; }
  /* el lado azul pasa a ser una cabecera compacta arriba del formulario */
  .brand-panel{ min-height:auto; padding:30px 26px 28px; }
  .bp-mid .bp-sys, .bp-foot{ display:none; }
  .bp-title{ font-size:26px; margin-top:10px; }
  .bp-sub{ font-size:14px; margin-top:10px; }
  .mol.m3, .mol.m4{ display:none; }
  .form-panel{ padding:34px 24px 48px; }
}
@media (max-width:560px){
  .launch-grid{ grid-template-columns:1fr 1fr; }
  .bp-title{ font-size:23px; }
  .brand-panel{ padding:26px 22px 24px; }
}

/* accesibilidad: respeta a quien reduce movimiento */
@media (prefers-reduced-motion: reduce){
  .bp-grid, .bp-glow, .mol, .mol *, .bp-net .edge, .bp-net .node, .particle,
  .bp-sys-row, .bp-more, .launch, .greet{ animation:none !important; }
  .bp-sys-row, .bp-more{ opacity:1; transform:none; }
}