/* =============================================
   NOVA AUTH — style.css
   ============================================= */

:root, [data-theme="light"] {
  --text-xs:   clamp(0.72rem,  0.68rem + 0.22vw, 0.82rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.96rem + 0.22vw, 1.1rem);
  --text-lg:   clamp(1.1rem,   1rem    + 0.55vw, 1.4rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.2vw,  2.2rem);

  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;    --space-12:3rem;

  --radius-sm:0.375rem; --radius-md:0.75rem; --radius-lg:1.2rem;
  --radius-xl:1.75rem;  --radius-full:9999px;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --transition: 180ms var(--ease);
  --font: 'General Sans', Inter, sans-serif;

  --bg:        #f7f6f2;
  --surface:   rgba(255,255,255,0.8);
  --surface2:  #fbfbf9;
  --border:    rgba(40,37,29,0.12);
  --text:      #1f1b16;
  --muted:     #6f6a63;
  --primary:   #0f766e;
  --primary-h: #0b5c56;
  --primary-hl:rgba(15,118,110,0.12);
  --success:   #3b7c34;
  --error:     #dc2626;
  --warning:   #d97706;

  --shadow-lg: 0 18px 45px rgba(20,18,14,0.15);
  --shadow-sm: 0 8px 20px rgba(20,18,14,0.08);
  --g1: radial-gradient(circle at top left,  rgba(15,118,110,0.2), transparent 35%);
  --g2: radial-gradient(circle at bottom right, rgba(59,124,52,0.15), transparent 32%);
}

[data-theme="dark"] {
  --bg:       #0f1115;
  --surface:  rgba(22,25,31,0.84);
  --surface2: #171b21;
  --border:   rgba(255,255,255,0.09);
  --text:     #f3f5f7;
  --muted:    #9ba3af;
  --primary:  #27c0b2;
  --primary-h:#1c9a90;
  --primary-hl:rgba(39,192,178,0.14);
  --success:  #84cc16;
  --error:    #f87171;
  --warning:  #fbbf24;
  --shadow-lg:0 18px 45px rgba(0,0,0,0.38);
  --shadow-sm:0 8px 20px rgba(0,0,0,0.25);
  --g1: radial-gradient(circle at top left,  rgba(39,192,178,0.18), transparent 36%);
  --g2: radial-gradient(circle at bottom right, rgba(78,99,255,0.14), transparent 30%);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{
  margin:0; min-height:100dvh; font-family:var(--font); font-size:var(--text-base);
  color:var(--text);
  background: var(--g1), var(--g2),
    linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb,var(--bg) 92%,#000 8%) 100%);
  display:grid; place-items:center; padding:var(--space-4);
}
img,svg{display:block;max-width:100%;}
button,input{font:inherit;}
button{cursor:pointer;border:none;}
a{color:inherit;text-decoration:none;}

/* ── Inputs ── */
input:not([type="checkbox"]) {
  width:100%; border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface2) 82%,transparent);
  color:var(--text); border-radius:var(--radius-md);
  padding:0.9rem 1rem; outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
input::placeholder{color:var(--muted);}
input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-hl);}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}

/* ── Card shell ── */
.shell{
  width:min(100%,1100px);
  display:grid; grid-template-columns:1.08fr 0.92fr;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid var(--border); border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--shadow-lg); backdrop-filter:blur(18px);
}
.shell-single{
  width:min(100%,480px);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:clamp(var(--space-6),5vw,var(--space-12));
  box-shadow:var(--shadow-lg); backdrop-filter:blur(18px);
}

/* ── Brand panel ── */
.brand-panel{
  position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 18%,transparent),transparent),
             linear-gradient(145deg,color-mix(in srgb,var(--surface2) 82%,transparent),transparent 70%);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--space-8); padding:clamp(var(--space-6),5vw,var(--space-12));
}
.brand-panel::after{
  content:""; position:absolute; inset:auto -20% -25% auto;
  width:240px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 26%,transparent) 0%,transparent 68%);
  pointer-events:none;
}
.form-panel{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(var(--space-6),5vw,var(--space-12));
  background:color-mix(in srgb,var(--surface) 88%,transparent);
}
.form-box{width:min(100%,420px);}

/* ── Logo ── */
.logo-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);position:relative;z-index:1;}
.logo{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.logo-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 16%,transparent);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));}
.theme-btn{width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--surface2) 88%,transparent);border:1px solid var(--border);color:var(--text);display:grid;place-items:center;transition:transform var(--transition);}
.theme-btn:hover{transform:translateY(-2px);}

/* ── Hero ── */
.hero{position:relative;z-index:1;max-width:34rem;}
.eyebrow{display:inline-flex;align-items:center;padding:.4rem .75rem;border-radius:var(--radius-full);background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-4);}
h1{margin:0 0 var(--space-4);font-size:var(--text-xl);line-height:1.05;letter-spacing:-.04em;}
.hero p{margin:0;color:var(--muted);max-width:32ch;}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);position:relative;z-index:1;}
.stat{padding:var(--space-4);background:color-mix(in srgb,var(--surface2) 86%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.stat-v{display:block;font-size:var(--text-lg);font-weight:700;margin-bottom:2px;}
.stat-l{color:var(--muted);font-size:var(--text-xs);}

/* ── Form heading ── */
.form-heading{margin-bottom:var(--space-6);}
.form-heading h2{margin:0 0 var(--space-2);font-size:clamp(1.7rem,1.3rem+1vw,2.1rem);line-height:1.08;letter-spacing:-.03em;}
.form-heading p{margin:0;color:var(--muted);font-size:var(--text-sm);}

/* ── Social buttons ── */
.social-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-5);}
.social-btn{min-height:48px;border-radius:var(--radius-md);font-weight:600;background:color-mix(in srgb,var(--surface2) 90%,transparent);border:1px solid var(--border);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:transform var(--transition),background var(--transition);}
.social-btn:hover{transform:translateY(-2px);}

