/* ============================================================
   LOGIN REDESIGN 2026 — split-login on-brand (reemplaza el video
   off-theme + acentos violeta/rosa por slate + amber + teal).
   Se carga DESPUÉS de landing.css (mayor prioridad por orden).
   Scopeado a #loginContainer. Preserva todo el form (login +
   registro easy/advanced + planes). Reversible.
   ============================================================ */
#loginContainer{
  --lr-bg:#15181E; --lr-bg2:#1A1E26; --lr-card:#171b22;
  --lr-amber:#F2A33C; --lr-amber-hot:#FFB85A; --lr-amber-deep:#D98428;
  --lr-teal:#2dd4bf; --lr-white:#ECEFF4; --lr-dim:rgba(236,239,244,.66);
  --lr-dimmer:rgba(236,239,244,.42); --lr-line:rgba(236,239,244,.12);
  --lr-display:"Archivo Black", system-ui, sans-serif;
  --lr-cond:"Barlow Condensed", system-ui, sans-serif;
  --lr-mono:"Space Mono", ui-monospace, monospace;
  --lr-ez:cubic-bezier(.22,.61,.36,1);

  /* full-screen split (antes: panel fijo 50% derecha) */
  width:100vw !important; left:0 !important; right:0 !important; top:0 !important; bottom:auto !important;
  height:100vh !important;
  display:flex !important; align-items:flex-start; justify-content:flex-start;
  padding:0 !important;
  background:var(--lr-bg) !important;
  box-shadow:none !important;
  overflow-y:auto; overflow-x:hidden;
}
/* CRÍTICO: respetar el ocultado post-login. Mi `display:flex !important` de arriba
   le ganaba a `#loginContainer.hidden{display:none}` (sin !important) → el login
   quedaba tapando el dashboard al loguear. Esta regla (más específica + !important) manda. */
#loginContainer.hidden{display:none !important}

/* matar el video y los glows off-theme del contenedor */
#loginContainer .login-bg-video{display:none !important}
#loginContainer::before, #loginContainer::after{display:none !important}

/* ============ PANEL DE MARCA (izquierda) ============ */
#loginContainer .login-aside{
  flex:0 0 56%; position:sticky; top:0; height:100vh; overflow:hidden;
  background:linear-gradient(160deg, var(--lr-bg2), #12151b 70%);
  border-right:1px solid var(--lr-line);
  display:flex; align-items:center; isolation:isolate;
}
/* blooms de aurora (amber + teal) que derivan suave */
#loginContainer .la-aurora{position:absolute;inset:-10%;z-index:0;pointer-events:none}
#loginContainer .la-b{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
#loginContainer .la-b1{width:48%;height:48%;left:-6%;top:-4%;
  background:radial-gradient(circle, rgba(242,163,60,.65), transparent 62%);animation:laDrift1 17s var(--lr-ez) infinite alternate}
#loginContainer .la-b2{width:52%;height:52%;right:-10%;bottom:-12%;
  background:radial-gradient(circle, rgba(45,212,191,.50), transparent 62%);animation:laDrift2 21s var(--lr-ez) infinite alternate}
#loginContainer .la-b3{width:40%;height:40%;left:34%;top:42%;
  background:radial-gradient(circle, rgba(255,184,90,.40), transparent 60%);animation:laDrift3 25s var(--lr-ez) infinite alternate}
@keyframes laDrift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8%,10%,0) scale(1.18)}}
@keyframes laDrift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-9%,-7%,0) scale(1.25)}}
@keyframes laDrift3{from{transform:translate3d(0,0,0) scale(.9);opacity:.25}to{transform:translate3d(6%,-9%,0) scale(1.15);opacity:.45}}
/* grilla de puntos sutil + grano editorial */
#loginContainer .la-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(236,239,244,.10) 1px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 120% at 30% 35%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 120% at 30% 35%, #000 35%, transparent 78%);}
#loginContainer .la-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* contenido de marca */
#loginContainer .la-content{position:relative;z-index:2;padding:clamp(40px,6vw,88px);max-width:620px}
#loginContainer .la-brand{font-family:var(--lr-display);font-size:clamp(22px,2vw,28px);letter-spacing:.02em;color:var(--lr-white);text-transform:uppercase}
#loginContainer .la-brand b{color:var(--lr-amber);font-weight:inherit;margin:0 1px}
#loginContainer .la-head{font-family:var(--lr-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.03em;
  font-size:clamp(36px,4.6vw,68px);color:var(--lr-white);margin:26px 0 0}
#loginContainer .la-head span{color:var(--lr-amber);text-shadow:0 0 34px rgba(242,163,60,.45)}
#loginContainer .la-sub{font-family:var(--lr-cond);font-size:clamp(15px,1.4vw,19px);color:var(--lr-dim);max-width:46ch;margin:18px 0 0;line-height:1.5}
#loginContainer .la-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0}
#loginContainer .la-chips li{font-family:var(--lr-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lr-white);padding:8px 14px;border-radius:999px;
  background:rgba(236,239,244,.05);border:1px solid var(--lr-line)}
