/* ══════════════════════════════════════════════════════════════════════
   GOOGLE FONTS
══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   TOKENS — Midnight Pro LIGHT
══════════════════════════════════════════════════════════════════════ */
:root {
    --a-primary:        #6A58F0;
    --a-primary-dark:   #5A48E0;
    --a-primary-glow:   rgba(106,88,240,.16);
    --a-primary-shadow: rgba(106,88,240,.30);
    --a-bg:             #F5F6F8;
    --a-card-bg:        #FFFFFF;
    --a-card-border:    rgba(28,25,30,.07);
    --a-card-shadow:    0 0 0 1px rgba(255,255,255,.8) inset, 0 24px 64px rgba(20,22,30,.12);
    --a-text:           #16171D;
    --a-text-sub:       #5B5D6B;
    --a-text-muted:     #9A9CA8;
    --a-input-bg:       #F0F1F4;
    --a-input-border:   #E3E5EA;
    --a-input-focus-bg: rgba(106,88,240,.06);
    --a-err-bg:         rgba(229,72,77,.08);
    --a-err-color:      #C0333A;
    --a-err-border:     rgba(229,72,77,.22);
    --a-grad-1:         rgba(106,88,240,.07);
    --a-grad-2:         rgba(45,212,191,.05);
}

/* ── DARK OVERRIDES — Midnight Pro ─────────────────────────────────── */
[data-theme="dark"] {
    --a-primary:        #7C6BFF;
    --a-primary-dark:   #6A58F0;
    --a-primary-glow:   rgba(124,107,255,.24);
    --a-primary-shadow: rgba(124,107,255,.42);
    --a-bg:             #0A0A0C;
    --a-card-bg:        rgba(22,22,28,.96);
    --a-card-border:    rgba(255,255,255,.07);
    --a-card-shadow:    0 0 0 1px rgba(255,255,255,.04) inset, 0 32px 80px rgba(0,0,0,.72), 0 0 60px rgba(124,107,255,.10);
    --a-text:           #E8E8EE;
    --a-text-sub:       #9A9AA8;
    --a-text-muted:     #5E5E6C;
    --a-input-bg:       rgba(255,255,255,.06);
    --a-input-border:   rgba(255,255,255,.09);
    --a-input-focus-bg: rgba(124,107,255,.10);
    --a-err-bg:         rgba(251,113,133,.10);
    --a-err-color:      #FB7185;
    --a-err-border:     rgba(251,113,133,.25);
    --a-grad-1:         rgba(124,107,255,.12);
    --a-grad-2:         rgba(45,212,191,.06);
}

/* ══════════════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%,  var(--a-grad-1) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 0%  100%, var(--a-grad-2) 0%, transparent 50%),
        var(--a-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    color: var(--a-text);
}

/* ══════════════════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════════════════ */
.auth-wrapper {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

.auth-card {
    background: var(--a-card-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--a-card-border);
    border-radius: 14px;
    padding: 44px 38px 40px;
    box-shadow: var(--a-card-shadow);
}

/* ══════════════════════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════════════════════ */
.auth-logo {
    text-align: center;
    margin-bottom: 36px;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--a-primary);
    filter: drop-shadow(0 0 18px var(--a-primary-glow));
}
.logo-icon svg {
    width: 56px;
    height: 56px;
    display: block;
}

.auth-logo h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--a-text);
    letter-spacing: -.5px;
    margin-bottom: 6px;
}

.auth-logo p {
    font-size: 13.5px;
    color: var(--a-text-muted);
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════
   ALERT
══════════════════════════════════════════════════════════════════════ */
.alert {
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-error {
    background: var(--a-err-bg);
    color: var(--a-err-color);
    border: 1px solid var(--a-err-border);
}
.alert-error::before { content: '⚠'; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════════ */
.auth-form { display: none; }
.auth-form.active { display: block; margin-top: 4px; }

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--a-text-muted);
    margin-bottom: 7px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--a-input-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--a-text);
    background: var(--a-input-bg);
    outline: none;
    transition: all .2s;
    -webkit-appearance: none;
}
.form-group input::placeholder { color: var(--a-text-muted); }
.form-group input:hover  {
    border-color: rgba(128,128,128,.2);
    background: var(--a-input-bg);
    filter: brightness(1.03);
}
.form-group input:focus  {
    border-color: var(--a-primary);
    background: var(--a-input-focus-bg);
    box-shadow: 0 0 0 3px var(--a-primary-glow);
}

/* Password field */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 48px; }

.toggle-pass {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer;
    font-size: 17px;
    opacity: .35;
    transition: opacity .15s;
    padding: 4px; line-height: 1;
    color: var(--a-text);
}
.toggle-pass:hover { opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTON
══════════════════════════════════════════════════════════════════════ */
.btn-primary {
    background: var(--a-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: all .16s;
    box-shadow: 0 4px 18px var(--a-primary-shadow);
    letter-spacing: .1px;
}
.btn-primary:hover  { background: var(--a-primary-dark); box-shadow: 0 6px 26px var(--a-primary-shadow); }
.btn-primary:active { transform: scale(.98); }
.btn-block { width: 100%; }

.auth-note {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--a-text-muted);
    line-height: 1.5;
}
.auth-note a {
    color: var(--a-primary);
    font-weight: 700;
    text-decoration: none;
    transition: color .15s;
}
.auth-note a:hover { color: var(--a-primary-dark); text-decoration: underline; }

/* Mostrar el switch correcto según qué form esté activo */
.auth-note .auth-note-login,
.auth-note .auth-note-register { display: none; }
body[data-mode="login"]    .auth-note .auth-note-login    { display: inline; }
body[data-mode="register"] .auth-note .auth-note-register { display: inline; }

.auth-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--a-text-muted);
    line-height: 1.5;
}

/* ── Tabs Login / Crear cuenta ── */
.auth-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    margin-bottom: 22px;
    background: var(--a-input-bg);
    border: 1.5px solid var(--a-input-border);
    border-radius: 8px;
}
.auth-tab {
    flex: 1;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--a-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    letter-spacing: .1px;
}
.auth-tab:hover { color: var(--a-text); }
.auth-tab.active {
    background: var(--a-card-bg);
    color: var(--a-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════════════════════════════
   ENCRYPTION KEY SECTION
══════════════════════════════════════════════════════════════════════ */
.enc-key-separator {
    display: flex;
    align-items: center;
    margin: 6px 0 18px;
    gap: 10px;
    color: var(--a-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.enc-key-separator::before,
.enc-key-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--a-input-border);
}

.enc-key-hint {
    font-size: 12px;
    color: var(--a-text-muted);
    margin-top: 7px;
    line-height: 1.65;
}
.enc-key-hint strong { color: var(--a-err-color); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .auth-card { padding: 34px 24px 30px; border-radius: 12px; }
    .auth-logo h1 { font-size: 24px; }
    .logo-icon svg { width: 48px; height: 48px; }
}