/* ============================================================
   Club The Barbers — Login / Register CSS
   ============================================================ */

body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-vh);
    background: var(--bg);
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Fondo ── */
body.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% -15%, rgba(201,162,39,0.11) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 5%   90%, rgba(201,162,39,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 45% 35% at 95%  80%, rgba(201,162,39,0.05) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: loginGlow 10s ease-in-out infinite alternate;
}

@keyframes loginGlow {
    from { opacity: 0.7; transform: scale(1);    }
    to   { opacity: 1;   transform: scale(1.03); }
}

body.login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 60px,
        rgba(255,255,255,0.013) 60px,
        rgba(255,255,255,0.013) 61px
    );
    pointer-events: none;
    z-index: 0;
}

/* Partículas */
.login-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.login-particles span {
    position: absolute;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: loginParticle var(--dur, 12s) ease-in-out infinite var(--delay, 0s);
}

.login-particles span:nth-child(1)  { left:8%;   top:88%; width:2px; height:2px; --dur:13s; --delay:0s;    --drift:18px;  }
.login-particles span:nth-child(2)  { left:88%;  top:76%; width:3px; height:3px; --dur:9s;  --delay:-3s;   --drift:-22px; }
.login-particles span:nth-child(3)  { left:25%;  top:92%; width:2px; height:2px; --dur:15s; --delay:-6s;   --drift:14px;  }
.login-particles span:nth-child(4)  { left:72%;  top:82%; width:2px; height:2px; --dur:11s; --delay:-1s;   --drift:-16px; }
.login-particles span:nth-child(5)  { left:55%;  top:94%; width:3px; height:3px; --dur:10s; --delay:-4s;   --drift:20px;  }
.login-particles span:nth-child(6)  { left:93%;  top:62%; width:2px; height:2px; --dur:8s;  --delay:-7s;   --drift:-12px; }
.login-particles span:nth-child(7)  { left:14%;  top:66%; width:2px; height:2px; --dur:12s; --delay:-2s;   --drift:24px;  }
.login-particles span:nth-child(8)  { left:36%;  top:78%; width:4px; height:4px; --dur:18s; --delay:-11s;  --drift:-18px; }
.login-particles span:nth-child(9)  { left:64%;  top:70%; width:2px; height:2px; --dur:14s; --delay:-8s;   --drift:12px;  }
.login-particles span:nth-child(10) { left:4%;   top:48%; width:3px; height:3px; --dur:16s; --delay:-12s;  --drift:28px;  }
.login-particles span:nth-child(11) { left:18%;  top:96%; width:2px; height:2px; --dur:10s; --delay:-5s;   --drift:-20px; }
.login-particles span:nth-child(12) { left:44%;  top:86%; width:2px; height:2px; --dur:19s; --delay:-13s;  --drift:16px;  }
.login-particles span:nth-child(13) { left:82%;  top:92%; width:4px; height:4px; --dur:12s; --delay:-9s;   --drift:-26px; }
.login-particles span:nth-child(14) { left:97%;  top:88%; width:2px; height:2px; --dur:15s; --delay:-14s;  --drift:-18px; }
.login-particles span:nth-child(15) { left:31%;  top:64%; width:3px; height:3px; --dur:11s; --delay:-6.5s; --drift:22px;  }
.login-particles span:nth-child(16) { left:68%;  top:54%; width:2px; height:2px; --dur:17s; --delay:-10s;  --drift:-14px; }
.login-particles span:nth-child(17) { left:11%;  top:72%; width:1px; height:1px; --dur:9s;  --delay:-1.5s; --drift:10px;  }
.login-particles span:nth-child(18) { left:50%;  top:74%; width:2px; height:2px; --dur:13s; --delay:-7.5s; --drift:-12px; }
.login-particles span:nth-child(19) { left:77%;  top:68%; width:3px; height:3px; --dur:18s; --delay:-15s;  --drift:19px;  }
.login-particles span:nth-child(20) { left:22%;  top:58%; width:2px; height:2px; --dur:14s; --delay:-4.5s; --drift:-16px; }
.login-particles span:nth-child(21) { left:40%;  top:98%; width:3px; height:3px; --dur:12s; --delay:-10.5s; --drift:25px; }
.login-particles span:nth-child(22) { left:59%;  top:62%; width:1px; height:1px; --dur:10s; --delay:-2.5s; --drift:-10px; }
.login-particles span:nth-child(23) { left:86%;  top:50%; width:2px; height:2px; --dur:16s; --delay:-6.8s; --drift:16px;  }
.login-particles span:nth-child(24) { left:2%;   top:82%; width:2px; height:2px; --dur:20s; --delay:-16s;  --drift:24px;  }
.login-particles span:nth-child(25) { left:47%;  top:56%; width:3px; height:3px; --dur:15s; --delay:-9.5s; --drift:-18px; }
.login-particles span:nth-child(26) { left:70%;  top:96%; width:2px; height:2px; --dur:11s; --delay:-3.5s; --drift:13px;  }
.login-particles span:nth-child(27) { left:34%;  top:50%; width:1px; height:1px; --dur:13s; --delay:-11.5s; --drift:-14px; }
.login-particles span:nth-child(28) { left:91%;  top:98%; width:3px; height:3px; --dur:17s; --delay:-5.5s; --drift:-24px; }

