*, *::before, *::after { box-sizing: border-box; }
        body, h1, h2, h3, h4, h5, h6, input, select, textarea, button, label {
            font-family: 'Outfit', 'Inter', sans-serif !important;
        }

        .notif-main {
            display: flex;
            justify-content: center;
            padding: 28px 4% 50px;
            margin-left: 100px;
        }
        
        .notif-card {
            width: 100%;
            max-width: 1000px;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255,255,255,0.4);
            padding: 40px;
            border-radius: 32px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.06);
        }

        /* ─── Header Buttons ─────────────────────────── */
        .header-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: #f8fafc;
            padding: 12px 20px;
            border-radius: 18px;
            border: 1px solid #e2e8f0;
        }

        .btn-notif {
            padding: 10px 18px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
        }
        .btn-notif-outline { background: white; color: #475569; border: 1px solid #e2e8f0; }
        .btn-notif-outline:hover { background: #f1f5f9; border-color: #cbd5e1; }
        .btn-notif-primary { background: var(--grad-premium); color: white; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2); }
        .btn-notif-primary:hover { opacity: 0.9; transform: translateY(-1px); }

        /* ─── Tabs ────────────────────────────────────── */
        .notif-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 24px;
        }
        .tab-btn {
            background: #f1f5f9;
            border: none;
            padding: 10px 22px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
        }
        .tab-btn.active {
            background: #1e40af;
            color: white;
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
        }

        /* ─── Notification Item ───────────────────────── */
        .notif-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .notif-item {
            display: flex;
            gap: 20px;
            padding: 20px;
            background: white;
            border-radius: 20px;
            border: 1.5px solid #f1f5f9;
            transition: all 0.2s;
            position: relative;
            cursor: pointer;
        }
        .notif-item:hover { transform: scale(1.01); border-color: #e2e8f0; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
        .notif-item.unread { background: #f0f7ff; border-color: #bfdbfe; }
        .notif-item.unread::after {
            content: "";
            position: absolute;
            top: 20px; right: 20px;
            width: 10px; height: 10px;
            background: #3b82f6;
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        .notif-icon {
            width: 52px; height: 52px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: white;
            flex-shrink: 0;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }
        .icon-hacienda { background: linear-gradient(135deg, #1e40af, #3b82f6); }
        .icon-sistema { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
        .icon-inventario { background: linear-gradient(135deg, #059669, #10b981); }
        .icon-pago { background: linear-gradient(135deg, #d97706, #f59e0b); }

        .notif-content { flex: 1; }
        .notif-title { font-size: 1rem; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
        .notif-desc { font-size: 0.88rem; color: #475569; font-weight: 500; line-height: 1.5; }
        .notif-meta { margin-top: 10px; font-size: 0.75rem; color: #94a3b8; font-weight: 700; display: flex; align-items: center; gap: 12px; }
        .notif-meta i { font-size: 0.8rem; }

        /* Empty State */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-state i { font-size: 3rem; color: #e2e8f0; margin-bottom: 15px; display: block; }
        .empty-state h3 { color: #64748b; font-size: 1.2rem; }