/* Central do Salão — telas de acesso (entrar, criar conta, recuperar e redefinir senha)
   Mesma identidade da página inicial e do painel. Mobile first. */
:root{
  --ink:#1A1622; --ink-2:#2A2433; --text:#1A1622; --text2:#4A4356; --text3:#716A7B;
  --bg:#F6F5F8; --line:#E7E3EC; --line2:#D6D0DD;
  --brand:#E0005F; --brand-2:#B8004E; --brand-soft:#FCE3EE;
  --ok:#138A4B; --ok-bg:#ECF8F1; --err:#C42323; --err-bg:#FDEFEF;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --texto:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);background:#fff;color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ── Estrutura: coluna única no celular, duas colunas no computador ── */
.auth{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.auth-side{background:var(--ink);color:#fff;padding:18px 20px 22px;position:relative;overflow:hidden}
.auth-main{flex:1;display:flex;justify-content:center;padding:28px 20px calc(32px + var(--safe-b));background:#fff}
.auth-box{width:100%;max-width:420px}
@media(min-width:960px){
  .auth{flex-direction:row}
  .auth-side{width:44%;max-width:600px;min-height:100vh;padding:40px 52px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
  .auth-main{align-items:center;padding:48px 40px}
}

/* ── Lado escuro ── */
.marca{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:#fff}
.marca-ico{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;flex-shrink:0}
.marca-ico svg{width:23px;height:23px}
.side-body{display:none}
.side-h{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.2vw,44px);line-height:1.06;letter-spacing:-.03em;margin-bottom:16px;max-width:14ch}
.side-p{color:rgba(255,255,255,.66);font-size:17px;max-width:40ch}
.side-list{list-style:none;margin-top:34px;display:grid;gap:18px}
.side-list li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.side-ico{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#FF5C9A;font-size:15px;font-family:var(--display);font-weight:800}
.side-list strong{display:block;font-size:15.5px;font-weight:600;color:#fff}
.side-list span{font-size:14.5px;color:rgba(255,255,255,.6)}
.side-foot{margin-top:auto;padding-top:28px}
.pill{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;background:rgba(224,0,95,.16);border:1px solid rgba(255,92,154,.28);font-size:14.5px;color:#fff}
.pill i{color:#FF5C9A}
.side-mobile{margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px}
.side-mobile i{color:#FF5C9A}
.side-deco{position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(224,0,95,.32),transparent 65%);pointer-events:none}
@media(min-width:960px){
  .side-body{display:block;margin-top:auto;padding-top:40px}
  .side-mobile{display:none}
  .side-deco{width:520px;height:520px;right:-180px;bottom:-200px}
}

/* ── Formulário ── */
.voltar{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--text2);margin-bottom:26px;padding:6px 0}
.voltar:hover{color:var(--brand-2)}
.form-title{font-family:var(--display);font-weight:800;font-size:clamp(28px,6vw,34px);letter-spacing:-.025em;line-height:1.1}
.form-sub{color:var(--text3);font-size:16px;margin:8px 0 26px}
.secao{font-family:var(--display);font-weight:700;font-size:16px;margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.secao:first-of-type{margin-top:0;padding-top:0;border-top:0}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:14px;font-weight:600;color:var(--text2);margin-bottom:7px}
.fg-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fg-row label{margin-bottom:7px}
.link{font-size:14px;font-weight:600;color:var(--brand-2)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.campo{position:relative}
.campo > i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:15px;pointer-events:none}
.campo input,.campo select{width:100%;height:52px;border:1px solid var(--line2);border-radius:12px;background:#fff;padding:0 16px 0 44px;font:400 16px var(--texto);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23716A7B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.campo input::placeholder{color:#A39CAD}
.campo input:hover,.campo select:hover{border-color:#BDB5C7}
.campo input:focus,.campo select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,0,95,.13)}
.campo:focus-within > i{color:var(--brand)}
.campo .olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;background:none;color:var(--text3);border-radius:10px;cursor:pointer;font-size:15px}
.campo .olho:hover{background:#F3F1F6;color:var(--text)}
.campo.com-olho input{padding-right:52px}
.ajuda{display:block;margin-top:7px;font-size:13px;color:var(--text3);line-height:1.5}
.ajuda strong{color:var(--text2)}

.btn{width:100%;height:54px;border:0;border-radius:999px;background:var(--brand);color:#fff;font:600 16.5px var(--texto);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;transition:background .15s;position:relative}
.btn:hover{background:var(--brand-2)}
.btn:disabled{opacity:.7;cursor:wait}
.btn .spinner{display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
.btn.loading .btn-text{display:none}
.btn.loading .spinner{display:block}
@keyframes gira{to{transform:rotate(360deg)}}

.err{display:none;align-items:flex-start;gap:10px;background:var(--err-bg);border:1px solid #F6C9C9;color:var(--err);border-radius:12px;padding:12px 14px;font-size:14.5px;margin-bottom:18px}
.err.show{display:flex}
.err i{margin-top:3px}
.msg{display:none;border-radius:12px;padding:12px 14px;font-size:14.5px;margin-bottom:18px;border:1px solid}
.msg.ok{background:var(--ok-bg);border-color:#BDE7CF;color:var(--ok)}
.msg.err{display:none;background:var(--err-bg);border-color:#F6C9C9;color:var(--err)}

.separa{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:13.5px;margin:26px 0 18px}
.separa::before,.separa::after{content:'';flex:1;height:1px;background:var(--line)}
.alternativa{text-align:center;font-size:15.5px;color:var(--text2)}
.alternativa a{font-weight:700;color:var(--brand-2)}
.alternativa a:hover{text-decoration:underline;text-underline-offset:3px}
.consent{text-align:center;font-size:13px;color:var(--text3);margin-top:16px;line-height:1.6}
.consent a{color:var(--text2);text-decoration:underline;text-underline-offset:2px}
.rodape-form{display:flex;justify-content:center;gap:20px;margin-top:34px;font-size:13.5px;color:var(--text3)}
.rodape-form a:hover{color:var(--text)}

/* Força da senha */
.pw-strength{display:none;align-items:center;gap:10px;margin-top:9px}
.pw-bars{display:flex;gap:5px;flex:1}
.pw-bar{height:5px;flex:1;border-radius:5px;background:var(--line)}
.pw-bar.weak{background:#E5484D}.pw-bar.ok{background:#F5A524}.pw-bar.strong{background:#2BB673}
.pw-label{font-size:13px;font-weight:600;min-width:46px;text-align:right}

/* Página de senha (recuperar/redefinir) usam .card dentro de .auth-box */
.card{width:100%}