/* ============================================================
   Balan7 · Cobrança — Telas de autenticação (login / reset)
   Direção: "fintech de confiança" — esmeralda profundo, serifa
   editorial (Fraunces) + sans moderna (Manrope). CSP-safe: fontes
   self-hosted, sem requisições externas.
   ============================================================ */

/* -------- Fontes variáveis (self-hosted, subset latin) -------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces.woff2') format('woff2-variations');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope.woff2') format('woff2');}

:root{
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --ink:#0b1f18; --ink-2:#33463e; --ink-3:#6b7d76;
  --emerald:#0f9d63; --emerald-2:#0b7f50; --emerald-lift:#12b374;
  --card:#ffffff; --field:#f4f8f6; --line:#dde7e2; --line-2:#cbd8d2;
  --glow:rgba(18,179,116,.28);
  --gold:#c9962f;
}

*{box-sizing:border-box}
html,body{height:100%}
body.auth{
  margin:0; font-family:var(--sans); color:var(--ink);
  min-height:100dvh; display:grid; place-items:center; padding:32px 24px;
  position:relative; overflow-x:hidden;
  background:
    radial-gradient(1100px 600px at 12% -8%, #0e5a3e 0%, transparent 55%),
    radial-gradient(900px 700px at 108% 116%, #0a684a 0%, transparent 50%),
    linear-gradient(155deg,#06251b 0%,#08301f 46%,#052018 100%);
  -webkit-font-smoothing:antialiased;
}
/* textura: grade de pontos + grão sutil */
body.auth::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:22px 22px; mask-image:radial-gradient(80% 70% at 50% 40%,#000 30%,transparent 100%);
}
body.auth::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* glow que respira, bem lento */
.aurora{position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(90px);opacity:.5;pointer-events:none;z-index:0;}
.aurora.a{top:-160px;left:-120px;background:#13b877;animation:drift 16s ease-in-out infinite}
.aurora.b{bottom:-180px;right:-140px;background:#0aa0e0;opacity:.28;animation:drift 20s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,22px) scale(1.08)}}

/* -------- Cartão -------- */
.auth-card{
  position:relative; z-index:2; width:100%; max-width:452px;
  background:var(--card); border-radius:22px; padding:40px 40px 30px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 30px 70px -25px rgba(2,26,18,.65),
             0 6px 22px -10px rgba(2,26,18,.4);
  border:1px solid rgba(255,255,255,.7);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* stagger helper */
.st{opacity:0;animation:up .6s cubic-bezier(.2,.7,.2,1) forwards}
.st.d1{animation-delay:.10s}.st.d2{animation-delay:.18s}.st.d3{animation-delay:.26s}
.st.d4{animation-delay:.34s}.st.d5{animation-delay:.42s}.st.d6{animation-delay:.50s}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* -------- Marca -------- */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.mark{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--emerald-lift),var(--emerald-2));
  box-shadow:0 8px 18px -8px rgba(15,157,99,.7), 0 0 0 1px rgba(255,255,255,.25) inset;}
.mark svg{width:26px;height:26px}
.brand-name{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1}
.brand-name b{color:var(--emerald)}
.brand-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* -------- Slogan -------- */
.slogan{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.12;
  letter-spacing:-.015em;color:var(--ink);margin:6px 0 8px}
.slogan em{font-style:italic;color:var(--emerald-2)}
.sub{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0 0 24px;max-width:34ch}

/* -------- Flash -------- */
.flash{font-size:13.5px;padding:11px 14px;border-radius:11px;margin-bottom:14px;font-weight:500;
  display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.flash svg{flex:none;margin-top:1px}
.flash-info,.flash-success{background:#e7f6ef;color:#0a6a44;border:1px solid #bfe6d3}
.flash-warning,.flash-warn{background:#fdf4e3;color:#8a5a00;border:1px solid #f2dcae}
.flash-danger,.flash-erro,.flash-error{background:#fdecec;color:#a12626;border:1px solid #f4c9c9}

/* -------- Form -------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em}
.control{position:relative;display:flex;align-items:center}
.control .ico{position:absolute;left:14px;color:var(--ink-3);pointer-events:none;display:flex}
.control input{
  width:100%;height:50px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);
  padding:0 14px 0 42px;font-family:var(--sans);font-size:15px;color:var(--ink);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.control input::placeholder{color:#9fb0a9}
.control input:focus{outline:none;border-color:var(--emerald);background:#fff;box-shadow:0 0 0 4px var(--glow)}
.control input:focus + .ico,.control:focus-within .ico{color:var(--emerald)}
.toggle-pw{position:absolute;right:8px;height:36px;width:36px;border:0;background:transparent;border-radius:9px;
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:color .15s,background .15s}
.toggle-pw:hover{color:var(--emerald);background:#eef6f1}

.row-between{display:flex;justify-content:flex-end;margin:-4px 0 20px}
.link{color:var(--emerald-2);font-size:13px;font-weight:600;text-decoration:none;transition:color .15s}
.link:hover{color:var(--emerald);text-decoration:underline}

.btn-entrar{
  width:100%;height:52px;border:0;border-radius:13px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(150deg,var(--emerald-lift),var(--emerald-2));
  box-shadow:0 12px 24px -12px rgba(11,127,80,.85), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition:transform .12s, box-shadow .2s, filter .2s;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn-entrar:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 30px -14px rgba(11,127,80,.95)}
.btn-entrar:active{transform:translateY(0)}
.btn-entrar svg{transition:transform .2s}
.btn-entrar:hover svg{transform:translateX(3px)}

/* -------- Selos de confiança -------- */
.trust{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.trust span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.trust svg{color:var(--emerald)}

.auth-foot{position:relative;z-index:2;margin-top:22px;text-align:center;color:rgba(233,245,239,.72);
  font-size:12px;line-height:1.7}
.auth-foot a{color:rgba(255,255,255,.9);text-decoration:none;font-weight:600}
.auth-foot a:hover{text-decoration:underline}
.auth-foot .sep{opacity:.4;margin:0 7px}

/* -------- Responsivo -------- */
@media (max-width:480px){
  body.auth{padding:16px}
  .auth-card{padding:30px 24px 24px;border-radius:18px}
  .slogan{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .st,.auth-card{opacity:1!important;transform:none!important}
}