/* NEXXO VIS-05A - Signature Access.
   Entrada (#nexxo-auth) e recuperacao de acesso (reset.html). Tudo sob .nxa:
   nenhuma regra alcanca o workspace autenticado. Assinatura escura fixa,
   independente do tema da carteira. Sem dependencias externas. */

.nxa{
  --a-bg:#071521;--a-bg2:#0B1B29;--a-zone:#0D2030;--a-field:#0A1A27;
  --a-line:#1E3647;--a-line2:#62849A;--a-line3:#86A5B8;--a-text:#F1F7FA;--a-label:#CBD9E2;
  --a-sub:#9AB0BE;--a-dim:#8199A9;--a-accent:#32D4BC;--a-accent-hi:#4FE0CA;
  --a-on-accent:#04302D;--a-error:#FF8E9E;--a-ok:#68DCB5;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  padding:calc(22px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));
  color:var(--a-text);color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;font-synthesis:none;text-align:left;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  background:
    radial-gradient(120% 60% at 88% 12%,rgba(50,212,188,.13),transparent 62%),
    radial-gradient(90% 60% at 0% 100%,rgba(20,97,122,.26),transparent 70%),
    linear-gradient(165deg,var(--a-bg2),var(--a-bg) 58%);
}
.nxa,.nxa *,.nxa *::before,.nxa *::after{box-sizing:border-box}
body.nxa-page{margin:0;background:#071521}

/* ---------- Ambientacao: o simbolo radial como desenho tecnico ---------- */
.nxa .nxa-ambient{
  position:absolute;z-index:-1;pointer-events:none;
  width:560px;height:560px;left:82%;top:118px;transform:translate(-50%,-50%);opacity:.85;
  -webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 48%,transparent 100%);
}

