/* ============================================================
   AUTENTICAÇÃO v3 — oxy_auth/static/oxy_auth/auth_v3.css
   Login, cadastro, recuperação de senha e complemento de perfil.

   Substitui login.css. Não usa Font Awesome, jQuery nem Select2:
   ícones são SVG embutido e a busca de cliente é nativa.

   TOKENS — derivados da marca oficial (bettertech.com.br)
   --better-magenta #b71f73 · light #d4267f · dark #8a1757
   --better-dark #121212 · --better-dark-light #1a1a2e
   ============================================================ */
:root{
  --brand:#b71f73;
  --brand-soft:#d4267f;
  --brand-strong:#8a1757;
  --brand-tint:#fce4ec;
  --tag-fg:#b71f73;

  --navy:#0d2238;
  --navy-2:#14304b;
  --navy-3:#1d4463;

  --bg:#f6f4f7;
  --surface:#ffffff;
  --surface-2:#faf8fa;
  --line:#e7e1e8;
  --line-strong:#d6cdd8;
  --text:#191420;
  --muted:#6b6373;
  --faint:#9b93a3;

  --ok:#15803d;
  --crit:#b91c1c;
  --crit-bg:#fee2e2;

  --r:10px;
  --sh-1:0 1px 2px rgba(25,20,32,.06),0 1px 3px rgba(25,20,32,.04);
  --sh-2:0 4px 14px rgba(25,20,32,.09);
  --ff:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121016; --surface:#1a1721; --surface-2:#211d2a;
    --line:#2c2635; --line-strong:#3a3345;
    --text:#f2eef5; --muted:#a79fb0; --faint:#7b7286;
    --brand-tint:#3a1329; --tag-fg:#f9a8cf;
    --ok:#4ade80; --crit:#f87171; --crit-bg:#3a1416;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 4px 14px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#121016; --surface:#1a1721; --surface-2:#211d2a;
  --line:#2c2635; --line-strong:#3a3345;
  --text:#f2eef5; --muted:#a79fb0; --faint:#7b7286;
  --brand-tint:#3a1329; --tag-fg:#f9a8cf;
  --ok:#4ade80; --crit:#f87171; --crit-bg:#3a1416;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#f6f4f7; --surface:#ffffff; --surface-2:#faf8fa;
  --line:#e7e1e8; --line-strong:#d6cdd8;
  --text:#191420; --muted:#6b6373; --faint:#9b93a3;
  --brand-tint:#fce4ec; --tag-fg:#b71f73;
  --ok:#15803d; --crit:#b91c1c; --crit-bg:#fee2e2;
  --sh-1:0 1px 2px rgba(25,20,32,.06),0 1px 3px rgba(25,20,32,.04);
  --sh-2:0 4px 14px rgba(25,20,32,.09);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:650;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-soft);outline-offset:2px;border-radius:5px}

/* ============================================================
   ESTRUTURA
   Desktop: formulário à esquerda, marca à direita.
   Celular: a ORDEM INVERTE — formulário primeiro (ver notas).
   ============================================================ */
.tela{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 1fr}

/* ---------- COLUNA DO FORMULÁRIO ---------- */
.lado-form{display:flex;flex-direction:column;padding:26px 32px;background:var(--bg);min-width:0}
.form-topo{display:flex;align-items:center;gap:10px}
.marca{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;letter-spacing:-.02em}
.marca em{font-style:normal;color:var(--brand)}
.marca-mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-soft),var(--brand-strong));
  color:#fff;font-size:12px;font-weight:800}
.btn-tema{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted);
  transition:color .15s,border-color .15s}
.btn-tema:hover{color:var(--brand);border-color:var(--brand)}

.form-meio{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 0}
.form{width:100%;max-width:372px}
.form h1{font-size:26px;line-height:1.15}
.form .sub{font-size:13px;color:var(--muted);margin-top:5px;margin-bottom:16px}

.campo{margin-bottom:11px}
.campo label{display:block;font-size:11.5px;font-weight:650;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.entrada{position:relative;display:flex;align-items:center}
.entrada > svg{position:absolute;left:12px;color:var(--faint);pointer-events:none}
.entrada input{width:100%;height:44px;padding:0 12px 0 38px;font-size:14px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  color:var(--text);transition:border-color .15s,box-shadow .15s}
.entrada input::placeholder{color:var(--faint)}
.entrada input:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.entrada.tem-olho input{padding-right:42px}
.olho{position:absolute;right:6px;width:32px;height:32px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--faint);border-radius:7px}
.olho:hover{color:var(--brand)}