#loginContainer .la-chips li:first-child{color:#11141A;background:linear-gradient(180deg,var(--lr-amber-hot),var(--lr-amber));border-color:transparent;font-weight:700}
#loginContainer .la-foot{position:absolute;left:clamp(40px,6vw,88px);bottom:clamp(28px,4vw,48px);z-index:2;
  font-family:var(--lr-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lr-dimmer)}

/* ============ CARD (derecha) on-brand ============ */
#loginContainer .card{
  width:420px;max-width:calc(44vw - 64px);margin:auto;
  background:linear-gradient(160deg, rgba(26,30,38,.96), rgba(19,22,28,.98)) !important;
  border:1px solid var(--lr-line) !important;border-radius:22px !important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#loginContainer .card::before{
  background:linear-gradient(135deg, rgba(242,163,60,.22), rgba(45,212,191,.16) 60%, transparent) !important;
  opacity:.5 !important;animation:none !important;border-radius:22px !important;
}
/* hover de la card: sobrio, SIN borde/glow amber (feedback Leo: no "prender" amarillo). */
#loginContainer .card:not(.register-mode):hover{
  transform:translateY(-2px);border-color:var(--lr-line) !important;
  box-shadow:0 36px 90px -30px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* títulos del card on-brand */
#loginContainer .title h1{font-family:var(--lr-cond);font-weight:700;letter-spacing:.01em;color:var(--lr-white)}
#loginContainer .title span{font-family:var(--lr-cond);color:var(--lr-dim)}
#loginContainer .field > span{font-family:var(--lr-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lr-dimmer)}

/* inputs: foco amber en glow (box), no subrayado */
#loginContainer .input:focus-within{border-color:rgba(242,163,60,.55) !important;box-shadow:0 0 0 3px rgba(242,163,60,.14) !important}
#loginContainer .input input:focus{border-bottom-color:transparent !important;box-shadow:none !important}
#loginContainer .input .toggle:hover{color:var(--lr-amber)}

/* botón primario: amber sólido de marca (antes gris+violeta) */
#loginContainer .primary{
  background:linear-gradient(180deg,var(--lr-amber-hot),var(--lr-amber)) !important;
  color:#11141A !important;font-weight:700 !important;border:0 !important;
  box-shadow:0 14px 30px -12px rgba(242,163,60,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
#loginContainer .primary::before{background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important}
#loginContainer .primary:hover{
  background:linear-gradient(180deg,#FFC576,var(--lr-amber-hot)) !important;
  border-color:transparent !important;transform:translateY(-2px);
  box-shadow:0 20px 40px -12px rgba(242,163,60,.7), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* links / acciones en amber */
#loginContainer .actions .link, #loginContainer .link{color:var(--lr-amber) !important}
#loginContainer .reg-mode-tab.active{border-color:color-mix(in oklab,var(--lr-amber) 50%,transparent) !important;color:var(--lr-white) !important}

/* ============ responsive: stack en mobile/tablet ============ */
@media (max-width:1000px){
  #loginContainer .login-aside{display:none}
  #loginContainer{
    background:
      radial-gradient(900px 600px at 80% -10%, rgba(242,163,60,.16), transparent 60%),
      radial-gradient(800px 600px at 0% 110%, rgba(45,212,191,.12), transparent 60%),
      var(--lr-bg) !important;
    justify-content:center;
  }
  #loginContainer .card{max-width:min(440px,calc(100vw - 36px))}
}

/* mientras el login está abierto, ocultar el widget Nina para no ensuciar el área */
body:has(#loginContainer:not(.hidden)) #nina-root{display:none !important}

/* ============ motion off ============ */
@media (prefers-reduced-motion:reduce){
  #loginContainer .la-b{animation:none !important}
  #loginContainer .pbx-cta{transition:none !important}
}

/* ============================================================
   Segment Switch — Iniciar sesión | Portal Central (co-iguales)
   + Portal Issabel como PRODUCTO. Scopeado a #loginContainer.
   Reemplaza el acordeón "de resaca". Concepto ganador c2.
   ============================================================ */
/* --- control segmentado con thumb deslizante --- */
#loginContainer .lr-seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  padding:4px;margin:2px 0 15px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid var(--lr-line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
#loginContainer .lr-seg-thumb{
  position:absolute;top:4px;left:4px;z-index:1;
  width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;
  background:linear-gradient(180deg,var(--lr-amber-hot),var(--lr-amber));
  box-shadow:0 4px 14px rgba(242,163,60,.4),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .5s var(--lr-ez),background .4s var(--lr-ez);will-change:transform;
}
#loginContainer #loginForm[data-mode="portal"] .lr-seg-thumb{
  transform:translateX(100%);
  background:linear-gradient(180deg,#6ee7db,var(--lr-teal));
  box-shadow:0 4px 14px rgba(45,212,191,.42),inset 0 1px 0 rgba(255,255,255,.45);
}
#loginContainer .lr-seg-btn{
  position:relative;z-index:2;cursor:pointer;background:transparent;border:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 8px;border-radius:999px;
  font-family:var(--lr-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lr-dim);transition:color .35s var(--lr-ez);
}
#loginContainer .lr-seg-btn svg{width:14px;height:14px;flex:none}
#loginContainer .lr-seg-btn:hover{color:var(--lr-white)}
#loginContainer #loginForm[data-mode="login"]  .lr-seg-btn[data-seg="login"]{color:#0E1116;font-weight:700}
#loginContainer #loginForm[data-mode="portal"] .lr-seg-btn[data-seg="portal"]{color:#08110F;font-weight:700}
#loginContainer #loginForm[data-mode="login"]  .lr-seg-btn[data-seg="login"]:hover,
#loginContainer #loginForm[data-mode="portal"] .lr-seg-btn[data-seg="portal"]:hover{color:#0E1116}
#loginContainer .lr-seg-btn:focus-visible{outline:2px solid var(--lr-amber);outline-offset:2px}

