/* Reset Básico */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f6f9; color: #333; }

/* Utilitários de Visibilidade */
.view-hidden { display: none !important; }
.view-active { display: flex; }

/* --- TELA DE LOGIN --- */
#login-container { height: 100vh; justify-content: center; align-items: center; background: #2c3e50; }
.login-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
.login-box h2 { text-align: center; margin-bottom: 20px; color: #2c3e50; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 14px; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.btn-primary { width: 100%; padding: 10px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
.btn-primary:hover { background: #2980b9; }
.link-small { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: #7f8c8d; text-decoration: none; }

/* --- APLICAÇÃO PRINCIPAL --- */
#app-container { height: 100vh; display: flex; }

/* Sidebar (Menu) */
.sidebar { width: 250px; background: #2c3e50; color: white; display: flex; flex-direction: column; }
.sidebar .logo { padding: 20px; font-size: 24px; font-weight: bold; text-align: center; background: #1a252f; }
.sidebar nav { flex: 1; padding-top: 20px; }
.nav-btn { width: 100%; padding: 15px 20px; background: none; border: none; color: #bdc3c7; text-align: left; cursor: pointer; border-bottom: 1px solid #34495e; }
.nav-btn:hover { background: #34495e; color: white; }
.btn-danger { padding: 15px; background: #e74c3c; border: none; color: white; cursor: pointer; margin-top: auto; }

/* Conteúdo Principal */
.content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
header { background: white; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; }
.page-view { padding: 20px; display: none; }
.page-view.view-active { display: block; }

/* Responsividade Básica (Mobile) */
@media (max-width: 768px) {
    #app-container { flex-direction: column; }
    .sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; }
    .sidebar nav { display: flex; flex-wrap: wrap; }
    .nav-btn { width: auto; padding: 10px; border-bottom: none; }
    .btn-danger { width: 100%; }
}