/* ---------- Zona de marca ---------- */
.nxa .nxa-mark{display:flex;align-items:center;gap:12px}
.nxa .nxa-mark svg{width:38px;height:38px;flex:none}
.nxa .nxa-word{font-size:17px;font-weight:750;letter-spacing:.2em}
.nxa .nxa-tag{margin-left:2px;padding-left:12px;border-left:1px solid var(--a-line2);color:var(--a-sub);font-size:13px;font-weight:500;letter-spacing:.02em}
.nxa .nxa-hero{margin-top:clamp(30px,9.5vh,92px)}
.nxa .nxa-eyebrow{margin:0 0 12px;color:var(--a-accent);font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.nxa .nxa-display{margin:0;font-size:clamp(29px,8.4vw,36px);line-height:1.08;letter-spacing:-.026em;font-weight:640;text-wrap:balance;color:var(--a-text)}
.nxa .nxa-lede{margin:12px 0 0;color:var(--a-sub);font-size:16px;line-height:1.45}
.nxa .nxa-foot{display:none}

/* ---------- Zona de acesso ---------- */
.nxa .nxa-access{flex:1;display:flex;flex-direction:column;margin-top:clamp(22px,4.5vh,40px);min-width:0}
.nxa .nxa-panel{width:100%;max-width:440px}
.nxa .nxa-panel-title{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:640;color:var(--a-text)}
.nxa .nxa-panel-sub{margin:8px 0 24px;color:var(--a-sub);font-size:15px;line-height:1.45}
/* No celular a frase de marca ja e o titulo da entrada. */
.nxa--login .nxa-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nxa--login .nxa-panel-sub{display:none}
/* Na recuperacao o titulo acompanha a etapa; a frase de marca fica para telas largas. */
.nxa--recover .nxa-hero{display:none}
.nxa--recover .nxa-access{margin-top:clamp(28px,8vh,72px)}

.nxa form{display:flex;flex-direction:column;margin:0}
.nxa .nxa-field{margin-top:16px}
.nxa .nxa-field:first-child{margin-top:0}
.nxa label{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;color:var(--a-label);font-size:13px;font-weight:600;letter-spacing:.01em}
.nxa .nxa-hint{color:var(--a-sub);font-weight:500}
.nxa .nxa-control{position:relative}
.nxa input{
  display:block;width:100%;height:52px;margin:0;padding:0 16px;
  font:inherit;font-size:16px;color:var(--a-text);
  background:var(--a-field);border:1px solid var(--a-line2);border-radius:12px;outline:0;
  scroll-margin:28px 0 150px;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.nxa input::placeholder{color:#7890A1;opacity:1}
.nxa input:hover{border-color:var(--a-line3)}
.nxa input:focus,.nxa input:focus-visible{outline:0;border-color:var(--a-accent);background:#0C1F2D;box-shadow:0 0 0 3px rgba(50,212,188,.28)}
.nxa input:-webkit-autofill{-webkit-text-fill-color:var(--a-text);box-shadow:inset 0 0 0 100px #0E2433;caret-color:var(--a-text)}
.nxa input:-webkit-autofill:focus{box-shadow:inset 0 0 0 100px #0E2433,0 0 0 3px rgba(50,212,188,.28)}
.nxa .nxa-control.has-eye input{padding-right:56px}
.nxa .nxa-eye{
  position:absolute;top:4px;right:4px;width:44px;height:44px;margin:0;padding:0;
  display:grid;place-items:center;color:var(--a-sub);background:transparent;
  border:0;border-radius:9px;cursor:pointer;transition:color .16s ease,background-color .16s ease;
}
.nxa .nxa-eye:hover{color:var(--a-text);background:rgba(154,176,190,.12)}
.nxa .nxa-eye:focus-visible{outline:2px solid var(--a-accent);outline-offset:-2px;color:var(--a-text)}
.nxa .nxa-eye svg{width:21px;height:21px}
.nxa .nxa-eye .i-off,.nxa .nxa-eye[aria-pressed="true"] .i-on{display:none}
.nxa .nxa-eye[aria-pressed="true"] .i-off{display:block}

/* Mensagens: aparecem abaixo do botao, que nunca se desloca. */
.nxa .auth-error,.nxa #msg{margin:0;font-size:13.5px;line-height:1.45;color:var(--a-sub)}
.nxa .auth-error{order:2}
.nxa .auth-error:not(:empty),.nxa #msg:not(:empty){margin-top:12px;padding:10px 12px 10px 14px;border-radius:10px;color:var(--a-label);background:rgba(154,176,190,.08);box-shadow:inset 3px 0 0 var(--a-line2)}
.nxa .auth-error:not(:empty),.nxa #msg.error:not(:empty){color:#FFC2CB;background:rgba(255,142,158,.09);box-shadow:inset 3px 0 0 var(--a-error)}
.nxa #msg.ok:not(:empty){color:#C9F3E6;background:rgba(104,220,181,.09);box-shadow:inset 3px 0 0 var(--a-ok)}
.nxa form:has(.auth-error:not(:empty)) input{border-color:var(--a-error)}

.nxa .nxa-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;margin:22px 0 0;padding:0 18px;
  font:inherit;font-size:16px;font-weight:680;letter-spacing:.005em;white-space:nowrap;
  color:var(--a-on-accent);background:var(--a-accent);border:0;border-radius:12px;cursor:pointer;opacity:1;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 28px -12px rgba(50,212,188,.55);
  transition:background-color .16s ease,transform .12s ease,box-shadow .16s ease;
}
.nxa .nxa-cta:hover{background:var(--a-accent-hi)}
.nxa .nxa-cta:active{transform:translateY(1px)}
.nxa .nxa-cta:focus-visible{outline:2px solid var(--a-text);outline-offset:3px}
.nxa .nxa-cta:disabled{cursor:progress;opacity:1;background:#2AB5A1;box-shadow:none;transform:none}
.nxa .nxa-busy,.nxa .nxa-cta .nxa-spin{display:none}
.nxa .nxa-cta:disabled .nxa-idle{display:none}
.nxa .nxa-cta:disabled .nxa-busy{display:inline}
.nxa .nxa-cta:disabled .nxa-spin{display:block}
.nxa .nxa-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(4,48,45,.28);border-top-color:var(--a-on-accent);animation:nxa-spin .7s linear infinite}
@keyframes nxa-spin{to{transform:rotate(360deg)}}

.nxa .auth-recover,.nxa .nxa-link{
  order:3;display:flex;align-items:center;justify-content:center;min-height:44px;margin:6px 0 0;
  color:#5FE0CB;font-size:14.5px;font-weight:600;text-align:center;text-decoration:none;border-radius:10px;
}
.nxa .auth-recover:hover,.nxa .nxa-link:hover{color:#8CECDD;text-decoration:underline;text-underline-offset:4px}
.nxa .auth-recover:focus-visible,.nxa .nxa-link:focus-visible{outline:2px solid var(--a-accent);outline-offset:-2px}

.nxa .nxa-note{margin:auto 0 0;padding-top:18px;color:var(--a-dim);font-size:12.5px;line-height:1.45;max-width:440px}
.nxa .hidden{display:none}

/* Restauracao de sessao: estado neutro em vez de piscar o formulario. */
.nxa .nxa-prep{display:none;width:100%;max-width:440px}
.nxa .nxa-prep-wait{display:flex;align-items:center;gap:12px;margin:0;color:var(--a-label);font-size:16px;font-weight:550}
.nxa .nxa-prep .nxa-spin{border-color:rgba(154,176,190,.28);border-top-color:var(--a-accent)}
.nxa .nxa-prep-slow{display:none}
.nxa .nxa-prep-title{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:640;color:var(--a-text)}
.nxa .nxa-prep-text{margin:8px 0 0;color:var(--a-sub);font-size:15px;line-height:1.45}
/* O formulario so aparece em data-auth="login", que connectNexxo() define junto com o
   tratamento de envio. Antes disso (boot, restoring, slow) ele nao existe na tela. */
html[data-auth="boot"] .nxa .nxa-prep,html[data-auth="restoring"] .nxa .nxa-prep,html[data-auth="slow"] .nxa .nxa-prep{display:block}
html[data-auth="boot"] .nxa .nxa-panel,html[data-auth="restoring"] .nxa .nxa-panel,html[data-auth="slow"] .nxa .nxa-panel,
html[data-auth="boot"] .nxa .nxa-note,html[data-auth="restoring"] .nxa .nxa-note,html[data-auth="slow"] .nxa .nxa-note{display:none}
html[data-auth="boot"] .nxa .nxa-prep-wait{animation:nxa-show 0s .4s both}
html[data-auth="slow"] .nxa .nxa-prep-wait{display:none}
html[data-auth="slow"] .nxa .nxa-prep-slow{display:block}
@keyframes nxa-show{from{visibility:hidden}to{visibility:visible}}

/* Recuperacao concluida: a saida para o login vira a acao principal. */
html[data-step="done"] .nxa .nxa-link{min-height:52px;margin-top:20px;color:var(--a-on-accent);background:var(--a-accent);border-radius:12px;font-size:16px;font-weight:680;text-decoration:none}
html[data-step="done"] .nxa .nxa-link:hover{background:var(--a-accent-hi);color:var(--a-on-accent)}
html[data-step="done"] .nxa .nxa-link:focus-visible{outline:2px solid var(--a-text);outline-offset:3px}

/* ---------- Telas estreitas ---------- */
@media(max-width:359px){
  .nxa{padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px))}
  .nxa .nxa-hero{margin-top:26px}
  .nxa .nxa-display{font-size:27px}
  .nxa .nxa-lede{font-size:15px}
  .nxa .nxa-tag{display:none}
  .nxa .nxa-ambient{width:440px;height:440px;left:86%;top:96px;opacity:.7}
}

/* ---------- Retrato com pouca altura (320x568) ---------- */
@media(max-height:620px) and (max-width:559px){
  .nxa{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .nxa .nxa-mark svg{width:32px;height:32px}
  .nxa .nxa-word{font-size:15px}
  .nxa .nxa-ambient{width:380px;height:380px;left:88%;top:70px;opacity:.55}
  .nxa .nxa-hero{margin-top:24px}
  .nxa .nxa-eyebrow{margin-bottom:6px;font-size:11px}
  .nxa .nxa-display{font-size:23px}
  .nxa .nxa-lede{display:none}
  .nxa .nxa-access,.nxa--recover .nxa-access{margin-top:24px}
  .nxa .nxa-panel-title{font-size:23px}
  .nxa .nxa-panel-sub{margin:6px 0 16px;font-size:14px}
  .nxa .nxa-field{margin-top:14px}
  .nxa label{margin-bottom:6px}
  .nxa input{height:48px}
  .nxa .nxa-eye{top:2px;right:2px}
  .nxa .nxa-cta{height:48px;margin-top:20px}
  .nxa .auth-recover,.nxa .nxa-link{margin-top:4px}
  .nxa .nxa-note{padding-top:10px;font-size:12px}
}
/* ---------- Altura minima (barra do navegador, teclado aberto) ---------- */
@media(max-height:480px) and (max-width:559px){
  .nxa{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .nxa .nxa-hero{margin-top:16px}
  .nxa .nxa-access,.nxa--recover .nxa-access{margin-top:16px}
  .nxa .nxa-field{margin-top:12px}
  .nxa .nxa-cta{margin-top:16px}
  .nxa .auth-recover,.nxa .nxa-link{margin-top:2px}
}

/* ---------- Tablet em retrato: coluna unica, mais ar ---------- */
@media(min-width:600px) and (max-width:899px) and (min-height:521px){
  .nxa{padding:40px 56px 28px}
  .nxa .nxa-ambient{width:820px;height:820px;left:76%;top:200px}
  .nxa .nxa-display{font-size:44px}
  .nxa .nxa-lede{font-size:18px}
}

/* ---------- Duas zonas: desktop e celular em paisagem ---------- */
@media(min-width:900px),(min-width:560px) and (max-height:520px){
  .nxa{display:grid;grid-template-columns:minmax(0,58fr) minmax(400px,42fr);padding:0;background:var(--a-bg)}
  .nxa .nxa-brand{
    position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-width:0;
    padding:clamp(28px,4.4vh,44px) clamp(36px,4.6vw,76px) clamp(24px,3.6vh,36px);
    background:
      radial-gradient(52% 50% at 64% 40%,rgba(50,212,188,.12),transparent 72%),
      radial-gradient(70% 60% at 0% 100%,rgba(20,97,122,.30),transparent 72%),
      linear-gradient(160deg,var(--a-bg2),var(--a-bg) 62%);
  }
  .nxa .nxa-ambient{width:max(740px,108vh);height:max(740px,108vh);left:65%;top:38%;opacity:1;
    -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%),linear-gradient(to top right,transparent 24%,#000 46%);
    mask-image:radial-gradient(closest-side,#000 52%,transparent 100%),linear-gradient(to top right,transparent 24%,#000 46%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .nxa .nxa-mark svg{width:40px;height:40px}
  .nxa .nxa-word{font-size:18px}
  .nxa .nxa-hero,.nxa--recover .nxa-hero{display:block;margin-top:auto;max-width:31rem}
  .nxa .nxa-eyebrow{margin-bottom:16px}
  .nxa .nxa-display{font-size:clamp(38px,3.7vw,58px);line-height:1.03;letter-spacing:-.03em}
  .nxa .nxa-lede{margin-top:16px;font-size:clamp(17px,1.35vw,20px)}
  .nxa .nxa-foot{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,7vh,72px);padding-top:18px;border-top:1px solid rgba(154,176,190,.14);color:var(--a-dim);font-size:12.5px}
  .nxa .nxa-foot span+span{padding-left:14px;border-left:1px solid var(--a-line)}

  .nxa .nxa-access,.nxa--recover .nxa-access{
    margin:0;align-items:center;
    padding:clamp(28px,4.4vh,44px) clamp(32px,4vw,72px) clamp(24px,3.6vh,36px);
    background:linear-gradient(180deg,#0F2434,var(--a-zone) 46%,#0B1C2A);
    border-left:1px solid rgba(154,176,190,.13);
    box-shadow:-40px 0 80px -40px rgba(0,0,0,.45);
  }
  /* Ancorado pelo topo: uma mensagem nova nao recentra (nem desloca) o formulario. */
  .nxa .nxa-panel{max-width:368px;margin:max(0px,calc(50vh - 262px)) 0 0}
  .nxa--login .nxa-panel-title{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .nxa--login .nxa-panel-sub{display:block;margin-bottom:28px}
  .nxa input{height:48px;font-size:15px}
  .nxa .nxa-eye{top:2px;right:2px}
  .nxa .nxa-cta{height:48px;font-size:15px;margin-top:24px}
  .nxa .nxa-note{width:100%;max-width:368px;margin:auto 0 0;padding-top:20px}
  .nxa .nxa-prep{max-width:368px;margin:auto 0}
  html[data-step="done"] .nxa .nxa-link{min-height:48px;font-size:15px}
}
@media(min-width:900px) and (max-height:640px){
  .nxa--login .nxa-panel-sub,.nxa .nxa-panel-sub{margin-bottom:18px}
  .nxa .nxa-field{margin-top:12px}
  .nxa .nxa-foot{margin-top:20px}
}

/* ---------- Paisagem de celular: marca compacta + formulario inteiro ---------- */
@media(min-width:560px) and (max-height:520px){
  .nxa{grid-template-columns:minmax(0,40fr) minmax(300px,60fr)}
  .nxa .nxa-brand{padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px calc(22px + env(safe-area-inset-left,0px))}
  .nxa .nxa-ambient{width:460px;height:460px;left:62%;top:44%;opacity:.6}
  .nxa .nxa-mark svg{width:32px;height:32px}
  .nxa .nxa-word{font-size:15px}
  .nxa .nxa-tag,.nxa .nxa-lede,.nxa .nxa-foot,.nxa .nxa-note{display:none}
  .nxa .nxa-eyebrow{margin-bottom:8px;font-size:11px}
  .nxa .nxa-display{font-size:clamp(20px,3.4vw,28px);line-height:1.1}
  .nxa .nxa-access,.nxa--recover .nxa-access{padding:calc(12px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) 24px}
  .nxa .nxa-panel{max-width:400px;margin:0}
  .nxa--login .nxa-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nxa--login .nxa-panel-sub{display:none}
  .nxa .nxa-panel-title{font-size:20px}
  .nxa .nxa-panel-sub{margin:4px 0 12px;font-size:13.5px}
  .nxa .nxa-field{margin-top:10px}
  .nxa label{margin-bottom:5px}
  .nxa input{height:44px;font-size:16px}
  .nxa .nxa-eye{top:0;right:2px}
  .nxa .nxa-cta{height:44px;margin-top:14px}
  .nxa .auth-recover,.nxa .nxa-link{margin-top:2px}
}

@media(prefers-reduced-motion:reduce){
  .nxa *,.nxa *::before,.nxa *::after{transition:none!important}
  .nxa .nxa-spin{animation:none;border-top-color:rgba(4,48,45,.28);border-right-color:var(--a-on-accent)}
  .nxa .nxa-prep .nxa-spin{border-top-color:rgba(154,176,190,.28);border-right-color:var(--a-accent)}
}
@media(forced-colors:active){
  .nxa input,.nxa .nxa-cta,.nxa .nxa-eye{border:1px solid ButtonText}
  .nxa .nxa-ambient{display:none}
}
@media print{.nxa .nxa-ambient{display:none}}

/* UI-11 · Manter conectado neste aparelho (caixa junto do texto, 44 px de alvo, mesma cor de destaque do botão) */
.nxa .nxa-keep{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:auto;min-height:44px;margin:4px 0 2px;padding:0;color:inherit;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none}
.nxa .nxa-keep span{flex:0 1 auto;text-align:left}
.nxa .nxa-keep input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;box-sizing:border-box;width:22px;min-width:0;max-width:22px;height:22px;min-height:0;margin:0;padding:0;box-shadow:none;border:1.5px solid rgba(160,200,235,.45);border-radius:6px;background:transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.nxa .nxa-keep input::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid #04211d;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .12s ease}
.nxa .nxa-keep input:checked{background:#2fd6bd;border-color:#2fd6bd}
.nxa .nxa-keep input:checked::after{transform:rotate(45deg) scale(1)}
.nxa .nxa-keep input:focus-visible{outline:2px solid #2fd6bd;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.nxa .nxa-keep input,.nxa .nxa-keep input::after{transition:none}}