.linha-ajuda{display:flex;align-items:center;margin:-4px 0 16px}
.linha-ajuda a{margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600;text-decoration:none}
.linha-ajuda a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:44px;
  border:0;border-radius:var(--r);font-size:14px;font-weight:650;cursor:pointer;
  background:var(--brand);color:#fff;transition:background .15s;text-decoration:none}
.btn:hover{background:var(--brand-strong)}
.btn:disabled{opacity:.65;cursor:default}
.btn-google{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);
  font-weight:600}
.btn-google:hover{background:var(--surface-2);border-color:var(--line-strong)}

.ou{display:flex;align-items:center;gap:12px;margin:16px 0;
  font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}

.criar{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}
.criar a{color:var(--brand);font-weight:650;text-decoration:none}
.criar a:hover{text-decoration:underline}

/* mensagem de erro do formulário */
.erro{display:none;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r);
  background:var(--crit-bg);color:var(--crit);font-size:12.5px;margin-bottom:16px;line-height:1.45}
.erro.on{display:flex}
.erro svg{flex-shrink:0;margin-top:1px}
.campo.invalido .entrada input{border-color:var(--crit)}
.campo.invalido .entrada input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 16%,transparent)}

.form-rodape{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--faint)}
.form-rodape a,.form-rodape button{color:var(--faint);text-decoration:none;background:none;
  border:0;padding:0;cursor:pointer;font-size:11.5px}
.form-rodape a:hover,.form-rodape button:hover{color:var(--brand)}
.form-rodape .versao{margin-left:auto;font-weight:700;letter-spacing:.03em;padding:2px 8px;
  border-radius:99px;background:var(--brand-tint);color:var(--tag-fg)}

/* ---------- PAINEL DA MARCA ---------- */
.lado-marca{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:44px;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 52%,var(--navy-3) 100%)}
/* brilho magenta atrás do conteúdo — o accent da marca aparecendo sem gritar */
.lado-marca::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  top:-180px;right:-200px;pointer-events:none;
  background:radial-gradient(circle,rgba(212,38,127,.30) 0%,rgba(212,38,127,0) 68%)}
.lado-marca::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  bottom:-190px;left:-140px;pointer-events:none;
  background:radial-gradient(circle,rgba(29,68,99,.9) 0%,rgba(29,68,99,0) 70%)}
/* malha de nós ligados: o produto é integração, então o motivo vem do assunto */
.malha{position:absolute;inset:0;opacity:.09;pointer-events:none}
.marca-conteudo{position:relative;max-width:430px}
.logo-emp{height:58px;width:auto;max-width:100%;margin-bottom:26px}
.lado-marca h2{font-size:27px;line-height:1.2;letter-spacing:-.025em}
.lado-marca h2 span{color:#f9a8cf}
.lado-marca .desc{font-size:14px;line-height:1.6;color:rgba(255,255,255,.76);margin-top:12px}
.modulos{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.modulo{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  font-size:12.5px;font-weight:550;white-space:nowrap}
.modulo svg{opacity:.85}
.marca-rodape{position:relative;margin-top:32px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);display:flex;align-items:center;gap:14px;
  font-size:12px;color:rgba(255,255,255,.62)}
.marca-rodape a{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.82);
  text-decoration:none;font-weight:550}
