/* ==========================================================================
   CampaStock · Pantallas de cuenta (registro, soporte, invitación)
   Capa de PANTALLA. Tokens y primitivas: /theme.css
   ========================================================================== */

.auth-page{min-height:100vh;background:var(--cs-ink-900);color:#fff}

.site-header{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  max-width:1180px;margin:0 auto;padding:0 var(--sp-5);min-height:68px;
}
.site-header nav{display:flex;gap:var(--sp-4);align-items:center}
.site-header>a:not(.site-brand){
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:#d5dcd7;font-size:var(--fs-sm);font-weight:700;text-decoration:none;
}
.site-header>a:not(.site-brand):hover{color:#fff}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800}
.site-brand span{
  width:34px;height:34px;flex:none;border-radius:var(--r-sm);
  background:linear-gradient(160deg,var(--cs-brass-200),var(--cs-brass-400));color:var(--cs-ink-900);
  display:grid;place-items:center;font-weight:900;font-size:var(--fs-xs);
}
.site-brand b{font-size:var(--fs-md)}

.auth-wrap{
  position:relative;min-height:calc(100vh - 68px);display:grid;place-items:start center;
  padding:var(--sp-7) var(--sp-5) var(--sp-9);
}
.auth-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(80% 60% at 80% 0%,rgba(232,168,58,.14) 0%,rgba(232,168,58,0) 60%),
    url('/assets/campastock-campa.webp') center/cover no-repeat;
  opacity:.26;
}
.auth-panel{
  position:relative;z-index:1;width:min(100%,480px);
  background:var(--cs-surface);color:var(--cs-ink-800);
  padding:var(--sp-7);border-radius:var(--r-xl);box-shadow:var(--sh-dark);
}
.auth-panel.wide{width:min(100%,720px)}
.auth-panel h1{font-size:clamp(1.55rem,4.4vw,2rem);margin-bottom:var(--sp-2)}
.auth-panel>p,.auth-panel>div>p{color:var(--cs-ink-400);font-size:var(--fs-sm)}
.kicker{
  display:block;margin:0 0 var(--sp-2);
  font-size:var(--fs-3xs);font-weight:800;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--cs-brass-500);
}
.auth-form{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.auth-form.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-form label{display:grid;gap:6px}
.auth-form label>span{font-size:var(--fs-2xs);font-weight:800;color:var(--cs-ink-500)}
.auth-form small{color:var(--cs-ink-400);font-size:var(--fs-2xs)}
.auth-form .full{grid-column:1/-1}
.auth-form .button{margin-top:var(--sp-1);min-height:50px;font-size:var(--fs-md)}
.auth-help{color:var(--cs-ink-400);font-size:var(--fs-2xs);margin:0}

.support-box{
  margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--cs-border);border-left:4px solid var(--cs-brass-300);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--cs-surface-2);
}
.support-box b{display:block;font-size:var(--fs-sm);font-weight:800;margin-bottom:4px}
.support-box p{color:var(--cs-ink-400);font-size:var(--fs-sm)}
.support-box .button{margin-top:var(--sp-3)}

.auth-footnote{position:relative;z-index:1;margin-top:var(--sp-5);color:#a9b4ad;font-size:var(--fs-2xs);text-align:center}
.auth-footnote a{color:var(--cs-brass-200);font-weight:700}

@media(max-width:640px){
  .auth-panel{padding:var(--sp-5)}
  .auth-form.two-cols{grid-template-columns:1fr}
  .auth-form .full{grid-column:1}
  .auth-wrap{padding:var(--sp-5) var(--sp-4) var(--sp-8)}
}

.auth-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-top:var(--sp-3)}