/* ============================================================
   Sistema RH · Auth Shell 4.0 · authoritative stylesheet
   v2.7.15 — pre-2.8 visual stabilization
   ============================================================ */

/*
 * IMPORTANT
 * This file is intentionally authoritative and loaded after app.css.
 * Historical Auth rules remain in app.css for compatibility with older
 * snapshots, but no Auth implementation should append another patch layer here.
 */

.auth-body-premium{
  --auth-brand:var(--color-primario,#4338ca);
  --auth-brand-dark:color-mix(in srgb,var(--auth-brand) 30%,#070b14);
  --auth-glass-light:color-mix(in srgb,var(--surface-card) 82%,transparent);
  --auth-glass-dark:color-mix(in srgb,var(--surface-elevated) 76%,transparent);
  --auth-pointer-x:36%;
  --auth-pointer-y:34%;
  --auth-parallax-x:0px;
  --auth-parallax-y:0px;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  background:var(--surface-app);
}

/* ---------- One continuous visual world ---------- */
.auth-body-premium .auth-shell-premium{
  position:relative !important;
  isolation:isolate;
  display:grid !important;
  grid-template-columns:minmax(420px,44%) minmax(0,56%) !important;
  width:100%;
  min-height:100dvh !important;
  overflow:hidden;
  background:
    radial-gradient(ellipse 44% 42% at var(--auth-pointer-x) var(--auth-pointer-y),
      color-mix(in srgb,var(--auth-brand-fg,#fff) 9%,transparent) 0%,
      color-mix(in srgb,var(--auth-brand) 4%,transparent) 38%,
      transparent 76%),
    radial-gradient(ellipse 78% 70% at 8% 6%,
      color-mix(in srgb,var(--auth-brand) 78%,white 22%) 0%,
      color-mix(in srgb,var(--auth-brand) 32%,transparent) 43%,
      transparent 82%),
    radial-gradient(ellipse 72% 66% at 94% 90%,
      color-mix(in srgb,var(--auth-brand) 22%,#07101c) 0%,
      transparent 76%),
    linear-gradient(132deg,
      color-mix(in srgb,var(--auth-brand) 94%,#09111e) 0%,
      color-mix(in srgb,var(--auth-brand) 72%,#111827) 46%,
      color-mix(in srgb,var(--auth-brand) 34%,#0b1020) 100%) !important;
}

html[data-theme="dark"] .auth-body-premium .auth-shell-premium{
  background:
    radial-gradient(ellipse 44% 42% at var(--auth-pointer-x) var(--auth-pointer-y),
      color-mix(in srgb,var(--auth-brand) 17%,transparent) 0%,
      color-mix(in srgb,var(--auth-brand) 7%,transparent) 39%,
      transparent 76%),
    radial-gradient(ellipse 80% 72% at 8% 6%,
      color-mix(in srgb,var(--auth-brand) 38%,#0b1020) 0%,
      color-mix(in srgb,var(--auth-brand) 16%,transparent) 44%,
      transparent 82%),
    radial-gradient(ellipse 76% 68% at 94% 90%,
      color-mix(in srgb,var(--auth-brand) 15%,#050814) 0%,
      transparent 78%),
    linear-gradient(132deg,
      color-mix(in srgb,var(--auth-brand) 34%,#080d17) 0%,
      color-mix(in srgb,var(--auth-brand) 17%,#0e1520) 48%,
      color-mix(in srgb,var(--auth-brand) 8%,#060911) 100%) !important;
}

/* Autonomous aura layers. They paint behind BOTH columns. */
.auth-body-premium .auth-shell-premium::before,
.auth-body-premium .auth-shell-premium::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:0;
  pointer-events:none;
  border:0 !important;
  outline:0 !important;
  border-radius:50%;
  will-change:transform,opacity;
}
.auth-body-premium .auth-shell-premium::before{
  width:88vmax;
  height:88vmax;
  left:-38vmax;
  top:-42vmax;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--auth-brand-fg,#fff) 13%,transparent) 0%,
    color-mix(in srgb,var(--auth-brand) 18%,transparent) 32%,
    transparent 70%);
  filter:blur(68px);
  opacity:.48;
}
.auth-body-premium .auth-shell-premium::after{
  width:78vmax;
  height:78vmax;
  right:-34vmax;
  bottom:-40vmax;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--auth-brand) 24%,#0b1020) 0%,
    color-mix(in srgb,var(--auth-brand) 11%,transparent) 35%,
    transparent 72%);
  filter:blur(82px);
  opacity:.44;
}
html[data-theme="dark"] .auth-body-premium .auth-shell-premium::before{
  background:radial-gradient(circle,
    color-mix(in srgb,var(--auth-brand) 24%,#8b5cf6) 0%,
    color-mix(in srgb,var(--auth-brand) 11%,transparent) 34%,
    transparent 72%);
  opacity:.38;
}
html[data-theme="dark"] .auth-body-premium .auth-shell-premium::after{
  background:radial-gradient(circle,
    color-mix(in srgb,var(--auth-brand) 18%,#020617) 0%,
    color-mix(in srgb,var(--auth-brand) 8%,transparent) 36%,
    transparent 74%);
  opacity:.44;
}
@media (prefers-reduced-motion:no-preference){
  .auth-body-premium .auth-shell-premium::before{
    animation:authAuraPrimary 11.5s ease-in-out infinite alternate !important;
  }
  .auth-body-premium .auth-shell-premium::after{
    animation:authAuraSecondary 15.5s ease-in-out infinite alternate !important;
  }
  @keyframes authAuraPrimary{
    0%{transform:translate3d(-3vw,-2vh,0) scale(.98);opacity:.38}
    38%{transform:translate3d(10vw,7vh,0) scale(1.08);opacity:.58}
    72%{transform:translate3d(22vw,13vh,0) scale(1.15);opacity:.45}
    100%{transform:translate3d(30vw,3vh,0) scale(1.05);opacity:.54}
  }
  @keyframes authAuraSecondary{
    0%{transform:translate3d(4vw,6vh,0) scale(1.02);opacity:.34}
    50%{transform:translate3d(-13vw,-8vh,0) scale(1.13);opacity:.52}
    100%{transform:translate3d(-27vw,-2vh,0) scale(.98);opacity:.42}
  }
}

/* ---------- No seam: columns never paint a surface ---------- */
.auth-body-premium .auth-brand-panel,
.auth-body-premium .auth-brand-panel-premium,
.auth-body-premium .auth-access-panel,
html[data-theme="light"] .auth-body-premium .auth-brand-panel-premium,
html[data-theme="dark"] .auth-body-premium .auth-brand-panel-premium,
html[data-theme="light"] .auth-body-premium .auth-access-panel,
html[data-theme="dark"] .auth-body-premium .auth-access-panel{
  position:relative !important;
  z-index:1 !important;
  min-width:0;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.auth-body-premium .auth-brand-panel-premium::before,
.auth-body-premium .auth-brand-panel-premium::after,
.auth-body-premium .auth-access-panel::before,
.auth-body-premium .auth-access-panel::after{
  content:none !important;
  display:none !important;
}

/* ---------- Brand column ---------- */
.auth-body-premium .auth-brand-panel-premium{
  display:flex !important;
  flex-direction:column;
  justify-content:space-between;
  min-height:100dvh !important;
  padding:clamp(34px,4.3vw,68px) !important;
  color:var(--auth-brand-fg,#fff);
  overflow:hidden;
}
.auth-body-premium .auth-brand-content,
.auth-body-premium .auth-brand-footer{
  position:relative;
  z-index:2;
}
.auth-body-premium .auth-brand-content{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.auth-body-premium .auth-brand-logo{
  min-height:58px;
  margin-bottom:clamp(46px,8vh,92px) !important;
  display:flex;
  align-items:center;
}
.auth-body-premium .auth-brand-logo img{
  max-width:min(230px,68%);
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.auth-body-premium .auth-brand-copy .auth-eyebrow{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--auth-brand-fg,#fff) 18%,transparent) !important;
  border-radius:999px;
  background:color-mix(in srgb,var(--auth-brand-fg,#fff) 8%,transparent) !important;
  color:var(--auth-brand-fg-muted,rgba(255,255,255,.84)) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.auth-body-premium .auth-brand-copy h1{
  max-width:620px !important;
  margin:14px 0 0 !important;
  color:var(--auth-brand-fg,#fff) !important;
  font-size:clamp(3rem,5.4vw,5.65rem) !important;
  line-height:.94 !important;
  letter-spacing:-.062em !important;
  text-wrap:balance;
}
.auth-body-premium .auth-brand-copy h1 span{
  display:block;
  color:var(--auth-brand-fg-muted,rgba(255,255,255,.72)) !important;
}
.auth-body-premium .auth-brand-copy p{
  max-width:590px !important;
  margin:22px 0 0 !important;
  color:var(--auth-brand-fg-muted,rgba(255,255,255,.74)) !important;
  font-size:clamp(.96rem,1.15vw,1.1rem) !important;
  line-height:1.62 !important;
}
.auth-body-premium .auth-feature-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  max-width:650px;
  margin-top:clamp(28px,5vh,52px) !important;
}
.auth-body-premium .auth-feature{
  position:relative;
  isolation:isolate;
  min-width:0;
  display:flex !important;
  align-items:flex-start !important;
  gap:9px !important;
  padding:13px 14px !important;
  border:1px solid color-mix(in srgb,var(--auth-brand-fg,#fff) 14%,transparent) !important;
  border-radius:16px !important;
  background:color-mix(in srgb,var(--auth-brand-fg,#fff) 7%,transparent) !important;
  color:var(--auth-brand-fg,#fff) !important;
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  overflow:hidden;
  transform:translateY(0);
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease;
}
.auth-body-premium .auth-feature::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--feature-x,50%) var(--feature-y,50%),
    color-mix(in srgb,var(--auth-brand-fg,#fff) 18%,transparent),transparent 58%);
  transition:opacity 180ms ease;
}
.auth-body-premium .auth-feature:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--auth-brand-fg,#fff) 26%,transparent) !important;
  background:color-mix(in srgb,var(--auth-brand-fg,#fff) 11%,transparent) !important;
}
.auth-body-premium .auth-feature:hover::after{opacity:1}
.auth-body-premium .auth-feature svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--auth-brand-fg,#fff) !important;
  stroke:currentColor !important;
}
.auth-body-premium .auth-feature span{
  color:var(--auth-brand-fg-muted,rgba(255,255,255,.82)) !important;
  font-size:.75rem;
  line-height:1.45;
}
.auth-body-premium .auth-brand-footer{
  display:flex;
  align-items:center;
  gap:.28rem;
  color:var(--auth-brand-fg-soft,rgba(255,255,255,.62)) !important;
  font-size:.75rem;
}
.auth-body-premium .auth-brand-footer strong{color:var(--auth-brand-fg,#fff);font-weight:700}
.auth-body-premium .auth-made-heart{color:var(--auth-brand-fg,#fff)}

/* Legacy decorative child is suppressed: root aura owns motion. */
.auth-body-premium .auth-ambient{display:none !important}

/* ---------- Access column ---------- */
.auth-body-premium .auth-access-panel{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100dvh !important;
  padding:clamp(36px,5.2vw,82px) !important;
  overflow-y:auto;
}
.auth-body-premium .auth-theme-toggle{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  z-index:8 !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--auth-brand) 10%,var(--line-soft)) !important;
  border-radius:13px !important;
  background:color-mix(in srgb,var(--surface-card) 70%,transparent) !important;
  color:var(--text-muted) !important;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 8px 24px rgba(15,23,42,.08) !important;
}
html[data-theme="dark"] .auth-body-premium .auth-theme-toggle{
  background:color-mix(in srgb,var(--surface-elevated) 74%,transparent) !important;
}
.auth-body-premium .auth-card-premium{
  box-sizing:border-box !important;
  width:min(100%,500px) !important;
  max-width:500px !important;
  min-width:0 !important;
  height:auto !important;
  margin:auto !important;
  padding:clamp(30px,3.2vw,44px) !important;
  border:1px solid color-mix(in srgb,var(--auth-brand) 10%,var(--line-soft)) !important;
  border-radius:28px !important;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--surface-card) 84%,transparent),
    color-mix(in srgb,var(--surface-card) 72%,transparent)) !important;
  -webkit-backdrop-filter:blur(26px) saturate(132%);
  backdrop-filter:blur(26px) saturate(132%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 30px 84px rgba(15,23,42,.14) !important;
  overflow:visible !important;
}
html[data-theme="dark"] .auth-body-premium .auth-card-premium{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--surface-elevated) 78%,transparent),
    color-mix(in srgb,var(--surface-card) 66%,transparent)) !important;
  border-color:color-mix(in srgb,var(--auth-brand) 18%,var(--line-soft)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 32px 88px rgba(0,0,0,.34) !important;
}
.auth-body-premium .auth-access-heading{
  margin:0 0 24px !important;
}
.auth-body-premium .auth-access-heading .auth-eyebrow{
  color:var(--auth-brand) !important;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.auth-body-premium .auth-access-heading h2{
  margin:8px 0 7px !important;
  color:var(--text-main) !important;
  font-size:clamp(1.95rem,2.2vw,2.3rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
}
.auth-body-premium .auth-access-heading p{
  margin:0 !important;
  color:var(--text-muted) !important;
  font-size:.875rem !important;
  line-height:1.55 !important;
}

/* ---------- Form controls ---------- */
.auth-body-premium .auth-access-form{
  display:flex !important;
  flex-direction:column;
  gap:18px !important;
}
.auth-body-premium .auth-access-form .form-grupo{margin:0 !important}
.auth-body-premium .auth-form-modern .form-grupo > label,
.auth-body-premium .auth-label-row label{
  color:var(--text-main) !important;
  font-size:.8125rem !important;
  font-weight:500;
}
.auth-body-premium .auth-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:22px;
  margin-bottom:8px;
}
.auth-body-premium .auth-label-row a,
.auth-body-premium .auth-inline-link{
  color:var(--auth-brand) !important;
  font-size:.8125rem;
  font-weight:500;
}
.auth-body-premium .auth-input-wrap{
  position:relative !important;
  display:block !important;
  min-height:52px !important;
  border-radius:14px !important;
  overflow:visible !important;
}
.auth-body-premium .auth-input-wrap input{
  position:relative !important;
  z-index:1 !important;
  box-sizing:border-box;
  width:100% !important;
  min-height:52px !important;
  margin:0 !important;
  padding:0 46px 0 44px !important;
  border:1px solid color-mix(in srgb,var(--auth-brand) 6%,var(--line-soft)) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--surface-card) 92%,transparent) !important;
  color:var(--text-main) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}
html[data-theme="dark"] .auth-body-premium .auth-input-wrap input{
  background:color-mix(in srgb,var(--surface-elevated) 88%,transparent) !important;
  border-color:color-mix(in srgb,var(--auth-brand) 10%,var(--line-soft)) !important;
}
.auth-body-premium .auth-input-wrap input::placeholder{
  color:var(--text-subtle) !important;
  opacity:1 !important;
}
.auth-body-premium .auth-input-icon{
  position:absolute !important;
  z-index:4 !important;
  left:14px !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  display:grid !important;
  place-items:center;
  transform:translateY(-50%) !important;
  color:var(--text-muted) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none;
}
.auth-body-premium .auth-input-icon svg,
.auth-body-premium .auth-input-icon svg *,
.auth-body-premium .auth-password-toggle svg,
.auth-body-premium .auth-password-toggle svg *{
  color:inherit !important;
  stroke:currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}
.auth-body-premium .auth-input-icon svg{
  width:18px !important;
  height:18px !important;
}
.auth-body-premium .auth-password-toggle{
  position:absolute !important;
  z-index:4 !important;
  top:50% !important;
  right:8px !important;
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center;
  padding:0 !important;
  transform:translateY(-50%) !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--text-muted) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.auth-body-premium .auth-input-wrap:focus-within .auth-input-icon,
.auth-body-premium .auth-password-toggle:hover,
.auth-body-premium .auth-password-toggle.is-visible{
  color:var(--auth-brand) !important;
}
.auth-body-premium .auth-input-wrap:focus-within input{
  border-color:color-mix(in srgb,var(--auth-brand) 42%,var(--line-soft)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-brand) 13%,transparent) !important;
}

/* ---------- Remember, CTA, security ---------- */
.auth-body-premium .auth-remember{
  box-sizing:border-box;
  min-height:74px !important;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center !important;
  gap:11px !important;
  margin:0 !important;
  padding:12px 14px !important;
  border:1px solid color-mix(in srgb,var(--auth-brand) 6%,var(--line-soft)) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--surface-card) 68%,transparent) !important;
}
html[data-theme="dark"] .auth-body-premium .auth-remember{
  background:color-mix(in srgb,var(--surface-elevated) 80%,transparent) !important;
  border-color:color-mix(in srgb,var(--auth-brand) 9%,var(--line-soft)) !important;
}
.auth-body-premium .auth-remember > input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.auth-body-premium .auth-remember-box{
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center;
  border:1px solid var(--line-strong,var(--gris-300)) !important;
  border-radius:7px !important;
  color:transparent;
  background:var(--surface-card) !important;
}
.auth-body-premium .auth-remember > input:checked + .auth-remember-box{
  border-color:var(--auth-brand) !important;
  background:var(--auth-brand) !important;
  color:var(--brand-on-primary,#fff) !important;
}
.auth-body-premium .auth-remember-copy strong{
  display:block;
  color:var(--text-main) !important;
  font-size:.8125rem !important;
}
.auth-body-premium .auth-remember-copy small{
  display:block;
  margin-top:3px;
  color:var(--text-muted) !important;
  font-size:.75rem !important;
  line-height:1.4;
}
.auth-body-premium .auth-submit{
  position:relative;
  min-height:52px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0 !important;
  border:0 !important;
  border-radius:14px !important;
  overflow:hidden;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--auth-brand) 78%,white 22%),
    var(--auth-brand) 54%,
    color-mix(in srgb,var(--auth-brand) 88%,#111827 12%)) !important;
  color:var(--brand-on-primary,#fff) !important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--auth-brand) 28%,transparent) !important;
}
.auth-body-premium .auth-security-note{
  margin:18px 0 0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:color-mix(in srgb,var(--text-main) 68%,var(--text-muted)) !important;
  font-size:.75rem !important;
  opacity:1 !important;
}
html[data-theme="dark"] .auth-body-premium .auth-security-note{
  color:var(--text-muted) !important;
}
.auth-body-premium .auth-security-note span{
  color:inherit !important;
  opacity:1 !important;
}
.auth-body-premium .auth-security-note svg,
.auth-body-premium .auth-security-note svg *{
  color:var(--semantic-success,#22c55e) !important;
  stroke:currentColor !important;
  opacity:1 !important;
}

/* ---------- Other Auth states ---------- */
.auth-body-premium .auth-context-note,
.auth-body-premium .auth-password-guidance,
.auth-body-premium .auth-welcome-user{
  border:1px solid color-mix(in srgb,var(--auth-brand) 7%,var(--line-soft)) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--surface-card) 68%,transparent) !important;
  color:var(--text-muted) !important;
}
.auth-body-premium .auth-context-note,
.auth-body-premium .auth-password-guidance{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
}
.auth-body-premium .auth-context-note strong{display:block;color:var(--text-main)}
.auth-body-premium .auth-context-note span,
.auth-body-premium .auth-password-guidance span{display:block;color:var(--text-muted);font-size:.75rem;line-height:1.45}
.auth-body-premium .auth-context-note > svg,
.auth-body-premium .auth-password-guidance > svg{flex:0 0 auto;color:var(--auth-brand)}
.auth-body-premium .auth-welcome-user{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px;
}
.auth-body-premium .auth-welcome-avatar{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:13px;background:color-mix(in srgb,var(--auth-brand) 12%,var(--surface-card));color:var(--auth-brand);font-weight:700;
}
.auth-body-premium .auth-welcome-copy strong{display:block;color:var(--text-main)}
.auth-body-premium .auth-welcome-copy small{display:block;color:var(--text-muted)}
.auth-body-premium .auth-invalid-state{
  display:grid;
  justify-items:center;
  gap:9px;
  text-align:center;
}
.auth-body-premium .auth-invalid-icon{
  width:54px;height:54px;display:grid;place-items:center;border-radius:16px;
  background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 10%,var(--surface-card));
  color:var(--semantic-warning,#f59e0b);
}
.auth-body-premium .auth-invalid-state h3{margin:2px 0 0;color:var(--text-main)}
.auth-body-premium .auth-invalid-state p{margin:0 0 4px;color:var(--text-muted)}

/* ---------- Pointer following ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .auth-body-premium .auth-shell-premium[data-auth-pointer="active"]{
    background:
      radial-gradient(34rem 34rem at var(--auth-pointer-x) var(--auth-pointer-y),
        color-mix(in srgb,var(--auth-brand-fg,#fff) 10%,transparent),
        color-mix(in srgb,var(--auth-brand) 5%,transparent) 34%,
        transparent 72%),
      radial-gradient(ellipse 78% 70% at 8% 6%,
        color-mix(in srgb,var(--auth-brand) 78%,white 22%) 0%,
        color-mix(in srgb,var(--auth-brand) 32%,transparent) 43%,
        transparent 82%),
      radial-gradient(ellipse 72% 66% at 94% 90%,
        color-mix(in srgb,var(--auth-brand) 22%,#07101c) 0%,
        transparent 76%),
      linear-gradient(132deg,
        color-mix(in srgb,var(--auth-brand) 94%,#09111e) 0%,
        color-mix(in srgb,var(--auth-brand) 72%,#111827) 46%,
        color-mix(in srgb,var(--auth-brand) 34%,#0b1020) 100%) !important;
  }
  html[data-theme="dark"] .auth-body-premium .auth-shell-premium[data-auth-pointer="active"]{
    background:
      radial-gradient(34rem 34rem at var(--auth-pointer-x) var(--auth-pointer-y),
        color-mix(in srgb,var(--auth-brand) 18%,transparent),
        color-mix(in srgb,var(--auth-brand) 7%,transparent) 36%,
        transparent 72%),
      radial-gradient(ellipse 80% 72% at 8% 6%,
        color-mix(in srgb,var(--auth-brand) 38%,#0b1020) 0%,
        color-mix(in srgb,var(--auth-brand) 16%,transparent) 44%,
        transparent 82%),
      radial-gradient(ellipse 76% 68% at 94% 90%,
        color-mix(in srgb,var(--auth-brand) 15%,#050814) 0%,
        transparent 78%),
      linear-gradient(132deg,
        color-mix(in srgb,var(--auth-brand) 34%,#080d17) 0%,
        color-mix(in srgb,var(--auth-brand) 17%,#0e1520) 48%,
        color-mix(in srgb,var(--auth-brand) 8%,#060911) 100%) !important;
  }
}

/* ---------- Tablet ---------- */
@media (min-width:761px) and (max-width:1100px){
  .auth-body-premium .auth-shell-premium{
    grid-template-columns:minmax(340px,42%) minmax(0,58%) !important;
  }
  .auth-body-premium .auth-brand-panel-premium{
    padding:34px !important;
  }
  .auth-body-premium .auth-brand-logo{margin-bottom:48px !important}
  .auth-body-premium .auth-brand-copy h1{
    font-size:clamp(2.75rem,5.7vw,4.4rem) !important;
  }
  .auth-body-premium .auth-feature-list{
    grid-template-columns:1fr !important;
    max-width:390px;
    gap:8px !important;
  }
  .auth-body-premium .auth-feature{padding:10px 12px !important}
  .auth-body-premium .auth-access-panel{padding:32px !important}
  .auth-body-premium .auth-card-premium{
    width:min(100%,480px) !important;
    padding:30px !important;
  }
}

/* ---------- Mobile: one stable composition, no legacy parallax ---------- */
@media (max-width:760px){
  .auth-body-premium{
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .auth-body-premium .auth-shell-premium{
    display:block !important;
    min-height:100dvh !important;
    overflow:visible !important;
    background:
      radial-gradient(ellipse 110% 52% at 20% 4%,
        color-mix(in srgb,var(--auth-brand) 76%,white 24%) 0%,
        color-mix(in srgb,var(--auth-brand) 30%,transparent) 46%,
        transparent 78%),
      linear-gradient(165deg,
        color-mix(in srgb,var(--auth-brand) 92%,#09111e),
        color-mix(in srgb,var(--auth-brand) 40%,#0b1020)) !important;
  }
  html[data-theme="dark"] .auth-body-premium .auth-shell-premium{
    background:
      radial-gradient(ellipse 110% 52% at 20% 4%,
        color-mix(in srgb,var(--auth-brand) 34%,#0b1020) 0%,
        transparent 76%),
      linear-gradient(165deg,
        color-mix(in srgb,var(--auth-brand) 28%,#080d17),
        color-mix(in srgb,var(--auth-brand) 10%,#050814)) !important;
  }
  .auth-body-premium .auth-shell-premium::before{
    width:130vw;
    height:130vw;
    left:-70vw;
    top:-52vw;
    filter:blur(50px);
  }
  .auth-body-premium .auth-shell-premium::after{
    width:120vw;
    height:120vw;
    right:-70vw;
    bottom:8vh;
    filter:blur(64px);
  }
  .auth-body-premium .auth-brand-panel-premium{
    min-height:270px !important;
    padding:24px 20px 52px !important;
    display:block !important;
    overflow:hidden;
  }
  .auth-body-premium .auth-brand-logo{
    min-height:42px;
    margin-bottom:28px !important;
  }
  .auth-body-premium .auth-brand-logo img{
    max-width:180px;
    max-height:48px;
  }
  .auth-body-premium .auth-brand-copy .auth-eyebrow{
    font-size:.6875rem;
    padding:6px 8px;
  }
  .auth-body-premium .auth-brand-copy h1{
    max-width:420px !important;
    margin-top:10px !important;
    font-size:clamp(2.2rem,11vw,3.15rem) !important;
    line-height:.96 !important;
  }
  .auth-body-premium .auth-brand-copy p{
    max-width:470px !important;
    margin-top:12px !important;
    font-size:.8125rem !important;
    line-height:1.5 !important;
  }
  .auth-body-premium .auth-feature-list,
  .auth-body-premium .auth-brand-footer{
    display:none !important;
  }
  .auth-body-premium .auth-access-panel{
    min-height:auto !important;
    margin-top:-24px !important;
    padding:0 12px max(24px,env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
  }
  .auth-body-premium .auth-card-premium{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px 18px 20px !important;
    border-radius:24px !important;
    background:color-mix(in srgb,var(--surface-card) 90%,transparent) !important;
    -webkit-backdrop-filter:blur(24px) saturate(126%);
    backdrop-filter:blur(24px) saturate(126%);
    box-shadow:0 18px 50px rgba(15,23,42,.14) !important;
  }
  html[data-theme="dark"] .auth-body-premium .auth-card-premium{
    background:color-mix(in srgb,var(--surface-card) 88%,transparent) !important;
    box-shadow:0 20px 56px rgba(0,0,0,.30) !important;
  }
  .auth-body-premium .auth-theme-toggle{
    position:fixed !important;
    top:max(12px,env(safe-area-inset-top)) !important;
    right:12px !important;
    z-index:20 !important;
  }
  .auth-body-premium .auth-access-heading{margin-bottom:18px !important}
  .auth-body-premium .auth-access-heading h2{font-size:1.75rem !important}
  .auth-body-premium .auth-access-heading p{font-size:.875rem !important}
  .auth-body-premium .auth-access-form{gap:14px !important}
  .auth-body-premium .auth-input-wrap,
  .auth-body-premium .auth-input-wrap input{min-height:50px !important}
  .auth-body-premium .auth-remember{min-height:68px !important;padding:10px 11px !important}
  .auth-body-premium .auth-submit{min-height:50px !important}
  .auth-body-premium .auth-security-note{margin-top:15px !important;font-size:.75rem !important}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .auth-body-premium .auth-shell-premium::before,
  .auth-body-premium .auth-shell-premium::after{
    animation:none !important;
    transform:none !important;
  }
  .auth-body-premium .auth-feature,
  .auth-body-premium .auth-feature::after{
    transition:none !important;
  }
}


/* ---------- Device-class authority ----------
   app.css contains historical tablet rules with higher specificity.
   These selectors intentionally outrank them while preserving the authoritative Auth shell. */
html[data-auth-device="tablet"] .auth-body-premium .auth-shell-premium{
  display:grid !important;
  grid-template-columns:minmax(390px,42%) minmax(0,58%) !important;
  grid-template-rows:none !important;
  min-height:100dvh !important;
  background-color:transparent !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-panel-premium,
html[data-auth-device="tablet"] .auth-body-premium .auth-access-panel{
  min-height:100dvh !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-panel-premium{
  padding:clamp(32px,4vw,58px) !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-content{
  max-width:none !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-logo{
  margin-bottom:clamp(42px,7vh,72px) !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-copy h1{
  max-width:540px !important;
  font-size:clamp(3rem,5.2vw,5.15rem) !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-brand-copy p{
  max-width:510px !important;
  font-size:clamp(.94rem,1.2vw,1.08rem) !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-feature-list{
  grid-template-columns:1fr !important;
  max-width:430px !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-access-panel{
  padding:clamp(34px,5vw,68px) !important;
}
html[data-auth-device="tablet"] .auth-body-premium .auth-card-premium{
  width:min(100%,520px) !important;
  max-width:520px !important;
  height:auto !important;
  min-height:0 !important;
  padding:clamp(30px,3.4vw,42px) !important;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--surface-card) 84%,transparent),
    color-mix(in srgb,var(--surface-card) 72%,transparent)) !important;
}
html[data-theme="dark"][data-auth-device="tablet"] .auth-body-premium .auth-card-premium{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--surface-elevated) 78%,transparent),
    color-mix(in srgb,var(--surface-card) 66%,transparent)) !important;
}

/* Portrait tablet: stacked but still one continuous atmosphere. */
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-shell-premium{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(280px,36dvh) minmax(0,1fr) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-brand-panel-premium{
  min-height:0 !important;
  padding:28px 36px 44px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-brand-logo{
  margin-bottom:22px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-feature-list,
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-brand-footer{
  display:none !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-access-panel{
  min-height:0 !important;
  margin-top:-22px !important;
  padding:0 34px max(36px,env(safe-area-inset-bottom)) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-card-premium{
  width:min(100%,560px) !important;
  max-width:560px !important;
  margin:0 auto !important;
}

/* Phone authority even if historical generic mobile rules remain in app.css. */
@media (max-width:760px){
  html .auth-body-premium .auth-shell-premium{
    display:block !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
  }
  html .auth-body-premium .auth-brand-panel-premium{
    min-height:270px !important;
    height:auto !important;
    padding:24px 20px 52px !important;
    background:transparent !important;
  }
  html .auth-body-premium .auth-access-panel{
    min-height:auto !important;
    height:auto !important;
    margin-top:-24px !important;
    padding:0 12px max(24px,env(safe-area-inset-bottom)) !important;
    background:transparent !important;
  }
  html .auth-body-premium .auth-card-premium{
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:22px 18px 20px !important;
    overflow:visible !important;
  }
}

/* Final tablet geometry normalization against legacy high-specificity rules. */
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-body-premium .auth-card-premium,
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-body-premium .auth-card-premium{
  border-radius:28px !important;
}


/* ============================================================
   v2.7.16 · Auth mobile root-canvas continuity
   ============================================================ */

/*
 * Mobile browsers can resize the visual viewport while scrolling. When the
 * document root becomes temporarily taller than the Auth Shell, the root canvas
 * is exposed. It must therefore share the same White Label atmosphere instead
 * of falling back to the application's neutral surface.
 */
html{
  min-height:100%;
  background-color:color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 38%,#0b1020) !important;
}
html[data-theme="dark"]{
  background-color:color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 12%,#050814) !important;
}
body.auth-body-premium{
  min-height:100%;
  background-color:color-mix(in srgb,var(--auth-brand) 38%,#0b1020) !important;
  background-image:none !important;
}

/* The root shell grows with content; no fixed viewport box may reveal the body. */
@media (max-width:760px){
  html{
    min-height:100%;
    overscroll-behavior-y:none;
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 66%,#101827) 0%,
        color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 40%,#0b1020) 100%) !important;
  }
  html[data-theme="dark"]{
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 26%,#080d17) 0%,
        color-mix(in srgb,var(--auth-brand,var(--color-primario,#4338ca)) 10%,#050814) 100%) !important;
  }
  body.auth-body-premium{
    min-height:100%;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    background:transparent !important;
  }
  .auth-body-premium .auth-shell-premium,
  html .auth-body-premium .auth-shell-premium{
    box-sizing:border-box;
    min-height:100svh !important;
    min-height:100dvh !important;
    height:auto !important;
    padding-bottom:max(18px,env(safe-area-inset-bottom)) !important;
  }
}