/* Identidade PWS Cloud, extraida do design system do portal
   (ms-portal-frontend/src/styles/pws-theme.css).

   A regra que vale la e vale aqui: a interface e NEUTRA. Verde e sinal, nao
   decoracao -- marca presenca onde ha significado e em nenhum outro lugar.
   Botao e borda nao tem cor. O lima (#aaff09) NUNCA e cor de texto: o
   contraste sobre branco e insuficiente. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --pws-dark:#0a1a09;
  --pws-primary:#243f09;
  --pws-accent:#aaff09;
  --pws-sucesso:#2e7d32;
  --pws-erro:#b3261e;
  --pws-card:#ffffff;
  --pws-superficie:#f8fafc;
  --pws-text:#1a2e19;
  --pws-text-secondary:#6c757d;
  --pws-text-muted:#94a3b8;
  --pws-border:#e2e8f0;
  --pws-btn:#1f2937;
  --pws-btn-hover:#111827;
  --pws-btn-texto:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; min-height:100vh;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--pws-text); background:var(--pws-card);
}

/* Split-screen, como a tela de login do portal. */
.lado-esq{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px; background:var(--pws-card);
}
.lado-dir{
  flex:1; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0a1a09,#1a3a15);
}
.lado-dir::before{
  content:""; position:absolute; width:400px; height:400px; border-radius:50%;
  background:rgba(170,255,9,.03); top:-100px; right:-100px;
}
.lado-dir::after{
  content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:rgba(170,255,9,.02); bottom:-50px; left:-50px;
}

.painel{width:100%; max-width:400px}

/* "Aumente a imagem": a marca e HORIZONTAL (lettering "PWS Cloud"), entao
   dimensionar por altura a deixa larga demais e ela estoura o painel -- foi o
   que aconteceu com height:104px. Dimensionar pela LARGURA respeita o limite
   do painel e cresce o quanto cabe. */
.marca{display:flex; align-items:center; margin-bottom:34px}
.marca img{width:100%; max-width:300px; height:auto; object-fit:contain}

h1{margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-.2px}
.apoio{margin:0 0 28px; font-size:14px; color:var(--pws-text-secondary)}

label{display:block; margin:16px 0 6px; font-size:13px; font-weight:600}
input{
  width:100%; padding:12px 14px; border:1px solid var(--pws-border);
  border-radius:8px; font-size:15px; font-family:inherit;
  background:var(--pws-card); color:inherit;
}
input:focus{outline:2px solid var(--pws-primary); outline-offset:-1px; border-color:transparent}
input[type=file]{padding:10px}
#codigo{letter-spacing:12px; text-align:center; font-size:26px; font-weight:700}

button{
  width:100%; margin-top:24px; padding:13px 20px; border:none; border-radius:8px;
  background:var(--pws-btn); color:var(--pws-btn-texto);
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .2s;
}
button:hover:not(:disabled){background:var(--pws-btn-hover)}
button:disabled{opacity:.55; cursor:not-allowed}
button.link{
  width:auto; margin:12px 0 0; padding:0; background:none; color:var(--pws-primary);
  font-size:13px; font-weight:500; text-decoration:underline;
}
button.link:hover:not(:disabled){background:none}

.aviso{margin-top:18px; padding:11px 13px; border-radius:8px; font-size:13.5px; display:none}
.aviso.erro{display:block; background:#fdeceb; color:var(--pws-erro)}
/* Verde como SINAL -- aqui ha significado: deu certo. */
.aviso.ok{display:block; background:#eef7ee; color:var(--pws-sucesso)}

.passo{display:none}
.passo.ativo{display:block}
.rodape{margin-top:28px; padding-top:18px; border-top:1px solid var(--pws-border);
        font-size:12.5px; color:var(--pws-text-muted)}

@media (max-width:860px){
  .lado-dir{display:none}
  .lado-esq{padding:28px 20px}
  .marca img{max-width:240px}
}