/* ============================================================
   ADMIN CRM JUCELIA VARGAS
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

   :root {
     --preto: #0c0c0c;
     --preto-claro: #141414;
     --preto-borda: #222222;
     --vermelho: #e51d34;
     --vermelho-hover: #c41226;
     --branco: #ffffff;
     --texto-muted: #888888;
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }
   
   body {
     font-family: 'Inter', sans-serif;
     background-color: var(--preto);
     color: var(--branco);
     display: flex;
     min-height: 100vh;
   }
   
   /* LOGIN PANE */
   .login-container {
     width: 100%; max-width: 400px;
     margin: auto; padding: 40px;
     background: var(--preto-claro);
     border: 1px solid var(--preto-borda);
     border-radius: 8px;
     text-align: center;
   }
   .login-container h1 {
     font-family: 'Playfair Display', serif;
     margin-bottom: 24px;
   }
   .login-container h1 span { color: var(--vermelho); }
   .login-container input {
     width: 100%; padding: 12px; margin-bottom: 16px;
     background: transparent; border: 1px solid var(--preto-borda);
     color: var(--branco); border-radius: 4px;
   }
   .login-container button {
     width: 100%; padding: 14px; background: var(--vermelho);
     color: var(--branco); border: none; border-radius: 4px;
     font-weight: 600; cursor: pointer;
   }
   .login-container button:hover { background: var(--vermelho-hover); }
   
   /* SIDEBAR */
   .sidebar {
     width: 260px; background: var(--preto-claro);
     border-right: 1px solid var(--preto-borda);
     display: flex; flex-direction: column;
   }
   .sidebar-header {
     padding: 24px; border-bottom: 1px solid var(--preto-borda);
     font-family: 'Playfair Display', serif; font-size: 1.5rem;
   }
   .sidebar-header span { color: var(--vermelho); }
   .sidebar-nav { padding: 24px 0; flex: 1; }
   .sidebar-nav a {
     display: block; padding: 12px 24px;
     color: var(--texto-muted); text-decoration: none;
     font-size: .95rem; border-left: 3px solid transparent;
   }
   .sidebar-nav a:hover, .sidebar-nav a.active {
     color: var(--branco); background: rgba(255,255,255,.02);
     border-left-color: var(--vermelho);
   }
   .sidebar-footer {
     padding: 24px; border-top: 1px solid var(--preto-borda);
   }
   .sidebar-footer a { color: var(--texto-muted); text-decoration: none; font-size: .85rem; }
   
   /* MAIN CONTENT */
   .main-content {
     flex: 1; padding: 40px; overflow-y: auto;
   }
   .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
   .header h2 { font-family: 'Playfair Display', serif; font-size: 2rem; }
   
   /* CARDS / DASHBOARD */
   .dashboard-grid {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 40px;
   }
   .stat-card {
     background: var(--preto-claro); padding: 24px;
     border: 1px solid var(--preto-borda); border-radius: 8px;
   }
   .stat-card .label { font-size: .85rem; color: var(--texto-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
   .stat-card .value { font-size: 2.5rem; font-weight: 600; font-family: 'Playfair Display', serif; }
   
   /* TABELAS */
   .table-container {
     background: var(--preto-claro); border: 1px solid var(--preto-borda); border-radius: 8px;
     overflow-x: auto;
   }
   table { width: 100%; border-collapse: collapse; text-align: left; }
   th, td { padding: 16px 24px; border-bottom: 1px solid var(--preto-borda); }
   th { font-size: .85rem; color: var(--texto-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
   td { font-size: .95rem; }
   tr:last-child td { border-bottom: none; }
   
   .badge {
     display: inline-block; padding: 4px 8px; border-radius: 4px;
     font-size: .75rem; font-weight: 600; text-transform: uppercase;
     background: rgba(255,255,255,.05); color: var(--texto-muted);
   }
   .badge.red { background: rgba(229,29,52,.1); color: var(--vermelho); }
   
   @media(max-width: 768px) {
     body { flex-direction: column; }
     .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--preto-borda); }
     .main-content { padding: 20px; }
   }