/* AUTH-UI-0 — fundação visual do layout público de autenticação JANUS
   (_JanusAuthLayout). Independente do Shell autenticado (janus.css/shell.css) e do
   layout público antigo do template: carrega apenas os tokens globais + este arquivo. */
body.janus-auth{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--janus-text,#f1f5f3);background:var(--janus-bg,#090f12);color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif}
body.janus-auth *{box-sizing:border-box}
body.janus-auth a{color:var(--janus-primary,#00c99a)}
body.janus-auth a:hover{color:var(--janus-success,#55d99a)}
body.janus-auth :is(a,button,input):focus-visible{outline:2px solid var(--janus-primary,#00c99a);outline-offset:2px}

/* Moldura: área de branding/atmosfera + área funcional (item 4). */
.jauth-shell{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:0}

.jauth-brand{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;padding:3rem;overflow:hidden;isolation:isolate}
.jauth-brand::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--janus-bg,#090f12) 0%,rgb(9 15 18 / 60%) 45%,rgb(9 15 18 / 20%) 100%),url('/images/brand/janus-mountains.png') center/cover no-repeat}
.jauth-brand-mark{display:flex;align-items:center;gap:.65rem}
.jauth-brand-mark img{width:44px;height:44px;flex:0 0 44px}
.jauth-brand-mark span{font-family:Georgia,serif;font-size:1.4rem;letter-spacing:.08em}
.jauth-brand-tagline{margin:0;font-family:Georgia,serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.18}
.jauth-brand-tagline em{font-style:normal;color:var(--janus-primary,#00c99a)}
.jauth-brand-sub{margin:0;color:var(--janus-text-muted,#9ca9a4);font-size:.92rem;max-width:24rem}

.jauth-content{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}

.jauth-footer{padding:.9rem 1.5rem;text-align:center;font-size:.66rem;letter-spacing:.1em;color:var(--janus-text-muted,#9ca9a4);border-top:1px solid var(--janus-border,#253239)}
.jauth-footer-legal{display:block;margin-top:.35rem;letter-spacing:normal;text-transform:none;font-size:.72rem}
.jauth-footer-legal a{color:var(--janus-text-muted,#9ca9a4);text-decoration:underline}
.jauth-footer-legal a:hover{color:var(--janus-text,#f1f5f3)}

/* Card funcional (formulários + telas de feedback). */
.jauth-card{width:100%;max-width:420px;background:linear-gradient(145deg,#111f24,#0d191d);border:1px solid var(--janus-border,#253239);border-radius:var(--janus-radius,12px);padding:2rem;box-shadow:0 4px 24px rgb(0 0 0 / 25%);color:var(--janus-text,#f1f5f3)}
.jauth-card h1{font-size:1.4rem;font-weight:650;letter-spacing:-.01em;margin:0 0 .6rem;color:var(--janus-text,#f1f5f3)}
.jauth-card>p{color:var(--janus-text-muted,#9ca9a4);font-size:.88rem;line-height:1.6;margin:0 0 1.5rem}
.jauth-status-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--janus-primary-soft,rgba(0,201,154,.12));color:var(--janus-primary,#00c99a);margin-bottom:1rem}
.jauth-card.is-warning .jauth-status-icon{background:var(--janus-warning-soft,rgba(230,184,92,.11));color:var(--janus-warning,#e6b85c)}
.jauth-field{margin-bottom:1.1rem}
.jauth-field label{display:block;font-size:.8rem;color:var(--janus-text-muted,#9ca9a4);margin-bottom:.4rem}
.jauth-field input{width:100%;padding:.65rem .8rem;border-radius:8px;border:1px solid var(--janus-border-strong,#3a4c55);background:var(--janus-surface-secondary,#172126);color:var(--janus-text,#f1f5f3);font-size:.9rem}
.jauth-field input:focus{outline:none;border-color:var(--janus-primary,#00c99a);box-shadow:0 0 0 3px rgba(0,201,154,.16)}
.jauth-forgot{display:inline-block;margin-top:.5rem;font-size:.76rem;color:var(--janus-text-muted,#9ca9a4);text-decoration:none}
.jauth-forgot:hover{color:var(--janus-primary,#00c99a)}
.jauth-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--janus-text-muted,#9ca9a4);margin:0 0 1.35rem;cursor:pointer;user-select:none}
.jauth-checkbox input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--janus-primary,#00c99a)}
.jauth-card .field-validation-error{display:block;color:var(--janus-danger,#f06f75);font-size:.76rem;margin-top:.35rem}
.jauth-validation-summary{color:var(--janus-danger,#f06f75);font-size:.82rem;margin:0 0 1rem;list-style:none;padding:0}
.jauth-validation-summary li{margin-bottom:.3rem}
.jauth-validation-summary:empty{display:none;margin:0}
.jauth-submit{display:block;width:100%;padding:.75rem;border:none;border-radius:8px;background:var(--janus-primary,#00c99a);color:#06211b;font-weight:650;font-size:.92rem;cursor:pointer;text-align:center;text-decoration:none}
.jauth-submit:hover{background:var(--janus-primary-hover,#00b38a);color:#06211b}
/* JANUS V2 AUTH FINAL — bug encontrado ao migrar EmailConfirmado (que reaproveita o CTA de
   _JauthStatusCard, renderizado como <a class="jauth-submit">, mesmo padrão já usado por
   RedefinicaoSenhaConcluida/RedefinicaoSenhaIndisponivel): a regra genérica
   "body.janus-auth a{color:var(--janus-primary)}" é mais específica que ".jauth-submit{color:
   #06211b}" (2 seletores de tipo + 1 classe vs. 1 classe) e vencia, deixando o texto do botão
   praticamente invisível (teal sobre teal). Estas duas regras igualam a especificidade da
   regra genérica para o texto do CTA realmente ficar escuro/legível sobre o fundo emerald,
   nos estados normal e hover — nenhuma outra tela/regra é afetada. */
body.janus-auth a.jauth-submit{color:#06211b}
body.janus-auth a.jauth-submit:hover{color:#06211b}
.jauth-links{margin-top:1.25rem;font-size:.82rem;text-align:center}
.jauth-links a{color:var(--janus-primary,#00c99a);text-decoration:none}
.jauth-links a:hover{text-decoration:underline}
.jauth-hint{margin:1.25rem 0 0;font-size:.78rem;text-align:center;color:var(--janus-text-muted,#9ca9a4)}
.jauth-legal-inline{margin:1rem 0 0;font-size:.72rem;text-align:center;color:var(--janus-text-muted,#9ca9a4)}
.jauth-legal-inline a{color:var(--janus-text-muted,#9ca9a4);text-decoration:underline}
.jauth-legal-inline a:hover{color:var(--janus-text,#f1f5f3)}

/* JANUS V2 — Confirmar e-mail (AUTH FINAL): o contrato real continua um único input ligado a
   Codigo (maxlength 6, inputmode numeric, autocomplete one-time-code) — nenhum binding/JS novo.
   Esta classe só reforça a leitura como "código de verificação": centralizado, fonte maior e
   letter-spacing generoso entre os dígitos. */
.jauth-code-input{text-align:center;font-size:1.6rem;font-weight:650;letter-spacing:.6em;text-indent:.6em}

/* Responsividade (item 11): desktop 2 colunas; tablet reduz a área decorativa a uma
   faixa compacta; mobile prioriza o conteúdo e reaproveita a arte como pano de fundo comum. */
@media (max-width:1100px){
    .jauth-shell{grid-template-columns:1fr}
    .jauth-brand{min-height:200px;padding:2rem;justify-content:center}
    .jauth-brand-sub{display:none}
}
@media (max-width:600px){
    .jauth-brand{display:none}
    .jauth-content{min-height:100vh;background:linear-gradient(180deg,rgb(9 15 18 / 93%),rgb(9 15 18 / 97%)),url('/images/brand/janus-mountains.png') center/cover no-repeat}
    .jauth-card{padding:1.5rem}
}

/* JANUS V2 — Login (variante "is-login"): o hero janus-login-hero.png.png já contém a
   marca, o headline e o rodapé institucional. Não é a grade 2 colunas das demais telas
   de auth — a imagem ocupa a tela inteira e o card funcional flutua sobre a direita. */
body.janus-auth.is-login{min-height:100vh;min-height:100dvh}
.jauth-shell.is-login{display:flex;position:relative;grid-template-columns:none;min-height:100vh;min-height:100dvh;isolation:isolate;overflow:hidden}
/* O asset (1536x1024, proporção 3:2 = 1.5) é mais "quadrado" que a maioria das telas
   widescreen/ultrawide. background-size:contain evita crop mas, em qualquer viewport bem
   mais larga que 1.5:1, sobra muita faixa grafite nas laterais (o lado que não é o
   limitante da escala). background-size:cover elimina as faixas (a imagem sempre cobre a
   caixa inteira, em ambas as dimensões), mas quando a viewport é mais larga que 1.5:1 o
   corte necessário é só vertical (a largura já bate exatamente com a da tela nesse caso) —
   então usamos cover com a imagem ancorada no topo (em vez de centralizada): a
   marca/headline (topo) nunca são cortados, e o corte, quando inevitável, sobra só para a
   citação/rodapé (base), que a spec trata como a parte menos prioritária da composição.
   Tablet/mobile mantêm a mesma estratégia nos breakpoints abaixo. */
.jauth-shell.is-login::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--janus-bg,#090f12) url('/images/brand/janus-login-hero.png.png') top center/cover no-repeat}
.jauth-shell.is-login .jauth-content{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:3rem clamp(1.5rem,6vw,6rem)}

.jauth-card.is-login{max-width:480px;background:rgba(9,15,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,201,154,.28);box-shadow:0 12px 42px rgb(0 0 0 / 45%)}
.jauth-card.is-login h1{font-family:Georgia,serif;font-weight:400;font-size:1.7rem}
.jauth-card.is-login .jauth-links{margin-top:1.5rem}

/* Ícones internos dos campos e botão de mostrar/ocultar senha (itens 8/9).
   O wrapper precisa ser um bloco (não inline) com largura própria de 100%: assim ele
   sempre define uma containing block previsível e do tamanho exato do input para o
   botão position:absolute, independente de zoom, autofill do navegador ou peculiaridades
   de caixa inline — eliminando qualquer chance de o botão "flutuar" fora do campo. */
.jauth-input-wrap{position:relative;display:block;width:100%}
.jauth-input-icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--janus-text-muted,#9ca9a4)}
.jauth-field-icon input{padding-left:2.5rem}
.jauth-field-icon input[data-janus-password-input]{padding-right:2.75rem}
.jauth-password-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;border:none;background:transparent;color:var(--janus-text-muted,#9ca9a4);cursor:pointer;border-radius:6px}
.jauth-password-toggle:hover{color:var(--janus-primary,#00c99a)}
.jauth-password-toggle:focus-visible{outline:2px solid var(--janus-primary,#00c99a);outline-offset:2px}
/* Estado visual dos dois ícones controlado só por CSS via aria-pressed (o JS apenas
   alterna esse atributo). O atributo HTML `hidden` não foi usado para isso porque, neste
   navegador, não reflete de forma confiável em elementos <svg> (getComputedStyle segue
   "block" mesmo com o atributo presente) — display:none em CSS de autor não tem essa
   limitação e funciona igual em qualquer elemento. */
.jauth-password-toggle [data-icon-hide]{display:none}
.jauth-password-toggle[aria-pressed="true"] [data-icon-show]{display:none}
.jauth-password-toggle[aria-pressed="true"] [data-icon-hide]{display:block}

.jauth-submit-arrow{display:flex;align-items:center;justify-content:center;gap:.5rem}

@media (max-width:1100px){
    .jauth-shell.is-login .jauth-content{justify-content:center;padding:2.5rem 1.5rem}
    .jauth-shell.is-login::before{background:linear-gradient(180deg,rgb(9 15 18 / 35%),rgb(9 15 18 / 72%)),url('/images/brand/janus-login-hero.png.png') center/cover no-repeat}
}
@media (max-width:600px){
    .jauth-shell.is-login::before{background:linear-gradient(180deg,rgb(9 15 18 / 55%),rgb(9 15 18 / 88%)),url('/images/brand/janus-login-hero.png.png') center/cover no-repeat}
    .jauth-card.is-login{max-width:none;width:100%;padding:1.5rem}
}

/* JANUS V2 — Cadastro (variante "is-cadastro"): mesma família visual do Login — reaproveita
   o mesmo hero (janus-login-hero.png.png, item 6 da spec: preferir o asset já existente a
   gerar uma nova arte pesada) — mas não é uma cópia exata dele. O formulário de cadastro tem
   mais campos (Nome, Email, Senha, Confirmar senha) do que o de Login e por isso o card é
   naturalmente mais alto, podendo ultrapassar a altura da viewport em telas baixas. Por isso,
   ao contrário de ".jauth-shell.is-login::before" (position:absolute, dimensionado pela altura
   do próprio .jauth-shell, que cresce junto com o conteúdo), aqui o hero usa position:fixed:
   fica sempre ancorado ao tamanho da viewport, nunca ao do documento — a matemática do
   background-size:cover não muda quando o card rola, então a marca/headline (canto superior
   esquerdo da imagem) nunca correm risco de ser cortadas por um card mais alto. Um gradiente
   adicional escurece progressivamente o lado direito, onde o card flutua, reforçando a
   legibilidade de um formulário maior sem repetir literalmente o overlay (ausente) do Login. */
.jauth-shell.is-cadastro{display:flex;position:relative;grid-template-columns:none;min-height:100vh;min-height:100dvh;isolation:isolate}
.jauth-shell.is-cadastro::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(9,15,18,0) 42%,rgba(9,15,18,.62) 72%),var(--janus-bg,#090f12) url('/images/brand/janus-login-hero.png.png') top center/cover no-repeat}
.jauth-shell.is-cadastro .jauth-content{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:3rem clamp(1.5rem,6vw,6rem)}

.jauth-card.is-cadastro{max-width:480px;background:rgba(9,15,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,201,154,.28);box-shadow:0 12px 42px rgb(0 0 0 / 45%)}
.jauth-card.is-cadastro h1{font-family:Georgia,serif;font-weight:400;font-size:1.7rem}
.jauth-card.is-cadastro .jauth-links{margin-top:1.5rem}
.jauth-password-hint{margin:.4rem 0 0;font-size:.74rem;line-height:1.5;color:var(--janus-text-muted,#9ca9a4)}

@media (max-width:1100px){
    .jauth-shell.is-cadastro .jauth-content{justify-content:center;padding:2.5rem 1.5rem}
    .jauth-shell.is-cadastro::before{background:linear-gradient(180deg,rgb(9 15 18 / 40%),rgb(9 15 18 / 78%)),url('/images/brand/janus-login-hero.png.png') top center/cover no-repeat}
}
@media (max-width:600px){
    .jauth-shell.is-cadastro::before{background:linear-gradient(180deg,rgb(9 15 18 / 60%),rgb(9 15 18 / 92%)),url('/images/brand/janus-login-hero.png.png') top center/cover no-repeat}
    .jauth-card.is-cadastro{max-width:none;width:100%;padding:1.5rem}
}