/* Auth pages (login/register/forgot-password/reset-password) — sm-* design
   system. Page-scoped .auth-* classes; the hero uses the exact hard-stop +
   three-layer wave recipe as the simulador hero (.sim-hero in
   simulador-wizard.css) so every "header band" on the site reads the same
   way. Panel/field recipes mirror .sim-panel/.sim-field but are kept local
   here (not a <link> to simulador-wizard.css) since these pages don't need
   the rest of that file's wizard-specific payload — see the "Applying this
   outside the public site" note in .claude/skills/design-system-sm. */

.auth-page{
  min-height:100vh;
  background:var(--sm-paper);
  font-family:var(--sm-sans);
  padding-bottom:80px;
}

/* Slightly more padding above than below — mathematically-equal padding
   still read as too high, since the nav pill visually eats into the top of
   the orange band even though it doesn't occupy layout space. */
.auth-hero{
  position:relative;
  background:linear-gradient(to bottom,var(--sm-orange-500) 0,var(--sm-orange-500) calc(100% - 60px),var(--sm-paper) calc(100% - 60px));
  color:#fff6ee;
  min-height:320px;
  padding:112px 32px 70px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  text-align:center;
}
.auth-hero-inner{max-width:640px;margin:0 auto;position:relative;z-index:2;}
.auth-hero h1{margin:0;font-size:38px;font-weight:900;letter-spacing:-.6px;line-height:1.1;color:#fff;text-shadow:0 4px 18px rgba(40,15,0,.3);}
.auth-hero p{margin:10px 0 0;color:#ffe2ca;font-size:15px;font-weight:800;letter-spacing:.2px;}
.auth-hero-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:60px;transform:scaleY(-1);z-index:1;}

.auth-wrap{max-width:1200px;margin:0 auto;padding:36px 20px 0;display:flex;justify-content:center;}

.auth-panel{
  width:100%;max-width:460px;
  background:var(--sm-paper-raised);border:1px solid var(--sm-line);border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow);padding:32px 30px 28px;
}
.auth-panel.auth-panel-wide{max-width:620px;}

.auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.auth-field label{font-size:12px;font-weight:700;color:var(--sm-ink-soft);}
.auth-field input,.auth-field select,.auth-field textarea{
  border:1.5px solid var(--sm-line);border-radius:9px;padding:11px 12px;font-size:15px;
  background:var(--sm-paper);color:var(--sm-ink);font-family:inherit;width:100%;
  transition:border-color .15s ease, background-color .15s ease;
}
.auth-field textarea{resize:vertical;min-height:100px;}
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{border-color:var(--sm-orange-400);outline:none;background:var(--sm-paper-raised);}

.auth-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.auth-field-grid .auth-field{margin-bottom:0;}
@media (max-width:640px){.auth-field-grid{grid-template-columns:1fr;}}

.auth-hint{font-size:12px;color:var(--sm-ink-soft);margin:-10px 0 16px;line-height:1.5;}
.auth-hint a{color:var(--sm-teal-700);font-weight:700;text-decoration:none;}
.auth-hint a:hover{text-decoration:underline;}
.auth-hint img{width:18px;vertical-align:text-bottom;margin-left:2px;}

.auth-recaptcha{display:flex;justify-content:center;margin:6px 0 20px;}

.auth-links{margin-top:20px;padding-top:18px;border-top:1px dashed var(--sm-line);text-align:center;font-size:13px;color:var(--sm-ink-soft);display:flex;flex-direction:column;gap:8px;}
.auth-links a{color:var(--sm-ink-soft);text-decoration:none;}
.auth-links a strong{color:var(--sm-orange-700);font-weight:800;}
.auth-links a:hover strong{text-decoration:underline;}

/* Status notices — ok/bad triad, replacing notifications.css' hardcoded
   green/red so auth pages match every other result banner on the site. */
.auth-notice{border-radius:9px;padding:12px 16px;font-size:13px;margin:0 0 18px;font-weight:600;line-height:1.5;}
.auth-notice.ok{background:#e2f3e8;border:1px solid #bfe3ce;color:#1e6b40;}
.auth-notice.bad{background:#f7e4df;border:1px solid #e9c3b7;color:#8f3320;}
.auth-notice ul{margin:4px 0 0;padding-left:18px;}

@media (max-width:520px){
  .auth-hero{min-height:260px;padding:96px 20px 56px;}
  .auth-hero h1{font-size:30px;}
  .auth-panel{padding:26px 20px 22px;}
}