/* ==========================================================================
   DOOR / LOGIN SCREEN CSS
   ========================================================================== */

.door-body {
    background: #1a1a1a;
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.door-container {
    width: 100%; max-width: 400px; padding: 20px;
}

.door-card {
    background: rgba(30, 30, 35, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: translateY(0);
    transition: transform 0.3s;
}

/* Shake Animation para erro */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.door-card.shake { animation: shake 0.3s ease-in-out; }

.door-header {
    text-align: center; margin-bottom: 35px;
}

.app-logo {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #2D6CDF, #1E4B9C);
    border-radius: 18px; margin: 0 auto 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(45, 108, 223, 0.3);
}
.app-logo span { font-size: 36px; color: white; }

.door-header h1 {
    font-size: 1.8rem; margin: 0 0 5px; color: white;
}
.door-header p {
    color: rgba(255,255,255,0.5); font-size: 0.9rem; margin: 0;
}

.door-form { width: 100%; display: flex; flex-direction: column; gap: 15px; }

.input-group {
    position: relative;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center;
    padding: 0 15px;
    transition: border-color 0.2s;
}
.input-group:focus-within { border-color: #2D6CDF; }

.input-group span { color: rgba(255,255,255,0.4); font-size: 20px; }
.input-group input {
    background: transparent; border: none; outline: none;
    color: white; flex: 1; height: 50px;
    padding-left: 10px; font-size: 1rem; min-width: 0;
}
#toggle-password { pointer-events: auto !important; }

.door-btn {
    height: 50px; border-radius: 12px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s; border: none;
}

.door-btn.primary {
    background: #2D6CDF; color: white;
    box-shadow: 0 4px 15px rgba(45, 108, 223, 0.3);
}
.door-btn.primary:active { transform: scale(0.98); }

.divider {
    display: flex; align-items: center; color: rgba(255,255,255,0.2);
    font-size: 0.8rem; margin: 10px 0;
}
.divider::before, .divider::after {
    content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.divider span { padding: 0 10px; }

.door-btn.secondary {
    background: transparent; border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
.door-btn.secondary:hover { background: rgba(255,255,255,0.05); color: white; }

.door-footer {
    margin-top: 30px; text-align: center;
}
.door-footer p {
    color: rgba(255,255,255,0.2); font-size: 0.75rem;
}

/* Social Buttons */
.social-buttons {
    display: flex; gap: 10px; margin-bottom: 5px;
}
.social-btn {
    flex: 1; height: 50px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.social-btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.social-btn:active { transform: scale(0.96); }
.social-btn img { width: 24px; height: 24px; }