.marca-rodape a:hover{color:#fff}
.seguro{display:inline-flex;align-items:center;gap:5px;margin-left:auto}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .tela{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .lado-marca{padding:36px}
  .lado-marca h2{font-size:23px}
}
@media (max-width:860px){
  /* ORDEM INVERTIDA: hoje o painel vem primeiro e joga o formulário
     para fora da tela no celular. Aqui o formulário é o primeiro. */
  .tela{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .lado-form{order:1;padding:20px 20px 26px}
  .lado-marca{order:2;padding:26px 20px;justify-content:flex-start}
  .lado-marca::before{width:380px;height:380px;top:-150px;right:-140px}
  .lado-marca::after{display:none}
  .marca-conteudo{max-width:none}
  .logo-emp{height:42px;margin-bottom:18px}
  .lado-marca h2{font-size:20px}
  .lado-marca .desc{font-size:13px;margin-top:9px}
  .modulos{margin-top:18px}
  .marca-rodape{margin-top:22px;padding-top:14px}
  .form-meio{padding:22px 0 8px}
}
@media (max-width:400px){
  .lado-form{padding:16px 14px 20px}
  .lado-marca{padding:22px 14px}
  .form h1{font-size:23px}
  .modulo{font-size:11.5px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   CADASTRO — o que difere do login
   9 campos numa coluna davam 1.181px de altura. Aqui eles se
   agrupam em pares e em três seções nomeadas.
   ============================================================ */
.form.largo{max-width:560px}
.form.largo h1{font-size:24px}

.secao{margin-bottom:15px}
.secao-t{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
.secao-t::after{content:"";flex:1;height:1px;background:var(--line)}
.secao-t .n{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--tag-fg);font-size:10px;font-weight:800;letter-spacing:0}

.par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo .dica{display:block;font-size:11px;color:var(--faint);margin-top:4px}
.campo .opcional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint)}

/* medidor de força — o cadastro atual não tem nenhum */
.forca{margin-top:7px}
.forca-barra{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.forca-barra i{display:block;height:100%;width:0;border-radius:99px;background:var(--crit);
  transition:width .2s,background .2s}
.forca-txt{display:block;font-size:11px;color:var(--faint);margin-top:4px}

/* select de cliente com busca, sem Select2/jQuery */
.busca-sel{position:relative}
.busca-sel > svg{position:absolute;left:12px;top:14px;color:var(--faint);pointer-events:none}
.busca-sel input{width:100%;height:44px;padding:0 12px 0 38px;font-size:14px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text)}
.busca-sel input:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.opcoes{position:absolute;left:0;right:0;top:48px;z-index:20;max-height:232px;overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--sh-2);display:none}
.opcoes.on{display:block}
.opcoes .grupo{padding:7px 12px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);font-weight:700;background:var(--surface-2);position:sticky;top:0}
.opcoes button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;
  cursor:pointer;font-size:13px;color:var(--text)}
.opcoes button:hover,.opcoes button:focus{background:var(--brand-tint);outline:0}
.opcoes button small{display:block;font-size:11px;color:var(--faint)}
.opcoes .vazio{padding:16px 12px;text-align:center;color:var(--faint);font-size:12.5px}
.escolhido{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r);
  border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.escolhido b{font-size:13px;font-weight:650;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escolhido small{font-size:11px;color:var(--faint);display:block;font-weight:400}
.escolhido button{border:0;background:none;cursor:pointer;color:var(--faint);padding:2px;display:flex}
.escolhido button:hover{color:var(--crit)}

/* aviso de aprovação — hoje o usuário só descobre depois de enviar */
.aviso{display:flex;gap:9px;padding:11px 13px;border-radius:var(--r);
  background:var(--brand-tint);font-size:12.5px;line-height:1.45;color:var(--text);margin-bottom:15px}
.aviso svg{color:var(--brand);flex-shrink:0;margin-top:1px}

@media (max-width:860px){
  .form.largo{max-width:none}
}
@media (max-width:520px){
  .par{grid-template-columns:1fr;gap:0}
}

/* ---------- MENSAGENS DO DJANGO E ERROS DE CAMPO ---------- */
.msg{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r);
  font-size:12.5px;line-height:1.45;margin-bottom:14px}
.msg svg{flex-shrink:0;margin-top:1px}
.msg-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.msg-erro{background:var(--crit-bg);color:var(--crit)}
.msg-info{background:var(--brand-tint);color:var(--text)}
.msg-info svg{color:var(--brand)}
.erro-campo{display:block;font-size:11.5px;color:var(--crit);margin-top:4px}

/* ---------- TELAS DE AVISO (e-mail enviado, senha alterada) ---------- */
.aviso-icone{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:16px;background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.aviso-icone.info{background:var(--brand-tint);color:var(--brand)}
.voltar{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;
  color:var(--muted);text-decoration:none;font-weight:600}
.voltar:hover{color:var(--brand)}