@keyframes loginParticle {
    0%   { opacity: 0;   transform: translate(0, 0)      scale(1);   }
    15%  { opacity: 0.6; }
    85%  { opacity: 0.2; }
    100% { opacity: 0;   transform: translate(var(--drift, 0), -180px) scale(0.3); }
}

/* ── Contenedor ── */
.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    animation: loginReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginReveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Back link ── */
.login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 500;
    margin-bottom: 12px;
    transition: color 0.2s ease;
    text-decoration: none;
}

.login-back:hover { color: var(--gold); }
.login-back svg   { width: 13px; height: 13px; }

/* ── Logo ── */
.login-logo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.login-logo img {
    max-width: 220px;
    animation: logoPulse 5s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(201,162,39,0.12)); }
    50%       { filter: drop-shadow(0 0 40px rgba(201,162,39,0.28)); }
}

/* ── Card ── */
.login-card {
    background: rgba(23, 26, 33, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.55),
                0 0 0 1px rgba(201,162,39,0.05);
    backdrop-filter: blur(8px);
}

.login-card h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text);
}

.login-card .subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 22px;
    line-height: 1.5;
}

/* ── Inputs con ícono ── */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    display: flex;
    transition: color 0.2s ease;
}

.input-icon svg { width: 15px; height: 15px; }

.input-group:focus-within .input-icon { color: var(--gold); }

.input-group .form-control {
    padding-left: 38px;
}

.toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    display: flex;
    transition: color 0.2s ease;
}

.toggle-pass:hover { color: var(--text-muted); }
.toggle-pass svg   { width: 15px; height: 15px; }

/* Focus ring dorado en inputs */
.form-control:focus {
    outline: none;
    border-color: rgba(201,162,39,0.5);
    box-shadow: 0 0 0 3px rgba(201,162,39,0.08);
}

/* ── Botón ── */
.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--gold);
    color: #0f1115;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

/* Shimmer */
.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.2) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
}

.btn-login:not(:disabled):hover::after { transform: translateX(120%); }
.btn-login:not(:disabled):hover  { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,162,39,0.35); }
.btn-login:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-login svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Spinner dentro del botón */
.btn-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(15,17,21,0.3);
    border-top-color: #0f1115;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

.btn-login.loading .btn-spinner  { display: block; }
.btn-login.loading .btn-icon     { display: none; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Error ── */
.login-error {
    display: none;
    padding: 10px 14px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--radius);
    color: #fca5a5;
    font-size: 0.82rem;
    margin-bottom: 16px;
    animation: shakeX 0.4s ease both;
}

.login-error.visible { display: flex; align-items: center; gap: 8px; }
.login-error svg     { width: 14px; height: 14px; flex-shrink: 0; }

@keyframes shakeX {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-5px); }
    40%,80% { transform: translateX(5px); }
}

/* ── Footer ── */
.login-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 0.75rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.login-footer a {
    color: var(--gold);
    font-weight: 500;
    transition: color 0.2s ease;
}

.login-footer a:hover { color: var(--gold-light); }

.login-footer .sep {
    color: var(--border-light);
}

/* Separador visual entre form groups */
.form-group { margin-bottom: 14px; }
.form-group:last-of-type { margin-bottom: 0; }

@media (max-width: 480px) {
    .login-card     { padding: 24px 18px; }
    .login-logo img { max-width: 180px; }
}