/* --- panels: transición fluida entre modos --- */
#loginContainer .lr-panels{position:relative}
#loginContainer .lr-pane{transition:opacity .45s var(--lr-ez),transform .5s var(--lr-ez),filter .45s var(--lr-ez)}
#loginContainer .lr-pane[data-pane="portal"]{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px);pointer-events:none}
#loginContainer #loginForm[data-mode="portal"] .lr-pane[data-pane="login"]{position:absolute;inset:0;opacity:0;transform:translateY(-14px) scale(.985);filter:blur(6px);pointer-events:none}
#loginContainer #loginForm[data-mode="portal"] .lr-pane[data-pane="portal"]{position:relative;opacity:1;transform:none;filter:none;pointer-events:auto}
#loginContainer .lr-pane .title{margin-bottom:13px}

/* --- inputs con ícono lead (login compacto, box limpio sin subrayado doble) --- */
#loginContainer .input{display:flex;align-items:center;border-radius:12px}
#loginContainer .input input{border:0 !important;box-shadow:none !important;background:transparent !important;padding:11px 12px 11px 2px}
#loginContainer .lr-lead{display:grid;place-items:center;width:34px;flex:none;color:var(--lr-dimmer);transition:color .25s var(--lr-ez)}
#loginContainer .lr-lead svg{width:16px;height:16px}
#loginContainer .input:focus-within .lr-lead{color:var(--lr-amber)}

/* --- tiles del Portal (producto, estado ONLINE) --- */
#loginContainer .lr-tiles{display:flex;flex-direction:column;gap:10px}
#loginContainer .pbx-central.lr-tile{
  --acc:var(--op,var(--lr-teal));
  position:relative;display:flex;align-items:center;gap:13px;
  text-decoration:none;color:inherit;
  padding:12px 14px;border-radius:13px;
  background:rgba(0,0,0,.24);border:1px solid var(--lr-line);overflow:hidden;
  transition:transform .3s var(--lr-ez),border-color .3s var(--lr-ez),background .3s var(--lr-ez);
}
#loginContainer .pbx-central.lr-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);opacity:.85;box-shadow:0 0 16px var(--acc)}
#loginContainer .pbx-central.lr-tile:hover{transform:translateX(4px);border-color:color-mix(in oklab,var(--acc) 45%,transparent);background:rgba(0,0,0,.34)}
#loginContainer .pbx-central.lr-tile:focus-visible{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 26%,transparent)}
#loginContainer .lr-badge{
  width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-family:var(--lr-cond);font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#loginContainer .lr-tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#loginContainer .lr-tname{font-family:var(--lr-cond);font-weight:700;font-size:16px;letter-spacing:.01em;color:var(--lr-white)}
#loginContainer .lr-tmeta{display:flex;align-items:center;gap:8px;font-family:var(--lr-mono);font-size:10px;letter-spacing:.04em;color:var(--lr-dimmer)}
#loginContainer .lr-tstatus{display:inline-flex;align-items:center;gap:5px;color:var(--acc)}
#loginContainer .lr-live{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);animation:lrPulse 2.2s var(--lr-ez) infinite}
@keyframes lrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
#loginContainer .lr-tarw{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--lr-dimmer);background:rgba(236,239,244,.04);border:1px solid var(--lr-line);transition:all .3s var(--lr-ez)}
#loginContainer .pbx-central.lr-tile:hover .lr-tarw{color:var(--acc);transform:translateX(2px);border-color:color-mix(in oklab,var(--acc) 40%,transparent)}
#loginContainer .lr-tarw svg{width:15px;height:15px}
#loginContainer .lr-portal-note{margin:13px 0 0;text-align:center;font-family:var(--lr-mono);font-size:10px;letter-spacing:.04em;color:var(--lr-dimmer)}
#loginContainer .lr-portal-note b{color:var(--lr-dim);font-weight:400}

/* motion off */
@media (prefers-reduced-motion:reduce){
  #loginContainer .lr-seg-thumb,#loginContainer .lr-pane,#loginContainer .pbx-central.lr-tile,#loginContainer .lr-tarw{transition:none !important}
  #loginContainer .lr-live{animation:none !important}
}