/* ── Divider ── */
.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-5);}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}

/* ── Fields ── */
.field-group{display:grid;gap:var(--space-4);}
.field label{display:inline-block;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:600;}
.pass-wrap{position:relative;}
.pass-toggle{position:absolute;inset:50% .85rem auto auto;translate:0 -50%;color:var(--muted);font-size:var(--text-sm);font-weight:600;background:transparent;}

/* ── Form meta ── */
.form-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin:var(--space-4) 0 var(--space-5);flex-wrap:wrap;}
.check-row{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-sm);}
.check-row input{width:18px;height:18px;accent-color:var(--primary);box-shadow:none;}
.link-btn{color:var(--primary);font-weight:600;transition:opacity var(--transition);}
.link-btn:hover{opacity:.75;}

/* ── Buttons ── */
.btn-primary{width:100%;min-height:50px;border-radius:var(--radius-md);font-weight:700;font-size:var(--text-sm);background:var(--primary);color:#fff;box-shadow:0 12px 24px color-mix(in srgb,var(--primary) 26%,transparent);transition:transform var(--transition),background var(--transition);}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);background:var(--primary-h);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;}
.btn-ghost{padding:.6rem 1.2rem;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);background:transparent;border:1px solid var(--border);color:var(--muted);transition:transform var(--transition),background var(--transition),color var(--transition);}
.btn-ghost:hover{transform:translateY(-2px);}
.btn-danger:hover{background:color-mix(in srgb,var(--error) 10%,transparent);color:var(--error);border-color:color-mix(in srgb,var(--error) 30%,transparent);}

/* ── Messages ── */
.message{min-height:1.4rem;margin-top:var(--space-4);font-size:var(--text-sm);font-weight:600;}
.message.success{color:var(--success);}
.message.error{color:var(--error);}
.message.info{color:var(--warning);}

/* ── Form footer ── */
.form-footer{margin-top:var(--space-5);text-align:center;color:var(--muted);font-size:var(--text-sm);}
.form-footer a{color:var(--primary);font-weight:700;}

/* ── Dashboard ── */
.dash-body{display:grid;place-items:start center;min-height:100dvh;padding:var(--space-6) var(--space-4);}
.dash-wrap{width:min(100%,1000px);display:flex;flex-direction:column;gap:var(--space-5);}
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-4) var(--space-6);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);border-radius:var(--radius-xl);backdrop-filter:blur(18px);box-shadow:var(--shadow-sm);}
.topbar-left{display:flex;align-items:center;gap:var(--space-4);}
.topbar-right{display:flex;align-items:center;gap:var(--space-3);}
.avatar{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--primary) 16%,transparent);border:2px solid color-mix(in srgb,var(--primary) 28%,var(--border));display:grid;place-items:center;font-weight:700;font-size:var(--text-sm);color:var(--primary);text-transform:uppercase;}
.user-info p{margin:0;}
.user-name{font-weight:700;font-size:var(--text-sm);}
.user-role{font-size:var(--text-xs);color:var(--muted);}
.badge{display:inline-block;padding:.3rem .7rem;border-radius:var(--radius-full);background:var(--primary-hl);color:var(--primary);font-size:var(--text-xs);font-weight:700;border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5);}
.panel-card{padding:var(--space-6);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);border-radius:var(--radius-xl);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);}
.panel-card h3{margin:0 0 var(--space-2);font-size:var(--text-base);font-weight:700;}
.panel-card p{margin:0;color:var(--muted);font-size:var(--text-sm);line-height:1.65;}
.card-icon{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));margin-bottom:var(--space-4);}
.data-row{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4);}
.data-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:color-mix(in srgb,var(--surface2) 80%,transparent);border:1px solid var(--border);border-radius:var(--radius-md);}
.data-item span:first-child{color:var(--muted);font-size:var(--text-sm);}
.data-item span:last-child{font-weight:600;font-size:var(--text-sm);}

/* ── Overlay de carga ── */
#pageLoader{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:999;transition:opacity .3s;}
#pageLoader.hidden{opacity:0;pointer-events:none;}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Skip link ── */
.skip{position:absolute;left:var(--space-4);top:-40px;background:var(--primary);color:#fff;padding:.7rem 1rem;border-radius:var(--radius-md);z-index:10;}
.skip:focus{top:var(--space-4);}

/* ── Responsive ── */
@media(max-width:920px){
  .shell{grid-template-columns:1fr;}
  .brand-panel{min-height:280px;}
}
@media(max-width:640px){
  body{padding:var(--space-3);}
  .brand-panel,.form-panel{padding:var(--space-5);}
  .stats,.social-row{grid-template-columns:1fr;}
  .form-meta{flex-direction:column;align-items:flex-start;}
  .topbar,.topbar-right{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}