/* components/auth/auth.css */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f172a; /* Cor de fundo idêntica ao site */
    z-index: 10000; /* Superior a tudo (inclusive popups) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner { 
    width: 40px; height: 40px; border: 4px solid var(--border-color); 
    border-top-color: var(--primary); border-radius: 50%; 
    animation: spin 1s linear infinite; margin-bottom: 20px; 
}

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

.loading-text { 
    font-size: 14px; color: var(--text-muted); font-weight: 500; letter-spacing: 1px; 
}

#login-screen { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); 
    z-index: 9998; display: none; align-items: center; justify-content: center; 
}

.login-card { 
    background-color: var(--bg-panel); padding: 32px; border-radius: var(--radius-md); 
    width: 90%; max-width: 360px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 16px; 
}

.login-card h2 { 
    text-align: center; font-size: 20px; margin-bottom: 8px; color: var(--text-main); 
}

.login-card input { 
    width: 100%; padding: 12px; background: var(--bg-body); 
    border: 1px solid var(--border-color); color: white; border-radius: var(--radius-sm); 
    outline: none; transition: border 0.2s; 
}

.login-card input:focus { 
    border-color: var(--primary); 
}

.login-card button { 
    width: 100%; padding: 12px; background: var(--primary); border: none; 
    color: white; font-weight: 600; border-radius: var(--radius-sm); 
    cursor: pointer; transition: background-color 0.2s;
}

.login-card button:hover { 
    background-color: var(--primary-hover); 
}

#login-error { 
    color: #ef4444; font-size: 12px; text-align: center; display: none; 
}